body.qa,body.qa *{overflow-anchor:none}
:root{
    --anvil:#15110E; --iron:#211C17; --inset:#171310; --char:#2E2720;
    --ash:#ECE5DA; --body:#C6BDB0; --muted:#8A7F71; --steel:#7A7065;
    --ember:#D9531E; --glow:#E8A03B;
    --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    --wrap:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--anvil);color:var(--body);font-family:var(--sans);line-height:1.75;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
  section{scroll-margin-top:80px}

  /* shared */
  .kbar{height:2px;width:32px;background:var(--ember);border:0;margin:0 0 20px}
  h2.sec{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,40px);color:var(--ash);
    line-height:1.12;letter-spacing:-0.015em}
  .lede{font-size:clamp(16px,2vw,18px);color:var(--body);max-width:60ch;margin-top:16px;font-weight:300}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:14px;font-weight:600;
    letter-spacing:.02em;padding:13px 22px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.18s}
  .btn-ember{background:var(--ember);color:#180d07}
  .btn-ember:hover{background:#e86a37}
  .btn-ghost{border-color:#4a4238;color:var(--ash)}
  .btn-ghost:hover{border-color:var(--steel);background:rgba(255,255,255,0.03)}

  /* nav */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:50;
    background:rgba(18,14,11,0.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(46,39,32,0.7)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:11px}
  .brand svg{width:26px;height:26px}
  .brand .nm{font-family:var(--serif);font-size:19px;color:var(--ash);letter-spacing:.01em}
  .brand .nm b{font-weight:400}
  .navlinks{display:flex;align-items:center;gap:30px}
  .navlinks a{font-size:14px;color:var(--body);font-weight:500;transition:.15s}
  .navlinks a:hover{color:var(--ash)}
  .navlinks .btn{padding:10px 18px}

  /* hero */
  .hero{position:relative;min-height:96vh;display:flex;align-items:flex-end;overflow:hidden;
    background:#0a0604 url("/assets/hero.jpg") center right/cover no-repeat}
  .hero::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(90deg, rgba(10,6,4,0.92) 0%, rgba(10,6,4,0.72) 34%, rgba(10,6,4,0.2) 66%, rgba(10,6,4,0.35) 100%),
      linear-gradient(0deg, rgba(10,6,4,0.96) 2%, rgba(10,6,4,0.25) 34%, transparent 60%);
    backdrop-filter:saturate(0.8) brightness(0.9);-webkit-backdrop-filter:saturate(0.8) brightness(0.9)}
  .hero .wrap{position:relative;z-index:2;padding-top:130px;padding-bottom:72px;width:100%}
  .hero .eyebrow{font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--glow);margin-bottom:22px}
  .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.4vw,78px);line-height:1.02;
    color:var(--ash);letter-spacing:-0.02em;max-width:16ch}
  .hero h1 em{font-style:normal;color:var(--ember)}
  .hero .sub{font-size:clamp(16px,2vw,19px);color:#d6cdbf;max-width:52ch;margin-top:26px;font-weight:300}
  .hero .cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
  .scrollcue{margin-top:44px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}

  /* generic section */
  .band{padding:clamp(64px,9vw,108px) 0;border-top:1px solid var(--char)}
  body.qa .band{padding:clamp(40px,4.5vw,56px) 0}
  body.legal .rail{max-height:78vh;overflow-y:auto;padding-right:6px}
  body.legal .rail a{margin:0 0 6px}
  body.legal .rail .lbl{font-size:10px;letter-spacing:.1em}
  body.legal .doc .body p,body.legal .pagehead .body p{font-size:16px;max-width:74ch}
  body.legal .doc h2.sec{font-size:clamp(22px,2.4vw,28px)}
  body.qa .band .sopen{margin-bottom:14px}
  body.qa .doc h2.sec{margin-bottom:10px}
  .band.tight{padding-top:clamp(48px,6vw,72px)}

  /* what it is */
  .lead-statement{font-family:var(--serif);font-size:clamp(26px,3.6vw,40px);color:var(--ash);
    line-height:1.18;letter-spacing:-0.01em;max-width:20ch}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .two p{font-size:16.5px;color:var(--body);margin-bottom:16px}
  .two p:last-child{margin-bottom:0}

  /* outcome / deliverable grid */
  .head-row{max-width:62ch;margin-bottom:40px}
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .card{background:var(--iron);border:1px solid #000;border-radius:12px;padding:24px 26px}
  .card h3{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ash);margin-bottom:8px}
  .card p{font-size:14.5px;color:var(--body);line-height:1.7;text-wrap:pretty}
  .feature{background:var(--inset);border:1px solid #000;border-left:3px solid var(--ember);
    border-radius:12px;padding:26px 30px;margin-bottom:20px}
  .feature p{font-family:var(--serif);font-size:clamp(19px,2.3vw,24px);color:var(--ash);line-height:1.38;font-weight:400;max-width:62ch}

  /* process */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
  .step{background:var(--iron);border:1px solid #000;border-radius:12px;padding:24px;position:relative}
  .step .n{font-family:var(--serif);font-size:15px;color:var(--ember);margin-bottom:14px;display:block}
  .step h3{font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ash);margin-bottom:8px;text-wrap:balance}
  .step p{font-size:14px;color:var(--body);line-height:1.65;text-wrap:pretty}

  /* about */
  .about{display:grid;grid-template-columns:1.18fr 0.82fr;gap:52px;align-items:center}
  .portrait{position:relative;border:1px solid #000;border-radius:14px;overflow:hidden;
    aspect-ratio:4/4.6;background:#0a0604 url("/assets/portrait.jpg") center 12%/cover no-repeat}
  .portrait{background-position:right 12%;border:0;border-radius:0;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 78%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 78%,transparent);
    mask-composite:intersect}
  .about .bio p{font-size:16px;color:var(--body);margin-bottom:16px}
  .about .bio p.big{font-family:var(--serif);font-size:clamp(22px,2.6vw,27px);color:var(--ash);line-height:1.3;font-weight:400;margin-bottom:20px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
  /* Three stats, and one label wraps on a phone while the others do not. The
     stat is a flex column with the label growing, so the ember rule and the
     number sit at the same height in every column whatever the label does. */
  .stat{text-align:center;display:flex;flex-direction:column}
  .stat .lab{flex:1 0 auto;display:flex;align-items:flex-end;justify-content:center}
  .stat .lab{font-size:12px;color:var(--muted);letter-spacing:.02em}
  .stat .line{height:2px;background:var(--ember);margin:13px 0 16px}
  .stat .num{font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);color:var(--ash);line-height:1}

  /* contact */
  .contact{background:
      radial-gradient(700px 380px at 78% 6%, rgba(217,83,30,0.16), transparent 62%), var(--inset);
    border-top:1px solid var(--char)}
  .contact .wrap{padding:clamp(64px,9vw,110px) 32px}
  .contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,50px);color:var(--ash);
    line-height:1.08;letter-spacing:-0.02em;max-width:16ch}
  .contact .sub{font-size:18px;color:var(--body);margin-top:18px;max-width:44ch;font-weight:300}
  .cwrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:8px}
  .direct{font-size:17px;color:var(--body);margin-top:12px}
  .dlist{display:flex;flex-direction:column;gap:13px;margin-top:16px}
  .dlist a{display:flex;align-items:baseline;gap:14px}
  .dlist .dl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);min-width:84px}
  .dlist .dv{font-size:16px;color:var(--ash);transition:.15s}
  .dlist a:hover .dv{color:var(--ember)}
  form#cform{display:flex;flex-direction:column;gap:15px;background:var(--iron);border:1px solid #000;border-radius:14px;padding:28px}
  #cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  #cform label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px}
  #cform input,#cform textarea{width:100%;background:var(--anvil);border:1px solid var(--char);border-radius:8px;
    color:var(--ash);font-family:var(--sans);font-size:15px;padding:12px 14px;transition:.15s}
  #cform input::placeholder,#cform textarea::placeholder{color:#6f6558}
  #cform input:focus,#cform textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(217,83,30,0.16)}
  #cform textarea{resize:vertical;min-height:118px;line-height:1.6}
  #cform button{margin-top:4px;background:var(--ember);color:#180d07;border:0;border-radius:8px;
    font-family:var(--sans);font-weight:600;font-size:15px;padding:14px;cursor:pointer;transition:.16s}
  #cform button:hover{background:#e86a37}
  #cform button:disabled{opacity:.6;cursor:default}
  #cmsg .ok{background:var(--iron);border:1px solid #000;border-left:3px solid var(--glow);border-radius:12px;
    padding:26px 28px;color:var(--ash);font-family:var(--serif);font-size:19px;line-height:1.4}
  #cmsg .err{color:var(--glow);font-size:14px;margin-top:12px}
  .cgrid{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}
  .ccard{flex:1 1 220px;background:var(--iron);border:1px solid #000;border-radius:12px;padding:22px 24px;transition:.16s}
  .ccard:hover{border-color:#3a3229;transform:translateY(-2px)}
  .ccard .cl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .ccard .cv{font-size:17px;color:var(--ash);margin-top:8px;font-weight:500;word-break:break-word}
  .ccard .cv b{color:var(--ember);font-weight:500}

  /* footer */
  footer.ft{border-top:1px solid var(--char);padding:44px 0 56px}
  footer.ft .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .lockup{display:flex;align-items:center;gap:13px}
  .lockup svg{width:40px;height:40px}
  .lockup .nm{font-family:var(--serif);font-size:19px;color:var(--ash);line-height:1}
  .lockup .frm{font-size:11px;color:var(--muted);margin-top:4px}
  .lockup .frm b{color:var(--body);font-weight:400}
  .ft .meta{text-align:right;font-size:12px;color:var(--muted);line-height:1.8}
  .ft .meta a:hover{color:var(--ash)}

  @media(max-width:860px){
    /* The nav links used to be hidden here. That was correct when the site was
       one page and every link was a same-page anchor. On a four page site they
       are the only route between pages, and the rail is hidden below 1180px
       too, so hiding them left mobile with no navigation at all. They stay. */
    .navlinks{gap:20px}
    .navlinks a{font-size:13.5px}
    .navlinks a.page.on{display:none}   /* the page you are on is not a destination */
    .two,.about,.cwrap{grid-template-columns:1fr;gap:30px}
    #cform .row2{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    /* Cards stay two across on a phone. Desktop is untouched: it is already
       two across at the default rule and nothing below this line applies
       above 860px. Padding and type come down to buy the column width back. */
    .cards{grid-template-columns:repeat(2,1fr);gap:12px}
    .card{padding:16px 16px}
    .card h3{font-size:14.5px;margin-bottom:6px}
    .card p{font-size:13.5px;line-height:1.55}
    .stats{grid-template-columns:repeat(3,1fr);gap:14px}
    .portrait{aspect-ratio:4/3.4;max-height:420px}
    footer.ft .wrap{flex-direction:column;align-items:flex-start}
    .ft .meta{text-align:left}
  }
  /* Below this the wordmark and three links will not share a line. The anvil
     is the home link, so the words come off rather than the navigation. */
  @media(max-width:620px){
    .brand .nm{display:none}
    .navlinks{gap:16px}
    .navlinks a{font-size:13px}
  }
  @media(max-width:520px){
    .wrap{padding:0 18px}
    .hero .cta .btn{flex:1 1 100%;justify-content:center}
    .nav .wrap{height:62px}
    .navlinks{gap:14px}
    .navlinks a{font-size:12.5px;letter-spacing:.01em}
    /* Every pixel of gutter and padding is a pixel of column. */
    .cards{gap:10px}
    .card{padding:14px 13px;border-radius:10px}
    .card h3{font-size:14px;line-height:1.25}
    .card p{font-size:13px;line-height:1.5}
  }

  /* proof panel, reworked 18 Aug to read unmistakably as a quote */
  .proofwrap{padding:0 0 8px}
  .proof{position:relative;overflow:hidden;
    background:linear-gradient(180deg,#251B13 0%,#1B1610 100%);
    border:1px solid #000;border-left:3px solid var(--ember);
    border-radius:14px;padding:40px 48px 30px;margin:72px 0 0;
    box-shadow:0 24px 60px rgba(0,0,0,.45)}
  .proof::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(560px 280px at 88% -12%, rgba(217,83,30,.22), rgba(0,0,0,0) 64%)}
  .proof .qmark{position:absolute;left:22px;top:-14px;font-family:var(--serif);
    font-size:150px;line-height:1;color:var(--ember);opacity:.22;pointer-events:none}
  .proof .qkick{position:relative;font-family:var(--sans);font-size:12px;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;color:var(--ember);margin:0 0 20px}
  .proof blockquote{position:relative;font-family:var(--serif);font-weight:400;
    font-size:clamp(20px,2.6vw,27px);line-height:1.45;color:var(--ash);letter-spacing:-0.01em}
  .proof .attrib{position:relative;margin-top:24px;padding-top:18px;
    border-top:1px solid var(--char);font-size:14px;color:var(--muted)}
  .proof .attrib a{color:var(--ash)}
  .proof .attrib a:hover{color:var(--ember)}
  @media(max-width:640px){
    .proof{padding:32px 26px 24px}
    .proof .qmark{font-size:110px;left:12px}
  }

  /* ---- section banding and orientation, 18 Aug ---- */
  /* Three grounds only, all already in the palette. No two consecutive bands share one. */
  .band.iron{background:var(--iron)}
  .band.iron .card,.band.iron .step{background:var(--anvil)}
  /* the numbered opener: the struck rule with its section number */
  .sopen{display:flex;align-items:center;gap:14px;margin:0 0 20px}
  .sopen .snum{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;
    color:var(--ember);line-height:1}
  .sopen .kbar{margin:0}
  .head-row .sopen{margin-bottom:18px}
  /* nav scroll position */
  .navlinks a.on{color:var(--ember)}

/* ---- multi-page nav and the section rail, 18 Aug ---- */
.navlinks a.page.on{color:var(--ember)}
.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:8;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.rail a{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);opacity:.55;transition:.18s}
.rail a .tick{display:block;width:18px;height:2px;background:currentColor}
.rail a .lbl{opacity:0;transform:translateX(6px);transition:.18s;white-space:nowrap}
.rail:hover a .lbl{opacity:1;transform:none}
.rail a:hover{opacity:1;color:var(--ash)}
.rail a.on{opacity:1;color:var(--ember)}
.rail a.on .tick{width:30px}
.rail a.on .lbl{opacity:1;transform:none}
@media(max-width:1180px){.rail{display:none}}

/* ---- long-form reading pages ---- */
.doc h2.sec{margin-bottom:14px}
.doc .body p{font-size:17.5px;color:var(--body);margin:0 0 16px;max-width:70ch}
.doc .body a{color:var(--ember);text-decoration:none;border-bottom:1px solid rgba(217,83,30,.4)}
.doc .body a:hover{border-bottom-color:var(--ember)}
.doc .body p:last-child{margin-bottom:0}
.doc .body strong{color:var(--ash);font-weight:600}
.doc .body h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);margin:34px 0 10px}
.doc .body ol,.doc .body ul{margin:0 0 18px 22px}
.doc .body li{font-size:17px;color:var(--body);margin-bottom:12px;max-width:68ch}
/* A bold label opening a bullet sits on its own line with the body beneath it.
   Confirmed 17 Aug and never built, so every labelled bullet ran together. The
   :first-child guard keeps bold used mid-sentence inline where it belongs. */
