/* ==========================================================================
   WebMK landing page — values pulled 1:1 from Figma (Desktop 1440 artboard)
   Fonts: Sequel Sans replaced by Neue Haas Grotesk (Adobe Fonts kit hct6dtm)
     Sequel Roman Disp  -> neue-haas-grotesk-display
     Sequel Book Disp   -> neue-haas-grotesk-text
   ========================================================================== */

:root {
  /* Colors */
  --maroon: #7a0c0c;
  --ink: #0f0f0f;
  --body: #5f5f5f;
  --muted: #888888;
  --white: #ffffff;
  --page-bg: #f7f7f7;
  --border-light: #e1e1e1;
  --field-bg: #ebebeb;
  --chip-border: rgba(95, 95, 95, 0.4);
  --footer-border: #5f5f5f;
  --tint-pink: #fff2f2;
  --tint-cream: #fffcf0;
  --tint-blue: #f0fbff;

  /* Radii */
  --radius-header: 20px;
  --radius-card: 30px;
  --radius-card-lg: 41.333px;
  --radius-btn: 50px;
  --radius-pill: 110px;
  --radius-icon-btn: 16px; /* --sds-size-radius-400 */

  /* Fonts */
  --font-display: "degular-display", "degular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "degular-text", "degular", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --page-pad: 60px;
  --content-width: 1320px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
}

body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
}

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

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

/* ==========================================================================
   Shared components
   ========================================================================== */

/* Rounded-rect arrow inside buttons/links */
.arrow-pill {
  width: 44px;
  height: 32px;
  flex-shrink: 0;
}

.arrow-pill-sm {
  height: 24px;
}

.arrow-pill rect,
.arrow-pill path {
  transition: fill 0.25s ease, stroke 0.25s ease;
}

/* Outlined pill label (hero tagline, section labels) */
.pill-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
}

/* Primary / secondary buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-text);
  font-size: 16px;
  text-transform: capitalize;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.btn-primary {
  background: var(--maroon);
  color: var(--white);
  padding: 10px 10px 10px 20px;
}

.btn-primary:hover {
  background: #5e0909;
}

.btn-primary .arrow-pill {
  transition: transform 0.3s ease;
}

.btn-primary:hover .arrow-pill {
  transform: translateX(4px);
}

.btn-secondary {
  background: var(--white);
  color: var(--body);
  padding: 10px 20px;
  height: 52px;
}

.btn-secondary:hover {
  background: #f0f0f0;
}

.btn-block {
  width: 100%;
}

.btn-block span:first-child {
  flex: 1 0 0;
  text-align: left;
}

/* Service-row label button (icon + text) */
.label-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 6px;
  background: var(--white);
  border-radius: var(--radius-icon-btn);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--maroon);
  border: 1px solid rgba(18, 0, 41, 0.08);
  border-radius: var(--radius-icon-btn);
  filter: drop-shadow(0 18px 9px rgba(0, 0, 0, 0.04)) drop-shadow(0 10px 5px rgba(0, 0, 0, 0.04));
}

.icon-btn img {
  width: 16px;
  height: 16px;
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  background: var(--white);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--body);
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.chip:hover {
  border-color: var(--body);
  color: var(--ink);
}

.chips-tilt-cw {
  transform: rotate(1deg);
}

.chips-tilt-ccw {
  transform: rotate(-1deg);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  padding: 20px var(--page-pad);
}

.header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--white);
  border-radius: var(--radius-header);
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 100px;
}

.logo {
  font-family: var(--font-display);
  font-size: 25px;
  text-transform: uppercase;
  color: var(--maroon);
  line-height: 1.2;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-link {
  font-family: var(--font-text);
  font-size: 16px;
  text-transform: capitalize;
  color: var(--body);
  transition: color 0.25s ease;
}

.nav-link:hover {
  color: var(--ink);
}

.nav-link-campaigns {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
}

.nav-plus {
  width: 13px;
  height: 13px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.header-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: 16px;
  text-transform: capitalize;
  color: var(--body);
  transition: color 0.25s ease;
}

.header-contact:hover {
  color: var(--ink);
}

.header-contact .arrow-pill {
  transition: transform 0.3s ease;
}

.header-contact:hover .arrow-pill {
  transform: translateX(4px);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 40px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 250px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 940px;
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
}

.social-icons {
  display: flex;
  align-items: center;
}

.social-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 60px;
  overflow: hidden;
  flex-shrink: 0;
}

.social-icon:not(:last-child) {
  margin-right: -10px;
}

.social-icon img {
  position: absolute;
  max-width: none;
}

