@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url(archivo-latin-600-normal.woff2) format("woff2")}

:root{
  --paper:#f3f0e9;--sheet:#fbfaf7;--ink:#1a1a18;--ink2:#3a3935;--muted:#6b6862;--faint:#9a968d;
  --rule:#d8d4cb;--rule2:#e7e3da;--accent:#1e3a5f;--wash:#e6ebf1;
  --night:#161615;--night2:#1f1f1d;--nightrule:#34332f;--nighttext:#e9e6df;--nightmuted:#a19d94;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,4.5vw,72px);
  --max:1440px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.62 "IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
/* paper grain: barely there, it's what makes the ground read as paper and not a screen */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
::selection{background:var(--accent);color:#fff}

/* bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutter) 14px;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.02em}
.brand em,.f-brand em{font-style:normal;font-weight:400;color:var(--accent)}
.bar nav{margin-left:auto;display:flex;gap:26px;align-items:center;font-size:14px}
.bar nav a{text-decoration:none;color:var(--ink2);transition:color .16s var(--ease)}
.bar nav a:hover{color:var(--ink)}
.bar nav .cta{border:1px solid var(--ink);padding:8px 14px;color:var(--ink)}
.bar nav .cta:hover{background:var(--ink);color:var(--paper)}
@media (max-width:820px){.bar nav a:not(.cta){display:none}}

/* type */
.eyebrow,.section-title{font:11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0}
h1,h2,h3{font-family:"Archivo","IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.035em;margin:16px 0 20px}
h2{font-size:clamp(30px,3.6vw,54px);line-height:1.04;letter-spacing:-.03em}
h3{font-size:21px;line-height:1.25}
p{margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;height:48px;padding:0 20px;border:1px solid var(--ink);text-decoration:none;font-size:15px;font-weight:500;background:transparent;color:var(--ink);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--ink);border-color:var(--ink)}
.btn-ghost{border-color:var(--rule);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}

/* sections */
section{padding:clamp(64px,9vw,140px) var(--gutter)}
section > *{max-width:var(--max);margin-left:auto;margin-right:auto}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px 48px;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.sec-head .section-title{grid-column:1/-1;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.sec-head h2{grid-column:1}
.sec-lede{grid-column:2;color:var(--ink2);font-size:17px;max-width:52ch}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}.sec-lede{grid-column:1}}

/* hero: the work, full bleed, a paper card over it */
.hero{position:relative;padding:0;min-height:min(92vh,960px);display:flex;align-items:flex-end;overflow:hidden;background:#d9d3c7}
.hero > *{max-width:none;margin:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;transform:scale(1.04);animation:settle 2.4s var(--ease) forwards}
@keyframes settle{to{transform:none}}
.hero-img.hero-alt{opacity:0;animation:none;transform:none;transition:opacity 1.8s var(--ease)}
.hero-img.hero-alt.is-on{opacity:1}
.hero-img:first-of-type{transition:opacity 1.8s var(--ease)}
.hero-img:first-of-type:not(.is-on){opacity:0}
.hero-cap{position:absolute;left:var(--gutter);top:calc(16px + env(safe-area-inset-top,0px) + 58px);z-index:2;font:10.5px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(251,250,247,.9);border:1px solid var(--rule);padding:6px 9px;opacity:0;animation:fadein .8s 1.6s var(--ease) forwards}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,240,233,.55) 0%,rgba(243,240,233,0) 48%)}
.hero-card{position:relative;z-index:2;margin:0 0 clamp(24px,5vw,72px) var(--gutter);max-width:620px;background:rgba(251,250,247,.94);border:1px solid var(--rule);padding:clamp(24px,3vw,44px);backdrop-filter:blur(6px)}
.lede{font-size:clamp(16px,1.25vw,18px);color:var(--ink2)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.hero-notes{position:absolute;inset:0;z-index:1;pointer-events:none}
.note{position:absolute;font:11px/1.3 "IBM Plex Mono",monospace;color:var(--ink);background:rgba(251,250,247,.9);border:1px solid var(--rule);padding:6px 9px;letter-spacing:.02em;white-space:nowrap;opacity:0;animation:fadein .8s .9s var(--ease) forwards}
.note i{position:absolute;height:1px;background:var(--ink);top:50%;width:56px}
.note.n1{right:50%;top:11%}.note.n1 i{left:100%;transform:rotate(28deg);transform-origin:left}
.dark h2 br{display:block}
.note.n2{right:6%;top:44%;animation-delay:1.1s}.note.n2 i{right:100%;transform:rotate(-14deg);transform-origin:right}
.note.n3{right:12%;bottom:12%;animation-delay:1.3s}.note.n3 i{right:100%;transform:rotate(10deg);transform-origin:right}
@keyframes fadein{to{opacity:1}}
@media (max-width:980px){.note{display:none}.hero::after{background:linear-gradient(0deg,rgba(243,240,233,.7) 0%,rgba(243,240,233,0) 60%)}.hero-card{margin-right:var(--gutter)}}

/* statement */
.statement{padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(40px,5vw,72px)}
.statement p{font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(26px,3.1vw,46px);line-height:1.18;letter-spacing:-.025em;max-width:28ch;margin-left:0}

/* figures */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:0;padding-bottom:0}
.figures > *{max-width:none;margin:0}
.figures div{border-top:1px solid var(--ink);padding:22px 20px 34px 0}
.figures div+div{padding-left:20px;border-left:1px solid var(--rule)}
.fig{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(34px,4vw,60px);letter-spacing:-.035em;line-height:1}
.cap{display:block;margin-top:10px;font-size:14px;color:var(--muted);max-width:22ch}
@media (max-width:820px){.figures{grid-template-columns:1fr 1fr}.figures div:nth-child(3){padding-left:0;border-left:0}}

