/* Hallmark · macrostructure: Split Studio · tone: plain-talking, trades · anchor hue: none (monochrome)
 * genre: modern-minimal (softened) · theme: studied-DNA (source: @oboperations Instagram, fencebook.app layout)
 * nav: N1b three-section + phone · footer: Ft5 statement · enrichment: real screenshots only
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 *
 * Everything here is prefixed "o-" so it can sit next to the legacy ob.css on the
 * form pages (get-started, onboarding) without touching the form's own styles.
 */

/* ---------- base (only on pages that opt in with body.o-site) ---------- */
html{ overflow-x:clip; -webkit-text-size-adjust:100%; }
.o-site, .o-site *{ box-sizing:border-box; }
body.o-site{
  margin:0; overflow-x:clip;
  background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.o-site :where(img){ max-width:100%; height:auto; display:block; }
.o-site :where(a){ color:inherit; }
.o-site :where(h1, h2, h3, p, ul, ol, dl, figure){ margin:0; }
.o-site :where(ul, ol){ padding:0; list-style:none; }
.o-site :focus-visible{ outline:2px solid var(--color-focus); outline-offset:3px; border-radius:4px; }
.o-skip{ position:absolute; left:-9999px; top:0; }
.o-skip:focus{ left:var(--space-sm); top:var(--space-sm); z-index:300; background:var(--color-ink); color:var(--color-paper); padding:var(--space-2xs) var(--space-sm); border-radius:var(--radius-sm); }

.o-wrap{ width:100%; max-width:var(--page-max); margin:0 auto; padding:0 var(--page-gutter); }
.o-sec{ padding:var(--space-3xl) 0; position:relative; }
.o-sec--tight{ padding:var(--space-2xl) 0; }
.o-sec + .o-sec:not(.o-sand){ border-top:var(--rule-hair) solid var(--color-rule); }
.o-sand{ background:var(--color-sand); color:var(--color-sand-ink); }
.o-sand + .o-sec{ border-top:0; }

.o-h1, .o-h2, .o-h3, .o-display{
  font-family:var(--font-display); font-style:normal; font-weight:800;
  letter-spacing:-0.035em; line-height:1.02; text-wrap:balance;
  overflow-wrap:anywhere; min-width:0;
}
.o-h1{ font-size:var(--text-display-s); font-weight:800; }
.o-h2{ font-size:var(--text-2xl); }
.o-h3{ font-size:var(--text-lg); line-height:1.15; letter-spacing:-0.015em; }
.o-lede{ font-size:var(--text-md); color:var(--color-ink-2); max-width:36em; line-height:1.55; }
.o-sand .o-lede{ color:var(--color-sand-muted); }
.o-muted{ color:var(--color-muted); }
.o-sand .o-muted{ color:var(--color-sand-muted); }
.o-accent{ color:inherit; text-decoration:underline; text-decoration-thickness:0.075em; text-underline-offset:0.13em; text-decoration-skip-ink:none; }
.o-num{ font-variant-numeric:tabular-nums; }

.o-head{ display:grid; gap:var(--space-sm); margin-bottom:var(--space-xl); max-width:44rem; }
.o-head--wide{ max-width:none; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); align-items:end; gap:var(--space-lg); }
@media (max-width:860px){ .o-head--wide{ grid-template-columns:minmax(0, 1fr); } }

/* ---------- buttons ---------- */
.o-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2xs);
  min-height:52px; padding:0 var(--space-md); border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:var(--text-base); font-weight:600; line-height:1;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:var(--rule-hair) solid transparent;
  transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.o-btn:active{ transform:translateY(1px); }
.o-btn:focus-visible{ outline:2px solid var(--color-focus); outline-offset:3px; }
.o-btn--go{ background:var(--color-accent); color:var(--color-accent-ink); }
.o-btn--go:hover{ background:var(--color-accent-hover); }
.o-btn--go:active{ background:var(--color-accent-press); }
.o-btn--line{ background:var(--color-paper-2); color:var(--color-ink); border-color:var(--color-rule-2); }
.o-btn--line:hover{ border-color:var(--color-ink-2); background:var(--color-paper-3); }
.o-sand .o-btn--line{ background:transparent; color:var(--color-sand-ink); border-color:var(--color-sand-ink); }
.o-sand .o-btn--line:hover{ background:var(--color-sand-2); }
.o-sand .o-btn--go{ background:var(--color-sand-ink); color:var(--color-white); }
.o-sand .o-btn--go:hover{ background:var(--color-paper-3); }
.o-btn--lg{ min-height:58px; padding:0 var(--space-lg); font-size:var(--text-md); }
.o-btn svg{ width:18px; height:18px; flex:none; transition:transform var(--dur-short) var(--ease-out); }
.o-btn:hover svg.o-arrow{ transform:translateX(3px); }
.o-btns{ display:flex; flex-wrap:wrap; gap:var(--space-xs); }
@media (max-width:480px){ .o-btns .o-btn{ width:100%; } }

