/* ==========================================================================
   erikyorgason.com
   Sections: 1. Tokens  2. Base  3. Layout  4. Components  5. Page sections
             6. Animations  7. Responsive
   Breakpoints (same as the old Webflow site):
     large desktop >= 1280px, tablet <= 991px, phone landscape <= 767px, phone <= 479px
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */
:root {
  --background: #020305;
  --text: #fff;
  --text-muted: #fff9;
  --gold: #cc9425;
  --gold-dark: #ba8425;
  --panel: #ffffff0d;
  --line: #e3e0de;
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic, used by most animations */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);    /* easeOutQuart, used by the slide-up reveals */
  --radius: 1.5rem;
  --gutter: 2.5rem;
  --font: "Fraunces", serif;
}

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 300;
  line-height: 120%;
  overflow-x: hidden;
}

h1, h2, h3, .h3 { margin: 0; font-family: var(--font); font-weight: 400; }
h1 { font-size: 7rem; line-height: 90%; letter-spacing: -0.2rem; }
h2 { font-size: 5rem; line-height: 100%; letter-spacing: -0.2rem; }
h3, .h3 { font-size: 2.5rem; line-height: 90%; letter-spacing: -0.1rem; }
h1 strong, h2 strong, h3 strong { font-weight: 400; }

p { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 140%; }

a { color: inherit; text-decoration: none; }

img { display: inline-block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Text helpers */
.accent { color: var(--gold); font-weight: 400; }
.body-small { font-size: 1rem; }
.body-large { font-size: 2.5rem; line-height: 100%; }
.body-large.max-1000 { font-size: 1.9rem; font-weight: 300; }
.body-large.max-1000 strong { font-weight: 700; }
.heading-3 { line-height: 100%; }
.max-400 { max-width: 400px; }
.max-600 { max-width: 600px; }
.max-800 { max-width: 800px; }
.max-1000 { max-width: 1050px; }

/* 3. Layout -------------------------------------------------------------- */
.section { position: relative; padding-left: var(--gutter); padding-right: var(--gutter); }

.container { position: relative; z-index: 1; width: 100%; max-width: 1360px; margin: 0 auto; }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.5rem; }
.span-12 { grid-column: 1 / -1; }

.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.stack-tight { gap: 1rem; }
.stack-center { align-items: center; text-align: center; }

.panel { background-color: var(--panel); border-radius: var(--radius); }

.background-mesh {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%; pointer-events: none;
}

