/* ==========================================================================
   1. TOKENS
   True monochrome, matching the Dhunna Infra wordmark and the app's
   zero-chroma palette. One theme for the whole page. Corners are square
   everywhere, with no exceptions.
   ========================================================================== */
:root{
  --ink:        #0A0A0A;
  --ink-2:      #101010;
  --ink-3:      #161615;
  --paper:      #EFEEEA;
  --paper-70:   rgba(239,238,234,.70);
  --paper-52:   rgba(239,238,234,.52);
  --line:       rgba(239,238,234,.14);
  --line-soft:  rgba(239,238,234,.07);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1440px;
  --ease: cubic-bezier(.16,1,.3,1);

  --z-nav: 40;
  --z-trail: 5;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--paper); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
}

/* Available to assistive tech and to text extraction, not shown on screen.
   Used for the brand name in the h1, which is otherwise only an image. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--paper); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:600; z-index:100;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* --------------------------------------------------------------------------
   2. TYPE SCALE
   -------------------------------------------------------------------------- */
.display{
  font-size:clamp(2.5rem, 6.4vw, 5.5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0;
  text-wrap:balance;
}
.h2{
  font-size:clamp(1.85rem, 3.6vw, 3.1rem);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:600;
  margin:0;
  text-wrap:balance;
}
.h3{
  font-size:clamp(1.15rem, 1.7vw, 1.4rem);
  line-height:1.25;
  letter-spacing:-.018em;
  font-weight:600;
  margin:0;
}
.body{
  font-size:clamp(1rem, 1.15vw, 1.125rem);
  line-height:1.62;
  color:var(--paper-70);
  max-width:56ch;
  margin:0;
}
.small{ font-size:.9375rem; line-height:1.6; color:var(--paper-70); margin:0; }

/* Wide-tracked micro label. Echoes the INFRA lockup in the wordmark.
   Used three times on the page in total, no more. */
.label{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--paper-52);
  margin:0;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   Square, high contrast. Primary is paper on ink at 17:1.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.625rem;
  padding:1rem 1.75rem;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  border:1px solid var(--paper);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .15s var(--ease);
  will-change:transform;
}
.btn-primary{ background:var(--paper); color:var(--ink); }
.btn-primary:hover{ background:transparent; color:var(--paper); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--paper); background:var(--paper); color:var(--ink); }
.btn:active{ transform:scale(.98); }

.btn svg{ width:1em; height:1em; flex:none; }

/* Underline link */
.ulink{
  color:var(--paper); text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:2px;
  transition:background-size .4s var(--ease);
}
.ulink:hover{ background-size:0% 1px; }

/* --------------------------------------------------------------------------
   4. NAVIGATION - single line, 72px tall
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  height:72px;
  display:flex; align-items:center;
  background:rgba(10,10,10,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav[data-stuck="true"]{
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-mark{ display:flex; align-items:center; text-decoration:none; }
/* The mark lands large and settles as the page moves. Scale rather than height
   so the work stays on the compositor. Anchored left so it shrinks in place. */
.nav-mark img{
  height:20px; width:auto;
  transform-origin:left center;
  transform:scale(1.75);
  transition:transform .7s var(--ease);
}
.nav[data-stuck="true"] .nav-mark img{ transform:scale(1); }

/* Where the browser supports it, tie the same movement directly to scroll
   position so it tracks the wheel continuously instead of snapping between
   two states. Runs off the main thread. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .nav-mark img{
      transition:none;
      animation:navSettle linear both;
      animation-timeline:scroll(root block);
      animation-range:0 260px;
    }
    @keyframes navSettle{
      from{ transform:scale(1.75); }
      to{   transform:scale(1); }
    }
  }
}
@media (prefers-reduced-motion: reduce){
  .nav-mark img{ transform:scale(1); transition:none; }
}
.nav-links{
  display:flex; align-items:center; gap:2.25rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:.875rem; font-weight:500; letter-spacing:-.005em;
  color:var(--paper-70); text-decoration:none;
  transition:color .3s var(--ease);
}
.nav-links a:hover{ color:var(--paper); }
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-cta .btn{ padding:.6875rem 1.25rem; font-size:.8125rem; }

/* --------------------------------------------------------------------------
   4b. MOBILE MENU
   Below 1024px the inline links do not fit on one line, so they move into a
   full-screen panel. Focus is trapped inside it while open, Escape closes it,
   and the page behind cannot scroll.
   -------------------------------------------------------------------------- */
.nav-toggle{ display:none; }

