/* ============================================================
   TOKENS
   ============================================================ */
:root{
    color-scheme:dark;
    --ox-bg:#0f1315;          /* the site ground, previously supplied by the host page */
    --ox-teal:#3f6f9f;        /* steel blue: hover on light bands, rules (5.2:1 on white) */
    --ox-teal-btn:#9CC3E8;    /* button fill, dark text on it. Token names say teal for history; the hue is ice blue. */
    --ox-teal-lit:#9CC3E8;    /* ice blue: buttons, links, small accents */
    --ox-teal-deep:#BCD7F0;   /* button hover */
    --ox-lit-rgb:156,195,232;   /* same hues as RGB triples, for glows and canvas */
    --ox-base-rgb:95,143,191;
    --ox-glow-rgb:201,209,218;  /* pointer light stays silver */
    --ox-btn-ink:#0f1315;   /* dark text on the light-blue button */
    /* Second accent, sampled from the logo. The logo is brushed steel, almost pure
       grey (1.3% saturation), running #545657 to #f0efee, so the accent is platinum.
       On the white price card pale silver would vanish at 1.5:1, so those uses take
       the darker steel below, which reads 5.9:1. */
    --ox-accent:#C9D1DA;
    --ox-accent-on-light:#5a626d;
    --ox-ink:#ffffff;
    --ox-soft:#c4c9d0;
    --ox-dim:#8b929b;
    --ox-silver:#aab1ba;      /* tool logos at rest */
    --ox-card:#1d2830;        /* one card colour for the whole site: solid, so text stays readable over the 3D scene */
    --ox-surface:rgba(255,255,255,.035);
    --ox-surface-lift:rgba(255,255,255,.06);
    --ox-line:rgba(255,255,255,.10);
    --ox-line-lit:rgba(255,255,255,.20);
    --ox-ease:cubic-bezier(.22,.61,.36,1);
    --ox-ease-out:cubic-bezier(.16,1,.3,1);
    --ox-max:1180px;
    --ox-hdr-h:96px;          /* the floating header's footprint: page tops clear it */
    --ox-serif:'Playfair Display','Iowan Old Style','Palatino Linotype',Georgia,serif;
}
*, *::before, *::after{ box-sizing:border-box; }
h1,h2,h3,p,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
.ox-wrap{ max-width:var(--ox-max); margin:0 auto; padding-inline:24px; }

/* Type scale. The premium comes from scale and tracking, not decoration. */
.ox-display,.ox-h2,.ox-h3{ text-wrap:balance; }
.ox-display{ font-family:var(--ox-serif); font-size:clamp(2.35rem,5.3vw,4.1rem); font-weight:600; line-height:1.06; letter-spacing:-.024em; color:var(--ox-ink); }
.ox-h2{ font-family:var(--ox-serif); font-size:clamp(1.95rem,3.6vw,3rem); font-weight:600; line-height:1.12; letter-spacing:-.02em; color:var(--ox-ink); }
/* Playfair's default numerals are old-style (the 1 and 0 sit lower than the 8), which
   makes "$11" and "36%" look like text. Stats and prices want lining figures. */
.ox-display,.ox-h2,.ox-num{ font-variant-numeric:lining-nums; }
.ox-h3{ font-size:clamp(1.2rem,1.7vw,1.45rem); font-weight:700; line-height:1.25; letter-spacing:-.015em; color:var(--ox-ink); }
.ox-lead{ font-size:clamp(1.04rem,1.35vw,1.19rem); line-height:1.65; color:var(--ox-soft); }
.ox-body{ font-size:.985rem; line-height:1.72; color:var(--ox-soft); }
.ox-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--ox-accent); }

