/* ==========================================================================
   Literati Medical Communications
   Palette sampled directly from the logo artwork.
   ========================================================================== */

:root{
  /* Base is a deep navy sampled from the background film's own field (#02203E),
     not neutral black. The page and the footage now read as one space instead
     of the video sitting in a black frame. */
  --ink:          #04121F;
  --ink-2:        #071A2B;

  /* Copper from the logo mark. It happens to sit almost exactly on the film's
     glowing helix (#EB9A6D brightest / #B4653D typical), so brand and footage
     share an accent without either being forced. */
  /* Copper carries the whole accent system, so saturation is tuned here and
     nowhere else. Hues are unchanged from the original brand — only chroma is
     lifted, so it reads as warm metal rather than washed beige. */
  --copper:       #E0662F;
  --copper-lt:    #F2854A;
  --copper-dk:    #AE441F;

  /* This film's brightest frame measures 0.0167 luminance — barely above the
     page base itself. That buys a lot of contrast headroom, so the muted tones
     can go back to a properly restrained grey instead of the lifted values the
     previous, far brighter clip demanded. */
  --fg:           #F2F5F7;
  --fg-2:         #CBD5DC;
  --fg-3:         #A2AFB8;

  /* Glass, not plate. The film is dark enough (median luminance 16/255, 95% of
     pixels under 59) that the tint can stay very light and text still clears
     10:1 against it — so the helix reads through the panels instead of being
     buried. Blur is the other half of the dial: past ~20px it stops flattening
     contrast and starts erasing the motion itself, which is what made the
     backdrop invisible behind full-width panels on phones. */
  --surface:      rgba(5,20,34, .20);
  --surface-2:    rgba(5,20,34, .30);
  --glass-blur:   blur(18px) saturate(1.4);
  --hairline:     rgba(235, 120, 62, .28);
  --hairline-2:   rgba(235, 120, 62, .58);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 6rem;

  --gutter: clamp(1.5rem, 6vw, 7.5rem);
  --measure: 68ch;
  --radius: 18px;
  --radius-lg: 26px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur: 240ms;

  --z-stage: 0; --z-content: 10; --z-rail: 30; --z-header: 40;
}

/* Phones and small tablets stack every panel to full width, so the glass covers
   most of the screen instead of floating in it. At that coverage the desktop
   tint reads as a solid sheet and the film vanishes — which is exactly what
   happened on mobile — so both dials come down again. Text still clears 9:1
   here because the footage underneath is so dark. */
@media (max-width: 900px){
  :root{
    --surface:      rgba(5,20,34, .16);
    --surface-2:    rgba(5,20,34, .26);
    --glass-blur:   blur(13px) saturate(1.45);
  }
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }

body{
  min-height: 100dvh;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem; font-weight: 300; line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: rgba(233, 110, 52, .34); color: #fff; }

:where(a, button, input, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--copper-lt);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link{
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200; padding: .75rem 1.5rem;
  background: var(--copper-lt); color: #1a0f06;
  font-weight: 600; font-size: .875rem;
  border-radius: 0 0 12px 12px;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, .h2 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.015em; }

.h2{
  font-size: clamp(2.125rem, 4.8vw, 4rem);
  color: #fff;
  display: flex; flex-direction: column;
}
.h2 em, h1 em { font-style: italic; color: var(--copper-lt); font-weight: 400; }

.kicker{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--copper-lt);
  margin-bottom: .25rem;
}

.prose p{
  color: var(--fg-2);
  max-width: var(--measure);
  line-height: 1.8;
  margin-bottom: var(--s-2);
}
.prose p:last-child { margin-bottom: 0; }

.section__lead{
  color: var(--fg-2);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.8;
  max-width: 70ch;
  margin-top: var(--s-3);
}

/* Reusable readable plate. Anything sitting on it is legible no matter what
   the film is doing behind. */
.surface{
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.4vw, 3rem);
}
.surface--tight{ padding: clamp(1.25rem, 2.2vw, 1.75rem); border-radius: var(--radius); }

/* --- Cinematic backdrop ------------------------------------------------- */
.stage{ position: fixed; inset: 0; z-index: var(--z-stage); overflow: hidden; background: var(--ink); }

