:root{
  --orange:#F69223;
  --orange-hover:#D97B12;
  --orange-tint:#FDEBDA;
  --black:#231F20;
  --ink:#171412;
  --slate:#5B5654;
  --fog:#F5F3F1;
  --line:#E4E0DC;
  --white:#FFFFFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.6;
}
h1,h2,h3,h4,.headline{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-optical-sizing:auto;
  letter-spacing:-0.01em;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---- SCROLL REVEAL ---- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---- HEADER ---- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 48px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--white); z-index:50;
}
header .brand{ display:flex; align-items:center; }
header img{height:64px;}
nav{display:flex; gap:36px; align-items:center;}
nav a{
  color:var(--black); text-decoration:none; font-size:14px; font-weight:600;
  position:relative; padding-bottom:4px;
}
nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--orange); transition:width .25s ease;
}
nav a:hover::after, nav a.active::after{width:100%;}
nav a.external{ display:inline-flex; align-items:center; gap:4px; }
/* Inline SVG, not a Unicode arrow (↗ renders as a colorful emoji glyph on
   iOS Safari — showed up in the mobile hamburger menu, per Gabe). SVG with
   currentColor guarantees a plain vector arrow on every platform. */
nav a.external .ext-mark{ display:inline-flex; opacity:0.6; color:inherit; }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{ width:24px; height:2px; background:var(--black); display:block; }

/* ---- HERO ----
   Deliberately no abstract graphic object. Restraint is the design move
   here — confident typography, a single rule element as punctuation, a
   very slow ambient light breathing behind the text for quiet motion.
   Nothing that reads as a "shape someone added." */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--white);
  padding:170px 48px 140px; text-align:left;
}
.hero.compact{ padding:100px 48px 84px; }
/* Centered closing CTA band (replaces the old giant leadership-photo
   homepage section — same dark hero styling/motion, different content and
   layout, so it's a real bridge into the footer, not a repeated module). */