.o-link{ color:var(--color-ink); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--color-accent-line); transition:text-decoration-color var(--dur-short) var(--ease-out); white-space:nowrap; }
.o-link:hover{ text-decoration-color:currentColor; }
.o-sand .o-link{ color:var(--color-sand-ink); }

/* ---------- top bar ---------- */
.o-bar{
  position:fixed; inset:0 0 auto 0; z-index:200; height:var(--bar-h);
  font-family:var(--font-body); color:var(--color-ink);
  background:var(--color-bar); backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:var(--rule-hair) solid transparent;
  transition:border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.o-bar.is-scrolled{ border-bottom-color:var(--color-rule); background:var(--color-bar-solid); }
/* three columns: logo left, links dead center, phone + button right */
.o-bar__in{ height:100%; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:var(--space-md); max-width:var(--page-max); margin:0 auto; padding:0 var(--page-gutter); }
.o-bar__in > .o-mark{ grid-column:1; justify-self:start; }
.o-mark{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-0.03em; color:var(--color-ink); text-decoration:none; white-space:nowrap; line-height:1; }
.o-mark b{ color:var(--color-ink); font-weight:800; }
.o-nav{ grid-column:2; display:flex; align-items:center; gap:var(--space-md); }
.o-nav a{ color:var(--color-ink-2); text-decoration:none; font-size:var(--text-sm); font-weight:500; white-space:nowrap; transition:color var(--dur-short) var(--ease-out); }
.o-nav a:hover{ color:var(--color-ink); }
.o-bar__right{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:var(--space-sm); }
.o-bar__phone{ color:var(--color-ink); text-decoration:none; font-weight:600; font-size:var(--text-sm); white-space:nowrap; font-variant-numeric:tabular-nums; }
.o-bar__phone:hover{ color:var(--color-ink-2); }
.o-bar .o-btn{ min-height:44px; padding:0 var(--space-sm); font-size:var(--text-sm); }
.o-burger{ display:none; width:44px; height:44px; border:var(--rule-hair) solid var(--color-rule-2); background:var(--color-paper-2); border-radius:var(--radius-sm); color:var(--color-ink); cursor:pointer; align-items:center; justify-content:center; }
.o-burger svg{ width:20px; height:20px; }
.o-burger:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }
.o-menu{
  position:fixed; inset:var(--bar-h) 0 auto 0; z-index:199; display:none;
  background:var(--color-paper); border-bottom:var(--rule-hair) solid var(--color-rule);
  padding:var(--space-sm) var(--page-gutter) var(--space-lg); font-family:var(--font-body);
}
.o-menu.is-open{ display:block; animation:oMenu var(--dur-short) var(--ease-out); }
@keyframes oMenu{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.o-menu a{ display:block; padding:var(--space-xs) 0; color:var(--color-ink); text-decoration:none; font-size:var(--text-md); font-weight:500; border-bottom:var(--rule-hair) solid var(--color-rule); }
.o-menu .o-btn{ margin-top:var(--space-md); width:100%; border-bottom:0; color:var(--color-accent-ink); }
.o-menu .o-menu__phone{ border-bottom:0; color:var(--color-ink); font-weight:600; }
@media (max-width:1100px){ .o-nav{ display:none; } .o-burger{ display:inline-flex; } }
@media (max-width:640px){
  .o-bar__phone, .o-bar .o-btn{ display:none; }
  .o-burger{ display:inline-flex; }
}

/* ---------- hero ---------- */
.o-hero, .o-page-hero{ background-image:linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size:56px 56px; background-position:center top; }
.o-hero{ padding:calc(var(--bar-h) + var(--space-2xl)) 0 var(--space-3xl); overflow:clip; }
.o-hero__grid{ display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr); gap:var(--space-2xl); align-items:center; }
.o-hero .o-h1{ margin-bottom:var(--space-md); }
.o-hero .o-lede{ margin-bottom:var(--space-lg); }
.o-trust{ display:flex; flex-wrap:wrap; gap:var(--space-2xs) var(--space-md); margin-top:var(--space-md); color:var(--color-ink-2); font-size:var(--text-sm); }
.o-trust li{ display:inline-flex; align-items:center; gap:var(--space-2xs); }
.o-check{ width:18px; height:18px; flex:none; color:var(--color-ink); }
.o-shot{ position:relative; min-width:0; }
/* desktop screenshot with the phone screenshot tucked over its bottom-right corner.
   Both sit in one grid cell, so the phone can never drift outside the figure. */
