/* Eastgate Equities — "the ledger"
   Olivia curves; Eastgate rules a line. The stratum (the logo's stacked-bar
   arch, promoted to a layout device) is the one signature element. */

:root{
  --pine:#152A26;
  --pine-deep:#0F201C;
  --cypress:#254B44;
  --limestone:#EFEDE6;
  --white:#FFFFFF;
  --off-white:#F7F5F0;
  --pewter:#5C707C;
  --pewter-ink:#4A5A65;
  --pewter-light:#9AAAB4;
  --ash:#B1B3AA;

  --on-dark:#EFEDE6;
  --on-dark-soft:rgba(239,237,230,.78);
  --ink-soft:#3B4A45;

  --serif:"Crimson Pro",Georgia,serif;
  --sans:"Rubik",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --pad-x:clamp(20px,5.5vw,80px);
  --ease:cubic-bezier(.22,1,.36,1);
  --rule:1px;
  --r:10px;             /* softened back up */
  --r-pill:999px;
  --r-sm:6px;
  --maxw:1280px;
  --rail:150px;

  /* One elevation language for every raised surface on the site: a tight
     contact shadow plus a wide, soft ambient one. Applied to physical
     surfaces (cards, photographs, the sticky nav) — never to controls,
     which stay flat. */
  --lift:0 1px 2px rgba(21,42,38,.06),0 14px 32px -16px rgba(21,42,38,.24);
  --lift-hi:0 4px 10px rgba(21,42,38,.07),0 40px 68px -24px rgba(21,42,38,.38);
  --lift-sm:0 1px 2px rgba(21,42,38,.05),0 8px 20px -12px rgba(21,42,38,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--pine-deep)}
body{
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.62;
  /* Dark, not limestone. Every section paints its own ground, so this is never
     visible as page content — but iOS Safari tints the bands behind its status
     bar and toolbar from body's background-color, over the top of theme-color.
     A limestone body is what put a white strip at the edges of the screen. */
  color:var(--pine);background:var(--pine-deep);
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `hidden` makes body a scroll container and kills the
     sticky hero. clip contains overflow without that side effect. */
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--cypress);color:var(--limestone)}
:focus-visible{outline:2px solid var(--pewter);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ───────────────────────────────────────────── */
/* Wide scale on purpose: the mono labels sit at 10px, the display runs to ~150px.
   That ratio is what stops it reading as a brochure. */
.display{font-family:var(--serif);font-weight:200;line-height:.96;letter-spacing:-.014em}
h1.display{font-size:clamp(3.3rem,10.5vw,9.4rem)}
h2.display{font-size:clamp(2.5rem,6.6vw,5.6rem);font-weight:200;line-height:.98}
h3{font-size:1.08rem;font-weight:500;letter-spacing:-.005em}
/* Crimson Pro ExtraLight has a hard floor at 24px — never set it smaller. */
[lang="he"] .display{font-family:var(--sans);font-weight:300}

.eyebrow{
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--pewter-ink);
}
.on-dark .eyebrow,.dark .eyebrow{color:var(--pewter-light)}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);font-weight:300;color:var(--ink-soft);max-width:44ch}
.dark .lede{color:var(--on-dark-soft)}

/* ── layout ─────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin-inline:auto;width:100%}
/* Every section needs its own ground: the hero is sticky beneath them, so a
   transparent section shows the hero straight through it. */
section{padding:clamp(66px,8.5vw,124px) var(--pad-x);background:var(--limestone)}
.statement{padding-block:clamp(76px,9vw,132px) clamp(78px,9vw,124px)}
.dark{background:var(--pine);color:var(--on-dark)}
/* A whisper of grain keeps the flat greens from reading as printer output. */
.dark,.hero{position:relative}
.dark::before,.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  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='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
.dark>*,.hero>*{position:relative;z-index:2}
/* The eyebrow drops into a margin rail so the heading starts further in —
   the page stops marching down one left edge. */
.sec-head{margin-bottom:clamp(40px,5.5vw,74px)}
.sec-head .eyebrow{display:block;margin-bottom:16px}
.sec-head .lede{margin-top:20px}
@media (min-width:900px){
  .sec-head{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 clamp(28px,4vw,64px);align-items:start}
  .sec-head .eyebrow{grid-column:1;grid-row:1;margin:0;padding-top:1.1em;line-height:1.5}
  .sec-head>:not(.eyebrow){grid-column:2}
  .sec-head .lede{max-width:46ch}
}

