/* ==========================================================================
   Performance Management Advisors
   --------------------------------------------------------------------------
   Visual system: "the route". The logo holds a dashed switchback climbing
   between two peaks — a route has a start, waypoints, elevation and a summit,
   which is the shape of a transformation mandate. That becomes the graphic
   language: route lines, waypoint markers, and a ridgeline traced from the
   company's own photograph (assets/brand/skyline.svg).

   Archivo carries display and interface. Newsreader italic appears only for
   Bernhard Brandl's first-person statements, so the serif marks a voice
   rather than decorating a heading.
   ========================================================================== */

/* ---------- Faces ---------------------------------------------------------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;
  src:url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens --------------------------------------------------------- */
:root{
  /* Three steps of navy so dark sections layer instead of reading as one fill */
  --navy:#023047;
  --deep:#021a26;
  --mid:#063d57;
  --line-dark:#124459;

  --paper:#f3f5f6;
  --paper-2:#e7ebec;
  --white:#fff;
  --rule:#cfd7da;
  --rule-soft:#e0e6e8;

  --ink:#022435;
  --muted:#496372;
  --on-dark:#e6eef2;
  --on-dark-muted:#a6bcc7;

  --gold:#ecc812;
  --gold-deep:#8a7008;

  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --voice:'Newsreader',Georgia,serif;

  --page:1440px;
  --edge:clamp(20px,4vw,64px);
  --gap:clamp(16px,1.6vw,26px);

  --s-sm:clamp(52px,5vw,78px);
  --s-md:clamp(76px,7.5vw,120px);
  --s-lg:clamp(104px,10vw,168px);

  --ease:cubic-bezier(.22,.68,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow:0 1px 2px rgba(2,36,53,.05),0 12px 28px -10px rgba(2,36,53,.16);
  --shadow-lg:0 2px 4px rgba(2,36,53,.06),0 30px 60px -22px rgba(2,36,53,.3);
}

/* ---------- Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Motion is opt-in per element and only ever transform/opacity. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,.ln > span{opacity:1!important;transform:none!important}
  .route__draw{stroke-dashoffset:0!important}
}

/* ---------- Frame ---------------------------------------------------------- */
.page{max-width:var(--page);margin-inline:auto;padding-inline:var(--edge)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

/* ---------- Type roles ----------------------------------------------------- */
.display{font-size:clamp(36px,2rem + 2.6vw,74px);font-weight:600;line-height:1.03;letter-spacing:-.032em}
.h2{font-size:clamp(27px,1.6rem + 1.5vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.024em}
.h3{font-size:clamp(19px,1.1rem + .55vw,25px);font-weight:600;line-height:1.24;letter-spacing:-.014em}
.lead{font-size:clamp(17.5px,1.02rem + .42vw,21px);line-height:1.52}
.prose{max-width:60ch}
.prose p + p{margin-top:.95em}

/* A technical annotation, the way a drawing is labelled. Used on figures,
   waypoints and data only — never stacked above a heading as an eyebrow. */
.annot{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.annot--dark{color:var(--on-dark-muted)}
.annot--gold{color:var(--gold)}

.cap{font-size:12.5px;line-height:1.45;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.cap--dark{color:var(--on-dark-muted)}

/* Bernhard's own words. The only serif on the site. */
.voice{font-family:var(--voice);font-style:italic;font-weight:300;letter-spacing:-.005em}

/* ---------- Actions -------------------------------------------------------- */
.btn{
  --bg:var(--navy);--fg:#fff;--bd:var(--navy);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  font-size:14px;font-weight:600;line-height:1;
  padding:16px 24px;border:1px solid var(--bd);border-radius:2px;
  background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
/* The fill sweeps in from the left rather than flipping colour. */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--deep);border-color:var(--gold)}
.btn:active{transform:translateY(1px)}
.btn__arw{width:15px;height:9px;flex:none;transition:transform .45s var(--ease)}
.btn:hover .btn__arw{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--rule)}
.btn--ghost:hover{color:var(--deep)}
.btn--onDark{--bg:transparent;--fg:var(--on-dark);--bd:var(--line-dark)}
.btn--onDark:hover{color:var(--deep)}

.lnk{position:relative;display:inline-block;font-size:14px;font-weight:600;padding-bottom:4px}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.lnk:hover::after{transform:scaleX(1)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:12px 18px;font-size:14px;font-weight:600}
.skip:focus{left:14px;top:14px}

/* ---------- Entrance ------------------------------------------------------- */
/* Selective: section openers and media, never every element on the page. */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

.ln{display:block;overflow:hidden}
.js .ln > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.ln > span{display:block}
.lit .ln > span{transform:none}
.lit .ln:nth-child(2) > span{transition-delay:.09s}
.lit .ln:nth-child(3) > span{transition-delay:.18s}

.js .hero__route{clip-path:inset(0 100% 0 0);transition:clip-path 2.6s var(--ease-out) .45s}
.lit .hero__route{clip-path:inset(0 0 0 0)}

/* ==========================================================================
   Masthead
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:76px;transition:min-height .45s var(--ease)}
.nav__set{display:flex;align-items:center;gap:clamp(20px,2.4vw,38px)}
.nav__l{position:relative;font-size:14px;font-weight:500;color:var(--on-dark);padding-block:6px}
.nav__l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__l:hover::after,.nav__l[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{padding:12px 18px;font-size:13px}
.nav.stuck{background:rgba(2,26,38,.94);box-shadow:0 1px 0 rgba(18,68,89,.85)}
@supports (backdrop-filter:blur(8px)){
  .nav.stuck{background:rgba(2,26,38,.74);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
}
.nav.stuck .nav__in{min-height:64px}
.nav--solid{background:var(--deep)}

.brand{display:inline-flex;align-items:center;gap:11px}
.brand__g{width:30px;height:auto;flex:none}
.brand__t{font-size:13.5px;font-weight:700;line-height:1.2;color:#fff}
/* The company claim, carried under the wordmark in place of the location.
   Reduced to the three terms the original site set in emphasis, so it stays
   narrower than the wordmark above it and needs no second cut for small
   screens. */
.brand__claim{display:block;font-weight:400;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-dark-muted);margin-top:4px;white-space:nowrap}

.burger{display:none;width:42px;height:34px;background:none;border:0;cursor:pointer;
  padding:0;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}
.burger i{display:block;width:22px;height:1.5px;background:var(--on-dark);
  transition:transform .4s var(--ease),opacity .2s linear,width .4s var(--ease)}
.burger i:nth-child(2){width:15px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-3.75px) rotate(-45deg);width:22px}

.drawer{display:none}
@media (max-width:900px){
  .nav__set{display:none}
  .burger{display:flex}
  .drawer{display:block;position:fixed;inset:0;z-index:55;background:var(--deep);
    padding:100px var(--edge) 40px;opacity:0;visibility:hidden;
    transition:opacity .35s var(--ease),visibility .35s}
  .drawer.open{opacity:1;visibility:visible}
  .d__l{display:block;font-size:clamp(28px,8vw,40px);font-weight:600;letter-spacing:-.025em;
    color:var(--on-dark);padding:18px 0;border-bottom:1px solid var(--line-dark);
    opacity:0;transform:translateY(14px);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
  .drawer.open .d__l{opacity:1;transform:none}
  .drawer.open .d__l:nth-of-type(2){transition-delay:.06s}
  .drawer.open .d__l:nth-of-type(3){transition-delay:.12s}
  .drawer__f{margin-top:34px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;
    opacity:0;transition:opacity .5s var(--ease-out) .2s}
  .drawer.open .drawer__f{opacity:1}
  body.lock{overflow:hidden}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;min-height:min(100svh,960px);display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--deep);color:var(--on-dark);overflow:hidden;isolation:isolate}
.hero__pic{position:absolute;inset:0;z-index:-3}
.hero__pic img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;
  transform:scale(1.06);transition:transform 1.8s var(--ease-out)}
