/* ============================================================
   SECTIONS — per-section layout ONLY.

   Resets, base type and the shared primitives (.wrap, .eyebrow, .lede,
   .btn, .rv, the section rhythm) live in base.css. Nothing in this file
   may redefine them.

   EVERY margin, padding, gap and font-size below is a token. If you need
   a value that isn't in tokens.css, add it there first — do not type a
   number into this file.

   The spacing hierarchy, so you don't have to guess which token to reach for:

     --space-8  96px   separation between major blocks inside a section
     --space-7  64px   section head -> its content
     --space-6  48px   gap between columns of a two-column layout
     --space-5  32px   card interiors, card-grid gaps
     --space-4  24px   heading margins, list padding
     --space-3  16px   label -> heading, small inline gaps
     --space-2   8px   heading -> its own paragraph, tight pairs
     --space-1   4px   hairline nudges

   1px values are hairlines (borders and fused-grid rules), not spacing.
   Widths/heights of graphics (the logo, icons, the rail dot) are element
   dimensions, not spacing — they are not on the 8pt grid and don't need to be.
   ============================================================ */


/* ---------- loader ---------- */
#load{position:fixed;inset:0;z-index:9999;background:var(--void);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
#load img{width:56px;opacity:0;animation:lo 1.4s var(--ease) .15s forwards}
#load.out{opacity:0;visibility:hidden}
@keyframes lo{to{opacity:1}}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);padding-block:var(--space-4);transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s}
header.stuck{padding-block:var(--space-3);background:rgba(11,15,14,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand img{height:46px;width:auto;transition:height .5s var(--ease)}
header.stuck .brand img{height:34px}
.brand .wm{display:flex;flex-direction:column;gap:var(--space-1)}
.brand .wm b{font-family:var(--font-body);font-size:var(--text-lg);font-weight:var(--weight-medium);letter-spacing:.15em;color:var(--gold);line-height:1;transition:font-size .5s var(--ease)}
.brand .wm i{font-style:normal;font-size:var(--text-lockup);font-weight:var(--weight-normal);letter-spacing:.38em;color:var(--text-faint);line-height:1}
header.stuck .brand .wm b{font-size:var(--text-base)}
@media(max-width:520px){.brand .wm{display:none}}

/* gap is --space-3, not --space-4: with the "Verify a Dealer" link the seven
   items + brand + CTA no longer fit the content column on a wide monitor, and
   the nav ends up touching the wordmark. */
.mainnav{display:flex;gap:var(--space-3)}
.mainnav a{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);padding-block:var(--space-2);position:relative;white-space:nowrap;transition:color .35s}
.mainnav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.mainnav a:hover{color:var(--ivory)}
.mainnav a:hover::after{width:100%}
.hd-r{display:flex;align-items:center;gap:var(--space-3)}
.burger{display:none;flex-direction:column;gap:var(--space-1);width:26px;background:none;border:0;cursor:pointer;padding-block:var(--space-1)}
.burger span{height:1px;background:var(--gold);transition:.4s var(--ease)}
@media(max-width:1080px){.mainnav,.hd-r .btn{display:none}.burger{display:flex}}

/* ---------- drawer ---------- */
/* overflow-y:auto is not a nicety. The drawer is parked offscreen with
   translateY(-101%), but its own content is taller than the viewport once the
   viewport drops to about 640px — a laptop with browser chrome. The overflow
   spilled past the drawer's bottom edge, which is only 1% offscreen, so the
   gold CTA at the end of the list floated above the header on every page.
   Clipping the content to the box keeps it hidden, and scrolls it when open. */
#drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--void);display:flex;flex-direction:column;justify-content:flex-start;padding-block:var(--space-6);padding-inline:var(--gutter);overflow-y:auto;transform:translateY(-101%);transition:transform .7s var(--ease)}
/* Auto margins rather than justify-content:center. Centring a flex column that
   overflows cuts the first item off at the top and puts it out of reach of the
   scrollbar; auto margins centre the group when there is room and collapse to
   zero when there isn't, so the list stays whole on a short screen. */
#drawer a:first-of-type{margin-top:auto}
#drawer a:last-of-type{margin-bottom:auto}
#drawer.open{transform:none}
#drawer a{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--ivory);padding-block:var(--space-2);border-bottom:1px solid var(--line);transition:color .3s}
#drawer a:hover{color:var(--gold)}
#drawer a.btn{font-size:var(--text-xs);padding:var(--space-3) var(--space-5);border-bottom:0;color:var(--void);margin-top:var(--space-5);align-self:flex-start}
#drawer a.btn:hover{color:var(--void)}
#dclose{position:absolute;top:var(--space-4);right:var(--gutter);background:none;border:0;color:var(--gold);font-size:var(--text-sm);letter-spacing:var(--tracking-label);cursor:pointer;font-family:var(--font-mono)}

/* ---------- SIGNATURE: elevation rail ----------
   The rail is fixed-position, so it can only exist in the strip of screen
   left over beside the content column. That strip is:
       (100vw - --content-max) / 2 + --gutter
   The rail's footprint is its width (152px, sized to hold the longest label,
   "CROWN · HELIPADS", at --text-xs — which grows to 12px on wide screens)
   plus its 8px offset = 160px.

   At 1440 that strip is only 172px, which would leave the rail 12px from the
   FAQ's "+" icons — the exact crowding CLAUDE.md forbids. The strip doesn't
   clear the rail with real margin until ~1500px, so that is where it appears.
   This is stricter than the 1440 floor in CLAUDE.md, deliberately: below this
   the rail does not fit beside the FAQ, and not overlapping wins.
   If --content-max or --gutter change, re-derive this breakpoint. */
#rail{position:fixed;right:var(--space-2);top:50%;transform:translateY(-50%);z-index:var(--z-rail);height:min(64vh,520px);width:152px;pointer-events:none;opacity:0;transition:opacity .9s var(--ease) .4s}
#rail.on{opacity:1}
#rail .spine{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
#rail .fill{position:absolute;left:0;top:0;width:1px;height:0;background:var(--gold);transition:height .12s linear}
#rail .dot{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:var(--gold);transition:top .12s linear;box-shadow:0 0 0 4px rgba(173,156,119,.14)}
#rail .tk{position:absolute;left:0;display:flex;align-items:center;gap:var(--space-2);transform:translateY(-50%)}
#rail .tk i{display:block;height:1px;width:8px;background:var(--gold-dim);transition:.45s var(--ease)}
#rail .tk b{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-normal);letter-spacing:.12em;color:var(--text-faint);white-space:nowrap;transition:.45s var(--ease)}
#rail .tk.hit i{width:20px;background:var(--gold)}
#rail .tk.hit b{color:var(--gold)}
#rail .cap{position:absolute;left:0;top:calc(var(--space-5) * -1);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
@media(max-width:1499px){#rail{display:none}}

/* ---------- hero ----------
   Keeps the section rhythm at the bottom like every other section. The top
   is --section-y PLUS the header height: the hero is the one section the
   fixed header sits over, and content is bottom-aligned inside 100svh, so
   on a short screen the copy grows UP into the header. This is the only
   sanctioned deviation from the shared rhythm, and it is a clearance
   requirement, not a style choice. */
.hero{min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-top:calc(var(--section-y) + var(--header-h))}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .media{position:absolute;inset:0;transform:scale(1.07);animation:drift 26s var(--ease) forwards}
.hero .media img,.hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.hero .media img{opacity:.58;transition:opacity 1.5s var(--ease)}
.hero .media video{opacity:0;transition:opacity 1.5s var(--ease)}
.hero .media video.on{opacity:.58}
.hero .media.playing img{opacity:0}
@keyframes drift{to{transform:scale(1)}}
.hero .bg::after{content:'';position:absolute;inset:0;z-index:2;background:
   linear-gradient(100deg,rgba(11,15,14,.96) 0%,rgba(11,15,14,.82) 34%,rgba(11,15,14,.28) 68%,rgba(11,15,14,.55) 100%),
   linear-gradient(0deg,rgba(11,15,14,.92) 0%,transparent 42%)}
.hero .wrap{position:relative;z-index:3;width:100%}

/* the mandate credential — the sales mandate stated as a branded seal: the
   Kaaf mark set against the wording, divided by a hairline. Replaces the old
   status-pill (border + pulsing dot), which read as a generic UI badge.
   The mark height and the 1px divider are graphic dimensions, not spacing. */
.mandate-badge{display:inline-flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.mandate-badge .mk{height:54px;width:auto;flex:none}
.mandate-badge .div{width:1px;align-self:stretch;background:var(--gold-dim);flex:none}
.mandate-badge .k{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold)}
.mandate-badge .t{display:block;font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);line-height:var(--leading-snug);color:var(--ivory);margin-top:var(--space-2)}
.mandate-badge .t em{color:var(--gold)}
.mandate-badge .src{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-2)}
@media(max-width:560px){
  .mandate-badge{gap:var(--space-3)}
  .mandate-badge .mk{height:44px}
  .mandate-badge .src{display:none}
}