#film{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-soft); }
#film.is-ready { opacity: 1; }

.stage::before{
  content: '';
  position: absolute; inset: 0;
  /* ?v= must be bumped whenever the posters are regenerated — .htaccess serves
     webp as immutable, so overwriting them in place never reaches a returning
     visitor. Keep this stamp in step with `v` in assets/frames/manifest.json. */
  background: url('../img/poster.avif?v=202607190835') center / cover no-repeat;
  opacity: .9;
  transition: opacity .8s var(--ease-soft);
}
@media (orientation: portrait) and (max-width: 900px){
  .stage::before{ background-image: url('../img/poster-portrait.avif?v=202607190835'); }
}
.stage.is-live::before { opacity: 0; }

/* Barely there. The film is already very dark on its own — median luminance
   16/255, with 95% of pixels under 59 — so it needs almost no help to keep
   text readable. Previous versions darkened an already-dark clip and buried
   the motion. Only the top and bottom edges are still weighted, to seat the
   header and footer. */
.stage__tint{
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 110% at 50% 42%, rgba(4,18,31,0) 0%, rgba(4,18,31,.10) 62%, rgba(4,18,31,.42) 100%),
    linear-gradient(180deg, rgba(4,18,31,.62) 0%, rgba(4,18,31,0) 18%, rgba(4,18,31,0) 78%, rgba(4,18,31,.70) 100%);
}

.stage__grain{
  position: absolute; inset: -60%;
  opacity: .03; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform: translate(0,0) } 20%{ transform: translate(-2%,1.5%) }
  40%{ transform: translate(1.5%,-2%) } 60%{ transform: translate(-1%,-1.5%) } 80%{ transform: translate(2%,1%) }
}

/* --- Progress ----------------------------------------------------------- */
.scroll-progress{ position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--z-header) + 1); pointer-events: none; }
.scroll-progress span{
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--copper-dk), var(--copper-lt));
  box-shadow: 0 0 14px rgba(233,110,52,.5);
}

/* --- Header ------------------------------------------------------------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--s-4);
  padding: clamp(1rem, 2.2vw, 1.5rem) var(--gutter);
  padding-top: max(clamp(1rem, 2.2vw, 1.5rem), env(safe-area-inset-top));
  border-bottom: 1px solid transparent;
  transition: padding var(--dur) var(--ease-soft), border-color var(--dur);
}
/* The glass lives on a pseudo-element, NOT on the header itself. backdrop-filter
   makes an element a containing block for fixed-position descendants, and the
   mobile menu is a fixed descendant — putting it here collapsed the full-screen
   menu into the 68px header strip the moment the header turned sticky. On the
   pseudo it renders identically and contains nothing. */
.site-header::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(4,18,31, .62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  opacity: 0; transition: opacity var(--dur) var(--ease-soft);
}
.site-header.is-stuck{
  padding-block: .75rem;
  border-bottom-color: var(--hairline);
}
.site-header.is-stuck::before{ opacity: 1; }
/* The header stays locked to the top at all times — it no longer hides on
   scroll-down. Navigation is always one click away. */

.site-header__brand{ display: inline-flex; align-items: center; min-height: 44px; }
.site-header__brand img{
  height: clamp(34px, 3.6vw, 46px); width: auto;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.7));
  transition: height var(--dur) var(--ease-soft);
}
.site-header.is-stuck .site-header__brand img{ height: clamp(30px, 3vw, 38px); }

