/* ==========================================================================
   Colonel of Cards — v0.4
   "The Card Within." A court card is a rank; the deck never had a Colonel.
   Every module on this site is a card: corner index, suit, edge, face.
   Single committed look (brand-owned), painted explicitly.
   ========================================================================== */

:root{
  /* --- locked brand palette --- */
  --ink:#17181A;
  --ivory:#FFFFFF;
  --pip:#B3202C;
  --silver:#9B9B9F;
  --ground:#1B1D1F;

  /* --- neutrals: white ground, cool-neutral supports (no beige) --- */
  --deep:#101113;
  --surface:#FFFFFF;
  --stock:#F4F4F5;
  --ink-2:#4A4A4E;
  --muted:#6E6E74;
  --line:#E3E3E5;
  --line-strong:#C9C9CD;
  --line-dark:#2B2C2E;
  --line-dark-2:#3D3E41;
  --pip-soft:#F6E4E5;

  /* --- venture brand colors, used ONLY inside their own cards --- */
  --adigeni-red:#E50E23;
  --adigeni-blue:#0054A8;
  --navgt-ink:#111319;
  --s1776-navy:#031B41;
  --s1776-gold:#BC9348;

  /* --- type --- */
  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-util:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* --- scale --- */
  --step--1:.82rem;
  --step-0:1rem;
  --step-1:1.2rem;
  --step-2:1.7rem;
  --step-3:2.3rem;
  --step-4:clamp(2.5rem,5.4vw,4.1rem);
  --step-5:clamp(3rem,6.6vw,5.3rem);

  --radius:6px;
  --radius-card:10px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss01" 1;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.06;letter-spacing:-.005em;
  text-wrap:balance;margin:0 0 .5rem}
h1{font-size:var(--step-5);letter-spacing:-.018em;line-height:1.0}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
p{margin:0 0 1rem;max-width:68ch}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}

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

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:76ch}

.eyebrow{
  font-family:var(--f-body);font-weight:600;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.tbd{
  background:var(--pip-soft);color:var(--pip);border-radius:4px;padding:1px 7px;
  font-family:var(--f-util);font-size:.7rem;letter-spacing:.03em;
}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- corner index: the card-corner rank mark ---------- */
.corner-index{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:30px;height:42px;flex:0 0 auto;
  border:1px solid var(--line-strong);border-radius:4px;
  font-family:var(--f-display);font-size:.78rem;line-height:1;color:var(--pip);
  background:rgba(255,255,255,.5);
}
.eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}

.suit-divider{display:flex;align-items:center;gap:0;margin:52px 0 32px}
.suit-divider span{flex:1;height:1px;background:var(--line)}
.suit-divider i{font-style:normal;font-family:var(--f-display);font-size:1.3rem;color:var(--pip);line-height:1}