.hero.center .hero-inner{ margin:0 auto; text-align:center; max-width:600px; }
.hero.center h1{ max-width:none; }
.hero.center p{ margin-left:auto; margin-right:auto; }
.hero.center .hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
/* Soften the hard dark->light cut — a tonal bridge fading into the fog
   tone of whatever sits directly below (stats strip / next section), not
   a stark black-to-white edge. */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to bottom, rgba(23,20,18,0) 0%, rgba(245,243,241,0.06) 60%, rgba(245,243,241,0.16) 100%);
  pointer-events:none;
}
.hero-glow{
  position:absolute; top:15%; right:-10%; width:60%; height:70%;
  background:radial-gradient(circle, rgba(246,146,35,0.14) 0%, rgba(246,146,35,0) 70%);
  animation: breatheGlow 12s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breatheGlow{ 0%,100%{ opacity:0.6; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }

.hero-inner{ position:relative; z-index:2; max-width:680px; }
.hero-rule{
  width:0; height:2px; background:var(--orange); margin-bottom:22px;
  animation: ruleIn 1s cubic-bezier(.16,.84,.44,1) .1s forwards;
}
@keyframes ruleIn{ to{ width:64px; } }
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--orange); margin-bottom:14px; display:inline-block; position:relative;
  opacity:0; animation: fadeUp .7s ease .25s forwards;
}
.hero h1{ font-size:60px; line-height:1.08; margin:20px 0 24px; color:var(--white); max-width:660px; font-weight:600; }
.hero.compact h1{ font-size:42px; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:block; transform:translateY(110%); animation: lineUp .8s cubic-bezier(.16,.84,.44,1) forwards; }
.hero h1 .line:nth-child(1) span{ animation-delay:.4s; }
.hero h1 .line:nth-child(2) span{ animation-delay:.52s; }
.hero h1 .line:nth-child(3) span{ animation-delay:.64s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
.hero h1 em{ font-style:italic; font-weight:500; color:var(--orange); }
.hero p{ font-size:18px; color:#B9B4AF; max-width:520px; margin-bottom:36px; line-height:1.7;
  opacity:0; animation: fadeUp .8s ease .9s forwards; }
.hero .hero-cta{ opacity:0; animation: fadeUp .8s ease 1.05s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* Ghost CTA — a filled block reads as "click here." A ghost reads as brand.
   Ghost on dark (hero), inverse-ghost on light sections. */
.btn{
  display:inline-block; background:transparent; color:var(--orange);
  font-family:'Inter'; font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 32px; text-decoration:none; position:relative;
  border:1px solid var(--orange);
  transition:color .3s ease; cursor:pointer;
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,.84,.44,1); z-index:0;
}
.btn span{ position:relative; z-index:1; }
.btn:hover{ color:var(--ink); }
.btn:hover::before{ transform:scaleX(1); }
.btn.on-light{ color:var(--black); border-color:var(--black); }
.btn.on-light:hover{ color:var(--white); }
.btn.on-light::before{ background:var(--black); }

/* ---- BREADCRUMB ---- */
.crumb{ font-size:13px; color:#B9B4AF; margin-bottom:16px; }
.crumb a{ color:var(--orange); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }

/* ---- WHY SHERWOOD (differentiator / positioning section) ----
   No boxes. Open grid, generous air, a short accent rule marks each item
   instead of a border enclosing it — separation by whitespace, not by
   drawing a container around everything. */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:16px; }
.pillar{ padding:0 28px; border-left:1px solid var(--line); }
.pillar:first-child{ border-left:none; padding-left:0; }
.pillar .rule{ width:24px; height:2px; background:var(--orange); margin-bottom:16px; }
.pillar .num{ font-family:'Fraunces'; font-size:13px; color:var(--slate); font-weight:500; margin-bottom:6px; letter-spacing:0.04em; }
.pillar h3{ font-size:18px; margin-bottom:10px; line-height:1.25; }
.pillar p{ font-size:14px; color:var(--slate); line-height:1.65; }

/* ---- STAT STRIP ----
   Sits on the fog tone (not white) as a tonal bridge straight out of the
   hero — no more hard black-to-white cut. No box borders, just centered
   groups with quiet spacing. */
.stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; background:var(--fog); }
.stat{ padding:48px 56px; text-align:center; min-width:140px; }
.stat:not(:last-child){ border-right:1px solid var(--line); }
.stat .num{ font-family:'Fraunces'; font-size:40px; font-weight:600; color:var(--orange); }
.stat .label{ font-size:12px; color:var(--slate); margin-top:6px; text-transform:uppercase; letter-spacing:0.06em;}

/* ---- SECTION ----
   Alternating tone rhythm (ink -> fog -> white -> fog -> white -> ink)
   instead of "dark hero, then everything white" — that alternation is the
   color variation, not a literal multi-color palette. */
section{ padding:96px 48px; }
.section-fog{ background:var(--fog); }
/* Warm orange-tint background — gives Services real color separation from
   the white "Why Sherwood" section above it and the grey/fog tones used
   elsewhere, not just a different layout (carousel vs grid). Per Martin:
   needed something that reads as a different "block," not just different
   content in the same look. */
.section-tint{ background:var(--orange-tint); }
.section-tint .carousel-arrow{ border-color:rgba(35,31,32,0.15); }
.section-tint .carousel-dot{ background:rgba(35,31,32,0.15); }
.section-head{ max-width:600px; margin-bottom:56px; }
.section-head .eyebrow{ color:var(--orange-hover); }
.section-head h2{ font-size:34px; }
.section-narrow{ max-width:820px; margin:0 auto; }

/* ---- SERVICE CARDS ----
   Same principle as pillars — dropped the shared-border grid (it read like
   shelving in a store, not a firm's site). Open spacing, a short rule as
   the only graphic device, orange underline still sweeps in on hover. */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; }