.o-shot__stage{ display:grid; padding-bottom:7%; }
.o-shot__img, .o-shot__phone{ grid-area:1 / 1; min-width:0; }
.o-shot__img{ width:88%; align-self:start; border-radius:var(--radius-lg); border:var(--rule-hair) solid var(--color-rule-2); box-shadow:0 30px 60px -20px var(--color-shadow); overflow:hidden; background:var(--color-paper-2); }
.o-shot__img img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }
.o-shot__phone{ width:27%; justify-self:end; align-self:end; margin-bottom:-7%; border-radius:clamp(12px, 2.2vw, 22px); border:clamp(3px, 0.5vw, 5px) solid var(--color-paper-3); overflow:hidden; box-shadow:0 24px 50px -16px var(--color-shadow); background:var(--color-paper-2); position:relative; }
.o-shot__phone img{ width:100%; aspect-ratio:390 / 780; object-fit:cover; object-position:top center; }
.o-shot figcaption{ margin-top:var(--space-sm); font-size:var(--text-sm); color:var(--color-muted); max-width:34rem; display:grid; gap:var(--space-2xs); justify-items:start; }
.o-shot figcaption a{ color:var(--color-ink); }
.o-tag{ display:inline-flex; align-items:center; gap:var(--space-2xs); padding:var(--space-3xs) var(--space-xs); border-radius:var(--radius-pill); background:var(--color-paper-2); border:var(--rule-hair) solid var(--color-rule-2); color:var(--color-ink-2); font-size:var(--text-xs); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; }
.o-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--color-ink); }
.o-tag--live::before{ background:var(--color-good); }
.o-sand .o-tag{ background:var(--color-white); border-color:var(--color-sand-rule); color:var(--color-sand-muted); }
.o-sand .o-tag::before{ background:var(--color-sand-ink); }
.o-hero .o-tag, .o-page-hero .o-tag{ margin-bottom:var(--space-md); }
@media (max-width:900px){
  .o-hero{ padding-top:calc(var(--bar-h) + var(--space-xl)); }
  .o-hero__grid{ grid-template-columns:minmax(0, 1fr); gap:var(--space-2xl); }
}

/* ---------- honest intro (sand) ---------- */
.o-say{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:var(--space-2xl); align-items:end; }
.o-say__big{ font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); line-height:1.08; letter-spacing:-0.025em; text-wrap:balance; }
.o-say__big span{ text-decoration:underline; text-decoration-thickness:0.075em; text-underline-offset:0.13em; text-decoration-skip-ink:none; }
.o-say__me{ font-size:var(--text-md); color:var(--color-sand-muted); line-height:1.6; }
.o-say__me strong{ color:var(--color-sand-ink); font-weight:600; }
@media (max-width:860px){ .o-say{ grid-template-columns:minmax(0, 1fr); gap:var(--space-lg); } }

/* ---------- what you get ---------- */
.o-price-chip{ display:inline-flex; align-items:baseline; gap:var(--space-2xs); font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); color:var(--color-ink); letter-spacing:-0.02em; white-space:nowrap; }
.o-price-chip small{ font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-muted); font-weight:500; letter-spacing:0; }
.o-feature-lead{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-xl); align-items:center; padding:var(--space-xl); border-radius:var(--radius-lg); background:var(--color-paper-2); border:var(--rule-hair) solid var(--color-rule); margin-bottom:var(--space-lg); }
.o-feature-lead .o-h3{ font-size:var(--text-xl); margin:var(--space-xs) 0 var(--space-sm); }
.o-feature-lead p{ color:var(--color-ink-2); }
.o-feature-lead__fine{ margin-top:var(--space-sm); font-size:var(--text-sm); color:var(--color-muted) !important; }
@media (max-width:860px){ .o-feature-lead{ grid-template-columns:minmax(0, 1fr); padding:var(--space-md); } }

