/* services: a typographic header with the page's own table of contents */
.shead{padding-top:calc(var(--header-h) + clamp(56px,8vw,128px));background:var(--obsidian)}
.shead__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,7vw,140px);align-items:end}
.shead__lead .display{font-size:calc(clamp(2.7rem,6vw,5.5rem) * var(--k))}
.shead__lead .display em{display:block}
.shead__lead .lede{margin-top:clamp(22px,2.6vw,36px)}
.sindex{display:grid;border-top:1px solid var(--hair-d)}
/* each row flexes: when the label has no room beside the title, it drops below it instead of being pushed off the edge */
.sindex a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:clamp(16px,1.7vw,22px) 0;border-bottom:1px solid var(--hair-d);color:var(--cream-2);transition:color .2s ease}
.sindex .numeral{flex:0 0 calc(3rem - 16px);font-size:1.2rem;transition:transform .4s var(--ease-out),color .2s ease}
.sindex b{flex:1 1 10ch;min-width:0;overflow-wrap:anywhere;font-family:var(--disp);font-weight:var(--h3-w);font-size:calc(clamp(1.3rem,2vw,1.75rem) * var(--k));letter-spacing:var(--h-track);line-height:1.1}
.sindex small{margin-left:auto;white-space:nowrap;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--cream-3)}
/* the title never moves, so it can never reach the label; the numeral moves inside its own 3rem column */
.sindex a:active .numeral{transform:translateX(3px)}
/* mouse screens only: the title slides 8px on hover, so it keeps 8px of its own room and a wider gap to the label */
@media (hover:hover) and (pointer:fine){.sindex a:hover{color:var(--cream)}.sindex a:hover .numeral{transform:translateX(6px);color:var(--gold-hi)}}
.shead__facts{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(48px,6vw,96px);padding-block:clamp(22px,2.4vw,30px);border-top:1px solid var(--hair-d)}
.shead__facts dl{display:flex;flex-wrap:wrap;gap:12px clamp(28px,4vw,64px)}
.shead__facts dl > div{display:flex;align-items:baseline;gap:12px}
.shead__facts dt{font-family:var(--disp);font-weight:var(--disp-w);font-size:calc(clamp(1.6rem,2.4vw,2.1rem) * var(--k));letter-spacing:var(--h-track);line-height:1;color:var(--cream)}
.shead__facts dd{font-weight:500;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}
.shead__built{max-width:72ch;font-size:.9375rem;line-height:1.55;color:var(--cream-2)}
.shead__built .meta{display:block;margin-bottom:6px}

/* sticky format bar */
.subnav{position:sticky;top:var(--header-h);z-index:60;background:rgba(12,11,9,.78);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-block:1px solid var(--hair-d)}
.subnav__row{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav__row::-webkit-scrollbar{display:none}
.subnav a{position:relative;flex:none;padding:17px 0;font-weight:500;font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--cream-3);white-space:nowrap;transition:color .2s ease}
.subnav a[aria-current]{color:var(--gold-hi)}
.subnav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold)}
.subnav__cta{margin-left:auto;color:var(--cream) !important}
@media (hover:hover) and (pointer:fine){.subnav a:hover{color:var(--cream)}}
@media (prefers-reduced-transparency:reduce){.subnav{background:var(--obsidian);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* shared format pieces */
.fmt{scroll-margin-top:calc(var(--header-h) + 52px);padding-block:var(--section)}
.fmt__label{display:flex;align-items:baseline;gap:14px;font-weight:600;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(18px,2vw,26px)}
.on-ivory .fmt__label{color:var(--gold-ink)}
.fmt__label .numeral{font-size:1.5rem;letter-spacing:0;text-transform:none}
.fmt__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start}
.fmt__body,.fmt__panel,.fmt__card,.fmt__after{display:grid;gap:clamp(22px,2.4vw,30px);justify-items:start}
.ticks{display:grid;gap:12px;border-top:1px solid var(--hair-d);padding-top:clamp(18px,2vw,24px);width:100%}
.ticks li{position:relative;padding-left:26px;color:var(--cream)}
.ticks li::before{content:"";position:absolute;left:0;top:.78em;width:12px;height:1px;background:var(--gold)}
.on-ivory .ticks{border-color:var(--hair-l)}
.on-ivory .ticks li{color:var(--ink)}
.on-ivory .ticks li::before{background:var(--gold-ink)}
.bestfor{font-size:.9375rem;line-height:1.55;color:var(--cream-2);max-width:56ch}
.bestfor .meta{display:block;margin-bottom:4px}
.on-ivory .bestfor{color:var(--ink-2)}
.fmt__pull{font-family:var(--disp);font-weight:var(--h3-w);font-size:calc(clamp(1.45rem,2.4vw,2.1rem) * var(--k));line-height:1.14;letter-spacing:var(--h-track);text-wrap:balance;color:var(--cream)}
.on-ivory .fmt__pull{color:var(--ink)}

/* I: the wide room, then the words */
.fmt--one{padding-top:clamp(40px,5vw,84px)}
.fmt__wide{aspect-ratio:21/9}
.fmt--one .fmt__cols{margin-top:clamp(40px,5vw,88px)}
.fmt--one .h1{max-width:none}
.fmt--one .fmt__cols{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}

/* testimonial between I and II */
.voice{padding-block:clamp(8px,2vw,32px) var(--section)}
.voice__quote{max-width:1000px;margin-left:auto;padding-left:clamp(0px,8vw,160px)}
.voice__quote blockquote{font-size:calc(clamp(1.5rem,2.9vw,2.6rem) * var(--k))}

/* II: the talk, on paper */
.fmt__cols--even{align-items:start}
.fmt__lead{margin-top:clamp(22px,2.4vw,32px)}
.fmt__aside{display:grid;gap:clamp(26px,3vw,40px);padding-top:clamp(0px,3.4vw,58px)}
.frameworks{border-top:1px solid var(--hair-l)}
.frameworks li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding-block:18px;border-bottom:1px solid var(--hair-l)}
.frameworks .numeral{font-size:1.1rem;padding-top:.2em}
.frameworks h3{font-family:var(--disp);font-weight:var(--h3-w);font-size:calc(1.3rem * var(--k));letter-spacing:-.012em;line-height:1.2;color:var(--ink)}
.frameworks p{margin-top:4px;color:var(--ink-2);font-size:.9688rem;line-height:1.55}
.fmt__band{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end;margin-top:clamp(48px,6vw,104px)}
.fmt__inset{aspect-ratio:16/9}