/* ── the stratum ────────────────────────────────────────
   Graduated hairlines that trace the logo's arch profile. Used as a
   section mark, a hero graphic, and the rule under a group of figures. */
.stratum{display:flex;flex-direction:column;gap:10px;width:100%;max-width:132px}
.stratum span{
  display:block;height:1.5px;background:var(--pewter);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .9s var(--ease);
}
.dark .stratum span{background:var(--pewter-light);opacity:.75}
.stratum span:nth-child(1){width:24%}
.stratum span:nth-child(2){width:46%}
.stratum span:nth-child(3){width:68%}
.stratum span:nth-child(4){width:86%}
.stratum span:nth-child(5){width:100%;height:2.5px}
.in .stratum span,.stratum.in span{transform:scaleX(1)}
.stratum span:nth-child(1){transition-delay:.02s}
.stratum span:nth-child(2){transition-delay:.10s}
.stratum span:nth-child(3){transition-delay:.18s}
.stratum span:nth-child(4){transition-delay:.26s}
.stratum span:nth-child(5){transition-delay:.34s}
.sec-head .stratum{margin-bottom:26px}

/* ── buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:17px 30px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:.7rem;font-weight:500;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.arrow{width:14px;height:14px;flex:0 0 auto;transition:transform .25s var(--ease)}
.btn:hover .arrow,.textlink:hover .arrow,.card:hover .arrow{transform:translateX(4px)}
.btn-solid{background:var(--cypress);color:#fff}
.btn-solid:hover{background:var(--pine)}
.dark .btn-solid{background:var(--limestone);color:var(--pine)}
.dark .btn-solid:hover{background:#fff}
.btn-line{border-color:var(--ash);color:var(--pine)}
.btn-line:hover{border-color:var(--pine)}
.dark .btn-line,.hero .btn-line{border-color:rgba(207,216,221,.62);color:var(--on-dark)}
.dark .btn-line:hover,.hero .btn-line:hover{border-color:#EFEDE6;background:rgba(239,237,230,.08)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

.textlink{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--pewter-ink);display:inline-flex;align-items:center;gap:9px;
  white-space:nowrap;
  padding-bottom:3px;border-bottom:1px solid var(--ash);transition:border-color .25s,color .25s;
}
.textlink:hover{color:var(--pine);border-color:var(--pine)}
.dark .textlink{color:var(--pewter-light);border-color:rgba(154,170,180,.4)}
.dark .textlink:hover{color:var(--on-dark);border-color:var(--pewter-light)}

/* ── nav ────────────────────────────────────────────── */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  display:flex;align-items:center;gap:24px;
  padding:0 var(--pad-x);height:74px;color:var(--on-dark);
  /* blur is always on and only its colour animates — toggling backdrop-filter
     was what made the change read as a hard flip */
  background:rgba(239,237,230,0);
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  transition:background-color .55s var(--ease),color .55s var(--ease),
             height .45s var(--ease),box-shadow .55s var(--ease),
             backdrop-filter .55s var(--ease),-webkit-backdrop-filter .55s var(--ease);
}
.nav.solid{
  background:rgba(239,237,230,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--pine);height:62px;box-shadow:0 1px 0 rgba(21,42,38,.1),var(--lift-sm);
}
.nav-logo{display:flex;align-items:center;height:26px;flex:0 0 auto}
.nav-logo svg{height:22px;width:auto;fill:currentColor}
.nav-links{display:flex;gap:30px;margin-inline-start:auto;align-items:center}
.nav-links a{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;position:relative;padding-block:5px;opacity:.82;transition:opacity .2s}
.nav-links a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav .btn{padding:10px 18px;font-size:.84rem}
.nav-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;margin-inline-start:auto}
.nav-toggle span{display:block;width:19px;height:1.5px;background:currentColor;position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;inset-inline:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--pine);color:var(--on-dark);padding:22px var(--pad-x) 30px;margin:0;
    transform:translateY(-120%);transition:transform .4s var(--ease);
  }
  body.menu-open .nav-links{transform:none}
  .nav-links a{font-size:2rem;font-family:var(--serif);font-weight:200;letter-spacing:-.01em;text-transform:none;padding-block:7px;opacity:1}
  .nav-links .btn{font-family:var(--mono);font-size:.7rem;margin-top:18px}
  .nav.solid .nav-links{top:62px}
}