/* Buttons */
.ox-btn,.ox-btn-ghost{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-size:.985rem; font-weight:600; text-decoration:none; padding:15px 30px;
    border-radius:11px; border:1.5px solid transparent; position:relative; overflow:hidden;
    transition:background .25s var(--ox-ease), border-color .25s var(--ox-ease), transform .25s var(--ox-ease-out);
}
.ox-btn{ background:var(--ox-teal-btn); color:var(--ox-btn-ink); }
.ox-btn:active,.ox-btn-ghost:active{ transform:scale(.97); transition-duration:.1s; }
.ox-btn-ghost{ background:transparent; color:#fff; border-color:var(--ox-line-lit); }

.ox-btn-row{ display:flex; flex-wrap:wrap; gap:13px; }
.ox-arrow{ width:15px; height:15px; flex-shrink:0; transition:transform .3s var(--ox-ease-out); }
.ox-btn:hover .ox-arrow,.ox-btn-ghost:hover .ox-arrow{ transform:translateX(4px); }

a:focus-visible,
summary:focus-visible,
button:focus-visible{ outline:2px solid var(--ox-teal-lit); outline-offset:3px; border-radius:7px; }

/* ============================================================
   MOTION PRIMITIVES
   [data-rv]   reveal on entry, staggered by --d
   [data-prog] receives --p (0 to 1) as it crosses the viewport
   ============================================================ */
/* A reveal should feel like something coming into focus and settling, not a slide.
   So it rises, scales up a touch and resolves from a soft blur to sharp. The blur is
   removed the moment the element arrives (filter:none), so no element keeps a filter,
   and with it a compositing layer, once it has landed. */
[data-rv]{
    opacity:0; transform:translate3d(0,34px,0) scale(.98); filter:blur(7px);
    transition:opacity .9s var(--ox-ease-out) var(--d,0ms), transform 1s var(--ox-ease-out) var(--d,0ms), filter .8s var(--ox-ease-out) var(--d,0ms);
}
[data-rv].is-in{ opacity:1; transform:none; filter:none; }

/* Line reveal: a change of state, used once, in the bottleneck act.
   The clip lives on the inner <i>, never on the observed element. An element
   clipped to zero area has no intersection rectangle, so IntersectionObserver
   would never fire on it and the line would stay hidden forever. */
[data-rv="wipe"]{
    opacity:1; transform:none; display:block; overflow:hidden; padding-bottom:.04em;
}
[data-rv="wipe"] > i{
    display:block; font-style:inherit;
    transform:translate3d(0,105%,0);
    transition:transform 1s var(--ox-ease-out) var(--d,0ms);
}
[data-rv="wipe"].is-in > i{ transform:none; }

/* ============================================================
   PRESS AND HOVER
   Hover is gated to devices that actually have a pointer: on touch, :hover
   fires on tap and then sticks until you tap elsewhere, which reads as a bug.
   Press feedback is NOT gated, because every device can press.
   ============================================================ */
.ox-btn:active, .ox-btn-ghost:active, .ox-founder-li:active{
    transform:scale(.97); transition-duration:.1s;
}
@media (hover: hover) and (pointer: fine){
    .ox-btn:hover{ background:var(--ox-teal-deep); transform:translateY(-2px); }
    .ox-btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); transform:translateY(-2px); }
}


/* ---- split headlines: each word rises out of its own mask ---- */
.is-split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .14em; margin:0 -.04em -.14em; }
.is-split .wi{
    display:inline-block; transform:translate3d(0,112%,0);
    transition:transform 1.05s var(--ox-ease-out);
    transition-delay:calc(var(--d,0ms) + var(--i,0) * 62ms);
}
.is-split.is-in .wi{ transform:none; }