.hero h1{color:var(--ivory);margin-bottom:var(--space-4)}
/* .ln clips its span so the word can slide up into view (the rise animation).
   But the display line-height is tight, so an italic descender (the "g" in
   "high") spills below the line box and the clip cuts it. The padding-bottom
   gives the descender room INSIDE the clip; the equal negative margin-bottom
   pulls the next line back up so line spacing is unchanged. This is a font-
   metric allowance in em, not layout spacing — that's why it isn't a token. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.hero h1 .ln span{display:block;transform:translateY(110%);animation:rise 1.15s var(--ease) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.1s}
.hero h1 .ln:nth-child(3) span{animation-delay:.2s}
@keyframes rise{to{transform:none}}
.hero .lede{max-width:50ch}
.hero .acts{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.hero .facts{display:flex;margin-top:var(--space-6);border-top:1px solid var(--line);padding-top:var(--space-4);flex-wrap:wrap;gap:var(--space-4) 0}
.hero .facts div{padding-right:var(--space-5);margin-right:var(--space-5);border-right:1px solid var(--line)}
.hero .facts div:last-child{border:0;margin-right:0;padding-right:0}
.hero .facts b{display:block;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--ivory);line-height:1}
.hero .facts span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-2)}
@media(max-width:640px){.hero .facts div{padding-right:var(--space-3);margin-right:var(--space-3)}}

/* ---------- mandate ---------- */
.mandate{background:var(--pine-deep);border-top:1px solid var(--line)}
.mandate .top{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-6);align-items:end;margin-bottom:var(--space-7)}
.mandate h2{font-size:var(--text-3xl);color:var(--ivory)}
.mandate .lede strong{color:var(--gold);font-weight:var(--weight-normal)}
.mandate .proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.mandate .proofs > div{background:var(--pine-deep);padding:var(--space-5)}
.mandate .proofs .n{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);color:var(--gold);margin-bottom:var(--space-3)}
.mandate .proofs h3{color:var(--ivory);margin-bottom:var(--space-2)}
.mandate .proofs p{color:var(--text-muted)}
@media(max-width:900px){.mandate .top{grid-template-columns:1fr}.mandate .proofs{grid-template-columns:1fr}}