/* plates */
.plate{margin:0;border:1px solid var(--rule);background:var(--sheet);overflow:hidden}
.plate img{width:100%;transition:transform 1.2s var(--ease)}
.plate:hover img{transform:scale(1.015)}
.plate figcaption{display:flex;justify-content:space-between;gap:12px;font:11px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-top:1px solid var(--rule)}
.work .wide{margin-bottom:18px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){.pair{grid-template-columns:1fr}}
.live{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px;padding:26px 28px;border:1px solid var(--rule);background:var(--sheet)}
.live p:not(.eyebrow){margin-top:8px;color:var(--ink2);max-width:60ch}

/* before / after */
.compare-slider{padding-bottom:clamp(40px,6vw,90px)}
.ba{position:relative;border:1px solid var(--rule);background:#fff;overflow:hidden;user-select:none;touch-action:pan-y;box-shadow:0 1px 0 var(--rule)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:44px;margin-left:-22px;cursor:ew-resize;display:flex;justify-content:center}
.ba-handle::before{content:"";width:1px;background:var(--ink)}
.ba-handle span{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border:1px solid var(--ink);background:var(--paper);border-radius:50%;transition:transform .2s var(--ease)}
.ba:hover .ba-handle span{transform:scale(1.06)}
.ba-handle span::before,.ba-handle span::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.ba-handle span::before{left:10px;transform:translateY(-50%) rotate(-45deg)}
.ba-handle span::after{right:10px;transform:translateY(-50%) rotate(135deg)}
.ba-label{position:absolute;top:16px;font:10.5px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;background:rgba(251,250,247,.92);border:1px solid var(--rule);padding:6px 9px}
.ba-label.l{left:16px}.ba-label.r{right:16px}
.caption{font-size:14px;color:var(--muted);margin-top:14px}

/* drawing set */
.sheets{background:var(--sheet);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sheet-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sheet-row figure{margin:0}
.sheet-row img{border:1px solid var(--rule);background:#fff;box-shadow:0 18px 40px -28px rgba(26,26,24,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sheet-row figure:hover img{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(26,26,24,.45)}
.sheet-row figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.sheet-row b{font:500 12px "IBM Plex Mono",monospace;color:var(--ink);margin-right:8px;letter-spacing:.04em}
@media (max-width:900px){.sheet-row{grid-template-columns:1fr}}

/* dark: for the architect */
.dark{background:var(--night);color:var(--nighttext)}
.dark .sec-lede,.dark p{color:var(--nightmuted)}
.dark h2{color:var(--nighttext);margin:22px 0 22px}
.section-title.light{color:var(--nightmuted);padding-bottom:14px;border-bottom:1px solid var(--nighttext)}
.fine.light{color:var(--nightmuted);margin-top:18px}
.dark-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.tree{font:13px/1.5 "IBM Plex Mono",monospace;border:1px solid var(--nightrule);background:var(--night2)}
.tree > div{display:grid;grid-template-columns:minmax(12rem,auto) 1fr;gap:18px;padding:12px 18px;border-top:1px solid var(--nightrule)}
.tree > div:first-child{border-top:0}
.tree .t-root{display:block;color:var(--nighttext);letter-spacing:.04em;background:rgba(255,255,255,.02)}
.tree .f{color:#a9c6e8;padding-left:14px}
.tree .d{color:var(--nightmuted);font-family:"IBM Plex Sans",sans-serif;font-size:14px}
.tree .t-sep{padding:0;height:10px;background:var(--night)}
@media (max-width:900px){.dark-grid{grid-template-columns:1fr}.tree > div{grid-template-columns:1fr;gap:4px}}

/* process */
.steps{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.steps li{padding:30px 26px 10px 0;border-right:1px solid var(--rule)}
.steps li+li{padding-left:26px}
.steps li:last-child{border-right:0}
.steps .n{font:12px "IBM Plex Mono",monospace;color:var(--accent)}
.steps h3{margin:16px 0 12px;font-size:28px;letter-spacing:-.025em}
.steps p{color:var(--ink2);font-size:15.5px}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}.steps li{border-bottom:1px solid var(--rule)}.steps li:nth-child(3){padding-left:0}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li{border-right:0;padding-left:0!important}}

/* comparison */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);background:var(--sheet)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:760px}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--rule2);vertical-align:top}
thead th{font:10.5px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;border-bottom:1px solid var(--ink)}
thead th:nth-child(2){color:var(--accent)}
td:first-child{color:var(--ink2);width:30%}
td.y{color:var(--accent);font-weight:500;background:color-mix(in srgb,var(--wash) 60%,transparent)}
.honest{max-width:74ch;margin-top:24px;color:var(--ink2);font-size:16px;border-left:2px solid var(--accent);padding-left:18px;margin-left:0}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);background:var(--sheet)}
.tier{padding:32px}
.tier+.tier{border-left:1px solid var(--rule)}
.tier.feature{background:var(--night);color:var(--nighttext)}
.tier.feature .fine,.tier.feature .price{color:var(--nightmuted)}
.tier.feature .price span{color:var(--nighttext)}
.price{margin:22px 0 12px;color:var(--muted);font-size:15px}
.price span{font-family:"Archivo",sans-serif;font-weight:600;font-size:56px;letter-spacing:-.035em;color:var(--ink);margin-right:8px}
.fine{font-size:14px;color:var(--muted)}
.fine.center{text-align:center;margin-top:18px}
@media (max-width:900px){.tiers{grid-template-columns:1fr}.tier+.tier{border-left:0;border-top:1px solid var(--rule)}}