.site-nav { margin-inline-start: auto; }
/* index numbers belong to the mobile sheet only */
.site-nav__i{ display: none; }
.site-nav ul { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); list-style: none; padding: 0; }
.site-nav a{
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .8125rem; font-weight: 400; letter-spacing: .06em;
  color: var(--fg-2);
  transition: color var(--dur) var(--ease-soft);
}
.site-nav a::after{
  content: ''; position: absolute; left: 0; bottom: .625rem;
  width: 100%; height: 1px; background: var(--copper-lt);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.site-nav a:hover, .site-nav a.is-current { color: #fff; }
.site-nav a:hover::after, .site-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle{
  display: none; width: 44px; height: 44px; margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 6px;
}
.nav-toggle span{ display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* --- Rail --------------------------------------------------------------- */
.rail{ position: fixed; right: clamp(1rem, 2.4vw, 2.25rem); top: 50%; transform: translateY(-50%); z-index: var(--z-rail); }
.rail ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.rail a{ display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; position: relative; }
.rail a span{ display: block; width: 20px; height: 1px; background: rgba(210,218,224,.3); transition: width .45s var(--ease), background .45s var(--ease-soft); }
.rail a:hover span, .rail a.is-current span { width: 36px; background: var(--copper-lt); }
.rail a::before{
  content: attr(data-label);
  position: absolute; right: calc(100% + .75rem);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
  opacity: 0; transform: translateX(6px);
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease);
}
.rail a:hover::before, .rail a:focus-visible::before { opacity: 1; transform: none; }

/* --- Layout ------------------------------------------------------------- */
main { position: relative; z-index: var(--z-content); }
.section{ padding: clamp(4.5rem, 11vh, 8.5rem) var(--gutter); max-width: 1400px; margin-inline: auto; }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --- Hero --------------------------------------------------------------- */
.hero{
  position: relative; z-index: var(--z-content);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 14vh, 9.5rem) var(--gutter) clamp(4rem, 9vh, 6rem);
  max-width: 1400px; margin-inline: auto;
}
/* A soft plate behind the hero copy — constant contrast without a hard edge. */
.hero__inner{
  position: relative;
  max-width: 60rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  margin-inline: calc(clamp(1.5rem, 3vw, 2.75rem) * -1);
  border-radius: var(--radius-lg);
}
.hero__inner::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* a soft directional falloff, not a slab — the film stays visible around the copy */
  background: radial-gradient(115% 125% at 18% 45%, rgba(4,18,31,.72) 0%, rgba(4,18,31,.40) 52%, rgba(4,18,31,0) 100%);
}

.hero__title{
  font-size: clamp(2.75rem, 7.4vw, 6.5rem);
  color: #fff;
  display: flex; flex-direction: column;
  margin-block: var(--s-1) var(--s-3);
}
.hero__lead{
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.7; color: var(--fg);
}
.hero__sub{
  max-width: 52ch; margin-top: var(--s-2);
  font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.7; color: var(--fg-2);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.scroll-cue{
  position: absolute; left: auto; bottom: auto; right: var(--gutter);
  top: calc(100svh - clamp(5rem, 10vh, 6.5rem));
  display: flex; flex-direction: column; align-items: center; gap: .625rem;
}
.scroll-cue__line{
  width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, var(--copper-lt));
  transform-origin: top;
  animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue{
  0%{ transform: scaleY(0); opacity: 0 } 35%{ transform: scaleY(1); opacity: 1 }
  70%{ transform: scaleY(1); opacity: 1 } 100%{ transform: scaleY(1) translateY(44px); opacity: 0 }
}
.scroll-cue__text{ font-size: .625rem; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 900px){ .scroll-cue{ display: none; } }

/* --- About -------------------------------------------------------------- */
.about__grid{
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.about__portrait{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 50px 110px rgba(0,0,0,.65);
}
.about__portrait img{
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform 1.4s var(--ease);
}
.about__portrait:hover img{ transform: scale(1.055); }
.about__portrait::after{
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--hairline-2); border-radius: inherit;
  background: linear-gradient(180deg, rgba(4,18,31,0) 60%, rgba(4,18,31,.5) 100%);
  pointer-events: none;
}
.about__role{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--copper-lt);
  margin: var(--s-2) 0 var(--s-3);
}
.about__body .btn{ margin-top: var(--s-3); }

/* --- Expertise cards ---------------------------------------------------- */
/* No perspective here, and deliberately no will-change on the cards: both
   would create a backdrop root on an ancestor of .card and silently kill its
   frosted glass. Perspective is baked into each card's own transform string
   by scrollDepth() instead. */