@media (max-width:1023px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }

  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    background:none; border:1px solid var(--line); color:var(--paper);
    cursor:pointer; padding:0;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .nav-toggle:hover{ border-color:var(--paper); }
  .nav-toggle span{
    display:block; width:18px; height:1px; background:currentColor;
    position:relative;
    transition:transform .4s var(--ease), background .2s var(--ease);
  }
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:""; position:absolute; left:0; width:18px; height:1px; background:currentColor;
    transition:transform .4s var(--ease);
  }
  .nav-toggle span::before{ transform:translateY(-6px); }
  .nav-toggle span::after{  transform:translateY(6px); }

  .nav-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{  transform:rotate(-45deg); }

  .menu{
    position:fixed; inset:0; z-index:calc(var(--z-nav) - 1);
    background:var(--ink);
    padding:calc(72px + 2.5rem) var(--gut) 2.5rem;
    display:flex; flex-direction:column; justify-content:space-between;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .45s var(--ease), visibility .45s;
    overflow-y:auto;
  }
  .menu[data-open="true"]{ opacity:1; visibility:visible; pointer-events:auto; }

  .menu > ul{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
  .menu-tiles{ gap:.75rem !important; }
  .menu-tiles a{ padding:0 !important; }
  .menu > ul a{
    display:block; padding:.625rem 0;
    font-size:clamp(1.85rem, 8vw, 2.6rem);
    line-height:1.1; letter-spacing:-.03em; font-weight:600;
    color:var(--paper); text-decoration:none;
    opacity:0; transform:translate3d(0,18px,0);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .menu[data-open="true"] > ul a{ opacity:1; transform:none; }
  .menu > ul li:nth-child(1) a{ transition-delay:.06s; }
  .menu > ul li:nth-child(2) a{ transition-delay:.11s; }
  .menu > ul li:nth-child(3) a{ transition-delay:.16s; }
  .menu > ul li:nth-child(4) a{ transition-delay:.21s; }
  .menu > ul li:nth-child(5) a{ transition-delay:.26s; }

  .menu-foot{ display:grid; gap:.75rem; padding-top:2rem; border-top:1px solid var(--line-soft); }
  /* Must exclude buttons. A bare `.menu-foot a` outranks `.btn-primary` on
     specificity and repaints the label in light text on a light fill, which
     makes it invisible until hovered. */
  .menu-foot a:not(.btn):not(.menu-tile){ font-size:.9375rem; color:var(--paper-70); text-decoration:none; }
  .menu-foot .btn{ justify-content:center; }

  body[data-menu="open"]{ overflow:hidden; }
}

@media (min-width:1024px){ .menu{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .menu, .menu ul a, .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    transition:none;
  }
}

/* --------------------------------------------------------------------------
   5. HERO
   Left column stays on the page grid; the photograph runs off the right edge
   of the viewport. The real Dhunna Infra wordmark sits above the headline.
   -------------------------------------------------------------------------- */
.hero{
  min-height:100dvh;
  display:flex; align-items:flex-end;
  padding-top:calc(72px + 2.5rem);
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
  position:relative;
  overflow:hidden;
}
/* Bottom-anchored at ordinary screen heights. On a very tall display that
   would leave a dead zone above the headline, so centre it there instead. */
@media (min-height:1150px){ .hero{ align-items:center; } }

.hero-inner{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.25rem, 4vw, 3.5rem);
  padding-inline:var(--gut);
}
@media (min-width:1024px){
  .hero-inner{
    /* Left edge lines up with .wrap; the right column keeps running past it. */
    padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
    padding-right:0;
    grid-template-columns:minmax(0,1fr) minmax(0,44vw);
    align-items:end;
    gap:clamp(2.5rem, 4vw, 4.5rem);
  }
}

/* The mark reads better small and paired with a rule than blown up. At large
   sizes the thin wordmark competes with the headline and loses. */
.hero-lockup{
  display:flex; align-items:center; gap:1.125rem;
  margin-bottom:clamp(2rem, 3.5vw, 2.75rem);
}
.hero-logo{ height:clamp(19px, 1.9vw, 26px); width:auto; }
.hero-rule{ height:1px; width:clamp(48px, 8vw, 140px); background:var(--line); flex:none; }

.hero h1{ margin:0; }
.hero h1 .display{ display:block; }
.hero-sub{ margin-top:1.75rem; max-width:46ch; }
.hero-actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.875rem; }