.doc .body li>strong:first-child,
details.q .ans li>strong:first-child{display:block;margin-bottom:3px}
.doc .body table{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:15px}
.doc .body th,.doc .body td{border:1px solid var(--char);padding:10px 14px;text-align:left;vertical-align:top}
.doc .body th{color:var(--ember);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* A three column fee table at 360px has about 90px a column once padding is
   taken out. Tighten both so the row labels stop wrapping to four lines. */
@media(max-width:640px){
  .doc .body table{font-size:13.5px;margin:16px 0 22px}
  .doc .body th,.doc .body td{padding:8px 8px}
  .doc .body th{font-size:10px;letter-spacing:.1em}
}
.doc .body em{font-style:italic;font-weight:400;color:var(--body)}
.doc .body p>em:only-child{font-style:normal;color:var(--muted)}

/* The page head intro is a document body too, and it sits outside .doc.
   It has to be lifted like h1 and .lede are: the head's :before scrim is
   absolutely positioned over everything, so unpositioned body copy renders
   underneath it and reads as washed out rather than as body text. */
.pagehead .body{position:relative;z-index:2;margin-top:18px}
.pagehead .body p{font-size:17.5px;color:var(--body);margin:0 0 16px;max-width:70ch;text-wrap:pretty}
.pagehead .body a{color:var(--ember);text-decoration:none;border-bottom:1px solid rgba(217,83,30,.4)}
.pagehead .body a:hover{border-bottom-color:var(--ember)}
.pagehead .body p:last-child{margin-bottom:0}
.pagehead .body strong{color:var(--ash);font-weight:600}
.pagehead .body h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);margin:34px 0 10px}
.pagehead .body ol,.pagehead .body ul{margin:0 0 18px 22px}
.pagehead .body li{font-size:17px;color:var(--body);margin-bottom:12px;max-width:68ch}
.pagehead .body table{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:15px}
.pagehead .body th,.pagehead .body td{border:1px solid var(--char);padding:10px 14px;text-align:left;vertical-align:top}
.pagehead .body th{color:var(--ember);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pagehead .body em{font-style:italic;font-weight:400;color:var(--body)}
.pagehead .body p>em:only-child{font-style:normal;color:var(--muted)}
.pagehead{padding:clamp(90px,12vw,150px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden;
  background:#0F0C09}
.pagehead:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 300px at 84% -10%,rgba(217,83,30,.16),rgba(0,0,0,0) 62%)}
.pagehead h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,66px);color:var(--ash);
  letter-spacing:-.025em;line-height:1.08;position:relative;margin-bottom:16px}