/* Crops matched to Figma */
.social-icon:nth-child(1) img {
  width: 250.25%;
  height: 166.79%;
  left: -57.63%;
  top: -0.78%;
}

.social-icon:nth-child(2) img {
  width: 103.23%;
  height: 155.01%;
  left: -1.62%;
  top: -6.5%;
}

.social-icon:nth-child(3) img {
  width: 250.25%;
  height: 166.79%;
  left: -70.81%;
  top: -28.93%;
}

.tagline-text {
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 70px;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
}

.hero-title .accent {
  color: var(--maroon);
}

.hero-subtitle {
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
  color: var(--body);
  max-width: 520px;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gallery-row {
  display: flex;
  overflow: hidden;
}

.gallery-track {
  display: flex;
  gap: 10px;
  animation: gallery-scroll 60s linear infinite;
}

.gallery-row:nth-child(even) .gallery-track {
  animation-direction: reverse;
}

.gallery-row:hover .gallery-track {
  animation-play-state: paused;
}

/* Track holds two identical sets; one loop = a set plus the 10px gap between sets */
@keyframes gallery-scroll {
  to {
    transform: translateX(calc(-50% - 5px));
  }
}
/* 
@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    animation: none;
  }
} */

.gallery-card {
  position: relative;
  width: 450px;
  height: 267px;
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-card-cover img {
  object-fit: cover;
  object-position: top;
}

/* Site screenshots all come off the capture script at a uniform 1440x900, which
   is wider than the cards. Cover-from-top fills the card with the hero band
   instead of letterboxing it against the card's placeholder background. */
.gallery-card img.shot,
.media-card img.shot {
  object-fit: cover;
  object-position: top;
}

/* The screenshots sat flat against the page. A soft, wide shadow lifts them off
   it without reading as a drop shadow: two layers, a tight one for the edge and
   a broad low-opacity one for the ambient lift. Warm-tinted rather than neutral
   black so it sits in the page's cream/maroon palette instead of greying it. */
.gallery-card,
.media-card {
  box-shadow:
    0 2px 6px rgba(60, 30, 30, 0.06),
    0 14px 34px rgba(60, 30, 30, 0.10);
}

/* The brand card is a flat colour field, not a screenshot, so it only needs the
   ambient layer; the tight edge shadow makes a solid block look outlined. */
.media-card-brand {
  box-shadow: 0 14px 34px rgba(60, 30, 30, 0.12);
}

/* ==========================================================================
   Services intro
   ========================================================================== */

.services-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 140px 250px 20px;
  background: linear-gradient(180deg, #f7f7f7 57.55%, #ffffff 100%);
}

.services-intro-text {
  font-family: var(--font-text);
  font-size: 45px;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
}

/* ==========================================================================
   Service rows
   ========================================================================== */

.service-rows {
  background: var(--white);
}

.service-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px var(--page-pad);
}

.row-1 {
  background: linear-gradient(180deg, rgba(255, 242, 242, 0) 9.615%, var(--tint-pink) 40.385%);
}

.row-2 {
  background: linear-gradient(180deg, var(--tint-pink) 58.967%, rgba(255, 242, 242, 0) 91.361%);
}

.row-3 {
  background: linear-gradient(180deg, rgba(255, 252, 240, 0) 58.967%, var(--tint-cream) 91.121%);
}

.row-4 {
  background: linear-gradient(180deg, var(--tint-cream) 58.727%, rgba(255, 252, 240, 0) 91.121%);
}

.row-5 {
  background: linear-gradient(180deg, rgba(240, 251, 255, 0) 58.967%, var(--tint-blue) 88.482%);
}

.row-6 {
  background: linear-gradient(180deg, var(--tint-blue) 58.967%, rgba(240, 251, 255, 0) 91.121%);
}

.row-7 {
  background: linear-gradient(180deg, rgba(247, 247, 247, 0) 60.141%, var(--page-bg) 100%);
}

.row-inner {
  display: flex;
  align-items: center;
  gap: 120px;
  width: var(--content-width);
  max-width: 100%;
}

/* Media strip overflows the viewport on one side (clipped by body) */
.row-reverse .row-inner {
  justify-content: flex-end;
}

.row-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 450px;
  flex-shrink: 0;
}

.row-title {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 45px;
  line-height: 1.1;
  color: var(--ink);
  min-width: 100%;
}

.row-title-sm {
  font-size: 40px;
}

.row-extras {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.includes-label {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--muted);
  width: 100%;
}