.hero-media{ position:relative; }
.frame{
  position:relative; overflow:hidden;
  background:var(--ink-3);
  aspect-ratio:4/5;
}
.frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.frame:hover img{ filter:grayscale(.55) contrast(1.02); }

.hero-media .frame{ aspect-ratio:auto; height:clamp(360px, 62vh, 680px); }
@media (max-width:1023px){
  .hero-media .frame{ height:auto; aspect-ratio:16/11; }
}

/* Real office photography. 3:2 source, so the frame matches rather than crops. */
.shot{ margin:2.5rem 0 0; }
.shot .frame{ aspect-ratio:3/2; }
.shot figcaption{
  margin-top:.875rem; padding-top:.75rem;
  border-top:1px solid var(--line-soft);
  font-size:.875rem; color:var(--paper-52);
}

/* Continuous drift tied to scroll position. Compositor-driven, so it stays
   smooth without a scroll listener. Left off the property grid, where the
   hover scale owns the transform. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-media .frame img,
    .shot .frame img{
      animation:imgDrift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes imgDrift{
      from{ transform:scale(1.1) translate3d(0,-2.2%,0); }
      to{   transform:scale(1.1) translate3d(0,2.2%,0); }
    }
  }
}

.hero-caption{
  margin-top:1rem; display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line-soft); padding-top:.875rem;
  padding-right:var(--gut);
}

/* --------------------------------------------------------------------------
   6. CAPABILITY PILLS
   The one moving band on the page. Each pill is a raised surface: a bright
   inner edge along the top, a dark inner edge along the bottom, and a cast
   shadow beneath. On hover it lifts, tips towards the viewer, and picks up a
   soft light. The glow stays monochrome, so it reads as light on a surface
   rather than as neon.

   These are the only rounded shapes on the page. That is deliberate, so the
   band reads as a distinct object rather than as another block of content.
   -------------------------------------------------------------------------- */
.pills{
  border-block:1px solid var(--line-soft);
  padding-block:clamp(1.5rem, 3vw, 2.25rem);
  overflow:hidden;
  /* Fade both ends so pills enter and leave rather than being cut off. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.pill-track{
  display:flex; width:max-content; gap:clamp(.75rem, 1.2vw, 1.125rem);
  perspective:900px;
  animation:slide 46s linear infinite;
}
.pills:hover .pill-track,
.pills:focus-within .pill-track{ animation-play-state:paused; }

.pill{
  display:inline-flex; align-items:center;
  padding:.9375rem 1.625rem;
  border-radius:999px;
  font-size:clamp(.9375rem, 1.15vw, 1.0625rem);
  font-weight:500; letter-spacing:-.012em;
  color:var(--paper-70);
  white-space:nowrap;
  transform-style:preserve-3d;
  background:linear-gradient(180deg, rgba(239,238,234,.085), rgba(239,238,234,.018));
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(239,238,234,.20),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 10px 24px -14px rgba(0,0,0,.95);
  transform:translate3d(0,0,0);
  transition:
    transform .55s var(--ease),
    box-shadow .55s var(--ease),
    background .55s var(--ease),
    color .55s var(--ease),
    border-color .55s var(--ease);
}
.pill:hover{
  color:var(--paper);
  border-color:rgba(239,238,234,.28);
  background:linear-gradient(180deg, rgba(239,238,234,.17), rgba(239,238,234,.05));
  transform:translate3d(0,-5px,0) rotateX(7deg) scale(1.025);
  box-shadow:
    inset 0 1px 0 rgba(239,238,234,.36),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 22px 44px -18px rgba(0,0,0,1),
    0 0 34px -8px rgba(239,238,234,.26);
}

@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce){
  .pill-track{ animation:none; perspective:none; }
  .pill:hover{ transform:none; }
  .pills{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}

/* --------------------------------------------------------------------------
   7. SECTION SHELL
   -------------------------------------------------------------------------- */
section{ position:relative; }
.pad{ padding-block:clamp(5rem, 11vw, 10rem); }
.rule{ border-top:1px solid var(--line-soft); }

/* Sticky two-column: heading holds while content scrolls */
.sticky-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,5rem);
}
@media (min-width:1024px){
  .sticky-grid{ grid-template-columns:5fr 7fr; }
  .sticky-head{ position:sticky; top:calc(72px + 3rem); align-self:start; }
}