/* ---- tilt: registered so the angles themselves ease back to rest ---- */
@property --rx{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@property --ry{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
[data-tilt] img{ transition:--rx .6s var(--ox-ease-out), --ry .6s var(--ox-ease-out); }

/* ============================================================
   SITE CHROME — header, nav, footer, skip link.
   Shared by every page. Page-specific CSS never overrides this.
   ============================================================ */

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
    margin:0; background:var(--ox-bg); color:var(--ox-ink);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* Keyboard users land here first and can jump the nav */
.ox-skip{
    position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--ox-teal-btn); color:var(--ox-btn-ink); font-weight:600;
    padding:12px 20px; border-radius:0 0 10px 0; text-decoration:none;
}
.ox-skip:focus{ left:0; }

/* ---------------- HEADER: floating glass pill ---------------- */
/* The bar is a detached pill. The sticky wrapper carries no background of its own and
   ignores the pointer, so only the pill itself is clickable. The glass (blur, tint,
   hairline) lives on a pseudo-element: backdrop-filter on the pill itself would make
   it the containing block for the fixed full-screen mobile menu and clip it. */
.ox-hdr{ position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 16px 0; pointer-events:none; }
.ox-hdr-in{
    position:relative; isolation:isolate; pointer-events:auto;
    max-width:var(--ox-max); margin:0 auto; padding:0 12px 0 22px; min-height:68px;
    display:flex; align-items:center; gap:18px; border-radius:999px;
}
.ox-hdr-in::before{
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    background:rgba(17,22,25,.56);
    -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 18px 50px -24px rgba(0,0,0,.7);
    transition:background .5s var(--ox-ease-out), border-color .5s var(--ox-ease-out);
}
.ox-hdr.is-scrolled .ox-hdr-in::before{ background:rgba(14,18,21,.74); border-color:rgba(255,255,255,.14); }
.ox-logo{ display:flex; align-items:center; text-decoration:none; margin-right:auto; flex:none; }
.ox-logo-img{ display:block; height:48px; width:auto; flex:none; }

.ox-nav{ display:flex; align-items:center; gap:2px; }
.ox-nav a, .ox-nav > .ox-drop > button{
    position:relative; display:inline-flex; align-items:center; gap:6px;
    font:inherit; font-size:.92rem; font-weight:500; color:var(--ox-soft);
    background:none; border:0; cursor:pointer; text-decoration:none;
    padding:10px 15px; border-radius:999px;
    transition:color .3s var(--ox-ease-out), background .3s var(--ox-ease-out);
}
.ox-nav a.ox-btn{ padding:9px 9px 9px 22px; margin-left:8px; }
/* The generic nav-link rule (.ox-nav a) is more specific than .ox-btn, so without this the
   header button silently loses its fill and its white text. */
.ox-nav a.ox-btn{ background:var(--ox-teal-btn); color:var(--ox-btn-ink); }
@media (hover: hover) and (pointer: fine){ .ox-nav a.ox-btn:hover{ background:var(--ox-teal-deep); color:var(--ox-btn-ink); } }
@media (hover: hover) and (pointer: fine){
    .ox-nav a:not(.ox-btn):hover, .ox-nav > .ox-drop > button:hover{ color:#fff; background:rgba(255,255,255,.07); }
    .ox-ftr ul a:hover{ color:#fff; }
    .ox-social a:hover{ border-color:var(--ox-line-lit); color:#fff; }
    .ox-ftr-contact dd a:hover{ color:#fff; }
    .ox-ftr-base a:hover{ color:var(--ox-soft); }
    .ox-drop-panel a:hover .ox-drop-desc{ color:var(--ox-soft); }
}
.ox-nav a[aria-current="page"], .ox-nav > .ox-drop > button[data-current]{ color:#fff; font-weight:600; }
.ox-nav a[aria-current="page"]:not(.ox-btn)::after{
    content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px; border-radius:2px; background:var(--ox-teal-lit);
}

/* Services dropdown, a second glass plate hanging under the pill */
.ox-drop{ position:relative; }
.ox-drop > button svg{ width:11px; height:11px; transition:transform .4s var(--ox-ease-out); }
.ox-drop > button[aria-expanded="true"] svg{ transform:rotate(180deg); }
.ox-drop-panel{
    position:absolute; top:calc(100% + 16px); left:-8px; min-width:300px; z-index:110;
    background:rgba(17,22,25,.88); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
    border:1px solid rgba(255,255,255,.11); border-radius:22px; padding:8px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px -26px rgba(0,0,0,.85);
    opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:top left;
    transition:opacity .28s var(--ox-ease-out), transform .42s var(--ox-ease-out), visibility .28s;
}
.ox-drop > button[aria-expanded="true"] + .ox-drop-panel{ opacity:1; visibility:visible; transform:none; }
.ox-drop-panel a{ display:block; padding:12px 14px; border-radius:15px; }
.ox-drop-panel .ox-drop-name{ display:block; font-size:.95rem; font-weight:600; color:#fff; }
.ox-drop-panel .ox-drop-desc{ display:block; font-size:.8rem; color:var(--ox-dim); margin-top:2px; line-height:1.45; }

/* Menu button: three bars that rotate into an X rather than swapping icons */
.ox-burger{
    display:none; position:relative; width:46px; height:46px; flex:none; z-index:130;
    background:rgba(255,255,255,.06); border:1px solid var(--ox-line); border-radius:50%; color:#fff; cursor:pointer;
    transition:background .3s var(--ox-ease-out), transform .2s var(--ox-ease-out);
}
.ox-burger:active{ transform:scale(.94); }
.ox-burger i{
    position:absolute; left:14px; right:14px; height:2px; border-radius:2px; background:currentColor;
    transition:transform .5s var(--ox-ease-out), opacity .3s var(--ox-ease-out), top .5s var(--ox-ease-out);
}
.ox-burger i:nth-child(1){ top:16px; } .ox-burger i:nth-child(2){ top:22px; } .ox-burger i:nth-child(3){ top:28px; }
.ox-burger[aria-expanded="true"] i:nth-child(1){ top:22px; transform:rotate(45deg); }
.ox-burger[aria-expanded="true"] i:nth-child(2){ opacity:0; transform:scaleX(.3); }
.ox-burger[aria-expanded="true"] i:nth-child(3){ top:22px; transform:rotate(-45deg); }

@media (max-width:1000px){
    .ox-hdr{ padding:10px 12px 0; }
    .ox-hdr-in{ min-height:62px; padding:0 8px 0 18px; }
    .ox-burger{ display:block; }
    .ox-hdr .ox-btn{ display:none; }
    /* Full-screen glass menu. Links rise in one after another. */
    .ox-nav{
        position:fixed; inset:0; z-index:120; flex-direction:column; align-items:stretch; justify-content:safe center; gap:4px;
        padding:96px 30px 40px; overflow-y:auto;
        background:rgba(9,12,14,.88); -webkit-backdrop-filter:blur(28px) saturate(1.3); backdrop-filter:blur(28px) saturate(1.3);
        opacity:0; visibility:hidden; transition:opacity .45s var(--ox-ease-out), visibility .45s;
    }
    .ox-nav.is-open{ opacity:1; visibility:visible; }
    .ox-nav > a, .ox-nav > .ox-drop{
        opacity:0; transform:translate3d(0,34px,0);
        transition:opacity .6s var(--ox-ease-out), transform .8s var(--ox-ease-out);
        transition-delay:calc(var(--i,0) * 55ms + 60ms);
    }
    .ox-nav.is-open > a, .ox-nav.is-open > .ox-drop{ opacity:1; transform:none; }
    .ox-nav a:not(.ox-btn), .ox-nav > .ox-drop > button{
        width:100%; padding:14px 6px; font-family:var(--ox-serif); font-size:1.85rem; font-weight:500; letter-spacing:-.015em; color:#fff; border-radius:0;
        border-bottom:1px solid var(--ox-line); justify-content:space-between;
    }
    .ox-nav a[aria-current="page"]:not(.ox-btn)::after{ display:none; }
    .ox-drop-panel{
        position:static; opacity:1; visibility:visible; transform:none; background:none; border:0; box-shadow:none;
        -webkit-backdrop-filter:none; backdrop-filter:none; padding:4px 0 10px 10px; min-width:0; display:none;
    }
    .ox-drop > button[aria-expanded="true"] + .ox-drop-panel{ display:block; }
    .ox-drop-panel a{ padding:11px 6px; }
    .ox-nav a.ox-btn{ display:inline-flex; margin:22px 0 0; justify-content:space-between; }
}
@media (prefers-reduced-motion: reduce){
    .ox-nav, .ox-nav > a, .ox-nav > .ox-drop{ transition-duration:.01ms !important; transition-delay:0s !important; }
}

/* ---------------- FOOTER ---------------- */
.ox-ftr{ border-top:1px solid var(--ox-line); background:#0b0e10; margin-top:0; }
.ox-ftr-in{
    max-width:var(--ox-max); margin:0 auto; padding:clamp(44px,6vh,68px) 24px clamp(26px,3vh,34px);
    display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,52px);
}
.ox-ftr-brand .ox-logo{ margin-right:0; margin-bottom:16px; }
.ox-ftr .ox-btn{ white-space:nowrap; padding:13px 20px; }
.ox-ftr-brand p{ font-size:.92rem; line-height:1.7; color:var(--ox-dim); max-width:34ch; margin:0; }
.ox-ftr h2{ font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ox-accent); margin:0 0 15px; }
.ox-ftr ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.ox-ftr ul a{ display:inline-block; padding:10px 0; font-size:.92rem; color:var(--ox-soft); text-decoration:none; transition:color .2s var(--ox-ease); }
.ox-ftr ul a:hover{ color:#fff; }
/* Email and phone are selectable text as well as links: mailto and tel do not
   resolve for every visitor, and the details still need to be copyable. */
.ox-ftr-contact dt{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ox-dim); margin-bottom:4px; }
.ox-ftr-contact dd{ margin:0 0 14px; font-size:.92rem; font-weight:600; color:var(--ox-soft); user-select:all; }
.ox-ftr-contact dd a{ color:inherit; text-decoration:none; }
.ox-ftr-contact dd a:hover{ color:#fff; }
.ox-social{ display:flex; gap:9px; margin-top:4px; }
.ox-social a{
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
    border:1px solid var(--ox-line); border-radius:10px; color:var(--ox-soft);
    transition:border-color .2s var(--ox-ease), color .2s var(--ox-ease);
}
.ox-social a:hover{ border-color:var(--ox-line-lit); color:#fff; }
.ox-social svg{ width:17px; height:17px; }

.ox-ftr-base{
    max-width:var(--ox-max); margin:0 auto; padding:20px 24px 34px;
    border-top:1px solid var(--ox-line);
    display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
}
.ox-ftr-base p{ margin:0; font-size:.85rem; color:var(--ox-dim); margin-right:auto; }
.ox-ftr-base a{ display:inline-block; padding:10px 0; font-size:.85rem; color:var(--ox-dim); text-decoration:none; }
.ox-ftr-base a:hover{ color:var(--ox-soft); }

@media (max-width:860px){
    .ox-ftr-in{ grid-template-columns:1fr 1fr; gap:32px 24px; }
    .ox-ftr-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
    .ox-ftr-in{ grid-template-columns:1fr; }
}

/* ============================================================
   POINTER LIGHT — site-wide.
   A highlight that tracks the cursor across a surface, so the page responds to
   where you are rather than only whether you are over something. Any element
   with data-pointer, or the shared .ox-card class, picks it up automatically.
   Never applied to the marquees: they already animate, and stacking a per-frame
   paint onto a moving compositor layer is where jank comes from.
   ============================================================ */
[data-pointer], .ox-card{ position:relative; isolation:isolate; }
[data-pointer]::before, .ox-card::before{
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    opacity:0; transition:opacity .4s var(--ox-ease);
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
               rgba(var(--ox-glow-rgb),.10), rgba(var(--ox-glow-rgb),0) 62%);
}
[data-pointer].is-near::before, .ox-card.is-near::before{ opacity:1; }

/* ============================================================
   ENQUIRY FORM
   Inputs are 16px on purpose: iOS Safari zooms the whole page on focus
   for anything smaller, and never zooms back out.
   ============================================================ */
.ox-form-card{
    background:var(--ox-card); border:1px solid rgba(255,255,255,.22); border-radius:20px;
    padding:clamp(24px,3.4vw,38px);
}
.ox-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
.ox-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ox-field-wide{ grid-column:1 / -1; }
.ox-field label{ font-size:1rem; font-weight:600; color:#fff; letter-spacing:.005em; }
.ox-opt{ font-weight:500; color:#c4c9d0; }

.ox-field input, .ox-field select, .ox-field textarea{
    width:100%; font:inherit; font-size:17px; color:#fff;
    background:#121a1f; border:1.5px solid #8b95a1;
    border-radius:11px; padding:13px 15px; min-height:48px;
    transition:border-color .2s var(--ox-ease), background .2s var(--ox-ease), box-shadow .2s var(--ox-ease);
}
.ox-field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.ox-field select{
    appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5dae0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.ox-field select:invalid{ color:#c4c9d0; }
.ox-field input::placeholder, .ox-field textarea::placeholder{ color:#aeb6bf; opacity:1; }
.ox-field select option{ color:#fff; background:#151a1d; }
.ox-field input:focus, .ox-field select:focus, .ox-field textarea:focus{
    outline:none; border-color:var(--ox-teal-lit); background:#0d1316;
    box-shadow:0 0 0 3px rgba(var(--ox-lit-rgb),.2);
}
.ox-field [aria-invalid="true"]{ border-color:#e8847c; }
.ox-field-err{ margin:0; min-height:0; font-size:.92rem; line-height:1.4; color:#ffb4ad; }
.ox-field-err:empty{ display:none; }

.ox-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ox-form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:24px; }
.ox-form-actions .ox-btn[disabled]{ opacity:.7; cursor:progress; transform:none; }
.ox-form-status{ margin:0; font-size:1rem; color:#e3e7ec; }
.ox-form-status.is-error{ color:#ffb4ad; }
.ox-form-status:empty{ display:none; }

.ox-form-done{ padding:clamp(8px,2vw,18px) 0; outline:none; }
.ox-form-done-title{ margin:0 0 10px; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:#fff; }
.ox-form-done p{ margin:0; font-size:1.06rem; line-height:1.7; color:#e3e7ec; }
.ox-form-done a, .ox-form-noscript a{ color:var(--ox-teal-lit); font-weight:600; }
.ox-form-noscript{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ox-soft); }

@media (max-width:640px){
    .ox-form-grid{ grid-template-columns:1fr; }
    .ox-form-actions .ox-btn{ width:100%; }
}

/* ============================================================
   PAGE-WIDE POINTER LIGHT
   A real light, not a background. It sits ABOVE the page content and blends in with
   mix-blend-mode: screen, which can only brighten: it lifts dark surfaces (the hero, cards,
   footer) and leaves white ones untouched, so it never greys out text or the white price
   card. It stays below the header (z-index 100), and the header glass blurs whatever is
   behind it, so the light reads through the nav as well.
   Behind the content it was hidden by every opaque section, which is why it was never seen.
   Moves by transform only; pointer-events none so it can never block a click.
   ============================================================ */
.ox-glow{
    position:fixed; top:0; left:0; width:560px; height:560px; margin:-280px 0 0 -280px;
    border-radius:50%; pointer-events:none; z-index:90; opacity:0; mix-blend-mode:screen;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--ox-glow-rgb),.08), rgba(var(--ox-glow-rgb),.035) 38%, rgba(var(--ox-glow-rgb),0) 70%);
    transform:translate3d(-1000px,-1000px,0); transition:opacity .5s var(--ox-ease);
    will-change:transform;
}
.ox-glow.is-on{ opacity:1; }
@media (pointer: coarse){ .ox-glow{ display:none; } }
@media (prefers-reduced-motion: reduce){ .ox-glow{ display:none; } }


/* ---------- page-wide 3D scene (pages with "bg3d": true) ----------
   The canvas is fixed behind everything. Main content and the footer sit above it, so the
   scene shows between the header and the footer and never through them. */
.ox-bg3d{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:none; }
.has-bg3d .ox-bg3d{ display:block; }
.has-bg3d main, .has-bg3d .ox-ftr{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .ox-bg3d{ opacity:.7; } }

/* Readability over the 3D scene: a soft dark halo travels with every line of text, so a
   dot or line passing behind a word never costs legibility. Light surfaces opt out. */
.has-bg3d main{ text-shadow:0 0 22px rgba(15,19,21,1), 0 0 10px rgba(15,19,21,.95), 0 0 3px rgba(15,19,21,.85); }
.has-bg3d .ox-faq-band, .has-bg3d .ox-price-card, .has-bg3d .ox-btn, .has-bg3d .ox-btn-ghost{ text-shadow:none; }
/* The home page is the busiest, so its scene sits further back. */
.has-bg3d .ox-bg3d{ opacity:.5; }
.ox-bg3d[data-bg3d="brand"]{ opacity:.4; }
.ox-bg3d[data-bg3d="team"]{ opacity:.58; }

/* A whisper of film grain under the scene: the page reads as a lit surface instead of flat dark. */
.ox-bg3d{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .85  0 0 0 0 .9  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); background-size:160px 160px; }

/* These scenes carry the page's meaning, so they sit further forward than the quiet default. */
.ox-bg3d[data-bg3d="path"]{ opacity:.88; }
.ox-bg3d[data-bg3d="orbit"]{ opacity:.5; }   /* About: text-heavy, so the scene sits back */
.ox-bg3d[data-bg3d="beacon"]{ opacity:.8; }

/* ---------- cookie consent banner ---------- */
.ox-ftr-cookie{ all:unset; cursor:pointer; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:3px; }
.ox-ftr-cookie:focus-visible{ outline:2px solid var(--ox-teal-lit); outline-offset:3px; border-radius:4px; }
.ox-cc{
    position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:2147483000; width:min(440px,calc(100vw - 32px));
    max-height:calc(100vh - 32px); overflow:auto; padding:22px; border-radius:20px; background:var(--ox-card); border:1px solid var(--ox-line-lit);
    box-shadow:0 18px 60px rgba(0,0,0,.55); color:#e3e7ec; opacity:0; visibility:hidden; transform:translateY(16px);
    transition:opacity .35s var(--ox-ease), transform .45s var(--ox-ease-out), visibility 0s linear .45s;
}
.ox-cc.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.ox-cc h2{ margin:0 0 8px; font-family:var(--ox-serif); font-size:1.4rem; font-weight:600; color:#fff; }
.ox-cc p{ margin:0; font-size:.98rem; line-height:1.6; }
.ox-cc a{ color:var(--ox-teal-lit); font-weight:600; text-underline-offset:3px; }
.ox-cc-panel{ margin-top:14px; border-top:1px solid var(--ox-line); }
.ox-cc-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--ox-line); font-size:.95rem; line-height:1.5; cursor:pointer; }
.ox-cc-row input{ flex:none; width:20px; height:20px; margin-top:2px; accent-color:#9CC3E8; }
.ox-cc-row strong{ display:block; color:#fff; font-size:1rem; }
.ox-cc-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.ox-cc-actions .ox-btn, .ox-cc-actions .ox-btn-ghost{ padding:11px 18px; font-size:.95rem; }
.ox-cc-link{ all:unset; cursor:pointer; color:#fff; font-weight:600; font-size:.95rem; text-decoration:underline; text-underline-offset:3px; padding:8px 4px; }
.ox-cc-link:focus-visible{ outline:2px solid var(--ox-teal-lit); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ .ox-cc{ transition:none; transform:none; } }
@media (max-width:520px){ .ox-cc{ left:8px; right:8px; width:auto; bottom:8px; } }

.ox-form-privacy{ margin:14px 0 0; font-size:.95rem; line-height:1.55; color:#d5dae0; }
.ox-form-privacy a{ color:var(--ox-teal-lit); font-weight:600; text-underline-offset:3px; }

/* ---- small-screen tap targets and reading size ---- */
.ox-ftr-cookie{ display:inline-block; padding:10px 0; }
.ox-ftr a[href^="mailto:"], .ox-ftr a[href^="tel:"]{ display:inline-block; padding:10px 0; }
.ox-cc-link{ display:inline-flex; align-items:center; min-height:44px; padding:0 6px; }

/* Shared components, used by more than one page. Lifted out of the home page
   so every page gets the same pricing card and FAQ rather than a copy of each. */

/* ============================================================
   ACT 7 — PRICING. The commercial moment. The one white card on the page.
   ============================================================ */
.ox-price{ padding:clamp(60px,10vh,110px) 0; }
.ox-price-head{ max-width:640px; margin-bottom:clamp(32px,5vh,52px); }
.ox-price-head .ox-lead{ margin-top:16px; }
.ox-price-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,4.5vw,64px); align-items:start; }
.ox-price-card{
    background:#fff; border-radius:20px; padding:clamp(30px,3.8vw,42px);
    box-shadow:0 24px 60px -24px rgba(0,0,0,.55); border:1px solid #eef1f4;
}
.ox-price-label{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ox-accent-on-light); margin-bottom:12px; }
.ox-price-amt{ color:#12161a; font-family:var(--ox-serif); font-variant-numeric:lining-nums; font-size:clamp(2.8rem,4.8vw,3.8rem); font-weight:600; line-height:1; letter-spacing:-.025em; }
.ox-price-amt small{ font-size:1rem; font-weight:600; color:#6b7280; letter-spacing:0; }
.ox-price-card ul{ margin:26px 0 30px; padding-top:24px; border-top:1px solid #f1f4f7; }
.ox-price-card li{ display:flex; align-items:flex-start; gap:11px; padding:7px 0; color:#333b45; font-size:.945rem; font-weight:500; }
.ox-price-card li svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--ox-accent-on-light); }
.ox-price-card .ox-btn{ width:100%; }

.ox-price-why h3{ margin-bottom:18px; }
.ox-price-punch{
    font-size:clamp(1.28rem,2.1vw,1.6rem); font-weight:700; color:var(--ox-ink);
    line-height:1.35; letter-spacing:-.022em; margin-bottom:22px;
    padding-left:20px; border-left:2px solid var(--ox-teal-lit);
}
.ox-price-why p.ox-body + p.ox-body{ margin-top:15px; }
@media (max-width:860px){ .ox-price-grid{ grid-template-columns:1fr; gap:34px; } }

/* ============================================================
   ACT 8 — FAQ. Light band. A pause before the close.
   ============================================================ */
.ox-faq-band{ background:#f5f6f7; }
.ox-faq{ max-width:1120px; margin:0 auto; padding:clamp(38px,5.5vh,62px) 24px; }
.ox-faq h2{ color:#12161a; font-family:var(--ox-serif); font-size:clamp(1.7rem,2.6vw,2.2rem); font-weight:600; letter-spacing:-.018em; margin-bottom:clamp(18px,2.5vh,26px); }
/* Ten questions in one column made this the tallest band on the page. */
.ox-faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 52px; align-items:start; }
@media (max-width:820px){ .ox-faq-grid{ grid-template-columns:1fr; gap:0; } }
.ox-faq-item{ border-bottom:1px solid #e3e7eb; }
.ox-faq-item:last-child{ border-bottom:none; }
.ox-faq-item summary{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-size:1rem; font-weight:600; color:#12161a; cursor:pointer; list-style:none;
    padding:15px 0; transition:color .2s var(--ox-ease);
}
.ox-faq-item summary::-webkit-details-marker{ display:none; }
.ox-faq-item summary:hover{ color:var(--ox-teal); }
.ox-faq-item summary svg{ width:19px; height:19px; color:#98a2ae; flex-shrink:0; transition:transform .35s var(--ox-ease-out), color .2s var(--ox-ease); }
.ox-faq-item summary:hover svg{ color:var(--ox-teal); }
.ox-faq-item[open] summary svg{ transform:rotate(180deg); }
.ox-faq-answer{ padding:0 0 17px; color:#39414b; font-size:.975rem; line-height:1.72; max-width:68ch; animation:oxFaq .4s var(--ox-ease-out); }
.ox-faq-item.is-js{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ox-ease-out) var(--fd,0ms), transform .7s var(--ox-ease-out) var(--fd,0ms); }
.ox-faq-item.is-js.is-in{ opacity:1; transform:none; }
.ox-faq-item.is-js .ox-faq-answer{ animation:none; }
.ox-faq-item.is-closing summary svg{ transform:none; }
.ox-faq-item summary{ transition:color .2s var(--ox-ease), padding-left .3s var(--ox-ease-out); }
@media (hover:hover) and (pointer:fine){ .ox-faq-item summary:hover{ padding-left:6px; } }
@keyframes oxFaq{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ============================================================
   ACT 9 — CLOSE. Resolves and holds. It does not fade out.
   ============================================================ */
.ox-close{ padding:clamp(72px,12vh,128px) 0 clamp(60px,10vh,104px); text-align:center; position:relative; overflow:hidden; }
.ox-close-glow{
    position:absolute; left:50%; top:-40%; width:min(900px,120vw); height:min(900px,120vw);
    transform:translate3d(-50%,calc(var(--p,0) * 40px),0); pointer-events:none;
    background:radial-gradient(circle at 50% 50%, rgba(var(--ox-base-rgb),.17), rgba(var(--ox-base-rgb),0) 62%);
}
.ox-close-inner{ position:relative; z-index:1; }
.ox-close h2{ max-width:17ch; margin:0 auto 20px; }
.ox-close .ox-lead{ max-width:58ch; margin:0 auto 32px; }
.ox-close .ox-btn-row{ justify-content:center; }

@media (max-width:640px){
    .ox-btn,.ox-btn-ghost{ width:100%; }
    .ox-btn-row{ flex-direction:column; }
}


/* ============================================================
   KINETIC BUTTONS
   The arrow lives in its own circle set flush into the right of the pill. On hover
   the circle moves up and away like something being pushed, on press the whole
   button gives a little. Ghost buttons stay plain pills with no circle.
   ============================================================ */
.ox-btn{ gap:14px; padding:9px 9px 9px 26px; border-radius:999px; }
.ox-btn-ghost{ border-radius:999px; padding:15px 28px; }
.ox-btn .ox-arrow{
    box-sizing:content-box; width:15px; height:15px; padding:9px; margin:0; flex:none;
    border-radius:50%; background:rgba(255,255,255,.17);
    transition:transform .55s var(--ox-ease-out), background .3s var(--ox-ease-out);
}
@media (hover: hover) and (pointer: fine){
    .ox-btn:hover .ox-arrow{ transform:translate3d(3px,-2px,0) scale(1.07); background:rgba(255,255,255,.27); }
}

/* ============================================================
   DOUBLE BEZEL
   Premium objects read as machined hardware: a thin outer tray holding an inner
   plate with its own edge highlight. The tray is a box-shadow ring, so its corners
   stay concentric with the plate automatically and no extra markup is needed.
   ============================================================ */
.ox-card, .ox-price-card, .ox-founder-photo, .ox-panel-media, .ox-form-card, .ox-principles, .st-plate{
    box-shadow:
        0 0 0 5px rgba(255,255,255,.026),
        0 0 0 6px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.09);
}
.ox-price-card{
    box-shadow:
        0 0 0 5px rgba(255,255,255,.05),
        0 0 0 6px rgba(255,255,255,.14),
        0 34px 70px -28px rgba(0,0,0,.65);
}


/* Visible image captions: a short description under the picture, readable on any image. */
.ox-cap{
    position:absolute; left:0; right:0; bottom:0; z-index:2; padding:38px 18px 14px; pointer-events:none;
    background:linear-gradient(180deg,rgba(10,13,15,0),rgba(10,13,15,.9) 70%);
    font-size:.95rem; font-weight:500; line-height:1.45; color:#eef1f4; text-shadow:none;
}
.ox-cap.is-top{ top:0; bottom:auto; padding:14px 18px 38px; background:linear-gradient(0deg,rgba(10,13,15,0),rgba(10,13,15,.9) 70%); }

/* Blog post lists keep their markers (the reset removes them site-wide). */
.bp-body ul{ list-style:disc; }
.bp-body ol{ list-style:decimal; padding-left:1.4em; }

/* "In short" answer box: one quotable paragraph near the top of a page. */
.ox-answer-sec{ padding:clamp(8px,2vh,20px) 0 clamp(8px,2vh,20px); }
.ox-answer{ max-width:920px; padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px); border-radius:18px; background:var(--ox-card); border:1px solid var(--ox-line-lit); }
.ox-answer-k{ margin:0 0 8px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ox-teal-lit); }
.ox-answer p:last-child{ margin:0; font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.7; color:#e8ecf0; }

/* "Keep reading" guide links at the foot of the main pages. */
.ox-guides-sec{ padding:clamp(28px,5vh,56px) 0; }
.ox-guides-h{ margin:12px 0 18px; }
.ox-guides{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,16px); }
.ox-guides a{ display:flex; flex-direction:column; gap:6px; height:100%; padding:clamp(16px,2vw,22px); border-radius:16px; background:var(--ox-card); border:1px solid var(--ox-line); text-decoration:none; transition:border-color .3s var(--ox-ease), transform .4s var(--ox-ease-out); }
.ox-guides strong{ font-size:1.02rem; line-height:1.35; color:#fff; }
.ox-guides span{ font-size:.95rem; line-height:1.55; color:#cfd6dd; }
@media (hover:hover) and (pointer:fine){ .ox-guides a:hover{ border-color:var(--ox-line-lit); transform:translateY(-3px); } }
@media (max-width:980px){ .ox-guides{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ox-guides{ grid-template-columns:1fr; } }

/* ============================================================
   REDUCED MOTION — the full static composition, nothing moves.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    [data-rv],
    [data-rv].is-in,
    [data-rv="wipe"] > i{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; transition:none !important; }
    .is-split .wi{ transform:none !important; transition:none !important; }
    *,
    *::before,
    *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .ox-spine-rail::after,.ox-step::before{ transform:none !important; }
    .ox-founder-photo img,.ox-hero-field::before,.ox-hero-field::after,.ox-close-glow{ transform:none !important; }
    .ox-hero-plate img{ transform:scaleX(-1) !important; }
    .ox-panel-media img{ transform:scale(1.02) !important; }
    .ox-panel{ transform:none !important; opacity:1 !important; }
    .ox-track-marker{ display:none; }
    .ox-track-list li.is-active{ box-shadow:inset 2px 0 0 var(--ox-teal-lit); }
    /* The marquee is the clearest case for reduced motion: it never moves. */
    .ox-mq-track{ animation:none !important; flex-wrap:wrap; width:auto; }
    .ox-mq{ -webkit-mask-image:none; mask-image:none; }
    .ox-mq-item{ margin-bottom:10px; }
    [data-pointer]::before{ opacity:0 !important; }
    .ox-hero-field::before{ top:-8%; right:2%; }
    .ox-close-glow{ transform:translateX(-50%) !important; }
}