/* Medoxi Consulting — site-wide rules shared by every page.
   Page layout is written inline in each .html file; this file holds only
   what the pages have in common: base element defaults, the hover states
   that used to be style-hover attributes, and the cookie notice. */

html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; }

/* — skip link: the first thing in the tab order on every page, unseen until
   it has keyboard focus, then a pill at the top left over the header — */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: var(--font-label-weight); font-size: 14px;
  color: #ffffff; background: var(--color-accent-800);
  transition: top 0.15s;
}
.skip-link:focus { top: 16px; outline: 3px solid #ffffff; outline-offset: 2px; color: #ffffff; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }   /* darker on hover; the bright orange is 2.6:1 on the light ground */

img { max-width: 100%; height: auto; }

/* — header: frosted glass. Light by default; site.js adds .is-dark while a
   [data-dark] section is under it, and it turns to dark glass with the
   white logo and white nav. — */
.site-header {
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(32,30,29,0.10);
  transition: background 0.35s, border-color 0.35s;
}
.site-header nav a { color: var(--color-text); transition: color 0.35s; }
.site-header nav a[aria-current="page"] { color: var(--color-accent-700); }
.site-header .logo-dark { display: none; }
.site-header.is-dark {
  background: rgba(14,11,10,0.32);
  border-bottom-color: rgba(255,255,255,0.10);
}
/* home only: no line under the nav over the hero */
.site-header--seamless.is-dark { border-bottom-color: transparent; }
/* Home and About: no glass at all at the top of the page, so the whole hero
   image shows through; the dark glass comes back as soon as the visitor scrolls */
.site-header--clear.is-dark.is-top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.is-dark nav a { color: #ffffff; }
.site-header.is-dark nav a:hover { color: var(--color-accent); }
.site-header.is-dark nav a[aria-current="page"] { color: var(--color-accent); }
.site-header.is-dark .logo-light { display: none; }
.site-header.is-dark .logo-dark { display: block; }

/* The phone rules also cover a tablet held upright (portrait, up to 1100px
   wide — an iPad Pro 13" is 1024px): every "(max-width: 860px)" block below
   carries that second clause. site.js and hero-dna.js use the same query. */
/* — mobile header: the nav folded under a hamburger; the open menu drops
   down beneath the bar on the same glass, one link per row. The header's
   tone (light / dark glass, transparent at the top of Home and About) is
   the same as on desktop. — */
.nav-toggle { display: none; }
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  .site-header > div { flex-wrap: nowrap; padding-left: 24px; padding-right: 24px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin: -4px -8px -4px 0; padding: 0;
    background: none; border: 0; border-radius: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2px; margin: 0 auto;
    background: var(--color-text);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s, background-color 0.35s;
  }
  .site-header.is-dark .nav-toggle span { background: #ffffff; }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* the nav's inline display:flex has to be overruled here */
  .site-header nav {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    padding: 8px 24px 20px;
    background: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    backdrop-filter: blur(40px) saturate(160%);
    border-bottom: 1px solid rgba(32,30,29,0.10);
    box-shadow: 0 24px 40px -24px rgba(32,30,29,0.35);
  }
  .site-header.is-dark nav {
    background: rgba(14,11,10,0.98);
    border-bottom-color: rgba(255,255,255,0.10);
  }
  /* while the menu is out the bar is the same colour as the menu — light
     or dark to match — with no rule between them: one panel. This also
     covers the top of Home and About, where the bar is otherwise clear */
  .site-header.nav-open {
    background: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    backdrop-filter: blur(40px) saturate(160%);
    border-bottom-color: transparent;
  }
  .site-header.is-dark.nav-open, .site-header--clear.is-dark.is-top.nav-open {
    background: rgba(14,11,10,0.98);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    backdrop-filter: blur(40px) saturate(160%);
    border-bottom-color: transparent;
  }
  .site-header.nav-open nav { display: flex !important; }
  .site-header nav a {
    display: block; padding: 16px 0 !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(32,30,29,0.10);
  }
  .site-header.is-dark nav a { border-bottom-color: rgba(255,255,255,0.12); }
  .site-header nav a:last-child { border-bottom: 0; }
}

/* anchor jumps (#services, #contact) land just under the sticky header
   instead of behind it — 90px is the header's height */
section[id] { scroll-margin-top: 90px; }

/* — buttons are pills — */
.btn, button, [data-cookie-choice] { border-radius: 999px; }

/* — scroll reveal: elements with .reveal rise in when they enter the
   viewport (site.js adds .is-in); --i staggers siblings — */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* — services (home, What We Do): a column of rows, big numeral beside the
   title and copy, hairlines between — */
.svc-list { border-top: 1px solid var(--color-neutral-300); }
.svc-row {
  display: grid; grid-template-columns: clamp(72px, 7vw, 116px) minmax(0, 1fr);
  gap: 0 clamp(16px, 2.4vw, 40px); align-items: start;
  padding: clamp(24px, 2.6vw, 38px) 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.svc-num {
  display: block;
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(44px, 4.4vw, 76px); line-height: 0.9; letter-spacing: -0.035em;
  color: var(--color-accent-600);   /* 3.4:1 on the light ground — large text passes AA; the 500 does not */
  margin-top: 2px;
  /* pops in just after its row lands: small and soft, overshooting to size */
  opacity: 0; transform: scale(0.35) translateY(14px); filter: blur(6px);
  transform-origin: left center;
  transition: opacity 0.45s ease-out, filter 0.5s ease-out, transform 0.75s cubic-bezier(0.34, 1.65, 0.5, 1);
  transition-delay: calc(var(--i, 0) * 110ms + 220ms);
}
.svc-row.is-in .svc-num { opacity: 1; transform: none; filter: blur(0); }
.svc-title {
  margin: 4px 0 10px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(19px, 1.5vw, 24px); line-height: 1.25; letter-spacing: -0.012em; color: var(--color-text);
}
.svc-copy { margin: 0; max-width: 58ch; font-size: 15.5px; line-height: 26px; color: var(--color-neutral-800); }
@media (max-width: 520px) {
  .svc-row { grid-template-columns: minmax(0, 1fr); }
  .svc-num { font-size: 40px; margin-bottom: 8px; }
}

/* — contact band — orange on the left graduating into the photo on the
   right: the whole frame sits top-right, flush with the browser edge, its
   left third and lower edge dissolving into the orange. Copy runs above
   the white-frost form card down the left; the card starts below the
   faces and sits over the hands-and-table part of the photo.
   Every colour on the card clears WCAG AA against the darkest thing the
   glass can sit over (text >= 5.8:1, rules and borders >= 3:1). */
.contact-bg {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: 68vw; aspect-ratio: 16 / 9;
  pointer-events: none;
}
.contact-bg img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 100% 50%;
}
.contact-bg::before, .contact-bg::after {
  content: ""; position: absolute; inset: 0;
}
.contact-bg::before {
  background: linear-gradient(to right, var(--color-accent-700) 0%, rgba(168,70,26,0.85) 12%, rgba(168,70,26,0) 40%);
}
.contact-bg::after {
  background: linear-gradient(to top, var(--color-accent-700) 0%, rgba(168,70,26,0.85) 10%, rgba(168,70,26,0) 34%);
}
.contact-lead {
  position: relative; z-index: 1;
  max-width: 640px;
  /* keeps the card below the faces: the photo is 38.25vw tall and the
     faces sit in its top ~45% */
  min-height: calc(17vw - var(--pad-y) - 24px);
}
.contact-card {
  position: relative; z-index: 1;
  box-sizing: border-box;
  width: 100%; max-width: 980px;
  margin: 24px 0 0;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 3vw, 40px);
  color: var(--color-text);
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(77,23,14,0.5);
}
.contact-form {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px clamp(16px, 2.4vw, 36px);
  align-items: end;
}
.field-wide, .contact-form .consent { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field > span {
  font-family: var(--font-heading); font-weight: var(--font-label-weight);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-900);
}
/* soft translucent fields (peach through the glass, never white), rounded,
   with a darker rounded ring on focus */
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 16px; line-height: 24px;
  color: var(--color-text);
  background: rgba(255,255,255,0.45);
  border: 1.5px solid rgba(32,30,29,0.5); border-radius: 12px;
  padding: 11px 14px; width: 100%; box-sizing: border-box;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23201e1d' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field select option { background: var(--color-accent-100); color: var(--color-text); }
/* Chromium 135+ lets the open list be styled; elsewhere it stays native */
@supports (appearance: base-select) {
  .field select, .field select::picker(select) { appearance: base-select; }
  .field select::picker-icon { display: none; }
  .field select::picker(select) {
    margin-top: 6px; padding: 6px;
    background: #fbeee6; color: var(--color-text);
    border: 1px solid rgba(32,30,29,0.25); border-radius: 12px;
    box-shadow: 0 18px 40px -16px rgba(77,23,14,0.45);
  }
  .field select option {
    padding: 9px 12px; border-radius: 8px; background: transparent;
    font-family: var(--font-body); font-size: 15px; line-height: 22px;
  }
  .field select option::checkmark { display: none; }
  .field select option:hover, .field select option:focus-visible { background: rgba(217,98,43,0.16); outline: none; }
  .field select option:checked { background: rgba(217,98,43,0.26); }
}
.field textarea { resize: vertical; min-height: 56px; }
.field input:hover, .field select:hover, .field textarea:hover { background: rgba(255,255,255,0.6); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: rgba(255,255,255,0.7);
  border-color: var(--color-accent-800);
  box-shadow: 0 0 0 3px rgba(124,20,5,0.22);
}
.contact-form .consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 2px; }
.contact-form .consent input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--color-accent-800); flex: none; border-radius: 4px; }
.contact-form .consent span { font-size: 14px; line-height: 22px; color: var(--color-text); }
.contact-form .consent a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.contact-form .btn:hover { filter: brightness(1.08); }
.contact-form .btn:focus-visible { outline: 3px solid var(--color-accent-800); outline-offset: 2px; }
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  /* home: the photo sits right under the last service row — no section
     padding and no hairline between 04 and the picture */
  #services { padding-bottom: 0 !important; }
  #services .svc-row:last-child { border-bottom: 0; }
  .contact-bg {
    position: relative; width: auto;
    margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 8px;
  }
  .contact-bg::before { background: none; }
  .contact-bg::after { background: none; }
  /* the photo's foot meets the orange on a wave — the CTA swoosh turned on
     its side: the picture dips low at the left, lifts through the middle
     and settles at the right, like the stroke in the logo */
  .contact-bg img, .cta-bg img {
    --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 L 100 0 L 100 90 C 72 104, 46 60, 0 82 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--wave-mask); mask-image: var(--wave-mask);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .contact-lead { min-height: 0; max-width: none; }
  .contact-card { border-radius: 18px; }
}
@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
}
/* phone: the form card and the inner pages' Let's-talk card are simply
   there — no scroll reveal to wait for */
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  .contact-card.reveal, .cta-card.reveal { opacity: 1; transform: none; transition: none; }
}

