/* ==========================================================================
   Homepage. Loads after brand.css, which holds the shared tokens, masthead,
   progress strip, buttons, footer, grain and glass. Everything here is the
   homepage's own: hero, shipped-at bar, sections, cards, stats, path, ask.
   ========================================================================== */
/* hero: a hook slide. Dark, one emphasis, the record set as a ledger */
.hero{background:var(--esp);color:var(--on-dark);padding:clamp(56px,9vw,112px) 0 clamp(52px,8vw,96px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:end}
.hero .label{color:var(--mustard)}
.hero h1{font-size:clamp(52px,7.4vw,92px);line-height:.94;letter-spacing:-.035em;margin:18px 0 26px}
.hero__deck{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--on-dark-mid);max-width:34ch;margin:0 0 34px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__cta-note{margin:14px 0 0;font:400 13px/1.5 var(--t);color:var(--on-dark-mid)}
.band__go:hover .arrow,.pillar__go:hover .arrow{transform:translateX(3px)}
.record{margin:0;border-top:1px solid var(--on-dark-rule)}
.record div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--on-dark-rule)}
.record dt{font:600 13px/1.6 var(--t);letter-spacing:.04em;color:var(--on-dark-mid)}
.record dd{margin:0;font:600 17px/1.35 var(--d)}
.record dd span{display:block;font:400 13.5px/1.4 var(--t);color:var(--on-dark-mid);margin-top:3px}

/* where the work has shipped: monochrome, so the signal colours keep their meaning */
.shipped{border-bottom:1px solid var(--rule)}
.shipped__in{display:flex;align-items:center;gap:clamp(18px,4vw,44px);flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.shipped__list{display:flex;gap:clamp(18px,3.4vw,40px);flex-wrap:wrap;align-items:center}
.ship{position:relative;display:flex;align-items:center;gap:9px;font:600 17px var(--d);letter-spacing:-.01em;color:var(--ink);background:none;border:0;padding:6px 4px;border-radius:10px;cursor:default}
.shipped__list img{width:22px;height:22px;filter:grayscale(1);opacity:.78;mix-blend-mode:multiply}

/* section rhythm */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec + .sec{padding-top:0}
.hd{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px);max-width:760px}
.hd h2{font-size:clamp(34px,4.6vw,52px);line-height:1.02}

/* the handbook: the band, the one line on the page that has to land */
.band{background:var(--esp);color:var(--on-dark);padding:clamp(56px,8vw,96px) 0}
.band__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.band .label{color:var(--on-dark-mid)}
.band h2{font-size:clamp(36px,4.8vw,56px);line-height:1.02;margin-top:14px}
.band p{color:var(--on-dark-mid);margin:0 0 18px;max-width:60ch}
.band__go{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font:600 16px var(--t);color:var(--on-dark);text-decoration:none;border-bottom:2px solid var(--mustard);padding-bottom:4px}

/* the work: three parallel things, so a pillar list with bars rather than numbers */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pillar{background:var(--paper);border:1px solid var(--rule);border-top:5px solid var(--bar);padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px}
.pillar h3{font-size:25px;line-height:1.12}
.pillar p{margin:0;color:var(--mid);font-size:16px}
.pillar__go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font:600 15px var(--t);color:var(--teal);text-decoration:none}

