/* ══════════════════════════════════════════════════════════════════════════
   Obexron — site chrome and page layouts.

   Every token used here comes from obexron.css, which is the design system.
   Nothing new is invented here; this file only arranges things: the navbar,
   the footer, and the layouts the pages are built from.
   ══════════════════════════════════════════════════════════════════════════ */

/* The surface tokens live on .ox-paper and .ox-ink. The navbar sits outside
   both — it is translucent, not a surface — so the paper set is also declared
   on :root as the default. Without this, anything outside a section (the nav
   button, for one) resolves var(--btn) to nothing. */
:root{
  --border:#E4E4E2;
  --heading:#0B0B0B;
  --body:#6E6E76;
  --fine:#6E6E76;
  --link:#1E5AD6;
  --btn:#2E6FF2;
  --btn-hover:#1E5AD6;
  --btn-hover-ink:#FFFFFF;
  --empty:#DCDCD7;
  --ox-card:#FFFFFF;
  --ox-main:#1A1A1A;
  --ox-detail:#8A8A93;
  --ox-faint:#C4C4BF;
  --ox-texture:#E4E4E0;
  --ox-orange:#FF5A1F;
  --ox-blue:#2E6FF2;
  --ox-watermark:#E2E2DE;
  --ox-bg:#F2F2F0;
}