.divider { height: 1px; background-color: #160e084d; }

/* Rock texture behind the top of each page (and behind the portrait on the homepage).
   Fades into the page background at the bottom. */
.hero-texture {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1400px;
  object-fit: cover; object-position: 50% 30%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

/* 4. Components ---------------------------------------------------------- */

/* Gold pill button */
.button-primary {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 1.125rem 2rem;
  border-radius: 50rem;
  background-color: var(--gold);
  color: var(--text);
  font-family: var(--font); font-weight: 500; line-height: 100%; letter-spacing: -0.015rem;
  transition: background-color 0.4s var(--ease);
  cursor: pointer;
}
.button-primary:hover { background-color: var(--gold-dark); }

/* Text + icon link (navbar items, socials, "View Live Website") */
.link-button {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font); font-weight: 500; line-height: 100%; letter-spacing: -0.015rem;
  transition: opacity 0.4s var(--ease);
}
.link-button:hover { opacity: 0.6; }
.underline-text { border-bottom: 1px solid var(--text); margin-top: 0.125rem; padding-bottom: 0.125rem; }

.icon { width: 16px; height: 16px; max-width: none; }
.icon-logo { width: 22px; height: auto; }
.icon-linkedin { margin-top: -3px; }

.socials { display: flex; gap: 1.5rem; }

.button-row { display: flex; gap: 1.5rem; align-items: center; }

/* Tags with a dot, used in services and the resume */
.tag-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tag-list-row { flex-direction: row; }
.tag { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; line-height: 100%; letter-spacing: -0.015rem; }
.dot { width: 4px; height: 4px; flex: none; border-radius: 100%; background-color: var(--text); }

.long-label {
  display: flex; justify-content: center; align-items: center; gap: 3rem;
  padding: 1.5rem 3.5rem;
}

.text-link {
  color: var(--gold);
  border-bottom: 1px solid #160e0866;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.text-link:hover { color: var(--gold-dark); border-bottom-color: #160e0899; }

.footer-link { cursor: pointer; transition: opacity 0.4s var(--ease); }
.footer-link:hover { opacity: 0.5; }
.footer-link:active { opacity: 0.7; }

/* Image frame with rounded corners. main.js adds the orange wipe. */
.image-frame { position: relative; display: flex; overflow: hidden; border-radius: var(--radius); }
.image-frame > img { width: 100%; height: 100%; object-fit: cover; }

/* Navbar ----------------------------------------------------------------- */
.navbar {
  position: fixed; inset: 0 0 auto; z-index: 800;
  padding: 1.5rem var(--gutter);
  /* --nav-solid goes from 0 (top of page) to 1 (scrolled), set by main.js */
  background-color: rgb(2 3 5 / var(--nav-solid, 0));
  border-bottom: 1px solid rgb(227 224 222 / var(--nav-solid, 0));
  transition: transform 1s var(--ease);
}
.navbar.is-hidden { transform: translateY(-100%); }
.navbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.navbar-home { font-weight: 400; }
.navbar-cta { display: flex; }

/* Menu + contact overlays ----------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: 0.5rem;
  background-color: #1116;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.overlay > .panel {
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 0.5s var(--ease), transform 1s var(--ease);
}
.overlay.is-open { opacity: 1; }
.overlay.is-open > .panel { opacity: 1; transform: none; }

.close-button { width: 48px; height: 48px; flex: none; border-radius: 500px; transition: opacity 0.3s var(--ease); }
.close-button:hover { opacity: 0.6; }
.close-button img { width: 100%; height: 100%; }
.close-button-corner { position: absolute; top: 3rem; right: 3rem; }

.menu-panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4rem;
  width: 400px; max-width: 100%;
  padding: 4rem 4rem 3.5rem 3.5rem;
}
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; width: 100%; }

.form-panel {
  position: relative;
  width: 100%; max-width: 550px;
  padding: 2.5rem 2rem;
  background-color: var(--background);
}
.form-panel form { display: flex; flex-direction: column; align-items: flex-start; }
.form-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2rem; }
.form-title { font-weight: 600; letter-spacing: -0.02rem; }
.field-label { display: block; margin-bottom: 0.75rem; font-weight: 400; }
.text-field {
  display: block; width: 100%;
  margin-bottom: 1.5rem;
  padding: 1.375rem 1.5rem;
  border: 0; border-radius: 0.75rem;
  background-color: #fff;
  color: #160e08;
  font: 500 1rem/120% var(--font);
}
.text-field::placeholder { color: #160e0899; }
.text-area { min-height: 160px; resize: vertical; }
.form-message { padding: 1.25rem; border-radius: 0.75rem; background-color: var(--panel); }
.form-error { margin-top: 1rem; background-color: #ffdede; color: #160e08; }

/* 5. Page sections ------------------------------------------------------- */

/* Hero (homepage and case studies) */
.section-hero { padding-top: 12rem; }
.hero-intro { align-self: center; }
.hero-portrait { height: 760px; margin-top: 3rem; }

/* Homepage portrait backdrop (see section 10 of main.js) */
.portrait-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.portrait-stage-texture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
.portrait-stage-photo {
  position: absolute; top: 0; left: 50%;
  /* Width, height and --y (vertical position) are set by main.js to match the spacer in the hero */
  width: var(--w, 100%); height: var(--h, 760px);
  transform: translate(-50%, var(--y, 0px));
  background: url("/assets/images/erik-portrait.webp") 50% 0 / contain no-repeat;
}
.portrait-stage-blur {
  position: absolute; inset: 0;
  background-color: rgb(2 3 5 / 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: var(--blur, 0);
}
.about { display: flex; flex-direction: column; gap: 3.5rem; margin-top: 5.5rem; margin-bottom: 7.5rem; }
.about-block { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center; }
.about-block-left { align-items: flex-start; gap: 2rem; text-align: left; }

/* Section spacing */
.section-work { padding-top: 7.5rem; }
.section-rest { margin-top: 112px; padding-top: 8rem; padding-bottom: 8rem; }
.section-rest + .section-rest { margin-top: 0; padding-top: 7rem; } /* 240px between back-to-back sections */
.section-resume { padding-bottom: 7rem; } /* 240px above the footer */
.section-gallery { padding-top: 6rem; }
.section-contact { padding-top: 8rem; padding-bottom: 2.5rem; }

.heading-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; }
.heading-row-work { margin-bottom: 6rem; }
.heading-column {
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
  margin-bottom: 4rem; text-align: center;
}

/* Selected Work grid */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.work-grid-item-offset .work-card { margin-top: 16rem; }
.work-card { display: flex; flex-direction: column; gap: 2.5rem; will-change: transform; }
.work-image { height: 650px; justify-content: center; align-items: center; }
.work-image-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.view-badge {
  position: absolute; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  width: 156px; height: 156px;
  border-radius: 100%;
  background-color: var(--gold);
  /* --mx / --my follow the mouse (desktop only), set by main.js */
  translate: var(--mx, 0%) var(--my, 0%);
  scale: 0;
  transition: scale 1s var(--ease), translate 0.6s var(--ease-out);
}
.work-card:hover .work-image-img { transform: scale(1.1); }
.work-card:hover .view-badge { scale: 1; }

/* Testimonial slider */
.slider { position: relative; overflow: hidden; }
.slider-mask { position: relative; overflow: hidden; padding-top: 5rem; padding-bottom: 4rem; }
.slider-track { display: flex; transition: transform 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.slide { flex: 0 0 100%; display: flex; justify-content: center; align-items: flex-start; }
.slide-inner {
  display: flex; flex-direction: column; align-items: center; gap: 3rem;
  width: 100%; max-width: 70%; text-align: center;
}
.testimonial-text { display: flex; flex-direction: column; gap: 1.5rem; }
.testimonial-author { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.avatar { width: 48px; height: 48px; border-radius: 100%; object-fit: cover; }
.slider-arrow {
  position: absolute; bottom: 3rem; z-index: 3;
  display: flex; justify-content: center; align-items: center;
  width: 48px; height: 48px;
  border-radius: 100%;
  background-color: var(--gold);
}
.slider-arrow-left { left: 3rem; }
.slider-arrow-right { right: 3rem; }

/* Where I Lead */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.service { display: flex; flex-direction: column; gap: 2.5rem; padding: 2rem 2rem 3.5rem; }
.service-heading { display: flex; flex-direction: column; gap: 2rem; }

/* My Track Record */
.resume-intro { grid-column: 1 / -1; margin-bottom: 4rem; }
.resume-sticky { position: sticky; top: 4rem; align-items: center; text-align: center; }
.resume-jobs { grid-column: 2 / 12; display: flex; flex-direction: column; gap: 0.5rem; }

.dropdown { position: relative; width: 100%; padding-bottom: 2.5rem; overflow: hidden; cursor: pointer; }
.dropdown-fill,
.dropdown-hover {
  position: absolute; inset: 0 0 auto; z-index: 0;
  height: 0;
  background-color: var(--gold);
  transition: height 0.7s var(--ease);
}
.dropdown:hover .dropdown-hover,
.dropdown.is-open .dropdown-fill { height: 100%; }
.dropdown-toggle {
  position: relative; display: flex; align-items: center; width: 100%;
  padding: 2.5rem 2.5rem 0 2rem;
  text-align: left; letter-spacing: -0.3px;
}
.resume-row {
  display: grid; grid-template-columns: 1fr 200px 160px 40px; gap: 1.5rem;
  align-items: center; width: 100%;
}
.resume-dates { text-align: right; }
.resume-row .body-small { font-weight: 500; line-height: 140%; }
.dropdown-icon { width: 40px; height: 40px; transition: transform 0.7s var(--ease); }
.dropdown.is-open .dropdown-icon { transform: rotate(45deg); }
.dropdown-list {
  position: relative; overflow: hidden;
  height: 0; padding: 0 2.5rem 0 2rem;
  transition: height 0.7s var(--ease);
}
.dropdown-content {
  display: grid; grid-template-columns: 24px 2.5fr 0.25fr 40px; gap: 1.5rem;
  margin-top: 2rem;
}
.dropdown-content > p { grid-column: 1 / 4; }
.dropdown-content > .tag-list { grid-column: 1 / 4; }

/* Footer / Let's Talk */
.contact-card,
.footer-card {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2rem;
  height: 100%;
  padding: 6rem 3.5rem 4rem;
}
.contact-card { grid-column: 1 / 9; }
.footer-card { grid-column: 9 / 13; }
.footer-links { display: flex; flex-direction: column; gap: 1.5rem; }
.footer-tagline { grid-column: 1 / -1; }

/* Case study pages */
.category-label { color: var(--gold); margin-bottom: -1rem; }
.project-hero {
  height: 760px; margin-top: 3rem;
}
.project-description { grid-column: 1 / 6; }
.project-sticky { position: sticky; top: 3.5rem; margin-top: 5.5rem; margin-bottom: 3.5rem; }
.work-para { color: var(--text-muted); }
.work-para p { font-size: 1.3rem; font-weight: 300; line-height: 119%; }
.deliveries { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 2rem; margin-top: 5.5rem; margin-bottom: 7.5rem; }
.delivery-list { display: flex; flex-direction: column; gap: 0.5rem; }
.delivery {
  display: grid; grid-template-columns: 24px 1fr; gap: 1.5rem; align-items: center;
  padding: 2.5rem 2.5rem 2.5rem 2rem;
  letter-spacing: -0.3px;
}

/* Gallery: half/half, full, two-thirds/one-third, full */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.5rem; }
.gallery-image { grid-column: span 12; height: 650px; }
.gallery-image:nth-child(6n + 1),
.gallery-image:nth-child(6n + 2) { grid-column: span 6; }
.gallery-image:nth-child(6n + 4) { grid-column: span 8; }
.gallery-image:nth-child(6n + 5) { grid-column: span 4; }

.videos { display: flex; flex-direction: column; align-items: center; margin-top: 22px; }
.video { position: relative; width: 60%; aspect-ratio: 16 / 9; margin-bottom: 10px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; align-items: start; }

/* 404 */
.not-found { min-height: 70vh; display: flex; align-items: center; }

/* 6. Animations ---------------------------------------------------------- */

/* Page-load curtain: two gold panels slide up, the second a beat later */
.preloader { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
.preloader-front,
.preloader-back { position: absolute; inset: 0; transition: transform 0.8s var(--ease); }
.preloader-front { z-index: 2; background-color: var(--gold); }
.preloader-back { z-index: 1; background-color: var(--gold-dark); transition-delay: 0.15s; }
.is-loaded .preloader-front,
.is-loaded .preloader-back { transform: translateY(-100vh); }
.preloader-done .preloader { display: none; }

/* Slide up + fade in (data-reveal) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Orange wipe over images */
.js .image-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background-color: var(--gold);
  transform-origin: 50% 100%;
  transition: transform 1.25s var(--ease);
  pointer-events: none;
}
.js .image-frame.is-visible::after { transform: scaleY(0); }

/* Divider grows from the left */
.js .divider { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease); }
.js .divider.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .divider { opacity: 1; transform: none; transition: none; }
  .js .image-frame::after, .preloader { display: none; }
  .navbar, .overlay, .overlay > .panel { transition: none; }
}

/* 7. Responsive ---------------------------------------------------------- */
@media (min-width: 1280px) {
  h1 { font-size: 8rem; }
  h2 { font-size: 6rem; }

  .resume-intro { grid-column: 1 / 5; grid-row: 1 / 3; margin-bottom: 0; }
  .resume-sticky { align-items: flex-start; text-align: left; }
  .resume-text { max-width: 390px; }
  .resume-jobs { grid-column: 5 / 13; grid-row: 1; }

  .contact-card { grid-column: 1 / 8; }
  .footer-card { grid-column: 8 / 13; }
}

@media (max-width: 991px) {
  h1 { font-size: 6rem; }

  .hero-portrait { height: 600px; }
  .hero-texture { height: 1150px; }
  .about-block { gap: 2rem; }
  .about-block-left { align-items: center; text-align: center; }

  .navbar-socials { display: none; }
  .close-button { background-color: var(--gold); }
  .close-button-corner { background-color: var(--gold-dark); padding: 6px; }
  .menu-panel { width: 100%; }

  .heading-row { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .heading-row-work { margin-bottom: 0; }

  .work-grid { grid-template-columns: 1fr; }
  .work-card, .work-grid-item-offset .work-card { margin-top: 4rem; }

  .slide-inner { max-width: 85%; }

  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .resume-jobs { grid-column: 1 / -1; }
  .dropdown-toggle { padding-left: 1.5rem; padding-right: 2rem; }
  .dropdown-list { padding-left: 24px; padding-right: 32px; }
  .resume-row { grid-template-columns: 1fr 180px 150px 40px; }

  .contact-card, .footer-card { grid-column: 1 / -1; gap: 3rem; padding-top: 4rem; }
  .footer-links { flex-direction: row; flex-wrap: wrap; }

  .delivery { padding-left: 1.5rem; padding-right: 2rem; }
  .project-description { grid-column: 1 / -1; }
  .project-sticky { align-items: center; text-align: center; }
  .deliveries { grid-column: 1 / -1; margin-top: 0; }
  .gallery-image,
  .gallery-image:nth-child(n) { grid-column: 1 / -1; }
  .related { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --gutter: 1.25rem; }
  h1 { font-size: 5rem; }
  h2 { font-size: 4rem; }
  .body-large { font-size: 2rem; }

  .section-contact { padding-bottom: 1.25rem; }
  .work-image, .gallery-image { height: 500px; }

  .long-label { flex-direction: column; align-items: flex-start; gap: 1rem; padding-left: 2rem; padding-right: 2rem; }

  .slider-arrow { bottom: 2rem; }
  .slider-arrow-left { left: 2rem; }
  .slider-arrow-right { right: 2rem; }

  .services { grid-template-columns: 1fr; }

  .dropdown-toggle { padding-left: 1.5rem; padding-right: 1.5rem; }
  .dropdown-list { padding-left: 1.5rem; padding-right: 1.5rem; }
  .dropdown-content { gap: 0.75rem; }
  .resume-row { grid-template-columns: 1fr 1fr 40px; gap: 12px; }
  .resume-company { grid-column: 1 / 3; grid-row: 1; }
  .resume-role { grid-column: 1 / 2; grid-row: 2; }
  .resume-dates { grid-column: 2 / 4; grid-row: 2; }
  .dropdown-icon { grid-column: 3; grid-row: 1; justify-self: end; }

  .contact-card, .footer-card { padding-left: 2rem; padding-right: 2rem; }
  .delivery { gap: 0.75rem; padding-right: 1.5rem; }
}

@media (max-width: 479px) {
  h1 { font-size: 17.5vw; letter-spacing: -0.15rem; }
  h2 { letter-spacing: -0.12rem; }
  h3, .h3 { font-size: 2.3rem; letter-spacing: -0.08rem; }
  p { font-size: 1.15rem; }
  .body-large, .body-large.max-1000 { font-size: 1.5rem; }

  .section-hero { padding-top: 8rem; }
  .hero-heading { font-size: 13vw; }
  .stack-center, .resume-sticky { align-items: flex-start; text-align: left; }
  .button-row { flex-wrap: wrap-reverse; justify-content: space-between; }
  .navbar-cta { display: none; }
  .hero-lede, .about-text { font-size: 1.1rem; }

  .hero-portrait { height: 232px; }
  .hero-texture { height: 800px; }
  .project-hero { height: 232px; }
  .work-image, .gallery-image { height: 400px; }
  .about { gap: 2rem; margin-top: 3.5rem; margin-bottom: 5.5rem; }
  .about-block { align-items: flex-start; text-align: left; }

  .service { padding-left: 1.5rem; padding-right: 1.5rem; }
  .avatar { width: 40px; height: 40px; }
  .close-button-corner { top: 2rem; right: 2rem; }
  .tag-list-row { flex-direction: column; }
  .heading-column { align-items: flex-start; text-align: left; }

  .slider-arrow { bottom: 1.5rem; }
  .slider-arrow-left { left: 1.5rem; }
  .slider-arrow-right { right: 1.5rem; }
  .slider-mask { padding-top: 4rem; padding-bottom: 7rem; }
  .slide-inner { max-width: none; padding: 0 1.5rem; align-items: flex-start; text-align: left; }
  .testimonial-author { flex-direction: row; align-items: flex-start; }

  .dropdown-toggle { padding-top: 2rem; }
  .resume-row { row-gap: 12px; }
  .resume-role { grid-column: 1 / 4; grid-row: 2; }
  .resume-dates { grid-column: 1 / 4; grid-row: 3; text-align: left; }
  .dropdown-content > p, .dropdown-content > .tag-list { grid-column: 1 / -1; }

  .contact-card, .footer-card { padding-left: 1.5rem; padding-right: 1.5rem; }
  .menu-panel { padding: 3rem 2rem 2.5rem; }
  .delivery { padding-top: 2rem; padding-bottom: 1.5rem; }
  .delivery h3 { grid-column: 2; }
  .form-panel { padding-left: 1.5rem; padding-right: 1.5rem; }
}