/* — How We Work — */
/* page hero: the home hero's dark ground; the whiteboard photo runs off the
   right edge and dissolves into the dark on its left and foot */
.hww-hero {
  position: relative; overflow: hidden;
  background: #0e0b0a; color: #ffffff;
  margin-top: -90px;
  min-height: clamp(600px, 86vh, 820px);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(90px + clamp(32px, 5vh, 72px)) clamp(24px, 7vw, 150px) clamp(32px, 5vh, 64px);
}
/* starts under the glass header so Edna's head is never behind it */
.hww-photo {
  position: absolute; top: 90px; right: 0; bottom: 0; z-index: 0;
  width: 76vw; pointer-events: none;
}
.hww-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 100% 20%;
}
.hww-photo::before, .hww-photo::after { content: ""; position: absolute; inset: 0; }
.hww-photo::before {
  background: linear-gradient(to right, #0e0b0a 0%, rgba(14,11,10,0.85) 14%, rgba(14,11,10,0) 48%);
}
.hww-photo::after {
  background: linear-gradient(to top, #0e0b0a 0%, rgba(14,11,10,0.9) 14%, rgba(14,11,10,0.55) 28%, rgba(14,11,10,0) 48%);
}
.hww-hero-copy { position: relative; z-index: 1; max-width: 640px; }
/* the four steps, landing in order across the foot of the hero */
.hww-steps {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
  margin-top: clamp(36px, 6vh, 72px);
  max-width: 1100px;
}
.hww-steps .hero-stat::before { background: var(--color-accent); }
@media (max-width: 1000px) { .hww-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the method: cycle diagram beside the rows, the two wired together */
.method-grid {
  display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px); align-items: start;
}
/* section headlines that stay on one line wherever they fit (The Method,
   The Team); the intro beside them drops below when the row runs out of room */
.h2-oneline { white-space: nowrap; }
@media (max-width: 900px) { .h2-oneline { white-space: normal; } }
.hww-ring { position: sticky; top: 120px; }
.ring-arc {
  fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), stroke 0.3s, stroke-width 0.3s;
  transition-delay: calc(var(--i, 0) * 110ms + 350ms), 0s, 0s;
}
.ring-arc.is-in { stroke-dashoffset: 0; marker-end: url(#hww-arrow); }
.ring-arc.is-hot { stroke: var(--color-accent-700); stroke-width: 9; }
.ring-arc.is-in.is-hot { marker-end: url(#hww-arrow-hot); }
.ring-num {
  fill: var(--color-neutral-400); cursor: pointer;
  transition: fill 0.3s, font-size 0.3s;
}
.ring-num.is-in { fill: var(--color-accent-600); }
.ring-num.is-hot { fill: var(--color-accent-700); }
.ring-label { opacity: 0; transition: opacity 0.6s 0.4s; }
.hww-ring.is-in .ring-label { opacity: 1; }
.svc-row[data-step] { cursor: default; transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s; }
.svc-row[data-step] .svc-num, .svc-row[data-step] .svc-title { transition: color 0.3s, transform 0.75s cubic-bezier(0.34, 1.65, 0.5, 1), opacity 0.45s ease-out, filter 0.5s ease-out; }
.svc-row.is-hot { background: linear-gradient(to right, var(--color-accent-100), transparent 70%); }
.svc-row.is-hot .svc-num, .svc-row.is-hot .svc-title { color: var(--color-accent-700); }
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .hww-ring { position: static; width: min(100%, 300px); margin: 0 auto; }
}

/* operating principles: rounded cards on the light ground, an accent rule
   at the head of each */
.principles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 960px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .principles { grid-template-columns: minmax(0, 1fr); } }
/* the About values: four cards, so two up rather than three */
.principles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .principles--two { grid-template-columns: minmax(0, 1fr); } }
.principle {
  box-sizing: border-box;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: 20px;
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
}
.principle:hover { border-color: var(--color-accent-300); box-shadow: 0 24px 50px -30px rgba(77,23,14,0.35); }
.principle::before {
  content: ""; display: block; width: 36px; height: 2px;
  background: var(--color-accent); margin-bottom: 18px;
}
.principle h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 26px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--color-text);
}
.principle p { margin: 0; font-size: 15.5px; line-height: 26px; color: var(--color-neutral-800); }