/* The lede and the body beneath it are one block of copy and read as one
   colour. Muted was fine when the lede stood alone; against body text it
   looked like the type had changed halfway down. Size carries the hierarchy. */
.pagehead .lede{font-size:clamp(17px,2vw,20px);color:var(--body);max-width:62ch;position:relative;text-wrap:pretty}

/* Forge variant. The image sits behind the head; a scrim from the left keeps the
   type legible while the glow is allowed to sit clear of it on the right. */
.pagehead.forge{padding:clamp(120px,16vw,210px) 0 clamp(56px,7vw,88px)}
.pagehead.forge:after{content:"";position:absolute;inset:0;z-index:0;
  background-image:url(/assets/forge.jpg);
  background-size:cover;background-position:62% 58%;background-repeat:no-repeat}
.pagehead.forge:before{z-index:1;
  background:
    linear-gradient(90deg,rgba(15,12,9,.94) 0%,rgba(15,12,9,.86) 34%,rgba(15,12,9,.42) 62%,rgba(15,12,9,.30) 100%),
    linear-gradient(180deg,rgba(15,12,9,.78) 0%,rgba(15,12,9,0) 38%,rgba(15,12,9,.55) 100%)}
.pagehead.forge h1,.pagehead.forge .lede,.pagehead.forge .body{z-index:2}
/* The four step cards sit beside .body rather than inside it, so they need the
   same lift above the forge scrim. Without it the scrim, which runs from 94 per
   cent opaque on the left to 30 per cent on the right, washed the first cards
   out and left the last one clear. */