.lit .hero__pic img{transform:scale(1)}
/* Directional grade for legibility, then a vignette for depth. */
.hero__pic::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(2,26,38,.95) 0%,rgba(2,26,38,.84) 32%,rgba(2,26,38,.3) 64%,rgba(2,26,38,.45) 100%),
    radial-gradient(120% 90% at 30% 98%,rgba(2,26,38,.8),transparent 62%);
}
.hero__route{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}
.hero__in{position:relative;padding-top:clamp(140px,18vh,200px)}
.hero__body{grid-column:1/8}
.hero h1{color:#fff;margin-bottom:26px}
.hero__lead{max-width:44ch;color:var(--on-dark);font-size:clamp(17px,1rem + .35vw,20px);line-height:1.55}
.hero__act{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:14px}

/* An index pinned to the foot of the hero: it carries real information and
   gives the composition a base line instead of empty photograph. */
.hero__foot{position:relative;margin-top:clamp(44px,6vh,86px);border-top:1px solid rgba(230,238,242,.2)}
.hero__idx{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap)}
.hero__idx a{display:block;padding:20px 0 26px;position:relative;color:var(--on-dark)}
.hero__idx a + a{border-left:1px solid rgba(230,238,242,.15);padding-left:clamp(16px,2vw,30px)}
.hero__idx a::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--gold);
  transition:width .55s var(--ease)}