/* contact CTA band (inner pages): the home contact band's orange-to-photo
   ground, with the copy on the frost card and a button through to the form */
.cta { min-height: calc(50vw * 9 / 16); box-sizing: border-box; }
.cta-bg {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  width: 58vw; pointer-events: none;
}
.cta-bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 100% 50%; }
/* a swoosh, not a gradient: the photo is masked along an S-curve like the
   stroke in the logo — in from the top, bowing out, tailing away at the
   foot — so the orange meets the picture on one sweep */
.cta-bg { overflow: visible; }
.cta-bg img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 36 0 C 2 16, 30 62, 8 100 L 100 100 L 100 0 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 36 0 C 2 16, 30 62, 8 100 L 100 100 L 100 0 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.cta-bg::before { content: none; }
.cta-card {
  position: relative; z-index: 1;
  box-sizing: border-box; max-width: 620px;
  padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3vw, 40px);
  color: var(--color-text);
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(77,23,14,0.5);
}
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  .hww-hero { min-height: 0; display: block; padding-top: 90px; }   /* the photo starts right under the header */
  .hww-steps { margin-top: 32px; }
  .hww-photo { position: relative; top: 0; width: auto; aspect-ratio: 16 / 9; margin: 0 calc(-1 * clamp(24px, 7vw, 150px)) 28px; }
  .hww-photo::before { background: none; }
  .cta { min-height: 0; }
  .cta-bg { position: relative; width: auto; aspect-ratio: 16 / 9; margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 8px; }
  .cta-bg img { -webkit-mask-image: var(--wave-mask); mask-image: var(--wave-mask); }   /* the wave, not the desktop swoosh (set above, later in the file) */
  .cta-card { max-width: none; border-radius: 18px; }
}