.o-n{ font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--color-muted); font-variant-numeric:tabular-nums; letter-spacing:0; }

.o-miss{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:var(--space-xl); align-items:center; padding:var(--space-xl); border-radius:var(--radius-lg); background:var(--color-sand); color:var(--color-sand-ink); margin-bottom:var(--space-lg); }
.o-miss .o-n{ color:var(--color-sand-muted); }
.o-miss .o-miss__line{ font-family:var(--font-display); font-weight:800; font-size:var(--text-2xl); line-height:1.02; letter-spacing:-0.03em; margin-top:var(--space-2xs); text-wrap:balance; }
.o-miss p{ font-size:var(--text-md); line-height:1.55; }
.o-miss .o-miss__line{ margin-bottom:var(--space-sm); }
.o-texts{ display:grid; gap:var(--space-xs); justify-items:start; }
.o-miss .o-txt{ max-width:20rem; padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-lg); font-size:var(--text-sm); line-height:1.45; }
.o-miss .o-txt--note{ background:var(--color-note); font-size:var(--text-xs); font-weight:600; border-radius:var(--radius-pill); padding:var(--space-3xs) var(--space-xs); justify-self:center; }
.o-txt--out{ background:var(--color-paper); color:var(--color-ink); border-bottom-left-radius:4px; }
.o-txt--in{ background:var(--color-white); color:var(--color-sand-ink); justify-self:end; border-bottom-right-radius:4px; box-shadow:0 1px 0 var(--color-sand-rule); }
@media (max-width:860px){ .o-miss{ grid-template-columns:minmax(0, 1fr); padding:var(--space-md); } }

.o-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--space-2xl); }
.o-list li{ display:grid; grid-template-columns:2.25rem minmax(0, 1fr); gap:var(--space-xs); padding:var(--space-md) 0; border-top:var(--rule-hair) solid var(--color-rule); }
.o-list .o-h3{ font-size:var(--text-md); margin-bottom:var(--space-3xs); line-height:1.25; }
.o-list p{ color:var(--color-ink-2); font-size:var(--text-base); }
.o-list .o-n{ padding-top:0.2em; }
@media (max-width:760px){ .o-list{ grid-template-columns:minmax(0, 1fr); } }
.o-more{ display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); margin-top:var(--space-lg); font-size:var(--text-sm); }

/* ---------- value math (sand) ---------- */
.o-math{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:var(--space-2xl); align-items:center; }
.o-calc{ background:var(--color-paper); color:var(--color-ink); border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:0 30px 60px -30px var(--color-shadow); }
.o-calc label{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-sm); font-weight:600; font-size:var(--text-sm); color:var(--color-ink-2); }
.o-calc output{ font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--color-ink); font-variant-numeric:tabular-nums; }
.o-range{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer; margin:var(--space-2xs) 0 var(--space-md); --fill:20%; }
.o-range::-webkit-slider-runnable-track{ height:8px; border-radius:var(--radius-pill); background:linear-gradient(to right, var(--color-accent) var(--fill), var(--color-paper-3) var(--fill)); }
.o-range::-moz-range-track{ height:8px; border-radius:var(--radius-pill); background:var(--color-paper-3); }
.o-range::-moz-range-progress{ height:8px; border-radius:var(--radius-pill); background:var(--color-accent); }
.o-range::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; margin-top:-10px; border-radius:50%; background:var(--color-paper); border:5px solid var(--color-ink); transition:transform var(--dur-micro) var(--ease-out); }
.o-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--color-paper); border:5px solid var(--color-ink); }
.o-range:active::-webkit-slider-thumb{ transform:scale(1.12); }
.o-range:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; border-radius:var(--radius-sm); }
.o-tally{ border-top:var(--rule-hair) solid var(--color-rule); }
.o-tally div{ display:flex; justify-content:space-between; gap:var(--space-sm); padding:var(--space-xs) 0; border-bottom:var(--rule-hair) solid var(--color-rule); font-variant-numeric:tabular-nums; }
.o-tally dt{ color:var(--color-ink-2); }
.o-tally dd{ margin:0; font-weight:600; }
.o-tally .o-tally__net dt{ color:var(--color-ink); font-weight:600; }
.o-tally .o-tally__net dd{ font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-ink); font-weight:800; letter-spacing:-0.02em; }
.o-calc__fine{ margin-top:var(--space-sm); font-size:var(--text-xs); color:var(--color-muted); }
@media (max-width:860px){ .o-math{ grid-template-columns:minmax(0, 1fr); gap:var(--space-xl); } .o-calc{ padding:var(--space-md); } }