/* the appointment — documentary proof of the mandate: the award photo beside
   a short, factual caption. Anchors the section's claim in something real. */
.mandate-award{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-6);align-items:center;margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--line)}
.mandate-award .ma-shot{margin:0}
.mandate-award .ma-shot img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.mandate-award figcaption{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-3)}
.mandate-award h3{color:var(--ivory)}
.mandate-award .lede{margin-top:var(--space-4)}
.mandate-award .ma-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line)}
.mandate-award .ma-meta span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.mandate-award .ma-meta b{display:block;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-normal);color:var(--gold);margin-top:var(--space-2);line-height:var(--leading-snug)}
@media(max-width:820px){.mandate-award{grid-template-columns:1fr;gap:var(--space-5)}.mandate-award .ma-shot{max-width:440px}.mandate-award .ma-meta{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.mandate-award .ma-meta{grid-template-columns:1fr;gap:var(--space-3)}}

/* ---------- burj ---------- */
.sechead{max-width:660px;margin-bottom:var(--space-7)}
.sechead h2{color:var(--ivory)}
.arch{overflow:hidden;border-radius:50% 50% 3px 3px / 30% 30% 3px 3px;border:1px solid var(--line);position:relative}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.arch:hover img{transform:scale(1.04)}
.burj .lead{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-6);align-items:center;margin-bottom:var(--space-8)}
.burj .lead .arch{aspect-ratio:3/4}
.burj .lead .sechead{max-width:none;margin-bottom:0}
.burj .keys{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--space-5)}
.burj .keys > div{background:var(--void);padding:var(--space-4)}
.burj .keys b{display:block;font-family:var(--font-display);font-size:var(--text-xl);color:var(--gold);line-height:1}
.burj .keys span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-2)}
@media(max-width:960px){.burj .lead{grid-template-columns:1fr}.burj .lead .arch{aspect-ratio:4/3}}