/* the whole site is paper except the closing band and the footer */
body{background:#F2F2F0;}

/* a lead paragraph always follows a heading */
.lead{margin-top:24px;}

/* ─────────────────────────── navbar ─────────────────────────── */
/* Ported from @efferd/header-3: the bar is transparent at the top of the page
   and picks up the blur and the hairline once you scroll. Everything else about
   this navbar was already what header-3 does. */
.nav{
  position:sticky;top:0;z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease,backdrop-filter .2s ease;
}
.nav.is-scrolled,
body.nav-open .nav{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:#E4E4E2;
}
.nav__bar{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  height:68px;display:flex;align-items:center;gap:24px;
}
/* Three pages, centred. A flex row with margin-left:auto on the button centres
   the links in whatever space is left over, which is not the same as centring
   them in the bar — the lockup and the button are different widths, so the row
   lands visibly off-centre. Three grid tracks put the middle one in the middle
   whatever the two outer ones weigh. The burger is display:none up here, so it
   generates no box and claims no track. */
@media (min-width:900px){
  .nav__bar{display:grid;grid-template-columns:1fr auto 1fr;}
}
.nav .lockup{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;}
.nav .lockup__mark{width:24px;flex:none;}
.nav .lockup__mark svg{max-width:none !important;width:100%;}
.nav .lockup__word{font-size:16px;font-weight:500;letter-spacing:-0.02em;color:#0B0B0B;}

.nav__links{display:none;align-items:center;gap:4px;}
@media (min-width:900px){ .nav__links{display:flex;justify-content:center;} }

.nav__link{
  display:inline-flex;align-items:center;gap:7px;
  height:44px;padding:0 14px;border:0;background:none;
  font-size:15px;font-weight:500;letter-spacing:-0.012em;
  color:#0B0B0B;text-decoration:none;border-radius:8px;cursor:pointer;
  transition:color .15s ease,background-color .15s ease;
}
.nav__link:hover{color:#1E5AD6;background:#EDEDE9;}
.nav__link:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.nav__cta{
  display:none;margin-left:auto;
  min-height:44px;padding:11px 20px;font-size:15px;
}
@media (min-width:900px){ .nav__cta{display:inline-flex;justify-self:end;margin-left:0;} }

/* hamburger */
.nav__burger{
  margin-left:auto;width:44px;height:44px;flex:none;
  display:grid;place-content:center;
  background:none;border:1px solid #E4E4E2;border-radius:8px;cursor:pointer;
}
@media (min-width:900px){ .nav__burger{display:none;} }
.nav__burger:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.nav__burger-box{display:grid;gap:4px;width:18px;}
.nav__burger-box i{display:block;height:1.5px;background:#0B0B0B;border-radius:1px;transition:transform .18s ease,opacity .18s ease;}
.nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
.nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* full-screen mobile overlay */
.nav__mobile{
  position:fixed;left:0;right:0;top:68px;bottom:0;z-index:79;
  background:#F2F2F0;display:flex;flex-direction:column;
}
.nav__mobile[hidden]{display:none;}
@media (min-width:900px){ .nav__mobile{display:none !important;} }
.nav__mobile-scroll{flex:1;overflow-y:auto;padding:8px var(--gutter) 24px;-webkit-overflow-scrolling:touch;}
.nav__mobile-flat a{
  display:flex;align-items:center;min-height:48px;padding:6px 0;
  font-size:16px;letter-spacing:-0.012em;color:#6E6E76;text-decoration:none;
}
.nav__mobile-flat a:hover{color:#1E5AD6;}
.nav__mobile-flat a:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.nav__mobile-flat{list-style:none;margin:8px 0 0;padding:0;}
.nav__mobile-flat a{color:#0B0B0B;font-weight:500;min-height:56px;font-size:17px;letter-spacing:-0.02em;}
.nav__mobile-foot{
  padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid #E4E4E2;background:#F2F2F0;
}
.nav__mobile-foot .btn{width:100%;}
body.nav-open{overflow:hidden;}

/* an auto-fitting card grid. The design system carries fixed 2- and 3-column
   grids; this one sizes itself to whatever is put in it. */
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

/* ─────────────────────────── footer ─────────────────────────── */
.site-footer{
  border-top:1px solid var(--border);
  padding-block:clamp(48px,6vw,72px) calc(32px + env(safe-area-inset-bottom));
}
.foot-grid{display:grid;gap:40px;}
@media (min-width:640px){ .foot-grid{grid-template-columns:repeat(2,1fr);gap:40px 32px;} }
@media (min-width:960px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;} }
/* Three children, so the four-track rule above would leave an empty column on
   the right and pull the brand block off the left edge of the page. */
@media (min-width:640px){ .foot-grid--three{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .foot-grid--three{grid-template-columns:1.9fr 1fr 1fr;} }

.site-footer .lockup{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;}
.site-footer .lockup__mark{width:24px;flex:none;}
.site-footer .lockup__mark svg{max-width:none !important;width:100%;}
.site-footer .lockup__word{font-size:16px;font-weight:500;letter-spacing:-0.02em;color:var(--heading);}
.foot-tag{margin-top:14px;font-size:var(--fs-small);line-height:1.55;color:var(--fine);letter-spacing:0;max-width:34ch;}

.foot-col__title{
  margin:0 0 14px;font-size:var(--fs-small);font-weight:500;
  letter-spacing:0;color:var(--heading);
}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-small);letter-spacing:0;line-height:1.4;
  color:var(--fine);text-decoration:none;
}
.foot-col a:hover{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.foot-col a:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}

.foot-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;
  margin-top:clamp(40px,5vw,56px);padding-top:24px;border-top:1px solid var(--border);
  font-size:var(--fs-small);color:var(--fine);letter-spacing:0;
}
.foot-bar__link{
  display:inline-flex;align-items:center;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font-size:inherit;letter-spacing:inherit;color:var(--fine);
}
.foot-bar__link:hover{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.foot-bar__link:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}

/* ─────────────────────── centred hero (from @efferd/hero-1) ───────────────────────
   hero-1's structure: a narrow centred column with vertical rules down its
   edges, a pill badge above the headline, then headline / subhead / CTA all
   centred. Its radial gradient, its fading rules and its shadowed badge are
   dropped — the brand allows neither gradients nor shadows — so the rules here
   are solid hairlines and the badge is a plain bordered pill. Its logo cloud is
   dropped too: there are no clients to put in one. */
.hero-c{padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,88px);}
.hero-c__frame{position:relative;max-width:1024px;margin-inline:auto;}
.hero-c__rail{
  display:none;position:absolute;top:0;bottom:0;width:1px;
  background:var(--border);pointer-events:none;
}
@media (min-width:760px){
  .hero-c__rail{display:block;}
  .hero-c__rail--l{left:0;}
  .hero-c__rail--r{right:0;}
  .hero-c__rail--l2{left:28px;opacity:.5;}
  .hero-c__rail--r2{right:28px;opacity:.5;}
}
.hero-c__inner{
  position:relative;text-align:center;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;
}
/* the inner padding exists only to clear the edge rails, which are hidden
   below 760px — so on a phone the column uses the full width */
@media (min-width:760px){ .hero-c__inner{padding-inline:clamp(40px,5vw,64px);} }
.hero-c__inner h1{max-width:20ch;margin-top:26px;}
.hero-c__inner .lead{max-width:60ch;margin-top:24px;}
.hero-c__inner .body-cta{margin-top:32px;}
.hero-c__illo{width:100%;max-width:640px;margin-top:clamp(48px,6vw,72px);}
/* the announcement badge — hero-1's pill, without the shadow */
.badge{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 18px;
  background:var(--ox-card);border:1px solid var(--border);border-radius:999px;
  font-size:var(--fs-small);font-weight:500;letter-spacing:0;line-height:1.3;
  color:var(--heading);text-decoration:none;
  transition:border-color .15s ease;
}
a.badge:hover{border-color:#1E5AD6;}
.badge:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.badge__dot{width:6px;height:6px;flex:none;border-radius:50%;background:#2E6FF2;}
/* The hero pill states who the site is for; it is not a link, and there is
   nowhere for it to go. The hover state is left on a.badge so it comes back
   by itself the day it becomes one again. */
.badge--static{cursor:default;}
/* the eyebrow copy is a little too long for one line on a phone, so the break
   is balanced rather than leaving one orphaned word */
.badge__text{text-wrap:balance;}
@media (max-width:479px){ .badge{padding-inline:13px;gap:8px;} }

/* ─────────────────────────── page shells ─────────────────────────── */
.page-head{padding-block:clamp(56px,7vw,96px) 0;}
.page-head .eyebrow{margin-bottom:14px;}
.page-head h1{max-width:17ch;}
.page-head .lead{
  max-width:62ch;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;color:var(--body);
}
.split-head{display:grid;gap:48px;align-items:center;}
@media (min-width:900px){
  .split-head{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);gap:64px;}
}

.stack{display:grid;gap:20px;}
.rule-list{list-style:none;margin:40px 0 0;padding:0;max-width:var(--prose);counter-reset:r;}
.rule-list li{
  counter-increment:r;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:20px 0;border-top:1px solid var(--border);line-height:1.7;
}
.rule-list li:last-child{border-bottom:1px solid var(--border);}
.rule-list li::before{
  content:counter(r,decimal-leading-zero);
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-0.007em;
  color:var(--link);padding-top:4px;
}
.rule-list--plain{counter-reset:none;}
/* a set of destinations, not a sequence — numbering would imply an order
   that is not there. content:none rather than "": an empty pseudo-element
   still claims its own row in a one-column grid. */
.rule-list--plain li::before{content:none;}
.rule-list--plain li{grid-template-columns:1fr;gap:0;}

/* contact */
.contact-grid{display:grid;gap:48px;margin-top:48px;}
@media (min-width:900px){ .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);gap:64px;align-items:start;} }
.form-card{background:var(--ox-card);border:1px solid var(--border);border-radius:var(--r-panel);padding:28px;}
@media (min-width:760px){ .form-card{padding:36px;} }
.form-card textarea{
  min-height:150px;padding:14px;font-size:16px;line-height:1.55;
  background:var(--ox-card);color:var(--heading);
  border:1px solid var(--border);border-radius:var(--r-input);width:100%;
  resize:vertical;font-family:inherit;
  transition:border-color .15s ease;
}
.form-card textarea:hover{border-color:#1E5AD6;}
.contact-aside dt{font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--heading);}
.contact-aside dd{margin:6px 0 24px;color:var(--body);}
/* the email address is the whole of its own definition, so it is a target in
   its own right rather than a link inside a sentence */
.contact-aside dd > a:only-child{display:inline-flex;align-items:center;min-height:44px;}
.contact-aside dd:last-child{margin-bottom:0;}

/* about */
.founder{
  display:grid;gap:32px;margin-top:48px;align-items:start;
  padding-top:40px;border-top:1px solid var(--border);
}
@media (min-width:760px){ .founder{grid-template-columns:240px minmax(0,1fr);gap:48px;} }
.founder__name{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em;color:var(--heading);}
.founder__role{margin-top:4px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}
.founder__links{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;}

/* ─────────────────────────── legal pages ─────────────────────────── */
.legal{max-width:var(--prose);}
.legal h2{
  margin-top:52px;font-size:var(--fs-h3);
  padding-top:20px;border-top:1px solid var(--border);
}
.legal h3{margin-top:32px;font-size:1.0625rem;}
.legal p{margin-top:16px;color:var(--body);}
.legal ul,.legal ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.legal ol{counter-reset:l;}
.legal li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  color:var(--body);line-height:1.6;
}
.legal ul>li::before{content:"";width:12px;height:1.5px;margin-top:13px;background:var(--ox-detail);border-radius:1px;}
.legal ol>li{counter-increment:l;}
.legal ol>li::before{
  content:counter(l,decimal-leading-zero);
  font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--link);padding-top:2px;
}
.legal strong{color:var(--heading);font-weight:500;}
.legal code{font-size:0.9em;background:var(--ox-card);border:1px solid var(--border);padding:2px 6px;border-radius:4px;}
.legal__summary{
  background:var(--ox-card);border:1px solid var(--border);
  border-radius:var(--r-card);padding:28px;margin-bottom:8px;
}
.legal__summary h2{margin-top:0;padding-top:0;border-top:0;}
/* an unmade decision, marked so it cannot be published by accident */
.legal mark.todo{
  background:none;color:#C63E0E;font-weight:500;
  border-bottom:1px dashed #C63E0E;
}

