/* Brandleys site stylesheet. One source of truth for the design language. */
:root{--cream:#FBF6EE;--blush:#FBEAE3;--navy:#14395A;--deep:#0F2B45;--red:#E8462E;--muted:#56697B;--gold:#A8845A;--border:#F0E4D2}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--navy);font-family:'Hanken Grotesk',-apple-system,sans-serif;overflow-x:hidden}
  h1,h2,h3,h4,.fcol{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1;margin:0}
  .cap{font:700 10px/1 'Hanken Grotesk',sans-serif;letter-spacing:.2em;text-transform:uppercase}

  /* ---------- header ---------- */
  .bar{position:sticky;top:0;z-index:200;background:var(--cream);border-bottom:1px solid var(--border)}
  .bar .in{max-width:1140px;margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .wm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;color:var(--red);letter-spacing:-.035em;line-height:1;text-decoration:none}
  .nav{display:flex;align-items:center;gap:4px}
  .nav a{padding:10px 15px;border-radius:999px;text-decoration:none;color:var(--navy);font-weight:600;font-size:15px}
  .nav a:hover{background:var(--blush)}
  .nav a.talk{margin-left:10px;padding:11px 22px;background:var(--red);color:var(--cream);font-weight:700}
  .nav a.talk:hover{background:#C7371E}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
  .burger span{display:block;width:24px;height:2.5px;background:var(--navy);border-radius:2px}
  .mnav{display:none;border-top:1px solid var(--border);background:var(--cream);padding:12px 24px 20px;flex-direction:column;gap:2px}
  .mnav.open{display:flex}
  .mnav a{padding:13px 8px;text-decoration:none;color:var(--navy);font-weight:600;font-size:17px;border-bottom:1px solid #F4E9D8}
  .mnav a.talk{margin-top:10px;text-align:center;border-radius:999px;background:var(--red);color:var(--cream);border-bottom:0;padding:14px}

  /* ---------- lockup ---------- */
  .lockup{display:inline-flex;align-items:stretch;gap:var(--gap,17px);text-decoration:none;color:inherit}
  .lockup svg{height:var(--h,86px);width:auto;flex:none;display:block}
  .lockup .words{height:var(--h,86px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;font-size:calc(var(--h,86px) * .40);line-height:1.18}
  .lockup .words span{display:block;white-space:nowrap}
  .lockup .words .the{display:inline;color:var(--muted);font-weight:700}
  .lockup .q{color:var(--red)}
  .iword{display:inline-block;transition:opacity .3s ease,transform .3s ease}
  .iword.out{opacity:0;transform:translateY(-7px)}

  /* ---------- hero ---------- */
  .hero{padding:104px 52px 100px}
  .hero .in{max-width:1180px;margin:0 auto;width:100%}
  .hero h1{margin:56px 0 0;font-size:clamp(34px,4.4vw,64px);max-width:16ch;line-height:1.02}
  .lede{margin:28px 0 0;font-size:18.5px;line-height:1.68;color:var(--muted);max-width:53ch}
  .play{margin:34px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
        font-size:clamp(16px,1.45vw,21px);line-height:1.35;letter-spacing:-.03em;color:var(--navy);white-space:nowrap}
  .play i{font-style:normal;color:var(--red)}
  .btns{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:14px}
  .btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;border-radius:999px;padding:16px 30px;
       font-weight:700;font-size:16px;border:1px solid transparent;transition:background .2s ease}
  .btn.solid{background:var(--red);color:var(--cream)}
  .btn.solid:hover{background:#C7371E}
  .btn.line{background:none;color:var(--navy);border-color:var(--border)}
  .btn.line:hover{background:var(--blush)}

  /* ---------- the reel ---------- */
  .box{margin:74px 0 0;padding:46px 56px 56px;background:var(--blush);position:relative;min-height:330px}
  .who{color:var(--muted);opacity:.85;margin:0 0 34px;display:flex;justify-content:space-between;gap:20px}
  .area{margin:0 0 26px;color:var(--red)}
  .say{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
       font-size:clamp(23px,2.9vw,40px);line-height:2.1;letter-spacing:-.035em;color:var(--navy)}
  .mk{position:relative;white-space:nowrap;display:inline-block;line-height:1.06;vertical-align:baseline}
  .mk:after{content:"";position:absolute;left:0;bottom:-8px;height:2.5px;width:0;background:var(--red);
            transition:width .45s cubic-bezier(.2,.7,.2,1)}
  .mk.on:after{width:100%}
  .mk b{position:absolute;left:0;top:calc(100% + 15px);white-space:nowrap;font:700 10.5px/1 'Hanken Grotesk',sans-serif;
        letter-spacing:.16em;text-transform:uppercase;color:var(--red);opacity:0;transform:translateY(5px);
        transition:opacity .35s ease .16s,transform .35s ease .16s}
  .mk.on b{opacity:1;transform:none}
  .fade{transition:opacity .34s ease}
  .fade.off{opacity:0}
  .count{position:absolute;right:52px;bottom:20px;display:flex;gap:3px}
  .count button{width:30px;height:30px;padding:0;margin:0;background:none;border:0;cursor:pointer;position:relative}
  .count button:before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;
    background:var(--border);transition:background .25s ease}
  .count button:hover:before{background:#D8BFA6}
  .count button.on:before{background:var(--red)}
  .count button:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-radius:3px}

  /* ---------- close ---------- */
  .close{background:var(--deep);color:var(--cream);padding:140px 52px}
  .close .in{max-width:1180px;margin:0 auto}
  .close h2{font-size:clamp(29px,3.7vw,50px);max-width:18ch}
  .close h2 em{font-style:normal;color:var(--red)}
  .close p{margin:30px 0 0;font-size:18.5px;line-height:1.7;max-width:52ch;opacity:.78}
  .cta{display:inline-flex;align-items:center;gap:10px;margin-top:48px;background:var(--red);color:var(--cream);
       text-decoration:none;border-radius:999px;padding:17px 34px;font-weight:700;font-size:16.5px}

  /* ---------- footer ---------- */
  .foot{background:var(--deep);color:var(--cream);font-family:'Hanken Grotesk',sans-serif}
  .foot .in{max-width:1140px;margin:0 auto;padding:64px 24px 36px}
  .foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;align-items:start}
  .foot .lockup{--h:58px;--gap:13px}
  .foot .lockup .the{color:#7E96AA}
  .foot .lockup .words>span:first-child{color:var(--cream)}
  .foot .bwm{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:29px;color:var(--red);
             letter-spacing:-.035em;line-height:1;margin-bottom:22px;text-decoration:none}
  .foot h4,.foot .fcol{margin:0 0 16px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7E96AA;font-weight:700;font-family:'Hanken Grotesk',sans-serif}
  .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
  .foot ul a{color:#DCE6EE;text-decoration:none;font-size:15px}
  .foot ul a:hover{color:var(--red)}
  .foot .tag{margin:22px 0 0;color:#7E96AA;font-size:14px;line-height:1.6;max-width:250px}
  .foot .mail{color:var(--red);text-decoration:none;font-size:16px;font-weight:600}
  .foot .addr{margin:16px 0 0;color:#9FB3C4;font-size:14.5px;line-height:1.7}
  .foot .base{margin-top:48px;padding-top:28px;border-top:1px solid #1E3F5C}
  .foot .base p{margin:0;color:#6E869A;font-size:13px;line-height:1.7;max-width:880px}
  .foot .base .links{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 0}
  .foot .base .links a{color:#9FB3C4;text-decoration:none;font-size:13.5px;font-weight:600}
  .foot .base .links a:hover{color:var(--red)}
  .foot .base .reg{margin:16px 0 0;color:#56697B;font-size:13px;line-height:1.7}

  @media (max-width:900px){
    .nav{display:none} .burger{display:flex}
    .play{white-space:normal}
    .hero,.close{padding-left:26px;padding-right:26px}
    .box{padding:34px 26px 52px;min-height:0}
    .count{right:26px}
    .say{line-height:2.35}
    .lockup{--h:66px}
    .foot .cols{grid-template-columns:1fr;gap:34px}
  }
  @media (prefers-reduced-motion:reduce){ .mk:after,.mk b,.iword{transition:none} }

/* ---------- shared page furniture, used by every page beyond the homepage ---------- */
.page{padding:96px 52px 30px}
.page .in{max-width:1180px;margin:0 auto;width:100%}
.eyebrow{margin:0 0 22px;color:var(--red)}
.page h1{font-size:clamp(33px,4.2vw,58px);max-width:17ch;line-height:1.03}
.page .lede{margin:26px 0 0;font-size:19px;line-height:1.68;color:var(--muted);max-width:54ch}

.sec{padding:26px 52px 96px}
.sec .in{max-width:1180px;margin:0 auto;width:100%}
.sec.blushed{background:var(--blush);padding-top:96px;margin-top:70px}
.sec h2{font-size:clamp(27px,3.3vw,44px);max-width:19ch;margin:0}
.sec h2 em{font-style:normal;color:var(--red)}
.sec .sub{margin:24px 0 0;font-size:18px;line-height:1.68;color:var(--muted);max-width:54ch}
.sec .body{margin:26px 0 0;font-size:17.5px;line-height:1.76;color:var(--muted);max-width:62ch}
.sec .body+.body{margin-top:20px}
.sec .body strong{color:var(--navy);font-weight:600}
.sec .grid{margin-top:38px}
.reading .readlist+.more{margin-top:30px}

.rule{height:1px;background:var(--border);margin:0}
.grid{margin:58px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--cream);padding:34px 30px 38px;text-decoration:none;color:inherit;display:block;transition:background .25s ease}
.cell:hover{background:var(--blush)}
.cell.fill{pointer-events:none}
.cell.fill:hover{background:var(--cream)}
.blushed .cell.fill:hover{background:var(--cream)}
.blushed .cell{background:var(--blush)}
.blushed .cell:hover{background:#F7DFD4}
.cell .n{display:block;margin:0 0 18px;color:var(--red)}
.cell h2,.cell h3{max-width:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19.5px;line-height:1.25;
         letter-spacing:-.025em;margin:0 0 11px}
.cell p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.cell h3.q{font-size:clamp(21px,2.1vw,28px);line-height:1.22;letter-spacing:-.03em;color:var(--navy);margin:0 0 16px}
.cell .list{margin:14px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted);opacity:.85}
.cell .go{display:inline-block;margin:16px 0 0;font-weight:700;font-size:14.5px;color:var(--red)}
.grouplbl{margin:56px 0 0;color:var(--red)}
.grouplbl+.grid,.grouplbl+.sub+.grid{margin-top:24px}
.sub.tight{margin-top:12px}
.cell .n{white-space:nowrap}
.cell .face{display:block;text-decoration:none;color:inherit}
.cell .within{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cell .within .cap{color:var(--muted);opacity:.75;margin-right:2px}
.cell .within a{display:inline-block;padding:6px 13px;border:1px solid var(--border);border-radius:999px;
  font:700 13.5px/1 'Hanken Grotesk',sans-serif;color:var(--navy);text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.cell .within a:hover{background:var(--red);border-color:var(--red);color:var(--cream)}

.panel{background:var(--deep);color:var(--cream);padding:96px 52px}
.panel .in{max-width:1180px;margin:0 auto}
.panel h2{font-size:clamp(27px,3.4vw,46px);max-width:19ch;margin:0}
.panel h2 em{font-style:normal;color:var(--red)}
.panel p{margin:26px 0 0;font-size:18px;line-height:1.7;max-width:52ch;opacity:.78}

.note{margin:54px 0 0;padding:30px 34px;background:var(--blush);font-size:16px;line-height:1.7;color:var(--muted)}
.note strong{color:var(--navy);font-weight:700}
.fine{margin:26px 0 0;font-size:14px;line-height:1.7;color:var(--muted);opacity:.85}

@media (max-width:900px){
  .page,.sec,.panel{padding-left:26px;padding-right:26px}
  .grid,.grid.two{grid-template-columns:1fr}
}

/* ---------- two sides: one line arrives, then the other ---------- */
.sides{margin:56px 0 0;max-width:900px}
.sides .track{position:relative;height:112px}
.sides .lbl{position:absolute;top:0;font:700 10px/1 'Hanken Grotesk',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .5s ease}
.sides .lbl.on{opacity:.95}
.sides .lbl.a{left:0}
.sides .lbl.b{right:0}
.sides .ln{position:absolute;top:56px;height:4px;background:var(--red);width:0}
.sides .ln.a{left:0;transition:width 1.05s cubic-bezier(.25,.6,.25,1)}
.sides .ln.b{right:0;transition:width 1.05s cubic-bezier(.25,.6,.25,1)}
.sides .ln.on{width:50%}
.sides .cap{position:absolute;top:82px;font:700 10px/1 'Hanken Grotesk',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .5s ease}
.sides .cap.on{opacity:.75}
.sides .cap.a{left:0}
.sides .cap.b{right:0}
.sides .dot{position:absolute;left:50%;top:58px;width:22px;height:22px;margin:-11px 0 0 -11px;
  background:var(--red);transform:rotate(45deg) scale(0);
  transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.sides .dot.on{transform:rotate(45deg) scale(1)}
.sides .said{margin:22px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(20px,2.1vw,29px);letter-spacing:-.03em;line-height:1.3;color:var(--muted);
  opacity:0;transform:translateY(7px);transition:opacity .5s ease,transform .5s ease}
.sides .said.on{opacity:1;transform:none}
.sides .said.two{color:var(--navy);margin-top:8px}
.sides .said em{font-style:normal;color:var(--red)}
@media (max-width:700px){
  .sides .track{height:130px}
  .sides .lbl,.sides .cap{font-size:9px;letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){
  .sides .ln{width:50%} .sides .dot{transform:rotate(45deg) scale(1)}
  .sides .lbl,.sides .cap,.sides .said{opacity:1;transform:none}
}


}



/* ---------- practice area furniture ---------- */
.words{margin:52px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.words a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--cream);
  border:1px solid var(--border);border-radius:999px;padding:13px 22px;color:var(--navy);
  font-weight:700;font-size:16px;transition:background .22s ease,border-color .22s ease}
.words a:hover{background:var(--blush);border-color:#EBD3C4}
.words a span{color:var(--red)}
.blushed .words a{background:var(--blush)}
.blushed .words a:hover{background:#F7DFD4}
.tools{margin:52px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.tools a{background:var(--cream);padding:28px 26px 30px;text-decoration:none;color:inherit;display:block;transition:background .22s ease}
.tools a:hover{background:var(--blush)}
.tools h2,.tools h3{max-width:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.025em;margin:0 0 9px}
.tools p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--muted)}
.tools .go{font-weight:700;font-size:14.5px;color:var(--red)}
@media (max-width:900px){ .tools{grid-template-columns:1fr} }

/* ---------- filters, lists and forms ---------- */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.search{margin:40px 0 0;position:relative;max-width:520px}
.search input{width:100%;font:400 16.5px/1.5 'Hanken Grotesk',sans-serif;color:var(--navy);
  background:none;border:1px solid var(--border);border-radius:999px;padding:14px 46px 14px 22px;
  transition:border-color .2s ease,background .2s ease;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--muted);opacity:.75}
.search input:focus{outline:none;border-color:var(--navy);background:var(--blush)}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border:0;background:none;color:var(--muted);font:400 20px/1 'Hanken Grotesk',sans-serif;
  cursor:pointer;border-radius:999px;transition:color .2s ease,background .2s ease}
.search .clear:hover{color:var(--red);background:var(--blush)}
.search .clear[hidden]{display:none !important}
.more{margin:30px 0 0}
.more[hidden]{display:none !important}
.more button{background:none;border:1px solid var(--border);border-radius:999px;padding:12px 24px;
  font:700 14.5px/1 'Hanken Grotesk',sans-serif;color:var(--muted);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.more button:hover{background:var(--blush);color:var(--navy);border-color:var(--navy)}
.empty{margin:34px 0 0;padding:46px 0;border-top:1px solid var(--border);font-size:16.5px;color:var(--muted)}
.empty[hidden]{display:none !important}
.empty b{font-weight:700;color:var(--navy)}
.filters{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:9px}
.filters button{background:none;border:1px solid var(--border);border-radius:999px;padding:10px 19px;
  font:700 14.5px/1 'Hanken Grotesk',sans-serif;color:var(--muted);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.filters button:hover{background:var(--blush);color:var(--navy)}
.filters button.on{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.count-line{margin:26px 0 0;font-size:14.5px;color:var(--muted)}

.list{margin:34px 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column}
.list a{display:grid;grid-template-columns:1fr 210px;gap:20px 34px;align-items:start;padding:26px 0;
  border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background .2s ease}
.list a:hover{background:var(--blush)}
.list a:hover h2,.list a:hover h3{color:var(--red)}
.list h2,.list h3{max-width:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;line-height:1.28;
  letter-spacing:-.03em;margin:0 0 8px;transition:color .2s ease}
.list p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.list .meta{text-align:right;color:var(--red);padding-top:3px}
.list a[hidden]{display:none !important}

.form{margin:44px 0 0;max-width:640px}
.form label{display:block;margin:0 0 7px;font:700 10px/1 'Hanken Grotesk',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.form .row{margin:0 0 22px}
.form input,.form select,.form textarea{width:100%;font:400 16.5px/1.5 'Hanken Grotesk',sans-serif;
  color:var(--navy);background:var(--cream);border:1px solid var(--border);border-radius:4px;padding:14px 16px}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.form button{background:var(--red);color:var(--cream);border:0;border-radius:999px;padding:17px 34px;
  font:700 16.5px/1 'Hanken Grotesk',sans-serif;cursor:pointer}
.form button:hover{background:#C7371E}
.form button[disabled]{opacity:.6;cursor:default}
.form .err{margin:0 0 18px;color:var(--red);font-weight:700;font-size:15px}
.form .after{margin:16px 0 0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.sent{margin:44px 0 0;padding:34px 36px;background:var(--blush);max-width:640px}
.sent h2{font-size:26px;margin:0 0 12px}
.sent p{margin:0;font-size:16.5px;line-height:1.7;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.side h4,.side .fcol{font:700 10px/1 'Hanken Grotesk',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-family:'Hanken Grotesk',sans-serif}
.side .big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.03em;color:var(--red);text-decoration:none;display:block;margin:0 0 30px}
.side p{margin:0 0 30px;font-size:16px;line-height:1.7;color:var(--muted)}
@media (max-width:900px){
  .list a{grid-template-columns:1fr}
  .list .meta{text-align:left}
  .split{grid-template-columns:1fr;gap:40px}
}

/* ---------- guide article ---------- */
.article{padding:88px 52px 20px}
.article .in{max-width:760px;margin:0 auto}
.article .back{display:inline-block;margin:0 0 30px;text-decoration:none;color:var(--muted);
  font-weight:600;font-size:15px}
.article .back:hover{color:var(--red)}
.article .kicker{display:block;margin:0 0 18px;color:var(--red)}
.article h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(31px,3.9vw,52px);line-height:1.06;margin:0 0 30px}
.article h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,2.4vw,31px);line-height:1.18;margin:56px 0 18px}
.article h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:21px;line-height:1.25;margin:38px 0 14px}
.article p{font-size:18px;line-height:1.78;margin:0 0 22px;color:var(--navy)}
.article > .in > p:first-of-type{font-size:20.5px;line-height:1.68;color:var(--muted)}
.article ul,.article ol{margin:0 0 26px;padding:0 0 0 22px}
.article li{font-size:18px;line-height:1.72;margin:0 0 13px;color:var(--navy)}
.article li strong{font-weight:700}
.article a{color:var(--red);font-weight:600}
.article .callout{margin:44px 0;padding:32px 34px;background:var(--deep);color:var(--cream);border-radius:3px}
.article .callout .lbl{display:block;margin:0 0 12px;color:var(--red)}
.article .callout p{margin:0;color:var(--cream);font-size:17.5px;line-height:1.72;opacity:.92}
.article .upto{margin:38px 0 0;font-size:15.5px;line-height:1.7;color:var(--muted)}
.article .upto a{color:var(--red);font-weight:600}
.article .fine{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--border);
  font-size:14.5px;line-height:1.7;color:var(--muted)}
/* ---------- guide lists on the practice pages ---------- */
.readlist{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 46px;border-top:1px solid var(--border)}
.readlist a{display:block;padding:18px 12px 18px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border);transition:background .2s ease,padding .2s ease}
.readlist a:hover{background:var(--blush);padding-left:12px}
.readlist a:hover .t{color:var(--red)}
.readlist .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;
  line-height:1.34;letter-spacing:-.03em;transition:color .2s ease}
.cluster .hubs{margin:38px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 46px;
  border-top:1px solid var(--border);padding-top:34px}
.cluster .hub{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:23px;letter-spacing:-.03em;color:var(--navy);text-decoration:none;margin:0 0 4px}
.cluster .hub span{color:var(--red)}
.cluster .hub:hover{color:var(--red)}
.cluster .hubs ul{list-style:none;margin:0;padding:0}
.cluster .hubs li a{display:block;padding:13px 10px 13px 0;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--muted);font-size:15.5px;font-weight:600;
  transition:color .2s ease,padding .2s ease}
.cluster .hubs li a:hover{color:var(--red);padding-left:10px}
.cluster .hubs li:first-child a{border-top:1px solid var(--border)}
@media (max-width:760px){ .cluster .hubs{grid-template-columns:1fr;gap:34px} }
.cluster .readlist{margin-top:26px}
.reading .more{display:inline-block;margin:32px 0 0;font-weight:700;font-size:15px;
  color:var(--red);text-decoration:none}
.reading .more:hover{text-decoration:underline}
@media (max-width:800px){ .readlist{grid-template-columns:1fr;gap:0} }

.strands{padding:0 52px 8px}
.strandrow{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.strandrow .cap{color:var(--muted);opacity:.8;margin-right:4px}
.strandrow a{display:inline-block;padding:9px 18px;border:1px solid var(--border);border-radius:999px;
  font:700 14.5px/1 'Hanken Grotesk',sans-serif;color:var(--navy);text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.strandrow a:hover{background:var(--red);border-color:var(--red);color:var(--cream)}
@media (max-width:760px){ .strands{padding:0 26px 8px} }

.sec.areas{padding-top:8px}
.sec.areas .grouplbl:first-child{margin-top:36px}
/* the cards are cream, so on a cream strip they need their own edge */
.sec.areas .grid{border-color:#EADCC8;background:#EADCC8}
.sec.areas .cell{background:var(--cream)}
.sec.areas .cell:hover{background:var(--blush)}

.toolstrip{background:var(--blush);padding:34px 52px}
.toolstrip .in{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.toolstrip .lbl{display:block;color:var(--red);margin:0 0 9px}
.toolstrip h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-.03em;line-height:1.2;margin:0 0 7px;max-width:none}
.toolstrip p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:52ch}
.toolstrip .btn{flex:none;padding:14px 26px;font-size:15px}
@media (max-width:760px){
  .toolstrip{padding:28px 26px}
  .toolstrip .in{flex-direction:column;align-items:flex-start;gap:20px}
}

/* ---------- related reading ---------- */
.related{padding:0 52px 82px;background:var(--cream)}
.related .in{max-width:760px;margin:0 auto;border-top:1px solid var(--border);padding-top:38px}
.related .lbl{display:block;margin:0 0 22px;font:700 10px/1 'Hanken Grotesk',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related a{display:grid;grid-template-columns:1fr auto;gap:14px 26px;align-items:baseline;
  padding:19px 14px 19px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border);transition:background .2s ease,padding .2s ease}
.related li:first-child a{border-top:1px solid var(--border)}
.related a:hover{background:var(--blush);padding-left:14px}
.related a:hover .t{color:var(--red)}
.related .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18.5px;
  line-height:1.32;letter-spacing:-.03em;transition:color .2s ease}
.related .c{font:700 10px/1.6 'Hanken Grotesk',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:.8}
@media (max-width:700px){
  .related{padding:0 26px 60px}
  .related a{grid-template-columns:1fr;gap:7px}
  .related .t{font-size:17.5px}
}
.guide-cta{background:var(--blush);padding:66px 52px}
.guide-cta .in{max-width:760px;margin:0 auto}
.guide-cta h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(25px,2.7vw,36px);line-height:1.12;margin:0 0 16px}
.guide-cta p{margin:0 0 28px;font-size:17.5px;line-height:1.7;color:var(--muted)}
.guide-cta .btns{margin:0}
@media (max-width:900px){
  .article{padding:70px 26px 20px}
  .guide-cta{padding:52px 26px}
  .article p,.article li{font-size:17px}
}

/* noscript fallback for the reel: real content for anyone, and anything, without JS */
.reel-fallback{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.reel-fallback a{display:block;text-decoration:none;color:var(--navy);font-size:17px;line-height:1.6}
.reel-fallback b{color:var(--red)}

/* ---------- the Q lifts off the mark and reads what is underneath ---------- */
.lens{background:var(--deep);color:var(--cream);padding:104px 52px 118px;overflow:hidden}
.lens .in{max-width:1180px;margin:0 auto;position:relative}
.lens .eyebrow{color:var(--red);opacity:1}
.lens h2{font-size:clamp(27px,3.4vw,46px);max-width:19ch;margin:0}
.lens h2 em{font-style:normal;color:var(--red)}
.lens .stage{position:relative;margin:64px 0 0;min-height:300px;padding-top:158px}

/* the mark, sitting quietly until it is needed */
.lens .mark{position:absolute;left:0;top:0;height:76px;width:auto;display:block}
.lens .mark .qq{transition:opacity .25s ease}
.lens .mark.lifted .qq{opacity:0}

.lens .lines{position:relative;margin:0;max-width:900px}
.lens .line{position:relative;opacity:0;transition:opacity .5s ease;pointer-events:none;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(21px,2.5vw,34px);line-height:1.32;margin:0}
.lens .line.on{opacity:1}
.lens .line+.line{position:absolute;left:0;top:0;right:0}
.lens .surface{display:block;color:#7E96AA;clip-path:inset(0 0 0 0)}
/* the true reading sits exactly on top, hidden until the glass has passed */
.lens .under{position:absolute;left:0;top:0;right:0;color:var(--cream);
  clip-path:inset(0 100% 0 0)}
.lens .under b{color:var(--red);font-weight:800}

/* the glass itself */
.lens .glass{position:absolute;left:0;top:0;width:88px;height:88px;opacity:0;
  transform:translate(-50%,-50%);pointer-events:none;will-change:transform}
.lens .glass.up{opacity:1}
.lens .glass svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}

@media (max-width:760px){
  .lens{padding:78px 26px 92px}
  .lens .stage{min-height:300px}
  .lens .stage{padding-top:120px}
  .lens .glass{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  .lens .glass{display:none}
  .lens .mark.lifted .qq{opacity:1}
  .lens .under{clip-path:none;position:static}
  .lens .surface{display:none}
  .lens .line{opacity:1;position:static!important;margin:0 0 22px}
}