/* ---------- custom work ---------- */
.o-split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-2xl); align-items:center; }
.o-split--flip > :first-child{ order:2; }
@media (max-width:900px){ .o-split{ grid-template-columns:minmax(0, 1fr); gap:var(--space-xl); } .o-split--flip > :first-child{ order:0; } }
.o-ticks{ display:grid; gap:var(--space-xs); margin:var(--space-md) 0 var(--space-lg); }
.o-ticks li{ display:grid; grid-template-columns:22px minmax(0, 1fr); gap:var(--space-xs); color:var(--color-ink-2); }
.o-ticks li .o-check{ margin-top:0.2em; color:var(--color-ink); }
.o-ticks strong{ color:var(--color-ink); font-weight:600; }
.o-audit{ border:var(--rule-hair) solid var(--color-rule-2); background:var(--color-paper-2); border-radius:var(--radius-lg); padding:var(--space-md); }
.o-audit .o-h3{ font-size:var(--text-md); margin-bottom:var(--space-2xs); }
.o-audit p{ color:var(--color-ink-2); margin-bottom:var(--space-md); }
.o-fig img{ border-radius:var(--radius-lg); border:var(--rule-hair) solid var(--color-rule-2); width:100%; box-shadow:0 30px 60px -24px var(--color-shadow); }
.o-fig figcaption{ margin-top:var(--space-sm); font-size:var(--text-sm); color:var(--color-muted); }
.o-fig figcaption a{ color:var(--color-ink); }

/* ---------- work ---------- */
.o-work{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-lg); }
.o-job{ display:grid; gap:var(--space-sm); text-decoration:none; color:inherit; }
.o-job__img{ border-radius:var(--radius-lg); overflow:hidden; border:var(--rule-hair) solid var(--color-rule-2); background:var(--color-paper-2); }
.o-job__img img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; transition:transform var(--dur-long) var(--ease-out); }
a.o-job:hover .o-job__img img{ transform:scale(1.02); }
.o-job__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-sm); flex-wrap:wrap; }
.o-job .o-h3{ font-size:var(--text-lg); }
.o-job p{ color:var(--color-ink-2); max-width:34rem; }
.o-job__url{ font-size:var(--text-sm); color:var(--color-ink-2); text-decoration:underline; text-underline-offset:3px; font-weight:600; white-space:nowrap; }
.o-also{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-lg); margin-top:var(--space-xl); align-items:stretch; }
.o-also__names{ padding:var(--space-md) 0; border-top:var(--rule-hair) solid var(--color-rule); }
.o-also__names p{ color:var(--color-muted); font-size:var(--text-sm); margin-bottom:var(--space-xs); }
.o-also__names ul{ display:flex; flex-wrap:wrap; gap:var(--space-2xs); }
.o-also__names li{ padding:var(--space-2xs) var(--space-sm); border:var(--rule-hair) solid var(--color-rule-2); border-radius:var(--radius-pill); font-weight:600; font-size:var(--text-sm); white-space:nowrap; }
.o-slot{ display:flex; flex-direction:column; justify-content:center; gap:var(--space-2xs); padding:var(--space-md); border:2px dashed var(--color-rule-2); border-radius:var(--radius-lg); color:var(--color-muted); }
.o-slot strong{ color:var(--color-ink); font-family:var(--font-display); font-size:var(--text-md); font-weight:700; }
@media (max-width:760px){ .o-work, .o-also{ grid-template-columns:minmax(0, 1fr); } }