/* ── tap targets ──
   Every link that stands on its own line is at least 44px tall. The type, the
   colour and the underline are untouched — only the box around the text grows,
   so nothing about how the link reads changes. Links inside a sentence are left
   alone on purpose: padding one out would break the line it sits in, and the
   guidelines exempt them for exactly that reason. */
.link-next,
.text-link{display:inline-flex;align-items:center;min-height:44px;}

/* shared helpers */
.illo{width:100%;}
.illo--tight{max-width:620px;}
.illo--center{margin-inline:auto;}
.text-link{
  display:inline-block;margin-top:32px;
  font-size:var(--fs-body);color:var(--link);
  text-decoration:underline;text-underline-offset:3px;
}
.section--tight{padding-block:clamp(48px,6vw,80px);}

/* ─────────────────────── social row ───────────────────────
   Outline glyphs at the illustration library's stroke weight, inheriting
   currentColor. The hover is blue like every other link on the site — orange
   is never interactive. The negative left margin pulls the 44px touch target
   back so the first glyph optically lines up with the text above it. */
.social{
  display:flex;flex-wrap:wrap;gap:2px;
  list-style:none;margin:14px 0 0 -12px;padding:0;
}
.social__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;
  color:var(--fine);text-decoration:none;
  transition:color .15s ease;
}
.social__link svg{display:block;}
.social__link:hover{color:var(--link);}
.social__link:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ .social__link{transition:none;} }