/* ── hero ───────────────────────────────────────────── */
.hero{
  position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-end;
  padding:150px var(--pad-x) clamp(52px,7vw,84px);
  background:var(--pine);color:var(--on-dark);overflow:hidden;
}
/* The hero pins and everything after slides over it. */
.hero{position:sticky;top:0;z-index:0;min-height:100svh;height:100svh}
main>section:not(.hero),main>div,footer{position:relative;z-index:1}
@media (max-width:640px){
  /* a flatter, mostly-vertical scrim reads far better on a narrow screen than
     the wide diagonal, which stacked too much darkness over the middle */
  .hero-bg::after{
    background:
      linear-gradient(to bottom,rgba(15,32,28,.5) 0%,rgba(15,32,28,.14) 11%,rgba(15,32,28,0) 22%),
      linear-gradient(to top,rgba(15,32,28,.95) 0%,rgba(15,32,28,.76) 30%,rgba(15,32,28,.26) 62%,rgba(15,32,28,.06) 100%);
  }
  /* Fill the whole window, not just the strip the toolbars leave uncovered.
     iOS draws the page behind the floating bottom bar, so a 100svh hero ended
     above it and the sheet's pale top edge showed through as a white line.
     The extra padding puts the copy back exactly where 100svh had it. */
  /* The contact bubble owns the bottom-right corner of every page, so anything
     anchored to the bottom has to clear it — the hero CTAs sat underneath it. */
  .hero{
    height:auto;min-height:100lvh;
    padding-top:104px;
    padding-bottom:calc(88px + (100lvh - 100svh));
  }
  .hero .lede{color:rgba(239,237,230,.92)}
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Seamless because it reverses: `alternate` returns to the exact opening frame,
   so there is never a cut. A sine-like ease hides the turnaround. */
/* Boomerang rather than crossfade — the crossfade read as a dissolve. A single
   layer eases in and back out over 76s round trip; at that speed and with a
   sinusoidal curve the turnaround is not perceptible. */
.hero-layer{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  will-change:transform;
  animation:heroZoom 38s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.hero-layer.b{display:none}
@keyframes heroZoom{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.15) translate3d(-1.2%,-.8%,0)}
}
/* A phone screen is a fraction of the width, so the same drift covers a
   fraction of the distance — it read as a still. Faster and further. */