/* The single call-to-action row used under a block of copy. ONE value —
   this is what the three different hand-typed margin-tops used to be. */
.cta{margin-top:var(--space-5)}

/* annotated elevation — grafted from the drawing */
.section-draw{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-6);align-items:center;padding-block:var(--space-8);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-draw h3{font-size:var(--text-2xl);color:var(--ivory)}
.drawbox{background:var(--ink);border:1px solid var(--line);padding:var(--space-5);position:relative}
.drawbox svg{width:100%;height:auto;display:block;overflow:visible}
.drawbox .cap{position:absolute;top:var(--space-3);right:var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.drawbox svg .st{stroke:var(--gold);fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1400;stroke-dashoffset:1400}
.in .drawbox svg .st{animation:draw 2.6s var(--ease) forwards}
.in .drawbox svg .st.dims{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
/* --text-draw is in the SVG's user units, not CSS px — see tokens.css */
.drawbox svg text{font-family:var(--font-mono);font-size:var(--text-draw);letter-spacing:.1em;fill:var(--text-faint)}
.drawbox svg text.g{fill:var(--gold)}
@media(max-width:960px){.section-draw{grid-template-columns:1fr}}

/* phases */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--space-8)}
.phases > div{background:var(--void);padding:var(--space-5);transition:background .5s var(--ease)}
.phases > div:hover{background:var(--ink)}
.phases .p{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);color:var(--gold);margin-bottom:var(--space-3)}
.phases h4{font-family:var(--font-display);font-size:var(--text-xl);color:var(--ivory);margin-bottom:var(--space-2);font-weight:var(--weight-normal);line-height:var(--leading-snug)}
.phases p{color:var(--text-muted)}
@media(max-width:900px){.phases{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.phases{grid-template-columns:1fr}}

/* ---------- reserve ---------- */
.reserve{background:var(--pine-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reserve .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--space-6)}
.reserve h2{color:var(--ivory)}
.reserve .direct{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line)}
.reserve .direct a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-3);border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.reserve .direct a:hover{padding-left:var(--space-2)}
.reserve .direct .l{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
.reserve .direct .v{font-family:var(--font-display);font-size:var(--text-lg);color:var(--ivory)}

form{background:var(--void);border:1px solid var(--line);padding:var(--space-6)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.f{display:flex;flex-direction:column;gap:var(--space-2)}
.f.full{grid-column:1/-1}
.f label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.f input,.f select,.f textarea{background:transparent;border:0;border-bottom:1px solid var(--line-soft);padding-block:var(--space-2);font-size:var(--text-base);color:var(--ivory);transition:border-color .4s}
.f textarea{resize:vertical;min-height:76px}
.f select{cursor:pointer}
.f select option{background:var(--ink);color:var(--ivory)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--gold)}
.f input::placeholder,.f textarea::placeholder{color:rgba(242,238,230,.22)}
form .btn{width:100%;margin-top:var(--space-5);padding-block:var(--space-4)}
form .note{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;color:var(--text-faint);margin-top:var(--space-3);text-align:center}
.sent{display:none;text-align:center;padding-block:var(--space-5)}
.sent.on{display:block}
.sent b{display:block;font-family:var(--font-display);font-size:var(--text-xl);color:var(--gold);margin-bottom:var(--space-2)}
.sent p{color:var(--text-muted)}
@media(max-width:960px){.reserve .grid{grid-template-columns:1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}

/* ---------- projects ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4)}
.pc{border:1px solid var(--line);background:var(--ink);display:flex;flex-direction:column;transition:border-color .5s var(--ease),transform .6s var(--ease)}
.pc:hover{border-color:var(--gold-dim);transform:translateY(-5px)}
.pc .im{position:relative;aspect-ratio:4/3;overflow:hidden}
.pc .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);opacity:.88}
.pc:hover .im img{transform:scale(1.06);opacity:1}
.pc .tag{position:absolute;top:var(--space-3);left:var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;background:rgba(11,15,14,.85);border:1px solid var(--gold-dim);color:var(--gold);padding:var(--space-1) var(--space-2);backdrop-filter:blur(4px)}
.pc .bd{padding:var(--space-5);flex:1;display:flex;flex-direction:column}
.pc h3{color:var(--ivory);margin-bottom:var(--space-2)}
.pc .loc{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-3)}
.pc p{color:var(--text-muted);flex:1}
.pc .more{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ivory)}
.pc .more svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.3;transition:transform .4s var(--ease)}
.pc:hover .more svg{transform:translateX(5px)}

/* ---------- group ---------- */
.group{background:var(--ink);border-top:1px solid var(--line)}
/* Seven divisions never tile evenly into a 4- or 2-column grid, which left a
   dead cell in the fused hairline grid. The last card takes the slack. */
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.dgrid .dc:last-child{grid-column:span 2}
.dc{background:var(--ink);padding:var(--space-5);min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.dc .ic{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.1;margin-bottom:var(--space-4)}
.dc h3{color:var(--ivory);margin-bottom:var(--space-2)}
.dc p{color:var(--text-muted)}
@media(max-width:1080px){.dgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.dgrid{grid-template-columns:1fr}.dgrid .dc:last-child{grid-column:auto}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-5);margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--font-display);font-size:var(--text-3xl);color:var(--gold);line-height:1}
.stats span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-3);line-height:var(--leading-body)}