/* — About — */
/* page hero: near-black ground, the copper swoosh drawn on the canvas
   behind (hero-swoosh.js); headline left, copy right on a copper rule */
.about-hero {
  position: relative; overflow: hidden;
  background: #070504; color: #ffffff;
  margin-top: -90px;
  min-height: clamp(600px, 86vh, 820px);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(90px + clamp(32px, 5vh, 72px)) clamp(24px, 7vw, 150px) clamp(32px, 5vh, 64px);
}
.about-hero-copy {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 120px); align-items: end;
}
/* the two beats of the headline each hold one line */
.about-h1 .about-line { white-space: nowrap; }
/* the copper rule draws in from the right, after the headline, then the copy */
.about-hero-aside { position: relative; padding-top: clamp(18px, 2.4vw, 30px); }
.about-hero-aside::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to left, rgba(229,122,69,0.95), rgba(229,122,69,0.35));
  transform: scaleX(0); transform-origin: right center;
  animation: about-rule 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.25s forwards;
}
@keyframes about-rule { to { transform: none; } }
@media (max-width: 960px) {
  .about-hero-copy { grid-template-columns: minmax(0, 1fr); }
  .about-h1 .about-line { white-space: normal; }
  .about-hero-aside { max-width: 44ch; }
}

/* the bios: portrait beside the copy, hairlines between rows */
.bio-list { border-top: 1px solid var(--color-neutral-300); }
.bio {
  display: grid; grid-template-columns: clamp(180px, 22vw, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding: clamp(32px, 4vw, 64px) 0;
  border-bottom: 1px solid var(--color-neutral-300);
  scroll-margin-top: 110px;
}
.bio-photo { margin: 0; }
.bio-photo img {
  width: 100%; aspect-ratio: 4 / 5; display: block;
  object-fit: cover; object-position: 50% 50%;
  border-radius: 20px;
  box-shadow: 0 24px 50px -30px rgba(77,23,14,0.35);
}
.bio-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 8px; color: var(--color-text);
}
.bio-role {
  font-family: var(--font-heading); font-weight: var(--font-label-weight);
  font-size: 13px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0 0 22px;
}
.bio-copy { font-size: 16px; line-height: 28px; margin: 0 0 18px; max-width: 70ch; color: var(--color-neutral-900); }
.bio-creds {
  border-top: 1px solid var(--color-neutral-300); padding-top: 16px; margin: 24px 0 0;
  font-size: 14px; line-height: 24px; max-width: 70ch; color: var(--color-neutral-800);
}
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  .about-hero { min-height: 0; display: block; }
}
@media (max-width: 640px) {
  .bio { grid-template-columns: minmax(0, 1fr); }
  /* portrait, name and title centred; the bio copy stays flush left */
  .bio-photo img { max-width: 260px; margin: 0 auto; }
  .bio-name, .bio-role { text-align: center; }
}