/* ---------- steps ---------- */
.o-steps{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-lg); counter-reset:step; }
.o-step{ position:relative; padding-top:var(--space-lg); border-top:3px solid var(--color-rule-2); }
.o-step:first-child{ border-top-color:var(--color-ink); }
.o-step__when{ display:inline-block; margin-bottom:var(--space-sm); padding:var(--space-3xs) var(--space-xs); border-radius:var(--radius-pill); background:var(--color-paper-3); font-size:var(--text-xs); font-weight:600; color:var(--color-ink-2); white-space:nowrap; }
.o-step .o-h3{ margin-bottom:var(--space-2xs); }
.o-step p{ color:var(--color-ink-2); }
.o-step__big{ font-family:var(--font-display); font-weight:800; font-size:var(--text-price); line-height:1; color:var(--color-paper-3); letter-spacing:-0.04em; margin-bottom:var(--space-xs); font-variant-numeric:tabular-nums; }
.o-step:first-child .o-step__big{ color:var(--color-ink); }
@media (max-width:860px){ .o-steps{ grid-template-columns:minmax(0, 1fr); gap:var(--space-xl); } }

/* ---------- why (sand) ---------- */
.o-why{ display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:var(--space-2xl); align-items:start; }
.o-why__list li{ display:grid; grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:var(--space-md); padding:var(--space-md) 0; border-top:var(--rule-hair) solid var(--color-sand-rule); }
.o-why__list li:last-child{ border-bottom:var(--rule-hair) solid var(--color-sand-rule); }
.o-why__list .o-h3{ font-size:var(--text-md); line-height:1.25; }
.o-why__list p{ color:var(--color-sand-muted); }
.o-why__sticky{ position:sticky; top:calc(var(--bar-h) + var(--space-lg)); display:grid; gap:var(--space-md); }
@media (max-width:860px){ .o-why{ grid-template-columns:minmax(0, 1fr); gap:var(--space-lg); } .o-why__sticky{ position:static; } .o-why__list li{ grid-template-columns:minmax(0, 1fr); gap:var(--space-3xs); } }

/* ---------- reviews ---------- */
.o-reviews{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-lg); }
.o-review-slot{ min-height:12rem; display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-md); padding:var(--space-lg); border:2px dashed var(--color-rule-2); border-radius:var(--radius-lg); }
.o-review-slot .o-stars{ display:flex; gap:4px; color:var(--color-rule-2); }
.o-review-slot .o-stars svg{ width:20px; height:20px; }
.o-review-slot p{ color:var(--color-muted); }
.o-review-slot strong{ display:block; color:var(--color-ink-2); font-weight:600; }
@media (max-width:760px){ .o-reviews{ grid-template-columns:minmax(0, 1fr); } }

/* ---------- faq ---------- */
.o-faq{ display:grid; grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:var(--space-2xl); align-items:start; }
.o-qa details{ border-top:var(--rule-hair) solid var(--color-rule); }
.o-qa details:last-child{ border-bottom:var(--rule-hair) solid var(--color-rule); }
.o-qa summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); padding:var(--space-md) 0; cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); line-height:1.25; letter-spacing:-0.01em; }
.o-qa summary::-webkit-details-marker{ display:none; }
.o-qa summary:hover{ color:var(--color-ink-2); }
.o-qa summary:focus-visible{ outline:2px solid var(--color-focus); outline-offset:4px; border-radius:4px; }
.o-plus{ position:relative; width:22px; height:22px; flex:none; }
.o-plus::before, .o-plus::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; background:currentColor; border-radius:2px; transform:translate(-50%, -50%); transition:transform var(--dur-short) var(--ease-out); }
.o-plus::after{ transform:translate(-50%, -50%) rotate(90deg); }
details[open] .o-plus::after{ transform:translate(-50%, -50%) rotate(0deg); }
.o-qa details p{ padding:0 0 var(--space-md); color:var(--color-ink-2); max-width:38rem; }
@media (max-width:860px){ .o-faq{ grid-template-columns:minmax(0, 1fr); gap:var(--space-md); } }