.cards{
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Section heads and the About copy are drift-only parallax planes. */
.section__head, .about__body{ will-change: transform; }

.card, .panel, .quote, .sample{
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
  transition: border-color .5s var(--ease-soft), transform .6s var(--ease), box-shadow .6s var(--ease);
}

/* Panels, quotes and samples are scroll-depth elements: main.js writes their
   transform/opacity inline every frame, so transform must NOT be in their
   transition list or the scrubbing smears. Paint properties still ease. */
.panel, .quote, .sample{
  transition: border-color .5s var(--ease-soft), box-shadow .6s var(--ease);
}

[data-spotlight]::before{
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(233,110,52,.2), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease-soft); pointer-events: none;
}
[data-spotlight]:hover::before, [data-spotlight]:focus-within::before, [data-spotlight]:focus::before { opacity: 1; }
[data-spotlight]:hover, [data-spotlight]:focus-within, [data-spotlight]:focus{
  border-color: var(--hairline-2);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}

.card{
  padding: clamp(1.5rem,2.2vw,2rem) clamp(1.125rem,1.8vw,1.5rem) clamp(1.75rem,2.4vw,2.25rem);
  display: flex; flex-direction: column; gap: var(--s-2);
  transform-style: preserve-3d; cursor: default;
  transition: border-color .5s var(--ease-soft), box-shadow .6s var(--ease);
}
/* every child sits on its own Z plane, so tilting produces real parallax
   between the number, the symbol and the title rather than a flat rotation */
.card > *{ transform-style: preserve-3d; transition: transform .5s var(--ease); }

.card__index{
  font-size: .625rem; letter-spacing: .2em; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease-soft), transform .5s var(--ease);
}
.card:hover .card__index, .card:focus .card__index{ color: var(--copper-lt); }

.card__art{
  position: relative;
  width: 100%; aspect-ratio: 1; max-width: 132px;
  margin: var(--s-1) auto 0;
  display: grid; place-items: center;
}
.card__art img{
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .7s var(--ease), filter .5s var(--ease-soft);
  filter: drop-shadow(0 0 0 rgba(233,110,52,0));
}
/* a copper bloom that rises behind the symbol on hover */
.card__glow{
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,110,52,.46), rgba(233,110,52,0) 68%);
  opacity: 0; transform: scale(.6);
  transition: opacity .6s var(--ease-soft), transform .7s var(--ease);
}
.card:hover .card__glow, .card:focus .card__glow{ opacity: 1; transform: scale(1); }
.card:hover .card__art img, .card:focus .card__art img{
  transform: scale(1.08);
  filter: drop-shadow(0 6px 22px rgba(233,110,52,.4));
}

.card__title{
  font-size: clamp(1.25rem,1.7vw,1.5rem); color: #fff;
  text-align: center; margin-top: var(--s-1);
}

