/* Simon Kramer site styles. Built from reference/index.html and reference/scorecard.html. */

@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bebas-neue-400.woff2) format('woff2')}
@font-face{font-family:'Sorts Mill Goudy';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sorts-mill-goudy-400.woff2) format('woff2')}
@font-face{font-family:'Sorts Mill Goudy';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/sorts-mill-goudy-400-italic.woff2) format('woff2')}

:root{
  --ink:#1B1719; --white:#FFFFFF; --gold:#AF8B45; --gold-deep:#866A33;
  --muted-on-ink:#AFAEAE;
  --paper:#FFFFFF; --text:#1B1719; --muted:#5F5C5E; --accent:#866A33; --hair:#E2DFE0; --field:#FFFFFF;
  --error:#A23B2C;
  --display:'Bebas Neue','Arial Narrow',sans-serif;
  --serif:'Sorts Mill Goudy',Georgia,serif;
  --label:Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root{ color-scheme:dark; --paper:#1B1719; --text:#FFFFFF; --muted:#AFAEAE; --accent:#AF8B45; --hair:#3A3437; --field:#231E20; --error:#E08A7A; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto;padding:0 28px}
@media (max-width:480px){.wrap,.narrow{padding:0 20px}}
.label{font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;max-width:none}
.dark{background:var(--ink);color:var(--white)}
.dark .label{color:var(--gold)}
.display{font-family:var(--display);text-transform:uppercase;line-height:.92;font-weight:400;letter-spacing:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h2{font-size:clamp(28px,3.4vw,34px);line-height:1.15;max-width:24ch}
h3{font-size:24px;line-height:1.25}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:22px;line-height:1.45}
.muted{color:var(--muted)}
.dark .muted{color:var(--muted-on-ink)}
.btn{display:inline-block;background:var(--gold);color:var(--ink);font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:17px 26px;border-radius:2px;border:0;cursor:pointer;line-height:1.3}
.btn:hover{background:#C29C53}
.btn[disabled]{opacity:.7;cursor:progress}
.textlink{color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-line:underline;background:none;border:0;font:inherit;cursor:pointer;padding:0}
.dark .textlink{color:var(--gold)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:32px}.mb-l{margin-bottom:48px}
[hidden]{display:none !important}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:20;font-family:var(--label);font-weight:700}
.skip:focus{left:16px;top:16px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* placeholders Simon will fill */
.ph{border:1px dashed var(--muted);padding:18px 20px;font-size:16px;color:var(--muted)}
.dark .ph{border-color:#5F5C5E;color:var(--muted-on-ink)}
.ph-inline{border:1px dashed var(--accent);padding:0 4px;border-radius:2px}
.draft-banner{background:var(--gold);color:var(--ink);font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:12px 0;text-align:center}

/* header */
.site-head{background:var(--ink);color:var(--white);position:sticky;top:0;z-index:10;border-bottom:1px solid #2E282B}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:24px}
.mark{text-decoration:none;display:inline-flex;flex-direction:column;gap:7px}
.mark::before{content:"";width:48px;height:2px;background:var(--gold)}
.mark span{font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.32em;color:var(--gold);white-space:nowrap}
.nav{display:flex;align-items:center;gap:30px}
.site-head .mark{order:0}
.navlinks{order:1;margin:0 0 0 auto;display:flex;gap:28px;list-style:none;padding:0}
.nav{order:2}
.navlinks a{font-size:17px;text-decoration:none;color:var(--muted-on-ink)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--white)}
.navlinks a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:8px;text-decoration-thickness:2px}
.nav .btn{padding:12px 18px;white-space:nowrap}
.menu-btn{display:none;background:none;border:1px solid #3A3437;border-radius:2px;color:var(--white);font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:11px 12px;cursor:pointer}
@media (max-width:940px){
  .site-head .wrap{flex-wrap:wrap}
  .nav{gap:12px}
  .menu-ready .menu-btn{display:inline-block}
  .navlinks{order:3;flex-basis:100%;flex-wrap:wrap;gap:8px 20px;padding:0 0 14px}
  .menu-ready .navlinks{display:none}
  .menu-ready.open .navlinks{display:flex;flex-direction:column;gap:0;border-top:1px solid #2E282B;padding:4px 0 12px}
  .menu-ready.open .navlinks a{display:block;padding:12px 0}
}
@media (max-width:480px){
  .site-head .wrap{gap:10px;padding:0 16px}
  .mark span{font-size:12px;letter-spacing:.2em}
  .nav{gap:8px}
  .nav .btn,.menu-btn{font-size:11px;letter-spacing:.1em;padding:10px 10px}
}

/* heroes */
/* Every page hero starts at the same height below the header */
.page-hero{padding-top:clamp(64px,10vw,128px)}
.hero{padding-bottom:clamp(56px,8vw,96px)}
.hero h1{font-size:clamp(36px,5vw,56px);line-height:1.12;margin-bottom:30px;max-width:28ch}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--gold)}
.hero .lede{color:var(--muted-on-ink);margin-bottom:38px;max-width:44ch}
.hero .lede strong{color:var(--white);font-weight:400}
.hero .lede:last-child{margin-bottom:0}
/* About hero: its own classes, so the generic .hero rules can't reach it */
.about-hero{padding-bottom:clamp(56px,8vw,96px)}
.about-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
.about-hero__text h1{font-size:clamp(36px,4.2vw,56px);line-height:1.12;max-width:none;margin:0}
.about-hero__text h1 span{display:block}
.about-hero__text h1 .l2{color:var(--gold)}
.about-hero__media{margin:0}
.about-hero__media img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:70% 30%}
/* Feather the left edge into the ink; the other edges stay crisp */
.about-hero__media img{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 22%);
  mask-image:linear-gradient(to right,transparent 0%,#000 22%);
}
@media (max-width:819px){.about-hero__grid{grid-template-columns:1fr}}
.hero-home h1{max-width:20ch}
/* Home hero: text on the left, the four pillars built in layers on the right */
.hero-home__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.pillar-stack{margin:0;background:var(--ink);color:var(--white)}
/* HTML keeps Cash first for screen readers; column-reverse puts it at the bottom */
.pillar-stack__blocks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;align-items:center;gap:8px}
.pillar-stack__block{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;border:1px solid #AF8B45;border-radius:0;box-shadow:none;padding:16px 20px;background:transparent}
.pillar-stack__block .n{font-family:var(--display);font-size:20px;color:#AF8B45;line-height:1}
.pillar-stack__block .name{font-family:var(--display);font-size:clamp(28px,3vw,38px);color:var(--white);line-height:1}
.pillar-stack__block .desc{grid-column:2;font-family:var(--serif);font-size:15px;line-height:1.35;color:#AFAEAE;margin-top:-6px}
.pillar-stack__block--cash{width:100%;background:#AF8B45}
.pillar-stack__block--cash .n,.pillar-stack__block--cash .name{color:#1B1719}
.pillar-stack__block--cash .desc{color:#3A3437}
.pillar-stack__block--growth{width:88%}
.pillar-stack__block--succession{width:76%}
.pillar-stack__block--exit{width:64%}
.pillar-stack__caption{font-family:var(--serif);font-size:clamp(19px,1.8vw,22px);color:var(--white);text-align:center;margin-top:28px}
@media (max-width:819px){.hero-home__grid{grid-template-columns:1fr}}
.hero-home .lede{max-width:42ch}
.hero-short{padding-bottom:clamp(48px,6vw,72px)}
.hero-short h1{margin-bottom:16px}
.hero-short .updated{color:var(--muted-on-ink);font-size:16px;margin:0}

/* the journey */
.journey{padding:clamp(56px,8vw,96px) 0 clamp(64px,9vw,112px);border-top:1px solid #2E282B}
.journey .intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px 48px;margin-bottom:56px}
.journey .intro p{color:var(--muted-on-ink);margin:0;max-width:44ch}
.stages{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.stages::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--gold)}
.stage{position:relative;padding:44px 28px 0 0}
.stage::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;background:var(--ink);border:2px solid var(--gold)}
.stage:first-child::before{background:var(--gold)}
.stage .n{font-family:var(--display);font-size:22px;color:var(--gold);line-height:1;display:block;margin-bottom:8px}
.stage .display{font-size:clamp(40px,4.4vw,58px);margin:0 0 14px;color:var(--white)}
.stage p{color:var(--muted-on-ink);font-size:17px;margin:0 0 14px}
.stage a{font-size:16px}
@media (max-width:900px){
  .stages{grid-template-columns:1fr;gap:40px;padding-left:40px}
  .stages::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .stage{padding:0}
  .stage::before{left:-40px;top:6px}
}

/* reading sections */
.read{padding:clamp(72px,10vw,120px) 0}
.read + .read{border-top:1px solid var(--hair)}
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.read h2{margin-bottom:24px}

/* pillars in detail */
.pillar{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,5vw,72px);padding:48px 0;border-top:1px solid var(--hair);scroll-margin-top:96px}
.pillar:last-child{border-bottom:1px solid var(--hair)}
.pillar .head .n{font-family:var(--display);font-size:22px;color:var(--accent);display:block;line-height:1;margin-bottom:6px}
.pillar .head .display{font-size:52px;margin:0}
.pillar .goal{font-size:24px;line-height:1.3;margin-bottom:16px;max-width:36ch}
.pillar .work{color:var(--muted);font-size:17px}
.pillar .work b{font-family:var(--label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-right:6px}
@media (max-width:720px){.pillar{grid-template-columns:1fr;gap:12px}}

/* AI in your business */
.ai{padding:clamp(72px,10vw,120px) 0;border-top:1px solid #2E282B;scroll-margin-top:76px}
.ai .top{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:820px){.ai .top{grid-template-columns:1fr}}
.ai .lede{color:var(--white)}
.ai .top p{color:var(--muted-on-ink)}
.ai h3{color:var(--white)}
.ai-sub{margin:72px 0 8px;font-size:24px}
.ai-pillars{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid #3A3437}
.ai-pillars li{display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,4vw,56px);padding:22px 0;border-bottom:1px solid #3A3437}
.ai-pillars .display{font-size:34px;color:var(--gold);margin:0}
.ai-pillars p{color:var(--muted-on-ink);margin:0;font-size:18px}
@media (max-width:620px){.ai-pillars li{grid-template-columns:1fr;gap:6px}}
.ai-steps,.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.ai-steps{margin:32px 0 0;counter-reset:a}
.steps{margin:48px 0 44px;counter-reset:s}
.ai-steps li,.steps li{border-top:1px solid #3A3437;padding-top:20px}
.ai-steps li{counter-increment:a}
.steps li{counter-increment:s}
.ai-steps li::before,.steps li::before{display:block;font-family:var(--display);font-size:44px;line-height:1;color:var(--gold);margin-bottom:12px}
.ai-steps li::before{content:counter(a)}
.steps li::before{content:counter(s)}
.ai-steps strong,.steps strong{display:block;color:var(--white);font-weight:400;font-size:20px;margin-bottom:6px}
.ai-steps p,.steps p{color:var(--muted-on-ink);font-size:17px;margin:0}
@media (max-width:820px){.ai-steps,.steps{grid-template-columns:1fr}}
.ai-proof{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);padding-top:40px;border-top:1px solid #3A3437}
.ai-proof p{color:var(--muted-on-ink);font-size:17px}
.ai-proof h3{margin-bottom:12px}
@media (max-width:820px){.ai-proof{grid-template-columns:1fr}}

/* call */
.call{padding:clamp(72px,10vw,120px) 0;border-top:1px solid #2E282B}
.call .promise{font-size:22px;line-height:1.45;max-width:44ch}

/* who I work with */
.fit{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.fit li{padding:16px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:150px 1fr;gap:16px}
.fit li span:first-child{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);padding-top:5px}
@media (max-width:520px){.fit li{grid-template-columns:1fr;gap:2px}}


/* book */
.book{padding:clamp(72px,10vw,120px) 0}
.book .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,7vw,104px);align-items:center}
.cover{width:min(280px,70vw);aspect-ratio:2/3;background:var(--ink);border:1px solid #3A3437;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px}
.cover .t{font-family:var(--display);font-size:64px;line-height:.9;color:var(--white)}
.cover .r{width:48px;height:2px;background:var(--gold);margin:12px 0}
.cover .t.g{color:var(--gold)}
.cover .by{margin-top:auto;font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.3em;color:var(--gold)}
.book .sub{font-style:italic;color:var(--muted-on-ink);margin:10px 0 22px}
.book p.body{color:var(--muted-on-ink)}
@media (max-width:760px){.book .wrap{grid-template-columns:1fr}}

/* bands */
.band .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px}
.band h2{max-width:22ch;margin-bottom:12px}
.band p{color:var(--muted);margin:0}
.dark.band{padding:clamp(64px,9vw,104px) 0;border-top:1px solid #2E282B}
.dark.band p{color:var(--muted-on-ink)}

/* booking */
.booking{scroll-margin-top:76px}
.booking-card{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;border:1px solid var(--hair);padding:clamp(24px,4vw,36px)}
.booking-card p{margin:0;max-width:44ch}

/* booking pop-up: a white panel in both colour modes, to sit with Google's white calendar */
.booking-dialog{padding:0;border:0;border-radius:0;background:var(--white);color:var(--ink);width:calc(100% - 32px);max-width:720px;height:min(720px,90vh);max-height:none;overflow:hidden}
.booking-dialog::backdrop{background:rgba(27,23,25,.85)}
.booking-panel{display:flex;flex-direction:column;height:100%}
.booking-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 14px 24px;border-bottom:1px solid #E2DFE0}
.booking-top .label{margin:0;color:var(--gold-deep)}
.booking-close{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid #E2DFE0;border-radius:2px;padding:10px 14px;cursor:pointer}
.booking-close:hover{border-color:var(--gold)}
.booking-close:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.booking-frame{flex:1;width:100%;border:0;display:block;background:var(--white)}
.booking-foot{margin:0;padding:12px 24px;border-top:1px solid #E2DFE0;font-size:15px;color:#5F5C5E;max-width:none}
.booking-foot .textlink{color:var(--gold-deep)}
body.booking-open{overflow:hidden}
@media (max-width:600px){.booking-dialog{width:100%;max-width:100%;height:100%;max-height:100%;margin:0}}
.embed-ph{margin-top:40px;min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center}
.embed-ph p{margin:0 auto}
.contact-line{margin-top:28px;color:var(--muted)}

/* forms */
/* Shared with the scorecard intro, so its left column can offset by the same amount */
:root{--panel-pad:clamp(24px,4vw,40px);--panel-border:1px}
.form-panel{border:var(--panel-border) solid var(--hair);padding:var(--panel-pad)}
.form-panel h2{margin-bottom:10px}
.form-panel .why{color:var(--muted);font-size:17px;margin-bottom:28px}
.field{margin-bottom:20px}
.field label,.field .flabel{display:block;font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.field .opt{font-weight:400;letter-spacing:.1em;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:18px;color:var(--text);background:var(--field);border:1px solid var(--hair);border-radius:2px;padding:13px 14px}
.field textarea{min-height:180px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.field .err{display:none;color:var(--error);font-size:15px;margin:6px 0 0}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--error)}
.field .hint{color:var(--muted);font-size:15px;margin:6px 0 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px;color:var(--muted);margin:6px 0 28px}
.check input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--gold-deep)}
.small{font-size:15px;color:var(--muted);margin:18px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{border-left:2px solid var(--error);padding:4px 0 4px 16px;color:var(--text);margin:0 0 24px;font-size:17px}
.form-done h2{margin-bottom:14px}

/* scorecard */
.sc-hero{padding-bottom:clamp(64px,9vw,112px)}
.title{display:grid;grid-template-columns:auto 2px auto;gap:clamp(18px,3vw,36px);align-items:stretch;justify-content:start;margin-bottom:40px}
.title .display{font-size:clamp(64px,11vw,128px);margin:0}
.title .rule{background:var(--gold)}
.title .g{color:var(--gold)}
.sc-hero .lede{color:var(--muted-on-ink);max-width:44ch}
.intro{padding:clamp(64px,9vw,104px) 0}
.intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px);align-items:start}
/* Push the left heading down by the form box's border and padding, so both headings sit level */
.intro__text{padding-top:calc(var(--panel-pad) + var(--panel-border))}
.intro h2{margin-top:0}
@media (max-width:860px){.intro .wrap{grid-template-columns:1fr}.intro__text{padding-top:0}}
.pillars{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--hair)}
.pillars li{padding:16px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:28px 1fr;gap:8px}
.pillars .n{font-family:var(--display);font-size:22px;color:var(--accent);line-height:1.3}
.pillars strong{display:block;font-weight:400;font-size:21px}
.pillars span.d{color:var(--muted);font-size:17px}

.quiz{padding:clamp(56px,8vw,96px) 0 clamp(72px,10vw,120px);min-height:70vh}
.progress{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin-bottom:14px;font-size:16px;color:var(--muted)}
.progress .label{margin:0}
.bar{height:2px;background:var(--hair);margin-bottom:56px}
.bar i{display:block;height:2px;background:var(--gold);width:0;transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
.question{font-size:clamp(28px,4vw,38px);line-height:1.2;margin-bottom:40px;max-width:26ch}
.question:focus{outline:none}
.answers{display:grid;gap:12px;max-width:520px}
.answer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;width:100%;text-align:left;font:inherit;font-size:20px;color:var(--text);background:transparent;border:1px solid var(--hair);border-radius:2px;padding:18px 20px;cursor:pointer}
.answer:hover{border-color:var(--gold)}
.answer span{color:var(--muted);font-size:16px;font-style:italic}
.answer[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.answer[disabled]{cursor:progress;opacity:.6}
.quiz-nav{margin-top:36px}
.quiz-status{margin-top:28px;color:var(--muted)}

.results-head{padding:clamp(64px,9vw,104px) 0 clamp(56px,8vw,88px)}
.results-head .next-pillar{font-size:clamp(64px,11vw,128px);color:var(--gold);margin:0 0 20px}
.results-head .lede{color:var(--muted-on-ink);max-width:46ch}
.track{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#3A3437}
.track li{position:relative;padding:36px 8px 0 0}
.track li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;background:var(--ink);border:2px solid #5F5C5E}
.track li.secure::before{background:var(--gold);border-color:var(--gold)}
.track li.current::before{border-color:var(--gold);outline:4px solid rgba(175,139,69,.25)}
.track .w{font-family:var(--display);font-size:clamp(22px,3vw,34px);line-height:1;display:block;color:var(--muted-on-ink)}
.track li.secure .w,.track li.current .w{color:var(--white)}
.track .s{font-size:15px;color:var(--muted-on-ink);font-style:italic}
.track li.current .s{color:var(--gold)}
@media (max-width:520px){.track .s{font-size:13px}}

.results-body{padding:clamp(56px,8vw,96px) 0}
.scores{list-style:none;padding:0;margin:0 0 56px}
.scores li{display:grid;grid-template-columns:150px 1fr 64px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
.scores li:first-child{border-top:1px solid var(--hair)}
.scores .name{font-size:20px}
.scores .bar2{height:8px;background:var(--hair)}
.scores .fill{display:block;height:8px;background:var(--gold);width:0}
.scores .num{text-align:right;color:var(--muted);font-size:16px}
@media (max-width:520px){.scores li{grid-template-columns:1fr 56px}.scores .bar2{grid-column:1 / -1;grid-row:2}}
.advice{border-left:2px solid var(--gold);padding-left:24px;margin-bottom:48px}
.advice h3{margin-bottom:12px}
.sent{color:var(--muted);font-size:17px}
.next{margin-top:40px;padding-top:40px;border-top:1px solid var(--hair)}
.next h2{margin-bottom:14px}

/* legal */
.legal{padding:clamp(56px,8vw,96px) 0}
.legal .prose{max-width:68ch}
.prose h2{font-size:clamp(24px,3vw,28px);color:var(--accent);margin:48px 0 16px}
.prose h3{font-size:21px;margin:32px 0 10px}
.prose p,.prose li{max-width:68ch}
.prose ul{padding-left:1.2em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--accent);text-underline-offset:4px}
.prose strong{font-weight:700}

/* 404 */
.notfound{padding-bottom:clamp(80px,12vw,160px)}
.notfound .display{font-size:clamp(64px,11vw,128px);color:var(--gold);margin:0 0 24px}

/* footer */
.site-foot{padding:56px 0 64px;border-top:1px solid #2E282B}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:end}
.site-foot p{color:var(--muted-on-ink);font-size:16px;margin:0}
.site-foot .role{margin-top:12px}
.site-foot .contact a{text-decoration:none}
.site-foot .contact a:hover{text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0;margin:12px 0 0;font-size:15px}
.foot-links a{color:var(--muted-on-ink);text-underline-offset:4px}
.foot-links a:hover{color:var(--white)}
.foot-right{text-align:left}
h2.h3{font-size:24px;line-height:1.25;max-width:none}
.dark .ph-inline{border-color:var(--gold)}
[tabindex="-1"]:focus{outline:none}

/* Two-column label sections: line up the cap height of the right column's first line with the heading's */
@media (min-width:821px){
  .two > div > .lede:first-child,.ai .top > div > .lede:first-child{margin-top:-1px}
  .journey .intro > p{margin-top:-2px}
  .two > .fit{border-top:0;margin-top:-2px}
  .two > .fit li:first-child{padding-top:0}
}