/* ---------- closing + footer ---------- */
.o-close{ padding:var(--space-3xl) 0 var(--space-2xl); text-align:left; }
.o-close__big{ font-family:var(--font-display); font-weight:800; font-size:var(--text-display-s); line-height:0.98; letter-spacing:-0.035em; max-width:14ch; text-wrap:balance; overflow-wrap:anywhere; margin-bottom:var(--space-lg); }
.o-close__row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm) var(--space-lg); }
.o-close__call{ font-size:var(--text-md); color:var(--color-ink-2); }
.o-close__call a{ color:var(--color-ink); font-weight:700; text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.o-close__call a:hover{ text-decoration:underline; }

.o-foot{ border-top:var(--rule-hair) solid var(--color-rule); padding:var(--space-xl) 0 calc(var(--space-xl) + 72px); font-family:var(--font-body); color:var(--color-ink-2); background:var(--color-paper); font-size:var(--text-sm); }
.o-foot__grid{ display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap:var(--space-lg); }
.o-foot__brand p{ margin-top:var(--space-xs); max-width:22rem; color:var(--color-muted); line-height:1.6; }
.o-foot h2{ font-family:var(--font-body); font-size:var(--text-xs); font-weight:600; color:var(--color-muted); margin:0 0 var(--space-xs); letter-spacing:0; }
.o-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2xs); }
.o-foot a{ color:var(--color-ink-2); text-decoration:none; white-space:nowrap; transition:color var(--dur-short) var(--ease-out); }
.o-foot a:hover{ color:var(--color-ink); text-decoration:underline; }
.o-foot__legal{ margin-top:var(--space-xl); padding-top:var(--space-md); border-top:var(--rule-hair) solid var(--color-rule); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-xs); color:var(--color-muted); font-size:var(--text-xs); }
@media (min-width:641px){ .o-foot{ padding-bottom:var(--space-xl); } }
@media (max-width:760px){ .o-foot__grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .o-foot__brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .o-foot__grid{ grid-template-columns:minmax(0, 1fr); } }

/* ---------- sticky mobile CTA ---------- */
.o-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:150; display:none;
  padding:var(--space-xs) 88px calc(var(--space-xs) + env(safe-area-inset-bottom)) var(--page-gutter);
  background:var(--color-bar-solid); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:var(--rule-hair) solid var(--color-rule); font-family:var(--font-body);
  transform:translateY(110%); transition:transform var(--dur-long) var(--ease-out);
}
.o-sticky.is-on{ transform:none; }
.o-sticky .o-btn{ width:100%; min-height:50px; }
@media (max-width:640px){ .o-sticky{ display:block; } }

/* ---------- subpages ---------- */
.o-page-hero{ padding:calc(var(--bar-h) + var(--space-2xl)) 0 var(--space-2xl); }
.o-crumb{ display:inline-flex; gap:var(--space-2xs); font-size:var(--text-sm); color:var(--color-muted); margin-bottom:var(--space-md); }
.o-crumb a{ color:var(--color-ink-2); text-decoration:none; white-space:nowrap; }
.o-crumb a:hover{ color:var(--color-ink); }
.o-page-hero .o-h1{ margin-bottom:var(--space-md); max-width:16ch; }
.o-page-hero .o-lede{ margin-bottom:var(--space-lg); }
.o-note{ border-left:3px solid var(--color-ink); padding:var(--space-2xs) 0 var(--space-2xs) var(--space-md); color:var(--color-ink-2); max-width:40rem; }
.o-sand .o-note{ color:var(--color-sand-muted); border-left-color:var(--color-accent-deep); }
.o-sand .o-list li{ border-top-color:var(--color-sand-rule); }
.o-sand .o-list p{ color:var(--color-sand-muted); }
.o-sand .o-n{ color:var(--color-sand-muted); }

.o-prose{ max-width:44rem; }
.o-prose h2{ font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); letter-spacing:-0.015em; margin:var(--space-xl) 0 var(--space-xs); line-height:1.2; }
.o-prose h3{ font-weight:600; font-size:var(--text-md); margin:var(--space-lg) 0 var(--space-2xs); }
.o-prose p, .o-prose li{ color:var(--color-ink-2); margin-bottom:var(--space-sm); }
.o-prose ul{ list-style:disc; padding-left:1.25rem; margin-bottom:var(--space-sm); }
.o-prose a{ color:var(--color-ink); text-decoration:underline; }

/* ---------- reveal ---------- */
.o-rise{ opacity:1; transform:none; }
.js .o-rise{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .o-rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .o-rise{ transform:none; transition:opacity 150ms linear; }
  .o-btn, .o-job__img img, .o-plus::before, .o-plus::after, .o-sticky, .o-range::-webkit-slider-thumb{ transition:none; }
  .o-menu.is-open{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* the form pages still load the legacy ob.css, whose bare nav/p/h2 rules would leak into the new chrome */
.o-bar .o-nav{ position:static; width:auto; max-width:none; margin:0; grid-template-columns:none; }
.o-bar p, .o-foot p, .o-menu p{ color:inherit; }
.o-foot .o-foot__brand p{ color:var(--color-muted); }
.o-foot h2{ letter-spacing:0; line-height:1.4; text-wrap:wrap; }