/* --- Services ----------------------------------------------------------- */
.services__grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.25rem,2vw,2rem); }
.panel{ padding: clamp(1.75rem, 3vw, 2.75rem); }
.panel__title{
  font-size: clamp(1.5rem,2.3vw,2rem);
  font-style: italic; color: var(--copper-lt); font-weight: 400;
  margin-bottom: var(--s-3);
}
.list{ list-style: none; padding: 0; }
.list li{
  position: relative; padding: .8125rem 0 .8125rem 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--fg-2); font-size: .9375rem;
  transition: color .35s var(--ease-soft), padding-left .35s var(--ease);
}
.list li:last-child{ border-bottom: 0; }
.list li::before{
  content: ''; position: absolute; left: 0; top: 1.375rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--copper);
  box-shadow: 0 0 0 0 rgba(233,110,52,.35);
  transition: box-shadow .5s var(--ease), transform .35s var(--ease), background .35s;
}
.list li:hover{ color: #fff; padding-left: 2rem; }
.list li:hover::before{ background: var(--copper-lt); box-shadow: 0 0 0 5px rgba(233,110,52,.12); transform: scale(1.15); }

.services__cta{ margin-top: clamp(2rem,4vw,3rem); }

.promises{
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(.75rem,1.4vw,1.25rem);
  margin-top: clamp(2rem,4vw,3rem);
}
.promise{
  padding: clamp(1.25rem,2vw,1.75rem) var(--s-2);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  text-align: center; display: flex; flex-direction: column; gap: .25rem;
  /* transform belongs to scrollDepth() — hover lift is done with shadow */
  transition: border-color .45s var(--ease-soft), box-shadow .5s var(--ease);
}
.promise:hover{ border-color: var(--hairline-2); box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.promise strong{ font-family: var(--serif); font-size: clamp(1.25rem,2vw,1.5rem); font-weight: 500; color: #fff; }
.promise span{ font-size: .75rem; letter-spacing: .08em; color: var(--fg-3); }

/* --- Portfolio ---------------------------------------------------------- */
.samples{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem,1.8vw,1.5rem); }
.sample{ padding: clamp(1.75rem,3vw,2.5rem); display: flex; flex-direction: column; gap: .5rem; }
.sample__kind{ font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--copper); }
.sample__name{ font-family: var(--serif); font-size: clamp(1.375rem,2.3vw,1.875rem); color: #fff; }
.sample__meta{ display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2); font-size: .8125rem; color: var(--fg-3); }
.sample__arrow{
  width: 34px; height: 34px; flex: none; position: relative;
  border: 1px solid var(--hairline-2); border-radius: 50%;
  transition: background .4s var(--ease-soft), border-color .4s, transform .5s var(--ease), color .4s;
}
.sample__arrow::before{ content:''; position:absolute; left:11px; top:16px; width:12px; height:1px; background: currentColor; }
.sample__arrow::after{ content:''; position:absolute; right:11px; top:12.5px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform: rotate(45deg); }
.sample:hover .sample__arrow{ background: var(--copper-lt); border-color: var(--copper-lt); color: #1a0f06; transform: translateX(4px); }

/* --- Testimonials ------------------------------------------------------- */
.quotes{ list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,1.6vw,1.5rem); perspective: 1100px; }
.quote{ padding: clamp(1.75rem,2.6vw,2.25rem); display: flex; flex-direction: column; }
.quote p{ font-size: .9375rem; line-height: 1.8; color: var(--fg-2); }
.quote footer{ margin-top: auto; padding-top: var(--s-3); display: flex; flex-direction: column; gap: .1875rem; }
.quote footer strong{ font-size: .875rem; font-weight: 500; color: var(--copper-lt); }
.quote footer span{ font-size: .75rem; color: var(--fg-3); }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 48px; padding: .875rem 1.75rem;
  border: 1px solid var(--hairline-2); border-radius: 999px;
  font-size: .875rem; font-weight: 500; letter-spacing: .02em;
  color: #fff; cursor: pointer; overflow: hidden;
  transition: color .4s var(--ease-soft), border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.btn::before{
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(120deg, var(--copper-lt), var(--copper));
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.btn > *{ position: relative; z-index: 1; }
.btn:hover::before{ transform: scaleX(1); transform-origin: left; }
.btn:hover{ color: #1a0f06; border-color: transparent; box-shadow: 0 14px 40px rgba(199,140,95,.3); }

.btn--solid{
  background: linear-gradient(120deg, var(--copper-lt), var(--copper));
  border-color: transparent; color: #1a0f06; font-weight: 600;
}
.btn--solid::before{ background: linear-gradient(120deg, #fbe6cf, var(--copper-lt)); }
.btn--solid:hover{ color: #1a0f06; }
.btn--block{ width: 100%; }
.btn[disabled]{ opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover::before{ transform: scaleX(0); }

.btn__spinner{
  display: none; width: 15px; height: 15px;
  border: 1.5px solid rgba(26,15,6,.3); border-top-color: #1a0f06;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.btn.is-busy .btn__spinner{ display: block; }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* --- Contact ------------------------------------------------------------ */
.contact__grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.contact__mail{
  display: inline-flex; align-items: center; min-height: 48px;
  margin: var(--s-3) 0 var(--s-2);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.125rem,2.2vw,1.75rem);
  color: var(--copper-lt);
  background-image: linear-gradient(var(--copper-lt), var(--copper-lt));
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--ease);
}
.contact__mail:hover{ background-size: 100% 1px; }

.socials{ list-style: none; padding: 0; display: flex; gap: .75rem; }
.socials a{
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--hairline-2); border-radius: 50%; color: var(--fg-2);
  transition: background .4s var(--ease-soft), color .4s, border-color .4s;
}
.socials a svg{ width: 19px; height: 19px; }
.socials a:hover{ background: var(--copper-lt); color: #1a0f06; border-color: transparent; }

/* --- Form --------------------------------------------------------------- */
.form{
  padding: clamp(1.75rem,3.2vw,2.75rem);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--surface-2);
  /* follows the shared dial so the form thins out on mobile with everything else */
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.field{ display: flex; flex-direction: column; gap: .4375rem; }
.field label{ font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
.field label span{ color: var(--copper-lt); }
.field input, .field textarea{
  min-height: 48px; padding: .8125rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  font-size: 1rem; font-weight: 300;
  transition: border-color .3s var(--ease-soft), background .3s, box-shadow .3s;
}
.field textarea{ resize: vertical; min-height: 128px; line-height: 1.65; }
.field input:hover, .field textarea:hover{ border-color: var(--hairline-2); }
.field input:focus, .field textarea:focus{
  outline: none; border-color: var(--copper-lt);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(233,110,52,.15);
}
.field__error{ font-size: .75rem; color: #ffab9c; display: none; }
.field.has-error .field__error{ display: block; }
.field.has-error input, .field.has-error textarea{ border-color: #ffab9c; }

.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status{ font-size: .875rem; min-height: 1.25rem; }
.form__status.is-ok{ color: var(--copper-lt); }
.form__status.is-bad{ color: #ffab9c; }

/* --- Footer ------------------------------------------------------------- */
.site-footer{
  position: relative; z-index: var(--z-content);
  padding: clamp(3rem,7vh,5rem) var(--gutter) clamp(2rem,5vh,3rem);
  padding-bottom: max(clamp(2rem,5vh,3rem), env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(4,18,31,.6), rgba(4,18,31,.95));
}
.site-footer__mark{ height: clamp(38px,4vw,52px); width: auto; margin-inline: auto; opacity: .9; }
.site-footer__base{
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center; justify-content: center;
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: .75rem; color: var(--fg-3);
}
.site-footer__base a{ display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25rem; transition: color .3s var(--ease-soft); }
.site-footer__base a:hover{ color: var(--copper-lt); }

/* ==========================================================================
   Motion — scoped to .js so the page is fully visible without JavaScript
   ========================================================================== */
[data-split] { display: block; }
.js [data-split] { overflow: hidden; }
.js [data-split] .word{
  display: inline-block; transform: translateY(105%);
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--i,0) * 55ms);
}
.js .is-in [data-split] .word, .js [data-split].is-in .word{ transform: none; }

.js [data-reveal]{
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease);
  transition-delay: calc(var(--d,0) * 110ms);
}
.js [data-reveal].is-in, .js .is-in [data-reveal]{ opacity: 1; transform: none; }

.js [data-stagger] > *{
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease);
  transition-delay: calc(var(--i,0) * 90ms);
}
.js [data-stagger].is-in > *{ opacity: 1; transform: none; }

.reveal-all [data-reveal], .reveal-all [data-stagger] > *{ opacity: 1 !important; transform: none !important; }
.reveal-all [data-split] .word{ transform: none !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quotes{ grid-template-columns: 1fr; }
  .rail{ display: none; }
}

@media (max-width: 900px){
  .about__grid, .contact__grid, .services__grid, .samples{ grid-template-columns: 1fr; }
  .about__portrait{ max-width: 26rem; }
  .nav-toggle{ display: flex; }

  /* --- Full-screen frosted menu sheet ---
     Sits above the header so the burger stays reachable. The tint is kept
     deliberately light and the blur moderate so the DNA film keeps moving
     behind the links — on a phone this is the one screen where the footage
     is fully visible instead of hidden behind full-width panels. */
  .site-nav{
    position: fixed; inset: 0; margin: 0; z-index: 45;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(env(safe-area-inset-top) + 5.5rem) var(--gutter)
             calc(env(safe-area-inset-bottom) + 2rem);
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(233,110,52,.10), transparent 60%),
      linear-gradient(180deg, rgba(4,18,31,.80) 0%, rgba(4,18,31,.58) 42%, rgba(4,18,31,.86) 100%);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    opacity: 0; visibility: hidden;
    transition: opacity .5s var(--ease-soft), visibility .5s;
  }
  .site-nav.is-open{ opacity: 1; visibility: visible; }

  .site-nav ul{
    flex-direction: column; align-items: stretch;
    gap: clamp(.25rem, 1.5vw, .75rem);
  }
  .site-nav li{ overflow: hidden; }

  .site-nav a{
    display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline;
    gap: clamp(.75rem, 3vw, 1.125rem);
    padding: clamp(.4rem, 1.6vw, .7rem) 0;
    min-height: 0;
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.125rem, 10vw, 3rem); line-height: 1.15;
    color: var(--fg);
    opacity: 0; transform: translateY(clamp(22px, 6vw, 34px));
    transition: opacity .6s var(--ease-soft), transform .7s var(--ease), color .3s var(--ease-soft);
    transition-delay: calc(var(--i,0) * 65ms);
  }
  .site-nav.is-open a{ opacity: 1; transform: none; }
  .site-nav a::after{ display: none; }

  .site-nav__i{
    display: block;
    font-family: var(--sans); font-style: normal;
    font-size: .625rem; letter-spacing: .2em;
    font-variant-numeric: tabular-nums;
    color: var(--copper);
    transition: color .3s var(--ease-soft);
  }
  /* the current section reads copper with a rule under it, matching the rail */
  .site-nav a.is-current{ color: var(--copper-lt); }
  .site-nav a.is-current .site-nav__i{ color: var(--copper-lt); }
  .site-nav a > span{ position: relative; display: inline-block; }
  .site-nav a.is-current > span::after{
    content: ''; position: absolute; left: 0; right: 0; bottom: -.15em;
    height: 1px; background: var(--copper-lt); opacity: .7;
  }
  .site-nav a:active{ color: var(--copper-lt); }

  /* While the sheet is open the header keeps only its logo and burger — its
     own glass plate would otherwise sit as a frosted strip on top of it. */
  body.nav-open .site-header{ border-bottom-color: transparent; }
  body.nav-open .site-header::before{ opacity: 0; }
  /* The sheet is a DESCENDANT of the header, so raising the header does
     nothing — burger and logo are siblings of the sheet and need to outrank it
     inside the header's own stacking context, or the close button is buried. */
  .nav-toggle, .site-header__brand{ position: relative; z-index: 46; }

  .hero__inner{ margin-inline: 0; padding-inline: clamp(1.25rem,4vw,1.75rem); }
}

@media (max-width: 640px){
  .cards, .promises{ grid-template-columns: 1fr 1fr; }
  .form__row{ grid-template-columns: 1fr; }
  .hero__title{ font-size: clamp(2.5rem, 11vw, 3.5rem); }
}

@media (max-width: 400px){
  .cards, .promises{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Accessibility & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > *{ opacity: 1 !important; transform: none !important; }
  [data-split] .word{ transform: none !important; }
  .stage__grain, .scroll-cue__line{ animation: none !important; }
  /* symbols stay fully legible, just without the parallax or bloom */
  .card, .card > *{ transform: none !important; }
  /* scroll-depth elements sit flat and fully visible — scrollDepth() itself
     also bails out under reduced motion, this is belt-and-braces */
  .quote, .panel, .sample, .promise, .section__head, .about__body{
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .card__glow{ opacity: .5 !important; transform: none !important; }
}

@media (prefers-contrast: more){
  :root{ --fg-3: #c6d0d7; --surface: rgba(4,18,31,.94); --surface-2: rgba(4,18,31,.96); --hairline: rgba(199,140,95,.4); }
  .stage__tint{ background: rgba(4,18,31,.9); }
  .hero__inner::before{ background: rgba(4,18,31,.9); }
}

@media print{
  .stage, .rail, .scroll-progress, .site-header, .scroll-cue{ display: none !important; }
  body{ background: #fff; color: #000; }
  .section{ padding: 1.5rem 0; }
  [data-reveal], [data-stagger] > *{ opacity: 1 !important; transform: none !important; }
  .quote, .panel, .sample, .promise, .section__head, .about__body{
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}