.card{ padding:0; position:relative; text-decoration:none; color:inherit; display:block; }
.card .rule{ width:28px; height:2px; background:var(--line); margin-bottom:18px; transition:background .25s ease, width .25s ease; }
.card:hover .rule{ background:var(--orange); width:40px; }
.card h3{ font-size:19px; margin-bottom:10px; transition:color .2s ease; }
.card:hover h3{ color:var(--orange-hover); }
.card p{ font-size:14px; color:var(--slate); line-height:1.65; }
.card .more{ font-size:13px; color:var(--orange-hover); margin-top:14px; font-weight:600; }

/* ---- CAROUSEL (homepage services teaser) ----
   Horizontal swipeable cards, inspired by the card-carousel pattern on
   EisnerAmper's own site — native scroll-snap so it's genuinely swipeable
   on touch with zero JS dependency, plus ghost-style arrow buttons and a
   dot rail for desktop/mouse users. This is a different layout module from
   the open-grid pillars above it on purpose — that contrast is what fixes
   the "these two sections look the same" problem, not just a palette tweak. */
/* Services gets more room to breathe than a standard section — Gabe wanted
   real visual weight here, not just the default section rhythm. */
.section-services{ padding-top:120px; padding-bottom:120px; }
.section-head-lg h2{ font-size:44px; }
.carousel-wrap{ position:relative; }
.carousel{
  display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; -ms-overflow-style:none; scrollbar-width:none;
}
.carousel::-webkit-scrollbar{ display:none; }
/* No white card boxes floating on the orange tint (read like sticky notes,
   per Gabe) — same "open layout, thin divider" language as the pillars
   above this section instead of a box. Background stays transparent so the
   tint carries straight through. A big ghost Fraunces numeral is the added
   scale/weight device (Gabe: "feels a little flat") — same typography-first
   language as the rest of the site, not a new graphic motif. */
.carousel-card{
  scroll-snap-align:start; flex:0 0 340px; background:transparent;
  border:none; border-left:1px solid rgba(35,31,32,0.18);
  padding:12px 36px; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.16,.84,.44,1), border-color .25s ease;
}
.carousel-card:first-child{ border-left:none; padding-left:4px; }
.carousel-card:hover{ transform:translateY(-6px); border-color:var(--orange); }
.carousel-card .index{
  font-family:'Fraunces'; font-size:52px; font-weight:600; line-height:1;
  color:rgba(35,31,32,0.14); margin-bottom:14px; transition:color .3s ease;
}
.carousel-card:hover .index{ color:rgba(246,146,35,0.45); }
.carousel-card .rule{ width:24px; height:2px; background:var(--orange); margin-bottom:16px; }
.carousel-card h3{ font-size:21px; margin-bottom:12px; line-height:1.25; }
.carousel-card p{ font-size:15px; color:var(--slate); line-height:1.65; min-height:72px; }
.carousel-card .more{ font-size:13px; color:var(--orange-hover); margin-top:18px; font-weight:600; display:block; }
.carousel-nav{ display:flex; gap:10px; margin-top:36px; align-items:center; justify-content:space-between; }
.carousel-arrows{ display:flex; gap:10px; }
.carousel-arrow{
  width:48px; height:48px; border:1px solid rgba(35,31,32,0.25); background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease; color:var(--black); font-size:17px;
}
.carousel-arrow:hover{ background:var(--orange); border-color:var(--orange); color:var(--white); }
.carousel-arrow:disabled{ opacity:0.3; cursor:default; }
.carousel-arrow:disabled:hover{ background:transparent; border-color:rgba(35,31,32,0.25); color:var(--black); }
.carousel-dots{ display:flex; gap:7px; }
.carousel-dot{ width:6px; height:6px; border-radius:50%; background:rgba(35,31,32,0.25); transition:background .2s ease, width .2s ease; }
.carousel-dot.active{ background:var(--orange); width:22px; border-radius:3px; }

/* ---- TEAM ----
   One flowing grid, not role-silos with loud category headers — a team
   feels like people, not an org chart. Leadership gets a slightly larger
   featured treatment at the top (earned, not a hierarchy lecture) then
   everyone else sits together in one grid. Portrait-ratio photos matching
   the source headshots (all real photos are 2:3) so faces never get
   guillotined by a square crop. */