/* ========================= HEADER ========================= */
header.site{
  background:transparent;color:var(--ivory);
  position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:0;
}
header.site .bar{
  position:relative;z-index:2;
  max-width:var(--wrap);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ivory);
  font-family:var(--f-display);font-size:1.22rem;letter-spacing:.01em;white-space:nowrap;
}
.brand .mark{width:19px;height:34px;flex:0 0 auto}
.brand .wordmark{height:34px;width:auto;flex:0 0 auto;display:block}
@media (max-width:900px){
  .brand{gap:9px}
  .brand .mark{width:17px;height:30px}
  .brand .wordmark{height:30px}
}
.navlinks-wrap{display:flex;align-items:center;gap:26px}
nav.primary{display:flex;gap:20px;flex-wrap:wrap}
nav.primary a{
  text-decoration:none;color:var(--ivory);opacity:.82;
  font-size:.9rem;padding:4px 0;border-bottom:1px solid transparent;
  transition:opacity .18s,border-color .18s;
}
nav.primary a:hover{opacity:1;border-bottom-color:var(--pip)}
nav.primary a[aria-current=page]{opacity:1;border-bottom-color:var(--pip)}
.cta-book{color:var(--pip)}
.cta-book:hover{color:#D93643}
@media (max-width:900px){
  nav.primary{display:none}
}

/* ========================= HERO: THE HAND ========================= */
.hero{
  background: linear-gradient(to right,
    var(--deep) 0%, var(--ground) 42%, var(--line-dark) 68%, var(--line-dark-2) 100%);
  color:var(--ivory);
  border-bottom:0;
  overflow:hidden;
  position:relative;
  padding-top:clamp(96px,8vw,124px);   /* clears the fixed header, with air */
}
/* Home keeps the original, darker hero ground — the lighter left-to-right
   gradient above is for the illustrated interior pages only. */
.hero-home{
  background:
    radial-gradient(120% 90% at 78% 12%, #23262a 0%, rgba(35,38,42,0) 62%),
    var(--deep);
}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:52px;align-items:center;padding-top:26px;padding-bottom:50px;
}
.hero .eyebrow{color:#8A8A90;margin-bottom:28px}
.hero h1{color:var(--ivory);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--pip)}
.lede{font-size:var(--step-1);color:#D7D7DA;max-width:46ch}
.hero .actions{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px}

/* --- buttons: no container. A label and a rule that redraws on hover ------ */
.btn,.cta-book,.copybtn{
  position:relative;display:inline-block;
  background:none;border:0;padding:0 0 9px;margin:0;
  text-transform:uppercase;font-weight:600;letter-spacing:.11em;
  text-decoration:none;cursor:pointer;outline:none;
  transition:color .3s ease;
}
.btn{font-size:.76rem;line-height:1.4}
.cta-book{font-size:.7rem;white-space:nowrap;border-radius:0}
.copybtn{font-size:.68rem}

/* two rules stacked: the resting one retracts right, the new one draws left */
.btn::before,.btn::after,
.cta-book::before,.cta-book::after,
.copybtn::before,.copybtn::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:2px;background:currentColor;
  transition:transform .42s cubic-bezier(.16,.84,.3,1);
}
.btn::before,.cta-book::before,.copybtn::before{transform:scaleX(1);transform-origin:right center}
.btn::after,.cta-book::after,.copybtn::after{transform:scaleX(0);transform-origin:left center}

.btn:hover::before,.btn:focus-visible::before,
.cta-book:hover::before,.cta-book:focus-visible::before,
.copybtn:hover::before,.copybtn:focus-visible::before{transform:scaleX(0)}

.btn:hover::after,.btn:focus-visible::after,
.cta-book:hover::after,.cta-book:focus-visible::after,
.copybtn:hover::after,.copybtn:focus-visible::after{transform:scaleX(1);transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .btn::before,.btn::after,.cta-book::before,.cta-book::after,
  .copybtn::before,.copybtn::after{transition:none}
}

.btn.primary{color:var(--pip)}
.btn.primary:hover{color:#D93643}
.btn.ghost{color:var(--ivory)}
.btn.ghost:hover{color:#fff}
.btn.ghost-ink{color:var(--ink)}
.btn.ghost-ink:hover{color:var(--pip)}

/* --- the pair: card front laid over card back, oversized, fading out below --- */
.cardpair{
  position:relative;
  min-height:clamp(440px,50vw,604px);
  /* the mask box must fully contain both rotated cards — anything crossing
     its edge is cut, not faded. The cards are offset inward to guarantee it. */
  padding:34px 24px 0;
  margin:0 -24px -58px;
  /* oversized cards that dissolve before they reach the award marks */
  -webkit-mask-image:linear-gradient(to bottom,
      #000 58%, rgba(0,0,0,.62) 77%, rgba(0,0,0,.18) 90%, transparent 99%);
  mask-image:linear-gradient(to bottom,
      #000 58%, rgba(0,0,0,.62) 77%, rgba(0,0,0,.18) 90%, transparent 99%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.cardpair img{
  position:absolute;
  width:clamp(186px,21vw,278px);
  height:auto;
  border-radius:14px;
  transition:transform .7s cubic-bezier(.16,.84,.3,1);
}
.cardpair .back{
  left:40px; top:34px;
  transform:rotate(-11deg);
  z-index:1;
}
.cardpair .front{
  left:calc(27% + 22px); top:calc(8% + 30px);
  transform:rotate(7.5deg);
  z-index:2;
}
/* a slow lean toward the cursor — depth, not motion for its own sake */
.cardpair:hover .back {transform:rotate(-11.9deg) translate(5px,3px)}
.cardpair:hover .front{transform:rotate(8.6deg)   translate(7px,-2px)}

@media (max-width:940px){
  .cardpair{min-height:clamp(330px,76vw,450px);padding:26px 18px 0;margin:0 -18px -44px}
  .cardpair img{width:clamp(178px,40vw,246px)}
  .cardpair .back {left:34px;top:24px}
  .cardpair .front{left:calc(30% + 14px)}
}
/* one column on phones: the hero is a headline first, a hand second */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
  .hero .eyebrow{margin-bottom:18px}
  .hero .actions{gap:26px;margin-top:24px}
  .cardpair{
    min-height:clamp(280px,74vw,400px);
    padding:6px 0 0;margin:6px -24px -30px;
  }
  .cardpair img{width:clamp(158px,44vw,232px);border-radius:11px}
  .cardpair .back {left:26px;top:18px}
  .cardpair .front{left:calc(34% + 10px);top:calc(7% + 20px)}
}

/* ========================= ROLE DECK (the icon row) ========================= */
section.roledeck{background:var(--ink);color:var(--ivory);border-bottom:1px solid #000;padding:0}
.roledeck .wrap{padding:24px}
.roledeck ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
}
.roledeck li{border-left:1px solid var(--line-dark);padding:6px 18px}
.roledeck li:first-child{border-left:0;padding-left:0}
.roledeck .glyph{
  font-family:var(--f-display);font-size:1.5rem;line-height:1;color:var(--pip);
  display:block;margin-bottom:9px;
}
.roledeck b{display:block;font-size:.94rem;font-weight:600;letter-spacing:.01em}
.roledeck small{display:block;color:#8A8A90;font-size:.76rem;line-height:1.45;margin-top:3px}
@media (max-width:820px){
  .roledeck ul{grid-template-columns:repeat(2,1fr);gap:20px 0}
  .roledeck li{border-left:0;padding:0 12px 0 0}
}

/* ========================= PROOF STRIP ========================= */
.proof{background:var(--stock);border-bottom:1px solid var(--line)}
.proof .wrap{padding:18px 24px}
.proof .row{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.proof .item{
  font-family:var(--f-util);font-size:.7rem;letter-spacing:.02em;color:var(--ink-2);
  display:flex;align-items:baseline;gap:7px;
;font-weight:600;text-transform:uppercase}
.proof .item b{font-family:var(--f-body);font-weight:600;color:var(--ink);letter-spacing:0}
.proof .item i{font-style:normal;color:var(--pip)}

/* ========================= SECTIONS ========================= */
/* The page is one scroll. Sections carry rhythm through space, and colour
   moves through long gradients — never a seam where two flat blocks meet. */
section{padding:112px 0}
section.tight{padding:78px 0}

/* the light band eases in and out of the white ground at both ends */
section.alt{
  background:linear-gradient(180deg,
    var(--surface) 0%, var(--stock) 13%, var(--stock) 87%, var(--surface) 100%);
}

/* the closing block arrives out of the white rather than cutting against it */
section.dark{
  background:var(--deep);
  color:var(--ivory);
  padding-top:104px;
}
section.dark h2{color:var(--ivory)}
section.dark p{color:#D7D7DA}
.border-t{border-top:0}   /* kept as a hook; the seam is gone */
.section-head{margin-bottom:34px}
.section-head p{color:var(--muted);max-width:62ch;margin-top:6px}

/* ========================= GRIDS + CARDS ========================= */
.grid{display:grid;gap:22px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid.three,.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:24px;display:flex;flex-direction:column;
}
.card h3{margin-bottom:8px}
.card .chip,.card .chips{align-self:flex-start}
.card p{margin-bottom:14px;max-width:none}
.card .tag{
  font-family:var(--f-util);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pip);margin-bottom:11px;
;font-weight:600}
.card .out{
  margin-top:auto;align-self:flex-start;text-decoration:none;
  font-family:var(--f-util);font-size:.76rem;letter-spacing:.06em;color:var(--ink);
  border-bottom:1px solid var(--pip);padding-bottom:2px;
;font-weight:600;text-transform:uppercase}
.card .out:hover{color:var(--pip)}

/* ---------- venture cards: each carries its own brand, one at a time ---------- */
.venture{
  position:relative;overflow:hidden;
  border-radius:var(--radius-card);border:1px solid var(--line-dark);
  background:var(--ink);color:var(--ivory);
  padding:26px 24px 22px;display:flex;flex-direction:column;
  transition:transform .22s,border-color .22s;
}
.venture:hover{transform:translateY(-3px)}
.venture::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brandbar,var(--pip))}
.venture .logo-plate{
  height:52px;display:flex;align-items:center;margin-bottom:18px;
}
.venture .logo-plate img{max-height:46px;width:auto;max-width:220px}
.venture .role{
  font-family:var(--f-util);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brandbar,var(--pip));margin-bottom:9px;
;font-weight:600}
.venture h3{
  color:var(--ivory);font-family:var(--f-body);font-weight:700;
  font-size:1.06rem;letter-spacing:-.012em;margin-bottom:9px;
}
.venture p{color:#BEBEC3;font-size:.92rem;max-width:none;margin-bottom:16px}
.venture .venture-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.venture .visit{
  text-decoration:none;font-family:var(--f-util);font-size:.74rem;letter-spacing:.06em;
  color:var(--ivory);border-bottom:1px solid var(--brandbar,var(--pip));padding-bottom:2px;
;font-weight:600;text-transform:uppercase}
.socials{display:flex;gap:7px}
.socials a{
  width:30px;height:30px;border-radius:5px;
  display:grid;place-items:center;text-decoration:none;
  border:1px solid var(--line-dark-2);color:#B7B7BC;
  transition:background .18s,color .18s,border-color .18s;
}
.socials a:hover{background:var(--brandbar,var(--pip));color:#fff;border-color:transparent}
.socials svg{width:16px;height:16px;display:block}
.socials svg *{fill:currentColor}

/* ---------- Not A Very Good Teacher: its own yellow ground ---------- */
.venture.venture-navgt{
  background:#FFF200;
  border-color:#E4D500;
  color:var(--ink);
}
.venture.venture-navgt::before{background:var(--ink)}
.venture.venture-navgt .logo-plate{height:86px;margin-bottom:16px}
.venture.venture-navgt .logo-plate img{max-height:82px;max-width:100%;width:auto}
.venture.venture-navgt h3{color:var(--ink)}
.venture.venture-navgt p{color:#33331F}
.venture.venture-navgt .role{color:#4A2C86}
.venture.venture-navgt .visit{color:var(--ink);border-bottom-color:var(--ink)}
.venture.venture-navgt .visit:hover{color:#4A2C86}
.venture.venture-navgt .socials a{border-color:rgba(23,24,26,.28);color:#26260F}
.venture.venture-navgt .socials a:hover{background:var(--ink);color:#FFF200;border-color:transparent}

/* ---------- the real logotype, in the footer ---------- */
.footer-logotype{display:block;margin-bottom:4px}
.footer-logotype .logotype{width:clamp(150px,15vw,186px);height:auto;display:block}

/* ==========================================================================
   THE VENTURE HAND
   Three ventures dealt as court cards, each on its own brand ground.
   At rest you read the face: role, logo, name. Lift one out of the hand and
   the back slides up with the full story. Keyboard reaches it through the
   link inside, so :focus-within opens the same panel hover does.
   ========================================================================== */
.hand{
  position:relative;
  display:flex;justify-content:center;align-items:flex-end;
  padding:16px 0 66px;
}
.vcard{
  position:relative;flex:0 0 auto;
  width:clamp(236px,23.5vw,320px);
  aspect-ratio:5/7;
  border-radius:16px;overflow:hidden;
  background:var(--card-bg);color:var(--card-ink);
  border:1px solid var(--card-line);
  box-shadow:0 18px 44px rgba(16,17,19,.26);
  transform-origin:50% 114%;
  transition:transform .55s cubic-bezier(.16,.84,.3,1),box-shadow .55s,opacity .35s;
}
.vcard + .vcard{margin-left:clamp(-58px,-3.5vw,-26px)}
.vcard:nth-child(1){transform:rotate(-7.5deg) translateY(16px);z-index:1}
.vcard:nth-child(2){transform:rotate(0deg)    translateY(0);   z-index:2}
.vcard:nth-child(3){transform:rotate(7.5deg)  translateY(16px);z-index:3}

/* the card in play squares up and rises; the rest lean away and dim */
.vcard:hover,.vcard:focus-within{
  transform:rotate(0deg) translateY(-30px) scale(1.04)!important;
  z-index:9;
  box-shadow:0 38px 76px rgba(16,17,19,.42);
}
.hand:has(.vcard:hover) .vcard:not(:hover),
.hand:has(.vcard:focus-within) .vcard:not(:focus-within){opacity:.82}
.hand:has(.vcard:hover) .hand-hint{opacity:0}
.hand-hint{transition:opacity .3s ease}
.hand:has(.vcard:nth-child(2):hover) .vcard:nth-child(1),
.hand:has(.vcard:nth-child(3):hover) .vcard:nth-child(1),
.hand:has(.vcard:nth-child(2):focus-within) .vcard:nth-child(1),
.hand:has(.vcard:nth-child(3):focus-within) .vcard:nth-child(1){transform:rotate(-13deg) translateY(26px) translateX(-40px)}
.hand:has(.vcard:nth-child(1):hover) .vcard:nth-child(2),
.hand:has(.vcard:nth-child(1):focus-within) .vcard:nth-child(2){transform:rotate(5deg)  translateY(14px) translateX(66px)}
.hand:has(.vcard:nth-child(3):hover) .vcard:nth-child(2),
.hand:has(.vcard:nth-child(3):focus-within) .vcard:nth-child(2){transform:rotate(-5deg) translateY(14px) translateX(-66px)}
.hand:has(.vcard:nth-child(1):hover) .vcard:nth-child(3),
.hand:has(.vcard:nth-child(2):hover) .vcard:nth-child(3),
.hand:has(.vcard:nth-child(1):focus-within) .vcard:nth-child(3),
.hand:has(.vcard:nth-child(2):focus-within) .vcard:nth-child(3){transform:rotate(13deg) translateY(26px) translateX(40px)}

/* --- the face --- */
.vcard-face{
  position:absolute;inset:0;z-index:1;
  padding:56px 82px 26px 26px;
  display:flex;flex-direction:column;
}
.vcard-role{
  font-family:var(--f-util);font-weight:600;font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin:0;
}
.vcard-logo{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:14px 0}
.vcard-logo img{width:auto;max-width:100%;height:auto}
.vcard h3{
  font-family:var(--f-body);font-weight:700;font-size:1.04rem;letter-spacing:-.014em;
  color:var(--card-ink);margin:0 0 5px;
}
.vcard-line{
  font-size:.82rem;line-height:1.45;color:var(--card-dim);margin:0;max-width:22ch;
}

/* --- the back of the card: slides up over the face, opaque --- */
.vcard-back{
  position:absolute;inset:0;z-index:2;
  padding:52px 26px 30px;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--card-bg);
  transform:translateY(100%);
  transition:transform .55s cubic-bezier(.16,.84,.3,1);
}
.vcard-title{
  font-family:var(--f-body);font-weight:700;font-size:1rem;letter-spacing:-.014em;
  color:var(--card-ink);margin:0 0 10px;
}
.vcard:hover .vcard-back,.vcard:focus-within .vcard-back{transform:none}
.vcard-back p{font-size:.86rem;line-height:1.5;color:var(--card-dim);margin:0 0 18px;max-width:none}
.vcard-foot{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.vcard .visit{
  text-decoration:none;font-family:var(--f-util);font-weight:600;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--card-ink);border-bottom:1px solid var(--brand);padding-bottom:2px;
}
.vcard .visit:hover{color:var(--brand)}
.vcard .socials a{border-color:var(--card-chip);color:var(--card-dim)}
.vcard .socials a:hover{background:var(--brand);color:var(--card-bg);border-color:transparent}

/* --- the corner index: initial over a brand pip --- */
.vcard-index{
  position:absolute;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-family:var(--f-display);font-size:1.12rem;line-height:1;
  color:var(--card-ink);
}
.vcard-index i{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.vcard-index.at-tl{left:17px;top:16px}
.vcard-index.at-br{right:17px;bottom:16px;transform:rotate(180deg)}

.hand-hint{
  position:absolute;left:0;right:0;bottom:0;width:auto;max-width:none;text-align:center;
  font-family:var(--f-util);font-weight:600;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0;
}

/* --- each venture brings its own ground --- */
.vcard-adigeni{
  --card-bg:var(--ink);--card-ink:#fff;--card-dim:#B6B6BB;
  --card-line:var(--line-dark);--card-veil:rgba(11,12,13,.96);--card-chip:var(--line-dark-2);
  --brand:#E50E23;
}
.vcard-navgt{
  --card-bg:#FFF200;--card-ink:var(--ink);--card-dim:#3A3A22;
  --card-line:#E0D200;--card-veil:rgba(255,242,0,.97);--card-chip:rgba(23,24,26,.3);
  --brand:#7A3CD8;
}
.vcard-s1776{
  --card-bg:#031B41;--card-ink:#fff;--card-dim:#AFBACB;
  --card-line:#0C2B5C;--card-veil:rgba(3,20,45,.96);--card-chip:#173A6B;
  --brand:#BC9348;
}

/* --- small screens: no hand, no hover. Three plain cards, open. --- */
@media (max-width:820px){
  .hand{flex-direction:column;align-items:stretch;gap:18px;padding:0 0 12px}
  .vcard{width:100%;aspect-ratio:auto;transform:none!important;opacity:1!important;
         box-shadow:0 12px 30px rgba(16,17,19,.16)}
  .vcard + .vcard{margin-left:0}
  .vcard-face{position:static;inset:auto;padding:50px 22px 6px}
  .vcard-logo{justify-content:flex-start}
  .vcard-line{display:none}
  .vcard-logo{padding:14px 0 18px;justify-content:flex-start}
  .vcard-back{position:static;inset:auto;transform:none!important;background:none;
              display:block;padding:14px 22px 22px}
  .vcard-title{display:none}
  .vcard-foot{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .vcard-index.at-br{display:none}
  .hand-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vcard,.vcard-back{transition:none}
}

/* ---------- photo figure ---------- */
figure.shot{margin:0;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);background:var(--ink)}
figure.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
figure.shot.tall img{aspect-ratio:3/4}
figure.shot.wide img{aspect-ratio:16/9}
figure.shot figcaption{
  padding:10px 13px;font-family:var(--f-util);font-size:.68rem;letter-spacing:.04em;
  color:#A8A8AE;background:var(--ink);
}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.split.reverse figure.shot{order:2}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:22px}
  /* display:contents lifts the text column's children into the grid, so the
     heading can sit above the photo and the body copy below it. */
  .split > div{display:contents}
  .split > div > *{order:3;margin-bottom:0}
  .split > div > * + *{margin-top:14px}
  .split > div > h2,.split > div > h3,
  .split > div > .section-head,.split > div > .eyebrow-row{order:1;margin-top:0}
  .split figure.shot,.split.reverse figure.shot{order:2}
}

/* ---------- thumbnail media grid (filterable) ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filters button{
  font-family:var(--f-util);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--ink-2);
  transition:background .18s,color .18s,border-color .18s;
;font-weight:600}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--pip);border-color:var(--pip);color:#fff}

.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.thumbs{grid-template-columns:1fr}}
.thumb{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.thumb:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 12px 26px rgba(23,24,26,.09)}
.thumb .frame{position:relative;background:var(--ink);overflow:hidden}
.thumb .frame img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}
.thumb:hover .frame img{transform:scale(1.03)}
.thumb .kind{
  position:absolute;left:10px;top:10px;
  font-family:var(--f-util);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(16,17,19,.9);color:var(--ivory);padding:4px 9px;border-radius:3px;
;font-weight:600}
.thumb .body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.thumb .body .when{font-family:var(--f-util);font-size:.67rem;letter-spacing:.06em;color:var(--muted);margin-bottom:7px;font-weight:600;text-transform:uppercase}
.thumb .body h3{font-size:1.1rem;margin-bottom:7px}
.thumb .body p{font-size:.88rem;color:var(--ink-2);margin:0 0 12px;max-width:none}
.thumb .body .go{
  margin-top:auto;font-family:var(--f-util);font-size:.72rem;letter-spacing:.08em;
  color:var(--pip);
;font-weight:600;text-transform:uppercase}

/* ---------- timeline ----------
   A rail runs down the years and fills as you scroll, each entry lighting its
   own node as it arrives. The fill height is set from the scroll loop; with JS
   off the rail is simply full and every entry sits in its finished state. */
.tl{
  position:relative;display:grid;gap:0;margin:0;padding:0 0 0 34px;list-style:none;
}
.tl::before{                       /* the rail */
  content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;
  background:var(--line);border-radius:2px;z-index:0;
}
.tl::after{                        /* the part already travelled */
  content:"";position:absolute;left:5px;top:10px;width:2px;border-radius:2px;z-index:0;
  height:var(--tl-progress,100%);
  background:linear-gradient(to bottom,var(--pip),#D9564F);
  transition:height .18s linear;
}
.tl li{
  position:relative;
  /* The reveal engine puts will-change:transform on these rows, which makes
     each one a stacking context — so a z-index on the dot inside can never
     beat the rail. The row itself has to sit above the rail. */
  z-index:1;
  display:grid;grid-template-columns:110px minmax(0,1fr);gap:26px;
  padding:22px 0;border-top:1px solid var(--line);
}
.tl li:last-child{border-bottom:1px solid var(--line)}
.tl li::before{                    /* the node — sits on top of the rail */
  content:"";position:absolute;z-index:2;left:-34px;top:28px;
  width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong);
  transition:background .4s ease,border-color .4s ease,transform .5s cubic-bezier(.2,1.4,.4,1);
}
.tl li.lit::before{background:var(--pip);border-color:var(--pip);transform:scale(1.18)}
.tl .when{font-family:var(--f-util);font-size:.74rem;font-weight:500;color:var(--pip);padding-top:3px;letter-spacing:.09em;text-transform:uppercase}
.tl h3{font-size:1.22rem;margin-bottom:5px}
.tl p{margin:0;font-size:.94rem;color:var(--ink-2)}

/* each entry slides in from the rail as it arrives */
.js .tl li{opacity:0;transform:translateY(16px)}
.js .tl li.in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,.84,.3,1)}

@media (max-width:640px){
  .tl li{grid-template-columns:1fr;gap:6px}
  .tl{padding-left:28px}
  .tl::before,.tl::after{left:3px}
  .tl li::before{left:-28px;top:24px;width:10px;height:10px}
}
@media (prefers-reduced-motion:reduce){
  .js .tl li{opacity:1;transform:none}
  .tl::after{transition:none}
}

/* ---------- pullquote ---------- */
.pullquote{
  border-left:4px solid var(--pip);padding:8px 0 8px 24px;margin:30px 0;
  font-family:var(--f-display);font-size:var(--step-2);color:var(--pip);
}
.pullquote cite{
  display:block;font-family:var(--f-body);font-weight:600;font-size:.85rem;color:var(--ink);
  font-style:normal;margin-top:12px;
}
section.dark .pullquote{color:#FF6B6E}
section.dark .pullquote cite{color:var(--ivory)}

/* ---------- topic / accolade chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 8px;padding:0;list-style:none}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;
  font-family:var(--f-util);font-size:.72rem;letter-spacing:.03em;color:var(--ink-2);
;font-weight:600;text-transform:uppercase}
.chip i{font-style:normal;color:var(--pip);font-family:var(--f-display);font-size:.92rem}
section.dark .chip{border-color:var(--line-dark-2);color:var(--ivory)}

/* ---------- stat / kit rows ---------- */
.kit{list-style:none;margin:0;padding:0;display:grid;gap:0}
.kit li{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 0;border-top:1px solid var(--line);
}
.kit li:last-child{border-bottom:1px solid var(--line)}
.kit .what b{display:block;font-size:1rem}
.kit .what small{color:var(--muted);font-family:var(--f-util);font-size:.7rem;letter-spacing:.04em;font-weight:600;text-transform:uppercase}
.copybtn{color:var(--ink)}
.copybtn:hover{color:var(--pip)}
.copybtn[data-copied=true]{color:var(--pip)}
.bioblock{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:20px 22px;margin-bottom:16px;
}
.bioblock .eyebrow{margin-bottom:9px}
.bioblock p{margin:0}

/* ---------- form ---------- */
form.book{display:grid;gap:16px;max-width:640px}
form.book .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){form.book .row2{grid-template-columns:1fr}}
form.book label{display:block;font-family:var(--f-util);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
form.book input,form.book select,form.book textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius);
  font:inherit;background:var(--surface);color:var(--ink);
}
form.book input:focus,form.book select:focus,form.book textarea:focus{border-color:var(--pip);outline:none;box-shadow:0 0 0 3px var(--pip-soft)}
form.book textarea{min-height:130px;resize:vertical}

/* ---------- reveal on scroll, from a visible resting state ---------- */
.reveal{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ========================= FOOTER ========================= */
footer.site{background:var(--deep);color:#B7B7BC;padding:64px 0 40px;font-size:.88rem}
footer.site a{color:#DCDCDF;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:30px}
@media (max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site .eyebrow{color:#7C7C82;margin-bottom:11px}
footer.site .flinks a{display:block;padding:3px 0}
footer.site .social{display:flex;gap:8px;margin-top:14px}
footer.site .social a{
  width:36px;height:36px;border:1px solid var(--line-dark-2);border-radius:6px;
  display:grid;place-items:center;color:#B7B7BC;
  transition:background .18s,color .18s,border-color .18s;
}
footer.site .social a:hover{background:var(--pip);color:#fff;border-color:transparent}
footer.site .social svg{width:17px;height:17px;display:block}
footer.site .social svg *{fill:currentColor}
.fine{color:#7C7C82;font-size:.76rem;line-height:1.6;border-top:1px solid var(--line-dark);padding-top:20px;max-width:none}


/* ==========================================================================
   MOTION
   Everything below is additive. With JS off, or reduced motion on, every
   element sits in its finished state — nothing is hidden waiting on a script.
   ========================================================================== */

/* --- word-by-word mask reveal for display type --- */
.anim-words .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}
.anim-words .w > span{display:inline-block;will-change:transform,opacity}
.js .anim-words .w > span{
  transform:translateY(105%) rotate(2.5deg);opacity:0;
  transition:transform .78s cubic-bezier(.16,.84,.3,1),opacity .5s ease;
  transition-delay:var(--d,0ms);
}
.js .anim-words.in .w > span{transform:none;opacity:1}

/* --- generic entrances --- */
.js [data-anim]{will-change:transform,opacity}
.js [data-anim="up"]      {opacity:0;transform:translateY(22px)}
.js [data-anim="fade"]    {opacity:0}
.js [data-anim="rise"]    {opacity:0;transform:translateY(38px) scale(.985)}
.js [data-anim="left"]    {opacity:0;transform:translateX(-26px)}
.js [data-anim="right"]   {opacity:0;transform:translateX(26px)}
.js [data-anim]{
  transition:opacity .66s ease,transform .82s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--d,0ms);
}
.js [data-anim].in{opacity:1;transform:none}

/* --- image frames: the photo settles back to rest as the frame fades in ---
   Never clip-path the observed element: a fully clipped box reports zero
   intersection, the observer never fires, and it stays hidden for good. */
.js figure.shot img{transform:scale(1.08);transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.js figure.shot.in img{transform:scale(1)}

/* --- parallax drift, driven by a single rAF loop --- */
.par{will-change:transform}

/* --- suit dividers draw themselves --- */
.js .suit-divider span{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.16,.84,.3,1)}
.js .suit-divider span:last-of-type{transform-origin:right center}
.js .suit-divider.in span{transform:scaleX(1)}
.js .suit-divider i{opacity:0;transform:scale(.5) rotate(-25deg);
  transition:opacity .4s ease .35s,transform .6s cubic-bezier(.2,1.5,.4,1) .35s}
.js .suit-divider.in i{opacity:.95;transform:none}

/* --- the pair deals itself in on load --- */
@keyframes deal-back{ from{opacity:0;transform:translateY(74px) rotate(-2deg) scale(.94)} }
@keyframes deal-front{from{opacity:0;transform:translateY(94px) rotate(1deg)  scale(.94)} }
.js .cardpair .back {animation:deal-back  1s cubic-bezier(.16,.84,.3,1) 120ms backwards}
.js .cardpair .front{animation:deal-front 1s cubic-bezier(.16,.84,.3,1) 280ms backwards}

/* --- header condenses once you leave the hero --- */
header.site{transition:padding .3s ease,background .3s ease,box-shadow .3s ease}
/* Once it leaves the hero the bar gets a solid plate. It used to be a 92%
   translucent pane with a blur behind it, which reads as solid over a white
   section but lets photographs and headlines bleed through everywhere else. */
header.site.condensed{
  background:rgba(16,17,19,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 6px 30px rgba(0,0,0,.32);
}

/* over a light ground the whole bar flips to ink so it stays readable */
header.site.on-light{color:var(--ink)}
header.site.on-light .brand{color:var(--ink)}
header.site.on-light nav.primary a{color:var(--ink);opacity:.78}
header.site.on-light nav.primary a:hover,
header.site.on-light nav.primary a[aria-current=page]{opacity:1}
header.site.on-light.condensed{
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 26px rgba(16,17,19,.12);
}
header.site.condensed .bar{padding-top:9px;padding-bottom:9px}

/* --- reading-progress hairline under the header --- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;
  background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--pip);
  transform-origin:left center;transition:width .1s linear}

/* --- links that underline from the left --- */
.card .out,.venture .visit,[data-facet-link]{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s cubic-bezier(.16,.84,.3,1),color .2s;
}
.card .out:hover,.venture .visit:hover,[data-facet-link]:hover{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .js .anim-words .w > span,
  .js [data-anim],
  .js figure.shot[data-anim],
  .js figure.shot img,
  .js .suit-divider span,
  .js .suit-divider i{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .cardpair img{animation:none;transition:none}
  .par{transform:none!important}
}

/* ==========================================================================
   PHONES
   The desktop nav disappears below 900px, so the phone gets its own way in:
   a Menu button in the bar and a full-screen panel where every page is a
   dealt row. Plus a persistent booking bar, since booking is the point.
   ========================================================================== */

/* --- the Menu button --- */
.menu-btn{
  display:none;
  align-items:center;gap:9px;
  background:none;border:0;padding:8px 2px;margin:0;
  color:inherit;cursor:pointer;
  font-family:var(--f-util);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  min-height:44px;
}
.menu-lines{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px}
.menu-lines i{display:block;height:2px;width:100%;background:currentColor;
  transition:transform .3s ease,opacity .2s ease}
.menu-btn[aria-expanded=true] .menu-lines i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-lines i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu-word{display:none}

/* --- the panel --- */
.mobile-menu{
  position:fixed;inset:0;z-index:55;
  background:var(--deep);color:var(--ivory);
  padding:calc(72px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;
  opacity:0;transition:opacity .28s ease;
}
.mobile-menu.open{opacity:1}
.mm-inner{max-width:520px;margin:0 auto}
.mm-eyebrow{
  font-family:var(--f-util);font-weight:600;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7C7C82;margin:0 0 14px;
}
.mm-nav{display:flex;flex-direction:column;border-top:1px solid var(--line-dark)}
.mm-nav a{
  display:flex;align-items:center;gap:14px;
  padding:17px 2px;border-bottom:1px solid var(--line-dark);
  text-decoration:none;color:var(--ivory);
  font-family:var(--f-display);font-size:1.72rem;line-height:1;letter-spacing:-.01em;
  opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,.84,.3,1),color .2s;
  transition-delay:var(--d,0ms);
}
.mobile-menu.open .mm-nav a{opacity:1;transform:none}
.mm-nav a[aria-current=page]{color:var(--pip)}
.mm-i{
  flex:0 0 auto;width:26px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--line-dark-2);border-radius:4px;
  font-family:var(--f-util);font-weight:600;font-size:.66rem;letter-spacing:.02em;
  color:#9B9B9F;
}
.mm-nav a[aria-current=page] .mm-i{border-color:var(--pip);color:var(--pip)}
.mm-cta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:26px;padding:18px 20px;border-radius:10px;
  background:var(--pip);color:#fff;text-decoration:none;
  font-family:var(--f-util);font-weight:600;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(12px);
  transition:opacity .4s ease .34s,transform .5s cubic-bezier(.16,.84,.3,1) .34s;
}
.mobile-menu.open .mm-cta{opacity:1;transform:none}
.mm-soc{display:flex;gap:22px;margin-top:24px}
.mm-soc a{
  color:#9B9B9F;text-decoration:none;min-height:44px;display:flex;align-items:center;
  font-family:var(--f-util);font-weight:600;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;
}
.mm-soc a:hover{color:#fff}
body.menu-open{overflow:hidden}
/* while the panel is open the bar sits on the panel's ground: force dark chrome,
   beating the .on-light / .condensed states that would otherwise paint it white */
body.menu-open header.site,
body.menu-open header.site.condensed,
body.menu-open header.site.on-light,
body.menu-open header.site.on-light.condensed{
  color:var(--ivory)!important;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.menu-open header.site .brand,
body.menu-open header.site.on-light .brand{color:var(--ivory)!important}
body.menu-open .progress{display:none}
body.menu-open .mobile-cta{opacity:0;pointer-events:none}
body.menu-open header.site .brand{color:var(--ivory)}

/* --- the booking bar --- */
.mobile-cta{
  display:none;
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:66;
  align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-radius:12px;
  background:var(--pip);color:#fff;text-decoration:none;
  box-shadow:0 12px 30px rgba(16,17,19,.34);
  font-family:var(--f-util);font-weight:600;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;
  transform:translateY(140%);
  transition:transform .42s cubic-bezier(.16,.84,.3,1);
}
.mobile-cta em{font-style:normal;font-size:1rem;line-height:1}
.mobile-cta{transition:transform .42s cubic-bezier(.16,.84,.3,1),opacity .25s ease}
.mobile-cta.on{transform:none}

@media (max-width:900px){
  .menu-btn{display:flex}
  .cta-book{display:none}
  header.site .bar{padding:12px 20px}
  .brand{font-size:1.1rem}
  .mobile-cta{display:flex}
  footer.site{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (min-width:901px){
  .mobile-menu{display:none!important}
}

/* --- phone rhythm: the desktop measure is too tall to thumb through --- */
@media (max-width:760px){
  section{padding:74px 0}
  section.tight{padding:54px 0}
  section.dark{padding-top:74px}
  .section-head{margin-bottom:24px}
  .hero .wrap{padding-top:16px;padding-bottom:34px;gap:30px}
  .lede{font-size:1.06rem}
  h1,h2,h3,h4{text-wrap:normal}
  h1{letter-spacing:-.022em}
  h3{font-size:1.42rem}
  .pullquote{padding-left:18px;margin:24px 0}
  .grid{gap:16px}
  figure.shot figcaption{font-size:.66rem;padding:9px 12px}

  /* tap targets: text buttons need real height on a phone */
  .btn{padding-top:13px;padding-bottom:13px}
  .card .out,.venture .visit,.vcard .visit,.copybtn{padding-top:11px;padding-bottom:11px}
  .filters{gap:9px}
  .filters button{min-height:44px}
  .kit li{padding:16px 0}
  /* Copy becomes a real chip on a phone — a 33px text link is a poor target */
  .copybtn{
    min-height:44px;padding:0 15px;
    display:inline-flex;align-items:center;
    border:1px solid var(--line-strong);border-radius:8px;
  }
  .copybtn::before,.copybtn::after{display:none}
  .copybtn[data-copied=true]{border-color:var(--pip)}
  /* the plain links inside kit rows get thumb room too */
  .kit li a,.bioblock a{display:inline-block;min-height:34px;padding:6px 0}
  .socials a{width:40px;height:40px}
  .socials svg{width:17px;height:17px}
}

/* the "pending" chips must never widen the page */
.tbd{white-space:normal;display:inline;overflow-wrap:anywhere}


/* ==========================================================================
   AWARDS BAND
   The marks Tim was given are white knockouts with a baked red caption, so
   they only work on a dark ground. Their own plate, never on the ivory.
   ========================================================================== */
section.awards{
  position:relative;
  background:var(--deep);color:var(--ivory);
  padding:6px 0 26px;
}
.hero .wrap{position:relative;z-index:1}

/* the hero's red rule is the divider above the awards — drop it there only */
.hero:has(+ .awards){padding-bottom:0}
section.awards .awards-head{margin-bottom:22px}
section.awards .eyebrow{color:#8A8A90}
section.awards h2{color:var(--ivory);margin-top:6px}

.award-row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:22px 20px;align-items:center;
}
.award{
  display:grid;place-items:center;
  padding:8px;text-decoration:none;
  transition:transform .25s;
}
.award img{
  height:96px;width:auto;max-width:100%;object-fit:contain;
  opacity:.88;transition:opacity .25s,transform .25s;
}
.award:hover,.award:focus-visible{transform:translateY(-3px)}
.award:hover img{opacity:1;transform:scale(1.04)}

@media (max-width:1000px){
  .award-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .award img{height:80px}
}
/* phones: five marks in a two-column grid is a tall, ragged block.
   One swipeable row instead, snapping mark to mark. */
@media (max-width:620px){
  .award-row{
    display:flex;gap:30px;
    overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 24px 10px;margin:0 -24px;
  }
  .award-row::-webkit-scrollbar{display:none}
  /* fade the trailing edge so the strip reads as swipeable */
  .award-row{-webkit-mask-image:linear-gradient(to right,#000 0,#000 84%,transparent 100%);
             mask-image:linear-gradient(to right,#000 0,#000 84%,transparent 100%)}
  .award{flex:0 0 auto;scroll-snap-align:center;padding:4px 0}
  .award img{height:66px}
  section.awards{padding-bottom:20px}
}


/* ==========================================================================
   THE DEAL
   The dark block is itself a card: rounded bottom-left corner, bottom edge
   tilted left, its own corner index. Two more cards step out from under it,
   each inset a little further from the left. Every index rides its card's
   rotation, so the whole stack reads as a hand turned to the left.
   ========================================================================== */
.deal{
  position:relative;
  height:clamp(238px,22.5vw,320px);
  background:var(--surface);
  overflow:hidden;
  z-index:2;
}
.deal-card{
  position:absolute;
  height:720px;
  border-radius:0 0 52px 52px;      /* only the bottom corners ever show */
  box-shadow:0 16px 40px rgba(16,17,19,.16);
}
/* the dark card — the one the hero and the awards sit on */
.deal-0{
  left:-26px;width:calc(100% + 70px);top:-632px;
  background:var(--deep);
  transform:rotate(-2.9deg);
  z-index:3;
  box-shadow:0 18px 46px rgba(16,17,19,.4);
}
/* the two beneath, each further from the left edge and a shade lighter */
.deal-1{
  left:-22px;width:calc(100% + 60px);top:-578px;
  background:#E7E7EA;
  transform:rotate(-2.2deg);
  z-index:2;
}
.deal-2{
  left:-17px;width:calc(100% + 50px);top:-526px;
  background:var(--surface);
  transform:rotate(-1.5deg);
  z-index:1;
}

/* the corner index: C and mark side by side, turned with the card */
.deal-index{
  position:absolute;left:4.4%;bottom:20px;
  display:block;width:66px;height:29px;
}
.deal-index svg{display:block;width:66px;height:29px}
.deal-0 .deal-index{color:var(--surface);left:1.9%;bottom:24px}
.deal-1 .deal-index{color:var(--ink);opacity:.92;left:2.6%;bottom:20px}
.deal-2 .deal-index{color:var(--ink);opacity:1;left:3.4%;bottom:18px}

/* the hand slides up into place the first time it comes into view */
@keyframes deal-in{from{transform:translateY(58px) rotate(-6deg);opacity:.5}}
.js .deal.in .deal-0{animation:deal-in .85s cubic-bezier(.16,.84,.3,1) backwards}
.js .deal.in .deal-1{animation:deal-in .85s cubic-bezier(.16,.84,.3,1) 100ms backwards}
.js .deal.in .deal-2{animation:deal-in .85s cubic-bezier(.16,.84,.3,1) 200ms backwards}

@media (max-width:760px){
  /* the bottom card's shadow reaches 56px past its edge; without that much
     clearance overflow:hidden slices it and the divider ends in a hard line */
  .deal{height:206px}
  .deal-card{border-radius:0 0 38px 38px;box-shadow:0 12px 30px rgba(16,17,19,.15)}
  .deal-0{top:-660px;box-shadow:0 14px 34px rgba(16,17,19,.38)}
  .deal-1{top:-618px}
  .deal-2{top:-578px}
  .deal-index{left:5%;width:46px;height:20px}
  .deal-index svg{width:46px;height:20px}
  .deal-0 .deal-index{left:3%;bottom:18px}
  .deal-1 .deal-index{left:4%;bottom:15px}
  .deal-2 .deal-index{left:5%;bottom:13px}
}
@media (prefers-reduced-motion:reduce){
  .js .deal.in .deal-card{animation:none}
}


/* --- the closing hand: the same device, dealt the other way ---------------- */
.deal-close{background:var(--deep)}
.deal-close{background:var(--surface)}
.deal-close .deal-card{
  left:auto;
  border-radius:52px 52px 0 0;      /* the top corners are what show here */
  box-shadow:0 -14px 40px rgba(16,17,19,.16);
}
/* the dark card sits in front, exactly as it does in the hero */
.deal-close .deal-0{
  right:10px;width:calc(100% + 70px);top:150px;
  background:var(--deep);
  transform:rotate(2.9deg);
  z-index:3;
  box-shadow:0 -16px 44px rgba(16,17,19,.34);
}
.deal-close .deal-1{
  right:6px;width:calc(100% + 60px);top:92px;
  background:#E7E7EA;
  transform:rotate(2.2deg);
  z-index:2;
}
.deal-close .deal-2{
  right:2px;width:calc(100% + 50px);top:38px;
  background:var(--surface);
  transform:rotate(1.5deg);
  z-index:1;
}
/* the opposite corner of a card carries its index upside down */
.deal-close .deal-index{left:auto;bottom:auto;transform:rotate(180deg)}
.deal-close .deal-0 .deal-index{color:var(--surface);right:5.2%;top:24px;opacity:1}
.deal-close .deal-1 .deal-index{color:var(--ink);right:4.4%;top:20px;opacity:.9}
.deal-close .deal-2 .deal-index{color:var(--ink);right:3.8%;top:18px;opacity:.55}

@keyframes deal-in-close{from{transform:translateY(-58px) rotate(6deg);opacity:.5}}
.js .deal-close.in .deal-0{animation:deal-in-close .85s cubic-bezier(.16,.84,.3,1) backwards}
.js .deal-close.in .deal-1{animation:deal-in-close .85s cubic-bezier(.16,.84,.3,1) 100ms backwards}
.js .deal-close.in .deal-2{animation:deal-in-close .85s cubic-bezier(.16,.84,.3,1) 200ms backwards}

@media (max-width:760px){
  .deal-close .deal-index{right:7%}
  .deal-close .deal-card{box-shadow:0 -12px 30px rgba(16,17,19,.15)}
  .deal-close .deal-0{top:146px;box-shadow:0 -12px 32px rgba(16,17,19,.32)}
  .deal-close .deal-1{top:104px}
  .deal-close .deal-2{top:62px}
  .deal-close .deal-0 .deal-index{top:18px}
  .deal-close .deal-1 .deal-index{top:15px}
  .deal-close .deal-2 .deal-index{top:13px}
}

/* ==========================================================================
   THE SERVICE HAND
   Four photographs dealt as a hand. Hover brings a card forward; clicking
   pulls it out to full size with its tagline.
   ========================================================================== */
.fan{
  position:relative;
  display:flex;justify-content:center;align-items:flex-end;
  padding:34px 0 58px;
}
.fan-card{
  position:relative;flex:0 0 auto;
  width:clamp(154px,17.5vw,242px);
  aspect-ratio:3/4;
  padding:0;border:0;border-radius:12px;
  background:var(--ink);overflow:hidden;cursor:pointer;
  box-shadow:0 16px 38px rgba(16,17,19,.26);
  transform-origin:50% 108%;
  transition:transform .45s cubic-bezier(.16,.84,.3,1),box-shadow .45s;
}
.fan-card + .fan-card{margin-left:clamp(-104px,-7.4vw,-52px)}
.fan-card:nth-child(1){transform:rotate(-12deg)  translateY(18px);z-index:1}
.fan-card:nth-child(2){transform:rotate(-7.2deg) translateY(8px); z-index:2}
.fan-card:nth-child(3){transform:rotate(-2.4deg) translateY(1px); z-index:3}
.fan-card:nth-child(4){transform:rotate(2.4deg)  translateY(1px); z-index:4}
.fan-card:nth-child(5){transform:rotate(7.2deg)  translateY(8px); z-index:5}
.fan-card:nth-child(6){transform:rotate(12deg)   translateY(18px);z-index:6}
.fan-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,.84,.3,1)}

.fan-card:hover,.fan-card:focus-visible{
  transform:rotate(0deg) translateY(-22px) scale(1.05);
  z-index:9;
  box-shadow:0 30px 62px rgba(16,17,19,.4);
}
.fan-card:hover img,.fan-card:focus-visible img{transform:scale(1.04)}

.fan-index{
  position:absolute;z-index:3;
  width:14px;height:32px;color:#fff;opacity:1;
  pointer-events:none;
  filter:drop-shadow(0 1px 3px rgba(8,9,10,.8)) drop-shadow(0 0 8px rgba(8,9,10,.5));
}
.fan-index svg{display:block;width:14px;height:32px;fill:currentColor}
.fan-index.at-tl{left:11px;top:11px}
.fan-index.at-br{right:11px;bottom:11px;transform:rotate(180deg)}
@media (max-width:760px){
  .fan-index{width:10px;height:23px}
  .fan-index svg{width:10px;height:23px}
}

.fan-tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 36px 13px 12px;
  font-family:var(--f-body);font-weight:600;font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;text-align:left;
  background:linear-gradient(to top,rgba(8,9,10,.92),rgba(8,9,10,0));
  opacity:0;transition:opacity .35s ease;
}
.fan-card:hover .fan-tag,.fan-card:focus-visible .fan-tag{opacity:1}

.fan-hint{
  position:absolute;left:0;right:0;bottom:0;width:auto;max-width:none;text-align:center;
  font-family:var(--f-body);font-weight:600;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0;
}

@media (max-width:760px){
  .fan{flex-wrap:wrap;gap:12px;justify-content:flex-start;padding-bottom:44px}
  .fan-card{width:calc(50% - 6px)}
  .fan-card + .fan-card{margin-left:0}
  .fan-card:nth-child(n){transform:none;z-index:auto}
  .fan-card:hover,.fan-card:focus-visible{transform:translateY(-6px) scale(1.02)}
  .fan-tag{opacity:1;font-size:.56rem;letter-spacing:.09em;padding:30px 11px 11px}
  .fan-index.at-br{display:none}
  .fan-index{width:12px;height:27px}
  .fan-index svg{width:12px;height:27px}
}

/* --- the card pulled out of the hand --- */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:clamp(20px,5vw,64px);
  background:rgba(10,11,12,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s ease;
}
.lightbox.open{opacity:1}
.lightbox figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;
  transform:translateY(14px) scale(.98);
  transition:transform .4s cubic-bezier(.16,.84,.3,1);
}
.lightbox.open figure{transform:none}
.lightbox img{
  max-width:min(88vw,760px);max-height:76vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 34px 80px rgba(0,0,0,.6);
}
.lightbox figcaption{
  font-family:var(--f-body);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;text-align:center;
}
.lightbox-close{
  position:absolute;top:clamp(16px,3vw,30px);right:clamp(16px,3vw,30px);
  background:none;border:0;cursor:pointer;padding:6px 2px;
  font-family:var(--f-body);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  border-bottom:2px solid rgba(255,255,255,.5);
}
.lightbox-close:hover{border-bottom-color:#fff}
@media (prefers-reduced-motion:reduce){
  .fan-card,.fan-card img,.lightbox,.lightbox figure{transition:none}
}

/* --- an engraved officer bleeding off the right of a page hero.
       Present enough to read as a figure, quiet enough to stay behind the type. */
.hero-figure{
  position:absolute;
  right:clamp(0px,2.5vw,48px);
  bottom:0;
  height:clamp(300px,38vw,556px);
  width:auto;max-width:none;
  opacity:.86;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 100%),
                     linear-gradient(to top,transparent 0%,#000 9%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 100%),
                     linear-gradient(to top,transparent 0%,#000 9%,#000 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* every page illustration uses the same size, position and weight */
.fig-book{opacity:.74;right:clamp(24px,6vw,116px)}     /* a portrait crop reads lighter than a full figure */

@media (max-width:820px){
  /* phones: anchor the artwork's own left edge to the screen edge so its fade
     renders on-screen, and let it bleed off the right instead */
  .hero-figure{
    height:clamp(320px,105vw,430px);opacity:.46;
    left:0;right:auto;bottom:0;
  }
  .fig-service{transform:translateX(-86px)}
  .fig-speaking{transform:translateX(18px)}
}