/* ═════════════════════════════════════════════════════════════
   Ornsley IT visual redesign (22 Oct 2026, round 2): pale blue liquid glass.
   Shared layer loaded AFTER each page's inline <style>, so it only
   restyles: no wording, ids or JS hooks depend on it.
   Headlines are sans everywhere (the serif/sans preview switch is gone).
   ═════════════════════════════════════════════════════════════ */

:root{
  --c-accent:#3366CC;          /* AA on white (5.4:1) and on --g-bg (4.8:1) */
  --c-accent-2:#2A56B0;
  --c-accent-soft:#E3ECFB;
  --g-bg:#EEF3FB;
  --g-bg-2:#F6F9FE;
  --g-card:linear-gradient(165deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.5) 100%);
  --g-card-solid:rgba(255,255,255,.9);
  --g-line:rgba(255,255,255,.88);
  --g-edge:rgba(160,186,226,.38);   /* fine pale blue outline that still reads on white */
  --g-blur-sm:blur(12px) saturate(150%);
  --c-eyebrow:#56688A;              /* muted blue-grey, AA (≥5:1) on the pale backgrounds */
  --g-line-2:rgba(51,102,204,.12);
  --g-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 32px -8px rgba(30,58,95,.14),0 2px 6px rgba(30,58,95,.05);
  --g-shadow-lg:0 1px 0 rgba(255,255,255,.95) inset,0 28px 60px -18px rgba(30,58,95,.28),0 6px 16px rgba(30,58,95,.08);
  --g-blur:blur(18px) saturate(160%);
  --c-border:#DCE5F2;
  --c-border-md:#C9D6EA;
  --c-warm-1:#F3F7FD;
  --c-warm-2:#E8EFFA;
  --c-warm-3:#C9D6EA;
  --c-navy-pale:#E6EEFA;
  --c-muted:#5F6476;           /* was #8A8A9E (3.4:1); now AA 5.9:1 on white */
  --c-subtle:#6E7489;          /* placeholders, optional hints: AA on white */
  /* Side glass: ONE recipe shared by the Websites + Systems & Tools hero cards and the Services ▾ / Contact ▾
     menus, so they always match. Surface = centred top light edge + top-half sheen + see-through tint. */
  --glass-side-bg:linear-gradient(165deg,rgba(255,255,255,.44) 0%,rgba(240,246,254,.24) 52%,rgba(226,236,251,.2) 100%);
  --glass-side-highlight-edge:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%,#fff 70%,rgba(255,255,255,0)) 50% 0/72% 1px no-repeat;
  --glass-side-sheen:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 100%) 0 0/100% 52% no-repeat;
  --glass-side-surface:var(--glass-side-highlight-edge),var(--glass-side-sheen),var(--glass-side-bg);
  --glass-side-blur:blur(24px) saturate(180%);
  --glass-side-border:rgba(255,255,255,.8);
  --glass-side-highlight:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35);
  --glass-side-shadow:0 0 0 1px rgba(150,178,222,.3),0 22px 44px -20px rgba(30,58,95,.32),0 6px 14px -8px rgba(30,58,95,.12);
  --glass-side-shadow-hover:0 0 0 1px rgba(150,178,222,.36),0 28px 50px -20px rgba(30,58,95,.38),0 8px 16px -8px rgba(30,58,95,.14);
}

/* Sans headlines everywhere: every heading that used Instrument Serif now uses Outfit.
   Italic accents become upright accent blue. */