/* III: a tall stage beside the host */
.fmt--three{padding-block:0;background:var(--carbon)}
.fmt__split{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);align-items:stretch}
.fmt__tall{min-height:100%;min-width:0}
.fmt__panel{min-width:0}
.fmt__tall .frame{height:100%;min-height:clamp(520px,46vw,760px)}
.fmt__panel{align-content:center;padding:var(--section) var(--gutter) var(--section) clamp(32px,6vw,112px);max-width:820px}
.fmt--three .h1{font-size:calc(clamp(2.1rem,4.2vw,3.7rem) * var(--k))}

/* IV: the photograph with the words laid over its edge */
.fmt__overlap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
.fmt__photo{grid-column:1 / span 8;grid-row:1}
.fmt__photo .frame{aspect-ratio:5/4}
.fmt__card{grid-column:7 / span 6;grid-row:1;z-index:1;background:var(--surface);padding:clamp(28px,4vw,64px);box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}

/* custom */
.custom__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,120px);align-items:start}
.custom__grid .arrow-link{margin-top:14px}

/* where it fits: one evening, left to right; the gold rule is the clock */
.night__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,6vw,120px);align-items:end}
.night__head .body{max-width:44ch}
.night__line{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(40px,5vw,80px);padding-top:34px}
.night__line::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:linear-gradient(90deg,var(--gold-ink),var(--gold-ink) 80%,rgba(125,95,28,0))}
.night__line li{position:relative;display:grid;gap:8px;align-content:start;min-width:0}
.night__line li::before{content:"";position:absolute;left:0;top:-34px;width:11px;height:11px;border-radius:50%;background:var(--ivory);border:1px solid var(--gold-ink)}
.night__line li:nth-child(4)::before{background:var(--gold-ink)}
.night__line .meta{color:var(--gold-ink)}
.night__line h3{font-family:var(--disp);font-weight:var(--h3-w);font-size:calc(clamp(1.15rem,1.5vw,1.35rem) * var(--k));letter-spacing:-.012em;line-height:1.2;color:var(--ink);text-wrap:balance}
.night__line p{font-size:.9688rem;line-height:1.55;color:var(--ink-2)}
.night__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:clamp(40px,4.4vw,64px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--hair-l)}
.night__foot .body{max-width:60ch}

/* close */
.sclose{padding-block:clamp(110px,14vw,220px)}
.sclose .display{font-size:calc(clamp(2.5rem,5.8vw,5.2rem) * var(--k));max-width:13ch}

@media (max-width:900px){
  .shead__grid,.shead__facts,.fmt__cols,.fmt__band,.custom__grid,.fmt--one .fmt__cols{grid-template-columns:1fr}
  .fmt__photo .frame{aspect-ratio:3/2}
  .night__head{grid-template-columns:1fr}
  .night__line{grid-template-columns:1fr;gap:28px;padding-top:0;padding-left:30px}
  .night__line::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:var(--gold-ink)}
  .night__line li::before{left:-30px;top:5px}
  .shead__lead .display{max-width:none}
  .fmt__wide{aspect-ratio:4/3}
  .fmt__split{grid-template-columns:minmax(0,1fr)}
  .fmt__tall .frame{min-height:0;height:auto;width:100%;aspect-ratio:4/5}
  .fmt__panel{padding:clamp(48px,10vw,80px) var(--gutter);max-width:none}
  .fmt__overlap{display:block}
  .fmt__card{margin:-48px 0 0 clamp(12px,4vw,40px);position:relative}
  .voice__quote{padding-left:0}
  .fmt__aside{padding-top:0}
  .subnav__cta{display:none}
  .subnav__row{padding-right:var(--gutter)}
}
.fmt--two .h1{font-size:calc(clamp(2.3rem,4.4vw,4rem) * var(--k))}
.fmt__more{margin-left:clamp(16px,2vw,28px)}

.shead__photo{margin-top:clamp(36px,4.5vw,72px)}
.shead__photo img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:60% 40%;display:block}
@media (max-width:900px){.shead__photo img{aspect-ratio:3/2}}