/* — hover states — */
.hover-accent:hover { color: var(--color-accent-700); }
.hover-ink:hover    { background: var(--color-neutral-800); }
.hover-tint:hover   { background: var(--color-accent-100); }

/* — cookie notice — shown by site.js until the visitor makes a choice */
#cookie-notice[hidden] { display: none; }

/* — home hero — copy rises into place after the helix has drawn itself in */
.hero-in {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: 1.2s;
}
@keyframes hero-in {
  to { opacity: 1; transform: none; }
}
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(8px);
  animation: hero-word 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes hero-word {
  to { opacity: 1; transform: none; filter: blur(0); }
}
[data-hero] .btn:hover { filter: brightness(1.12); }

/* Results are released by the helix: hero-dna.js adds .is-in to each
   .hero-stat as the draw-in tip passes it. Then the rule draws across, the
   number drops in from large and out of focus, and the caption follows. */
.hero-stat { position: relative; padding-top: 14px; }
.hero-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
}
.hero-stat-num { opacity: 0; transform: translateY(26px) scale(1.55); filter: blur(12px); transform-origin: left bottom; }
.hero-stat-cap { opacity: 0; transform: translateY(8px); }
.hero-stat.is-in::before   { animation: hero-rule 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.hero-stat.is-in .hero-stat-num { animation: hero-num 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hero-stat.is-in .hero-stat-cap { animation: hero-cap 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes hero-rule { to { transform: scaleX(1); } }
@keyframes hero-num  { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero-cap  { 0%, 45% { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* phone: the copy sits high under the header, the headline smaller and
   narrow so the right half is open; the helix enters from the left below
   the Let's Talk button and weaves up behind the copy to the top right
   (hero-dna.js). The results sit at the foot, under the helix, and land as
   they scroll into view, one after another when several arrive together */
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  [data-hero] { justify-content: flex-start !important; }
  .hero-copy { margin: 0 !important; }
  .hero-eyebrow { font-size: 11px !important; letter-spacing: 0.1em !important; }
  .hero-h1 { font-size: 26px !important; max-width: 20ch !important; }
  .hero-copy p { max-width: 30ch !important; }
  .hero-stats {
    align-self: stretch !important; flex-direction: column;
    justify-content: flex-start !important; gap: 22px !important;
    margin-top: auto !important; padding-top: 210px;   /* the room the helix runs through */
  }
  .hero-stat { max-width: none !important; }
  /* tablet portrait: a bigger headline, and a taller band for the helix
     between the button and the results */
  @media (min-width: 700px) and (orientation: portrait) {
    [data-hero] { padding-top: 150px !important; }   /* the copy sits clear of the header */
    .hero-h1 { font-size: 56px !important; max-width: 17ch !important; }
    .hero-copy p { font-size: 18px !important; max-width: 46ch !important; }
    /* the results side by side along the foot, as on desktop */
    .hero-stats { flex-direction: row; gap: 40px !important; padding-top: 220px; }
    .hero-stat { flex: 1 1 0; }
  }
  .hero-stat:nth-child(2).is-in::before, .hero-stat:nth-child(2).is-in .hero-stat-num, .hero-stat:nth-child(2).is-in .hero-stat-cap { animation-delay: 0.3s; }
  .hero-stat:nth-child(3).is-in::before, .hero-stat:nth-child(3).is-in .hero-stat-num, .hero-stat:nth-child(3).is-in .hero-stat-cap { animation-delay: 0.6s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-in, .hero-word, .hero-stat-num, .hero-stat-cap, .about-hero-aside::before { opacity: 1; transform: none; filter: none; animation: none; }
  .reveal, .svc-num { opacity: 1; transform: none; filter: none; transition: none; }
  .hero-stat::before { transform: none; animation: none; }
  .ring-arc { transition: none; }
}

/* — tablet, either way up: the Home hero at one common height — copy at
   the top, the helix in its band, the results in a row at the foot (the
   phone rules give the upright tablet most of this already; on its side
   the desktop hero is too short for the helix and the results both) — */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait),
       (min-width: 861px) and (max-width: 1200px) and (orientation: landscape), (min-width: 1201px) and (max-width: 1400px) and (min-height: 900px) and (orientation: landscape) {
  [data-hero] { min-height: clamp(760px, 72svh, 980px) !important; box-sizing: border-box; justify-content: flex-start !important; padding-top: 150px !important; }
  .hero-copy { margin: 0 !important; }
  .hero-stats {
    align-self: stretch !important; justify-content: flex-start !important;
    flex-direction: row; gap: 40px !important; margin-top: auto !important; padding-top: 220px;
  }
  .hero-stat { flex: 1 1 0; max-width: none !important; }
}
/* — tablet on its side only: How We Work and About keep their desktop
   compositions (photo on the right with the copy beside it and the steps at
   the foot; headline and copy side by side), at the Home hero's height.
   Upright, they stack like the phone: photo full width under the nav, then
   the copy. — */
@media (min-width: 861px) and (max-width: 1200px) and (orientation: landscape), (min-width: 1201px) and (max-width: 1400px) and (min-height: 900px) and (orientation: landscape) {
  .hww-hero, .about-hero { min-height: clamp(760px, 72svh, 980px) !important; box-sizing: border-box; }
}
/* phone and upright tablet: the How We Work and About heroes share one
   height — the screen's — as they share the desktop's clamp(). How We Work's
   four steps hug the foot; About's copy sits centred in the swoosh. Where
   the content is taller than the screen the hero simply grows. */
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  .hww-hero, .about-hero { min-height: 100svh; display: flex; flex-direction: column; box-sizing: border-box; }
  .hww-hero { justify-content: flex-start; }
  .hww-steps { margin-top: auto; padding-top: 36px; }
  .about-hero { justify-content: center; }
}
/* upright: the About hero stacks like the phone — headline, then the copy
   on its copper rule (the two-column layout otherwise returns above 960px) */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
  /* the same height as the Home hero; the photo trimmed so the steps fit */
  .hww-hero, .about-hero { min-height: clamp(760px, 72svh, 980px); }
  .hww-hero { padding-bottom: 40px; }
  .hww-photo { aspect-ratio: auto; height: 34svh; }
  .about-hero-copy { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about-h1 { font-size: 64px !important; max-width: 14ch; }
  .about-h1 .about-line { white-space: normal; }
  .about-hero-aside { max-width: 46ch; }
  .about-hero-aside p { font-size: 19px !important; line-height: 1.6; }
}

/* — tablet on its side: 1024–1200px, or up to 1400px when the screen is at
   least 900px tall (a 13" iPad Pro is 1366×1024; a 1366×768 laptop stays
   on the desktop layout). The Let's-talk card on the inner pages stops
   short of where the photo's swoosh begins — */
@media (min-width: 861px) and (max-width: 1200px) and (orientation: landscape), (min-width: 1201px) and (max-width: 1400px) and (min-height: 900px) and (orientation: landscape) {
  .cta-card { max-width: 37vw; }
}