@media (max-width:640px){
  .hero-layer{animation-name:heroZoomSm;animation-duration:22s}
  @keyframes heroZoomSm{
    from{transform:scale(1.04) translate3d(0,0,0)}
    to{transform:scale(1.26) translate3d(-3%,-2%,0)}
  }
}
/* A warm highlight tracking slowly across the stone, like the sun moving. */
.hero-light{
  position:absolute;inset:-12%;z-index:3;pointer-events:none;
  background:radial-gradient(42% 52% at 60% 32%,rgba(236,226,203,.20),rgba(236,226,203,0) 68%);
  will-change:transform;
  animation:heroLight 39s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes heroLight{
  from{transform:translate3d(-3.5%,-2%,0) scale(1)}
  to{transform:translate3d(4.5%,3%,0) scale(1.18)}
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    /* a short strip purely so the logo and nav stay legible */
    linear-gradient(to bottom,rgba(15,32,28,.52) 0%,rgba(15,32,28,.16) 9%,rgba(15,32,28,0) 20%),
    /* weight sits at the bottom, where the headline and buttons live */
    linear-gradient(to top,rgba(15,32,28,.93) 0%,rgba(15,32,28,.66) 32%,rgba(15,32,28,.18) 62%,rgba(15,32,28,0) 100%),
    /* a gentle lean left, far lighter than before so the arch stays open */
    linear-gradient(100deg,rgba(15,32,28,.46) 0%,rgba(15,32,28,.16) 46%,rgba(15,32,28,0) 78%);
}
.hero .lede{color:rgba(239,237,230,.84)}
.hero-inner{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto}
.hero .eyebrow{display:block;margin-bottom:22px;color:#D8DFE2}
/* the scrim is deliberately light now, so hero text carries its own legibility */
.hero .eyebrow,.hero h1,.hero .lede{text-shadow:0 2px 20px rgba(15,32,28,.55)}
.hero h1{max-width:15ch;margin-bottom:26px}
.hero .lede{max-width:52ch}
.hero-arch{
  position:absolute;z-index:1;inset-inline-end:var(--pad-x);top:clamp(120px,22vh,210px);
  width:min(24vw,250px);display:none;
}
@media (min-width:961px){.hero-arch{display:block}}
.loaded .hero-arch line{transform:scaleX(1)!important}

/* headline rises out of a mask, once */
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(110%);transition:transform 1.05s var(--ease)}
.loaded .mask>span{transform:none}
.loaded .mask:nth-of-type(1)>span{transition-delay:.18s}
.loaded .mask:nth-of-type(2)>span{transition-delay:.30s}
.fade{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.loaded .fade{opacity:1;transform:none}
.loaded .fade.d1{transition-delay:.48s}
.loaded .fade.d2{transition-delay:.60s}
.loaded .fade.d3{transition-delay:.72s}

/* ── statement ──────────────────────────────────────── */
/* Its own ground, so it reads as a pause between the hero and the services
   rather than the top of the services block. */
.statement{background:var(--off-white);border-bottom:1px solid rgba(177,179,170,.5)}
/* The first section after the hero is a sheet sliding over it, so it carries a
   rounded top edge and a shadow to sell the overlap. */
.hero+section{
  border-start-start-radius:26px;border-start-end-radius:26px;
  box-shadow:0 -18px 44px -18px rgba(15,32,28,.42);
}
@media (max-width:640px){.hero+section{border-start-start-radius:20px;border-start-end-radius:20px}}
/* line-by-line rise, which suits a statement better than one block fading */
.statement p .ln{display:block;overflow:hidden}
.statement p .ln>span{
  display:block;transform:translateY(105%);opacity:0;
  transition:transform .95s var(--ease),opacity .8s var(--ease);
}
.statement .in p .ln>span,.statement.in p .ln>span{transform:none;opacity:1}
.statement p .ln:nth-child(1)>span{transition-delay:.05s}
.statement p .ln:nth-child(2)>span{transition-delay:.14s}
.statement p .ln:nth-child(3)>span{transition-delay:.23s}
.statement p .ln:nth-child(4)>span{transition-delay:.32s}
.statement p{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(1.7rem,4vw,3.3rem);line-height:1.24;letter-spacing:-.012em;
  max-width:min(100%,19em);
}
.statement .stratum{margin-bottom:34px;max-width:200px}
/* pushed off the left gutter so the page stops marching in one column */
@media (min-width:1000px){
  .statement .wrap{padding-inline-start:14%}
  .statement .stratum{margin-inline-start:-14%}
}

/* ── service cards ──────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(14px,1.6vw,20px)}
.card{
  background:var(--white);border:0;border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--lift);
  /* opacity must be in here too — this rule wins over .rv, and without it the
     reveal had no fade and snapped in */
  transition:transform .6s var(--ease),box-shadow .55s var(--ease),opacity .7s var(--ease);
}
@media (hover:hover){.card:hover{transform:translateY(-9px);box-shadow:var(--lift-hi)}}
.card.rv{opacity:0;transform:translate3d(0,26px,0)}
.card.rv.in{opacity:1;transform:none}
@media (hover:hover){.card.rv.in:hover{transform:translateY(-9px)}}
.card-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#E6E2DA}
.card-art img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .75s var(--ease),transform 1.1s var(--ease);
}
.card-art img.ready{opacity:1}
.card:hover .card-art img{transform:scale(1.06)}
.card-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,32,28,.5),rgba(15,32,28,0) 58%);
  opacity:.45;transition:opacity .55s var(--ease);
}
.card:hover .card-art::after{opacity:1}
/* the stratum stays hidden until hover, then sweeps in line by line */
.card-art .stratum{position:absolute;left:20px;bottom:18px;max-width:86px;z-index:2;gap:7px}
.card-art .stratum span{background:#EFEDE6;height:1.5px;transform:scaleX(0);transition:transform .5s var(--ease)}
.card-art .stratum span:nth-child(5){height:2px}
.card:hover .card-art .stratum span{transform:scaleX(1)}
.card-body{padding:clamp(22px,2.3vw,30px);display:flex;flex-direction:column;flex:1;position:relative}
/* a cypress rule draws across the body edge on hover */
.card-body::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--cypress);
  transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease);
}
.card:hover .card-body::before{transform:scaleX(1)}
/* the name carries the serif; the sans-bold title was fighting the tagline */
.card h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.06;letter-spacing:-.012em;
  margin-bottom:10px;transition:color .35s var(--ease);
}
.card:hover h3{color:var(--cypress)}
.card .tag{
  font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pewter-ink);
  margin-bottom:16px;line-height:1.5;
}
.card p{font-size:.92rem;color:var(--ink-soft);font-weight:300}
.card .textlink{margin-top:auto;padding-top:26px;align-self:flex-start;border-bottom:0}
.card .textlink span{border-bottom:1px solid var(--ash);padding-bottom:3px;transition:border-color .3s var(--ease)}
.card:hover .textlink{color:var(--cypress)}
.card:hover .textlink span{border-color:var(--cypress)}