.leadership-feature{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:64px; }
.leadership-feature .team-card{ flex-direction:column; align-items:flex-start; }
.leadership-feature .team-card .photo{ width:100%; aspect-ratio:3/4; margin-bottom:20px; }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px 24px; }
.team-card{ text-decoration:none; color:inherit; display:block; }
.team-card .photo{
  aspect-ratio:3/4; overflow:hidden; background:var(--fog); margin-bottom:14px;
  position:relative;
}
.team-card .photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; transition:transform .5s cubic-bezier(.16,.84,.44,1); }
.team-card:hover .photo img{ transform:scale(1.04); }
.team-card .photo::after{
  content:''; position:absolute; inset:0; border:1px solid transparent; transition:border-color .25s ease;
}
.team-card:hover .photo::after{ border-color:var(--orange); }
.team-card h4{ font-family:'Fraunces'; font-weight:600; font-size:17px; margin-bottom:3px;}
.team-card .title{ font-size:13px; color:var(--slate); line-height:1.4;}
/* No bio page yet (or ever, for some admin/support roles) — same card,
   but no hover affordances implying it's clickable, since it isn't. */
.team-card.no-bio{ cursor:default; }
.team-card.no-bio:hover .photo img{ transform:none; }
.team-card.no-bio:hover .photo::after{ border-color:transparent; }
.team-page .team-card.no-bio:hover .photo img{ filter:grayscale(100%); }

/* ---- TEAM GALLERY PAGE (the /team/ directory specifically) ----
   Smaller headshots (denser grid, not 4-across full-bleed portraits) and a
   greyscale -> color-on-hover treatment, per Gabe/client reference:
   towerbrook.com/our-team/. Scoped to .team-page so it doesn't touch the
   homepage's 2-person leadership preview or the bio-page "more from the
   team" row. */
.team-page .leadership-feature{ max-width:640px; gap:20px; }
.team-page .team-grid{ grid-template-columns:repeat(6,1fr); gap:22px 18px; }
/* Martin + DiRende's own row — same card size as everyone else, just kept
   off the main alphabetical grid so they don't get filled in with 4 more
   names on the same line. Thin divider below marks it as a distinct group
   without a heading shouting "LEADERSHIP" over it. */
.team-grid-leaders{ margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--line); }
.team-page .team-card .photo img,
.team-page .leadership-feature .photo img{
  filter:grayscale(100%);
  transition:filter .4s ease, transform .5s cubic-bezier(.16,.84,.44,1);
}
.team-page .team-card:hover .photo img{ filter:grayscale(0%); }
.team-page .team-card h4{ font-size:15px; }
.team-page .team-card .title{ font-size:12px; }

/* ---- BIO DETAIL PAGE ---- */
/* Sidebar layout, not stacked hero+centered-column — photo/name/title sit
   beside the bio text instead of above it in their own oversized dark
   header. Uses the horizontal space instead of leaving it empty, and the
   photo reads as a supporting element, not the headline. */
.bio-page{ display:grid; grid-template-columns:220px 1fr; gap:64px; max-width:940px; margin:0 auto; }
.bio-sidebar .photo{ width:100%; aspect-ratio:3/4; overflow:hidden; margin-bottom:18px; }
.bio-sidebar .photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
.bio-sidebar h1{ font-size:23px; margin-bottom:6px; line-height:1.2; }
.bio-sidebar .title{ font-size:14px; color:var(--orange-hover); font-weight:600; line-height:1.4; }
/* Directory-style contact panel — the "contact and all that" detail from
   EisnerAmper's people pages. Firm-level contact, not a fabricated direct
   line/email per person (don't have that data, won't invent it). */
.bio-contact{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.bio-contact-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); font-weight:600; margin-bottom:12px; }
.bio-contact-row{ display:block; font-size:14px; color:var(--black); text-decoration:none; margin-bottom:8px; }
.bio-contact-row:hover{ color:var(--orange-hover); }
.bio-contact-btn{ margin-top:14px; width:100%; text-align:center; display:block; }
.bio-body{ font-size:16px; color:var(--black); line-height:1.75; }
.bio-body p{ margin-bottom:14px; }
.bio-body p:first-child{ font-size:17px; }

