@import url("fonts.css");
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

/* ============================================================
   11am.pro - ported from Robert's approved artifacts.
   Two hard rules:
   1. Body copy is ALWAYS a full-width justified block
      (no narrow measures, no ragged short lines).
   2. No centre alignment anywhere. Headings left + balanced.
   Client colour lives ONLY inside a screenshot frame.
   ============================================================ */

:root{
  --paper:#ffffff; --ink:#0a0a0a;
  --grotesk:"Alte Haas Grotesk","AlteHaasGrotesk","Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
  /* client brand colour - only inside screenshots */
  --c-blue:#1f4bff; --c-ink:#0b1220; --c-coral:#ff5a3c; --c-green:#12b886;
  --c-amber:#ffb020; --c-violet:#7048e8; --c-cloud:#eef1fb;
  /* consolidated type scale: display / heading / sub / lead / body(17) / label(11) */
  --fs-display:clamp(38px,5.2vw,64px);
  --fs-head:clamp(26px,3.1vw,34px);
  --fs-sub:clamp(18px,1.8vw,21px);
  --fs-lead:clamp(17px,1.5vw,20px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:#ffffff;overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--grotesk);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em}
::selection{background:#000;color:#fff}

/* Hard rule 1: body copy full-width justified, hyphenated */
p{text-align:justify;text-justify:inter-word;hyphens:auto}
/* Hard rule 2: nothing is centre-aligned. Headings stay left. */
h1,h2,h3,h4,h5,h6{text-align:left}
/* Headings break only at sentence/clause boundaries, never mid-phrase.
   Each .ln is a complete phrase on its own line; tight leading. */
.ln{display:block}
h1,h2{line-height:.92}

.wrap{max-width:1200px;margin:0 auto;padding:0 34px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.lg{display:block;height:auto;aspect-ratio:2450.58/1120;overflow:visible;fill:var(--ink);color:var(--ink)}
.lg use{fill:currentColor}

/* Visible focus on every control (mockups omit it; the build must not) */
:where(a,button,input,textarea,summary):focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---- Overprint signature texture ----
   Sits fully on-screen (no bleed off the edge) with a soft gaussian blur. */
.op{position:absolute;right:0;max-width:100%;font-weight:700;letter-spacing:-.045em;line-height:.8;opacity:.30;
  -webkit-text-stroke:1px var(--ink);color:transparent;pointer-events:none;z-index:0;white-space:nowrap;
  user-select:none;will-change:transform;filter:blur(3px)}

/* ---- Nav ---- */
.bar{display:flex;justify-content:space-between;align-items:center;padding:34px 0 0;gap:20px}
body.home .bar{padding-top:28px}
.wm{font-family:var(--grotesk);font-weight:700;letter-spacing:-.07em;line-height:1;color:var(--ink);display:inline-block}
.bar .lg{width:150px}
.bar .nav{display:flex;gap:28px;flex-wrap:wrap}
.bar .nav a{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.bar .nav a[aria-current="page"]{border-bottom:2px solid var(--ink);padding-bottom:3px}

/* ---- Hero (home): editorial intro, content-sized. No first-fold stretch. ---- */
.hero{position:relative;overflow:visible;padding:70px 0 0}
body.home .hero{padding:20px 0 0}
.hero .op{top:8px;font-size:clamp(64px,14vw,200px)}
.hero .kick{position:relative;z-index:2;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hero-main{position:relative;z-index:2;margin-top:44px}
.hero h1{position:relative;z-index:2;font-size:var(--fs-display);font-weight:700;letter-spacing:-.06em;
  line-height:.9;margin:0}
.hero .lead{position:relative;z-index:2;margin-top:22px}
.hero .lead p{margin:0;font-size:clamp(16px,1.35vw,18px);line-height:1.5}
.hero .btnrow{margin-top:26px}
body.home .hero + .sec{padding-top:44px}
@media(min-width:821px){
  .hero h1 .ln{white-space:nowrap}
  .hero .btnrow{flex-wrap:nowrap}
}
@media(max-width:760px){
  body.home .bar{padding-top:20px}
  body.home .hero{padding:16px 0 0}
  .hero .lead{margin-top:18px}
  .hero .btnrow{margin-top:22px}
}
.cta{white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:100px;padding:14px 26px;background:var(--paper);color:var(--ink);
  cursor:pointer;transition:background .15s ease,color .15s ease;font-family:inherit}
.cta:hover{background:var(--ink);color:var(--paper)}
.cta.big{font-size:16px;padding:20px 42px;letter-spacing:.12em}

/* ---- Section scaffold ---- */
.sec{position:relative;overflow:visible;padding:96px 0 0}
.sec .op{font-size:clamp(60px,13vw,180px)}
.sechead{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:14px;margin-bottom:40px}
.sechead h2{font-size:var(--fs-head);font-weight:700;letter-spacing:-.05em;margin:0}

/* ---- Split sections: title rail left, content right, overprint left. ---- */
.sec.split{display:grid;grid-template-columns:minmax(180px,.32fr) minmax(0,1fr);column-gap:48px;align-items:start}
.sec.split>.op{left:0;right:auto;grid-column:1/-1}
.sec.split>.sechead{grid-column:1;grid-row:1/-1;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;margin-bottom:0;gap:14px}
.sec.split>.sechead .eyebrow{order:-1;text-align:left;align-self:flex-start}
.sec.split>.sechead h2,.sec.split>.sechead h2 .ln{text-align:left;margin-left:0}
.sec.split>:not(.op):not(.sechead){grid-column:2}
@media(min-width:761px){
  .sec.split .dogrid{grid-template-columns:1fr 1fr}
  .sec.split .themes{grid-template-columns:1fr 1fr}
  .sec.split .rgroups{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .sec.split{display:block}
  .sec.split>.sechead{margin-bottom:40px}
}

/* ---- Invert: full-bleed ink, white type, overprint left ---- */
.invert{background:var(--ink);color:var(--paper);color-scheme:dark;overflow:visible;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
  padding-left:max(34px,calc(50vw - 566px));padding-right:max(34px,calc(50vw - 566px));box-sizing:border-box}
.sec.invert{padding-top:96px;padding-bottom:96px}
.contact.invert{padding-top:120px;padding-bottom:96px}
.bar+.contact.invert{padding-top:70px}
.contact.invert+.contact.invert{padding-top:48px}
.sec:has(+ .invert),.phead:has(+ .invert),.contact:has(+ .invert){padding-bottom:56px}
.invert .op{left:0;right:auto;-webkit-text-stroke:1px var(--paper)}
.invert :where(a,button,input,textarea,summary):focus-visible{outline-color:var(--paper)}
.invert ::selection{background:#fff;color:#000}
.invert .muted{opacity:.72}
.invert .lg{color:var(--paper);fill:var(--paper)}
.invert a.mail,.invert .contact a.mail{border-bottom-color:currentColor}
.invert .wtext a.go{border-bottom-color:currentColor}
.invert .contact{color:inherit}
.invert .contact .op{-webkit-text-stroke:1px var(--paper)}

/* ---- Approach: four themes ---- */
.themes{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:44px 40px}
.themes .t .n{font-size:13px;font-weight:700;letter-spacing:.06em}
.themes .t h3{font-size:var(--fs-sub);font-weight:700;letter-spacing:-.03em;margin:14px 0 10px;line-height:1.02}
.themes .t p{margin:0;font-size:14px;line-height:1.5}
@media(max-width:820px){.themes{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.themes{grid-template-columns:1fr}}

/* ---- What I do ---- */
.dogrid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px}
.dogrid .d{font-weight:700;font-size:var(--fs-sub);letter-spacing:-.03em;line-height:1.1}
.dogrid .d span{display:block;font-weight:500;font-size:14px;letter-spacing:-.01em;margin-top:8px}
@media(max-width:820px){.dogrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dogrid{grid-template-columns:1fr}}
.leadp{position:relative;z-index:2;font-size:var(--fs-lead);line-height:1.45}
.muted{position:relative;z-index:2;font-size:14px;line-height:1.5;opacity:.62}

/* ---- Work teasers (home) ---- */
.works{position:relative;z-index:2;display:grid;gap:40px}
.work{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.work:nth-child(even){grid-template-columns:1.05fr 1fr}
.work:nth-child(even) .wtext{order:2}
.wtext{min-width:0}
.wtext .m{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.wtext h3{font-size:var(--fs-head);font-weight:700;letter-spacing:-.04em;margin:12px 0 12px;line-height:1}
.wtext p{margin:0 0 18px;font-size:15px;line-height:1.55}
.wtext a.go{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding-bottom:3px}
@media(max-width:760px){.work,.work:nth-child(even){grid-template-columns:1fr}.work:nth-child(even) .wtext{order:0}}

/* ---- Framed thumbnail (home + work index) ---- */
.frame{position:relative;z-index:2;border:1.5px solid var(--ink);background:#ffffff;overflow:hidden}
.thumbchrome{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1.5px solid var(--ink)}
.thumbchrome .dot{width:9px;height:9px;border:1.5px solid var(--ink);border-radius:50%}
.thumbchrome .addr{margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.02em;opacity:.7}
.shot{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--c-cloud);display:flex}
.shot .side{width:34%;background:var(--c-ink);padding:14px 12px;display:flex;flex-direction:column;gap:7px}
.shot .side .b{height:9px;border-radius:100px;background:var(--c-blue)}
.shot .side .g{height:7px;width:70%;border-radius:100px;background:#39415e}
.shot .main{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px}
.shot .bars{display:flex;align-items:flex-end;gap:10px;flex:1}
.shot .bars i{flex:1;border-radius:4px 4px 0 0}
.shot .row{height:12px;border-radius:100px;background:#dfe3f2}
.shot .row.s{width:60%}
.shot.soon{background:#ffffff;align-items:center;justify-content:center}
.shot.soon span{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
figcaption{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.02em;display:flex;
  justify-content:space-between;gap:14px}
figcaption span:last-child{opacity:.55;text-transform:uppercase;letter-spacing:.16em;font-size:10px}

/* ---- Pricing ---- */
.price{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}
.price .p .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.price .p h3{font-size:var(--fs-sub);font-weight:700;letter-spacing:-.03em;margin:14px 0 10px}
.price .p p{margin:0;font-size:14.5px;line-height:1.5}
.pricenote{position:relative;z-index:2;margin-top:40px;font-size:var(--fs-lead);font-weight:500;
  letter-spacing:-.02em;line-height:1.3}
@media(max-width:760px){.price{grid-template-columns:1fr;gap:30px}}

/* ---- Contact ---- */
.contact{position:relative;overflow:visible;padding:120px 0 40px}
.contact .op{top:8%;font-size:clamp(64px,15vw,210px)}
.contact h2{position:relative;z-index:2;font-size:var(--fs-display);font-weight:700;letter-spacing:-.06em;
  line-height:.9;margin:0}
.contact .row{position:relative;z-index:2;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-top:40px;align-items:flex-end}
.contact a.mail{font-size:var(--fs-sub);font-weight:700;letter-spacing:-.03em;
  border-bottom:3px solid currentColor;padding-bottom:4px}
.contact .sub{font-size:14px;flex:1 1 40%;line-height:1.5}
.contact .lede{position:relative;z-index:2;margin:28px 0 0;font-size:var(--fs-lead);line-height:1.45}
.contact .btnrow{position:relative;z-index:2;margin-top:36px}

/* ---- Footer ---- */
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:60px 0 90px}
.foot .lg{width:120px}
.foot .fn{display:flex;gap:24px;flex-wrap:wrap}
.foot .fn a{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ============================================================
   WORK INDEX
   ============================================================ */
.phead{position:relative;overflow:visible;padding:64px 0 0}
.phead .op{top:8px;font-size:clamp(64px,14vw,200px)}
.phead .kick{position:relative;z-index:2;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.phead h1{position:relative;z-index:2;font-size:var(--fs-display);font-weight:700;letter-spacing:-.06em;
  line-height:.92;margin:18px 0 0}
.phead p{position:relative;z-index:2;font-size:var(--fs-lead);line-height:1.45;margin:22px 0 0}

.list{display:grid;gap:80px;padding:40px 0 0}
.entry{position:relative;overflow:visible;display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center}
.entry:nth-child(even){grid-template-columns:1.05fr 1fr}
.entry:nth-child(even) .etext{order:2}
.entry .op{top:0;font-size:clamp(56px,12vw,160px);opacity:.20}
.etext{position:relative;z-index:2;min-width:0}
.etext .idx{font-size:13px;font-weight:700;letter-spacing:.14em}
.etext .m{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:14px}
.etext h2{font-size:var(--fs-head);font-weight:700;letter-spacing:-.045em;line-height:.98;margin:12px 0 14px}
.etext p{margin:0 0 18px;font-size:15.5px;line-height:1.55}
.etext .stat{display:flex;gap:30px;flex-wrap:wrap;margin:0 0 22px}
.etext .stat b{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.04em;display:block;font-variant-numeric:tabular-nums}
.etext .stat span{font-size:12px;font-weight:600;line-height:1.3;display:block;margin-top:4px}
.etext a.go{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding-bottom:3px}
.entry.pending .etext{opacity:.72}
@media(max-width:760px){.entry,.entry:nth-child(even){grid-template-columns:1fr;gap:26px}.entry:nth-child(even) .etext{order:0}}

/* ============================================================
   CASE STUDY
   ============================================================ */
.head{position:relative;overflow:visible;padding:60px 0 0}
.head .op{top:8px;font-size:clamp(64px,14vw,200px)}
.head .kick{position:relative;z-index:2;display:flex;gap:14px;flex-wrap:wrap;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase}
.head h1{position:relative;z-index:2;font-size:var(--fs-display);font-weight:700;letter-spacing:-.055em;
  line-height:.98;margin:20px 0 0}
.head .dek{position:relative;z-index:2;font-size:var(--fs-lead);line-height:1.42;margin:22px 0 0}

.meta{position:relative;overflow:visible;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:52px;padding:10px 0 14px}
.meta>.op{top:0;opacity:.4;font-size:clamp(56px,10vw,140px)}
.meta>div{position:relative;z-index:2}
.meta>.op{position:absolute;z-index:0}
.meta .l{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.meta .v{font-size:var(--fs-sub);font-weight:700;letter-spacing:-.035em;margin-top:12px}
@media(max-width:760px){.meta{grid-template-columns:repeat(2,1fr);gap:34px 40px}}

.figure{margin:56px 0 0}
.figure .frame{position:relative;z-index:2}
.chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1.5px solid var(--ink);background:#ffffff}
.chrome .dot{width:11px;height:11px;border:1.5px solid var(--ink);border-radius:50%}
.chrome .addr{margin-left:10px;flex:1;border:1px solid var(--ink);border-radius:100px;padding:5px 12px;
  font-size:11px;font-weight:600;letter-spacing:.02em;background:#fff}
.figcap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:12px;font-weight:600;
  letter-spacing:.02em;flex-wrap:wrap}
.figcap span:last-child{opacity:.6;text-transform:uppercase;letter-spacing:.16em;font-size:10.5px}

/* client product UI (loud colour, contained) */
.app{display:grid;grid-template-columns:150px 1fr;min-height:380px;background:var(--c-cloud);color:var(--c-ink);
  font-size:13px;letter-spacing:normal}
.app *{box-sizing:border-box}
.app .side{background:var(--c-ink);color:#fff;padding:18px 16px;display:flex;flex-direction:column;gap:5px}
.app .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:14px}
.app .brand i{width:16px;height:16px;background:var(--c-blue);border-radius:5px;display:block}
.app .side a{color:#c8cfe6;font-weight:600;padding:8px 10px;border-radius:8px;font-size:12.5px}
.app .side a.on{background:var(--c-blue);color:#fff}
.app .main{padding:20px 22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.app .apphead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.app .apphead h4{margin:0;font-size:19px;font-weight:700}
.app .pill{background:var(--c-blue);color:#fff;font-weight:700;font-size:12px;padding:7px 14px;border-radius:100px}
.app .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app .tile{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 0 rgba(11,18,32,.06)}
.app .tile .n{font-size:26px;font-weight:800;letter-spacing:-.02em}
.app .tile .k{font-size:11px;font-weight:600;color:#6b7488;margin-top:3px}
.app .tile.b .n{color:var(--c-blue)} .app .tile.g .n{color:var(--c-green)} .app .tile.o .n{color:var(--c-coral)}
.app .board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.app .col{background:#fff;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.app .col h5{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between}
.app .col h5 b{color:#fff;background:#9aa3b8;border-radius:100px;font-size:10px;padding:1px 7px}
.app .col:nth-child(1) h5 b{background:var(--c-blue)} .app .col:nth-child(2) h5 b{background:var(--c-amber)}
.app .col:nth-child(3) h5 b{background:var(--c-green)} .app .col:nth-child(4) h5 b{background:var(--c-coral)}
.app .card{border:1px solid #e7e9f2;border-radius:9px;padding:9px;display:flex;gap:8px;align-items:center}
.app .card .av{width:26px;height:26px;border-radius:50%;flex:none}
.app .card .nm{font-size:12px;font-weight:700;line-height:1.1}
.app .card .rl{font-size:10.5px;color:#6b7488}
@media(max-width:720px){.app{grid-template-columns:1fr}.app .side{flex-direction:row;flex-wrap:wrap}.app .board{grid-template-columns:1fr 1fr}.app .tiles{grid-template-columns:1fr}}

.story{padding:70px 0 0}
.story h2{font-size:var(--fs-head);font-weight:700;letter-spacing:-.04em;margin:0 0 26px}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:44px}
.cols .blk .l{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.cols .blk p{margin:0 0 12px;font-size:15px;line-height:1.55}
@media(max-width:720px){.cols{grid-template-columns:1fr;gap:26px}}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}
.triad .b .s{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.triad .b h4{font-size:var(--fs-sub);font-weight:700;letter-spacing:-.035em;margin:0 0 12px;line-height:1.04}
.triad .b p{margin:0;font-size:14px;line-height:1.55}
@media(max-width:760px){.triad{grid-template-columns:1fr;gap:30px}}

.outcome{margin-top:96px;position:relative;overflow:visible;padding:8px 0 0}
.outcome .op{top:8%;font-size:clamp(64px,15vw,210px)}
.oey{position:relative;z-index:2;display:block;margin-bottom:34px}
.oflow{position:relative;z-index:2;display:flex;align-items:flex-end;gap:clamp(28px,6vw,84px);flex-wrap:wrap}
.owas{font-weight:700;letter-spacing:-.045em;opacity:.38;line-height:.86;white-space:nowrap;
  font-size:var(--fs-sub);font-variant-numeric:tabular-nums}
.owas s{text-decoration-thickness:2px}
.owas small{font-size:.4em;font-weight:700;letter-spacing:-.01em}
.onow{font-weight:700;letter-spacing:-.06em;line-height:.8;white-space:nowrap;
  font-size:var(--fs-display);font-variant-numeric:tabular-nums}
.onow small{font-size:.19em;font-weight:700;letter-spacing:-.02em}
.osub{position:relative;z-index:2;margin:40px 0 0;font-size:var(--fs-lead);font-weight:500;
  letter-spacing:-.025em;line-height:1.28}

.twoup{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;margin-top:56px;align-items:start}
@media(max-width:720px){.twoup{grid-template-columns:1fr}}
.phone{border:1.5px solid var(--ink);border-radius:26px;overflow:hidden;max-width:280px;margin:0 auto;background:#fff}
.phone .top{height:26px;border-bottom:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.phone .top i{width:60px;height:5px;border-radius:100px;background:var(--ink)}
.phone .p{background:var(--c-ink);color:#fff;padding:18px 16px 22px}
.phone .p .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8ea0ff}
.phone .p h6{margin:8px 0 12px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.phone .p .row{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid rgba(255,255,255,.14);font-size:12px}
.phone .p .row b{color:var(--c-green)} .phone .p .row.a b{color:var(--c-amber)}

.pull{margin-top:70px;position:relative;overflow:visible;padding:44px 0}
.pull .op{top:0;font-size:clamp(64px,15vw,210px)}
.pull p{position:relative;z-index:2;font-size:var(--fs-head);font-weight:700;letter-spacing:-.03em;
  line-height:1.06;margin:0;text-align:left;hyphens:manual}
.pull cite{position:relative;z-index:2;display:block;margin-top:18px;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-style:normal}

.casenav{margin-top:80px;padding:26px 0 90px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.casenav a{font-weight:700;letter-spacing:-.02em}
.casenav .next{font-size:clamp(20px,3vw,30px)}

/* ---- About page ---- */
.about-body{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:44px;margin-top:40px}
.about-body p{margin:0 0 14px;font-size:16px;line-height:1.6}
.about-body .kicker{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
@media(max-width:720px){.about-body{grid-template-columns:1fr;gap:26px}}
.closingline{position:relative;z-index:2;font-size:var(--fs-head);font-weight:700;letter-spacing:-.035em;
  line-height:1.05;margin:40px 0 8px;text-align:left}

/* ---- Contact form (input-like controls may have borders) ---- */
.cform{position:relative;z-index:2;display:grid;gap:18px;max-width:520px;margin-top:12px}
.cform label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:8px}
.cform input,.cform textarea{width:100%;padding:14px 16px;border:1.5px solid var(--ink);background:var(--paper);
  color:var(--ink);font:inherit;font-size:15px}
.cform textarea{resize:vertical}
.cform .note{font-size:12.5px;opacity:.62;line-height:1.5}

/* ---- Responsive nav wrap ---- */
@media(max-width:760px){
  body{font-size:16px}
  .bar{align-items:flex-start;flex-direction:column;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .op{transform:none!important}
}

/* ============================================================
   OPEN-SOURCE TOOLKIT
   Borderless cards — hierarchy by space + weight, per the brand
   (no boxed grids; borders only on frames / inputs).
   ============================================================ */
.kit{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:56px 44px;margin-top:8px}
@media(max-width:760px){.kit{grid-template-columns:1fr;gap:44px}}
.tool{position:relative;display:flex;flex-direction:column}
.tool .cat{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.tool h3{font-size:var(--fs-sub);font-weight:700;letter-spacing:-.03em;margin:10px 0 12px;line-height:1.04}
.tool p{margin:0 0 18px;font-size:15px;line-height:1.55}
.tool .how .l{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.tool ol{margin:0;padding-left:20px}
.tool ol li{font-size:14px;line-height:1.5;margin-bottom:7px;text-align:justify;hyphens:auto}
.tool .links{margin-top:18px;display:flex;gap:20px;flex-wrap:wrap}
.tool .links a{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:2px}
.tool.tbd{opacity:.72}

/* ---- Hero button row + primary (filled) CTA ---- */
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;position:relative;z-index:2}
.cta.primary{background:var(--ink);color:var(--paper)}
.cta.primary:hover{background:var(--paper);color:var(--ink)}
.invert .cta{border-color:var(--paper);background:transparent;color:var(--paper)}
.invert .cta:hover{background:var(--paper);color:var(--ink)}
.invert .cta.primary{background:var(--paper);color:var(--ink)}
.invert .cta.primary:hover{background:transparent;color:var(--paper)}
.invert .cform input,.invert .cform textarea{border-color:var(--paper);background:transparent;color:var(--paper)}
.invert .cform .note{opacity:.72}
.invert .tool .links a,.invert .tm-name{border-bottom-color:currentColor}

/* ============================================================
   TOOLKIT MAP  (risk chips, tool rows) + CALCULATOR + READINESS
   ============================================================ */
.toolcat{padding-top:64px}
.tmap{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:22px 22px}
@media(max-width:760px){.tmap{grid-template-columns:1fr;gap:18px}}
.tm{min-width:0;background:var(--paper);border:1.5px solid var(--ink);padding:20px 22px 22px;display:flex;flex-direction:column}
.tm-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tm-name{font-weight:700;font-size:1.15rem;letter-spacing:-.03em;border-bottom:2px solid var(--ink);padding-bottom:2px}
.risk{flex:none;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:100px;padding:2px 9px}
.risk-M{opacity:.55}
.tm-r{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.55;margin-top:12px}
.tm-n{font-size:14.5px;line-height:1.5;margin-top:8px;text-align:justify;hyphens:auto}
.tm-l{font-size:11px;font-weight:600;letter-spacing:.04em;opacity:.5;margin-top:8px}
.tm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.3px solid var(--ink);padding:3px 8px}
.tag-alt{border-style:dashed;opacity:.6}
.tm-cost{font-size:13px;font-weight:600;margin-top:12px;opacity:.75}

/* ---- Calculator ---- */
.calc{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:760px){.calc{grid-template-columns:1fr;gap:40px}}
.calc-form{display:grid;gap:22px}
.fieldrow{display:grid;gap:10px}
.fieldrow>label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.calc select,.calc input[type="number"],.calc input[type="text"]{
  width:100%;padding:13px 15px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
  font:inherit;font-size:1rem;border-radius:0}
.toggles{display:flex;flex-direction:column;gap:10px}
.tog{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;cursor:pointer}
.tog input{width:17px;height:17px;accent-color:var(--ink)}
.calc-out{position:sticky;top:40px}
.calc-fee{font-weight:700;letter-spacing:-.05em;line-height:.95;font-size:clamp(34px,5vw,56px);margin-top:6px;font-variant-numeric:tabular-nums}
.calc-sub{font-weight:700;letter-spacing:-.02em;font-size:1.15rem;margin-top:16px}
.calc-days{font-size:14px;opacity:.6;margin-top:8px}

/* ---- Currency toggle (11am fees only) ---- */
.curr{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.sec.split>.curr{margin-top:0}
.curr button{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:100px;padding:8px 14px;background:var(--paper);color:var(--ink);
  cursor:pointer}
.curr button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.invert .curr button{border-color:var(--paper);background:transparent;color:var(--paper)}
.invert .curr button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.calc-out .curr{margin:10px 0 18px}

/* ---- Readiness ---- */
.rgroups{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px}
@media(max-width:820px){.rgroups{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rgroups{grid-template-columns:1fr}}
.rgroup-h{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;opacity:.55}
.ropt{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.35;font-weight:500;cursor:pointer;margin-bottom:10px}
.ropt input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--ink)}
.rout{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:34px 44px}
@media(max-width:760px){.rout{grid-template-columns:1fr}}
.rrow-p{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.55}
.rrow-o{font-weight:700;letter-spacing:-.02em;font-size:1.1rem;margin-top:8px;line-height:1.15}
.rrow-n{font-size:14px;line-height:1.5;margin-top:8px;text-align:justify;hyphens:auto}

/* ============================================================
   Phone: ~390×844 / ~430×932. No nowrap overflow, stacked
   split/invert, wrap pills, 44px-class touch targets.
   Desktop hero spacing (44px) is unchanged above 760px.
   ============================================================ */
@media(max-width:760px){
  html,body{overflow-x:clip}
  .wrap{padding:0 20px}
  body{font-size:16px}

  .bar{align-items:flex-start;flex-direction:column;gap:12px;padding:22px 0 0}
  .bar .lg{width:118px}
  .bar .nav{gap:4px 16px}
  .bar .nav a{display:inline-block;padding:10px 0;min-height:44px}

  .kick,.hero .kick,.phead .kick,.head .kick{
    letter-spacing:.12em;line-height:1.45;max-width:100%;white-space:normal}
  .ln,.hero h1 .ln,.contact h2 .ln,.sechead h2 .ln,.phead h1 .ln{white-space:normal}

  .hero-main,.lead,.btnrow,h1,h2,h3,.sechead,.price,.dogrid,.themes{min-width:0}
  .hero .btnrow{flex-wrap:wrap}

  .cta{white-space:normal;max-width:100%;box-sizing:border-box;padding:14px 18px;
    letter-spacing:.1em;min-height:48px;display:inline-flex;align-items:center;text-align:left}
  .cta.big{font-size:14px;padding:16px 20px;letter-spacing:.08em}
  .btnrow{align-items:stretch}
  .btnrow .cta{width:100%;justify-content:flex-start}

  .op{opacity:.14;font-size:clamp(40px,15vw,80px);max-width:100%;overflow:hidden}
  .hero .op,.phead .op,.contact .op,.sec .op,.head .op{font-size:clamp(40px,15vw,80px)}
  .hero,.sec,.phead,.contact,.head{overflow-x:clip}

  .invert{
    width:auto;max-width:none;
    margin-left:-20px;margin-right:-20px;
    padding-left:20px;padding-right:20px}
  .sec{padding-top:64px}
  .sec.invert{padding-top:56px;padding-bottom:56px}
  .contact{padding:64px 0 28px}
  .contact.invert,.sec.invert.contact{padding-top:56px}
  .phead{padding-top:40px}

  .contact .row{flex-direction:column;align-items:flex-start;gap:16px;margin-top:24px}
  .contact a.mail{font-size:18px;overflow-wrap:anywhere}
  .contact .sub{flex:none;width:100%}

  .sechead{gap:10px;margin-bottom:28px}
  .sec.split>.sechead{margin-bottom:24px}

  .curr{gap:8px}
  .curr button{min-height:44px;min-width:48px;padding:10px 14px}

  .cform{max-width:none;margin-top:8px}
  .cform input,.cform textarea,.calc select,.calc input[type="number"],.calc input[type="text"]{
    font-size:16px;min-height:48px}
  .cform textarea{min-height:140px}

  .calc-out{position:static}
  .tog{min-height:44px}
  .ropt{min-height:44px;align-items:center}

  .foot{padding:36px 0 52px;align-items:flex-start;gap:14px}
  .foot .fn{gap:8px 18px}
  .foot .fn a{display:inline-block;padding:10px 0;min-height:44px}

  .dogrid .d,.themes .t,.price .p,.tool{min-width:0}
}
@media(max-width:400px){
  .hero h1,.phead h1,.contact h2,.head h1{font-size:32px;line-height:.94}
}