.stack{ display:grid; gap:0; }
.stack-item{
  padding-block:2.25rem;
  border-top:1px solid var(--line-soft);
  display:grid; gap:.75rem;
}
.stack-item:first-child{ border-top:0; padding-top:0; }
.stack-item .h3{ display:flex; align-items:baseline; gap:1rem; }
.stack-item .idx{
  font-family:var(--mono); font-size:.75rem; color:var(--paper-52);
  letter-spacing:.1em; flex:none;
}

/* --------------------------------------------------------------------------
   7a. STATEMENT + IMAGE MARQUEE
   A single large statement, then two rows of work travelling against each
   other. Opposing directions read as motion rather than as a conveyor belt.
   -------------------------------------------------------------------------- */
.statement{ padding-block:clamp(4.5rem, 9vw, 8rem) 0; }
.statement-text{
  font-size:clamp(1.6rem, 3.4vw, 3rem);
  line-height:1.14; letter-spacing:-.032em; font-weight:600;
  max-width:22ch; margin:0;
  text-wrap:balance;
}
@media (min-width:900px){ .statement-text{ max-width:26ch; } }

.mq{
  margin-top:clamp(2.5rem, 5vw, 4.5rem);
  display:grid; gap:clamp(.75rem, 1.4vw, 1.25rem);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mq-row{ overflow:hidden; }
.mq-track{
  display:flex; width:max-content; gap:clamp(.75rem, 1.4vw, 1.25rem);
  animation:mqSlide 54s linear infinite;
}
.mq-reverse{ animation-direction:reverse; animation-duration:64s; }
.mq:hover .mq-track{ animation-play-state:paused; }

.mq-item{
  margin:0; flex:none;
  width:clamp(210px, 24vw, 380px);
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--ink-3);
}
.mq-item img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.mq-item:hover img{ transform:scale(1.06); filter:grayscale(.35) contrast(1); }

@keyframes mqSlide{ to{ transform:translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce){
  .mq-track{ animation:none; }
  .mq-row{ overflow-x:auto; }
  .mq{ -webkit-mask-image:none; mask-image:none; }
}

/* --------------------------------------------------------------------------
   7b. YEARS + TEAM
   -------------------------------------------------------------------------- */
.years{
  font-size:clamp(4.5rem, 12vw, 9rem);
  line-height:.86; letter-spacing:-.055em; font-weight:600;
  margin:0 0 .75rem;
}
.years span{ color:var(--paper-52); }

.team{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--line-soft); }
@media (min-width:640px){ .team{ grid-template-columns:1fr 1fr; column-gap:clamp(1.5rem,3vw,3rem); } }
.team-item{ padding-block:1.125rem; border-bottom:1px solid var(--line-soft); }
.team-name{ margin:0; font-size:1rem; font-weight:600; letter-spacing:-.015em; }
.team-role{ margin:.2rem 0 0; font-size:.875rem; color:var(--paper-52); }

/* --------------------------------------------------------------------------
   8. WORK GRID - four items, four cells, deliberately unequal
   -------------------------------------------------------------------------- */
