/* THE TEARDOWN: one made-up accountancy, as found and fixed, plus the same fixes in three directions.
   Everything inside the browser window is sized in em where 1em = 1cqw of the window, so it scales like a
   screenshot. (Design units: 1000 x 625. One design pixel = 0.1em.) */
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/InstrumentSerif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/InstrumentSerif-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

#teardown{background:var(--paper);border-top:2px solid var(--ink)}
.app{--red:#d4161c;--green:#16864a;background:#fff;border:2px solid var(--ink);border-radius:var(--radius);box-shadow:8px 8px 0 var(--ink);overflow:hidden;overflow:clip}
.app-bar{display:flex;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;padding:.7rem 1rem;background:var(--paper-2);border-bottom:2px solid var(--ink)}
.app-title{display:flex;align-items:center;gap:.6rem;margin-right:auto;font:700 .9rem/1.2 var(--display)}
.app-title .muted{color:var(--muted);font-weight:500}
.lamp{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(212,22,28,.2);flex:none}
.app[data-state=fixed] .lamp{background:var(--green);box-shadow:0 0 0 3px rgba(22,134,74,.22)}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff}
.seg button{font:700 .84rem/1 var(--font);padding:.55rem 1rem;border:0;background:transparent;color:var(--ink);cursor:pointer}
.seg button.on{background:var(--ink);color:var(--lime)}
.seg button+button{border-left:2px solid var(--ink)}
.seg :focus-visible{outline-offset:-4px;box-shadow:none}
.count{font:700 .84rem/1 var(--font);color:var(--muted);min-width:7.5em;text-align:right}
.count b{color:var(--ink);font-family:var(--display);font-size:1.05rem}
.app-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}
.site{container:site/inline-size;padding:clamp(.8rem,2vw,1.4rem);background:#e9e6dc;min-width:0;align-self:stretch}
.chrome{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid #bbb;border-bottom:0;border-radius:10px 10px 0 0;padding:.5rem .7rem;font:500 .74rem/1 var(--font);color:#333;position:relative}
.chrome .lk-found{font-weight:700;white-space:nowrap}
.chrome .url{flex:1;min-width:0;background:#f1f1ee;border-radius:99px;padding:.42rem .8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:.4rem;align-items:center}
.chrome .url svg{width:11px;height:11px;flex:none}
.lk-fixed{display:none}.chrome svg.lk-fixed{width:12px;height:12px}
.app[data-state=fixed] .lk-fixed{display:inline-flex}.app[data-state=fixed] .lk-found{display:none}
.app[data-state=fixed] .chrome>.lk-fixed{color:var(--green)}
.vp{container:vp/inline-size;position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;border:1px solid #bbb;border-radius:0 0 8px 8px}
@container site (max-width:600px){.vp{aspect-ratio:3/4}}
.pg{--d:.1cqw;position:absolute;inset:0;line-height:1.35;color:#000;transition:opacity .35s ease;text-align:left;letter-spacing:0}
.pg.fixed,.app[data-state=fixed] .pg.found{opacity:0;pointer-events:none}
.app[data-state=fixed] .pg.fixed{opacity:1}
@media(prefers-reduced-motion:reduce){.pg{transition:none}}

/* Units: `dp` = one design pixel = .1cqw of the window (design canvas 1000 x 625). build.py turns Ndp into calc(N * var(--d)). */
/* as found: a tired practice site */
.found{font-family:"Times New Roman",Times,serif;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='3' height='3' fill='%23f0f0e6'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%23f0f0e6'/%3E%3C/svg%3E");font-size:calc(14 * var(--d));color:#000}
.f-head{padding:calc(13 * var(--d)) calc(20 * var(--d)) calc(11 * var(--d));background:linear-gradient(#1a3a9a,#3c67df 55%,#1a3a9a);border-bottom:calc(3 * var(--d)) ridge #7f7fff;color:#fff}
.f-head b{display:block;font:italic 700 calc(34 * var(--d))/1 "Times New Roman",serif;text-shadow:calc(1.5 * var(--d)) calc(1.5 * var(--d)) 0 #000;letter-spacing:.03em}
.f-head i{display:block;margin-top:calc(5 * var(--d));font:italic calc(13 * var(--d)) Arial,sans-serif;color:#ff9}
.f-nav{display:flex;gap:calc(4 * var(--d));margin:calc(8 * var(--d)) calc(10 * var(--d));flex-wrap:wrap}
.f-nav span{font:700 calc(11.5 * var(--d)) Arial,sans-serif;background:linear-gradient(#f4f4f4,#bdbdbd);border:calc(2 * var(--d)) outset #ddd;padding:calc(3 * var(--d)) calc(11 * var(--d));color:#000}
.f-slide{display:flex;align-items:center;justify-content:space-between;margin:0 calc(10 * var(--d));height:calc(78 * var(--d));background:#e9e5da;border:1px solid #bbb;padding:0 calc(20 * var(--d));font:700 calc(30 * var(--d)) "Times New Roman",serif;color:#666}
.f-slide div{text-align:center}.f-slide small{display:block;font:calc(13 * var(--d)) Arial;letter-spacing:calc(3 * var(--d));color:#777}
.f-copy{margin:calc(11 * var(--d)) calc(14 * var(--d)) 0;font-size:calc(14 * var(--d));color:#000}
.f-pdf{margin:calc(6 * var(--d)) calc(14 * var(--d)) 0;font-size:calc(14.5 * var(--d));color:#000}.f-pdf u{color:#00e}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(10 * var(--d));margin:calc(10 * var(--d)) calc(14 * var(--d)) 0}
.f-cols span{background:#f0eee8;border:1px solid #ccc;padding:calc(9 * var(--d)) calc(12 * var(--d));height:calc(58 * var(--d));font:calc(15 * var(--d)) Arial,sans-serif;color:#000}
.f-cols b,.f-cols u{display:block}.f-cols u{font-size:calc(12.5 * var(--d));margin-top:calc(4 * var(--d));color:#00e}
.f-news{margin:calc(10 * var(--d)) calc(14 * var(--d)) 0;font-size:calc(14 * var(--d));border-top:1px dotted #999;padding-top:calc(7 * var(--d));color:#000}.f-news small{color:#888;margin-left:calc(8 * var(--d));font-size:calc(12 * var(--d))}
.f-lists{display:grid;grid-template-columns:1fr 1fr;gap:calc(14 * var(--d));margin:calc(14 * var(--d)) calc(14 * var(--d)) 0;font:calc(13 * var(--d)) Arial,sans-serif;color:#000}
.f-lists h6{margin:0 0 calc(5 * var(--d));background:#336;color:#fff;font:700 calc(13 * var(--d)) Arial;padding:calc(3 * var(--d)) calc(6 * var(--d));letter-spacing:0}
.f-lists ul{margin:0;padding-left:calc(16 * var(--d));list-style:disc;display:block}.f-lists li{margin:calc(2 * var(--d)) 0;display:list-item}.f-lists a{color:#00e;text-decoration:underline}
.f-foot{position:absolute;left:0;right:0;bottom:0;height:calc(80 * var(--d));background:#336;color:#ccd;font:calc(11.5 * var(--d))/1.45 Arial,sans-serif;text-align:center;padding:calc(8 * var(--d)) calc(10 * var(--d))}
.f-cookie{position:absolute;left:0;right:0;bottom:0;height:calc(54 * var(--d));background:#2a2a2a;color:#fff;font:calc(14 * var(--d))/1.35 Arial,sans-serif;padding:0 calc(20 * var(--d));display:flex;gap:calc(20 * var(--d));align-items:center;justify-content:space-between}
.f-cookie em{font-style:normal;background:#fff;color:#222;padding:calc(4 * var(--d)) calc(9 * var(--d));font-size:calc(12 * var(--d));white-space:nowrap}
@container site (max-width:600px){.f-lists{margin-top:calc(20 * var(--d))}}

/* pins: 1 sits in the browser chrome, 2 to 5 in the page. Positions are design pixels, so they track the scaling */
.pin{--d:.1cqw;position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;background:var(--red);color:#fff;cursor:pointer;padding:0;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(212,22,28,.28),0 2px 6px rgba(0,0,0,.25);z-index:3;left:calc(var(--x) * var(--d));top:calc(var(--y) * var(--d));transition:box-shadow .15s;font:700 12px/1 var(--font)}
.pin::after{content:"";position:absolute;inset:-9px}
.pin.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink),0 2px 8px rgba(0,0,0,.3)}
.chrome .pin{left:auto;right:.9rem;top:50%;margin:-13px 0 0;box-shadow:0 0 0 3px rgba(212,22,28,.28)}
.chrome .pin.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.pin[data-i="2"]{--x:915;--y:158}.pin[data-i="3"]{--x:482;--y:268}.pin[data-i="4"]{--x:915;--y:372}
.pin[data-i="5"]{--x:925;top:auto;bottom:calc(27 * var(--d));margin-bottom:-13px}
.app[data-state=fixed] .pin{display:none}
html:not(.js) .pin{display:none}

/* fixed: three finished directions, each taking the craft and strategy (never the copy, name or assets) of a different excellent independent firm.
   Inactive ones are display:none so their fonts are only fetched when someone looks. */
.pg.fixed{display:none;flex-direction:column;font-size:calc(14 * var(--d))}
.app[data-state=fixed][data-skin="1"] .pg.s1,.app[data-state=fixed][data-skin="2"] .pg.s2,.app[data-state=fixed][data-skin="3"] .pg.s3{display:flex}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces-i.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/PlexMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/PlexMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---- 1. COLOUR BLOCK. Numerals as the graphic system, hard blocks of colour, a headline that is a running sum.
        (Craft from a Belgian independent firm whose brand is built from oversized numbers and flat colour.) */
.s1{--k-ink:#0e0f12;--k-blue:#2437ee;--k-sun:#ffd53d;--k-mist:#cfd5ff;background:#f4f0e8;color:var(--k-ink);font-family:"Space Grotesk","Grotesk Fallback","Inter",sans-serif}
.k-nav{display:flex;align-items:center;gap:calc(22 * var(--d));padding:0 calc(40 * var(--d));height:calc(56 * var(--d));flex:none}
.k-logo{margin-right:auto;font:700 calc(21 * var(--d))/1 "Space Grotesk","Grotesk Fallback",sans-serif;letter-spacing:-.025em}
.k-login{font-weight:500;font-size:calc(13.5 * var(--d));text-decoration:underline;text-underline-offset:calc(3 * var(--d));text-decoration-thickness:calc(1.5 * var(--d))}
.k-btn{display:inline-block;background:var(--k-ink);color:#fff;font-weight:600;font-size:calc(14.5 * var(--d));padding:calc(12 * var(--d)) calc(20 * var(--d));border-radius:calc(99 * var(--d));line-height:1.1;white-space:nowrap}
.k-btn.sm{font-size:calc(13 * var(--d));padding:calc(9 * var(--d)) calc(15 * var(--d))}
.k-hero{flex:1;display:grid;grid-template-columns:minmax(0,1fr) calc(330 * var(--d));min-height:0;border-top:calc(2.5 * var(--d)) solid var(--k-ink)}
.k-sum{padding:calc(24 * var(--d)) calc(40 * var(--d)) calc(20 * var(--d));display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.k-eye{display:block;font:500 calc(11.5 * var(--d))/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.k-intro p{margin:0}
.k-l1{margin-top:calc(18 * var(--d))!important;font:600 calc(34 * var(--d))/1.08 "Space Grotesk","Grotesk Fallback",sans-serif;letter-spacing:-.03em}
.k-l2{font:600 calc(34 * var(--d))/1.08 "Space Grotesk","Grotesk Fallback",sans-serif;letter-spacing:-.03em;padding-bottom:calc(12 * var(--d));border-bottom:calc(4.5 * var(--d)) solid var(--k-ink);max-width:calc(380 * var(--d))}
.k-res{margin-top:calc(12 * var(--d))!important;font:700 calc(52 * var(--d))/1 "Space Grotesk","Grotesk Fallback",sans-serif;letter-spacing:-.045em;color:var(--k-blue)}
.k-reach{white-space:nowrap;display:flex;align-items:center;gap:calc(18 * var(--d));font-size:calc(13 * var(--d));font-weight:500;padding:calc(4 * var(--d)) 0}
.k-stats{list-style:none;margin:0;padding:0;background:var(--k-blue);color:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden}
.k-stats::before{content:"0 1\A1 0";white-space:pre;position:absolute;right:calc(-26 * var(--d));top:calc(-34 * var(--d));font:700 calc(250 * var(--d))/.82 "Space Grotesk","Grotesk Fallback",sans-serif;letter-spacing:-.05em;color:rgba(255,255,255,.11);pointer-events:none}
.k-stats li{position:relative;flex:1;display:flex;align-items:center;gap:calc(16 * var(--d));padding:0 calc(28 * var(--d));border-top:calc(1.5 * var(--d)) solid rgba(255,255,255,.4)}
.k-stats li:first-child{border-top:0}
.k-stats b{min-width:calc(122 * var(--d));font:700 calc(52 * var(--d))/1 "Space Grotesk","Grotesk Fallback",sans-serif;letter-spacing:-.05em}
.k-stats span{font-size:calc(13.5 * var(--d));line-height:1.3;font-weight:500;max-width:calc(120 * var(--d))}
.k-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);flex:none;height:calc(160 * var(--d))}
.k-svc li{position:relative;overflow:hidden;padding:0 calc(22 * var(--d)) calc(16 * var(--d));display:flex;flex-direction:column;justify-content:flex-end}
.k-svc li:nth-child(1){background:var(--k-ink);color:#fff}.k-svc li:nth-child(2){background:var(--k-sun)}.k-svc li:nth-child(3){background:var(--k-mist)}
.k-svc i{position:absolute;left:calc(16 * var(--d));top:calc(-10 * var(--d));font:700 calc(104 * var(--d))/1 "Space Grotesk","Grotesk Fallback",sans-serif;font-style:normal;letter-spacing:-.07em}
.k-svc li:nth-child(1) i{color:var(--k-blue)}.k-svc li:nth-child(2) i{color:var(--k-ink)}.k-svc li:nth-child(3) i{color:var(--k-blue)}
.k-svc b{position:relative;font:700 calc(23 * var(--d))/1.1 "Space Grotesk","Grotesk Fallback",sans-serif;letter-spacing:-.02em}
.k-svc span{position:relative;font-size:calc(13 * var(--d));margin-top:calc(3 * var(--d));font-weight:500}
.k-fresh{flex:none;display:flex;align-items:center;gap:calc(14 * var(--d));padding:0 calc(40 * var(--d));height:calc(40 * var(--d));border-top:calc(2.5 * var(--d)) solid var(--k-ink);font-size:calc(13 * var(--d));font-weight:500}
.k-fresh small{background:var(--k-sun);border:calc(1.5 * var(--d)) solid var(--k-ink);padding:calc(4 * var(--d)) calc(9 * var(--d));border-radius:calc(99 * var(--d));font:600 calc(10.5 * var(--d))/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.k-fresh em{margin-left:auto;font-style:normal;font-weight:700;text-decoration:underline;text-underline-offset:calc(3 * var(--d))}

/* ---- 2. MIDNIGHT. One graphic, thin quiet type, a headline that corrects itself, one pill button.
        (Craft from a Paris firm: near-black, calm, a struck-through word as the whole pitch.) */
.s2{--m-ink:#07080b;--m-fg:#f1eee6;--m-mut:#a9a69e;--m-dim:#7c7970;--m-line:#23242b;--m-ember:#ff9a4a;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;background:var(--m-ink);color:var(--m-fg);font-family:"Inter","Inter Fallback",sans-serif}
.m-nav{display:flex;align-items:center;justify-content:space-between;padding:0 calc(44 * var(--d));height:calc(58 * var(--d));flex:none}
.m-logo{font:400 calc(26 * var(--d))/1 "Instrument Serif",Georgia,serif;letter-spacing:.005em}
.m-login{font:500 calc(11.5 * var(--d))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--m-mut);border-bottom:1px solid #55524c;padding-bottom:calc(3 * var(--d))}
.m-hero{flex:1;display:grid;grid-template-columns:minmax(0,1fr) calc(330 * var(--d));padding:0 calc(44 * var(--d));min-height:0;align-items:center}
.m-copy{display:flex;flex-direction:column;gap:calc(14 * var(--d));align-items:flex-start;min-width:0}
.m-pill{display:inline-flex;align-items:center;gap:calc(9 * var(--d));font:500 calc(11 * var(--d))/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#c9c5ba;border:1px solid #31323a;border-radius:calc(99 * var(--d));padding:calc(8 * var(--d)) calc(14 * var(--d))}
.m-pill u{width:calc(6 * var(--d));height:calc(6 * var(--d));border-radius:50%;background:var(--m-ember);text-decoration:none;box-shadow:0 0 0 calc(3.5 * var(--d)) rgba(255,154,74,.2)}
.m-intro h3{font:400 calc(64 * var(--d))/.97 "Instrument Serif",Georgia,serif;letter-spacing:-.02em;margin:0 0 calc(15 * var(--d));color:var(--m-fg)}
.m-intro h3 s{color:#6d6a63;text-decoration:line-through;text-decoration-thickness:calc(3.5 * var(--d));text-decoration-color:var(--m-ember)}
.m-intro p{font-size:calc(15 * var(--d));line-height:1.6;color:var(--m-mut);max-width:calc(480 * var(--d));margin:0}
.m-reach{white-space:nowrap;display:flex;align-items:center;gap:calc(22 * var(--d));font:500 calc(12 * var(--d))/1 var(--mono);color:var(--m-mut)}
.m-btn{display:inline-block;background:var(--m-fg);color:var(--m-ink);font:600 calc(14 * var(--d))/1.1 "Inter","Inter Fallback",sans-serif;padding:calc(13 * var(--d)) calc(24 * var(--d));border-radius:calc(99 * var(--d));white-space:nowrap}
.m-orb{position:relative;width:calc(300 * var(--d));height:calc(300 * var(--d));justify-self:center}
.m-orb::before{content:"";position:absolute;inset:calc(-30 * var(--d));background:radial-gradient(circle,rgba(255,154,74,.3),rgba(255,154,74,0) 62%)}
.m-orb pre{margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font:400 calc(12.6 * var(--d))/1.26 var(--mono);letter-spacing:.07em;color:transparent;background:radial-gradient(circle at 36% 30%,#fff7ea 0,#e6c398 20%,#8b7360 46%,#26231f 72%);-webkit-background-clip:text;background-clip:text;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 70%);mask-image:radial-gradient(circle,#000 52%,transparent 70%)}
.m-svc{flex:none;border-top:1px solid var(--m-line);padding:calc(16 * var(--d)) calc(44 * var(--d)) calc(14 * var(--d))}
.m-sl{margin:0 0 calc(12 * var(--d));font:500 calc(11 * var(--d))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim)}
.m-svc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(32 * var(--d))}
.m-svc i{display:block;margin-bottom:calc(6 * var(--d));font:500 calc(11 * var(--d))/1 var(--mono);color:var(--m-ember);font-style:normal}
.m-svc b{display:block;font:400 calc(31 * var(--d))/1 "Instrument Serif",Georgia,serif;color:var(--m-fg)}
.m-svc span{display:block;margin-top:calc(7 * var(--d));font-size:calc(13 * var(--d));line-height:1.45;color:var(--m-mut)}
.m-foot{flex:none;display:flex;justify-content:space-between;gap:calc(12 * var(--d));padding:calc(12 * var(--d)) calc(44 * var(--d)) calc(14 * var(--d));border-top:1px solid var(--m-line);font:400 calc(11 * var(--d))/1.2 var(--mono);color:var(--m-dim)}

/* ---- 3. SOFT BOUTIQUE. The client's own worry is the service label; a warm announcement bar; calm oat, sage and one rust.
        (Craft from a US boutique firm whose services are speech bubbles in the client's voice.) */
.s3{--p-oat:#f6f0e6;--p-sage:#cfdccd;--p-blush:#f2cfc1;--p-sand:#f1dfae;--p-rust:#c4553a;--p-ink:#1d3a35;--p-mut:#3d5953;background:var(--p-oat);color:var(--p-ink);font-family:"Inter","Inter Fallback",sans-serif}
.p-bar{flex:none;background:var(--p-rust);color:#fff7ef;display:flex;justify-content:center;align-items:center;gap:calc(12 * var(--d));height:calc(30 * var(--d));font-size:calc(12.5 * var(--d));font-weight:500}.p-bar u{font-weight:700}
.p-nav{display:flex;align-items:center;gap:calc(26 * var(--d));padding:0 calc(40 * var(--d));height:calc(58 * var(--d));flex:none;font-size:calc(13.5 * var(--d));font-weight:500}
.p-logo{margin-right:auto;font:600 calc(24 * var(--d))/1 "Fraunces",Georgia,serif;letter-spacing:-.02em}
.p-login{text-decoration:underline;text-underline-offset:calc(3 * var(--d));text-decoration-thickness:calc(1.5 * var(--d))}
.p-btn{display:inline-block;background:var(--p-rust);color:#fff7ef;font-weight:600;font-size:calc(14 * var(--d));padding:calc(12 * var(--d)) calc(20 * var(--d));border-radius:calc(99 * var(--d));white-space:nowrap;line-height:1.1}.p-btn.sm{padding:calc(9 * var(--d)) calc(15 * var(--d));font-size:calc(13 * var(--d))}
.p-hero{flex:1;display:grid;grid-template-columns:minmax(0,1fr) calc(340 * var(--d));gap:calc(30 * var(--d));padding:calc(4 * var(--d)) calc(40 * var(--d)) 0;min-height:0;align-items:center}
.p-eye{display:block;margin-bottom:calc(11 * var(--d));font:600 calc(11 * var(--d))/1 "Inter","Inter Fallback",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--p-rust)}
.p-intro h3{font:600 calc(46 * var(--d))/1.04 "Fraunces",Georgia,serif;letter-spacing:-.03em;margin:0 0 calc(13 * var(--d))}
.p-intro h3 i{font-style:italic;font-weight:400;color:var(--p-rust)}
.p-intro p{font-size:calc(14.5 * var(--d));line-height:1.55;max-width:calc(450 * var(--d));margin:0;color:var(--p-mut)}
.p-reach{white-space:nowrap;margin-top:calc(16 * var(--d));display:flex;align-items:center;gap:calc(18 * var(--d));font-size:calc(13 * var(--d));font-weight:500}
.p-chat{position:relative;align-self:stretch;max-height:calc(260 * var(--d));margin:auto 0;display:flex;flex-direction:column;justify-content:center;gap:calc(12 * var(--d));padding:0 calc(8 * var(--d))}
.p-disc{position:absolute;right:calc(-14 * var(--d));top:50%;width:calc(290 * var(--d));height:calc(290 * var(--d));margin-top:calc(-145 * var(--d));border-radius:50%;background:var(--p-sage)}
.p-q,.p-a{position:relative;margin:0;padding:calc(13 * var(--d)) calc(17 * var(--d));font:500 calc(14.5 * var(--d))/1.35 "Inter","Inter Fallback",sans-serif;max-width:calc(235 * var(--d));border-radius:calc(18 * var(--d))}
.p-q{align-self:flex-start;background:#fff;border-bottom-left-radius:calc(4 * var(--d));box-shadow:0 calc(2 * var(--d)) 0 rgba(29,58,53,.12)}
.p-a{align-self:flex-end;background:var(--p-ink);color:var(--p-oat);border-bottom-right-radius:calc(4 * var(--d))}
.p-chat small{position:relative;align-self:center;margin-top:calc(6 * var(--d));font:italic 400 calc(13 * var(--d))/1.3 "Fraunces",Georgia,serif;color:var(--p-mut);text-align:center;max-width:calc(250 * var(--d))}
.p-lad{flex:none;padding:0 calc(40 * var(--d)) calc(18 * var(--d))}
.p-sl{margin:0 0 calc(20 * var(--d));text-align:center;font:italic 400 calc(17 * var(--d))/1 "Fraunces",Georgia,serif}
.p-lad ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:calc(20 * var(--d));row-gap:0}
.p-lad li{display:contents}.p-lad li:nth-child(1)>*{grid-column:1}.p-lad li:nth-child(2)>*{grid-column:2}.p-lad li:nth-child(3)>*{grid-column:3}.p-lad li>.p-say{grid-row:1;align-self:end;justify-self:start}.p-lad li>.p-card{grid-row:2}
.p-lad li{--bub:var(--p-sage)}.p-lad li:nth-child(2){--bub:var(--p-blush)}.p-lad li:nth-child(3){--bub:var(--p-sand)}
.p-say{position:relative;margin:0 0 calc(12 * var(--d));align-self:flex-start;display:inline-block;max-width:92%;background:var(--bub);padding:calc(9 * var(--d)) calc(14 * var(--d));border-radius:calc(15 * var(--d)) calc(15 * var(--d)) calc(15 * var(--d)) calc(3 * var(--d));font:italic 400 calc(13.5 * var(--d))/1.25 "Fraunces",Georgia,serif}
.p-say::after{content:"";position:absolute;left:0;bottom:calc(-7 * var(--d));width:calc(14 * var(--d));height:calc(9 * var(--d));background:var(--bub);clip-path:polygon(0 0,100% 0,0 100%)}
.p-card{background:#fff;border:calc(1.5 * var(--d)) solid #e5d9c6;border-radius:calc(13 * var(--d));padding:calc(13 * var(--d)) calc(16 * var(--d)) calc(13 * var(--d));display:flex;flex-direction:column}
.p-card b{font:600 calc(20 * var(--d))/1.1 "Fraunces",Georgia,serif;letter-spacing:-.015em}
.p-card span{font-size:calc(12.5 * var(--d));line-height:1.4;margin-top:calc(5 * var(--d));color:var(--p-mut)}
.p-card em{margin-top:calc(8 * var(--d));font:600 calc(10.5 * var(--d))/1 "Inter","Inter Fallback",sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--p-rust)}

:lang(fr) .k-l1,:lang(fr) .k-l2{font-size:calc(29 * var(--d))}:lang(fr) .k-res{font-size:calc(46 * var(--d))}:lang(fr) .m-intro h3{font-size:calc(55 * var(--d))}:lang(fr) .m-intro p{font-size:calc(14 * var(--d));max-width:calc(520 * var(--d))}
/* "what we fixed": the selected finding outlines its fix on the new page. ink + lime reads on all three */
.app[data-state=fixed][data-sel="1"] [data-f="1"],.app[data-state=fixed][data-sel="2"] [data-f="2"],.app[data-state=fixed][data-sel="3"] [data-f="3"],.app[data-state=fixed][data-sel="4"] [data-f="4"],.app[data-state=fixed][data-sel="5"] [data-f="5"]{outline:3px solid var(--lime);outline-offset:3px;box-shadow:0 0 0 3px var(--ink)}

/* narrow window (about 300 x 400 design px): the fixed sites reflow, each its own way; the found site just shrinks (that is the problem) */
@container site (max-width:600px){
  .pg.fixed{--d:.33cqw}
  /* 1 Colour Block */
  .k-nav{height:calc(40 * var(--d));padding:0 calc(14 * var(--d))}.k-logo{font-size:calc(16 * var(--d))}.k-login{font-size:calc(11 * var(--d))}.k-btn.sm{display:none}
  .k-hero{display:flex;flex-direction:column;flex:none}
  .k-sum{padding:calc(12 * var(--d)) calc(14 * var(--d)) calc(12 * var(--d));gap:calc(10 * var(--d))}.k-eye{display:none}
  .k-l1{margin-top:0!important;font-size:calc(19 * var(--d))}.k-l2{font-size:calc(19 * var(--d));padding-bottom:calc(7 * var(--d));border-bottom-width:calc(3 * var(--d))}.k-res{font-size:calc(27 * var(--d));margin-top:calc(8 * var(--d))!important}
  .k-reach{font-size:calc(10 * var(--d));gap:calc(8 * var(--d));padding:calc(2 * var(--d)) 0}.k-btn{font-size:calc(12 * var(--d));padding:calc(9 * var(--d)) calc(14 * var(--d))}
  .k-stats{flex-direction:row;height:calc(78 * var(--d))}.k-stats::before{font-size:calc(130 * var(--d));right:calc(-10 * var(--d));top:calc(-18 * var(--d))}
  .k-stats li{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:calc(2 * var(--d));padding:0 calc(12 * var(--d));border-top:0;border-left:calc(1.5 * var(--d)) solid rgba(255,255,255,.4)}.k-stats li:first-child{border-left:0}
  .k-stats b{min-width:0;font-size:calc(25 * var(--d))}.k-stats span{font-size:calc(8.5 * var(--d));max-width:none;line-height:1.15}
  .k-svc{height:calc(70 * var(--d));flex:none}.k-svc li{padding:0 calc(8 * var(--d)) calc(8 * var(--d))}.k-svc i{font-size:calc(50 * var(--d));left:calc(7 * var(--d));top:calc(-4 * var(--d))}.k-svc b{font-size:calc(12 * var(--d))}.k-svc span{display:none}
  .k-fresh{height:calc(30 * var(--d));padding:0 calc(14 * var(--d));font-size:calc(9.5 * var(--d));gap:calc(8 * var(--d));margin-top:auto}.k-fresh small,.k-fresh em{display:none}.k-fresh span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 2 Midnight */
  .m-nav{height:calc(40 * var(--d));padding:0 calc(14 * var(--d))}.m-logo{font-size:calc(20 * var(--d))}.m-login{font-size:calc(9.5 * var(--d))}
  .m-hero{display:block;padding:calc(6 * var(--d)) calc(14 * var(--d)) 0;flex:none}.m-orb{display:none}
  .m-copy{gap:calc(10 * var(--d))}.m-pill{font-size:calc(8.5 * var(--d));padding:calc(6 * var(--d)) calc(10 * var(--d))}
  .m-intro h3{font-size:calc(36 * var(--d));margin-bottom:0}.m-intro p{display:none}
  .m-reach{font-size:calc(9 * var(--d));gap:calc(8 * var(--d))}.m-btn{font-size:calc(11.5 * var(--d));padding:calc(9 * var(--d)) calc(15 * var(--d))}
  .m-svc{padding:calc(12 * var(--d)) calc(14 * var(--d)) 0;margin-top:calc(14 * var(--d))}.m-sl{display:none}.m-svc ul{grid-template-columns:1fr;gap:0}
  .m-svc li{display:flex;align-items:baseline;gap:calc(10 * var(--d));padding:calc(7 * var(--d)) 0;border-top:1px solid var(--m-line)}.m-svc i{margin:0;font-size:calc(9.5 * var(--d))}.m-svc b{font-size:calc(22 * var(--d))}.m-svc span{display:none}
  .m-foot{margin-top:auto;padding:calc(8 * var(--d)) calc(14 * var(--d));font-size:calc(9 * var(--d))}.m-foot span+span{display:none}
  /* 3 Soft Boutique */
  .p-bar{height:calc(24 * var(--d));font-size:calc(9 * var(--d));gap:calc(6 * var(--d))}.p-bar u{display:none}
  .p-nav{height:calc(38 * var(--d));padding:0 calc(14 * var(--d));font-size:calc(11 * var(--d))}.p-n,.p-btn.sm{display:none}.p-logo{font-size:calc(17 * var(--d))}
  .p-hero{display:block;padding:calc(6 * var(--d)) calc(14 * var(--d)) 0;flex:none}.p-chat,.p-eye,.p-intro p{display:none}
  .p-intro h3{font-size:calc(29 * var(--d));margin:0 0 calc(9 * var(--d))}
  .p-reach{margin:0;font-size:calc(9.5 * var(--d));gap:calc(8 * var(--d))}.p-btn{font-size:calc(12 * var(--d));padding:calc(9 * var(--d)) calc(15 * var(--d))}
  .p-lad{padding:calc(12 * var(--d)) calc(14 * var(--d)) 0}.p-sl{display:none}.p-lad ul{grid-template-columns:1fr;row-gap:calc(6 * var(--d))}
  .p-lad li{display:flex;align-items:center;gap:calc(8 * var(--d))}.p-lad li>*{grid-column:auto!important;grid-row:auto!important}.p-say{margin:0;flex:1;max-width:none;font-size:calc(11.5 * var(--d));padding:calc(7 * var(--d)) calc(10 * var(--d));border-radius:calc(11 * var(--d))}.p-say::after{display:none}
  .p-card{flex:none;padding:calc(7 * var(--d)) calc(10 * var(--d));border-radius:calc(9 * var(--d))}.p-card b{font-size:calc(12 * var(--d))}.p-card span,.p-card em{display:none}
  :lang(fr) .p-intro h3{font-size:calc(25 * var(--d))}:lang(fr) .m-intro h3{font-size:calc(31 * var(--d))}:lang(fr) .k-l1,:lang(fr) .k-l2{font-size:calc(16 * var(--d))}:lang(fr) .k-res{font-size:calc(23 * var(--d))}:lang(fr) .k-btn,:lang(fr) .m-btn,:lang(fr) .p-btn{font-size:calc(10.5 * var(--d));padding:calc(9 * var(--d)) calc(12 * var(--d))}
}

/* findings */
.insp{border-left:2px solid var(--ink);display:flex;flex-direction:column;min-width:0;background:#fff}
.finds{list-style:none;flex:1}
.finds li{border-bottom:1px solid var(--line)}
.finds li>button{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) 20px;gap:.75rem;align-items:start;text-align:left;background:transparent;border:0;padding:.9rem 1rem;cursor:pointer;color:var(--ink);font:inherit}
.finds li>button:hover{background:rgba(12,13,18,.04)}
.finds li>button:focus-visible{outline-offset:-4px;box-shadow:none}
.finds .n{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font:700 12px/24px var(--font);text-align:center;margin-top:1px}
.app[data-state=fixed] .finds .n{background:var(--green)}
.finds .t{display:block}
.finds small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font:700 .66rem/1 var(--font);margin-bottom:.3rem}
.finds strong{display:block;font:700 1rem/1.25 var(--display);letter-spacing:-.01em}
.tick{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);margin-top:3px;position:relative}
.app[data-state=fixed] .tick{background:var(--green);border-color:var(--green)}
.app[data-state=fixed] .tick::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.finds li.open{background:var(--paper)}
.finds .d{display:none;padding:0 1rem 1rem 3.35rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.finds li.open .d{display:block}
html:not(.js) .finds .d{display:block}
.finds .d p{margin:0}.d-fixed{display:none}
.app[data-state=fixed] .d-fixed{display:block}.app[data-state=fixed] .d-found{display:none}
.d-fixed b{color:var(--green);font-weight:700}
.dirs{margin-top:1rem;padding:1rem 1.1rem;border:2px solid var(--ink);border-radius:16px;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.dirs[hidden]{display:none}
.dirs-l{font:700 .72rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.dirs-b{display:flex;gap:.45rem;flex-wrap:wrap}
.dirs-b button{font:700 .85rem/1 var(--font);padding:.55rem .85rem;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.dirs-b button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.dirs-b button[aria-pressed=true]{background:var(--lime)}
.dirs-c{margin-top:.7rem;font-size:.9rem;line-height:1.5;color:var(--ink-2);min-height:3em}
.dirs-c p[hidden]{display:none}.dirs-c p{margin:0}
.insp-foot{margin:0;padding:.85rem 1rem;font-size:.82rem;line-height:1.5;color:var(--muted);background:var(--paper-2);border-top:2px solid var(--ink)}
.insp-foot a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.app figcaption{padding:.7rem 1rem;border-top:2px solid var(--ink);color:var(--muted);background:var(--paper-2);font-size:.85rem}
@media(max-width:900px){.app-body{grid-template-columns:minmax(0,1fr)}.insp{border-left:0;border-top:2px solid var(--ink)}}
@media(max-width:560px){.app{box-shadow:4px 4px 0 var(--ink)}.app-title .muted{display:none}.count{min-width:0;margin-left:auto}.seg button{padding:.5rem .8rem}}