/*
Theme Name: Hillool
Theme URI: https://www.hillool.com/
Author: Hillool
Author URI: https://www.hillool.com/
Description: The Hillool website: research-driven technology company. English landing page, Arabic landing page (/ar/), hero film, full-screen footer, legal pages and a working contact form that saves enquiries in WordPress. Built on the Hillool Brand Guidelines 2026.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later (code). Brand assets, photography and product screenshots © Hillool.
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hillool
*/

/* =============================================================
   HILLOOL — design tokens (Brand Guidelines 2026)
   ============================================================= */
:root{
  color-scheme: light;
  --navy:#1B3572;          /* Night Blue — primary */
  --navy-deep:#142A5C;     /* Night Blue, deepened for gradients */
  --navy-ink:#0F1F45;      /* darkest navy — footer ground */
  --amber:#F7B500;         /* Solar Amber — accent only */
  --amber-deep:#D99E00;    /* hover state for amber controls */
  --green:#3A9A58;         /* Growth Green — success / growth */
  --white:#FAFAF9;         /* Warm White — primary ground */
  --clay:#F2EFE9;          /* Soft Clay — cards, panels */
  --clay-deep:#E7E2D8;     /* hairlines on clay */
  --slate:#8A91A8;         /* Slate — metadata only (fails AA at body size) */
  --slate-text:#5B6480;    /* readable slate for secondary body copy */
  --line:rgba(27,53,114,.10);
  --line-strong:rgba(27,53,114,.18);
  --on-navy:#FFFFFF;
  --on-navy-muted:rgba(255,255,255,.74);
  --on-navy-line:rgba(255,255,255,.14);

  --font-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  --step-0:1rem;
  --step-1:1.125rem;
  --step-2:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --step-3:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  --step-4:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  --step-5:clamp(2.25rem,1rem + 3.2vw,3.9rem);

  --header:92px;          /* landing height */
  --header-compact:64px;  /* after scrolling */
  --container:1240px;
  --gutter:clamp(16px,4vw,40px);
  --section:clamp(64px,9vw,120px);
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 18px 50px -24px rgba(15,31,69,.35);
}