/* audience: real numbers, set large */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.stat{padding:22px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.stat:nth-child(3n+1){border-left:0} .stat:nth-child(-n+3){border-top:0}
.stat__n{font:600 clamp(28px,3vw,38px)/1 var(--d);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.stat__l{font:600 14px/1.35 var(--t);color:var(--mid);margin-top:7px}
.stat__l small{display:block;font:500 12.5px/1.4 var(--t);color:var(--mid);opacity:.85;margin-top:2px}
.note{max-width:62ch;color:var(--mid);margin:22px 0 0}

/* about: prose beside the path. The path is genuinely ordered, so a sequence */
.about{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:start}
.prose p{margin:0 0 18px;max-width:64ch}
.prose a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
.disclaimer{font-size:14px;color:var(--mid)}
.path{background:var(--paper);border:1px solid var(--rule);padding:24px 26px 10px;position:sticky;top:88px}
.path ol{list-style:none;margin:14px 0 0;padding:0}
.path li{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.path li:first-child{border-top:0}
.path time{font:600 15px/1.35 var(--d);color:var(--teal);font-variant-numeric:lining-nums tabular-nums}
.path li.now time{color:var(--sage)}
.path b{font:600 16px/1.3 var(--d)}
.path span{display:block;font-size:13.5px;line-height:1.45;color:var(--mid);margin-top:2px}

/* contact: the CTA block, one ask */
.ask{background:var(--esp);color:var(--on-dark);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(28px,4vw,44px)}
.ask h2{font-size:clamp(30px,3.8vw,44px);line-height:1.05}
.ask p{margin:10px 0 0;color:var(--on-dark-mid)}

@media (max-width:860px){
  .hero__grid,.band__grid,.about{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .path{position:static}
}
@media (max-width:600px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat{border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
  .stat:nth-child(odd){border-left:0} .stat:nth-child(-n+2){border-top:0} .stat:nth-child(3){border-top:1px solid var(--rule)}
  .record div{grid-template-columns:92px 1fr}
}

/* web layer: the homepage's glass, glows and texture (tokens live in brand.css) */
/* texture for every section: grain from the body, a dot grid fading from one corner */
.sec{position:relative;isolation:isolate;overflow:clip}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(34,28,22,.13) 1px,transparent 1.3px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(70% 90% at var(--gx,15%) var(--gy,0%),#000,transparent 72%);
          mask-image:radial-gradient(70% 90% at var(--gx,15%) var(--gy,0%),#000,transparent 72%)}
/* one signal colour per section, as a soft glow behind the glass */
/* glows live on their own layer and fade out towards the section's top and
   bottom edges, so neighbouring sections blend instead of meeting at a seam */
.sec::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(46% 60% at var(--ax,88%) var(--ay,20%),color-mix(in srgb,var(--c) 26%,transparent),transparent 70%),
  radial-gradient(40% 55% at var(--bx,4%) var(--by,80%),color-mix(in srgb,var(--c2,var(--c)) 16%,transparent),transparent 70%);
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
#work{--c:var(--sage);--c2:var(--mustard)}
#audience{--c:var(--teal);--c2:var(--sage);--ax:8%;--ay:30%;--bx:96%;--by:75%;--gx:90%}
#about{--c:var(--mustard);--c2:var(--rust);--ax:92%;--ay:35%}
#contact{--c:var(--mustard);--c2:var(--teal);--ax:50%;--ay:60%}
.sec .label{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:6px 12px 6px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 16%,rgba(251,248,242,.6));color:color-mix(in srgb,var(--c) 55%,var(--ink));
  border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.sec .label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}

/* hero: rounded bottom, grain, dot grid, warm glows with a note of teal */
.hero{position:relative;border-radius:0 0 var(--r-lg) var(--r-lg);margin-top:calc(-1 * var(--masthead-space));padding-top:calc(clamp(56px,9vw,112px) + var(--masthead-space));background:
  radial-gradient(50% 70% at 92% 6%,rgba(225,167,77,.26),transparent 62%),
  radial-gradient(42% 60% at 0% 100%,rgba(199,86,53,.22),transparent 62%),
  radial-gradient(36% 50% at 70% 110%,rgba(20,114,162,.22),transparent 65%),
  var(--grain-light) 0 0/200px 200px,var(--esp)}
.hero::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,167,77,.6),transparent)}
.record{border:1px solid rgba(251,248,242,.14);border-radius:var(--r-md);padding:6px 24px;background:rgba(251,248,242,.06);
  backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 80px -36px rgba(0,0,0,.75)}
.record div:last-child{border-bottom:0}

/* the logo row in a glass pill */
.shipped{border-bottom:0;padding:26px 0 8px}
.shipped__in{width:min(calc(100% - 2*var(--gut)),calc(var(--wrap) - 2*var(--gut)));padding:16px 26px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(14px);box-shadow:var(--sh-1)}

/* the handbook band becomes a rounded inset panel, teal-lit */
.band{background:none;padding:clamp(28px,4vw,48px) 0}
.band .band__grid{width:min(calc(100% - 2*var(--gut)),calc(var(--wrap) - 2*var(--gut)));padding:clamp(36px,5vw,68px);border-radius:var(--r-lg);
  color:var(--on-dark);box-shadow:var(--sh-3);background:
  radial-gradient(55% 90% at 100% 0%,rgba(20,114,162,.36),transparent 62%),
  radial-gradient(45% 80% at 0% 100%,rgba(92,136,100,.22),transparent 62%),
  radial-gradient(rgba(251,248,242,.08) 1px,transparent 1.3px) 0 0/22px 22px,
  var(--grain-light) 0 0/200px 200px,var(--esp)}

/* glass cards, tinted by their own colour */
.pillar{border-radius:var(--r-md);border:1px solid var(--glass-edge);border-top:1px solid var(--glass-edge);position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--bar) 16%,rgba(251,248,242,.72)),rgba(251,248,242,.5) 60%);
  backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1);transition:transform .25s,box-shadow .25s}
