/* =====================================================================
   HigherHighLabs "workshop, refined": shared layer for every inner page.
   Loaded LAST (after workshop.css and the page's inline <style>).
   Same wall as the homepage: flat paper, white bands with hairlines,
   blue ink as the only accent. No pins, tape, tilts, hand lettering or
   hand-drawn arrows. The homepage keeps its own refined.css on top.
   ===================================================================== */

:root{
  --grid:#e8eef5;
  --grid-major:#d3e0ec;
  --hand:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hair:#d2dbe8;
  --label:600 12px/1.3 var(--sans);
  --sh-card:0 1px 2px rgba(15,25,45,.05);
  --sh-print:0 1px 2px rgba(15,25,45,.06),0 18px 40px -28px rgba(15,25,45,.35);
  --sh-sheet:0 1px 2px rgba(15,25,45,.05);
  --svg-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231c3db4' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --svg-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23d42a20' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --sec:150px;
  --paper:#edf1f7;
  --band:#fff;
}

/* ---------- ground: flat paper, white bands ---------- */
body{background-image:none;background-color:var(--paper)}
.sec{padding:calc(var(--sec)*.7) 0}
.sec--tight{padding-top:calc(var(--sec)*.45)}
.sec--last,.pad-bottom{padding-bottom:calc(var(--sec)*.7)}
.band{background:var(--band);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.foot{background:var(--band);border-top:1px solid var(--hair)}
.logowall{border-top:1px solid var(--hair);border-bottom:0;padding:40px 0}
.logowall p{font-size:15px;color:var(--muted)}

/* ---------- type: bigger, calmer ---------- */
.h1,h1{font-size:clamp(42px,5vw,76px);letter-spacing:-.05em;line-height:1}
.h2,h2{font-size:clamp(36px,4.6vw,68px);letter-spacing:-.045em;line-height:1}
.h3,h3{letter-spacing:-.025em}
.sec-head{margin-bottom:56px}
.sec-head h2,.sec-head .h2{max-width:13em}
.sec-head .sub{margin-top:20px;font-size:19px}
.lead{font-size:20px}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hand{font-family:var(--sans)}

/* ---------- annotations: straight small caps labels, no arrows ---------- */
.note-ink,.anno{font:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transform:none}
.anno{display:inline-flex;align-items:center;gap:8px;max-width:none;padding:0!important}
.anno::before,.anno::after{display:none!important}
.anno--live::before{content:"";display:block!important;position:static;width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--ink-wash);margin:0}
.anno--red{color:var(--red)}
.shot-wrap>.anno{background:#fff;border:1px solid var(--hair);border-radius:99px;padding:7px 12px!important}

/* ---------- marks: straight lines instead of hand-drawn ones ---------- */
.nav-list>li>a[aria-current]::after{left:0;right:0;bottom:0;height:2px;background:var(--text)}
.circled::after,.crumbs [aria-current]::after,.tab[aria-selected="true"]::after{display:none}
.u-red::after{height:2px;min-height:0;bottom:-.06em;background:var(--red)}
.hl{background:linear-gradient(transparent 62%,rgba(28,61,180,.16) 62%)}
.crumbs [aria-current]{padding:0}

/* ---------- materials: flat, straight ---------- */
.pin,.tape{display:none!important}
[class*="tilt-"],.scatter>*,.works>.work .print,.notes>.nt,.step,.gallery .print,.gallery>*,
.phero .print,.phero .spec,.ba .print,.ba .icard,.ba .ba-sheet,.prose .note,.form,.faq{transform:none!important}
.scatter>*{margin-top:0!important}
.print{padding:0;border:1px solid var(--hair);box-shadow:var(--sh-print);border-radius:8px;overflow:hidden;background:#fff}
.work .print{padding:0}
.print .ph{background:#eef2f7}
.print figcaption,.fig-cap{padding:12px 16px 14px;margin:0}
.icard{background-image:none;border:1px solid var(--hair);border-radius:8px;padding-top:34px}
.icard--flush{padding:0}
.icard>.label{position:static;display:block;margin-bottom:14px;font:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.icard h3,.icard p{line-height:1.5}
.sheet{border:1px solid var(--hair);border-radius:8px;padding:44px 44px 36px}
.sticky{background:#fff;border:1px solid var(--hair);border-radius:8px}
.sticky .hand,.sticky.hand{font-family:var(--sans)}
.paper{border-radius:8px}
.sheet-label{font:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}

/* ---------- header ---------- */
.subnav{transform:none;background-image:none;border:1px solid var(--hair);border-radius:8px;box-shadow:0 18px 40px -24px rgba(15,25,45,.35)}
.subnav::before{display:none}

/* ---------- page hero ---------- */
.phero{padding:calc(var(--sec)*.3) 0 0}
.phero h1{font-size:clamp(40px,5vw,72px);max-width:15em}
.phero--center{padding:clamp(40px,5vw,72px) 0 clamp(6px,1.6vw,20px)}
.phero--center h1{font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.052em}
.phero--center .stats>div+div{border-left-color:var(--hair)}
.stats{border-top:1px solid var(--text)}
.stats dd{font-size:44px;font-weight:750;font-variant-numeric:tabular-nums}
.stats dt{font-size:14.5px;color:var(--muted)}
.stats .since{font:var(--label);letter-spacing:.1em;text-transform:uppercase;transform:none}
.phero+.logowall{margin-top:72px}

/* ---------- lists, steps, quotes ---------- */
.clauses li{grid-template-columns:44px 1fr;padding:24px 0}
.clauses li::before{width:30px;height:30px;border:1px solid var(--hair);border-radius:50%;background:var(--svg-check) no-repeat center/18px 18px}
.steps{gap:0;padding:0;border-top:1px solid var(--text)}
.step.icard{background:none;border:0;border-radius:0;box-shadow:none;padding:30px 30px 0 0;min-height:0;margin:0!important}
.step+.step{padding-left:30px;border-left:1px solid var(--hair)}
.step::after{display:none!important}
.step .n{font:500 13px/1 var(--mono);height:auto;color:var(--ink)}
.step h3{margin-top:44px;font-size:26px;line-height:1.15}
.steps .step p{margin-top:14px;line-height:1.6;font-size:16.5px}
.steps-foot{margin-top:44px}
.notes{gap:0 34px;align-items:stretch}
.notes>.nt{margin:0!important;background:none;box-shadow:none;padding:30px 0 52px;display:flex;flex-direction:column;border-top:1px solid var(--text)}
.nt--white{background:none}
.nt blockquote{font:400 20px/1.5 var(--sans);letter-spacing:-.01em;color:var(--text)}
.nt .stars{position:static;order:-1;margin-bottom:18px;font-size:12px;letter-spacing:3px;color:var(--ink)}
.nt .who{margin-top:auto;padding-top:26px}
.nt .who span{font-size:14px}
.cap .hand{font-family:var(--sans);font-size:18px}

/* ---------- work cards ---------- */
.work .print{transition:transform .35s var(--ease),box-shadow .35s}
.work:hover .print{transform:translateY(-4px)!important;box-shadow:0 1px 2px rgba(15,25,45,.06),0 26px 50px -28px rgba(15,25,45,.45)}
.work:hover h3{text-decoration:none;color:var(--ink)}
.work .tags{font-size:14.5px}
.w-more .hand{font:700 clamp(24px,2.2vw,32px)/1.15 var(--sans);letter-spacing:-.035em;color:var(--text)}
.w-more .hand b{display:block;font-size:2.2em;font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--ink);margin-bottom:8px}

/* ---------- tabs, faq ---------- */
.tablist{gap:4px 22px}
.tab{padding:10px 2px;border-bottom:2px solid transparent;border-radius:0}
.tab[aria-selected="true"]{border-bottom-color:var(--ink)}
.faq{border:1px solid var(--hair);border-radius:8px}
.faq summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%231c3db4' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}
.faq details[open]>summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%231c3db4' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}

/* ---------- packages, tables, chips, stamps, scores ---------- */
.pkg--pick{background-color:#fff;background-image:none;border:1.5px solid var(--ink);box-shadow:0 20px 40px -28px rgba(28,61,180,.45)}
.tbl-wrap{border:1px solid var(--hair);border-radius:8px}
.tbl .col-pick{background:rgba(232,238,251,.6)}
.chip--y{background:var(--ink-wash);color:var(--ink)}
.stamp{font:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--ink-wash);border:0;border-radius:99px;padding:8px 12px;transform:none;margin-bottom:24px}
.score b::after,.psi b::after{background:none;border:2px solid var(--ink);border-radius:99px}
.psi b{width:52px;height:38px}

/* ---------- forms ---------- */
.form{border:1px solid var(--hair);border-radius:8px;padding:44px 40px 34px}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{border:1px solid #bccade;border-radius:6px}
.field textarea{background-image:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.err::before{font-family:var(--sans);font-weight:700}
.check input{border:1px solid #9fb0c7}

/* ---------- prose ---------- */
.prose ol li::marker{font-family:var(--sans);font-weight:600}
.prose hr{height:0;border:0;border-top:1px solid var(--hair);background:none;opacity:1}
.prose .note{background:var(--ink-wash);box-shadow:none;border-left:3px solid var(--ink);border-radius:0 6px 6px 0;padding:18px 22px}
.toc li::before{font-family:var(--sans);font-weight:600;font-size:14px}

/* ---------- media ---------- */
.video-frame{padding:0}
.play-mark::after{background:none;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;inset:14px}
.video-frame:hover .play-mark::after{filter:none;background:rgba(255,255,255,.12)}
.ba{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.ba-arrow{display:none}
.ba .ba-label{font:var(--label);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.gallery .print:hover{box-shadow:var(--sh-print);border-color:#bccbe0}

/* ---------- case study pieces ---------- */
.crop .mk,.keyed li::before{font-family:var(--sans);font-weight:700}
.crop .mk{font-size:14px;line-height:28px}
.keyed li::before{font-size:14px;line-height:25px}
.ring{background:none;border:2px solid var(--red);border-radius:50%}
.spec dt{font-size:14px}

/* ---------- cta ---------- */
.cta{padding:calc(var(--sec)*.7) 0}
.cta-box{border:1px solid var(--text);border-radius:10px;padding:64px 56px 56px}
.cta-box .h2{font-size:clamp(34px,4.2vw,60px)}
.cta-box .anno{background:var(--paper)}

/* ---------- landing pages ---------- */
.lp-hero .note-ink{margin-top:22px;max-width:none}

/* ---------- promoted from the page agents: blue instead of red, no rotated reveals ---------- */
.prose blockquote{border-left-color:var(--ink)}
.toc li::before{color:var(--ink)}
.prose ol li::marker{color:var(--ink)}
.wk-motion [data-reveal="pin"]:not(.is-in){transform:translateY(14px)}
.cta-box .eyebrow{max-width:none;margin:0 0 22px;font:var(--label);letter-spacing:.14em;color:var(--ink)}
.ba{align-items:stretch}
.ba .ba-before .ba-label span{text-decoration:none}

@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step+.step{padding-left:0;border-left:0}
  .step:nth-child(2n){padding-left:30px;border-left:1px solid var(--hair)}
  .step:nth-child(n+3){border-top:1px solid var(--hair);margin-top:30px!important}
}
@media (max-width:900px){
  .ba{grid-template-columns:minmax(0,1fr)}
  .nav.open .nav-list>li>a[aria-current]{color:var(--ink)}
}
@media (max-width:640px){
  :root{--sec:104px}
  .h1,h1{font-size:clamp(36px,10.4vw,52px)}
  .h2,h2{font-size:clamp(30px,8.8vw,44px)}
  .phero h1,.phero--center h1{font-size:clamp(36px,10.4vw,52px)}
  .stats dd{font-size:30px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step:nth-child(n){padding-left:0;border-left:0}
  .step+.step{border-top:1px solid var(--hair);margin-top:30px!important}
  .step h3{margin-top:22px}
  .notes{grid-template-columns:minmax(0,1fr)}
  .notes>.nt{padding:26px 0 40px}
  .cta-box{padding:40px 22px 34px}
  .sheet{padding:32px 22px 26px}
  .form{padding:36px 18px 26px}
}
@media (prefers-reduced-motion:reduce){.work .print{transition:none}}

/* sections must read as separate fields: tinted ground vs white bands, cards lifted slightly */
.band{border-color:var(--hair)}
.pf-card,.icard,.sheet,.paper,.faq,.tbl-wrap,.pkg,.nt--white{box-shadow:0 1px 2px rgba(15,25,45,.05),0 10px 24px -18px rgba(15,25,45,.28)}

/* header logo: a bit larger */
.top .logo img{width:72px;height:72px}
@media (max-width:640px){.top .logo img{width:60px;height:60px}}

/* articles: one full-width sheet, readable column centred inside */
.doc--full{grid-template-columns:minmax(0,1fr)}
.doc--full .sheet{padding:72px clamp(24px,6vw,96px) 64px}
.doc--full .sheet>*:not(figure){max-width:920px;margin-left:auto;margin-right:auto}
.doc--full .prose{max-width:920px}

/* article hero: big full-width headline, the figure sits below it */
.phero--article .wrap{grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
.phero--article h1{max-width:none;font-size:clamp(40px,5.6vw,84px);line-height:1.02;letter-spacing:-.05em;margin-top:26px}
.phero--article .lead{max-width:46em}
.phero--article figure{width:100%;margin:0}
.phero--article .lane-tag,.phero--article .serp-tag{letter-spacing:.1em}