*,*::before,*::after{box-sizing:border-box}
/* The canvas is Night Blue: pulling past the top or bottom of a page shows navy, like the hero and footer */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background-color:var(--navy)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--white);color:var(--navy);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber);color:var(--navy)}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0;text-wrap:balance}
h3,h4{font-weight:700;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
section{scroll-margin-top:calc(var(--header-compact) + 8px)}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link{position:absolute;inset-inline-start:16px;top:-60px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;z-index:100;font-weight:500}
.skip-link:focus{top:16px}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;overflow:hidden;padding-block:var(--section)}
.section--clay{background:var(--clay)}
.section--navy{background:var(--navy);color:var(--on-navy)}
@media (min-width:1024px){
  .section--tall{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .section--tall > .container{width:100%}
}
/* Ghost numerals — the brand guide's section-divider device */
.section__num{
  position:absolute;top:8px;inset-inline-end:8px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(110px,14vw,200px);line-height:1;letter-spacing:-.06em;color:var(--navy);opacity:.045;
  pointer-events:none;user-select:none;
}
.section--navy .section__num{color:#fff;opacity:.05}

/* Labels: uppercase, letter-spaced. Amber text on navy; on light grounds the
   amber lives in the dash so the text keeps AA contrast. */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:700;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:22px;
}
.eyebrow__motif{flex:0 0 auto;height:15px;width:auto;color:var(--navy)}
.eyebrow__motif--lool{height:17px}
.section--navy .eyebrow{color:var(--amber)}
.section--navy .eyebrow__motif,.hero .eyebrow__motif,.footer .eyebrow__motif,.page-hero .eyebrow__motif{color:#fff}

.lede{font-size:var(--step-1);color:var(--slate-text);max-width:52ch;line-height:1.6}
.section--navy .lede{color:var(--on-navy-muted)}
.section-head{display:grid;gap:16px;max-width:800px;margin-bottom:clamp(36px,5vw,56px);position:relative}
.section-head h2{font-size:var(--step-4)}
.section-head--split{max-width:none;grid-template-columns:1fr;align-items:end}
@media (min-width:900px){
  .section-head--split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}
  .section-head--split .lede{justify-self:end;padding-bottom:8px}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;border-radius:999px;font-family:var(--font-display);font-weight:700;
  font-size:1rem;line-height:1;text-decoration:none;border:2px solid transparent;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--amber{background:var(--amber);color:var(--navy);border-color:var(--amber)}
.btn--amber:hover{background:var(--amber-deep);border-color:var(--amber-deep)}
.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn--outline:hover{border-color:var(--navy)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--outline-light:hover{border-color:#fff}
.btn .arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}
.btn:hover .arrow--down{transform:translateY(3px)}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}
.text-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;text-decoration:none;color:var(--navy)}
.text-link .arrow{transition:transform .18s ease}
.text-link:hover .arrow{transform:translateX(3px)}
.section--navy .text-link{color:#fff}

/* =============================================================
   HEADER — transparent over the hero, solid once you scroll
   ============================================================= */
.header{
  --logo-h:44px;
  position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease;
}
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}
@media (max-width:600px){.admin-bar .header{top:0}}
.header.is-solid{--logo-h:36px}
.header.is-solid,.header.is-open{background:rgba(250,250,249,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header);transition:height .3s ease}
.header.is-solid .header__inner{height:var(--header-compact)}
@media (max-width:959px){.header__inner{height:80px}.header.is-solid .header__inner{height:60px}.header{--logo-h:36px}.header.is-solid{--logo-h:32px}}
/* Two-logo brand block: white logo over navy, colour logo once the bar turns Warm White */
.brand{position:relative;display:inline-flex;align-items:center;height:var(--logo-h);text-decoration:none;transition:height .3s ease}
.brand__img{height:var(--logo-h);width:auto;display:block;transition:opacity .3s ease,height .3s ease}
.brand__img--color{position:absolute;inset-inline-start:0;top:0;opacity:0}
.header.is-solid .brand__img--light,.header.is-open .brand__img--light{opacity:0}
.header.is-solid .brand__img--color,.header.is-open .brand__img--color{opacity:1}
.nav{display:none;align-items:center;gap:6px}
.nav a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.96rem;color:#fff;transition:background-color .15s ease,color .3s ease}
.nav a:hover{background:rgba(255,255,255,.1)}
.header.is-solid .nav a{color:var(--navy)}
.header.is-solid .nav a:hover{background:rgba(27,53,114,.06)}
.nav a.btn{padding:12px 22px;margin-inline-start:10px;font-size:.94rem;background:var(--amber);color:var(--navy);border-color:var(--amber)}
.nav a.btn:hover{background:var(--amber-deep);border-color:var(--amber-deep);color:var(--navy)}
.header.is-solid .nav a.btn{background:var(--navy);color:#fff;border-color:var(--navy)}
.header.is-solid .nav a.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.nav .lang{font-family:"Tajawal","Segoe UI",system-ui,sans-serif;font-weight:500}
.menu-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;padding:10px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);color:#fff;transition:color .3s ease,border-color .3s ease}
.header.is-solid .menu-btn,.header.is-open .menu-btn{color:var(--navy);border-color:var(--line-strong)}
.menu-btn svg{width:18px;height:18px}
.mobile-nav{border-top:1px solid var(--line)}
.mobile-nav ul{display:grid;gap:4px;padding-block:12px}
.mobile-nav a{display:block;padding:14px 8px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.15rem;border-radius:10px;color:var(--navy)}
.mobile-nav a:hover{background:rgba(27,53,114,.06)}
.mobile-nav .btn{margin-top:8px;display:flex;justify-content:center;background:var(--navy);color:#fff}
@media (min-width:960px){.nav{display:flex}.menu-btn,.mobile-nav{display:none!important}}

/* =============================================================
   HERO — full viewport on laptops and up
   ============================================================= */
.hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
@media (min-width:960px){.hero{min-height:100svh}}
.hero__lines{position:absolute;top:-6%;inset-inline-end:-4%;width:46%;max-width:720px;aspect-ratio:1;pointer-events:none;opacity:.9}
.hero__lines line{stroke-linecap:round}
.hero__rings{position:absolute;bottom:-30%;inset-inline-start:-12%;width:46vw;max-width:640px;aspect-ratio:1;opacity:.26;pointer-events:none;fill:none}
.hero__inner{position:relative;flex:1;display:grid;align-items:center;gap:48px;padding-block:calc(var(--header) + 32px) 48px}
@media (min-width:960px){.hero__inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;padding-block:calc(var(--header) + 16px) 24px}}
.hero .eyebrow{color:var(--amber)}
.hero h1{font-size:min(var(--step-5),7.4svh);max-width:22ch}
.hero h1 .outline{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9);paint-order:stroke fill}
.hero h1 .impact{color:var(--amber)}
@media (min-width:960px) and (max-height:760px){.hero__lede{font-size:1rem;margin-top:16px}.hero__actions{margin-top:22px}.hero__trust{margin-top:20px;padding-top:16px}.hero .eyebrow{margin-bottom:14px}.hero__inner{padding-block:calc(var(--header) + 4px) 12px}.hero__index-inner{min-height:48px;padding-block:8px}.hero__float{padding:12px 14px 10px;min-width:210px;bottom:-6%}.mini-steps li{font-size:.84rem}.mini-steps{gap:6px}}
.hero__lede{margin-top:22px;font-size:var(--step-1);color:var(--on-navy-muted);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__trust{margin-top:30px;padding-top:20px;border-top:1px solid var(--on-navy-line);display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.92rem;color:var(--on-navy-muted)}
.hero__trust strong{color:#fff;font-weight:500}
.hero__trust .dot{color:var(--amber)}

/* Hero media: film, rotating method badge, live method card */
.hero__media{position:relative;width:100%;max-width:460px;margin-inline:auto}
@media (min-width:960px){.hero__media{--hero-h:min(calc(100svh - 252px),600px);width:calc(var(--hero-h) * 5 / 6);max-width:100%;justify-self:end;margin-inline:0}}
.hero__frame{position:relative;aspect-ratio:5/6;border-radius:30px;overflow:hidden;background:var(--navy-deep);box-shadow:0 48px 90px -44px rgba(0,0,0,.65)}
.hero__frame video,.hero__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.spin-badge{position:absolute;top:-34px;inset-inline-start:-34px;width:128px;height:128px;border-radius:50%;box-shadow:0 24px 44px -22px rgba(0,0,0,.7);z-index:2}
.spin-badge svg{width:100%;height:100%;animation:spin 26s linear infinite}
.spin-badge__dot{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--amber);transform:translate(-50%,-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__float{position:absolute;inset-inline-end:-4%;bottom:7%;background:#fff;color:var(--navy);border-radius:16px;padding:16px 18px 14px;box-shadow:var(--shadow);min-width:240px;display:grid;gap:10px;z-index:2}
.hero__float small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-text);font-weight:500}
.mini-steps{display:grid;gap:8px}
.mini-steps li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;font-size:.9rem}
.mini-steps li span{font-family:var(--font-display);font-weight:700}
.mini-steps li em{font-style:normal;font-size:.76rem;color:var(--slate-text)}
.mini-steps i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.mini-steps .done i{background:var(--green);color:#fff}
.mini-steps .done i::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.mini-steps .live i{background:rgba(247,181,0,.18)}
.mini-steps .live i::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);animation:pulse 1.8s ease-in-out infinite}
.mini-steps .live em{color:var(--amber-deep);font-weight:500}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
@media (max-width:959px){.hero__media{max-width:440px;margin-top:8px;margin-bottom:28px}.hero__float{inset-inline-end:0;bottom:-24px;min-width:0;padding:14px 16px}.spin-badge{width:104px;height:104px;top:-26px;inset-inline-start:-14px}}