.hero__idx a:hover::before{width:100%}
.hero__idx b{display:block;font-size:clamp(15px,.9rem + .25vw,17.5px);font-weight:600;letter-spacing:-.012em}
.hero__idx span{display:block;margin-top:6px}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero__body{grid-column:1/13}
  .hero__in{padding-top:clamp(112px,20vh,150px)}
  .hero__idx{grid-template-columns:1fr}
  .hero__idx a + a{border-left:0;border-top:1px solid rgba(230,238,242,.15);padding-left:0}
  .hero__idx a{padding-block:15px}
  .hero__pic img{object-position:62% 40%}
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro{position:relative;padding-block:var(--s-md);background:var(--paper)}
.intro__grid{align-items:start}
.intro__say{grid-column:1/7}
.intro__say .h2{margin-bottom:22px}
.intro__say .prose{color:var(--muted)}
.intro__card{grid-column:8/13;background:var(--white);border:1px solid var(--rule-soft);
  box-shadow:var(--shadow);padding:clamp(22px,2.2vw,32px)}
.intro__card > div{padding-block:14px;border-bottom:1px solid var(--rule-soft)}
.intro__card > div:first-child{padding-top:0}
.intro__card > div:last-child{border-bottom:0;padding-bottom:0}
.intro__card dt{font-size:12.5px;color:var(--muted)}
.intro__card dd{margin:4px 0 0;font-size:15.5px;font-weight:600;letter-spacing:-.005em}
@media (max-width:900px){
  .intro__say,.intro__card{grid-column:1/13}
  .intro__card{margin-top:34px}
}

/* ==========================================================================
   Disciplines — sticky media, changing content
   ========================================================================== */
.disc{position:relative;background:var(--deep);color:var(--on-dark);padding-block:var(--s-md) var(--s-lg)}
.disc__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:22px;margin-bottom:clamp(38px,4vw,62px);border-bottom:1px solid var(--line-dark)}
.disc__head h2{color:#fff}
.disc__stage{grid-column:1/6;position:sticky;top:112px;align-self:start}
.disc__frame{position:relative;aspect-ratio:4/5;background:var(--mid);overflow:hidden}
.disc__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity .7s var(--ease),transform 1.3s var(--ease-out)}
.disc__frame img.on{opacity:1;transform:scale(1)}
.disc__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,26,38,.1),rgba(2,26,38,.52))}
.disc__meter{margin-top:16px;display:flex;align-items:center;gap:16px}
.disc__bar{flex:1;height:2px;background:rgba(230,238,242,.18);position:relative;overflow:hidden}
.disc__bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;
  transform:scaleX(.3333);transition:transform .65s var(--ease)}