.row-media {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: slide the strip to reveal the card clipped at the viewport edge */
.service-row:hover .row-media {
  transform: translateX(-40px);
}

.row-reverse:hover .row-media {
  transform: translateX(40px);
}

.media-card {
  position: relative;
  width: 500px;
  height: 367px;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-card.radius-30,
.media-card-cover,
.media-card-brand {
  border-radius: var(--radius-card);
}

.media-card-cover img {
  object-fit: cover;
}

.media-card-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  background: var(--maroon);
}

.media-card-tall {
  height: 375px;
}

.media-card-brand .brand-logo {
  width: 233.169px;
  height: 125.945px;
  object-fit: cover;
  transform: rotate(1deg);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 60px var(--page-pad) 100px;
}

.contact-form-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 500px;
  padding: 30px;
  background: var(--white);
  border-radius: var(--radius-card);
  flex-shrink: 0;
}

.contact-form-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
}

.contact-form-title .muted {
  display: block;
  color: var(--body);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.form-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.form-field {
  background: var(--field-bg);
  border: none;
  border-radius: 20px;
  padding: 20px;
  font-family: var(--font-text);
  font-size: 18px;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}

.form-row .form-field {
  flex: 1 0 0;
}

/* Each field now sits in a .form-group with its error message, so the group is
   what flexes in a .form-row, not the input itself. */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.form-row .form-group {
  flex: 1 0 0;
}

.form-field.is-invalid {
  box-shadow: inset 0 0 0 1.5px var(--maroon);
}

.field-error {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.4;
  color: var(--maroon);
  padding-left: 20px;
}

.form-status {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.45;
  border-radius: 16px;
  padding: 14px 18px;
  margin: 0;
}

.form-status-success {
  background: #eef5ee;
  color: #1f5130;
}

.form-status-error {
  background: #fdeeee;
  color: var(--maroon);
}

/* Honeypot. Off-screen rather than display:none — some bots skip anything they
   can tell is hidden, and this still keeps it out of the tab order and the
   accessibility tree (the wrapper carries aria-hidden). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile ships its own iframe sizing; just stop it forcing the card wider. */
.cf-turnstile {
  max-width: 100%;
}

.btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Client CMS sign-in, in the header as well as the footer: an existing-client
   affordance that also signals there is a system behind the work. Stays visible
   on mobile (icon only) where the nav and the CTA collapse into the hamburger. */
.header-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--body);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.header-login:hover {
  color: var(--maroon);
  border-color: var(--maroon);
  background: rgba(122, 12, 12, 0.04);
}

.header-login:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

.header-login-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Client CMS sign-in. A utility link, not a marketing one - set apart from the
   other footer links so it doesn't read as another content page. */
.footer-login {
  position: relative;
  padding-left: 15px;
}

.footer-login::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.form-field::placeholder {
  color: var(--body);
  text-transform: capitalize;
  opacity: 1;
}

.form-field:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 1px;
}

.form-textarea {
  height: 150px;
  resize: none;
}

/* Contact info column */
.contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 0 30px;
  flex: 1 0 0;
  min-width: 0;
}

.contact-info-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  color: var(--maroon);
  min-width: 100%;
}

.contact-info-subtitle {
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 1.4;
  color: var(--body);
  max-width: 407px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1.25px solid var(--ink);
  border-radius: 30px;
  font-family: var(--font-text);
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.contact-pill img {
  width: 18px;
  height: 18px;
}

.contact-pill:hover {
  background: var(--ink);
  color: var(--white);
}

.contact-pill:hover img {
  filter: invert(1);
}

.contact-pill-email span {
  text-transform: lowercase;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--footer-border);
  padding: 30px var(--page-pad);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
}

.footer-text {
  font-family: var(--font-text);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--body);
}

.footer-brand {
  color: var(--ink);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer-links a {
  font-family: var(--font-text);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--body);
  transition: color 0.25s ease;
}

.footer-links a:hover {
  color: var(--ink);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .header-left {
    gap: 60px;
  }

  .hero {
    padding: 90px 120px;
  }

  .hero-title {
    font-size: 60px;
  }

  .services-intro {
    padding: 160px 120px;
  }

  .services-intro-text {
    font-size: 40px;
  }

  .row-inner {
    gap: 80px;
  }

  .contact {
    gap: 50px;
  }

  .contact-info-title {
    font-size: 34px;
  }
}