/* Capability index along the bottom edge of the hero */
.hero__index{position:relative;border-top:1px solid var(--on-navy-line);background:rgba(10,22,52,.35)}
.hero__index-inner{display:flex;align-items:center;gap:8px 30px;min-height:56px;font-size:.9rem;color:var(--on-navy-muted);flex-wrap:wrap;padding-block:12px}
.hero__index a{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:10px;transition:color .15s ease}
.hero__index a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.hero__index a:hover{color:#fff}
.hero__index .scroll{margin-inline-start:auto;display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:500}
.hero__index .scroll::before{display:none}
.hero__index .scroll i{width:1px;height:26px;background:linear-gradient(var(--amber),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
@media (max-width:959px){.hero__index{display:none}}

/* =============================================================
   Images and their fallbacks
   ============================================================= */
.product__media img,.founder__media img{width:100%;height:100%;object-fit:cover;display:block}
.product__media,.founder__media{overflow:hidden;background:var(--clay)}
.logo-grid li img,.client img{height:auto;width:auto;max-height:40px;max-width:min(160px,100%);object-fit:contain;opacity:.85;filter:grayscale(1);transition:opacity .25s ease,filter .25s ease}
.logo-grid li img.logo--sq,.client img.logo--sq{max-height:54px}
.logo-grid li:hover img,.client:hover img{opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){.logo-grid li img,.client img{transition:none}}
/* Client name set as a wordmark when its logo file isn't in assets/clients/ yet */
.logo-text{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--slate-text);text-align:center;line-height:1.2;overflow-wrap:anywhere}
.client .logo-text{align-self:end;justify-self:start;color:var(--navy);font-size:1.3rem}
.quote__who img,.avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 52px}
.avatar{display:grid;place-items:center;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:.02em}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:.86rem;font-weight:500;padding:8px 14px;border-radius:999px;background:var(--white);border:1px solid var(--clay-deep);color:var(--navy)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:.78rem;font-weight:500;letter-spacing:.02em;padding:6px 10px;border-radius:999px;background:var(--clay);color:var(--navy)}

/* =============================================================
   PROOF — logo ledger + stats
   ============================================================= */
.proof{padding-block:clamp(56px,7vw,88px);border-bottom:1px solid var(--line);position:relative}
.proof__title{font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-text);text-align:center;margin-bottom:28px;display:flex;justify-content:center;align-items:center;gap:10px}
.logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (min-width:640px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.logo-grid li{min-height:108px}.logo-grid li img{max-height:44px;max-width:min(180px,100%)}.logo-grid li img.logo--sq{max-height:60px}}
.logo-grid li{background:var(--white);display:flex;align-items:center;justify-content:center;min-height:96px;padding:14px 16px;min-width:0}
/* keep the ledger full when a logo is missing: the last odd cell spans the gap */
@media (max-width:639px){.logo-grid li:last-child:nth-child(odd){grid-column:span 2}}
@media (min-width:640px){.logo-grid li:last-child:nth-child(4n+3){grid-column:span 2}.logo-grid li:last-child:nth-child(4n+1){grid-column:span 4}}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;margin-top:clamp(44px,5vw,64px)}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr);gap:0}.stat{padding-inline:32px}.stat:first-child{padding-inline-start:0}.stat + .stat{border-inline-start:1px solid var(--line)}}
.stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,3.6vw,3rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat b .plus{color:var(--amber)}
.stat--growth b{color:var(--green)}
.stat > span{display:block;margin-top:10px;color:var(--slate-text);font-size:.95rem;max-width:22ch}

/* =============================================================
   PROBLEM — before / after
   ============================================================= */