/* ---------- team / leadership ----------
   The team is split into labelled groups (.tgroup). A fixed 3-column grid keeps
   every card the same width across groups regardless of how many members a
   group has — a 2-person group just fills two of the three columns. */
.tgroup + .tgroup{margin-top:var(--space-8)}
.tgroup-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.tgroup-head b{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);white-space:nowrap}
.tgroup-head .line{height:1px;background:var(--line);flex:1}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.tc .ph{aspect-ratio:4/5;overflow:hidden;background:var(--ink);border:1px solid var(--line);margin-bottom:var(--space-4);display:grid;place-items:center;border-radius:50% 50% 3px 3px / 22% 22% 3px 3px}
.tc .ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(.35);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.tc:hover .ph img{filter:none;transform:scale(1.03)}
.tc .mono{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--gold-dim)}
.tc h3{color:var(--ivory);margin-bottom:var(--space-2)}
.tc .role{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-3)}
.tc p{color:var(--text-muted)}
.tc .social{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.tc .social a{width:34px;height:34px;border:1px solid var(--line);display:grid;place-items:center;transition:.4s var(--ease)}
.tc .social a:hover{border-color:var(--gold);background:rgba(173,156,119,.08)}
.tc .social svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.4}
@media(max-width:820px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tgrid{grid-template-columns:1fr;max-width:360px}}