.disc__list{grid-column:7/13}
.disc__item{padding-block:clamp(46px,5vw,86px);border-top:1px solid var(--line-dark)}
.disc__item:first-child{border-top:0;padding-top:0}
.disc__no{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.disc__no b{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums}
.disc__no i{display:block;height:1px;flex:1;background:var(--line-dark)}
.disc__item h3{color:#dfe9ee;margin-bottom:14px;transition:color .5s var(--ease)}
.disc__item.cur h3{color:#fff}
.disc__item > p{color:var(--on-dark-muted);max-width:46ch}
.disc__spec{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
.disc__spec li{font-size:14px;line-height:1.4;padding-block:9px;
  border-top:1px solid var(--line-dark);color:var(--on-dark)}
.disc__act{margin-top:26px}
@media (max-width:900px){
  .disc__stage{position:static;grid-column:1/13;margin-bottom:30px}
  .disc__list{grid-column:1/13}
  .disc__frame{aspect-ratio:3/2}
  .disc__spec{grid-template-columns:1fr}
}

/* ==========================================================================
   Operational band
   ========================================================================== */
.band{position:relative;background:var(--deep);padding-block:0}
.band__fig{position:relative;line-height:0}
/* No object-fit cropping: the image is shown at the ratio it was cut to, so
   nothing is stretched and nothing is scaled past its source width. */
.band__fig img{width:100%;height:auto}
.band__note{position:absolute;left:0;right:0;bottom:0;line-height:1.45;
  padding:70px clamp(18px,2.2vw,32px) clamp(16px,2vw,26px);
  background:linear-gradient(0deg,rgba(2,26,38,.92),rgba(2,26,38,.55) 45%,transparent)}
.band__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;align-items:flex-end}
.band__row p{color:#fff;font-size:clamp(16px,.95rem + .4vw,21px);font-weight:500;
  letter-spacing:-.012em;max-width:34ch}
@media (max-width:700px){
  .band__note{padding-top:46px}
  .band__row{gap:6px}
}

/* ==========================================================================
   Approach
   ========================================================================== */
.approach{position:relative;background:var(--paper-2);padding-block:var(--s-md);overflow:hidden}
.approach__grid{align-items:start;position:relative}
.approach__q{grid-column:1/8}
.approach__q blockquote{font-size:clamp(21px,1.2rem + 1.15vw,34px);line-height:1.34;letter-spacing:-.008em}
.approach__q .mk{background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-size:100% .3em;background-position:0 .78em}
.approach__q cite{display:block;margin-top:24px;font-style:normal}
.approach__body{grid-column:9/13;color:var(--muted)}
.approach__body p + p{margin-top:.9em}
.approach__body .lnk{margin-top:22px;color:var(--ink)}
.approach__sky{position:absolute;left:0;right:0;bottom:-1px;height:clamp(70px,9vw,130px);
  color:rgba(2,48,71,.13);pointer-events:none}
.approach__sky svg{width:100%;height:100%}
@media (max-width:900px){
  .approach__q,.approach__body{grid-column:1/13}
  .approach__body{margin-top:32px}
}

/* ==========================================================================
   Pit Stop
   ========================================================================== */
.pit{position:relative;background:var(--navy);color:var(--on-dark);padding-block:var(--s-md);overflow:hidden}
.pit::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 70% at 80% 10%,rgba(236,200,18,.11),transparent 62%)}
.pit__grid{align-items:center;position:relative}
.pit__poster{grid-column:1/5}
.pit__poster img{width:100%;height:auto;box-shadow:var(--shadow-lg)}
.pit__body{grid-column:6/13}
.pit__body h2{color:#fff;margin:14px 0 20px}
.pit__body .prose{color:var(--on-dark-muted);max-width:52ch}
.pit__act{margin-top:28px}
/* The changeover itself, drawn as a process line. */
.pit__proc{grid-column:1/13;margin-top:clamp(40px,4vw,62px);border-top:1px solid var(--line-dark);padding-top:26px}
.pit__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.pit__step{position:relative;padding-top:22px}
.pit__step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line-dark)}
.pit__step::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--gold);
  transition:width .9s var(--ease)}