.contrast{display:grid;gap:16px;position:relative}
@media (min-width:900px){.contrast{grid-template-columns:1fr 72px 1fr;gap:0;align-items:stretch}}
.contrast__col{padding:clamp(24px,3.5vw,40px);border-radius:var(--radius);display:grid;gap:22px;align-content:start}
.contrast__col--before{background:var(--clay)}
.contrast__col--after{background:var(--navy);color:#fff}
.contrast__col h3{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-text);display:flex;align-items:center;gap:9px}
.contrast__col--after h3{color:var(--amber)}
.contrast__col ul{display:grid;gap:16px}
.contrast__col li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.contrast__col li i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.9rem;margin-top:2px}
.contrast__col--before li i{background:rgba(27,53,114,.08);color:var(--navy)}
.contrast__col--after li i{background:var(--green);color:#fff}
.contrast__col--after li i::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.contrast__col li b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.3}
.contrast__col li span{display:block;margin-top:2px;color:var(--slate-text);font-size:.9rem}
.contrast__col--after li span{color:var(--on-navy-muted)}
.contrast__arrow{display:none}
@media (min-width:900px){.contrast__arrow{display:grid;place-items:center}.contrast__arrow i{width:56px;height:56px;border-radius:50%;background:var(--amber);color:var(--navy);display:grid;place-items:center;font-style:normal;font-family:var(--font-display);font-weight:800;font-size:1.4rem;box-shadow:0 12px 28px -12px rgba(247,181,0,.8)}}
.pivot-line{margin-top:clamp(36px,5vw,56px);padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.pivot-line p{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);line-height:1.3;max-width:34ch}
.pivot-line p .accent{color:var(--amber)}

/* =============================================================
   SERVICES — editorial index
   ============================================================= */
.services-grid{display:grid;gap:44px}
@media (min-width:960px){.services-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:72px;align-items:start}}
.services-grid__side{display:grid;gap:22px}
@media (min-width:960px){.services-grid__side{position:sticky;top:calc(var(--header) + 32px)}}
.services-grid__side h2{font-size:var(--step-4)}
.cap-list{display:grid;border-top:1px solid var(--clay-deep);border-bottom:1px solid var(--clay-deep)}
.cap{
  position:relative;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
  padding:26px 14px;margin-inline:-14px;border-radius:18px;border-top:1px solid transparent;
  transition:background-color .25s ease,box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.cap + .cap{border-top-color:var(--clay-deep)}
@media (min-width:700px){.cap{grid-template-columns:64px 1fr 48px;gap:24px;padding:28px 22px;margin-inline:-22px}}
@media (hover:hover){
  .cap:hover{background:var(--white);box-shadow:var(--shadow);transform:translateY(-2px);border-top-color:transparent}
  .cap:hover + .cap{border-top-color:transparent}
  .cap:hover .cap__num::after{transform:scale(1.7)}
  .cap:hover .cap__icon{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(-8deg) scale(1.06)}
  .cap:hover h3{background-size:100% 3px}
  .cap:hover .tags li{background:var(--clay);border-color:var(--clay)}
}
.cap__num{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--navy);padding-top:9px;display:flex;align-items:flex-start;gap:8px}
.cap__num::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);margin-top:7px;transition:transform .25s ease}
.cap h3{
  display:inline;font-size:clamp(1.2rem,1rem + .8vw,1.45rem);padding-bottom:3px;
  background-image:linear-gradient(var(--amber),var(--amber));background-repeat:no-repeat;background-size:0 3px;background-position:left bottom;
  transition:background-size .3s ease;
}
.cap p{margin-top:8px;color:var(--slate-text);max-width:52ch;font-size:.98rem}
.cap .tags{margin-top:16px}
.cap .tags li{background:transparent;border:1px solid var(--clay-deep);transition:background-color .25s ease,border-color .25s ease}
.cap__icon{width:48px;height:48px;border-radius:12px;background:var(--white);border:1px solid var(--clay-deep);display:none;place-items:center;color:var(--navy);transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
@media (min-width:700px){.cap__icon{display:grid}}
.cap__icon svg{width:24px;height:24px}
.industries{margin-top:clamp(36px,5vw,56px);display:grid;gap:12px}
@media (min-width:860px){.industries{grid-template-columns:200px 1fr;gap:24px;align-items:center}}
.industries__label{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-text);display:inline-flex;align-items:center;gap:9px}
.uni{margin-top:clamp(28px,4vw,40px);display:grid;gap:20px;padding:clamp(24px,3.5vw,40px);border-radius:var(--radius);background:var(--white);border:1px solid var(--clay-deep);border-top:4px solid var(--green)}
@media (min-width:900px){.uni{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}}
.uni h3{font-size:var(--step-2)}
.uni p{color:var(--slate-text);margin-top:8px}
.uni ul{display:grid;gap:10px}
@media (min-width:560px){.uni ul{grid-template-columns:1fr 1fr}}
.uni li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem}
.uni li::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:.55em}
.uni li b{font-weight:500;color:var(--navy)}
.uni li span{color:var(--slate-text)}

/* =============================================================
   METHOD — three markers on a dashed line
   ============================================================= */