.pillar::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--bar) 45%,transparent),transparent 70%);pointer-events:none}
.pillar .label{background:color-mix(in srgb,var(--bar) 18%,rgba(251,248,242,.7));color:color-mix(in srgb,var(--bar) 50%,var(--ink));
  border-color:color-mix(in srgb,var(--bar) 32%,transparent)}
.pillar .label::before{background:var(--bar)}
.pillar .label{align-self:flex-start}   /* cards are flex columns; keep the pill to its text */

/* card top row: the organisation's mark, then its label */
.pillar__top{display:flex;align-items:center;gap:12px;min-height:36px}
/* inside a card the label is plain text beside the mark, so a long label
   wraps within the mark's height and every heading starts at the same line */
.pillar__top .label{flex:1;align-self:center;padding:0;border:0;background:none;border-radius:0;
  font:600 13px/1.35 var(--t);letter-spacing:.02em;color:color-mix(in srgb,var(--bar) 55%,var(--ink))}
.pillar__top .label::before{display:none}
.pillar__logo{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:rgba(251,248,242,.9);border:1px solid var(--glass-edge);box-shadow:0 2px 6px -2px rgba(36,27,20,.18)}
.pillar__logo img{width:22px;height:22px;object-fit:contain}
.pillar__logo--icon{color:color-mix(in srgb,var(--bar) 70%,var(--ink))}
.pillar__logo--icon svg{width:20px;height:20px}

/* hover: the whole card takes a light wash of its own colour. The wash sits
   behind the text so the words keep their colour. */
.pillar{isolation:isolate}
/* the wash grows out of the top-right corner, where the card's light sits:
   a circle centred on that corner scales up until it covers the card */
.pillar::before{content:"";position:absolute;right:0;top:0;z-index:-1;pointer-events:none;width:360%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--bar) 24%,transparent) 0%,color-mix(in srgb,var(--bar) 14%,transparent) 35%,color-mix(in srgb,var(--bar) 11%,transparent) 70%,transparent 100%);   /* soft leading edge while it grows */
  transform:translate(50%,-50%) scale(0);opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .25s}
.pillar::after{z-index:-1}
.pillar:hover::before,.pillar:focus-within::before{transform:translate(50%,-50%) scale(1);opacity:1}
.pillar:hover,.pillar:focus-within{border-color:color-mix(in srgb,var(--bar) 45%,rgba(255,255,255,.7))}
@media (prefers-reduced-motion:reduce){ .pillar::before{transition:opacity .2s;transform:translate(50%,-50%) scale(1)} }
.pillar:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-2)}
.stats{border-radius:var(--r-md);border:1px solid var(--glass-edge);overflow:hidden;background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.stat{--c:var(--teal)}   /* one colour for the section */
.stat__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,rgba(251,248,242,.85));border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
  color:color-mix(in srgb,var(--c) 75%,var(--ink))}
.stat__ic img,.stat__ic svg{width:20px;height:20px;display:block}
.stat__ic img{filter:grayscale(1) contrast(1.1)}
.stat__ic--brand{background:rgba(251,248,242,.96)}
.stat__ic--brand img{filter:none}   /* LinkedIn and Skool keep their colours */
/* phones: two across leaves too little room beside the icon, so it stacks above the number */
@media (max-width:600px){ .stat{grid-template-columns:1fr;gap:12px;padding:18px 16px;align-items:start;align-content:start} .stat__ic{width:34px;height:34px;border-radius:10px} }
.path{border-radius:var(--r-md);border:1px solid var(--glass-edge);background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-2)}
.path time{justify-self:start;height:max-content;padding:2px 8px;border-radius:999px;font-size:13.5px;
  background:color-mix(in srgb,var(--teal) 14%,transparent)}