:root{--f-serif:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.serif{font-weight:400;letter-spacing:-.035em}
.t-display{letter-spacing:-.045em;line-height:1.04;font-size:clamp(2.4rem,4.6vw,4.1rem)}
.t-h2{letter-spacing:-.035em;line-height:1.1}
.serif em,.tool-h em,.t-h2 em,.t-h3 em,.hero-h em{font-style:normal;color:var(--c-accent)!important}
.hero-glass .hero-h em{display:block}
.metric-num,.tool-price-main strong{letter-spacing:-.035em}

/* Section anchors land below the fixed header */
html{scroll-padding-top:96px}
html:has(#prelaunch){scroll-padding-top:140px}
/* v4.11: phones. The header pill ends at 70px (same at 360px). Anything targeted lands 16px below it (86px), or 16px below
   the prelaunch pill when that is showing. Sections pull their own top padding (plus 6px) back out with a negative
   scroll-margin, so the eyebrow/heading, not the empty padding, sits 12-20px below the header. Sections with no top
   padding (About, #phone) land their card top at 86px. Scrolling spacing is unchanged (scroll-margin only). */
@media(max-width:640px){
  html,html:has(#prelaunch){scroll-padding-top:86px}
  html:has(#prelaunch.on){scroll-padding-top:144px}  /* pill wraps to two lines (bottom 128px) */
  .section[id]{scroll-margin-top:calc(-6px - var(--sp-8))}
  .cta-band[id]{scroll-margin-top:calc(-6px - var(--sp-10))}
  .section.about-section[id],#phone.section{scroll-margin-top:0}
}
@media(min-width:480px) and (max-width:640px){html:has(#prelaunch.on){scroll-padding-top:126px}}  /* one line (bottom 109px) */
@media(max-width:600px){.section[id]:not(.about-section):not(#phone){scroll-margin-top:calc(-6px - var(--sp-7))}}

/* ───────── Base ───────── */
body{background:var(--g-bg-2) linear-gradient(180deg,#E4EDFA 0,#EEF3FB 720px,var(--g-bg-2) 1600px) no-repeat}
::selection{background:#CFDDF6;color:var(--c-ink)}
.section-warm{background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.42) 180px,rgba(255,255,255,.42) calc(100% - 180px),rgba(255,255,255,0) 100%)}
.section-warm2{background:linear-gradient(180deg,rgba(214,228,248,0) 0,rgba(214,228,248,.5) 180px,rgba(232,240,251,.35) calc(100% - 120px),rgba(232,240,251,0) 100%)}
.eyebrow{color:var(--c-navy-2)}
.eyebrow::before{background:var(--c-navy-2)}
:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

/* ───────── Navigation: floating glass bar, pill menu, active tab ───────── */
.nav-shell{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:10px 12px 0;box-shadow:none!important}
.nav-inner{max-width:1180px;padding:0 8px 0 20px;border-radius:999px;position:relative;isolation:isolate;
  background:rgba(255,255,255,.4);border:1px solid var(--g-line);outline:1px solid var(--g-edge);outline-offset:0;
  box-shadow:0 8px 24px -12px rgba(30,58,95,.18);transition:background .3s,box-shadow .3s}
/* The bar's blur lives on a pseudo-element: a backdrop-filter on .nav-inner itself would make it a "backdrop root",
   and the dropdowns inside it could then only blur the bar, not the page behind them. */
.nav-inner::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.nav-shell.up .nav-inner{background:rgba(255,255,255,.66);box-shadow:0 10px 30px -12px rgba(30,58,95,.28)}
.nav-links{padding:4px;gap:2px;border-radius:999px;background:rgba(232,240,251,.7);
  border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 2px rgba(30,58,95,.06)}
.nav-link{border-radius:999px;padding:7px 16px;color:var(--c-ink-3)}
/* The pill bar (with About first) stays on one line from 1440 down to its 861px collapse point:
   labels never wrap, pill padding tightens below 1100px, and below 1000px Contact shows as its icon
   (label kept for screen readers), as on phones. */
.nav-link{white-space:nowrap}
@media(min-width:861px) and (max-width:1100px){
  .nav-link{padding:7px 11px}
  .nav-inner{padding-left:16px}
}
@media(min-width:861px) and (max-width:1000px){
  .nav-links{gap:0}
  .nav-link{padding:7px 9px}
  .nav-contact-btn{width:40px;height:40px;min-height:40px;padding:0;justify-content:center}
  .nav-contact-btn .ncb-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .nav-contact-btn .ncb-chev{display:none}
  .nav-contact-btn .ncb-ico{display:block}
}
.nav-link:hover{background:rgba(255,255,255,.7);color:var(--c-ink)}
.nav-link.is-active,.nav-link[aria-current],
.nav-dd:has(.nav-dd-item[aria-current="page"]) .nav-dd-btn,
.nav-dd-btn[aria-expanded="true"]{background:#fff;color:var(--c-ink);
  box-shadow:0 2px 10px -2px rgba(30,58,95,.18),0 0 0 1px rgba(255,255,255,.9)}
.nav-dd-btn{min-height:36px;border:0}
/* Services ▾ and Contact ▾ menus: the side-card glass (shared tokens above) */
.nav-dd-menu,.nav-contact-menu{border-radius:18px;background:var(--glass-side-surface);border:1px solid var(--glass-side-border);
  -webkit-backdrop-filter:var(--glass-side-blur);backdrop-filter:var(--glass-side-blur);
  box-shadow:var(--glass-side-highlight),var(--glass-side-shadow)}
.nav-dd-item{border-radius:12px}
.nav-dd-item:hover,.nav-dd-item:focus-visible,.nav-dd-item[aria-current="page"]{background:var(--c-accent-soft)}
.nav-cta,.nav-cta.btn{background:#fff;color:var(--c-ink);border-radius:999px;padding:9px 20px;
  box-shadow:0 2px 10px -2px rgba(30,58,95,.2),0 0 0 1px rgba(255,255,255,.9)}
.nav-cta:hover,.nav-cta.btn:hover{background:#fff;color:var(--c-accent)}
.nav-phone{border-radius:999px}
.nav-toggle{border-radius:999px}
.mnav{margin-top:8px;border-radius:24px;border:1px solid var(--g-line);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-shadow-lg);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px)}
.mnav-link{border-bottom-color:var(--c-border)}
.prelaunch{top:76px;left:12px;right:12px;border-radius:999px;border:1px solid #D2E0F4}

/* ───────── Buttons: pills ───────── */
.btn{border-radius:999px;padding:13px 26px}
.btn-primary,.btn-navy,.btn-form{color:#fff;
  background:linear-gradient(180deg,#4677DA 0%,var(--c-accent) 55%,#2D5CBE 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -10px rgba(51,102,204,.7)}
.btn-primary:hover,.btn-navy:hover,.btn-form:hover{background:linear-gradient(180deg,#3F6FD2 0%,var(--c-accent-2) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 28px -10px rgba(51,102,204,.75)}
.btn-primary svg,.btn-navy svg,.btn-form svg{width:22px;height:22px;padding:5px;margin-right:-10px;border-radius:50%;
  background:rgba(255,255,255,.18)}
.btn-outline{background:rgba(255,255,255,.88);color:var(--c-ink);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 18px -8px rgba(30,58,95,.25)}
.btn-outline:hover{background:#fff;color:var(--c-ink);border-color:#fff}
.btn-light{border-radius:999px}
.btn-form{border-radius:999px}
.mnav-actions .btn-outline{border:1px solid var(--c-border)}

/* ───────── Glass surfaces ───────── */
.card,.problem-card,.faq-item,.form-card,.founding-panel,.web-panel,.contact-channel,
.metric{background:var(--g-card);border:1px solid var(--g-line);box-shadow:var(--g-shadow),0 0 0 1px var(--g-edge)}
.card,.problem-card,.faq-item,.form-card,.founding-panel{-webkit-backdrop-filter:var(--g-blur-sm);backdrop-filter:var(--g-blur-sm)}
.card,.form-card,.founding-panel{border-radius:24px}
.problem-card,.faq-item,.web-panel{border-radius:20px}
.card:hover{box-shadow:var(--g-shadow-lg)}
.card-navy,.pillar-card.featured{background:linear-gradient(160deg,#24497A,#16304E);border-color:rgba(255,255,255,.12)}
.founding-panel{border-left:1px solid var(--g-line)}
.card-icon{border-radius:14px;background:linear-gradient(180deg,#fff,#E8EFFA);border-color:#fff;
  box-shadow:0 4px 12px -4px rgba(30,58,95,.2)}
.card-icon svg{stroke:var(--c-accent)}
.solution-tag{background:rgba(227,236,251,.85);border-color:#fff;color:var(--c-navy-2)}
.solution-ideal{background:rgba(232,240,251,.7);border-radius:14px}
.solution-feature{border-bottom-color:var(--c-border)}
.sf-label{color:var(--c-navy-2)}
.problem-num{color:#AFC4E6}
.hero-metrics{border:0;box-shadow:none;gap:12px;overflow:visible;border-radius:0}
.hero-metrics .metric{border-radius:20px;border:1px solid var(--g-line)!important}
.trust-badge{background:rgba(255,255,255,.7);border-color:var(--g-line);box-shadow:0 2px 8px -4px rgba(30,58,95,.18)}
.trust-badge.badge-green{background:rgba(240,247,240,.85);border-color:#D4E8D4}
.step{border-color:var(--c-border)}
.step-circle{background:linear-gradient(180deg,#fff,#E8EFFA);border-color:#fff;color:var(--c-accent);
  box-shadow:0 4px 12px -4px rgba(30,58,95,.25)}
.tool-path-step{border-radius:999px;background:rgba(255,255,255,.8);border-color:var(--g-line);box-shadow:0 2px 8px -4px rgba(30,58,95,.18)}
.tool-path-step.on{background:var(--c-accent);border-color:var(--c-accent)}
.tool-visual{border-radius:20px;border-color:var(--g-line);box-shadow:var(--g-shadow-lg)}
.tool-visual-bar{background:rgba(243,247,253,.9)}
.contact-channel{border-radius:16px}
.contact-channel:hover{background:#fff}
.contact-channel.wa{background:rgba(240,247,240,.85);border-color:#D4E8D4}
.cc-icon,.contact-icon,.footer-contact-icon,.founding-icon,.credential-tick,.success-icon{background:#fff;border-color:var(--g-line)}
.f-group input,.f-group select,.f-group textarea{border-radius:14px;background:rgba(255,255,255,.9);border-color:var(--c-border-md)}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 4px rgba(51,102,204,.14)}
.section-ink,.cta-band,.existing-band{background:radial-gradient(120% 140% at 85% 0%,#2E5A97 0%,#1B3559 45%,#121F36 100%)}
.footer{background:rgba(255,255,255,.45);border-top:1px solid var(--g-line)}
.social-links a{border-radius:999px;background:rgba(255,255,255,.8);border-color:var(--g-line)}
.buybar{background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-top-color:var(--g-line)}
.toast{border-radius:999px}

/* Inner-page heroes: same pale glass atmosphere */
.hero{background:transparent;isolation:isolate}
.hero::before{z-index:-1;top:-260px;right:-180px;width:720px;height:720px;
  background:radial-gradient(circle,rgba(160,195,245,.55) 0%,rgba(200,220,250,.25) 40%,transparent 70%)}
.hero-rule{background:var(--c-accent);border-radius:2px}


/* Hero eyebrow (all page heroes): like the reference's small label. No decorative lines above the headline. */
.hero .hero-rule{display:none}
.hero .eyebrow{color:var(--c-eyebrow);font-size:.75rem;font-weight:500;letter-spacing:.26em;line-height:1.7;margin-bottom:var(--sp-4);text-wrap:balance}
@media(max-width:640px){.hero .eyebrow{font-size:.6875rem;letter-spacing:.2em}}
.hero .eyebrow::before{display:none}

/* ═════════════════════════════════════════════════════════════
   CONTACT ▾ dropdown (nav). Disclosure button + list of links; behaviour in motion.js
   ═════════════════════════════════════════════════════════════ */
.nav-contact{position:relative}
.nav-contact-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;
  font:inherit;font-size:.8125rem;font-weight:500;color:var(--c-ink-3);background:rgba(255,255,255,.5);-webkit-tap-highlight-color:transparent;
  border:1px solid rgba(255,255,255,.9);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.nav-contact-btn:hover,.nav-contact-btn[aria-expanded="true"]{background:#fff;color:var(--c-ink);box-shadow:0 2px 10px -2px rgba(30,58,95,.18)}
.nav-contact-btn svg{flex-shrink:0;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-contact-btn .ncb-ico{display:none;width:18px;height:18px;stroke-width:1.75}
.nav-contact-btn .ncb-chev{width:10px;height:10px;stroke-width:1.6;transition:transform .2s}
.nav-contact-btn[aria-expanded="true"] .ncb-chev{transform:rotate(180deg)}
/* Menu shrinks to fit its content (widest item + equal 6px padding left and right), right edge aligned with
   the button; centred under it on phones */
.nav-contact-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:210;width:max-content;box-sizing:border-box;max-width:calc(100vw - 24px);padding:6px;margin:0;list-style:none;
}
.nav-contact-menu[hidden]{display:none}
.nav-contact-item{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:12px;color:var(--c-ink);text-decoration:none}
.nav-contact-item:hover,.nav-contact-item:focus-visible{background:var(--c-accent-soft)}
.nav-contact-item:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.nci-k{font-size:.8125rem;font-weight:600;color:var(--c-ink)}
.nci-v{font-size:.8125rem;color:var(--c-ink-3)}
/* Text-safe measure for the see-through menus (glass unchanged): the secondary lines are a shade darker so they
   stay >=4.5:1 even where a blue headline shows through the blur (worst case: /websites/ at 390) */
.nci-v,.nav-dd-item small{color:#36374A}
@media(max-width:640px){
  .nav-contact-btn{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}
  .nav-contact-btn .ncb-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .nav-contact-btn .ncb-chev{display:none}
  .nav-contact-btn .ncb-ico{display:block}
  .nav-contact-menu{top:calc(100% + 14px);left:50%;right:auto;transform:translateX(-50%)}
}

/* ═════════════════════════════════════════════════════════════
   HOMEPAGE HERO (.hero-glass): headline + sculptural logo + soft wave + three compact glass cards
   ═════════════════════════════════════════════════════════════ */
.hero-glass{padding-top:calc(72px + 28px);padding-bottom:56px;isolation:isolate}
.hero-glass::before{display:none}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.hero-bg i{position:absolute;display:block;border-radius:50%}
.hero-bg .hb-1{width:820px;height:820px;right:-220px;top:-240px;
  background:radial-gradient(circle,rgba(160,196,246,.5) 0%,rgba(196,218,250,.24) 40%,transparent 68%)}
.hero-bg .hb-2{width:640px;height:640px;left:-260px;bottom:-300px;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 65%)}
/* One translucent blue-white wave: starts behind the logo (right) and flows down towards the card row.
   Masked on the left so the headline background stays quiet. Static. */
.hero-bg .hb-wave{position:absolute;right:0;top:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 62%)}

.hero-glass .hero-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center}
.hero-glass .hero-h{font-size:clamp(2.3rem,3.9vw,3.4rem);margin-bottom:var(--sp-4)}
.hero-glass .hero-sub{max-width:500px;margin-bottom:var(--sp-5)}
.hero-glass .hero-ctas{margin-bottom:var(--sp-4)}

/* Sculptural Ornsley IT mark: the nav logo's exact geometry (diamond ring + N), rendered offline as glossy
   Ornsley-blue glass (bevelled extrusion, specular, rim light, inner glow) to a transparent WebP.
   --ox/--oy shift it so the perceived shape, not the image box, sits in the centre. */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;width:100%;max-width:370px;justify-self:center;--ox:-2%;--oy:-.8%}
.l3-pos{position:relative;width:84%;aspect-ratio:1/1;transform:translate(var(--ox),var(--oy))}
.l3-float{position:relative;width:100%;height:100%}
.l3{position:absolute;inset:0}
.l3-img{display:block;width:100%;height:100%;position:relative}
.l3-aura{position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(120,165,240,.34) 0%,rgba(150,190,248,.14) 42%,transparent 68%)}
.l3-shadow{position:absolute;left:24%;right:24%;bottom:-4%;height:7%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(30,58,95,.30) 0%,rgba(30,58,95,.10) 45%,rgba(30,58,95,0) 72%)}

/* ── Three hero product cards (after the reference) ──
   All three share one box (same height, grid stretch) and one content grid: the nameplate pill at
   --pt/--px and the title row at --row from the card's top-left, so pills and titles line up at every width.
   Websites and Systems & Tools: plain rounded glass. AI Assistants: the only notched card. A raised tab on the
   left holds the orb (which breaks out of the top); the top edge then flows down in one smooth S-curve
   (cubic, horizontal at both ends, --C wide and --d deep) to the lower edge where its arrow sits. */
.hero-glass-row{margin-top:30px}
.hero-glass .hero-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:none;align-items:stretch;padding-top:26px;
  border:0;box-shadow:none;overflow:visible;border-radius:0;background:none}
.hero-glass .metric.hc{--px:20px;--pt:18px;--row:60px;--r:24px;
  --hc-bg:var(--glass-side-bg);--hc-line:var(--glass-side-border);--hc-blur:var(--glass-side-blur);
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;min-height:0;
  padding:var(--row) var(--px) 20px;border:0!important;border-radius:var(--r);background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:transform .3s var(--ease-out)}
.hero-glass .metric.hc:hover{transform:translateY(-3px);box-shadow:none}
.hc-glass{position:absolute;inset:0;z-index:-1;border-radius:var(--r);border:1px solid var(--hc-line);background:var(--hc-bg);
  -webkit-backdrop-filter:var(--hc-blur);backdrop-filter:var(--hc-blur)}

/* Side cards: the shared side glass (see --glass-side-* in :root; the Services/Contact menus use the same) */
.hc-web .hc-glass,.hc-sys .hc-glass{background:var(--glass-side-surface);border-color:var(--glass-side-border);
  -webkit-backdrop-filter:var(--glass-side-blur);backdrop-filter:var(--glass-side-blur);
  box-shadow:var(--glass-side-highlight),var(--glass-side-shadow);transition:box-shadow .3s}
.hc-web:hover .hc-glass,.hc-sys:hover .hc-glass{box-shadow:var(--glass-side-highlight),var(--glass-side-shadow-hover)}
.hc-web:has(.metric-link:focus-visible) .hc-glass,.hc-sys:has(.metric-link:focus-visible) .hc-glass{outline:2px solid var(--c-accent);outline-offset:2px}

/* AI Assistants: near-opaque raised glass cut by a 6-layer mask (tab, curve, lower edge, rounded top-right
   corner), so blur, tint and edge all follow the notch. ::before draws the curved edge, ::after the lower edge +
   top-right corner; the element's own border covers the rest. Shadow: a strip at the bottom edge (a box-shadow
   would be cut by the mask). */
.hero-glass .metric.hc-ai{--A:124px;--C:64px;--d:28px;--rc:22px;
  --hc-bg:linear-gradient(170deg,rgba(255,255,255,.94) 0%,rgba(246,249,255,.84) 100%);--hc-line:#fff;--hc-blur:blur(14px) saturate(150%)}
.hc-ai .hc-glass{
  -webkit-mask-image:linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Cpath d='M0 0C33.3 0 30.7 28 64 28H0Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),radial-gradient(circle at 0 100%,#000 calc(var(--rc) - .5px),#0000 calc(var(--rc) + .5px));
          mask-image:linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Cpath d='M0 0C33.3 0 30.7 28 64 28H0Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),radial-gradient(circle at 0 100%,#000 calc(var(--rc) - .5px),#0000 calc(var(--rc) + .5px));
  -webkit-mask-size:calc(var(--A) + 1px) 100%,var(--C) var(--d),calc(var(--C) + 1px) calc(100% - var(--d)),calc(100% - var(--A) - var(--C) - var(--rc) + 1px) calc(100% - var(--d)),var(--rc) calc(100% - var(--d) - var(--rc) + 1px),var(--rc) var(--rc);
          mask-size:calc(var(--A) + 1px) 100%,var(--C) var(--d),calc(var(--C) + 1px) calc(100% - var(--d)),calc(100% - var(--A) - var(--C) - var(--rc) + 1px) calc(100% - var(--d)),var(--rc) calc(100% - var(--d) - var(--rc) + 1px),var(--rc) var(--rc);
  -webkit-mask-position:0 0,var(--A) 0,var(--A) var(--d),calc(var(--A) + var(--C)) var(--d),100% 100%,right 0 top var(--d);
          mask-position:0 0,var(--A) 0,var(--A) var(--d),calc(var(--A) + var(--C)) var(--d),100% 100%,right 0 top var(--d);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hc-ai .hc-glass::before{content:'';position:absolute;top:-1px;left:calc(var(--A) - 1px);width:calc(var(--C) + 1px);height:calc(var(--d) + 2px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='30'%3E%3Cpath d='M0 0C33.3 0 30.7 28 64 28H65' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 0 0/65px 30px no-repeat}
.hc-ai .hc-glass::after{content:'';position:absolute;top:calc(var(--d) - 1px);left:calc(var(--A) + var(--C) - 1px);right:-1px;height:calc(var(--rc) + 1px);
  border-top:1px solid var(--hc-line);border-right:1px solid var(--hc-line);border-top-right-radius:var(--rc)}
.hero-glass .metric.hc-ai::before{content:'';position:absolute;z-index:-2;left:6%;right:6%;bottom:0;height:36px;border-radius:0 0 var(--r) var(--r);
  box-shadow:0 30px 52px -16px rgba(30,58,95,.40),0 10px 22px -10px rgba(51,102,204,.24);transition:box-shadow .3s}
.hero-glass .metric.hc-ai:hover::before{box-shadow:0 34px 56px -16px rgba(30,58,95,.44),0 12px 24px -10px rgba(51,102,204,.26)}
/* Keyboard focus: the notched edge itself turns into a 2px accent ring (an outline would be cut by the mask) */
.hc-ai:has(.metric-link:focus-visible) .hc-glass{--hc-line:var(--c-accent);box-shadow:inset 0 0 0 1px var(--c-accent)}
.hc-ai:has(.metric-link:focus-visible) .hc-glass::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='30'%3E%3Cpath d='M0 0C33.3 0 30.7 28 64 28H65' fill='none' stroke='%233366CC' stroke-width='4'/%3E%3C/svg%3E")}
.hc-ai:has(.metric-link:focus-visible) .hc-glass::after{border-top-width:2px;border-right-width:2px}
.hc-orb{position:absolute;left:18px;top:-24px;width:68px;height:68px;pointer-events:none;
  filter:drop-shadow(0 12px 14px rgba(29,63,138,.30))}
.hc-ai .metric-label{max-width:250px}

.hero-glass .metric.hc .metric-cap{display:block;font-family:var(--f-sans,'Outfit',sans-serif);font-size:1.25rem;font-weight:500;letter-spacing:-.025em;
  line-height:1.2;margin:0 0 6px;color:var(--c-ink)}
.hero-glass .metric.hc .metric-label{display:block;font-size:.8125rem;line-height:1.5;color:var(--c-ink-3)}
/* Nameplate pill (side cards only): one rule, one position, measured from the card's top-left corner */
.hc-pill{position:absolute;top:var(--pt);left:var(--px);display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-eyebrow);white-space:nowrap;
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(160,186,226,.3),0 2px 6px -3px rgba(30,58,95,.18)}

/* Round arrow button: top-right, centred on the pill row on the side cards and just under the dip on the AI card */
.hero-glass .hc .metric-go{position:absolute;top:calc(var(--pt) - 6px);right:14px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--c-ink-3);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.62));border:1px solid #fff;
  box-shadow:0 6px 14px -6px rgba(30,58,95,.32),0 0 0 1px rgba(160,186,226,.22);transition:background .2s,color .2s,transform .2s}
.hero-glass .hc-ai .metric-go{top:calc(var(--d) + 10px)}
.hero-glass .hc .metric-go svg{width:13px;height:13px}
.hero-glass .hc:hover .metric-go{background:#fff;color:var(--c-accent);transform:translate(1px,-1px)}
.metric-go svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.metric-link{color:inherit;text-decoration:none}
.metric-link::after{content:'';position:absolute;inset:0;border-radius:var(--r)}
.hc-ai .metric-link::after{inset:var(--d) 0 0}
.metric-link:focus-visible{outline:none}
.metric-more{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;
  font-size:.8125rem;font-weight:500;color:var(--c-accent);text-decoration:underline;text-decoration-color:rgba(51,102,204,.35);
  text-underline-offset:3px;min-height:24px}
.metric-more:hover{text-decoration-color:currentColor}
.metric-more svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Websites: glass globe in a left column under the pill; title and line on the right, starting on the title row */
.hero-glass .metric.hc-web{--gw:104px;--gc:118px}
.hc-globe{position:absolute;left:calc(var(--px) - 8px);top:calc(var(--row) - 6px);width:var(--gw);height:var(--gw);pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(30,58,95,.16))}
.hc-globe svg{display:block;width:100%;height:100%;overflow:visible}
.hc-web .hc-body{display:flex;flex-direction:column;align-items:flex-start;padding-left:var(--gc);width:100%;flex:1}
.hc-web .metric-link{display:flex;flex-direction:column;align-items:flex-start}

/* Systems & Tools: "Up to" + a big glass numeral that fades down into its line.
   The numeral is real text. Body = translucent blue gradient clipped to the glyphs, with a diagonal specular
   glint and a soft top highlight; a fine white text-stroke gives the inner light edge; drop-shadows give the
   lifted, refractive edge; a mask fades it towards the supporting line. Solid blue where background-clip:text
   is unsupported. */
.hc-stat{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.hc-num{display:flex;align-items:baseline;gap:8px;font-family:var(--f-sans,'Outfit',sans-serif)}
.hc-upto{font-size:1.125rem;font-weight:400;letter-spacing:-.01em;line-height:1;color:var(--c-ink-3)}
.hc-n{display:block;font-size:4.5rem;font-weight:300;line-height:.86;letter-spacing:-.05em;color:#2C5BBE}
.hc-g{display:block;padding:0 .04em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* outer: lift + crisp glass rims (light under each stroke, a fine darker edge on top) */
  .hc-n{filter:drop-shadow(0 .75px 0 rgba(255,255,255,.95)) drop-shadow(0 -.5px 0 rgba(36,72,143,.3)) drop-shadow(0 10px 14px rgba(36,72,143,.2))}
  /* inner: translucent blue body with specular glint + top highlight + deeper refracted core, faded downwards */
  .hc-g{color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:
      linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 39%,rgba(255,255,255,.1) 45%,rgba(255,255,255,0) 52%),
      radial-gradient(70% 30% at 34% 4%,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 100%),
      radial-gradient(55% 55% at 80% 72%,rgba(28,64,160,.5) 0%,rgba(28,64,160,0) 100%),
      linear-gradient(180deg,#2A5CC8 0%,#386CD8 38%,#5F8FE6 72%,#9DBCF1 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.62) 72%,rgba(0,0,0,.26) 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.62) 72%,rgba(0,0,0,.26) 100%)}
}
.hc-sys .hc-stat .metric-label{margin-top:2px}
/* Bigger numeral, tucked behind its line (after the reference's "42%"). .hc-n keeps its original layout box via an
   invisible copy of "50%" at the original size (::before, hidden from assistive tech), so "Up to", the line, the
   link and the card height do not move by even a fraction of a pixel. The visible glass "50%" (.hc-g) is lifted
   out of the flow and scales with the card width (cqi) up to a cap; its baseline (Outfit: .8em below the top of a
   .86 line box) is placed below the original one so its lower part sits behind the line, where it fades out.
   The line paints above it and stays click-through to the card link, like before. */
.hc-sys{--hc-f0:4.5rem}
@supports (width:1cqi){
  .hc-sys{container-type:inline-size}
  .hc-sys .hc-n{position:relative;pointer-events:none}
  .hc-sys .hc-n::before{content:'50%';content:'50%' / '';display:block;padding:0 .04em;visibility:hidden}
  .hc-sys .hc-g{position:absolute;left:0;top:calc(.86 * var(--hc-f0) + 1.45rem - .8em);white-space:nowrap;
    font-size:clamp(var(--hc-f0),41cqi,7.75rem);letter-spacing:-.05em}
  .hc-sys .hc-g{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.12) 72%,rgba(0,0,0,0) 88%);
                        mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.12) 72%,rgba(0,0,0,0) 88%)}
  .hc-sys .hc-stat .metric-label{position:relative;z-index:1;pointer-events:none}
}

@media(max-width:1024px){
  .hero-glass .hero-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:8px}
  .hero-visual{max-width:300px}
  .hero-glass-row{margin-top:24px}
  .hero-bg .hb-wave{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 50%,#000 74%);mask-image:linear-gradient(90deg,transparent 0,transparent 50%,#000 74%)}
}
/* Tablet: three narrower cards; same pill and title positions, a smaller globe and numeral */
@media(min-width:701px) and (max-width:1100px){
  .hero-glass{padding-bottom:120px}  /* first services card starts below an 820x1180 fold, clear of the chat launcher */
  .hero-glass .hero-metrics{gap:14px}
  .hero-glass .metric.hc{--px:16px}
  .hero-glass .metric.hc-ai{--A:104px}
  .hc-orb{left:14px}
  .hero-glass .metric.hc-web{--gw:72px;--gc:80px}
  .hc-globe{left:calc(var(--px) - 6px);top:calc(var(--row) - 2px)}
  .hc-n{font-size:3.5rem}
  .hc-sys{--hc-f0:3.5rem}
  .hc-upto{font-size:1rem}
  .hc-num{gap:6px}
}
@media(max-width:760px){
  .hero-glass .hero-layout{grid-template-columns:1fr;gap:0}
  .hero-visual{max-width:260px}
}
@media(max-width:860px){
  .nav-inner{padding:0 6px 0 16px}
}
/* Mobile: the cards stack (equal heights), each keeping the desktop layout; the gap leaves room for the orb */
@media(max-width:700px){
  .hero-bg .hb-wave{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 40%,#000 54%);mask-image:linear-gradient(180deg,transparent 0,transparent 40%,#000 54%)}
  .hero-glass .hero-metrics{grid-template-columns:1fr;grid-auto-rows:1fr;gap:34px;padding-top:22px}
}
@media(max-width:640px){
  .hero-glass{padding-top:calc(72px + 24px);padding-bottom:40px}
  .hero-visual{max-width:220px;margin:8px auto 0}
  .hero-glass .metric.hc-ai{--hc-blur:none;--hc-bg:rgba(255,255,255,.95)}
  .nav-cta,.nav-cta.btn{padding:8px 14px}
}

/* ───────── Motion ─────────
   Idle float (time-based) and a gentle scroll-linked lift of the logo. The ribbon is static.
   CSS scroll-driven animations where supported; otherwise /assets/motion.js
   sets --p (0→1 over the first viewport of scroll) and the calc() rules below apply. */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@media(prefers-reduced-motion:no-preference){
  .l3-float{animation:l3-idle 7s ease-in-out infinite}
  @keyframes l3-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @supports (animation-timeline:scroll()){
    .l3{animation:l3-turn linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .l3-shadow{animation:l3-shadow linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
  @supports not (animation-timeline:scroll()){
    .js-motion .l3{transform:translateY(calc(-28px * var(--p))) rotate(calc(4deg * var(--p))) scale(calc(1 - .06 * var(--p)))}
    .js-motion .l3-shadow{transform:scaleX(calc(1 - .3 * var(--p)));opacity:calc(1 - .5 * var(--p))}
  }
  @keyframes l3-turn{
    from{transform:translateY(0) rotate(0) scale(1)}
    to{transform:translateY(-28px) rotate(4deg) scale(.94)}}
  @keyframes l3-shadow{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.7);opacity:.5}}
}
/* v4.7: PHONES (<=640px) only. The Ornsley IT mark no longer sits in its own block between the badges and the
   cards: it becomes a faint watermark behind the headline/intro (absolute, low opacity, no pointer events), so the
   cards follow the badges directly. Lighter on Mobile Safari: no aura/shadow layers and no scroll-linked turn;
   only the gentle float (a transform) plus a fade-out as you scroll. Tablet/desktop unchanged. */
@media(max-width:640px){
  .hero-glass .hero-layout{position:relative}
  .hero-glass .hero-copy{position:relative;z-index:1}
  .hero-glass .hero-visual{position:absolute;z-index:0;top:-6px;right:-58px;width:250px;max-width:none;margin:0;pointer-events:none}
  .hero-glass .l3-pos{opacity:.18}
  .hero-glass .l3-aura,.hero-glass .l3-shadow{display:none}
  .hero-glass .l3{animation:none!important;transform:none!important}
  @media(prefers-reduced-motion:no-preference){
    @supports (animation-timeline:scroll()){
      .hero-glass .l3-pos{animation:l3-fade linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    }
    @supports not (animation-timeline:scroll()){
      .js-motion .hero-glass .l3-pos{opacity:calc(.18 * (1 - var(--p)))}
    }
  }
  @keyframes l3-fade{from{opacity:.18}to{opacity:0}}
}
@media(prefers-reduced-motion:reduce){
  .l3-float,.l3,.l3-shadow{animation:none!important}
  .hero-glass .metric,.hero-glass .metric:hover{transition:none;transform:none}
  .nav-contact-btn .ncb-chev{transition:none}
}

/* ═════════════════════════════════════════════════════════════
   HOMEPAGE ABOUT (#founder / #about): one glass panel, no photo, full container width (same edges as the other
   sections' content). Eyebrow + heading on top; the copy below is a single column at every width, with each
   paragraph running across the full inner width of the card (no CSS columns, no measure cap). Lead paragraph slightly larger.
   ═════════════════════════════════════════════════════════════ */
.about-panel{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.2vw,28px);align-items:start;
  padding:clamp(32px,3.4vw,48px) clamp(26px,3.4vw,48px);border-radius:28px;background:var(--glass-side-surface);border:1px solid var(--glass-side-border);
  -webkit-backdrop-filter:var(--glass-side-blur);backdrop-filter:var(--glass-side-blur);box-shadow:var(--glass-side-highlight),var(--glass-side-shadow)}
.about-head .eyebrow{margin-bottom:var(--sp-3)}
.about-h{font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:-.045em;line-height:1;margin:0}
.about-body{max-width:none;columns:auto}
.about-body p{font-size:.9375rem;font-weight:300;line-height:1.8;color:var(--c-ink-3);max-width:none;margin:0 0 var(--sp-4);text-wrap:pretty}
.about-body p:last-child{margin-bottom:0}
.about-body .about-lead{font-size:clamp(1.0625rem,1.5vw,1.1875rem);font-weight:400;line-height:1.65;color:var(--c-ink);letter-spacing:-.005em}
@media(max-width:640px){
  .about-panel{padding:28px 22px;border-radius:24px}
}
/* v4.4: About sits closer to its neighbours. The section drops its own vertical padding, so the gap above/below the
   card is just the neighbouring sections' padding (about half of the previous gap at every breakpoint). */
.section.about-section{padding-top:0;padding-bottom:0}
/* v4.6: founder photo in the homepage About card. The photo files are pre-cropped inside the original's baked-in
   ring, with anything outside the circle filled pale, and clipped to a circle here. A fine pale glass ring (padding +
   translucent white + hairline highlight) frames it to match the liquid-glass cards. Tablet/desktop: floated right
   beside the eyebrow/heading, with the copy wrapping round the circle (shape-outside), so the card grows only a
   little. Phones: stacked above the text. */
#founder .about-photo{margin:0;width:120px;aspect-ratio:1;box-sizing:border-box;padding:5px;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.3) 55%,rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.45),0 14px 34px -14px rgba(22,38,78,.32),0 2px 6px rgba(22,38,78,.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
#founder .about-photo picture{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
#founder .about-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
@media(min-width:641px){
  #founder .about-panel{display:flow-root}
  #founder .about-photo{float:right;width:168px;margin:0 0 8px clamp(24px,3vw,44px);shape-outside:circle(50%) border-box;shape-margin:20px}
  #founder .about-body{margin-top:clamp(20px,2.2vw,28px)}
}
@media(min-width:1101px){
  #founder .about-photo{width:204px}
}
/* v4.12: phones. Eyebrow + heading on the left with the photo circle on the right in one row, then the copy (the
   pass-1 stacked layout ran 186px past one screen). Same DOM (grid areas only). The photo box has a fixed, equal width
   and height (not just aspect-ratio) and cannot be stretched by the grid, so iOS Safari keeps it a circle. Spacing is a
   little roomier than v4.11; measured at 390x844 (landed via #about) the card runs 86 -> 787.5px, inside 788. */
@media(max-width:640px){
  #founder .about-panel{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head photo" "body body";
    column-gap:16px;row-gap:12px;align-items:center;padding:19px 16px}
  #founder .about-head{grid-area:head}
  #founder .about-body{grid-area:body}
  #founder .about-body p{line-height:1.52;margin-bottom:9px}
  #founder .about-body p:last-child{margin-bottom:0}
  #founder .about-body .about-lead{line-height:1.45}
  #founder .about-photo{grid-area:photo;justify-self:end;align-self:center;flex-shrink:0;
    width:112px;height:112px;min-width:112px;max-width:112px;min-height:112px;max-height:112px;aspect-ratio:1;overflow:hidden}
  #founder .about-photo picture{width:100%;height:100%;aspect-ratio:1}
  #founder .about-photo img{width:100%;height:100%;object-fit:cover}
}

/* v4.5: /ai-assistants/ PHONE RECEPTION (#phone). Full content width like the About card, shallower (less inner
   padding), text left + Register interest button right on one row; stacked on phones. The section drops its own
   vertical padding so the gap above/below is just the neighbouring sections' padding (half the previous gap). */
#phone.section{padding-top:0;padding-bottom:0}
/* With no padding, the section-warm2 tint would be squeezed into a hard-edged strip behind the card, so it is dropped here */
#phone.section-warm2{background:none}
#phone .founding-panel{max-width:none;margin:0;padding:clamp(24px,2.6vw,34px) clamp(24px,3.2vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,3vw,48px);align-items:center}
#phone .founding-panel > *{grid-column:1}
#phone .founding-panel .t-body{margin-bottom:0}
#phone .founding-actions{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:center}
@media(max-width:640px){
  #phone .founding-panel{display:block;padding:24px 22px}
  #phone .founding-actions{margin-top:var(--sp-5)}
}

/* v4.5: /toolkit/ pricing (#pricing). Where the two cards sit side by side (861px+), the cards share one row grid
   (CSS subgrid), so each part lines up across both cards: the feature lists take the height of the longer one, the
   buy buttons sit on the same line and the small print (.price-foot) starts on the same line. Stacked cards (860px and below)
   and browsers without subgrid keep the existing flex column. */
@supports (grid-template-rows:subgrid){
  @media(min-width:861px){
    #pricing .price-grid{grid-template-rows:repeat(7,auto);row-gap:0}
    #pricing .price-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
    #pricing .price-card > .price-name{grid-row:1}
    #pricing .price-card > .price-tag{grid-row:2;justify-self:start;align-self:start}
    #pricing .price-card > .price-amount{grid-row:3}
    #pricing .price-card > .price-sub{grid-row:4}
    #pricing .price-card > .price-list{grid-row:5}
    #pricing .price-card > .btn{grid-row:6;align-self:start}
    #pricing .price-card > .price-foot{grid-row:7}
  }
}

/* ═════════════════════════════════════════════════════════════
   SERVICE PAGES: shared glass treatments (replaces remaining legacy styling)
   ═════════════════════════════════════════════════════════════ */
/* Bullet lists with inline links: each item is one continuous text block (no flex columns) */
.pillar-example{display:block;position:relative;padding-left:20px}
.pillar-example::before{position:absolute;left:0;top:0;margin-top:0}
.pillar-example a{color:var(--c-accent)!important;text-underline-offset:2px}

/* Recommended package / featured price card: light glass with a blue outline and subtle tint */
.price-card.card-navy{background:linear-gradient(170deg,rgba(255,255,255,.92) 0%,rgba(236,243,253,.8) 100%);
  border:1.5px solid rgba(51,102,204,.55);
  box-shadow:0 1px 0 #fff inset,0 0 0 4px rgba(51,102,204,.08),0 30px 60px -26px rgba(30,58,95,.38)}
.price-card.card-navy .price-name,.price-card.card-navy .price-sub,.price-card.card-navy .pk-list-label{color:var(--c-navy-2)}
.price-card.card-navy .serif{color:var(--c-ink)}
.price-card.card-navy .price-list li,.price-card.card-navy .pk-for{color:var(--c-ink-3)}
.price-card.card-navy .price-list li::before{color:var(--c-accent)}
.price-card.card-navy .price-fine,.price-card.card-navy .price-vat,.price-card.card-navy .pk-from{color:var(--c-muted)}
.price-card.card-navy .price-fine a{color:var(--c-accent)}
.price-card.card-navy .price-tag{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.price-card.card-navy .pk-time{background:rgba(255,255,255,.75);border-color:rgba(51,102,204,.2);color:var(--c-ink-3)}
.price-card.card-navy .pk-time svg{stroke:var(--c-accent)}
.price-card.card-navy .btn-light{color:#fff;border:0;
  background:linear-gradient(180deg,#4677DA 0%,var(--c-accent) 55%,#2D5CBE 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -10px rgba(51,102,204,.7)}
.price-card.card-navy .btn-light:hover{background:linear-gradient(180deg,#3F6FD2 0%,var(--c-accent-2) 100%);color:#fff}
.price-card{border-radius:24px}
.price-list li::before{color:var(--c-accent)}
.price-tag,.ex-tag,.solution-tag{background:rgba(227,236,251,.85);border-color:#fff;color:var(--c-navy-2);
  box-shadow:0 0 0 1px rgba(51,102,204,.12)}
.pk-time{background:rgba(255,255,255,.6);border-color:var(--g-line);border-radius:12px;box-shadow:0 0 0 1px var(--g-edge)}

/* /websites/ "what you get" flow: glass pills instead of the old dark end chip */
.flow{gap:10px}
.flow-step{background:rgba(255,255,255,.66);border:1px solid var(--g-line);color:var(--c-navy-2);
  box-shadow:0 0 0 1px var(--g-edge),0 4px 12px -6px rgba(30,58,95,.2);
  -webkit-backdrop-filter:var(--g-blur-sm);backdrop-filter:var(--g-blur-sm)}
.flow-step.end{background:var(--c-accent-soft);border-color:#fff;color:var(--c-accent-2);
  box-shadow:0 0 0 1px rgba(51,102,204,.35),0 4px 12px -6px rgba(51,102,204,.35)}
.flow-arrow{color:var(--c-accent)}

/* Care plan + AI add-on panels */
.care{border-radius:28px}
.care-opt{background:rgba(255,255,255,.6);border:1px solid var(--g-line);border-radius:18px;box-shadow:0 0 0 1px var(--g-edge)}

/* Browser-frame screenshots */
.shot{border:1px solid var(--g-line);border-radius:16px;box-shadow:0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.shot-bar{background:rgba(243,247,253,.92);border-bottom-color:var(--c-border)}
.shot-bar span{color:var(--c-muted)}

/* Example cards (cloud/ and networks/ example setups): same proportions, badge spacing, titles and action placement */
.ex-grid{align-items:stretch;row-gap:var(--sp-7)}
.ex{display:flex;flex-direction:column}
.ex-frame{padding-bottom:28px}
.ex .shot picture,.ex .shot img{aspect-ratio:1200/750;object-fit:cover;object-position:top}
.ex-meta{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.ex-meta>.ex-tag,.ex-tags{min-height:24px;margin-bottom:var(--sp-3)}
.ex h3{font-family:var(--f-serif);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.ex-open{margin-top:auto;padding-top:0}
.ex-meta>p:last-of-type{margin-bottom:var(--sp-4)}
.ex-ai,.ex-ai--volta,.ex-ai--mira,.ex-ai--wren{--ai:var(--c-accent)}
.ex-ai{background:rgba(255,255,255,.7);border-color:rgba(51,102,204,.35)}
.ex-try,.ex-try--volta,.ex-try--mira,.ex-try--wren{--ai:var(--c-accent);font-family:var(--f-sans,'Outfit',sans-serif);font-style:normal;
  font-size:.9375rem!important;color:var(--c-ink-3)}
.ex-sys a{color:var(--c-accent);text-decoration-color:rgba(51,102,204,.35)}
.ex-sys a:hover,.ex-sys a:focus-visible{text-decoration-color:var(--c-accent)}
.ex-wide{background:var(--g-card);border:1px solid var(--g-line);border-radius:28px;box-shadow:var(--g-shadow),0 0 0 1px var(--g-edge)}
.ex-wide .ex-meta{flex:none}
.ex-wide .ex-open{margin-top:var(--sp-2)}
.ex-disclaimer{background:rgba(255,255,255,.6);border:1px solid var(--g-line);border-radius:18px;box-shadow:0 0 0 1px var(--g-edge)}
.ws-phone{border-color:#1E2A40;background:#1E2A40}
.ws-sys{border-radius:24px}
.enq-list li::before{color:#AFC6E6}

/* Service example cards (helpdesk/): banner, badge, title, description, try-it, action, all aligned */
.ai-ex-shot{margin:calc(10px - var(--sp-6)) calc(10px - var(--sp-6)) var(--sp-5);border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#E8EFFA;
  box-shadow:0 0 0 1px var(--g-edge)}
.ai-ex-shot picture,.ai-ex-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ai-ex .solution-header{align-items:center;margin-bottom:var(--sp-4)}
.ai-ex .solution-tag{margin-top:0}
.ai-ex .solution-title{font-size:1.25rem;font-weight:500;letter-spacing:-.025em;min-height:1.3em}
.ai-ex .ai-ex-desc{flex:1 0 auto;margin-bottom:var(--sp-4)}
.ai-ex .solution-ideal{margin-bottom:var(--sp-5);background:rgba(232,240,251,.75);border-radius:14px}
.ai-ex .solution-btn{margin-top:0}
.pillar-card h3{font-weight:500;letter-spacing:-.03em}
.nav-contact-btn{box-shadow:0 0 0 1px var(--g-edge)}

/* v4.11: mobile menu (#mnav) "Services" accordion. The button is a normal .mnav-link row; the panel animates
   height (grid rows 0fr -> 1fr) and opacity, and is visibility:hidden once collapsed so its links can't be focused.
   .is-settled (set by motion.js after opening) lets focus outlines show past the clipping box. */
.mnav-acc-btn{width:100%;margin:0;padding:0;border:0;border-bottom:1px solid var(--c-border);border-radius:0;background:none;
  -webkit-appearance:none;appearance:none;font-family:inherit;font-weight:inherit;line-height:inherit;font-size:1rem;
  color:var(--c-ink);letter-spacing:-.01em;text-align:left;justify-content:space-between;gap:var(--sp-3);cursor:pointer}
.mnav-acc-btn svg{width:12px;height:12px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}
.mnav-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav-acc-btn:focus-visible{outline:2px solid var(--c-navy-2);outline-offset:2px}
.mnav-acc{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .28s ease,opacity .28s ease,visibility 0s linear .28s}
.mnav-acc-btn[aria-expanded="true"]+.mnav-acc{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .28s ease,opacity .28s ease,visibility 0s}
.mnav-acc-inner{min-height:0;overflow:hidden}
.mnav-acc.is-settled .mnav-acc-inner{overflow:visible}
@media(prefers-reduced-motion:reduce){
  .mnav-acc,.mnav-acc-btn[aria-expanded]+.mnav-acc,.mnav-acc-btn svg{transition:none}
}
/* v4.11: contact form fields are 16px on phones/touch so iOS Safari doesn't auto-zoom on focus (desktop keeps .9rem) */
@media(max-width:640px),(hover:none) and (pointer:coarse){
  .f-group input,.f-group select,.f-group textarea{font-size:16px}
}