.work{
  display:grid; grid-template-columns:1fr; gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (min-width:768px){
  .work{ grid-template-columns:repeat(12,1fr); }
  /* Flagship wide, then two of equal weight beneath it. */
  .work-item:nth-child(1){ grid-column:span 12; }
  .work-item:nth-child(2){ grid-column:span 6; }
  .work-item:nth-child(3){ grid-column:span 6; }
  .work-item:nth-child(1) .frame{ aspect-ratio:2/1; }
  .work-item:nth-child(2) .frame{ aspect-ratio:4/3; }
  .work-item:nth-child(3) .frame{ aspect-ratio:4/3; }
}
.work-item{ display:block; text-decoration:none; }
.work-item .frame img{ transition:transform 1s var(--ease), filter .6s var(--ease); }
.work-item:hover .frame img{ transform:scale(1.035); filter:grayscale(.5); }
.work-meta{
  margin-top:1rem; padding-top:.875rem;
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
.work-meta p{ margin:0; }

/* --------------------------------------------------------------------------
   9. CURSOR IMAGE TRAIL
   Images follow the pointer across this band. Pure transform and opacity,
   driven by requestAnimationFrame. Disabled for reduced motion and on touch,
   where the static headline carries the section on its own.
   -------------------------------------------------------------------------- */
.trail-section{
  position:relative;
  min-height:min(88vh, 780px);
  display:grid; place-items:center;
  overflow:hidden;
  background:var(--ink-2);
  border-block:1px solid var(--line-soft);
  cursor:crosshair;
}
.trail-canvas{
  position:absolute; inset:0; z-index:var(--z-trail);
  pointer-events:none;
  /* Filter the layer once rather than filtering every frame inside it. */
  filter:grayscale(1) contrast(1.1);
  contain:strict;
}
.trail-img{
  position:absolute; top:0; left:0;
  width:clamp(150px, 15vw, 260px);
  aspect-ratio:3/4;
  object-fit:cover;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.86);
  will-change:transform, opacity;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.trail-img.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.trail-copy{
  position:relative; z-index:calc(var(--z-trail) + 1);
  text-align:center; pointer-events:none;
  padding-inline:var(--gut);
}
.trail-copy .h2{ max-width:18ch; margin-inline:auto; }
.trail-copy .body{ margin-inline:auto; margin-top:1.25rem; max-width:46ch; }
@media (prefers-reduced-motion: reduce){
  .trail-canvas{ display:none; }
}

/* --------------------------------------------------------------------------
   10. PROCESS - horizontal band, verbs as the labels
   -------------------------------------------------------------------------- */
.steps{
  display:grid; grid-template-columns:1fr; gap:0;
  margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line-soft);
}
@media (min-width:768px){
  .steps{ grid-template-columns:repeat(4,1fr); }
  .step{ border-left:1px solid var(--line-soft); padding-inline:clamp(1rem,2vw,2rem); }
  .step:first-child{ border-left:0; padding-left:0; }
}
.step{
  padding-block:2rem;
  border-bottom:1px solid var(--line-soft);
  display:grid; gap:.625rem; align-content:start;
}
@media (min-width:768px){ .step{ border-bottom:0; } }
.step .h3{ font-size:1.25rem; }

/* --------------------------------------------------------------------------
   11. PORTAL PANEL - split, tinted surface
   -------------------------------------------------------------------------- */
.panel{
  background:var(--ink-3);
  border:1px solid var(--line-soft);
  padding:clamp(1.75rem,4vw,3.5rem);
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .panel{ grid-template-columns:1fr 1fr; align-items:start; } }
.scopes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; list-style:none; padding:0; }
.scopes li{
  font-family:var(--mono); font-size:.8125rem;
  border:1px solid var(--line); padding:.375rem .75rem; color:var(--paper-70);
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq{ margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; background:none; border:0; color:var(--paper);
  font-family:inherit; font-size:clamp(1.0625rem,1.6vw,1.25rem); font-weight:600;
  letter-spacing:-.018em; text-align:left;
  padding:1.625rem 3rem 1.625rem 0;
  cursor:pointer; position:relative;
  transition:opacity .3s var(--ease);
}
.faq-q:hover{ opacity:.7; }
.faq-q::after,.faq-q::before{
  content:""; position:absolute; right:.25rem; top:50%;
  width:14px; height:1px; background:var(--paper);
  transition:transform .4s var(--ease);
}
.faq-q::before{ transform:rotate(90deg); }
.faq-q[aria-expanded="true"]::before{ transform:rotate(0deg); }
.faq-a{
  overflow:hidden; height:0;
  transition:height .45s var(--ease);
}
@media (prefers-reduced-motion: reduce){ .faq-a{ transition:none; } }
.faq-a-inner{ padding-bottom:1.75rem; }

/* --------------------------------------------------------------------------
   13. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (min-width:900px){ .contact-grid{ grid-template-columns:5fr 7fr; } }

.field{ display:grid; gap:.5rem; margin-bottom:1.5rem; }
.field label{ font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--paper); }
.field input,.field textarea{
  font-family:inherit; font-size:1rem; color:var(--paper);
  background:var(--ink-3);
  border:1px solid var(--line);
  padding:.9375rem 1rem;
  width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:8rem; }
.field input::placeholder,.field textarea::placeholder{ color:var(--paper-52); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--paper); background:var(--ink-2);
}
.field .hint{ font-size:.8125rem; color:var(--paper-70); margin:0; }
.field .err{ font-size:.8125rem; color:var(--paper); margin:0; font-weight:600; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ margin-top:1.25rem; font-size:.9375rem; }
.form-status:empty{ margin-top:0; }
.form-status[data-tone="ok"]{ color:var(--paper); font-weight:600; }
.form-status[data-tone="bad"]{ color:var(--paper); }

.btn[aria-busy="true"]{ opacity:.62; pointer-events:none; }

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.contact-list li{
  padding-block:1.375rem; border-top:1px solid var(--line-soft);
  display:grid; gap:.25rem;
}
.contact-list li:first-child{ border-top:0; padding-top:0; }
.social{ list-style:none; margin:.25rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.social li{ border:0; padding:0; margin:0; }
.social a{ font-size:.9375rem; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.foot{ border-top:1px solid var(--line-soft); padding-block:clamp(3rem,6vw,5rem) 2.5rem; }
.foot-grid{
  display:grid; grid-template-columns:1fr; gap:2.5rem;
}
@media (min-width:768px){ .foot-grid{ grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; } }
/* Oversized closing mark. Held at 968px, the file's native width, so it never
   upscales. Decorative: the name is already real text in the line below. */
/* Displayed at roughly half the file's 968px width. A raster mark shown at
   1:1 has no pixels in hand for the thin strokes and reads soft; downsampling
   gives it something to resolve against. */
.foot-mark-xl{
  margin-top:clamp(2.5rem, 4.5vw, 4rem);
  max-width:clamp(240px, 34vw, 440px);
}
.foot-mark-xl img{ width:100%; height:auto; }

/* Visible by default, always. This sits at the very end of the document, so a
   reveal that waits on the element finishing its entry into the viewport can
   never complete: the page runs out of scroll first and the mark stays hidden.
   Motion here only ever moves an already-painted element. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .foot-mark-xl img{
      animation:footDrift linear both;
      animation-timeline:view();
      /* Settles well before the element has finished entering, so it reaches
         rest even when the document cannot scroll any further. */
      animation-range:entry 0% entry 65%;
    }
    @keyframes footDrift{
      from{ transform:translate3d(0,9%,0) scale(1.03); opacity:.55; }
      to{   transform:none; opacity:1; }
    }
  }
}
@media (prefers-reduced-motion: reduce){
  .foot-mark-xl img{ animation:none; }
}
.foot h4{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-52); margin:0 0 1.125rem;
  font-weight:500;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.foot ul a{ font-size:.9375rem; color:var(--paper-70); text-decoration:none; transition:color .3s var(--ease); }