.steps{position:relative;display:grid;gap:56px;padding-top:40px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .steps::before{content:"";position:absolute;top:39px;left:16.66%;right:16.66%;height:2px;background:repeating-linear-gradient(90deg,rgba(247,181,0,.6) 0 8px,transparent 8px 14px)}}
.step{position:relative;padding:52px 26px 30px;border-radius:var(--radius);background:#294178;border:1px solid rgba(255,255,255,.14);display:grid;gap:12px;align-content:start}
.step__marker{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:80px;height:80px;border-radius:50%;background:var(--navy);border:2px solid var(--amber);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--amber);box-shadow:0 0 0 10px var(--navy)}
.step__phase{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);text-align:center}
.step h3{font-size:1.3rem;color:#fff;text-align:center}
.step__sub{color:var(--on-navy-muted);font-weight:500;text-align:center}
.step ul{display:grid;gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.step li{display:flex;gap:10px;color:var(--on-navy-muted);font-size:.96rem}
.step li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-top:.6em}
.method-arc{position:absolute;inset-inline-end:-190px;bottom:-300px;width:560px;height:560px;opacity:.3;pointer-events:none;fill:none;transform:rotate(180deg)}
@media (max-width:1023px){.method-arc{display:none}}
.method__cta{margin-top:clamp(40px,5vw,56px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;position:relative}
.method__cta p{color:var(--on-navy-muted)}

/* =============================================================
   WORK — bento products
   ============================================================= */
.bento{display:grid;gap:18px}
@media (min-width:640px){.bento{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.bento{grid-template-columns:repeat(4,1fr);gap:20px}}
.product{display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.product:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.product--wide{grid-column:span 2}
@media (max-width:639px){.product--wide{grid-column:auto}}
.product__media{aspect-ratio:2/1;border-radius:0;background:linear-gradient(180deg,#F5F3EE 0%,var(--clay) 100%)}
.product__body{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:22px 22px 20px}
.product--wide .product__body{padding:26px 28px 24px}
.product__cat{font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-text)}
.product h3{font-size:1.2rem}
.product--wide h3{font-size:1.4rem}
.product p{color:var(--slate-text);font-size:.95rem}
.product--wide p{font-size:.98rem;max-width:56ch}
/* Full-row card closing the grid (seventh product): image and text side by side from 860 px */
.product--feature{grid-column:1/-1}
.product--feature .product__body{padding:26px 28px 24px}
.product--feature h3{font-size:1.4rem}
.product--feature p{font-size:.98rem;max-width:52ch}
@media (min-width:860px){
  .product--feature{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto}
  /* at least 2:1, and as tall as the text when that is taller; the image is never cropped */
  .product--feature .product__media{aspect-ratio:auto;position:relative}
  .product--feature .product__media::before{content:"";display:block;padding-top:50%}
  .product--feature .product__media img{position:absolute;inset:0;object-fit:contain}
  .product--feature .product__body{padding:clamp(28px,3vw,40px)}
  .product--feature h3{font-size:1.6rem}
}
.product__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);font-size:.88rem;color:var(--slate-text)}
.product__foot .go{font-family:var(--font-display);font-weight:700;display:inline-flex;gap:6px;align-items:center;color:var(--navy)}
.product__foot .go .arrow{transition:transform .18s ease}
a.product:hover .go .arrow{transform:translateX(3px)}
.clients{margin-top:clamp(48px,6vw,72px);padding-top:clamp(36px,4vw,48px);border-top:1px solid var(--line)}
.clients__head{display:grid;gap:8px;margin-bottom:24px;max-width:70ch}
.clients__head h3{font-size:var(--step-2)}
.clients__head p{color:var(--slate-text)}
.client-list{display:grid;gap:14px}
@media (min-width:860px){.client-list{grid-template-columns:repeat(3,1fr)}}
.client{display:grid;grid-template-rows:48px 1fr auto;gap:14px;align-content:start;height:100%;padding:20px;border-radius:var(--radius-sm);border:1px solid var(--line);text-decoration:none;transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.client:hover{border-color:var(--navy);transform:translateY(-2px)}
.client b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;display:block}
.client span{color:var(--slate-text);font-size:.92rem}
.client .go{font-weight:500;font-size:.88rem;color:var(--navy);margin-top:auto}
.client > img{align-self:end;justify-self:start;max-height:44px}
.client > img.logo--sq{max-height:48px}

/* =============================================================
   TECHNOLOGY — layered stack
   ============================================================= */
.tech-grid{display:grid;gap:44px}
@media (min-width:960px){.tech-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}}
.tech-grid__side{display:grid;gap:22px}
@media (min-width:960px){.tech-grid__side{position:sticky;top:calc(var(--header) + 32px)}}
.tech-grid__side h2{font-size:var(--step-4)}
.tech__note{display:grid;gap:10px;color:var(--slate-text);font-size:.96rem}
.tech__note span{display:inline-flex;align-items:center;gap:10px}
.tech__note svg{width:18px;height:18px;color:var(--green)}
.stack{display:grid;gap:14px}
.layer{position:relative;display:grid;gap:12px;padding:18px 20px;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--clay-deep)}
@media (min-width:640px){.layer{grid-template-columns:170px 1fr;align-items:center;gap:20px}}
.layer + .layer::before{content:"";position:absolute;top:-15px;inset-inline-start:30px;height:14px;width:2px;background:repeating-linear-gradient(180deg,var(--line-strong) 0 5px,transparent 5px 9px)}
.layer h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-text);font-weight:700;display:flex;align-items:center;gap:10px}
.layer h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy)}
.layer--ai h3::before{background:var(--amber)}
.layer ul{display:flex;flex-wrap:wrap;gap:8px}
.layer li{display:inline-flex;align-items:center;gap:9px;padding-block:8px;padding-inline:10px 14px;border-radius:10px;background:var(--clay);font-family:var(--font-display);font-weight:700;font-size:.9rem}
.layer li:not(:has(.chip__icon)){padding-inline:14px}
.chip__icon{width:22px;height:22px;object-fit:contain;flex:0 0 auto}

