@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html{background:#F3F0E8;scroll-behavior:smooth}
body{margin:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.site{container:site/inline-size;
--bg:#F3F0E8;--surface:#FBFAF6;--ink:#17201C;--muted:#545E58;--line:#D9D3C6;--accent:#F2C230;--on-accent:#17201C;
--band:#1C3F36;--band-ink:#F3F0E8;--band-muted:#BBD0C8;--band-card:#22493F;--band-line:#33604F;
--arc-bg:#123544;--arc-ink:#E6F0F2;--arc-muted:#A9C3CA;--arc-dot:#2A5466;--arc-route:#FF8F66;--arc-pin:#F2C230;
--h-bg:#F0DFCB;--h-ink:#3B2519;--h-muted:#6B4B3B;--h-ember:#B4482F;--h-band:#E2C6A8;--h-ring:#E7D0B7;
background:var(--bg);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;font-size:17px;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased}
.site *{box-sizing:border-box}
.site a{color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding-inline:40px}
.display{font-family:'Bricolage Grotesque',sans-serif;font-optical-sizing:auto;letter-spacing:-.025em;font-weight:700;line-height:1.02}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow::before{content:"";width:10px;height:10px;background:var(--accent);border-radius:2px;flex:none}
.mark{box-shadow:inset 0 -.24em 0 var(--accent)}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;padding-block:28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.005em}
.brand svg{flex:none}
.nav{display:flex;gap:0 28px;flex-wrap:wrap;font-size:15px}
.nav a{text-decoration:none;color:var(--muted);padding:12px 0;display:inline-block}
.nav a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;font-family:inherit;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--bg)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:end;padding-block:72px 120px}
.hero h1{font-size:clamp(46px,7cqi,100px);margin:28px 0 0}
.lede{font-size:20px;max-width:32em;color:var(--muted);margin:32px 0 0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.ledger{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px}
.ledger ol{list-style:none;margin:20px 0 0;padding:0}
.ledger li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.ledger .n{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}
.ledger .t{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.ledger .t small{display:block;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:2px}
.ledger li.cheap .t{color:var(--muted)}
.ledger li.cheap .t s{text-decoration-thickness:2px}
.ledger .foot{font-size:14px;color:var(--muted);margin:16px 0 0;padding-top:16px;border-top:1.5px solid var(--ink)}

/* sections */
.section{padding-block:120px}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:56px}
.sec-head h2{font-size:clamp(38px,4.6cqi,64px);margin:20px 0 0}
.sec-head p{margin:0;color:var(--muted);font-size:18px;max-width:30em}

/* products */
.products{display:flex;flex-direction:column;gap:32px}
.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:32px;overflow:hidden;min-height:660px}
.product.flip .p-copy{order:2}
.p-copy{padding:56px;display:flex;flex-direction:column;gap:22px}
.p-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:48px 32px;overflow:hidden;min-height:620px}
.p-visual .bg{position:absolute;inset:0;width:100%;height:100%}
.p-name{display:flex;align-items:center;gap:16px}
.p-name h3{font-size:58px;margin:0}
.p-logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none}
.p-tag{font-family:'Bricolage Grotesque',sans-serif;font-size:27px;line-height:1.2;font-weight:500;letter-spacing:-.015em;margin:0}
.p-desc{margin:0;font-size:17px}
.p-feats{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15.5px}
.p-feats li{display:flex;gap:12px;align-items:flex-start}
.p-feats svg{flex:none;margin-top:4px}
.p-meta{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;padding:7px 12px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.p-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font-weight:600;text-decoration:none;font-size:15.5px}