/* start */
.start{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);border-top:1px solid var(--rule);max-width:none}
.start > *{margin:0}
.start h2{margin:22px 0 18px}
.start .sec-lede{max-width:44ch}
.intake{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-self:start}
.intake label{display:flex;flex-direction:column;gap:7px;font:10.5px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.intake .full{grid-column:1/-1}
.intake input,.intake textarea{font:16px "IBM Plex Sans",sans-serif;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);padding:12px 13px;outline:none;letter-spacing:0;text-transform:none;transition:border-color .16s var(--ease)}
.intake input:focus,.intake textarea:focus{border-color:var(--accent)}
.intake .hp{position:absolute;left:-9999px;width:1px;height:1px}
.intake button{justify-self:start}
.form-msg{grid-column:1/-1;font-size:14px}
@media (max-width:900px){.start,.intake{grid-template-columns:1fr}}

.foot{display:flex;flex-wrap:wrap;gap:8px 28px;padding:30px var(--gutter) calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ink);font-size:13px;color:var(--muted)}
.foot .f-brand{font-family:"Archivo",sans-serif;font-weight:600;color:var(--ink)}
.foot .f-contact{margin-left:auto;color:var(--ink2)}
.foot .f-contact a{text-decoration:none;border-bottom:1px solid var(--rule)}
.foot .f-contact a:hover{border-color:var(--ink)}
@media (max-width:820px){.foot .f-contact{margin-left:0}}

