/* OxOne v2 — the shared look for every page after the iceberg home page.
   Cream sections, Fraunces display, Outfit text, orange only for the button and one
   italic phrase per page. Home keeps its own inline copy until it is promoted. */
:root{
  --cream:#FBF8F3; --paper:#F4EFE7; --ink:#1C1917; --o:#E8590C; --stone:#57534E; --line:#E2DBCF; --soft:#8a837a;
  --deep:#07121B; --foam:#E4EEF2; --mist:rgba(228,238,242,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'Outfit',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--stone)}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,76px);line-height:1.03}
h2{font-size:clamp(30px,4vw,50px);line-height:1.07}
h3{font-size:clamp(21px,2.2vw,26px);line-height:1.2}
h1 em,h2 em{font-style:italic;color:var(--o)}
p{line-height:1.65;color:var(--stone)}

/* nav */
.v2nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,4vw,48px);background:rgba(251,248,243,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.v2nav.scrolled{border-bottom-color:var(--line)}
/* build-includes.py wraps nav/footer in these; without this the sticky nav sticks to its own wrapper */
#site-header,#site-footer{display:contents}
.mark{font-family:'Fraunces',serif;font-weight:400;font-size:22px;text-decoration:none;letter-spacing:-.01em}
.mark i{color:var(--o);font-style:normal}
.v2nav ul{display:flex;gap:28px;list-style:none;font-size:14px}
.v2nav ul a{text-decoration:none;opacity:.75}
.v2nav ul a:hover,.v2nav ul a[aria-current]{opacity:1}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--o);color:#fff;text-decoration:none;font-weight:500;font-size:16px;padding:14px 24px;border-radius:99px;transition:background .2s}
.btn:hover{background:#c94c08}
.btn.sm{font-size:13px;padding:9px 16px}
.ghost{font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;opacity:.85}
.micro{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--stone);font-weight:400}
.micro span::before{content:"✓";margin-right:6px;opacity:.7}

/* sections */
.sec{padding:clamp(72px,11vh,120px) 0}
.sec + .sec{border-top:1px solid var(--line)}
.head{max-width:700px}
.head p{font-size:18px;margin-top:16px}

/* page hero: words left, real work right */
.phero{padding:clamp(56px,9vh,96px) 0 clamp(64px,10vh,110px)}
.phero .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.phero .copy{display:grid;gap:22px}
.phero .lede{font-size:clamp(17px,1.4vw,19.5px);font-weight:400;max-width:560px}
.phero .lede b{color:var(--ink);font-weight:500}
.ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.founder{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--stone);font-weight:400}
.founder img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.founder b{color:var(--ink);font-weight:500}
.shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper);box-shadow:0 30px 60px -40px rgba(28,25,23,.35)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shotcap{font-size:13px;color:var(--soft);margin-top:12px}

/* the four layers, flat */
.layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:44px;border-top:1px solid var(--line)}
.layers article{padding:30px 34px 34px 0;border-bottom:1px solid var(--line);display:grid;gap:12px;align-content:start}
.layers article:nth-child(odd){border-right:1px solid var(--line)}
.layers article:nth-child(even){padding-left:34px}
.num{display:flex;gap:12px;align-items:baseline;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);font-weight:500}
.num b{font-family:'Fraunces',serif;font-weight:300;font-size:16px;letter-spacing:0;color:var(--ink)}
.layers p{font-size:16px}
.plate{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.plate strong{display:block;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.plate ul{list-style:none;display:grid;gap:6px;font-size:15px;color:var(--stone)}
.plate li{display:flex;gap:10px;align-items:baseline}
.plate li::before{content:"×";color:var(--o);opacity:.8;font-size:14px}

/* story */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;margin-top:40px}
.story .res{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(34px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em}
.story .res small{display:block;font-family:'Outfit',sans-serif;font-size:14px;color:var(--stone);margin-top:10px;font-weight:500;letter-spacing:0}
.story .lbl{display:inline-block;width:100px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:500}
.story p{font-size:15.5px;margin-top:10px}

/* demo frame */
.browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-top:40px}
.browser .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--soft)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.browser .bar span{margin-left:10px}
.browser iframe{display:block;width:100%;height:620px;border:0}
.browser + p{margin-top:14px;font-size:14px}

/* comparison */
.cmp{overflow-x:auto;margin-top:36px;border:1px solid var(--line);border-radius:14px;background:#fff}
.cmp table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
.cmp th,.cmp td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:500}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{color:var(--stone)}
.cmp .us{background:var(--paper);color:var(--ink);font-weight:500}