.pagehead .steps{position:relative;z-index:2;margin-top:30px}
/* A card row inside a document section is a block like any other and needs the
   same air around it. Without this the paragraph after it sat hard against the
   cards. */
.doc .body .steps,.doc .body .cards{margin:24px 0 28px}
@media(max-width:860px){
  .pagehead.forge:after{background-position:66% 55%}
  .pagehead.forge:before{background:linear-gradient(180deg,rgba(15,12,9,.86) 0%,rgba(15,12,9,.72) 55%,rgba(15,12,9,.88) 100%)}
}
/* FAQ accordion */
.faqgroup{margin-bottom:0}
.faqgroup>.body{margin-bottom:10px}
.faqgroup .outro{margin-top:18px}
details.q{border-bottom:1px solid var(--char);scroll-margin-top:96px}
details.q summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--ash);list-style:none;
  font-size:17px;display:flex;gap:14px;align-items:flex-start}
details.q summary::-webkit-details-marker{display:none}
details.q summary:before{content:"+";color:var(--ember);font-weight:400;line-height:1.35}
details.q .ans{padding:0 0 18px 28px}
details.q .ans>.tbl{max-width:68ch}
details.q .ans h3{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);margin:22px 0 8px}
details.q .ans>h3:first-child{margin-top:2px}
details.q .ans p{font-size:16.5px;color:var(--body);margin:0 0 14px;max-width:68ch}
details.q .ans p:last-child{margin-bottom:0}
details.q .ans strong{color:var(--ash)}
details.q .ans ul,details.q .ans ol{margin:0 0 14px 20px}
details.q .ans li{font-size:16px;color:var(--body);margin-bottom:10px;max-width:calc(68ch - 20px)}
details.q .ans table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
details.q .ans th,details.q .ans td{border:1px solid var(--char);padding:8px 12px;text-align:left}
details.q .ans th{color:var(--ember);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* five-step process grid */
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps.three{grid-template-columns:1fr}}
.steps.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.steps.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.steps.five{grid-template-columns:1fr}}