/* =============================================================
   VOICES — pull-quote + grid
   ============================================================= */
.expect-row{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:clamp(36px,5vw,56px)}
@media (min-width:640px){.expect-row{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.expect-row{grid-template-columns:repeat(4,1fr);gap:24px}}
.expect-row li{display:grid;gap:8px;padding-top:18px;padding-inline-start:20px;border-top:1px solid var(--clay-deep);position:relative}
.expect-row li::before{content:"";position:absolute;top:25px;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:var(--green)}
.expect-row b{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.35}
.expect-row span{color:var(--slate-text);font-size:.93rem}
.quote-hero{display:grid;gap:28px;padding:clamp(32px,5vw,60px);border-radius:var(--radius);background:var(--clay);position:relative;overflow:hidden;margin-bottom:18px}
.quote-hero::before{content:"\201C";position:absolute;inset-inline-end:28px;top:-10px;font-family:var(--font-display);font-weight:800;font-size:9rem;line-height:1;color:var(--amber);opacity:.9}
.quote-hero p{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,1rem + 1vw,1.7rem);line-height:1.32;letter-spacing:-.015em;max-width:30ch;position:relative}
@media (max-width:640px){.quote-hero::before{font-size:5.5rem;top:-4px}.quote-hero blockquote{padding-top:40px}}
.quotes{display:grid;gap:18px}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{padding:26px;border-radius:var(--radius);background:var(--clay);display:grid;gap:18px;align-content:space-between;position:relative}
.quote::before{content:"\201C";position:absolute;inset-inline-end:22px;top:6px;font-family:var(--font-display);font-weight:800;font-size:4rem;line-height:1;color:var(--amber);opacity:.9}
.quote p{font-size:1rem;line-height:1.6;padding-inline-end:26px}
.quote__who{display:flex;align-items:center;gap:12px}
.quote__who b{display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem}
.quote__who span{display:block;color:var(--slate-text);font-size:.85rem}

/* =============================================================
   ABOUT — story, portraits, timeline
   ============================================================= */
.about{display:grid;gap:44px}
@media (min-width:960px){.about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}}
.about h2{font-size:var(--step-4)}
.about__story{display:grid;gap:20px}
.about__story > p{color:var(--slate-text)}
.about__story blockquote{margin:8px 0 0;padding:22px 26px;border-inline-start:4px solid var(--amber);background:var(--white);border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.45;color:var(--navy)}
.about__story blockquote cite{display:block;margin-top:10px;font-family:var(--font-body);font-weight:500;font-style:normal;font-size:.88rem;color:var(--slate-text)}
.founders{display:grid;gap:16px}
@media (min-width:560px){.founders{grid-template-columns:1fr 1fr}}
.founder{border-radius:var(--radius);background:var(--white);border:1px solid var(--clay-deep);display:grid;grid-template-rows:auto 1fr;overflow:hidden;align-content:start}
.founder__media{aspect-ratio:4/5;border-radius:0}
.founder__body{display:grid;gap:12px;padding:20px 22px 22px}
.founder h3{font-size:1.15rem}
.founder__role{color:var(--green);font-weight:500;font-size:.9rem;margin-top:4px}
.founder p{color:var(--slate-text);font-size:.94rem}
.timeline{grid-column:1/-1;display:grid;gap:28px;position:relative;padding-top:36px;margin-top:8px;border-top:1px solid var(--clay-deep)}
@media (min-width:760px){.timeline{grid-template-columns:repeat(4,1fr);gap:24px}}
.timeline li{position:relative;padding-top:4px}
@media (min-width:760px){.timeline li::before{content:"";position:absolute;top:-43px;inset-inline-start:0;width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--clay)}}
@media (max-width:759px){.timeline li{padding-inline-start:18px;border-inline-start:2px solid var(--amber)}}
.timeline small{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-text);font-weight:500}
.timeline b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.timeline span{display:block;margin-top:6px;color:var(--slate-text);font-size:.93rem}

/* =============================================================
   CONTACT
   ============================================================= */