/* cards enter in sequence rather than all at once */
.cards .rv{transition-delay:calc(var(--i,0) * 90ms)}
/* stagger only on arrival — delaying the exit made re-entry feel disconnected */
.cards .rv:not(.in){transition-delay:0s}
@media (max-width:760px){
  /* 16px of travel on a 400px-wide screen is a twitch. One card fills the
     column, so it can afford a real entrance. */
  .card.rv{transform:translate3d(0,38px,0) scale(.97)}
  .card.rv.in{transform:none}
  /* one column on a phone: cards arrive one at a time, so an index-based
     delay just makes each one lag behind its own scroll position */
  .cards .rv{transition-delay:0s}
}

/* ── service detail rows ────────────────────────────── */
.srow{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,54px);padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--ash)}
.srow:first-of-type{border-top:0;padding-top:0}
@media (min-width:861px){.srow{grid-template-columns:minmax(0,7fr) minmax(0,9fr)}}
.srow h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.005em}
.srow .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pewter-ink);margin-top:14px;display:block}
.srow .body p{font-weight:300;color:var(--ink-soft);max-width:56ch}
.slist{list-style:none;margin-top:24px;display:grid;gap:0}
.slist li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:15px 0;border-top:1px solid var(--ash);font-size:.95rem;font-weight:300;color:var(--ink-soft);
}
.slist li::before{content:"";width:16px;height:1px;background:var(--pewter);margin-top:.72em}
.srow .btn-row{margin-top:26px}

/* ── the group / strata index ───────────────────────── */
/* The group section literally builds the logo: three nested arch bands, one per
   brand, drawing themselves as each row scrolls in. Eastgate is the outermost. */
.group-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);align-items:start}
@media (min-width:1040px){.group-grid{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(48px,6vw,96px)}}
.group-arch{display:none}
@media (min-width:1040px){.group-arch{display:block;position:sticky;top:130px}}
.group-arch svg{width:100%;height:auto;overflow:visible}
.group-arch .band{
  fill:none;stroke:var(--pewter-light);stroke-width:2;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:.22;
  transition:stroke-dashoffset 1.5s var(--ease),opacity .45s var(--ease),stroke-width .3s var(--ease);
}
.group-arch .band.on{stroke-dashoffset:0;opacity:.62}
.group-arch .band.hot{opacity:1;stroke-width:3.5}
.group-arch .base{stroke:var(--pewter-light);stroke-width:2;opacity:.3}

.strata{border-top:1px solid rgba(154,170,180,.3)}
.stratum-row{
  display:grid;grid-template-columns:1fr;gap:6px;
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid rgba(154,170,180,.3);
  position:relative;
}
@media (min-width:761px){
  .stratum-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,60px);align-items:baseline}
}
.stratum-row{transition:padding-inline-start .4s var(--ease)}
.stratum-row:hover .name{color:#fff}
@media (min-width:761px){.stratum-row:hover{padding-inline-start:14px}}
.stratum-row .name{font-family:var(--serif);font-weight:200;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.12;transition:color .3s var(--ease)}
.stratum-row .role{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pewter-light);display:block;margin-bottom:9px}
.stratum-row .note{font-weight:300;color:var(--on-dark-soft);font-size:.98rem;max-width:52ch}
.stratum-row .textlink{margin-top:14px}
/* the measure line: each row carries a rule whose length steps down the arch */
.stratum-row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;background:var(--pewter-light);
  transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--ease);opacity:.85;
}
.stratum-row.in::after{transform:scaleX(1)}
.stratum-row:nth-child(1)::after{width:36%}
.stratum-row:nth-child(2)::after{width:68%}
.stratum-row:nth-child(3)::after{width:100%}

/* ── team ───────────────────────────────────────────── */
/* Home preview has no bios, so it can go two-up on a phone.
   The About grid carries bios and needs the full column width until 620px. */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,28px)}