/* ---- SERVICE DETAIL PAGE ----
   Real heading hierarchy (H2s), styled bullet lists, a pull-quote treatment
   for testimonial-style content, and a sticky CTA sidebar — replaces the
   old "wall of undifferentiated paragraphs with zero H2s" version. */
.svc-page{ display:grid; grid-template-columns:1fr 300px; gap:64px; max-width:1080px; margin:0 auto; align-items:start; }
.svc-content{ font-size:16px; color:var(--black); line-height:1.75; }
.svc-content h2{ font-size:24px; margin:40px 0 14px; }
.svc-content h2:first-child{ margin-top:0; }
.svc-content h2 .rule{ width:24px; height:2px; background:var(--orange); margin-bottom:12px; }
.svc-content p{ margin-bottom:16px; }
.svc-content ul{ list-style:none; margin:0 0 16px; padding:0; }
.svc-content ul li{ position:relative; padding-left:24px; margin-bottom:10px; }
.svc-content ul li::before{ content:''; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--orange); }
.svc-quote{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:22px;
  line-height:1.5; color:var(--black); border-left:2px solid var(--orange); padding-left:24px;
  margin:24px 0; max-width:520px;
}
.svc-quote + .svc-quote{ margin-top:-8px; }
.svc-sidebar{ position:sticky; top:96px; background:var(--fog); padding:32px 28px; }
.svc-sidebar .label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); font-weight:600; margin-bottom:10px; }
.svc-sidebar h4{ font-size:19px; margin-bottom:12px; }
.svc-sidebar p{ font-size:14px; color:var(--slate); line-height:1.65; margin-bottom:20px; }
.svc-sidebar .btn{ width:100%; text-align:center; display:block; }
.svc-related{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.svc-related a{ display:block; font-size:13px; font-weight:600; color:var(--black); text-decoration:none; padding:8px 0; }
.svc-related a:hover{ color:var(--orange-hover); }

/* ---- NEWS ---- */
.news-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.news-item{ background:var(--white); padding:26px 28px; text-decoration:none; color:inherit; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.news-item:hover h3{ color:var(--orange-hover); }
.news-item h3{ font-size:18px; transition:color .2s ease; }
.news-item .arrow{ color:var(--orange); font-size:20px; flex-shrink:0; }
.news-body{ max-width:720px; font-size:16px; line-height:1.85; }
.news-body p{ margin-bottom:18px; }

/* ---- RESOURCES ---- */
.doc-list{ display:flex; flex-direction:column; gap:14px; max-width:640px; }
.doc-item{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .2s ease; }
.doc-item:hover{ border-color:var(--orange); }
.doc-item .name{ font-weight:600; }
.doc-item .dl{ color:var(--orange-hover); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }

/* ---- CONTACT ----
   Minimal, editorial — underline-only inputs, no gray fill boxes (those
   read as a generic form builder, not a firm's own site). */
.contact-grid{ display:grid; grid-template-columns:0.8fr 1fr; gap:80px; }
.contact-info div{ margin-bottom:32px; }
.contact-info .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:6px; }
.contact-info .value{ font-size:19px; font-weight:600; }
.contact-info .value a{ text-decoration:none; }
.contact-info .value a:hover{ color:var(--orange-hover); }
form.contact-form{ display:flex; flex-direction:column; gap:30px; }
form.contact-form .field{ position:relative; }
form.contact-form input, form.contact-form textarea{
  font-family:'Inter'; font-size:16px; padding:10px 0; border:none; border-bottom:1px solid var(--line);
  background:transparent; width:100%; transition:border-color .25s ease; resize:none;
}
form.contact-form input:focus, form.contact-form textarea:focus{ outline:none; border-color:var(--orange); }
form.contact-form label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); margin-bottom:8px; display:block; }
form.contact-form .btn{ align-self:flex-start; margin-top:8px; }
form.contact-form .form-status{ font-size:13px; color:var(--slate); margin-top:-14px; }