/* A closing statement panel: one line, set as a statement rather than as body copy. */
.band.closer{padding:clamp(56px,6vw,84px) 0;text-align:center}
.band.closer .body{max-width:none}
.band.closer .body p,.band.closer .body p>em:only-child{
  font-family:var(--serif);font-size:clamp(20px,2.6vw,27px);line-height:1.34;
  font-style:normal;font-weight:400;color:var(--ash);
  max-width:30ch;margin:0 auto}

/* ============================================================
   Motion. Restrained by design: 150 to 250ms, under 10px of travel,
   nothing repeating except one very slow breath on the page head.
   Every hidden starting state is gated on html.anim, which the script
   sets, so a failure to run JavaScript leaves the page fully visible.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

  /* Nav gains weight once the reader has left the top. It matters most on
     the Method page, where the bar sits over the forge image. */
  header.nav{transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}
  header.nav .wrap{transition:height .22s ease}
  header.nav.stuck{background:rgba(18,14,11,0.94);border-bottom-color:rgba(70,60,50,0.9);
    box-shadow:0 1px 0 rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.28)}
  header.nav.stuck .wrap{height:62px}

  /* Nav and rail links: an ember rule that grows from the left. */
  .navlinks a:not(.btn){position:relative}
  .navlinks a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
    background:var(--ember);transform:scaleX(0);transform-origin:left;
    transition:transform .2s cubic-bezier(.2,.7,.3,1)}
  .navlinks a:not(.btn):hover:after,.navlinks a.page.on:after{transform:scaleX(1)}
  .rail a .tick{transition:width .2s cubic-bezier(.2,.7,.3,1)}

  /* Section arrival. One observer sets .in on the band; everything below is CSS. */
  html.anim .band .sopen .kbar{transform:scaleX(0);transform-origin:left;
    transition:transform .62s cubic-bezier(.22,.6,.3,1)}
  html.anim .band .sopen .snum,
  html.anim .band .sec,
  html.anim .band .faqgroup>.body:first-child>p:first-child,
  html.anim .band>.wrap>.body>p:first-child{
    opacity:0;transform:translateY(8px);
    transition:opacity .24s ease,transform .24s cubic-bezier(.2,.7,.3,1)}
  html.anim .band.in .sopen .kbar{transform:none}
  html.anim .band.in .sopen .snum{opacity:1;transform:none;transition-delay:.05s}
  html.anim .band.in .sec{opacity:1;transform:none;transition-delay:.09s}
  html.anim .band.in .faqgroup>.body:first-child>p:first-child,
  html.anim .band.in>.wrap>.body>p:first-child{opacity:1;transform:none;transition-delay:.15s}

  /* The closer panel arrives on its own, with nothing else competing. */
  html.anim .band.closer .body p{opacity:0;transform:translateY(8px);
    transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
  html.anim .band.closer.in .body p{opacity:1;transform:none}

  /* Accordion. The marker rotates rather than swapping glyph, and the answer
     fades up. Height is deliberately not animated: animating it is what
     reintroduces the scroll jump the compensation exists to prevent. */
  details.q summary:before{transition:transform .2s cubic-bezier(.2,.7,.3,1),color .2s ease}
  details.q[open] summary:before{transform:rotate(45deg)}
  details.q summary:hover:before{color:var(--glow)}
  details.q[open] .ans{animation:ansIn .22s cubic-bezier(.2,.7,.3,1) both}
  @keyframes ansIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* The proof panel arrives, then the ember warmth comes up behind it. The
     panel is not a .band, so it is observed separately. Cut 20 Aug: the
     breathing page head. A loop is the one motion a reader can catch. */
  /* The proof panel is highlighted, never hidden. Gating its opacity left a
     blank screen between the hero and the quote whenever the trigger was late,
     which is a worse page than no motion at all. The words are readable from
     the moment the panel is on screen. What arrives is the ember. */
  html.anim .proof{border-left-color:rgba(217,83,30,.16);
    transition:border-left-color .7s ease}
  html.anim .proof::before{opacity:0;transition:opacity 1s ease .12s}
  html.anim .proof.in{border-left-color:var(--ember)}
  html.anim .proof.in::before{opacity:1}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}