.team.team-bios{grid-template-columns:1fr}
@media (min-width:620px){.team.team-bios{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .team{grid-template-columns:repeat(4,1fr)}
  .team.team-bios{grid-template-columns:repeat(3,1fr)}
}
.member figure{
  margin:0;border-radius:var(--r);overflow:hidden;background:var(--pine);aspect-ratio:1/1;
  box-shadow:var(--lift-sm);transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.member:hover figure{transform:translateY(-6px);box-shadow:var(--lift-hi)}
.member img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s var(--ease),transform 1.1s var(--ease)}
.member img.ready{opacity:1}
.member:hover img{transform:scale(1.05)}
.dark .member figure{box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.dark .member:hover figure{box-shadow:0 32px 60px -20px rgba(0,0,0,.75)}
.member .name{font-family:var(--serif);font-weight:300;font-size:1.35rem;margin-top:16px;line-height:1.2}
.member .role{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pewter-ink);margin-top:5px}
.dark .member .role{color:var(--pewter-light)}
.member .bio{font-size:.92rem;font-weight:300;color:var(--ink-soft);margin-top:12px}
.dark .member .bio{color:var(--on-dark-soft)}
.member .mail{font-family:var(--mono);font-size:.72rem;color:var(--pewter-ink);margin-top:10px;display:inline-block;border-bottom:1px solid var(--ash);padding-bottom:2px}

/* ── empty state ────────────────────────────────────── */
.empty{padding-block:clamp(30px,5vw,60px);max-width:56ch}
.empty h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.14;margin-bottom:18px}
.empty p{font-weight:300;color:var(--ink-soft)}
.empty .stratum{margin-bottom:30px}

/* ── contact ────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,70px)}
@media (min-width:861px){.contact-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
/* minmax(0,…) or the long email address sets the grid's min-content width */
.detail{border-top:1px solid rgba(154,170,180,.32);padding:16px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.detail dd{overflow-wrap:anywhere}
@media (min-width:420px){.detail{grid-template-columns:8rem minmax(0,1fr);gap:16px;align-items:baseline}}
.detail dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pewter-light)}
.detail dd{font-weight:300}
.detail dd a:hover{border-bottom:1px solid currentColor}

/* ── footer ─────────────────────────────────────────── */
footer{background:var(--pine-deep);color:var(--on-dark);padding:clamp(46px,6vw,72px) var(--pad-x) 32px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:34px;max-width:var(--maxw);margin-inline:auto}
@media (min-width:761px){.foot-grid{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}}
footer .logo svg{height:24px;width:auto;fill:currentColor;margin-bottom:18px}
footer p{font-size:.9rem;font-weight:300;color:var(--on-dark-soft);max-width:34ch}
.fcol h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pewter-light);font-weight:500;margin-bottom:14px}
.fcol a{display:block;font-size:.92rem;font-weight:300;color:var(--on-dark-soft);padding-block:5px;transition:color .2s}
.fcol a:hover{color:var(--on-dark)}
.foot-base{
  max-width:var(--maxw);margin:clamp(38px,5vw,58px) auto 0;padding-top:22px;
  border-top:1px solid rgba(154,170,180,.22);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:.8rem;color:var(--on-dark-soft);
}

/* ── page header (interior pages) ───────────────────── */
.phead{background:var(--pine);color:var(--on-dark);padding:calc(74px + clamp(56px,7vw,92px)) var(--pad-x) clamp(56px,7vw,92px)}
.phead h1{font-family:var(--serif);font-weight:200;font-size:clamp(2.9rem,8vw,7rem);line-height:.98;letter-spacing:-.014em;max-width:14ch}
.phead .eyebrow{display:block;margin-bottom:18px}
.phead .lede{margin-top:24px;color:var(--on-dark-soft);max-width:46ch}
@media (min-width:900px){
  .phead .wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 clamp(28px,4vw,64px);align-items:start}
  .phead .eyebrow{grid-column:1;grid-row:1;margin:0;padding-top:1.4em;line-height:1.5}
  .phead .wrap>:not(.eyebrow){grid-column:2}
}