/* steps + prices */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:40px}
.steps div{border-top:1px solid var(--line);padding-top:18px}
.steps .when{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:500}
.steps b{display:block;font-family:'Fraunces',serif;font-weight:400;font-size:23px;margin-top:8px}
.steps p{font-size:15px;margin-top:8px}

/* faq */
.faq{margin-top:34px;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:'Fraunces',serif;font-weight:400;font-size:21px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-family:'Outfit',sans-serif;font-size:24px;color:var(--o)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;font-size:16px;max-width:680px}
.faq summary:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--o);outline-offset:3px}

/* close */
.close{padding:clamp(80px,13vh,140px) 0;background:var(--paper)}
.close .inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:center}
.close h2{font-size:clamp(34px,4.6vw,58px)}
.close p.big{font-size:19px;margin-top:20px;max-width:560px}
.close .ctas{margin-top:30px}
.close .micro{margin-top:18px}
.close figure img{width:100%;max-width:300px;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:14px}
.close figcaption{font-size:14px;color:var(--stone);margin-top:12px;line-height:1.5;max-width:300px}
.close figcaption b{color:var(--ink);font-weight:500}

.v2foot{border-top:1px solid var(--line);padding:30px 0 90px;font-size:13px;color:var(--stone)}
.v2foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.v2foot a{text-decoration:none}
.staging{position:fixed;left:16px;bottom:16px;z-index:30;background:var(--ink);color:var(--cream);font-size:11px;letter-spacing:.06em;padding:6px 12px;border-radius:99px;opacity:.8}

.sticky{display:none}
@media (max-width:860px){
  .v2nav ul{display:none}
  .phero .grid,.story,.close .inner{grid-template-columns:1fr;gap:34px}
  .layers,.steps{grid-template-columns:1fr}
  .layers article,.layers article:nth-child(even){padding:26px 0;border-right:0}
  .browser iframe{height:520px}
  .sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:25;gap:8px}
  .sticky a{flex:1;justify-content:center}
  .staging{bottom:78px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* site footer (v2) — the internal link graph lives here, so every page links every section */
.v2site-foot{background:var(--ink);color:#d6d1ca;padding:64px 0 40px;font-size:14px}
.v2site-foot .wrap{display:grid;gap:44px}
.v2site-foot .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.v2site-foot .top h2{color:var(--cream);font-size:clamp(28px,3.4vw,40px);max-width:620px}
.v2site-foot .top h2 em{color:var(--o)}
.v2site-foot .cols{display:grid;grid-template-columns:1.2fr repeat(4,minmax(0,1fr));gap:28px}
.v2site-foot h3{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#a8a29e;margin-bottom:12px}
.v2site-foot ul{list-style:none;display:grid;gap:8px}
.v2site-foot a{color:#d6d1ca;text-decoration:none}
.v2site-foot a:hover{color:#fff}
.v2site-foot .mark{color:var(--cream)}
.v2site-foot p{color:#a8a29e;font-size:14px;margin-top:10px;max-width:260px}
.v2site-foot .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8a837a;font-size:12.5px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:860px){.v2site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}.v2site-foot .cols>div:first-child{grid-column:1/-1}}

/* long-form pages (search landing pages, about) keep their article text in a reading column */
.prose{max-width:720px;margin:0 auto}
.prose h2{margin:56px 0 16px}
.prose h3{margin:36px 0 12px}
.prose p,.prose li{font-size:17px;line-height:1.75;color:var(--stone)}
.prose p+p{margin-top:16px}
.prose ul,.prose ol{margin:16px 0 16px 22px;display:grid;gap:8px}
.prose a{color:var(--ink);text-decoration-color:var(--o);text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:500}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.cta-box{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px;margin:48px 0;display:grid;gap:12px}
.cta-box h3{margin:0}

/* images carry width/height attributes for layout; let the CSS ratio win */
.close figure img,.shot img,.wt img{height:auto}
.close figure img{aspect-ratio:4/5}
.shot img{aspect-ratio:16/10}

/* phone menu (2026-10-17): below 860px the link row is hidden, so a "Menu" disclosure opens it as a sheet */
.mnav{display:none}
@media (max-width:860px){
  .mnav{display:block;margin-left:auto}
  .mnav summary{list-style:none;cursor:pointer;font-size:14px;font-weight:400;padding:10px 6px;opacity:.85;-webkit-tap-highlight-color:transparent}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav[open] summary{opacity:1;text-decoration:underline;text-underline-offset:4px}
  .mnav ul{display:grid!important;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--cream);color:var(--ink);list-style:none;padding:4px 20px 18px;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(28,25,23,.35)}
  .mnav li a{display:block;padding:13px 0;border-top:1px solid var(--line);font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:24px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);opacity:1}
  .mnav li:first-child a{border-top:0}
}