.path li.now time{background:color-mix(in srgb,var(--sage) 18%,transparent)}
.ask{border-radius:var(--r-lg);box-shadow:var(--sh-3);background:
  radial-gradient(60% 130% at 100% 50%,rgba(225,167,77,.28),transparent 62%),
  radial-gradient(40% 90% at 0% 0%,rgba(20,114,162,.22),transparent 62%),
  radial-gradient(rgba(251,248,242,.08) 1px,transparent 1.3px) 0 0/22px 22px,
  var(--grain-light) 0 0/200px 200px,var(--esp)}

/* entrances: the hero settles in on load; later sections ease up as they
   scroll into view, starting faint rather than invisible */
@media (prefers-reduced-motion:no-preference){
  .hero__grid > *{animation:enter .8s cubic-bezier(.2,.7,.2,1) both}
  .hero__grid > .record{animation-delay:.12s}
  @keyframes enter{from{opacity:0;transform:translateY(12px)}}
  @supports (animation-timeline:view()){
    .hd,.pillar,.stats,.note,.prose,.path,.ask,.band__grid > *{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes rise{from{opacity:.45;transform:translateY(20px)}}
  }
}
@media (prefers-reduced-motion:reduce){ .pillar{transition:none} .pillar:hover{transform:none} }
@media (max-width:600px){ .shipped__in{border-radius:var(--r-md)} }


/* where the work has shipped: one compact line of names, logos regaining
   their colour on hover. The detail lives in the career path, not here. */
.shipped__in{justify-content:center;column-gap:clamp(20px,3vw,36px)}
.shipped__list{gap:clamp(14px,2.2vw,28px)}
.ship{font-size:16px;cursor:default}
.ship img{transition:filter .2s,opacity .2s}
.ship:hover img{filter:none;opacity:1}
/* six names and the label only share a line on wide screens; below that the
   label stays for screen readers and the names centre on one line */
@media (max-width:1180px){ .shipped .label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} }
@media (prefers-reduced-motion:reduce){ .ship img{transition:none} }

/* career path: company, role, then what the work was */
.path em{display:block;font:600 13px/1.4 var(--t);font-style:normal;color:var(--ink);margin-top:3px}
/* the path shows years and names at rest; an entry's role and detail open on
   hover or keyboard focus. The current role stays open while nothing else is.
   Touch screens have no hover, so they always show everything. */
.path .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1)}
.path .more > div{overflow:hidden;min-height:0}
.path li:hover .more,.path li:focus-visible .more,
.path ol:not(:hover):not(:focus-within) li.now .more{grid-template-rows:1fr}
.path li{cursor:default}
.path li:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:8px}
@media (hover:none){ .path .more{grid-template-rows:1fr} }
@media (prefers-reduced-motion:reduce){ .path .more{transition:none} }

/* audience heading row. The heading spans the first two stat columns and the
   total sits over the third, lined up with that column's content edge (the
   22px cell padding). Label above number mirrors the pill above the heading,
   and the number shares the heading's baseline. */
.hd--split{max-width:none;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:last baseline;gap:12px 0}
.hd__main{display:grid;gap:12px}
.total{display:grid;justify-items:start;gap:6px;padding-left:82px}   /* level with the third column's numbers: 22 padding + 44 icon + 16 gap */
.total__n{font:600 clamp(34px,4vw,48px)/1 var(--d);letter-spacing:-.025em;color:var(--sage);
  font-variant-numeric:lining-nums tabular-nums;min-width:6.2ch}
.total__l{font:600 13px var(--t);letter-spacing:.03em;color:color-mix(in srgb,var(--sage) 70%,var(--ink))}
@media (min-width:601px){ .total{position:relative;top:8px} }   /* a touch below the heading's baseline */
@media (max-width:600px){ .hd--split{grid-template-columns:1fr} .total{padding-left:0} }