/* ---------- voices ---------- */
.voices{background:var(--pine-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.voices .q{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--gold-dim);line-height:.6;margin-bottom:var(--space-5)}
.vslide{display:none}
.vslide.on{display:block;animation:fade .8s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
.vslide p{font-family:var(--font-display);font-style:italic;font-size:var(--text-2xl);line-height:var(--leading-snug);color:var(--ivory);margin:0 auto var(--space-5);max-width:45ch}
.vslide b{display:block;font-size:var(--text-sm);letter-spacing:.1em;color:var(--ivory);font-weight:var(--weight-medium)}
.vslide span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:var(--space-2)}
.vdots{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-6)}
.vdots button{width:26px;height:2px;background:var(--gold-dim);border:0;padding:0;cursor:pointer;transition:.4s}
.vdots button.on{background:var(--gold);width:44px}

/* ---------- faq ---------- */
.faq .grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:var(--space-6)}
.faq h2{color:var(--ivory)}
.fi{border-bottom:1px solid var(--line)}
.fq{width:100%;background:none;border:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-4);text-align:left;cursor:pointer;font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--ivory);transition:color .35s}
.fq:hover{color:var(--gold)}
.fq .pl{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--gold);flex:none;transition:transform .5s var(--ease)}
.fi.open .fq .pl{transform:rotate(45deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.fa div{padding-bottom:var(--space-4);color:var(--text-muted);max-width:70ch}
@media(max-width:900px){.faq .grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--void);border-top:1px solid var(--line);padding-block:var(--section-y) var(--space-5)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--line)}
.fgrid img{height:112px;width:auto;margin-bottom:var(--space-4)}
.fgrid > div > p{color:var(--text-muted);max-width:34ch}
.fgrid h4{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-4);font-weight:var(--weight-normal)}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.fgrid li a{font-size:var(--text-base);color:var(--text-muted);transition:color .3s}
.fgrid li a:hover{color:var(--gold)}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4);flex-wrap:wrap}
.fbot p,.fbot a{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;color:var(--text-faint)}
.socials{display:flex;gap:var(--space-2)}
.socials a{width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center;transition:.4s var(--ease)}
.socials a:hover{border-color:var(--gold);background:rgba(173,156,119,.08)}
.socials svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.3}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---------- sticky availability + whatsapp ---------- */
#dock{position:fixed;left:var(--space-4);bottom:var(--space-4);z-index:var(--z-dock);background:var(--ivory);color:var(--void);padding:var(--space-3);width:246px;box-shadow:0 26px 60px -28px rgba(0,0,0,.85);opacity:0;transform:translateY(20px);pointer-events:none;transition:.7s var(--ease)}
#dock.on{opacity:1;transform:none;pointer-events:auto}
#dock b{display:block;font-family:var(--font-display);font-size:var(--text-xl);line-height:var(--leading-tight)}
#dock span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--void-muted);margin-top:var(--space-2)}
#dock a{display:block;margin-top:var(--space-3);background:var(--pine);color:var(--ivory);text-align:center;font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.16em;text-transform:uppercase;padding:var(--space-3);transition:background .4s}
#dock a:hover{background:var(--pine-deep)}
#dock button{position:absolute;top:var(--space-2);right:var(--space-2);background:none;border:0;color:var(--void-muted);font-size:var(--text-sm);cursor:pointer;line-height:1}
#wa{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:var(--z-dock);width:52px;height:52px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(173,156,119,.6);transition:.4s var(--ease)}
#wa:hover{background:var(--gold-lift);transform:scale(1.06)}
#wa svg{width:24px;height:24px;stroke:var(--void);fill:none;stroke-width:1.6}
@media(max-width:760px){#dock{display:none}}