/* ─────────────────────── booking embed (Cal.com) ───────────────────────
   Cal's own snippet puts height:100%;overflow:scroll on the host div. That
   assumes a parent with a resolved height — on an ordinary page height:100%
   resolves against nothing and the calendar collapses to a scrollbar. Cal
   measures its own content and drives the iframe height over postMessage, so
   the host wants a width and a floor and nothing else. The floor is what
   holds the page still while the calendar is still loading. */
.booking-embed{width:100%;min-height:560px;}
.booking-embed > div{width:100%;}
.booking-embed iframe{display:block;width:100%;border:0;}
.booking-embed noscript{display:block;padding:28px 0;}
.booking-embed noscript p{max-width:52ch;margin:0;color:var(--fine);line-height:1.6;}

/* ─────────────────────────── 404 ───────────────────────────
   The requested path is echoed back so a visitor can spot their own typo.
   overflow-wrap:anywhere because a long path would otherwise push the whole
   column sideways on a phone. */
.notfound__path{margin-top:22px;}
.notfound__path code{
  font-size:0.92em;color:var(--heading);
  background:var(--ox-card);border:1px solid var(--border);
  padding:2px 7px;border-radius:4px;overflow-wrap:anywhere;
}

/* .field-err is red, which is right for a failure and wrong for "Sent." */
.field-err--ok{color:var(--heading);}