/* ---- FOOTER ---- */
footer{
  background:var(--ink); color:var(--fog); padding:56px 48px 32px;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;
}
footer img{ height:56px; margin-bottom:16px; }
/* EisnerAmper co-brand mark next to the Sherwood logo — smaller/secondary,
   separated by a thin divider rather than sized to match (it's the parent
   company mark, not Sherwood's own), links out to eisneramper.com. */
.footer-brand{ display:flex; align-items:center; gap:24px; }
.footer-eisneramper{ height:34px; margin-bottom:16px; opacity:0.9; transition:opacity .2s ease; }
.footer-brand a:hover .footer-eisneramper{ opacity:1; }
footer .cols{ display:flex; gap:64px; flex-wrap:wrap; }
footer .col a{ display:block; color:#B9B4AF; text-decoration:none; font-size:13px; margin-bottom:8px; }
footer .col a:hover{ color:var(--orange); }
footer .col h5{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--white); margin-bottom:14px;}
.fine{ font-size:12px; color:#7A756F; width:100%; padding-top:24px; border-top:1px solid #38332F; margin-top:32px;}

/* ---- RESPONSIVE / MOBILE ---- */
@media (max-width:900px){
  header{ padding:16px 24px; }
  nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--white); border-bottom:1px solid var(--line);
    padding:8px 24px 20px; gap:16px; align-items:flex-start;
  }
  nav.open{ display:flex; }
  .hamburger{ display:flex; }
  .hero{ padding:110px 24px 64px; }
  .hero h1{ font-size:34px; }
  .hero p{ font-size:15px; }
  .hero-glow{ width:100%; right:-30%; }
  .pillars{ grid-template-columns:1fr; gap:28px; }
  .pillar{ border-left:none; padding:20px 0 0; border-top:1px solid var(--line); }
  .pillar:first-child{ border-top:none; padding-top:0; }
  .stats{ flex-wrap:wrap; }
  .stat{ flex:1 1 50%; }
  section{ padding:56px 24px; }
  .cards{ grid-template-columns:1fr; }
  .carousel-card{ flex:0 0 78vw; padding:4px 20px; }
  .carousel-card:first-child{ padding-left:0; }
  .carousel-arrows{ display:none; } /* real touch swipe on mobile, arrows are a desktop/mouse affordance */
  .leadership-feature{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .team-page .team-grid{ grid-template-columns:repeat(3,1fr); gap:14px 12px; }
  .team-page .leadership-feature{ max-width:none; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .bio-page{ grid-template-columns:1fr; gap:24px; }
  .svc-page{ grid-template-columns:1fr; gap:32px; }
  .svc-sidebar{ position:static; }
  .svc-quote{ font-size:19px; }
  .bio-sidebar .photo{ width:130px; }
  footer{ padding:40px 24px 24px; flex-direction:column; align-items:flex-start; }
  footer .cols{ gap:40px; }
}

/* ---- PASSWORD GATE LOGIN PAGE
   Real custom page served by functions/_middleware.js (cookie-based, no
   native browser Basic Auth prompt — password field only, no username). ---- */
.gate{
  min-height:100vh; background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.gate-box{ text-align:center; max-width:360px; width:100%; }
.gate-box img{ height:52px; margin:0 auto 40px; }
.gate-box h1{ font-size:22px; color:var(--white); margin-bottom:10px; font-weight:600; }
.gate-box p{ font-size:14px; color:#B9B4AF; margin-bottom:28px; }
.gate-box input{
  width:100%; padding:16px; font-size:16px; text-align:center; margin-bottom:18px;
  border:1px solid #38332F; background:#221E1B; color:var(--white); letter-spacing:0.1em;
}
.gate-box input:focus{ outline:none; border-color:var(--orange); }
.gate-box .btn{ width:100%; }
.gate-box .err{ color:var(--orange); font-size:13px; margin-top:16px; min-height:16px; }