.foot ul a:hover{ color:var(--paper); }
.foot-base{
  margin-top:clamp(3rem,6vw,5rem); padding-top:1.75rem;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.8125rem; color:var(--paper-52);
}

/* --------------------------------------------------------------------------
   14a. BACK TO TOP
   Appears once the hero is behind you. Square, to match everything else.
   -------------------------------------------------------------------------- */
.to-top{
  position:fixed; right:clamp(1rem, 2.5vw, 2rem); bottom:clamp(1rem, 2.5vw, 2rem);
  z-index:calc(var(--z-nav) - 2);
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink-2); color:var(--paper);
  border:1px solid var(--line);
  cursor:pointer; padding:0;
  opacity:0; visibility:hidden; transform:translate3d(0,10px,0);
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             visibility .45s, background .3s var(--ease), border-color .3s var(--ease);
}
.to-top[data-show="true"]{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.to-top svg{ width:16px; height:16px; }
@media (prefers-reduced-motion: reduce){ .to-top{ transition:none; } }
@media print{ .to-top{ display:none; } }

/* Active section, marked as you scroll. */
.nav-links a[aria-current="true"]{ color:var(--paper); }

/* --------------------------------------------------------------------------
   14b. PRELOADER
   Added by script only, so a browser without JavaScript never sees a curtain
   it cannot lift. The page content sits underneath it the whole time and is
   fully present in the HTML, so crawlers are unaffected.
   -------------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid; place-items:center;
  gap:1.75rem;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--ease);
}
.preloader-inner{ display:grid; justify-items:center; gap:1.5rem; }
.preloader img{
  width:clamp(150px, 20vw, 210px); height:auto;
  opacity:0; transform:translate3d(0,10px,0);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.preloader[data-in="true"] img{ opacity:1; transform:none; }

.preloader-bar{
  width:clamp(150px, 20vw, 210px); height:1px;
  background:var(--line);
  position:relative; overflow:hidden;
}
.preloader-bar::after{
  content:""; position:absolute; inset:0;
  background:var(--paper);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s var(--ease);
}
.preloader[data-progress="1"] .preloader-bar::after{ transform:scaleX(var(--p,0)); }

/* Lifts as a curtain rather than a fade, so the hero underneath is revealed
   rather than cross-dissolved into. */
.preloader[data-done="true"]{ clip-path:inset(0 0 100% 0); }
.preloader[data-done="true"] .preloader-inner{ opacity:0; transition:opacity .4s var(--ease); }

body[data-loading="true"]{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .preloader{ transition:none; }
  .preloader img{ transition:none; opacity:1; transform:none; }
  .preloader-bar{ display:none; }
}

/* --------------------------------------------------------------------------
   15. SCROLL REVEAL
   Driven by IntersectionObserver. Elements are visible by default so the page
   is fully readable if JavaScript never runs.
   -------------------------------------------------------------------------- */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  filter:blur(9px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:filter, transform, opacity;
}
.js [data-reveal].is-in{ opacity:1; transform:none; filter:blur(0); }
/* Dropped once it has arrived, so nothing holds a filter layer for the life
   of the page. */
.js [data-reveal].is-settled{ will-change:auto; }

/* Hero entrance: a clipped line reveal, so the headline lands before the rest */
.js .reveal-line{ overflow:hidden; }
.js .reveal-line > *{
  display:block;
  transform:translate3d(0,105%,0);
  filter:blur(14px);
  transition:transform 1.15s var(--ease), filter 1.15s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .ready .reveal-line > *{ transform:none; filter:blur(0); }

.js .clip-in{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease); transition-delay:var(--d,0ms); }
.js .ready .clip-in{ clip-path:inset(0 0 0 0); }

/* Hero children enter on load, not on scroll. The hero sits at the bottom of a
   full-height band, which on a tall monitor falls inside the reveal observer's
   bottom margin. Tying it to load keeps the entrance as one movement and
   guarantees the subtext and buttons are painted at first view. */
.js .enter{
  opacity:0; transform:translate3d(0,20px,0); filter:blur(8px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .ready .enter{ opacity:1; transform:none; filter:blur(0); }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal],
  .js .reveal-line > *,
  .js .enter,
  .js .clip-in{
    opacity:1 !important; transform:none !important; filter:none !important;
    clip-path:none !important; transition:none !important;
  }
}


/* --------------------------------------------------------------------------
   16. MOBILE MENU DETAIL
   The panel carries what a phone visitor actually reaches for: where we are,
   how to reach us, when we are open.
   -------------------------------------------------------------------------- */
.menu-row{
  display:flex; gap:.875rem; align-items:flex-start;
  padding:.9375rem 0;
  border-top:1px solid var(--line-soft);
  text-decoration:none; color:var(--paper);
  transition:opacity .3s var(--ease);
}
a.menu-row:hover{ opacity:.66; }
.menu-row svg{
  width:20px; height:20px; flex:none; margin-top:.1rem;
  fill:none; stroke:currentColor; stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--paper-52);
}
.menu-row span{ display:grid; gap:.15rem; font-size:.8125rem; color:var(--paper-52); line-height:1.45; }
.menu-row strong{ font-size:.9375rem; font-weight:600; color:var(--paper); letter-spacing:-.01em; }