/* ── scroll reveal ──────────────────────────────────── */
.rv{opacity:0;transform:translate3d(0,24px,0);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
/* reveals replay, so leaving is quicker and gentler than arriving */
.rv:not(.in){transition-duration:.45s}
@media (max-width:760px){
  .rv{transform:translate3d(0,36px,0)}
  .rv.in{transition-duration:.95s}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* iteration-count matters: an infinite animation at .01ms would strobe */
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .hero-layer{animation:none!important;transform:scale(1.03)!important;opacity:1!important}
  .hero-layer.b{display:none}
  .hero-light{display:none}
  .mask>span,.fade,.rv{transform:none;opacity:1}
  .stratum span{transform:scaleX(1)}
  .stratum-row::after{transform:scaleX(1)}
}

/* Service rows: the photo fills the left column instead of leaving it hollow. */
.srow-art{
  margin:clamp(26px,3vw,40px) 0 0;overflow:hidden;background:#E6E2DA;aspect-ratio:4/3;border-radius:var(--r);
  box-shadow:var(--lift);transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.srow:hover .srow-art{transform:translateY(-6px);box-shadow:var(--lift-hi)}
.srow-art img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s var(--ease),transform 1.1s var(--ease)}
.srow-art img.ready{opacity:1}
.srow:hover .srow-art img{transform:scale(1.05)}
@media (max-width:860px){.srow-art{margin-top:22px}}

/* ── contact channels ───────────────────────────────────
   Same three routes everywhere: the floating bubble, the home contact
   section, and the contact page all read from one list. */
.channels{display:grid;gap:10px;margin-top:34px;max-width:26rem}
.channel{
  display:flex;align-items:center;gap:16px;
  padding:15px 18px;border-radius:var(--r);background:var(--white);
  box-shadow:var(--lift-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.channel:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.channel-ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:var(--pine);color:var(--limestone);
  display:grid;place-items:center;transition:background-color .3s var(--ease);
}
.channel-ico svg{width:17px;height:17px}
.channel:hover .channel-ico{background:var(--cypress)}
.channel-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.channel-label{
  font-family:var(--mono);font-size:.58rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pewter-ink);
}
.channel-value{font-size:.94rem;color:var(--pine);overflow-wrap:anywhere}
.channel .arrow{margin-inline-start:auto;color:var(--pewter-ink)}
.channel:hover .arrow{transform:translateX(4px)}
.dark .channel{background:rgba(239,237,230,.06);box-shadow:none;border:1px solid rgba(154,170,180,.22)}
.dark .channel:hover{background:rgba(239,237,230,.1);border-color:var(--pewter-light)}
.dark .channel-ico{background:var(--limestone);color:var(--pine)}
.dark .channel:hover .channel-ico{background:#fff}
.dark .channel-label{color:var(--pewter-light)}
.dark .channel-value,.dark .channel .arrow{color:var(--on-dark)}

/* ── floating contact bubble ────────────────────────── */
.fab{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab-action{
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(14px) scale(.82);pointer-events:none;
  transition:opacity .34s var(--ease),transform .34s cubic-bezier(.34,1.4,.5,1);
}
.fab.open .fab-action{opacity:1;transform:none;pointer-events:auto}
/* nearest the trigger pops first */
.fab.open .fab-action:nth-child(3){transition-delay:0s}
.fab.open .fab-action:nth-child(2){transition-delay:.06s}
.fab.open .fab-action:nth-child(1){transition-delay:.12s}
.fab-label{
  background:var(--white);color:var(--pine);border-radius:var(--r);
  font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:8px 12px;white-space:nowrap;box-shadow:var(--lift-sm);
}
.fab-ico{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  background:var(--pine);color:var(--limestone);
  display:grid;place-items:center;box-shadow:var(--lift);
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.fab-ico svg{width:19px;height:19px}
.fab-action:hover .fab-ico{background:var(--cypress);transform:scale(1.07)}
.fab-btn{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  background:var(--cypress);color:var(--limestone);
  display:grid;place-items:center;box-shadow:var(--lift);
  transition:background-color .3s var(--ease),transform .4s var(--ease);
}
.fab-btn:hover{background:var(--pine);transform:scale(1.05)}
.fab-btn svg{width:23px;height:23px;grid-area:1/1}
.fab-swap{grid-area:1/1;display:grid;place-items:center;transition:opacity .28s var(--ease),transform .34s var(--ease)}
.fab-shut{opacity:0;transform:rotate(-90deg) scale(.7)}
.fab.open .fab-open{opacity:0;transform:rotate(90deg) scale(.7)}
.fab.open .fab-shut{opacity:1;transform:none}
@media (max-width:520px){
  .fab-btn{width:52px;height:52px}
  .fab-ico{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .fab-action{transition:opacity .01ms!important;transform:none}
  .fab.open .fab-action{transform:none}
}

/* ── mobile spacing corrections ─────────────────────────
   Reported: team bios collided with the next portrait, and service cards sat
   too close together with the body text tight to the card edge. */
@media (max-width:760px){
  .cards{gap:26px}
  .team{gap:30px 16px}
  .team.team-bios{gap:44px}
  .member .bio{margin-bottom:6px}
  .card-body{padding:24px 22px 26px}
  .channels{gap:12px}
  .btn-row{gap:10px;margin-top:28px}
  .sec-head{margin-bottom:34px}
  /* the bubble parks over the last line of the footer otherwise */
  footer{padding-bottom:88px}
}
/* The group rows were cramped — they carry two lines of label plus a name. */
.stratum-row{padding-block:clamp(38px,4.6vw,56px)}
@media (max-width:760px){
  .stratum-row{padding-block:38px;gap:14px}
  .stratum-row .role{margin-bottom:12px;line-height:1.7}
  .stratum-row .note{margin-top:10px}
  .stratum-row .textlink{margin-top:18px}
}

/* ── touch: arrival does the work hover does ────────────
   Nearly every expressive move on this site hangs off :hover — the photograph
   pushing in, the cypress rule drawing across the card, the stratum sweeping
   out from the corner. A phone can never fire any of it, which left the whole
   page a set of static blocks that faded up. On a touch device the same
   choreography runs off the reveal instead, and a tap gets its own answer. */
@media (hover:none){
  /* the photograph settles out of a slow push-in as its card arrives */
  .card-art img{transform:scale(1.09)}
  .card.in .card-art img{transform:none;transition:opacity .75s var(--ease),transform 2s var(--ease)}
  .card.in .card-art::after{opacity:.78}
  /* and the card draws its own rule and stratum, in sequence behind it */
  .card.in .card-body::before{transform:scaleX(1);transition-delay:.2s}
  .card.in .card-art .stratum span{transform:scaleX(1)}

  .member img{transform:scale(1.08)}
  .member.in img{transform:none;transition:opacity .75s var(--ease),transform 2s var(--ease)}

  .srow-art img{transform:scale(1.07)}
  .srow.in .srow-art img{transform:none;transition:opacity .75s var(--ease),transform 2s var(--ease)}

  /* a tap needs a physical acknowledgement, since nothing else gives one */
  .btn{transition:background-color .25s var(--ease),color .25s var(--ease),
                  border-color .25s var(--ease),transform .18s var(--ease)}
  .btn:active{transform:scale(.962)}
  .card.in:active,.channel:active{transform:scale(.985)}
  .card.in:active .card-body::before{transform:scaleX(1)}
  .textlink:active,.fab-action:active .fab-ico{transform:scale(.95)}
}

/* the menu panel drops in, then its lines arrive behind it */
@media (max-width:860px){
  .nav-links a{opacity:0;transform:translate3d(0,-16px,0);transition:opacity .3s var(--ease),transform .4s var(--ease)}
  body.menu-open .nav-links a{opacity:1;transform:none}
  body.menu-open .nav-links a:nth-child(1){transition-delay:.14s}
  body.menu-open .nav-links a:nth-child(2){transition-delay:.20s}
  body.menu-open .nav-links a:nth-child(3){transition-delay:.26s}
  body.menu-open .nav-links a:nth-child(4){transition-delay:.32s}
  body.menu-open .nav-links a:nth-child(5){transition-delay:.40s}
}

/* With the menu open the bar becomes part of the panel — previously the hero
   showed through the header while the panel below it was solid. */
body.menu-open .nav{
  background:var(--pine);color:var(--on-dark);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
body.menu-open .nav-links{box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}

/* ── hero recede on scroll ──────────────────────────────
   The hero is pinned, so rather than simply being occluded it withdraws: the
   copy lifts and fades out before the sheet reaches it, and the image sinks
   into shadow. --p is 0 at the top and 1 once the hero is scrolled past. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--pine-deep);opacity:calc(var(--p,0) * .62);
}
.hero-inner,.hero-arch{
  opacity:calc(1 - var(--p,0) * 1.55);
  transform:translate3d(0,calc(var(--p,0) * -62px),0);
  filter:blur(calc(var(--p,0) * 5px));
  will-change:opacity,transform,filter;
}
/* the photograph softens as it drops back, which is what sells the depth */
.hero-bg{filter:blur(calc(var(--p,0) * 6px))}
.hero-arch{transform:translate3d(0,calc(var(--p,0) * -34px),0)}
/* Re-blurring a full-screen photograph every scroll frame is what made the
   phone drop frames, and dropped frames are why none of this read as motion.
   The scrim and the lift carry the depth on their own; both composite. */
@media (max-width:640px){
  .hero-bg,.hero-inner{filter:none}
  .hero::after{opacity:calc(var(--p,0) * .74)}
  .hero-inner{transform:translate3d(0,calc(var(--p,0) * -84px),0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-inner,.hero-arch{transform:none!important;filter:none!important}
  .hero-bg{filter:none!important}
  .card-art img,.member img,.srow-art img{transform:none!important}
}