/* entrance */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}.note{opacity:1}.hero-img{transform:none}}

/* hero upload form */
.hero-form{max-width:560px}
.up{margin-top:18px;display:grid;gap:10px}
.drop{border:1px dashed var(--ink);padding:22px 18px;text-align:center;cursor:pointer;background:rgba(255,255,255,.5);transition:background .16s var(--ease),border-color .16s var(--ease)}
.drop:hover,.drop.over,.drop:focus-visible{background:var(--wash);border-color:var(--accent);outline:none}
.drop-main{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em}
.drop-sub{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.up-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.up-list li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;font-size:13px;padding:6px 0;border-top:1px solid var(--rule2)}
.up-list .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-list .st{font:11px "IBM Plex Mono",monospace;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.up-list .bar{height:2px;background:var(--rule);grid-column:1/-1}
.up-list .bar i{display:block;height:2px;background:var(--accent);width:var(--p,0%);transition:width .3s var(--ease)}
.up-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.up input,.up textarea{font:15px "IBM Plex Sans",sans-serif;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);padding:11px 12px;outline:none;width:100%}
.up input:focus,.up textarea:focus{border-color:var(--accent)}
.up textarea{resize:vertical}
.up-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.up .form-msg{margin:0;font-size:14px}
.up .form-msg.ok{color:#2f6b3a}
.up .form-msg.bad{color:#9b2c1f}
.up{position:relative}
.up .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.start-cta{align-items:center}
.start-cta h2{margin:0 0 10px}
@media (max-width:560px){.up-fields{grid-template-columns:1fr}}

/* v9: the quote card */
.hero-form{max-width:600px;padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,40px) clamp(20px,2.4vw,34px)}
.hero-form h1{font-size:clamp(32px,3.6vw,50px);margin:12px 0 10px}
.hero-form .lede{font-size:16px;color:var(--ink2)}
.up{margin-top:16px}
.drop{position:relative;padding:26px 18px 22px;border:1px solid var(--ink);background:rgba(255,255,255,.55)}
.drop::before,.drop::after{content:"";position:absolute;left:14px;right:14px;height:1px;background:var(--rule)}
.drop::before{top:8px}.drop::after{bottom:8px}
.drop-main{font-size:20px}
.drop-sub{margin-top:5px}
.drop.over{background:var(--wash)}
.up-fields input,.up textarea{background:rgba(255,255,255,.7)}
.hero-form .btn{height:46px}
@media (max-width:980px){.hero{min-height:0}.hero-card{margin:16px var(--gutter) 24px}.hero::after{background:linear-gradient(0deg,rgba(243,240,233,.75) 0%,rgba(243,240,233,.15) 70%)}}

/* v11: phones. The render sits on top, the quote card sits under it on paper: nothing covers the work. */
@media (max-width:760px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0;align-items:start;background:var(--paper)}
  .hero-img,.hero-img.hero-alt{position:relative;grid-row:1;grid-column:1;inset:auto;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:62% 55%;transform:none;animation:none}
  .hero::after,.hero-notes{display:none}
  .hero-card{grid-row:2;grid-column:1;margin:0;max-width:none;border:0;border-top:1px solid var(--rule);background:var(--paper);backdrop-filter:none;padding:22px var(--gutter) 28px}
  .hero-form h1{font-size:34px;margin:10px 0 8px}
  .hero-form .lede{font-size:15.5px}
  .drop{padding:20px 14px 18px}
  .drop-main{font-size:18px}
  .up-actions .btn{flex:1 1 auto;justify-content:center}
  .bar{gap:12px}
  .bar nav .cta{padding:7px 11px;font-size:13px;white-space:nowrap}
}
@media (max-width:760px) and (orientation:landscape){.hero-img{aspect-ratio:2/1}}