.menu-social{
  display:flex; gap:.625rem; list-style:none;
  margin:0; padding:1.125rem 0 .25rem;
  border-top:1px solid var(--line-soft);
}
.menu-social li{ margin:0; }
.menu-social a{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--paper);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.menu-social a:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.menu-social svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   17. SHARE
   Uses the native share sheet where there is one, and falls back to copying
   the link. The result is announced, not only shown.
   -------------------------------------------------------------------------- */
.share{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.share-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6875rem 1.125rem;
  font-family:inherit; font-size:.875rem; font-weight:600; letter-spacing:-.01em;
  background:none; color:var(--paper); border:1px solid var(--line);
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.share-btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.share-btn svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.share-note{ font-size:.8125rem; color:var(--paper-52); }
.share-note:empty{ display:none; }

/* --------------------------------------------------------------------------
   18. ARTICLE PAGES
   -------------------------------------------------------------------------- */
.crumbs{ font-size:.8125rem; color:var(--paper-52); margin:0 0 1.5rem; }
.crumbs a{ color:var(--paper-52); text-decoration:none; }
.crumbs a:hover{ color:var(--paper); }

.page-head{ padding-top:calc(72px + clamp(3rem, 7vw, 6rem)); padding-bottom:clamp(2rem, 4vw, 3rem); }
.page-head .display{ max-width:18ch; }
.page-lede{ margin-top:1.5rem; max-width:52ch; font-size:clamp(1.0625rem, 1.4vw, 1.25rem); color:var(--paper-70); line-height:1.55; }

.page-figure{ margin:0 0 clamp(2.5rem, 5vw, 4rem); }
.page-figure .frame{ aspect-ratio:16/9; }
.page-figure figcaption{
  margin-top:.875rem; padding-top:.75rem;
  border-top:1px solid var(--line-soft);
  font-size:.875rem; color:var(--paper-52);
}

.prose{ max-width:68ch; }
.prose h2{
  font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.12; letter-spacing:-.025em;
  font-weight:600; margin:clamp(2.5rem,5vw,3.5rem) 0 1rem;
}
.prose h3{ font-size:1.125rem; font-weight:600; letter-spacing:-.015em; margin:2rem 0 .625rem; }
.prose p{ margin:0 0 1.125rem; color:var(--paper-70); line-height:1.65; }
.prose ul{ margin:0 0 1.25rem; padding-left:1.1rem; color:var(--paper-70); line-height:1.65; }
.prose li{ margin-bottom:.5rem; }
.prose strong{ color:var(--paper); font-weight:600; }


/* --------------------------------------------------------------------------
   19. MENU TILES
   Each destination is an image with its name across it. The bevel is a bright
   inner edge on top and a dark one beneath, the same treatment as the pills,
   so the panel belongs to the rest of the page. A slow streak crosses each
   tile on its own offset, which keeps the panel alive without the three of
   them pulsing in unison.
   -------------------------------------------------------------------------- */
.menu-tile{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/6.5;
  background:var(--ink-3);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(239,238,234,.20),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 12px 28px -16px rgba(0,0,0,.95);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.menu-tile img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.52);
  transform:scale(1.02);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.menu-tile span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.1rem, 4.6vw, 1.5rem);
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper);
  text-shadow:0 1px 18px rgba(0,0,0,.7);
  /* The link itself is the target, so the label must not eat the tap. */
  pointer-events:none;
}
.menu-tile:active{ transform:scale(.99); }
.menu-tile:hover,
.menu-tile:focus-visible{
  border-color:rgba(239,238,234,.34);
  box-shadow:
    inset 0 1px 0 rgba(239,238,234,.34),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 20px 40px -18px rgba(0,0,0,1),
    0 0 30px -8px rgba(239,238,234,.22);
}
.menu-tile:hover img,
.menu-tile:focus-visible img{ transform:scale(1.07); filter:grayscale(.5) brightness(.62); }