.pit__proc.in .pit__step::after{width:100%}
.pit__proc.in .pit__step:nth-child(2)::after{transition-delay:.15s}
.pit__proc.in .pit__step:nth-child(3)::after{transition-delay:.3s}
.pit__proc.in .pit__step:nth-child(4)::after{transition-delay:.45s}
.pit__step b{display:block;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:6px}
.pit__step span{display:block;font-size:13.5px;line-height:1.45;color:var(--on-dark-muted)}
@media (max-width:1000px){.pit__steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
@media (max-width:900px){
  .pit__poster{grid-column:1/13;max-width:270px;margin-bottom:34px}
  .pit__body{grid-column:1/13}
}

/* ==========================================================================
   Founder
   ========================================================================== */
.founder{background:var(--paper);padding-block:var(--s-md)}
.founder__grid{align-items:end}
.founder__pic{grid-column:1/6;position:relative;isolation:isolate}
.founder__pic img{width:100%;height:auto}
/* A tinted plate the portrait overlaps — foreground against background. */
.founder__pic::before{content:"";position:absolute;left:-20px;right:32%;top:46px;bottom:-20px;
  background:var(--paper-2);z-index:-1}
.founder__lead{grid-column:7/13;padding-bottom:4px}
.founder__lead h2{margin-bottom:18px}
.founder__lead .prose{color:var(--muted)}
.founder__track{margin-top:clamp(34px,3.4vw,50px);padding-top:26px;border-top:1px solid var(--rule)}
.founder__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.founder__cols dt{margin-bottom:11px}
.founder__cols dd{margin:0;font-size:15px;line-height:1.5;font-weight:500}
.founder__cols dd + dd{margin-top:3px}
.founder__act{margin-top:30px}
@media (max-width:900px){
  .founder__pic{grid-column:1/13;max-width:400px}
  .founder__pic::before{display:none}
  .founder__lead{grid-column:1/13;margin-top:36px}
  .founder__cols{grid-template-columns:1fr;gap:24px}
}

/* ==========================================================================
   Closing
   ========================================================================== */
.close{position:relative;background:var(--deep);color:var(--on-dark);padding-block:var(--s-md);overflow:hidden}
.close__sky{position:absolute;left:0;right:0;top:0;height:clamp(90px,11vw,150px);
  color:rgba(236,200,18,.18);transform:scaleX(-1);pointer-events:none}
.close__sky svg{width:100%;height:100%}
.close__grid{position:relative;align-items:end}
.close__say{grid-column:1/8}
.close__say h2{color:#fff;margin-bottom:18px}
.close__say p{color:var(--on-dark-muted);max-width:44ch}
.close__act{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.close__side{grid-column:9/13}
.close__side div{padding-block:15px;border-top:1px solid var(--line-dark)}
.close__side div:last-child{border-bottom:1px solid var(--line-dark)}
.close__side dd{margin:5px 0 0}
@media (max-width:900px){
  .close__say,.close__side{grid-column:1/13}
  .close__side{margin-top:40px}
}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.top{background:var(--deep);color:var(--on-dark);position:relative;overflow:hidden;
  padding-block:clamp(120px,14vh,170px) var(--s-sm)}
.top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 100% at 85% 0%,rgba(236,200,18,.08),transparent 60%)}
.top__grid{position:relative}
.top__t{grid-column:1/9}
.top__t h1{color:#fff}
.top__n{grid-column:10/13;align-self:end;padding-bottom:6px}
.top__l{grid-column:1/8;margin-top:22px;color:var(--on-dark-muted);
  font-size:clamp(17.5px,1.02rem + .42vw,21px);line-height:1.52}
@media (max-width:900px){
  .top__t,.top__n,.top__l{grid-column:1/13}
  .top__n{margin-top:16px;padding-bottom:0}
}

.sec{padding-block:var(--s-md);border-top:1px solid var(--rule)}
.sec:first-of-type{border-top:0}
.sec__k{grid-column:1/4}
/* The running head sits in three columns, so it is set smaller than a
   section heading and is allowed to break. */
.sec__k h2{position:sticky;top:104px;font-size:clamp(21px,1.25rem + .9vw,30px);
  line-height:1.16;overflow-wrap:break-word}
.sec__b{grid-column:5/10;max-width:60ch}
.sec__b > p:first-child{font-size:clamp(18px,1.06rem + .45vw,21px);line-height:1.5;margin-bottom:1.1em}
.sec__b p + p{margin-top:.95em}
.sec__b h3{margin-top:1.9em;margin-bottom:.4em}
.sec__f{grid-column:10/13}
.sec__f img{width:100%;height:auto;box-shadow:var(--shadow)}
.sec__f figcaption{margin-top:10px}
.sec__terms{margin-top:1.7em;padding-top:14px;border-top:2px solid var(--gold);
  display:flex;flex-wrap:wrap;gap:0 28px}
.sec__terms li{font-size:15px;font-weight:600;padding-block:6px}
.sec__aside{margin-top:1.9em;padding:clamp(22px,2.2vw,30px);background:var(--white);
  border:1px solid var(--rule-soft);box-shadow:var(--shadow)}
.sec__aside h3{margin-top:0;margin-bottom:.45em}
.sec__aside p + p{margin-top:.9em}
@media (max-width:1050px){
  .sec__k{grid-column:1/13;margin-bottom:16px}
  .sec__k h2{position:static}
  .sec__b{grid-column:1/9}
  .sec__f{grid-column:9/13}
}
@media (max-width:820px){
  .sec__b,.sec__f{grid-column:1/13}
  .sec__f{margin-top:30px;max-width:300px}
}

.bio__pic{grid-column:1/5}
.bio__pic img{width:100%;height:auto;box-shadow:var(--shadow)}
.bio__pic figcaption{margin-top:10px}
.bio__txt{grid-column:6/11;max-width:60ch}
.bio__txt h2{margin-top:1.9em;margin-bottom:.4em}
.bio__txt h2:first-child{margin-top:0}
.bio__txt p + p{margin-top:.95em}
.bio__data{grid-column:6/11;margin-top:2.2em;max-width:60ch}
@media (max-width:1000px){.bio__pic{grid-column:1/6}.bio__txt,.bio__data{grid-column:7/13}}
@media (max-width:820px){.bio__pic{grid-column:1/13;max-width:330px}.bio__txt,.bio__data{grid-column:1/13}}

.reach__l{grid-column:1/7}
.reach__f{grid-column:8/13}
.reach__f img{width:100%;height:auto;box-shadow:var(--shadow)}
.reach__f figcaption{margin-top:10px}
.chan{display:block;padding-block:22px;border-bottom:1px solid var(--rule)}
.chan:first-child{border-top:2px solid var(--gold)}
.chan h2{margin-bottom:5px}
.chan h2 a{position:relative;display:inline-block}
.chan h2 a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.chan:hover h2 a::after{transform:scaleX(1)}
.chan p{color:var(--muted);max-width:44ch}
@media (max-width:820px){.reach__l,.reach__f{grid-column:1/13}.reach__f{margin-top:36px}}

.data{border-top:1px solid var(--ink)}
.data > div{padding-block:11px;border-bottom:1px solid var(--rule-soft)}
.data dt{font-size:12px;color:var(--muted);margin-bottom:3px}
.data dd{margin:0;font-size:15px;font-weight:500;line-height:1.4}

/* Legal pages */
.legal{padding-bottom:var(--s-lg)}
.legal__s{padding-block:clamp(24px,2.5vw,36px);border-top:1px solid var(--rule)}
.legal__k{grid-column:1/4;padding-top:.25em}
.legal__v{grid-column:5/11;max-width:60ch}
.legal__v h2{margin-bottom:.5em}
.legal__v h3{margin-top:1.5em;margin-bottom:.35em}
.legal__v > * + *{margin-top:.9em}
.legal__v ul:not([class]){padding-left:1.15em;list-style:disc}
.legal__v ul:not([class]) li + li{margin-top:.4em}
.legal__v a{overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:var(--rule)}
.legal__v a:hover{text-decoration-color:var(--navy)}
.legal__en{margin-top:1.7em;padding-top:1.2em;border-top:1px solid var(--rule-soft);
  color:var(--muted);font-size:15.5px}
.legal__en > * + *{margin-top:.75em}
.legal__en strong{color:var(--ink);font-weight:600}
.todo{display:inline-block;font-size:13px;font-weight:600;color:#5c4b03;background:#fdf4c9;
  border-left:3px solid var(--gold);padding:6px 11px}
.todo--b{display:block;margin-top:7px}
@media (max-width:900px){.legal__k{grid-column:1/13;margin-bottom:10px;padding-top:0}.legal__v{grid-column:1/13}}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--deep);color:var(--on-dark);padding-block:var(--s-sm) 26px;
  border-top:1px solid var(--line-dark)}