@media (max-width: 1024px) {
  :root {
    --page-pad: 40px;
  }

  .hero {
    padding: 80px 60px;
  }

  .hero-title {
    font-size: 54px;
  }

  .gallery-card {
    width: 400px;
    height: 237px;
  }

  .row-text {
    width: 400px;
  }

  .row-title {
    font-size: 38px;
  }

  .row-title-sm {
    font-size: 34px;
  }

  .media-card,
  .media-card-tall {
    width: 400px;
    height: 294px;
  }

  .contact {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .contact-info {
    padding: 0;
  }

  .contact-form-card {
    width: 100%;
    max-width: 640px;
  }
}

@media (max-width: 900px) {
  /* The two-column row needs ~400px of text plus a 400px card. Below roughly
     900px that stops fitting and the media gets squeezed to a sliver, so the
     stacked treatment starts here rather than at 768. The nav keeps its own
     768 breakpoint: a hamburger at 900 would be premature. */
  /* Service rows stack: text above media strip */
  .service-row {
    padding: 80px 20px;
  }

  .row-inner,
  .row-reverse .row-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 60px;
    width: 100%;
  }

  .row-reverse .row-inner {
    flex-direction: column-reverse;
  }

  .row-text {
    width: 100%;
  }

  .row-title {
    font-size: 35px;
  }

  .row-title-sm {
    font-size: 35px;
  }

  .chip {
    font-size: 15px;
  }

  /* Two 500px cards never fit a phone. Shrink them so the second one peeks in
     past the first, and let the strip scroll so it can actually be reached
     rather than just hinted at. */
  /* Two 500px cards never fit a phone. Shrink them so the second one peeks in
     past the first, and let the strip scroll so it can actually be reached.
     The strip spans the full viewport width, cancelling the section padding on
     both sides, so the cards run right up to the screen edge. */
  .row-media {
    /* Bleed on one side only. The near side keeps the section's 20px gutter so
       the card's rounded corner still reads; the far side runs off the screen
       and is cut square. Bleeding both sides made the strip look flush-mounted
       rather than sliding past the edge. */
    width: calc(100% + 20px);
    margin-right: -20px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .row-media::-webkit-scrollbar {
    display: none;
  }

  /* Keep the desktop's alternating rhythm: odd rows run off the right edge,
     reversed rows off the left. row-reverse also puts a scroll container's
     start at the right, so the flush card is the one nearest that edge. */
  .row-reverse .row-media {
    flex-direction: row-reverse;
    /* Mirrored: bleeds off the left, gutter on the right. */
    margin-left: -20px;
    margin-right: 0;
  }

  /* Proportional, not fixed: at a fixed 270px the pair stopped overflowing
     around 553px wide, so the strip left dead space instead of running off the
     edge. min() keeps the card from getting absurd on a large phone while still
     guaranteeing two of them exceed any viewport up to the 768px breakpoint. */
  .media-card,
  .media-card-tall {
    width: min(72vw, 420px);
    height: auto;
    aspect-ratio: 500 / 367;
    scroll-snap-align: start;
  }

  .service-row:hover .row-media,
  .row-reverse:hover .row-media {
    transform: none;
  }
}

@media (max-width: 768px) {
  .site-nav,
  .header-contact {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* The pill stays; only its label goes, so the header keeps the signal. */
  .header-login-label {
    display: none;
  }

  .header-login {
    padding: 8px 10px;
  }

  .header-right {
    gap: 16px;
  }

  /* Mobile dropdown menu */
  .site-nav.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: var(--radius-header);
    padding: 20px;
    z-index: 20;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .hero {
    padding: 60px 20px;
  }

  .hero-content {
    align-items: flex-start;
  }

  .hero-tagline {
    border-radius: 20px;
  }

  .tagline-text {
    font-size: 14px;
    white-space: normal;
    max-width: 175px;
  }

  .hero-title {
    font-size: 50px;
    text-align: left;
  }

  .hero-subtitle {
    font-size: 18px;
    text-align: left;
    max-width: none;
  }

  .hero-buttons {
    width: 100%;
  }

  .hero-buttons .btn-primary {
    flex: 1 0 0;
    justify-content: space-between;
  }

  .services-intro {
    align-items: flex-start;
    padding: 200px 20px 120px;
  }

  .services-intro-text {
    font-size: 35px;
    text-align: left;
  }

  .contact {
    padding: 0 20px 100px;
    gap: 60px;
  }

  .contact-info-title {
    font-size: 30px;
  }

  .contact-info-subtitle {
    font-size: 18px;
  }

  .contact-form-card {
    padding: 20px;
  }

  .contact-form-title {
    font-size: 25px;
  }

  .form-row {
    flex-direction: column;
    gap: 10px;
  }

  .site-footer {
    padding: 30px 20px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-links {
    gap: 20px;
  }

  .footer-links a {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .site-header {
    padding: 10px;
  }
}