/* v14: night. Ink on paper becomes paper on ink; navy stays the one colour, lifted where it has to read on black.
   The match-line dash (long · short · long) becomes the rule under every section title. */
:root{
  --paper:#161615;--sheet:#1f1f1d;--ink:#e9e6df;--ink2:#cfcbc2;--muted:#a19d94;--faint:#6f6c66;
  --rule:#34332f;--rule2:#2a2927;--accent:#1e3a5f;--accent-text:#8fb0dd;--wash:#1b2432;
  color-scheme:dark;
}
body::before{mix-blend-mode:screen;opacity:.035}
::selection{background:var(--accent-text);color:var(--paper)}
.brand em,.f-brand em{color:var(--accent-text)}
.bar{background:color-mix(in srgb,var(--paper) 84%,transparent)}
.hero{background:#0f0f0e}
.hero::after{background:linear-gradient(90deg,rgba(22,22,21,.6) 0%,rgba(22,22,21,0) 48%)}
.hero-card{background:rgba(31,31,29,.9);border-color:var(--rule)}
.drop{background:rgba(255,255,255,.035);border-color:var(--ink)}
.drop:hover,.drop.over,.drop:focus-visible{background:var(--wash);border-color:var(--accent-text)}
.drop-sub u{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--accent-text)}
.up input,.up textarea,.up-fields input{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--rule)}
.up input::placeholder,.up textarea::placeholder{color:var(--faint)}
.up input:focus,.up textarea:focus{border-color:var(--accent-text)}
.up .form-msg.ok{color:#8fd19e}.up .form-msg.bad{color:#f0907f}
.btn-primary{background:var(--accent);border-color:#2a4c7a;color:#fff}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-ghost{border-color:var(--rule)}
.ba{background:var(--sheet);box-shadow:none}
.ba-label{background:rgba(31,31,29,.9);border-color:var(--rule)}
.ba-handle span{background:var(--paper)}
.sec-head .section-title{border-bottom:0;padding-bottom:16px;background:repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 26px,var(--ink) 26px 32px,transparent 32px 40px) left bottom/100% 1px no-repeat}
.sheets{background:#121211}
.sheet-row img{box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.checklist i{background:var(--sheet);border-color:var(--ink)}
.checklist i::after{border-color:var(--accent-text)}
.steps .n{color:var(--accent-text)}
.foot{border-top-color:var(--rule);align-items:center}
.foot .f-lockup{display:block;width:170px;height:auto;margin-right:auto}
.foot .f-lockup img{display:block;width:100%}
.foot .f-contact a{border-bottom-color:var(--rule)}
.foot .f-contact a:hover{border-color:var(--ink)}
@media (max-width:760px){.hero{background:var(--paper)}.hero-card{background:var(--paper);border-top-color:var(--rule)}.foot .f-lockup{width:150px;margin-right:0}}

/* v15: the rail. The makers whose libraries we hold, down the right side; a list and nothing else. */
/* v17: a strip right under the hero, every maker's mark beside its name, drawn in ink. Static at every width (a fixed rail collided with the copy). */
.rail{box-sizing:border-box;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:22px var(--gutter) 0;display:flex;align-items:center;justify-content:flex-end;gap:14px 28px;flex-wrap:wrap;background:var(--paper)}
.rail-title{font:10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;padding-right:28px;background:repeating-linear-gradient(90deg,var(--muted) 0 12px,transparent 12px 17px,var(--muted) 17px 21px,transparent 21px 26px) right center/18px 1px no-repeat}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.rail li{font-family:"Archivo",sans-serif;font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--ink);opacity:.82;display:flex;align-items:center;gap:10px}
.rail .mk{display:block;flex:none;height:13px;width:calc(13px * var(--ar,1));background:currentColor;-webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;opacity:.9}
.rail .mk.word{height:15px;width:calc(15px * var(--ar,1));opacity:.82} /* wordmarks stand alone, no name beside them */
@media (max-width:900px){.rail{justify-content:flex-start}.rail-title{padding-right:0;background:none;flex-basis:100%}}

.who .sec-lede.who{grid-column:2;margin-top:10px;color:var(--muted);font-size:15px}
.live{gap:12px}
.live .btn+.btn{margin-left:0}
@media (max-width:900px){.who .sec-lede.who{grid-column:1}}

/* v13: who we work with */
.who{padding-top:0}
.who .sec-head{margin-bottom:0}
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:clamp(28px,4vw,52px)}
.who-grid div{padding:26px 26px 30px 0;border-right:1px solid var(--rule)}
.who-grid div+div{padding-left:26px}
.who-grid div:last-child{border-right:0}
.who-grid h3{font-size:21px;margin-bottom:10px}
.who-grid p{color:var(--ink2);font-size:16px;max-width:34ch}
@media (max-width:820px){.who-grid{grid-template-columns:1fr}.who-grid div{border-right:0;border-bottom:1px solid var(--rule);padding:20px 0}.who-grid div+div{padding-left:0}.who-grid div:last-child{border-bottom:0}}

/* v13: the deliverables checklist */
.deliv{padding-top:clamp(56px,7vw,110px)}
.checklist{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,80px)}
.checklist li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);font-size:clamp(16px,1.3vw,19px);color:var(--ink)}
.checklist i{flex:0 0 auto;width:22px;height:22px;border:1px solid var(--ink);background:var(--sheet);position:relative}
.checklist i::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(42deg)}
@media (max-width:760px){.checklist{grid-template-columns:1fr}.checklist li{padding:13px 0}}