.foot a{color:var(--on-dark)}
.foot__b{grid-column:1/4}
.foot__b p{margin-top:16px;color:var(--on-dark-muted);font-size:14px;max-width:24em}
.foot__c{grid-column:span 2}
.foot__c:nth-of-type(2){grid-column:6/8}
.foot__c:nth-of-type(3){grid-column:8/11}
.foot__c:nth-of-type(4){grid-column:11/13}
.foot__h{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#8fa7b3;margin-bottom:14px}
.foot__l li + li{margin-top:10px}
.foot__l a{font-size:14px;position:relative;display:inline-block;padding-bottom:2px}
.foot__l a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.foot__l a:hover::after{transform:scaleX(1)}
/* Build credit: quiet by default, the accent rule only on hover so it never
   competes with the client's own footer links. */
.foot__by a{color:var(--on-dark);position:relative;display:inline-block;padding-bottom:2px}
.foot__by a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.foot__by a:hover::after{transform:scaleX(1)}
.foot__base{margin-top:var(--s-sm);padding-top:16px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between}
@media (max-width:900px){
  .foot__b{grid-column:1/13;margin-bottom:34px}
  .foot__c,.foot__c:nth-of-type(2),.foot__c:nth-of-type(3),.foot__c:nth-of-type(4){grid-column:span 6}
  .foot__c{margin-bottom:24px}
  .foot__base{flex-direction:column;gap:10px}
}

/* Visually hidden but kept in the accessibility tree. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}