.arcway{background:var(--arc-bg);color:var(--arc-ink)}
.arcway .p-desc,.arcway .p-feats{color:var(--arc-muted)}
.arcway .p-feats svg{color:var(--arc-route)}
.arcway .p-logo{background:var(--arc-route);color:#3A1407}
.arcway .p-link{background:var(--arc-route);color:#2A0F05}
.arcway .chip{color:var(--arc-muted)}
.arcway .p-visual{border-left:1px solid rgba(255,255,255,.07)}
.a-dot{fill:var(--arc-dot)}
.a-route{fill:none;stroke:var(--arc-route);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.a-pin{fill:var(--arc-pin)}
.a-ring{fill:none;stroke:var(--arc-pin);stroke-opacity:.35;stroke-width:1.5}
.a-label{font-family:'IBM Plex Mono',monospace;font-size:13px;fill:var(--arc-muted);letter-spacing:.08em}

.hearth{background:var(--h-bg);color:var(--h-ink)}
.hearth .p-desc,.hearth .p-feats{color:var(--h-muted)}
.hearth .p-feats svg{color:var(--h-ember)}
.hearth .p-logo{background:var(--h-ember);color:var(--h-bg)}
.hearth .chip{color:var(--h-muted)}
.store{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:14px;background:var(--h-ink);color:var(--h-bg);font-weight:600;font-size:15px}
.h-ringc{fill:none;stroke:var(--h-ring);stroke-width:1.5}
.h-bandp{fill:var(--h-band)}
.h-line{fill:none;stroke:var(--h-ember);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.h-today{fill:var(--h-ember)}

/* phones */
.phone{position:relative;z-index:1;width:280px;height:580px;border-radius:46px;background:#0B0F0D;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);flex:none}
.screen{height:100%;border-radius:37px;overflow:hidden;display:flex;flex-direction:column;font-size:12px;line-height:1.4}
.island{width:84px;height:24px;border-radius:20px;background:#0B0F0D;margin:10px auto 0;flex:none}
.a-screen{background:#F6F9F9;color:#123544}
.a-map{height:168px;margin-top:-34px;flex:none;position:relative}
.a-map svg{display:block;width:100%;height:100%}
.a-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.a-title{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.1}
.a-sub{font-size:11.5px;color:#4D6A73;margin:0}
.a-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:9px 10px;box-shadow:0 1px 0 rgba(18,53,68,.1)}
.a-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#FFE4D8;color:#A8401F}
.a-item b{display:block;font-size:12.5px}
.a-item span{font-size:11px;color:#4D6A73}
.a-item em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#4D6A73}
.a-photos{display:flex;gap:3px}
.a-photos i{width:18px;height:18px;border-radius:5px;display:block}
.a-share{margin-top:auto;background:#123544;color:#fff;border-radius:12px;padding:11px;text-align:center;font-weight:600;font-size:12.5px}
.h-screen{background:#FBF4EC;color:#3B2519;padding:0 18px 18px;gap:12px}
.h-date{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#7A5947;margin:14px 0 0}
.h-say{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0}
.h-say span{color:#B4482F}
.h-states{display:flex;gap:5px}
.h-states b{font-weight:500;font-size:10.5px;padding:5px 9px;border-radius:999px;border:1px solid #E3CDB7;color:#7A5947}
.h-states b.on{background:#3B2519;color:#FBF4EC;border-color:#3B2519}
.h-card{background:#fff;border-radius:16px;padding:12px;box-shadow:0 1px 0 rgba(59,37,25,.08)}
.h-card p{margin:0;font-size:10.5px;color:#7A5947;display:flex;justify-content:space-between}
.h-card svg{display:block;width:100%;height:56px;margin-top:6px}
.h-rows{display:grid;gap:0;background:#fff;border-radius:16px;padding:2px 12px}
.h-rows div{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid #F1E6DA;font-size:11.5px}
.h-rows div:first-child{border-top:0}
.h-rows span{color:#7A5947}
.h-lock{margin-top:auto;display:flex;align-items:center;gap:7px;font-size:10.5px;color:#7A5947}

/* work band */
.band{background:var(--band);color:var(--band-ink)}
.band .eyebrow,.band .sec-head p{color:var(--band-muted)}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case{background:var(--band-card);border:1px solid var(--band-line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:18px;min-height:400px}
.case.wide{grid-column:span 2}
.case-top{display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--band-muted);letter-spacing:.08em;text-transform:uppercase}
.case h3{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;line-height:1.18;font-weight:600;letter-spacing:-.015em;margin:0}
.case dl{margin:auto 0 0;display:grid;gap:14px}
.case dt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--band-muted);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.case dd{margin:0;font-size:15.5px}
.case .res dt::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent)}
.case .res dd{font-weight:600}
.stat{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.stat b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(56px,7cqi,104px);font-weight:700;letter-spacing:-.04em;line-height:.9;color:var(--accent)}
.stat span{font-size:16px;color:var(--band-muted);max-width:12em}
.wide-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:end;flex:1}
.wide-grid dl{margin:0}

/* how I work */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:72px}
.how h2{font-size:clamp(38px,4.6cqi,64px);margin:20px 0 0}
.how-intro p{color:var(--muted);font-size:18px;margin:28px 0 0;max-width:28em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
.num{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:14px}
.steps h3{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.015em;margin:18px 0 8px}
.steps p{margin:0;color:var(--muted);font-size:16px}
.tools{margin-top:88px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tools li{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px}

/* contact */
.contact{background:var(--accent);color:var(--on-accent)}
.contact .inner{padding-block:112px}
.contact .eyebrow{color:var(--on-accent)}
.contact .eyebrow::before{background:var(--on-accent)}
.contact h2{font-size:clamp(34px,4.2cqi,58px);margin:20px 0 0;max-width:16em}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:44px}
.email{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(28px,6.3cqi,90px);letter-spacing:-.035em;line-height:1.05;text-decoration:none;overflow-wrap:anywhere;user-select:all}
.email:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.copy{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:0;background:#17201C;color:#F2C230;font:600 16px 'Instrument Sans',sans-serif;cursor:pointer}
.contact .note{font-size:18px;max-width:34em;margin:36px 0 0}

/* company details */
.legal{padding-block:112px 96px}
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px 72px}
.legal h2{font-size:44px;margin:20px 0 0}
.legal-grid > div > p{color:var(--muted);font-size:16px;margin:20px 0 0;max-width:22em}
.facts{margin:0;border-top:1.5px solid var(--ink)}
.fact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:4px 32px;padding:20px 0;border-bottom:1px solid var(--line)}
.fact dt{margin:0;font-weight:600;font-size:15px}
.fact dt span{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.fact dd{margin:0;font-size:17px}
.fact dd.n{font-family:'IBM Plex Mono',monospace;font-size:16px}
.ph{background:rgba(242,194,48,.38);border-radius:4px;padding:1px 6px}

/* footer */
.footer{border-top:1px solid var(--line);padding-block:28px 44px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.footer nav{display:flex;gap:4px 24px;flex-wrap:wrap;align-items:center}
.footer a{color:var(--ink);padding:12px 0;display:inline-block}

/* privacy page */
.doc{display:grid;grid-template-columns:240px minmax(0,740px);gap:72px;padding-block:56px 120px}
.toc{font-size:14.5px}
.toc ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
.toc a{color:var(--muted);text-decoration:none;display:block;padding:8px 0}
.toc a:hover{color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:15px;color:var(--muted);padding:12px 0;margin-bottom:24px}
.doc h1{font-size:clamp(44px,6cqi,80px);margin:20px 0 0}
.doc .updated{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);margin:20px 0 0}
.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:40px 0 8px}
.summary div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.summary b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;letter-spacing:-.01em;line-height:1.2;margin-bottom:6px}
.summary span{font-size:14.5px;color:var(--muted)}
.doc h2{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;letter-spacing:-.02em;font-weight:650;margin:56px 0 12px;display:flex;gap:14px;align-items:baseline}
.doc h2 small{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.doc p,.doc li{font-size:17px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:6px}
.doc .facts{margin-top:8px}

@container site (max-width: 960px){
.hero{grid-template-columns:minmax(0,1fr);gap:48px;padding-block:40px 88px}
.sec-head{grid-template-columns:minmax(0,1fr)}
.product{grid-template-columns:minmax(0,1fr)}
.product.flip .p-copy{order:0}
.arcway .p-visual{border-left:0;border-top:1px solid rgba(255,255,255,.07)}
.cases{grid-template-columns:repeat(2,minmax(0,1fr))}
.how{grid-template-columns:minmax(0,1fr);gap:48px}
.legal-grid{grid-template-columns:minmax(0,1fr)}
.doc{grid-template-columns:minmax(0,1fr);gap:24px}
}
@container site (max-width: 640px){
.wrap{padding-inline:20px}
.topbar{padding-block:16px 4px}
.nav{gap:0 18px;font-size:14px;width:100%}
.hero h1{font-size:46px}
.lede{font-size:18px}
.ledger{padding:24px}
.section{padding-block:88px}
.sec-head{margin-bottom:36px}
.p-copy{padding:32px 24px 36px}
.p-name h3{font-size:44px}
.p-tag{font-size:22px}
.p-visual{min-height:0;padding:40px 16px 48px}
.cases{grid-template-columns:minmax(0,1fr)}
.case.wide{grid-column:auto}
.wide-grid{grid-template-columns:minmax(0,1fr)}
.case{padding:26px;min-height:0}
.case h3{font-size:22px}
.steps{grid-template-columns:minmax(0,1fr);gap:36px}
.tools{margin-top:56px}
.contact .inner{padding-block:80px}
.copy{width:100%;justify-content:center}
.legal{padding-block:80px 64px}
.legal h2{font-size:36px}
.fact{grid-template-columns:minmax(0,1fr)}
.footer{flex-direction:column;align-items:flex-start}
.summary{grid-template-columns:minmax(0,1fr)}
.doc h2{font-size:24px}
.doc p,.doc li{font-size:16px}
}

/* dark theme: follows the system setting */
@media (prefers-color-scheme:dark){
html{background:#101412}
.site{--bg:#101412;--surface:#171D1A;--ink:#ECE7DC;--muted:#A4ACA6;--line:#2A322E;
--band:#16211D;--band-ink:#ECE7DC;--band-muted:#A9B8B1;--band-card:#1C2A25;--band-line:#2C3D36;
--arc-bg:#0E2B37;--arc-dot:#1F4555;
--h-bg:#2A1D16;--h-ink:#F2E3D2;--h-muted:#CDB29C;--h-ember:#EE8C6A;--h-band:#46301F;--h-ring:#3A281C}
.mark{box-shadow:inset 0 -.12em 0 var(--accent)}
}