.contact__rings{position:absolute;inset-inline-end:-170px;top:-170px;width:600px;height:600px;pointer-events:none;fill:none}
.contact .container{position:relative;z-index:1}
.contact__grid{display:grid;gap:44px}
@media (min-width:960px){.contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}}
.contact h2{font-size:var(--step-4);max-width:14ch}
.how{display:grid;gap:0;margin-top:36px;position:relative}
.how li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding-bottom:22px;position:relative}
.how li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:19px;top:44px;bottom:2px;width:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 8px,transparent 8px 14px)}
.how i{font-style:normal;font-family:var(--font-display);font-weight:800;width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--navy);display:grid;place-items:center;font-size:.9rem}
.how b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;padding-top:8px}
.how span{display:block;color:var(--on-navy-muted);font-size:.95rem;margin-top:4px}
.contact__alt{margin-top:16px;padding-top:24px;border-top:1px solid var(--on-navy-line);color:var(--on-navy-muted);font-size:.95rem;display:grid;gap:8px}
.contact__alt a{color:#fff;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.form{display:grid;gap:16px;padding:clamp(24px,3.5vw,36px);border-radius:var(--radius);background:var(--white);color:var(--navy);box-shadow:var(--shadow)}
.form h3{font-size:1.3rem}
.form__row{display:grid;gap:16px}
@media (min-width:560px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px}
.field label{font-weight:500;font-size:.9rem}
.field input,.field textarea,.field select{width:100%;font:inherit;padding:13px 14px;border-radius:10px;border:1.5px solid var(--clay-deep);background:#fff;color:var(--navy)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,53,114,.12)}
.field textarea{min-height:120px;resize:vertical}
.form .btn{justify-content:center}
.form__note{font-size:.86rem;color:var(--slate-text)}
.form__done,.form__error{display:grid;gap:6px;padding:16px 18px;border-radius:var(--radius-sm);background:var(--clay);border-inline-start:4px solid var(--green)}
.form__error{border-inline-start-color:#C2410C;background:#FDF2EC}
.form__done b,.form__error b{font-family:var(--font-display);font-weight:700}
.form__done span,.form__error span{font-size:.92rem;color:var(--slate-text)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* =============================================================
   FOOTER — full screen: closing call, then the hairline grid
   ============================================================= */
.footer{position:relative;background:var(--navy-ink);color:var(--on-navy-muted);border-top:4px solid var(--amber);overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
@media (min-width:960px){.footer{min-height:100svh}}
.footer__cta{position:relative;flex:1;display:flex;align-items:center;padding-block:calc(var(--header-compact) + clamp(24px,5vh,64px)) clamp(32px,4.5vh,60px)}
.footer__cta-inner{position:relative;width:100%;display:grid;gap:40px;align-items:center}
@media (min-width:1000px){.footer__cta-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px}}
.footer .eyebrow{color:var(--amber)}
.footer__cta h2{font-size:clamp(2.2rem,1rem + 3.4vw,4.25rem);color:#fff;max-width:17ch;letter-spacing:-.035em}
.footer__cta .amber{color:var(--amber)}
.footer__cta .green{color:#4FB56E}
.footer__lede{margin-top:18px;font-size:var(--step-1);color:var(--on-navy-muted);max-width:44ch}
.footer__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.footer__proof{display:grid;gap:14px;align-self:end}
@media (min-width:1000px){.footer__proof{justify-self:end;max-width:360px;width:100%}}
.footer__proof li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding-block:14px;border-top:1px solid rgba(255,255,255,.12)}
.footer__proof li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.footer__proof b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,1.2rem + 1.4vw,2.4rem);color:#fff;letter-spacing:-.03em;line-height:1;min-width:3.2ch}
.footer__proof b .plus{color:var(--amber)}
.footer__proof b.is-green{color:#4FB56E}
.footer__proof span{font-size:.95rem}
.footer__cta-art{position:absolute;top:50%;inset-inline-end:-12%;width:min(60vw,780px);aspect-ratio:1;height:auto;transform:translateY(-50%);pointer-events:none;fill:none;z-index:-1}
.footer__cta-art .turn{transform-origin:128px 100px;animation:spin 90s linear infinite}
@media (max-width:999px){.footer__cta-art{top:auto;bottom:-22%;transform:none;width:120vw;inset-inline-end:-45%;opacity:.7}}
.footer__base{position:relative}
.footer__grid{display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}
@media (min-width:640px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer__cell{background:var(--navy-ink);padding:clamp(20px,2.2vw,28px);display:grid;gap:12px;align-content:start}
.footer__cell h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.mark-arc{flex:0 0 auto;width:13px;height:13px;fill:none}
.footer__cell h4 .mark-arc{width:14px;height:14px}
.footer p{font-size:.95rem;max-width:34ch}
.footer ul{display:grid;gap:7px}
@media (min-width:1000px){.footer__links{grid-template-columns:auto auto;justify-content:start;column-gap:28px}}
.footer__links a{white-space:nowrap}
.footer a{color:var(--on-navy-muted);text-decoration:none;font-size:.95rem;transition:color .15s ease}
.footer a:hover{color:#fff}
.footer a.btn--amber{color:var(--navy)}
.footer a.btn--outline-light{color:#fff}
.footer address{font-style:normal;font-size:.92rem;line-height:1.65}
.footer address b{color:#fff;font-weight:500;display:block}
.footer .brand{display:inline-flex;height:auto;margin-bottom:4px}
.footer .brand__img{height:52px;width:auto}
.social{display:flex;gap:10px;margin-top:6px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff}
.social a:hover{border-color:var(--amber);color:var(--amber)}
.social svg{width:18px;height:18px}
.footer__bottom{margin-top:16px;padding-block:16px 22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:.88rem}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer__bottom a{font-size:.88rem}
.to-top{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.footer a.to-top{color:#fff}
.footer a.to-top:hover{background:var(--amber);border-color:var(--amber);color:var(--navy)}

/* Short laptop screens: keep the whole footer on one screen */
@media (min-width:960px) and (max-height:800px){
  .footer__cta{padding-block:calc(var(--header-compact) + 16px) 24px}
  .footer .eyebrow{margin-bottom:12px}
  .footer__cta h2{font-size:clamp(2rem,.9rem + 2.8vw,3.4rem)}
  .footer__lede{margin-top:12px;font-size:1rem}
  .footer__actions{margin-top:20px}
  .footer__actions .btn{padding:14px 24px}
  .footer__proof li{padding-block:9px}
  .footer__proof b{font-size:1.8rem}
  .footer__cell{padding:16px 22px;gap:8px}
  .footer .brand__img{height:40px}
  .footer p,.footer address{font-size:.88rem;line-height:1.55}
  .footer__cell ul{row-gap:4px}
  .footer__bottom{margin-top:10px;padding-block:10px 14px}
  .to-top{width:38px;height:38px}
}

/* =============================================================
   PAGES — legal and any other WordPress page
   ============================================================= */
.page-hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;overflow:hidden;isolation:isolate;padding-block:calc(var(--header) + clamp(48px,7vw,96px)) clamp(48px,6vw,80px)}
.page-hero__rings{position:absolute;inset-inline-end:-160px;top:-120px;width:560px;height:560px;pointer-events:none;fill:none;z-index:-1}
.page-hero .eyebrow{color:var(--amber)}
.page-hero h1{font-size:clamp(2.2rem,1.2rem + 3.4vw,3.9rem);max-width:20ch}
.page-hero__meta{margin-top:20px;color:var(--on-navy-muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:8px 18px}
.page-hero__meta .dot{color:var(--amber)}
.page-body{padding-block:clamp(48px,7vw,96px)}
.page-layout{display:grid;gap:40px}
@media (min-width:1000px){.page-layout--toc{grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start}}
.toc{display:none}
@media (min-width:1000px){.toc{display:block;position:sticky;top:calc(var(--header-compact) + 32px)}}
.toc p{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-text);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.toc ol{display:grid;gap:2px;border-inline-start:1px solid var(--clay-deep)}
.toc a{display:block;padding:7px 14px;margin-inline-start:-1px;border-inline-start:2px solid transparent;text-decoration:none;color:var(--slate-text);font-size:.92rem;line-height:1.4;transition:color .15s ease,border-color .15s ease}
.toc a:hover{color:var(--navy);border-inline-start-color:var(--amber)}
.prose{max-width:72ch;font-size:1.0625rem;line-height:1.75;color:#2B3A5E}
.prose > * + *{margin-top:1.05em}
.prose h2{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);color:var(--navy);margin-top:2.2em;padding-top:1.4em;border-top:1px solid var(--clay-deep);scroll-margin-top:calc(var(--header-compact) + 24px)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.2rem;margin-top:1.8em}
.prose h2 + *,.prose h3 + *{margin-top:.75em}
.prose strong{color:var(--navy);font-weight:600}
.prose a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--navy)}
.prose ul,.prose ol{display:grid;gap:.55em;padding-inline-start:0}
.prose ul li{position:relative;padding-inline-start:22px}
.prose ul li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.prose ol{counter-reset:item}
.prose ol li{position:relative;padding-inline-start:28px;counter-increment:item}
.prose ol li::before{content:counter(item) ".";position:absolute;inset-inline-start:0;font-family:var(--font-display);font-weight:700;color:var(--navy)}
.prose blockquote{padding:18px 22px;border-inline-start:4px solid var(--amber);background:var(--clay);border-radius:var(--radius-sm)}
.prose img{border-radius:var(--radius-sm)}
.prose .alignleft{float:inline-start;margin-inline-end:1.5em;margin-block:.3em 1em}
.prose .alignright{float:inline-end;margin-inline-start:1.5em;margin-block:.3em 1em}
.prose .aligncenter{margin-inline:auto}
.prose .wp-block-button__link{display:inline-flex;padding:14px 24px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:700}
.page-contact{margin-top:clamp(40px,5vw,64px);padding:24px 26px;border-radius:var(--radius);background:var(--clay);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;max-width:72ch}
.page-contact p{color:var(--slate-text)}
.page-contact b{display:block;color:var(--navy);font-family:var(--font-display);font-weight:700}
.post-list{display:grid;gap:18px;max-width:880px}
.post-list article{padding:24px 0;border-top:1px solid var(--clay-deep)}
.post-list h2{font-size:var(--step-2)}
.post-list h2 a{text-decoration:none}
.post-list time{display:block;margin-top:6px;color:var(--slate-text);font-size:.9rem}
.post-list p{margin-top:10px;color:var(--slate-text)}
.pagination{margin-top:32px;display:flex;gap:12px}
.pagination a,.pagination span{padding:10px 16px;border-radius:999px;border:1px solid var(--clay-deep);text-decoration:none}

/* 404 */
.not-found{min-height:100svh;display:flex;align-items:center}
.not-found .page-hero__inner{width:100%}
.not-found__num{font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,3rem + 10vw,11rem);line-height:.9;letter-spacing:-.06em;color:rgba(255,255,255,.08);margin-bottom:10px}
.not-found .hero__actions{margin-top:32px}

/* =============================================================
   Motion — visible at rest; animates only when JS is present
   ============================================================= */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.1s}
.js .reveal[data-delay="2"]{transition-delay:.2s}
.js .reveal[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .spin-badge svg,.mini-steps .live i::before,.hero__index .scroll i,.footer__cta-art .turn{animation:none}
  .btn,.product,.cap,.cap__icon,.cap h3,.cap__num::after{transition:none}
}