/* v10: three verbs */
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps-3 h3{font-size:clamp(30px,3.4vw,44px)}
@media (max-width:560px){.steps-3{grid-template-columns:1fr}}

/* v20: the studio leads over the render; the quote form has its own section below */
.hero-intro{max-width:640px}
.hero-intro h1{font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(30px,3.3vw,46px);letter-spacing:-.025em;line-height:1.05;margin:12px 0 12px}
.hero-intro .lede{font-size:16px;line-height:1.55;color:var(--ink2);max-width:52ch}
.hero-intro .hero-actions{margin-top:22px}
.quote-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);border-top:1px solid var(--ink);padding-top:clamp(22px,3vw,34px)}
.quote-form .up{margin-top:0}
.who-grid.who-stack{grid-template-columns:1fr;border-top:0;margin-top:0;align-content:start}
.who-grid.who-stack div{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 18px;margin-bottom:18px}
.who-grid.who-stack div:last-child{border-bottom:0;margin-bottom:0}
@media (max-width:900px){.quote-grid{grid-template-columns:1fr}}
@media (max-width:760px){.hero-intro h1{font-size:30px}}

/* v20: hero crossfade. Every frame shares one transform (no settle zoom on the first), and the incoming frame
   fades in above the outgoing one, which stays fully opaque until it is covered: no dip, no jump. */