/* The streak. Sits above the image, below the label, and never takes a tap. */
.menu-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,
    transparent 38%,
    rgba(239,238,234,.02) 46%,
    rgba(239,238,234,.20) 50%,
    rgba(239,238,234,.02) 54%,
    transparent 62%);
  transform:translate3d(-130%,0,0);
  pointer-events:none;
  animation:tileStreak 5.4s var(--ease) infinite;
  animation-delay:var(--sd, 0s);
}
@keyframes tileStreak{
  0%        { transform:translate3d(-130%,0,0); }
  38%, 100% { transform:translate3d(130%,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .menu-tile::after{ animation:none; opacity:0; }
  .menu-tile img{ transition:none; }
}


/* --------------------------------------------------------------------------
   20. LEGAL PAGES
   Long-form policy text. Narrow measure, generous leading, numbered sections
   separated by a hairline so the structure survives a fast scan.
   -------------------------------------------------------------------------- */
.legal-updated{ margin-top:1.25rem; font-size:.875rem; color:var(--paper-52); }

.legal{ max-width:70ch; }
.legal-sec{ padding-block:clamp(1.75rem,3vw,2.5rem); border-top:1px solid var(--line-soft); }
.legal-sec:first-child{ border-top:0; padding-top:0; }
.legal-sec h2{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  line-height:1.25; letter-spacing:-.015em; font-weight:600;
  margin:0 0 .875rem;
}
.legal-sec p{ margin:0 0 1rem; color:var(--paper-70); line-height:1.68; font-size:.9375rem; }
.legal-sec p:last-child{ margin-bottom:0; }
.legal-sec ul{ margin:0 0 1rem; padding-left:1.15rem; color:var(--paper-70); line-height:1.68; font-size:.9375rem; }
.legal-sec li{ margin-bottom:.625rem; }
.legal-sec li:last-child{ margin-bottom:0; }
.legal-sec strong{ color:var(--paper); font-weight:600; }
.legal-sec a{ color:var(--paper); text-decoration:underline; text-underline-offset:2px; }
.legal-sec a:hover{ text-decoration-thickness:2px; }
.legal-sec code{
  font-family:var(--mono); font-size:.8125rem;
  background:var(--ink-3); border:1px solid var(--line-soft);
  padding:.1rem .375rem; color:var(--paper);
}