.hero{isolation:isolate}
.hero-img,.hero-img.hero-alt{transform:none;animation:none;transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
.hero-img.hero-alt{opacity:0}
.hero-img:first-of-type{opacity:1}
.hero.cycling .hero-img{opacity:0;z-index:-2}
.hero.cycling .hero-img.is-on{opacity:1}
.hero.cycling .hero-img.is-top{z-index:-1}

/* v20: Tools stays in the bar on phones */
@media (max-width:820px){.bar nav{gap:16px}.bar nav a.nav-tools{display:inline}}

/* v21: charcoal, light blue and the beiges (replaces the near-black night palette).
   Charcoal grounds, warm beige type, a light architectural blue for every accent and the primary action. */
:root{
  --paper:#2a2c2f;--sheet:#33363a;--ink:#f1ebe0;--ink2:#ddd4c4;--muted:#bdb2a0;--faint:#8e8678;
  --rule:#474a4f;--rule2:#3a3d41;--accent:#9cc3e6;--accent-text:#9cc3e6;--wash:#33404d;
  --beige:#d8ccb5;--beige2:#c4b598;
}
body{background:var(--paper)}
.hero{background:#24262a}
.hero::after{background:linear-gradient(90deg,rgba(42,44,47,.62) 0%,rgba(42,44,47,0) 48%)}
.hero-card{background:rgba(51,54,58,.9);border-color:var(--rule)}
.ba-label{background:rgba(51,54,58,.92);border-color:var(--rule)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#1f2226}
.btn-primary:hover{background:var(--beige);border-color:var(--beige);color:#1f2226}
.btn:hover{background:var(--beige);color:#1f2226;border-color:var(--beige)}
.btn-ghost:hover{background:transparent;color:var(--ink);border-color:var(--beige)}
.bar nav .cta:hover{background:var(--beige);color:#1f2226;border-color:var(--beige)}
.section-title,.rail-title,.eyebrow{color:var(--beige2)}
.checklist i::after{border-color:var(--accent)}
.steps .n{color:var(--beige)}
::selection{background:var(--accent);color:#1f2226}
@media (max-width:760px){.hero{background:var(--paper)}.hero-card{background:var(--paper)}}
button.btn{font:inherit;font-size:15px;font-weight:500}

/* v22: thirty-plus libraries. The strip becomes a quiet wall: one ink, even optical weight, wrapping in rows,
   brightening only on hover. */
.rail{justify-content:flex-start;align-items:flex-start;gap:14px 28px;padding-top:28px;padding-bottom:6px}
.rail-title{flex-basis:100%;padding-right:0;background:none;margin-bottom:4px}
.rail ul{gap:16px 30px;align-items:center}
.rail li{opacity:.62;transition:opacity .2s var(--ease)}
.rail li:hover{opacity:1}
.rail li.nm{font-family:"Archivo",sans-serif;font-weight:600;font-size:13px;letter-spacing:-.01em}

/* the libraries strip sits at the foot of the page: a quiet statement of fact, not a selling point */
.rail.rail-end{padding-top:34px;padding-bottom:44px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.rail.rail-end li{opacity:.5}
.rail.rail-end li:hover{opacity:.9}

/* tighter rhythm between sections */
section{padding-top:clamp(40px,5vw,76px);padding-bottom:clamp(40px,5vw,76px)}
.compare-slider{padding-bottom:clamp(28px,4vw,56px)}
.deliv{padding-top:clamp(36px,4.5vw,68px)}

/* intake: how the product is being chosen */
.path{border:0;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.path legend{font:10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--beige2);padding:0;margin-bottom:12px}
.path-opt{position:relative;display:block;cursor:pointer}
.path-opt input{position:absolute;opacity:0;pointer-events:none}
.path-opt span{display:block;height:100%;box-sizing:border-box;padding:14px 14px 15px;border:1px solid var(--rule);background:rgba(255,255,255,.035);transition:border-color .2s var(--ease),background .2s var(--ease)}
.path-opt b{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.path-opt i{display:block;margin-top:6px;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--muted)}
.path-opt:hover span{border-color:var(--ink)}
.path-opt input:checked+span{border-color:var(--accent-text);background:var(--wash)}
.path-opt input:checked+span b{color:var(--accent-text)}
.path-opt input:focus-visible+span{outline:2px solid var(--accent-text);outline-offset:2px}
.spec{margin-top:10px}
.drop-spec .drop-main{font-size:17px}
.path-note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.up-fields .due{display:flex;align-items:center;gap:10px;grid-column:1/-1}
.up-fields .due span{flex:none;font:10px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.up-fields .due input{flex:1 1 auto;min-width:0;color-scheme:dark}
@media (max-width:760px){.path{grid-template-columns:1fr}}

.up-fields .wide{grid-column:1/-1}