/* Feerasta house design system, shared across all division landing pages.
   Tokens: navy var(--navy), gold var(--gold), ivory var(--ivory).
   IBM Plex Sans for text and headings, loaded by type-refinement.css. */
/* Self-hosted Inter fallback (OFL), with variable weights 400-600 per subset.
   Local fonts avoid third-party font requests. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-normal-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-normal-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-normal-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/inter-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* Midnight Brass (M, 30 Oct 2026): Feerasta's original navy and #d8b375 brass, rebuilt with
     cleaner navies, a steel-blue second voice, and brass kept for rules, numbers and the primary
     button in dark mode. Dark is the base block; [data-theme="light"] swaps the values below.
     Token names are stable across themes. Contrast pairs are in DESIGN.md section 3. */
  --navy-deep:#0e1524;   /* ground */
  --navy:#121a2b;        /* alternate band */
  --navy-soft:#161f33;   /* card / surface */
  --panel:#121a2b;       /* quiet panel */
  --raised:#1b2640;      /* raised: popovers, hovered cards */
  --ivory:#e9e3d7; --cream:#e9e3d7;   /* ink */
  --muted:#b4b9c4;
  --line:rgba(233,227,215,.12); --edge:rgba(233,227,215,.14); --edge-strong:rgba(233,227,215,.26);
  --fill:#d8b375; --fill-hover:#e2c38c; --fill-edge:#d8b375; --fill-ink:#0e1524;   /* primary button */
  --accent:#d8b375; --accent-soft:#d8b375; --gold:#d8b375; --gold-soft:#d8b375;   /* text accent */
  --brass:#b68b53;       /* decorative rules, hairlines, marks */
  --brass-text:#d8b375;  /* brass that must read as text */
  --steel:#8fa9c8;       /* second voice: progress, charts, secondary emphasis */
  --secondary:var(--steel); --sage:#8acb9a; --lilac:var(--steel);
  --good:#8acb9a; --warn:#e3b867; --crit:#ec9286;
  --focus:#e2c38c;
  color-scheme:dark;
  --maxw:1140px;
  /* Chrome type scale (elegance pass, 30 Oct 2026): one size, one weight and one tracking for every
     piece of header text, so the links, the phone number, the language picker and the button read as
     one row. Small text gets slight positive tracking; figures are tabular so the number sits evenly. */
  --chrome-size:.9375rem; --chrome-weight:500; --chrome-track:.012em;
  --chrome-note-size:.8125rem; --chrome-note-track:.018em;
  --chrome-icon:13px; --chrome-icon-stroke:1.5;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}  /* offset so anchor targets clear the 70px sticky nav */
body{
  font-family:var(--font-body, Inter, sans-serif);color:var(--ivory);
  background:var(--navy-deep);-webkit-font-smoothing:antialiased;line-height:1.6;
}
.serif{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-weight:500;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
.muted{color:var(--muted)}

/* ---- top bar / nav ---- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--navy-deep) 82%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px;font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:20px;font-weight:600;letter-spacing:.04em}
.brand .mark{width:30px;height:30px;flex:0 0 auto}
.nav-links{display:flex;gap:34px;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ivory)}
.nav-links a{color:color-mix(in srgb, var(--ivory) 78%, transparent);transition:color .2s}
.nav-links a:hover{color:var(--gold-soft)}
.nav-cta{border:1px solid var(--gold);color:var(--gold-soft);padding:11px 20px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
@media(max-width:780px){.nav-links{display:none}}

/* ---- mark (the chip + gem), inline svg helper sizes ---- */
.markwrap{display:inline-flex;color:var(--gold)}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 50% -8%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--navy), var(--navy-deep));}
/* Hero: asymmetric, not centred.
   Everything centred is the shape of a template. A left-aligned column with a hold on the
   grid, and something occupying the space beside it, is the shape of a designed page. It
   also lets the headline run much larger without becoming a wall of centred text. */
.hero .wrap{padding:96px 32px 84px;text-align:center}
/* The split hero belongs to the page that has .hero-copy and .hero-art in it. Scoping it to
   `.hero .wrap` put a two-column grid on EVERY page's hero, where the eyebrow, headline, sub
   and buttons are direct children of .wrap: they tiled into the columns, so the headline sat
   in the right column ABOVE the eyebrow in the left. Broken on 36 pages, shipped by me.
   A shared class needs a shared shape; this one does not have one. */
/* Centred, because everything else on this page is. Six of the eight sections below the
   hero centre their headings, so a left-aligned hero read as the one element that had not
   been finished rather than as a deliberate composition. Consistency down the page beats
   an asymmetry that only works in isolation.
   The professionalism was never in the alignment: it was the sharp geometry, the flat
   button, the type scale and the single action. Those all stay. */
.hero.hero-split .wrap{position:relative;padding:96px 32px 84px;text-align:center}
.hero-split .hero-copy{position:relative;z-index:1;max-width:760px;margin:0 auto}
.hero h1{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-weight:500;font-size:clamp(40px,6vw,72px);line-height:1.05;letter-spacing:-.025em;margin:22px 0 0}
.hero-split h1{font-size:clamp(40px,6.4vw,80px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 0}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .sub{max-width:620px;margin:24px auto 0;font-size:clamp(16px,2vw,20px);color:color-mix(in srgb, var(--ivory) 72%, transparent)}
.hero-split .sub{max-width:600px;margin:22px auto 0;font-size:clamp(16px,1.6vw,19px);line-height:1.6}
.hero .cta-row{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-split .cta-row{margin-top:34px;gap:12px;justify-content:center}
.hero-split .eyebrow{justify-content:center}

/* Inline capture. A visitor who is not ready to book a call will still give an email, and
   asking for one at the top is worth more than a second button nobody presses. */
.hero-capture{display:flex;gap:0;margin:30px auto 0;max-width:520px;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:color-mix(in srgb,var(--ivory) 4%,transparent)}
.hero-capture input{flex:1;min-width:0;height:54px;padding:0 18px;background:transparent;border:0;color:var(--ivory);font:inherit;font-size:15px}
.hero-capture input::placeholder{color:color-mix(in srgb,var(--ivory) 45%,transparent)}
.hero-capture input:focus{outline:none;background:color-mix(in srgb,var(--ivory) 6%,transparent)}
.hero-capture button{height:54px;padding:0 24px;border:0;background:var(--fill);color:var(--fill-ink);font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.hero-capture button:hover{background:var(--fill-hover)}
.hero-note{margin-top:12px;text-align:center;font-size:12.5px;color:color-mix(in srgb,var(--ivory) 55%,transparent)}

@media(max-width:900px){
  /* minmax(0,1fr), not 1fr. A plain 1fr column cannot shrink below its content's
     min-content width, and the capture button's nowrap put a 440px floor under it: the
     grid column stayed 440px wide inside a 390px phone and the headline, the copy and the
     button all ran off the right edge. */
  .hero-split .wrap{padding-top:64px}
  .hero-split .hero-copy{max-width:100%}
  /* Stack the capture so the button keeps its full label instead of being clipped. */
  .hero-capture{flex-direction:column;max-width:100%;background:transparent;border:0;gap:10px}
  .hero-capture input{border:1px solid var(--line);border-radius:5px;background:color-mix(in srgb,var(--ivory) 4%,transparent)}
  .hero-capture button{width:100%;border-radius:5px}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 30px;border-radius:5px;font-size:15px;font-weight:600;transition:transform .15s,filter .2s}
.btn-gold{background:var(--fill);color:var(--fill-ink);border:1px solid var(--fill-edge);box-shadow:none}
.btn-gold:hover{background:var(--fill-hover);border-color:var(--accent);transform:none}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost{border:1px solid var(--line);color:var(--ivory)}
.btn-ghost:hover{border-color:var(--gold)}

/* ---- sections ---- */
section{padding:84px 0}
.section-head{text-align:center;max-width:700px;margin:0 auto 52px}
.section-head .eyebrow{display:block;margin-bottom:6px}
.section-head h2{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:clamp(32px,4.6vw,48px);font-weight:500;line-height:1.1;letter-spacing:-.015em;margin-top:10px}
.section-head p{margin-top:16px;color:color-mix(in srgb, var(--ivory) 72%, transparent);font-size:18px;line-height:1.6}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;max-width:var(--maxw);margin:0 auto}

/* ---- cards ---- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,color-mix(in srgb, var(--ivory) 4%, transparent),color-mix(in srgb, var(--ivory) 1%, transparent));border:1px solid var(--line);border-radius:8px;padding:28px;transition:border-color .25s,transform .25s}
.card:hover{border-color:color-mix(in srgb, var(--gold) 40%, transparent);transform:translateY(-3px)}
.card .ic{width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);background:color-mix(in srgb, var(--gold) 10%, transparent);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .ic svg{width:22px;height:22px;display:block}
.card h3{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:22px;font-weight:500;margin-bottom:8px}
.card p{color:color-mix(in srgb, var(--ivory) 66%, transparent);font-size:15px}
.card .cardlink{display:inline-block;margin-top:14px;color:var(--gold-soft);font-size:13.5px;font-weight:500;letter-spacing:.01em}
a.card:hover .cardlink{color:var(--gold)}

/* ---- price ---- */
.price{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:40px;font-weight:500}
.price span{font-size:15px;color:var(--muted);font-family:var(--font-body, Inter, sans-serif)}
/* The regional price figure is a span too; without this it inherits the 15px unit style above and the price shows smaller than its own "/mo". */
.price > .geo-price{font:inherit;color:inherit;letter-spacing:inherit}
/* .price is a card on some pages and a bare figure on most. A figure (no block children) must not get the light-mode card surface. */
:root[data-theme="light"] .price:not(:has(h2,h3,h4,p,ul,div)){background:transparent !important;border:0 !important;box-shadow:none !important}

/* ---- panel / CTA band ---- */
.panel{position:relative;overflow:hidden;border:1px solid color-mix(in srgb, var(--gold) 25%, transparent);border-radius:10px;background:linear-gradient(135deg,var(--navy-soft),var(--navy-deep));padding:56px 40px;text-align:center}
.panel h2{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:clamp(26px,3.5vw,38px);font-weight:500}
.panel .gold-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);background:var(--navy-deep)}
footer .wrap{padding:40px 32px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}
footer .gold{color:var(--gold-soft)}

/* ---- rich footer (site-wide) ---- */
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding:56px 32px 12px;max-width:var(--maxw);margin:0 auto}
.footer-cols h4{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-cols a,.footer-cols p{display:block;color:color-mix(in srgb, var(--ivory) 62%, transparent);font-size:14px;margin-bottom:9px}
.footer-cols a:hover{color:var(--gold-soft)}
.footer-cols .brandcol .serif{font-size:20px;color:var(--ivory);margin-bottom:12px}
@media(max-width:880px){.footer-cols{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.footer-cols{grid-template-columns:1fr}}

/* eyebrow tag chips */
.chips{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;margin-top:30px}
.hero .chips{justify-content:center}
.chip{border:1px solid var(--line);background:color-mix(in srgb, var(--ivory) 3%, transparent);border-radius:4px;padding:9px 16px;font-size:13px;color:color-mix(in srgb, var(--ivory) 78%, transparent);display:flex;align-items:center;gap:8px}
.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ---- mobile: prevent large display headings from clipping at the viewport edge ---- */
@media(max-width:480px){
  .wrap{padding-left:20px;padding-right:20px}
  .hero .wrap{padding:80px 20px 68px}
  .hero h1{font-size:clamp(30px,8.4vw,40px)}
  .section-head h2,.panel h2{font-size:clamp(26px,7vw,34px)}
  .hero h1,.section-head h2,.panel h2,.card h3{overflow-wrap:anywhere}
}

/* ---- nav: Solutions dropdown + mobile menu ---- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-t{background:none;border:0;color:color-mix(in srgb, var(--ivory) 78%, transparent);font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0}
.nav-drop-t .caret{display:none}
.nav-drop:hover .nav-drop-t,.nav-drop:focus-within .nav-drop-t{color:var(--gold-soft)}
.nav-drop:hover .nav-drop-t .caret{transform:rotate(180deg)}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:320px;padding:10px;background:color-mix(in srgb, var(--navy) 98%, transparent);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;display:grid;grid-template-columns:1fr 1fr;gap:2px;box-shadow:0 28px 70px -24px rgba(0,0,0,.7);z-index:60}
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(14px)}
.nav-menu a{display:flex;flex-direction:column;gap:1px;padding:10px 13px;border-radius:10px}
.nav-menu a:hover{background:color-mix(in srgb, var(--gold) 10%, transparent)}
.nav-menu a b{color:var(--ivory);font-weight:500;font-size:13.5px}
.nav-menu a span{color:var(--muted);font-size:11.5px}
/* Solutions mega-menu, boutique treatment with icons (desktop only; mobile keeps the stacked list) */
.nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) .ni{display:none}   /* icon hidden by default (mobile); shown on desktop below */
@media(min-width:881px){
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped){min-width:560px;padding:16px;gap:2px;column-gap:14px}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped)::before{content:"Solutions";grid-column:1/-1;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:2px 16px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) a{display:grid;grid-template-columns:36px 1fr;column-gap:13px;align-items:center;padding:10px 14px;border-radius:12px;transition:background .15s}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) a:hover{background:color-mix(in srgb, var(--gold) 10%, transparent)}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) .ni{display:grid;place-items:center;grid-row:1/3;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb, var(--ivory) 3%, transparent);color:var(--gold-soft)}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) .ni svg{width:18px;height:18px}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) a:hover .ni{border-color:color-mix(in srgb, var(--gold) 45%, transparent);background:color-mix(in srgb, var(--gold) 10%, transparent)}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) a b{grid-column:2;font-weight:600;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
  .nav-menu:not(.nav-langmenu):not(.nav-simple):not(.nav-grouped) a .nm{grid-column:2;font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-weight:500;font-size:16px;color:var(--ivory)}
}
/* simple dropdown lists (Industries, Company) */
.nav-menu.nav-simple{grid-template-columns:1fr;min-width:210px;padding:8px;gap:1px}
.nav-menu.nav-simple a{display:block;padding:9px 13px;border-radius:9px;font-size:14px;color:color-mix(in srgb, var(--ivory) 82%, transparent)}
.nav-menu.nav-simple a:hover{background:color-mix(in srgb, var(--gold) 10%, transparent);color:var(--ivory)}
/* grouped Industries mega-menu (categories + industries) */
.nav-menu.nav-grouped{grid-template-columns:repeat(4,minmax(162px,1fr));min-width:710px;padding:16px;column-gap:10px;left:50%;transform:translateX(-50%) translateY(8px)}
.nav-drop:hover .nav-menu.nav-grouped,.nav-drop:focus-within .nav-menu.nav-grouped{transform:translateX(-50%) translateY(14px)}
.nav-menu.nav-grouped .ng-col{display:flex;flex-direction:column}
.nav-menu.nav-grouped .ng-h{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--muted);padding:2px 12px 7px;border-bottom:1px solid var(--line);margin-bottom:4px}
.nav-menu.nav-grouped a{display:block;padding:7px 12px;border-radius:9px;font-size:13.5px;color:color-mix(in srgb, var(--ivory) 85%, transparent)}
.nav-menu.nav-grouped a:hover{background:color-mix(in srgb, var(--gold) 10%, transparent);color:var(--ivory)}
.nav-menu.nav-grouped .ng-all{grid-column:1/-1;margin-top:8px;padding-top:11px;border-top:1px solid var(--line);color:var(--gold-soft);font-weight:600;font-size:13px}
@media(max-width:880px){.nav-menu.nav-grouped{grid-template-columns:1fr 1fr;min-width:0;left:auto;transform:none}}
.nav-lang{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;letter-spacing:.08em;color:var(--gold-soft);font-weight:600}
.nav-lang:hover{border-color:var(--gold);color:var(--gold-soft)}
/* language selector: a quiet globe icon grouped next to the CTA, not a floating pill */
/* The nav links used to be absolutely centred, which takes them out of flow so they cannot
   see their siblings. Any change that widened them (uppercase, an extra item, a longer
   translation) silently slid them underneath the language selector and the CTA. That has
   now happened twice.
   Auto margins centre them in whatever space is actually left instead, so the browser
   guarantees they can never overlap. Optical centring is worth less than a nav that cannot
   break. */
.nav-links{position:static;left:auto;transform:none;margin:0 auto}
.nav-langsel{margin-left:auto}   /* push language + CTA to the far right */
.nav-langsel .nav-drop-t{border:0;background:none;padding:6px 8px;font-size:12.5px;letter-spacing:.02em;color:color-mix(in srgb, var(--ivory) 72%, transparent);gap:7px;align-items:center}   /* globe + current language, per language-selector UX convention */
.nav-langsel .nav-drop-t::before{content:"";width:16px;height:16px;flex:0 0 auto;background-color:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.5 4 5.6 4 9s-1.4 6.5-4 9c-2.6-2.5-4-5.6-4-9s1.4-6.5 4-9z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.5 4 5.6 4 9s-1.4 6.5-4 9c-2.6-2.5-4-5.6-4-9s1.4-6.5 4-9z'/%3E%3C/svg%3E") no-repeat center/contain}
.nav-langsel:hover .nav-drop-t{color:var(--gold-soft)}
.nav-langsel .nav-drop-t .caret{display:inline-block;font-size:11px;line-height:1;opacity:.7;transform:translateY(1px)}
.nav-langsel .nav-menu{left:auto;right:0;transform:translateY(8px);grid-template-columns:1fr 1fr;min-width:240px}
.nav-langsel:hover .nav-menu,.nav-langsel:focus-within .nav-menu{transform:translateY(14px)}
.nav-langmenu a{flex-direction:row;align-items:center;font-size:13.5px;color:var(--ivory)}
.nav-langmenu a[aria-current="true"]{color:var(--gold-soft);background:color-mix(in srgb, var(--gold) 10%, transparent)}
@media(max-width:880px){.nav-langsel .nav-menu{grid-template-columns:1fr}}
.nav-cb{position:absolute;opacity:0;pointer-events:none}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;margin-left:8px}
.nav-burger span{width:24px;height:2px;background:var(--ivory);border-radius:2px;transition:.25s}
.nav-cb:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-cb:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-cb:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:880px){.nav-menu{grid-template-columns:1fr}}
@media(max-width:780px){
  /* mobile bar = brand (left) + burger (right); links, CTA and language all
     collapse into the hamburger panel as full-width stacked rows */
  .nav .wrap{flex-wrap:wrap;align-items:center;height:auto;min-height:70px;padding-top:0;padding-bottom:0}
  .nav .wrap:has(.nav-cb:checked){background:rgba(14,21,36,.99);box-shadow:0 26px 64px -22px rgba(0,0,0,.7);padding-bottom:10px}
  .brand{margin-right:auto;margin-left:0}
  .nav-burger{display:flex;order:1;margin-left:0}
  /* the three collapsible blocks: hidden until the burger is checked */
  .nav-links{display:none;order:2;width:100%;flex-direction:column;gap:0;padding:8px 0 4px;margin:0;position:static;left:auto;transform:none}
  .nav-cta{display:none;order:3;width:100%;text-align:center;padding:13px 18px;font-size:14px;margin:8px 0 4px}
  .nav-langsel{order:4;width:100%;margin:0}
  .nav-cb ~ .nav-langsel{display:none}   /* outrank the .nav-drop{display:block} rule below */
  .nav-cb:checked ~ .nav-links{display:flex}
  .nav-cb:checked ~ .nav-cta{display:block}
  .nav-cb:checked ~ .nav-langsel{display:block}
  /* link rows + Solutions / Language accordions inside the panel */
  .nav-links > a{padding:12px 4px;border-top:1px solid var(--line);font-size:15px}
  .nav-drop{display:block;width:100%;border-top:1px solid var(--line)}
  .nav-drop-t{padding:12px 4px;font-size:15px;width:100%;justify-content:flex-start}
  .nav-langsel .nav-drop-t{color:color-mix(in srgb, var(--ivory) 78%, transparent);font-size:15px;padding:12px 4px;gap:8px}   /* show globe + English label inside the mobile menu */
  .nav-langsel .nav-drop-t::before{stroke:var(--gold)}
  .nav-menu{position:static;opacity:1;visibility:visible;transform:none!important;display:block;border:0;box-shadow:none;background:transparent;backdrop-filter:none;padding:0 0 6px 12px;min-width:0;z-index:auto}
  .nav-langsel .nav-menu{display:grid;grid-template-columns:1fr 1fr;left:auto;right:auto;padding:2px 0 6px 28px}
  .nav-drop::after{display:none}
  .nav-drop:hover .nav-drop-t .caret{transform:none}
  .nav-menu a{padding:8px 6px}
  .nav-menu a span{font-size:12px}
}


/* ─── Light mode (opt-in via toggle; brand default stays dark) ───
   Rebuilt 2026-08-05 on a WARM-NEUTRAL system.
   The previous version was warm paper carrying pure-white cards, navy ink and
   heavy gold-tinted shadows. Three things were wrong with that. Pure white next
   to warm paper reads as two different materials, so the page looked assembled
   rather than made. Navy ink on cream is a cool mark on a warm ground, which is
   what made it feel slightly clinical. And structure came from big soft shadows,
   which is expensive-looking rather than expensive.
   Now: one warm family end to end, ink that is a warm near-black rather than
   navy, and structure carried by hairline borders with shadow used only where
   something genuinely floats. Gold stays as the identity accent; it is the one
   thing that is ours and it does more work when less competes with it.
   Dark mode is untouched.
   30 Oct 2026: superseded by Midnight Brass. Ink is deep navy again, the ground is cream,
   cards are white with a hairline, and brass marks rules, numbers and eyebrows. */
:root[data-theme="light"]{
  --navy-deep:#f4f0e7;   /* ground: warm cream */
  --navy:#faf8f3;        /* alternate band */
  --navy-soft:#ffffff;   /* card / surface */
  --panel:#faf8f3;
  --raised:#ffffff;
  --ivory:#141f33;       /* ink: deep clean navy */
  --cream:#f4f0e7;
  --muted:#424b63;
  --line:rgba(20,31,51,.16); --edge:rgba(20,31,51,.16); --edge-strong:rgba(20,31,51,.30);
  --fill:#141f33; --fill-hover:#1f2d48; --fill-edge:#141f33; --fill-ink:#f4f0e7;   /* primary: navy, cream text */
  --accent:#745527; --accent-soft:#745527; --gold:#745527; --gold-soft:#745527;   /* brass-text: #d8b375 is too light on cream */
  --brass:#a57d45;
  --brass-text:#745527;
  --steel:#34557d;
  --secondary:var(--steel); --sage:#2a5f3c; --lilac:var(--steel);
  --good:#2a5f3c; --warn:#7a4f0b; --crit:#9b2f2a;
  --focus:#34557d;
  color-scheme:light;
}
:root[data-theme="light"] body{background:var(--navy-deep);color:var(--ivory)}
:root[data-theme="light"] .brand img{filter:brightness(.2) sepia(.3) saturate(1.1)}

/* Cards: warm paper, defined by their edge. A single 1px shadow keeps them from
   looking printed onto the page without pretending they hover. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .job,
:root[data-theme="light"] .rcard,
:root[data-theme="light"] .cap-card,
:root[data-theme="light"] .price,
:root[data-theme="light"] .q{
  /* !important: page-local ID-scoped card rules (e.g. #start .rcard) otherwise
     out-rank this; in light mode every card surface should be warm paper. */
  background:var(--navy-soft) !important;
  border:1px solid var(--edge) !important;
  box-shadow:0 1px 2px rgba(20,31,51,.05) !important;
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .rcard:hover,
:root[data-theme="light"] .job:hover{
  /* Hover moves the EDGE, not the shadow: the calmer signal, and it keeps the
     card from jumping on a page where many cards sit side by side. */
  border-color:var(--edge-strong) !important;
  background:var(--navy-soft) !important;
  box-shadow:0 1px 3px rgba(20,31,51,.07) !important;
}

/* Panels: the one place something genuinely sits above the page. */
:root[data-theme="light"] .panel{
  background:var(--navy-soft);
  border:1px solid var(--edge-strong);
  box-shadow:0 12px 40px -28px rgba(20,31,51,.45);
}
:root[data-theme="light"] .nav{
  background:rgba(250,248,243,.92);
  box-shadow:none;
  border-bottom:1px solid var(--edge);
}

/* Buttons: flat and confident. The old gradient + glow read as a web button;
   a solid field with a hairline reads as print. */
:root[data-theme="light"] .btn-gold{
  background:var(--fill);
  color:var(--fill-ink);
  box-shadow:none;
  border:1px solid var(--fill-edge);
}
:root[data-theme="light"] .btn-gold:hover{background:var(--fill-hover);box-shadow:none}
/* The warm-black secondary: for pages where gold on gold would shout. */
:root[data-theme="light"] .btn-ink{background:var(--fill);color:var(--fill-ink);border:1px solid var(--fill-edge)}
:root[data-theme="light"] .btn-ink:hover{background:var(--fill-hover)}
:root[data-theme="light"] .btn-ghost{border-color:var(--brass);color:var(--ivory)}
:root[data-theme="light"] .btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft);background:color-mix(in srgb,var(--brass) 8%,transparent)}

/* Quiet the dark-theme flourishes on paper. */
:root[data-theme="light"] .divider{opacity:.35}
:root[data-theme="light"] .hero{
  /* A single soft warm wash instead of a gold halo: the hero should feel like
     the top of a page, not a lit stage. */
  background:linear-gradient(180deg,var(--navy),var(--navy-deep));
}
:root[data-theme="light"] .chip{
  background:var(--navy-soft);border-color:var(--edge);box-shadow:none;
}
:root[data-theme="light"] .card .ic{background:color-mix(in srgb,var(--brass) 10%,transparent);border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
/* Tables and rules pick up the same warm line so nothing reverts to cool grey. */
:root[data-theme="light"] table th,
:root[data-theme="light"] table td{border-color:var(--edge)}
:root[data-theme="light"] hr{border-color:var(--edge)}

/* theme toggle */
.theme-toggle{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;margin-left:10px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.theme-toggle:hover{color:var(--gold-soft);border-color:var(--gold-soft)}
.theme-toggle svg{width:16px;height:16px}
@media(max-width:860px){.theme-toggle{margin-left:6px}}


/* ─── Micro-interactions (fx) , subtle, purpose-driven, GPU-only ─── */
.fxr{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.6,.2,1),transform .5s cubic-bezier(.2,.6,.2,1)}
.fxr-in{opacity:1;transform:none}
.nav{transition:background .25s,box-shadow .25s}
.nav.scrolled{box-shadow:0 6px 24px -12px rgba(0,0,0,.45)}
:root[data-theme="light"] .nav.scrolled{box-shadow:0 6px 20px -10px rgba(20,31,51,.18)}
@media (prefers-reduced-motion: reduce){
  .fxr{opacity:1;transform:none;transition:none}
}

/* ─── Proof strip ───
   The homepage carried two numbers and no evidence; competitors carry a dozen.
   We cannot answer a logo wall with logos we do not have, so we answer it with
   depth instead: what one real deployment has actually done. Numbers are the
   loudest thing on the band because they are the only part a sceptic can check. */
.proof-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.proof-lede{text-align:center;font-size:14.5px;color:var(--muted);margin-bottom:22px}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.proof{text-align:center;padding:0 10px}
.proof .n{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:40px;line-height:1.05;font-weight:600;color:var(--gold-soft);font-variant-numeric:lining-nums tabular-nums}
.proof .l{margin-top:7px;font-size:13px;line-height:1.45;color:var(--muted)}
.proof .l b{color:var(--ivory);font-weight:600}
.proof-foot{text-align:center;margin-top:24px;font-size:13.5px;color:var(--muted);max-width:660px;margin-left:auto;margin-right:auto;line-height:1.6}
.proof-foot a{color:var(--gold-soft);border-bottom:1px solid color-mix(in srgb,var(--gold-soft) 40%,transparent)}
:root[data-theme="light"] .proof-strip{background:var(--navy)}
@media(max-width:860px){
  .proof-grid{grid-template-columns:repeat(2,1fr);gap:26px 12px}
  .proof .n{font-size:33px}
}

/* ─── Nav: keep the right-hand group on the right ───
   .nav-links is absolutely centred, so the flex row actually contains brand,
   CTA and the theme toggle that theme.js appends at runtime. justify-content:
   space-between then spreads THREE items, parking the CTA in the middle of the
   bar directly on top of the centred links. Visible at 1440px on every page
   using the short nav (pledge, security, verification...).
   The fix is to make the right-hand group hug the right edge. Where a language
   selector exists it is the first of that group and takes the auto margin
   instead, so the CTA must give it up. */
.nav .wrap > .nav-cta{margin-left:auto}
.nav .wrap > .nav-langsel{margin-left:auto;padding-left:14px}
.nav .wrap > .nav-langsel ~ .nav-cta{margin-left:18px}
@media(max-width:780px){
  /* The mobile nav stacks these full-width, where an auto margin would fight it. */
  .nav .wrap > .nav-cta,
  .nav .wrap > .nav-langsel,
  .nav .wrap > .nav-langsel ~ .nav-cta{margin-left:0}
}

/* ─── Security questionnaire ───
   Two columns so a reviewer can scan the questions down the left and stop at the
   one they care about. Answers that are "no" are bolded in the copy rather than
   colour-coded: a red row reads as a warning, and several of these noes are the
   answer the reviewer wants (no model training, no unsupervised action). */
.qa-table{max-width:900px;margin:0 auto;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.qa{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa .q{padding:18px 22px;font-weight:600;font-size:14.5px;line-height:1.45;border-right:1px solid var(--line);background:color-mix(in srgb,var(--ivory) 3%,transparent)}
.qa .a{padding:18px 22px;font-size:14.5px;line-height:1.6;color:color-mix(in srgb,var(--ivory) 76%,transparent)}
.qa .a b{color:var(--ivory)}
.qa .a a{color:var(--gold-soft);border-bottom:1px solid color-mix(in srgb,var(--gold-soft) 40%,transparent)}
.qa-foot{max-width:900px;margin:18px auto 0;font-size:13.5px;color:var(--muted);line-height:1.6;text-align:center}
.qa-foot a{color:var(--gold-soft);border-bottom:1px solid color-mix(in srgb,var(--gold-soft) 40%,transparent)}
:root[data-theme="light"] .qa .q{background:var(--navy)}
@media(max-width:720px){
  .qa{grid-template-columns:1fr}
  .qa .q{border-right:0;border-bottom:1px solid var(--line)}
}

/* Between the mobile menu breakpoint and a comfortable desktop there is a band where the
   uppercase nav, the language selector and the CTA all fit but only just: measured 3px
   between the wordmark and the links at 1024. Not broken, but nothing at 3px looks
   deliberate. Tighten the typography rather than dropping items, so the bar stays complete. */
@media(min-width:781px) and (max-width:1120px){
  .nav-links{gap:20px;font-size:11.5px;letter-spacing:.06em}
  .nav-drop-t{font-size:11.5px;letter-spacing:.06em}
  .nav-cta{padding:10px 14px;font-size:11px;letter-spacing:.05em}
  .nav .wrap > .nav-langsel{padding-left:8px}
  .nav .wrap > .nav-langsel ~ .nav-cta{margin-left:10px}
}
/* The bottom of that band still did not fit: at 800px the bar overflowed the page by 56px
   and clipped the CTA off the right edge, on every page carrying the language selector.
   Tightening type further would have produced an unreadable nav, so the two items a
   visitor needs least at this width give way instead: the language selector (a visitor on
   a translated page is already on one) and the theme toggle. The links and the CTA, which
   are the navigation and the conversion, both survive intact. */
@media(min-width:781px) and (max-width:900px){
  .nav .wrap > .nav-langsel{display:none}
  .nav .theme-toggle{display:none}
  .nav-links{gap:15px;font-size:11px;letter-spacing:.04em}
  .nav-drop-t{font-size:11px;letter-spacing:.04em}
  .nav-cta{padding:9px 12px;font-size:10.5px;letter-spacing:.04em}
  .nav .wrap > .nav-cta{margin-left:auto}
}

/* ─── The thesis ───
   One argument, set larger than body copy and quieter than a headline, with the turn on its
   own line. It is the only place on the page where we ask the reader to stop and agree with
   something before being sold anything. */
.thesis{max-width:820px;margin:0 auto;text-align:center;border:0;padding:0}
.thesis p{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-weight:400;font-size:clamp(22px,2.9vw,32px);line-height:1.35;letter-spacing:-.01em;color:var(--ivory)}
.thesis .thesis-turn{margin-top:18px;color:var(--gold-soft);font-style:italic}
@media(max-width:700px){.thesis p{font-size:clamp(19px,5vw,24px)}}

/* second full-width row in the Industries mega-menu (solutions matrix): no repeated rule line */
.nav-menu .ng-all.ng-all2{border-top:0;margin-top:2px;padding-top:0;font-weight:500;color:color-mix(in srgb, var(--ivory) 70%, transparent)}
.nav-menu .ng-all.ng-all2:hover{color:var(--gold-soft)}

/* mobile safety: clip any horizontal overflow without breaking the sticky nav (clip, not hidden) */
html,body{overflow-x:clip}
img{max-width:100%;height:auto}

/* TABLE OVERFLOW GUARD. Ten pages shipped a table with no scroll container: the four
   compare-* pages, solutions (a 15 by 5 matrix), subprocessors, cookies, trades,
   real-estate and commercial-real-estate. On a 375px viewport those push the whole page
   body sideways, which is the single worst mobile bug because it breaks every other
   element too. Done in CSS rather than by wrapping ten files by hand, so a table added
   tomorrow is covered without anyone remembering. */
@media (max-width: 760px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody { display: table; width: 100%; min-width: max-content; }
}

/* ── Brand imagery (Higgsfield Soul Location set, 2026-08) ─────────────
   A full-bleed photographic layer under every hero. The images are already
   near-black navy with one gold light, so they sit UNDER the existing
   radial-gold gradient and a bottom fade keeps the copy on solid ground. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.62;pointer-events:none}
/* Fixed dark stops, NOT theme vars: in light theme var(--navy-deep) turns cream and
   lays a white veil over the photograph, washing out the hero (found on the preview). */
.hero:has(.hero-bg){background:var(--navy-deep);color:var(--ivory)}
/* L1/D1 warm sunburst glow — propagates to every photo hero */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(820px 560px at 78% 2%, rgba(182,139,83,.14), transparent 68%),
    conic-gradient(from 200deg at 82% -4%, rgba(143,169,200,.07), transparent 22%, rgba(182,139,83,.05) 40%, transparent 60%)}
:root[data-theme="light"] .hero::before{background:radial-gradient(900px 620px at 78% 0%, rgba(165,125,69,.16), transparent 70%),
    conic-gradient(from 200deg at 82% -6%, rgba(52,85,125,.06), transparent 24%, rgba(165,125,69,.06) 42%, transparent 62%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(14,21,36,.18), rgba(14,21,36,.5) 60%, rgba(14,21,36,.94) 97%)}
.hero .wrap{position:relative;z-index:1}
video.hero-bg{opacity:.55}

/* ── LIGHT MODE: heroes go genuinely light ─────────────────────────────
   Fixes: (1) the ::after dark overlay darkened even photoless heroes;
   (2) .hero .sub used var(--ivory) which flips to dark ink and vanished on
   the dark photo; (4) photo heroes were hard-pinned #141f33. In light mode a
   photo hero becomes a cream field with the photo dimmed to a faint texture
   and warm-ink text on top. */
:root[data-theme="light"] .hero:has(.hero-bg){background:var(--navy);color:var(--ivory)}
:root[data-theme="light"] .hero-bg{opacity:.14}
:root[data-theme="light"] video.hero-bg{opacity:.10}
:root[data-theme="light"] .hero::after{
  background:linear-gradient(180deg, rgba(250,248,243,0), rgba(250,248,243,.30) 62%, rgba(250,248,243,.9) 100%)}
:root[data-theme="light"] .hero h1{color:var(--ivory)}
:root[data-theme="light"] .hero .sub{color:var(--muted)}
:root[data-theme="light"] .hero-note{color:var(--muted)}
:root[data-theme="light"] .hero-capture input{color:var(--ivory)}
:root[data-theme="light"] .hero-capture input::placeholder{color:var(--muted)}
@media (prefers-reduced-motion: reduce){ video.hero-bg{display:none} }
/* Industry cards: square object still-life above the copy */
.indcard .indimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
  display:block;margin:0 0 14px;opacity:.92}

/* --- connects-to strip + receipted wins band (Pine-inspired, honest) --- */
.connects{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.connects .lab{text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.connects .row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center}
.connects .row span{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:19px;color:color-mix(in srgb,var(--ivory) 60%,transparent)}
@media(max-width:600px){.connects .row{gap:12px 22px}.connects .row span{font-size:16px}}
.wins-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.win{border:1px solid var(--line);border-radius:12px;padding:22px 20px;background:var(--navy-soft);display:flex;flex-direction:column;gap:10px}
.win .r{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-weight:500;font-size:19px;line-height:1.25;color:var(--ivory)}
.win .m{font-size:13.5px;line-height:1.5;color:var(--muted)}
.win .t{margin-top:auto;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-soft)}
@media(max-width:900px){.wins-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wins-grid{grid-template-columns:1fr}}

/* --- pricing "no fees" trust strip --- */
.nofees-strip{border:1px solid var(--line);border-radius:14px;padding:30px 26px;text-align:center;background:var(--navy-soft)}
.nofees-lead{font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;font-size:clamp(22px,3vw,30px);color:var(--ivory);margin-bottom:16px}
.nofees-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.nofees-row span{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;color:var(--ivory)}
.nofees-foot{margin-top:16px;color:var(--muted);font-size:13.5px;max-width:640px;margin-left:auto;margin-right:auto;line-height:1.6}
/* --- homepage category picker (interactive problem chips) --- */
.picker{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.picker a{border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14px;color:var(--ivory);transition:border-color .2s,color .2s,background .2s}
.picker a:hover{border-color:var(--gold);color:var(--gold-soft)}

/* --- footer "Ask an AI about us" trio (GEO/AEO seed) --- */
.ask-ai{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:13px}
.ask-ai-lab{color:var(--muted);letter-spacing:.04em}
.ask-ai a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ivory);transition:border-color .2s,color .2s}
.ask-ai a:hover{border-color:var(--gold);color:var(--gold-soft)}

/* Arabic. The site publishes ar/ pages that were rendering in whatever font the visitor's
   device happened to pick, because the Latin fonts contain no Arabic at all. IBM Plex Sans
   Arabic (SIL OFL) is self-hosted and subset to the Arabic blocks plus Latin, so a mixed
   sentence keeps one voice. The subset keeps init, medi, fina and rlig, which is what joins
   the letters, and it includes U+066B and U+066C, the separators a formatted Arabic number
   uses and that several popular Arabic webfonts omit. Arabic needs more leading than Latin,
   hence the line-height, and Arabic has no italic, hence the normal. */
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plex-arabic-regular.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/plex-arabic-semibold.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
:lang(ar),[lang="ar"],[dir="rtl"]{
  font-family:'Plex Arabic',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.85;
}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{
  font-family:'Plex Arabic',Inter,system-ui,sans-serif;
  font-style:normal;
  line-height:1.4;
}

/* WCAG 1.4.1 (use of colour). Blue-yellow discrimination degrades fastest with age and our
   buyer is 45-70, so an inline link may not be identified by colour alone. Scoped to
   unclassed prose links; buttons and card links carry their own non-colour affordance. */
:where(p,li,dd,figcaption,blockquote,td,.ld) a:not([class]){text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em}
:where(p,li,dd,figcaption,blockquote,td,.ld) a:not([class]):hover{text-decoration-thickness:.12em}


/* Body-copy floor. Research for a 45-70 reader puts type size alongside contrast as the
   two measures that actually carry; 16px is the floor for prose. These classes set 13.5
   to 15px in feerasta.css and in ~60 per-page <style> blocks, so the floor is asserted
   once here with :root raising specificity above the inline page rules. Labels, eyebrows,
   badges and figure captions are deliberately excluded: they are not body copy. */
:root .card p,
:root .step p,
:root .faq p,
:root .faq details p,
:root .offer-row p,
:root .included p,
:root .diff .d p,
:root .work-details p,
:root .service-card-copy > p,
:root .service-group-heading > p,
:root .cap-list li,
:root .ptier li,
:root .sec-cell li,
:root .gradient-home .journey p,
:root .line-band-from,
:root .catalogue-cta p,
:root .workflow-evidence p,
:root .posture p{font-size:1rem;line-height:1.6}

/* ─── Motion pass: sliding segmented pill, card fade-up, press feedback ───
   Driven by assets/theme.js. Everything is inert without JS, and off under reduced motion. */
.op-seg,[data-seg]{position:relative}
.seg-pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:7px;pointer-events:none;
  background:var(--gradient-action,var(--fill,var(--gold)));
  transition:transform 250ms cubic-bezier(.3,1.3,.5,1),width 250ms cubic-bezier(.3,1.3,.5,1),height 250ms cubic-bezier(.3,1.3,.5,1),top 250ms cubic-bezier(.3,1.3,.5,1)}
.seg-pill{display:none}
.seg-ready>.seg-pill{display:block}
.seg-ready>button{position:relative;z-index:1}
.seg-ready>button[aria-pressed="true"],.seg-ready .bill-opt[aria-pressed="true"]{background:transparent}
.bill-opt{transition:transform 120ms cubic-bezier(.2,.8,.2,1),color 200ms ease}

/* Press feedback, one rule for the whole site: buttons answer on pointer-down (scale .97,
   80ms in) and settle back on release (180ms out). theme.js adds a passive touchstart listener
   so iOS Safari applies :active on touch too. */
.gradient-button,.button,.btn,.he-primary,.mx-btn,.bill-opt,.feer-contact,.theme-toggle,.copy-chip,.sent-again,.nf-card,button[type=submit]{
  transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease}
:is(.gradient-button,.button,.btn,.he-primary,.mx-btn,.bill-opt,.feer-contact,.theme-toggle,.copy-chip,.sent-again,.nf-card,button[type=submit]):active:not(:disabled):not([aria-disabled="true"]){
  transform:scale(.97);transition-duration:80ms}

/* Card fade-up: the start state exists only once JS has tagged the cards. */
.mo-pre{opacity:0}
@keyframes mo-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mo-in{animation:mo-up 220ms cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--mo-d,0ms)}

@media (prefers-reduced-motion: reduce){
  .seg-pill,.bill-opt{transition:none}
  .mo-pre{opacity:1}
  .mo-in{animation:none}
  :is(.gradient-button,.button,.btn,.he-primary,.mx-btn,.bill-opt,.feer-contact,.theme-toggle,.copy-chip,.sent-again,.nf-card,button[type=submit]):active:not(:disabled):not([aria-disabled="true"]){transform:none}
}

/* Focus rings: one calm ring for keyboard users everywhere, at zero specificity so a component's
   own ring still wins. Text fields keep their existing border-and-glow focus. */
:where(a,button,summary,[tabindex]:not([tabindex="-1"]),[role="button"]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
:where(input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Theme switch: a 200ms cross-fade (theme.js runs the swap inside a view transition; browsers
   without one get a short colour transition instead). No movement, so nothing to reduce. */
:root.theme-vt::view-transition-group(*),:root.theme-vt::view-transition-old(*),:root.theme-vt::view-transition-new(*){
  animation-duration:200ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
:root.theme-fade,:root.theme-fade *,:root.theme-fade *::before,:root.theme-fade *::after{
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,fill 200ms ease,stroke 200ms ease,box-shadow 200ms ease!important}
@media (prefers-reduced-motion: reduce){
  :root.theme-vt::view-transition-group(*),:root.theme-vt::view-transition-old(*),:root.theme-vt::view-transition-new(*){animation:none}
}

/* Cross-page fade (October 2026 redesign): a 240ms cross-fade between pages while the menu bar
   stays still. Both pages must opt in, so it lives here, on every page. Firefox navigates as before. */
@view-transition{navigation:auto}
.feer-nav{view-transition-name:site-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
:root:not(.theme-vt)::view-transition-group(site-nav){animation:none}
:root:not(.theme-vt)::view-transition-old(site-nav){display:none}
:root:not(.theme-vt)::view-transition-new(site-nav){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Copy to clipboard next to emails and phone numbers in contact areas (theme.js). */
.copy-wrap{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}
.copy-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border:1px solid var(--line);
  border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:500;
  letter-spacing:normal;text-transform:none;line-height:1;cursor:pointer;position:relative}
.copy-chip::before{content:"";position:absolute;inset:-7px -2px}
.copy-chip svg{width:13px;height:13px;flex:0 0 auto}
.copy-chip:hover{color:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.copy-chip[data-copied]{color:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.copy-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:2147483000;
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:var(--ivory);color:var(--navy-deep);font-size:14px;font-weight:500;line-height:1.2;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.45);pointer-events:none;
  opacity:0;transform:translate(-50%,8px);transition:opacity 180ms ease,transform 220ms cubic-bezier(.2,.8,.2,1)}
.copy-toast svg{width:15px;height:15px;flex:0 0 auto}
.copy-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* Phones: sit above the floating Ask and Chat buttons instead of between them. */
@media (max-width:640px){.copy-toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
.copy-toast:empty{display:none}
@media (prefers-reduced-motion: reduce){
  .copy-toast{transition:opacity 1ms;transform:translate(-50%,0)}
}

/* ─── Glass chrome (29 Oct 2026) ───────────────────────────────────────────
   One material for everything that floats: the nav bar, its language menu, the mobile menu
   sheet, the price-period chip, and the Ask launcher and panel. (Popover menus that fx.js
   lifts into the top layer, language and theme, use the same tokens in fx.css section 11.)
   Content (body copy, plan cards, pricing tables, legal text) stays solid. Rules, from the
   glass-design skill:
   - Weight follows the job: chip < nav < menu < sheet. Text over moving content gets a firm fill.
   - Glass is seen at its edge: inner top highlight, a hairline that fades toward the bottom,
     one short accent glint on the nav's top edge, and a shadow tinted to the theme.
   - Never animate blur. The nav firms up on scroll by changing its fill only.
   - The nav carries view-transition-name (the bar holds still between pages), which makes it
     a backdrop root: anything inside it can only frost the bar itself. So the language menu
     is a near-solid tinted surface with the glass edge, not a second blur (no glass in glass).
   - Midnight Brass tokens only: tints are the page grounds (#0e1524 / #faf8f3), the glint is
     var(--accent). Every fill is a token, so the fallbacks just set the fills to solid.
   - Contrast measured at the worst pixel under each surface: see the Glass 2026-10-30 sheet. */
:root{
  --g-tint:14 21 36; --g-shadow:0 0 0; --g-shadow-a:.55;
  --g-hi:255 255 255 / .16; --g-lo:255 255 255 / .05; --g-glow:255 255 255 / .05;
  --g-edge:233 227 215 / .16;
  --g-fill-chip:.62; --g-fill-nav-rest:.70; --g-fill-nav:.86; --g-fill-float:.84; --g-fill-menu:.97; --g-fill-sheet:.93;
  --g-blur-chip:12px; --g-blur-nav:20px; --g-blur-sheet:28px;
  --g-ease:cubic-bezier(.23,1,.32,1);
}
:root[data-theme="light"]{
  --g-tint:250 248 243; --g-shadow:20 31 51; --g-shadow-a:.26;
  --g-hi:255 255 255 / .92; --g-lo:255 255 255 / .35; --g-glow:255 255 255 / .30;
  --g-edge:20 31 51 / .16;
  --g-fill-chip:.58; --g-fill-nav-rest:.64; --g-fill-nav:.80; --g-fill-float:.80; --g-fill-menu:.96; --g-fill-sheet:.92;
}
/* Phones: less blur, same fills. Blur cost grows with radius and area. */
@media (max-width:600px){:root{--g-blur-chip:10px;--g-blur-nav:14px;--g-blur-sheet:16px}}

/* 1. Nav bar. Fill, blur and inner highlights on the bar; the rim on .feer-nav-inner::before;
   the scroll-edge fade stays on ::after (centered-navigation.css). */
:root .feer-nav{
  --g-a:var(--g-fill-nav-rest);
  border-color:transparent;
  background:rgb(var(--g-tint) / var(--g-a));
  -webkit-backdrop-filter:blur(var(--g-blur-nav)) saturate(170%);backdrop-filter:blur(var(--g-blur-nav)) saturate(170%);
  box-shadow:inset 0 1px 0 rgb(var(--g-hi)),inset 0 -1px 0 rgb(var(--g-lo)),inset 0 0 14px rgb(var(--g-glow)),
    0 1px 2px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .3)),
    0 14px 34px -22px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .6));
  transition:background-color .3s var(--g-ease),box-shadow .3s var(--g-ease)}
/* Scrolled: content now runs under the bar, so the fill firms up and the shadow deepens. */
html.feer-scrolled .feer-nav{
  --g-a:var(--g-fill-nav);
  box-shadow:inset 0 1px 0 rgb(var(--g-hi)),inset 0 -1px 0 rgb(var(--g-lo)),inset 0 0 14px rgb(var(--g-glow)),
    0 1px 2px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .5)),
    0 18px 40px -20px rgb(var(--g-shadow) / var(--g-shadow-a))}
/* Mobile menu open: the bar becomes a sheet with a page of links on it, so sheet weight. */
:root .feer-nav:has(.feer-menu-toggle[aria-expanded="true"]){--g-a:var(--g-fill-sheet)}
:root .feer-nav-inner{position:relative}
:root .feer-nav-inner::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 3%,color-mix(in srgb,var(--accent) 70%,transparent) 14%,transparent 30%) top / 100% 1px no-repeat,
    linear-gradient(to bottom,rgb(var(--g-edge)) 0,rgb(var(--g-edge)) 45%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* 2. Language menu: sits inside the nav (a backdrop root), so menu weight with no blur of its own. */
:root .feer-language-list{
  padding:8px;border:0;border-radius:16px;transform-origin:top right;
  background:rgb(var(--g-tint) / var(--g-fill-menu));
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgb(var(--g-hi)),inset 0 -1px 0 rgb(var(--g-lo)),0 0 0 1px rgb(var(--g-edge)),
    0 1px 2px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .5)),0 22px 48px -20px rgb(var(--g-shadow) / var(--g-shadow-a))}
:root .feer-language-list a{border-radius:10px;color:var(--ivory)}
:root .feer-language-list a:hover,:root .feer-language-list a:focus-visible{background:color-mix(in srgb,var(--ivory) 8%,transparent)}
@keyframes g-pop{from{opacity:0;transform:translateY(-4px) scale(.97)}}
:root .feer-language[open] .feer-language-list{animation:g-pop .18s var(--g-ease)}
/* Inside the open phone menu the list is part of the sheet: no second frost. */
@media (max-width:600px){
  :root .feer-language-list{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:0 0 8px}
  :root .feer-language[open] .feer-language-list{animation:none}
}

/* 3. Price-period chip (Monthly / Yearly). The currency is set by location and shown as text;
   the old floating currency chip is no longer rendered, so it gets no rule here. */
:root :is(.op-seg,.fx-pricing .op-seg){
  border-color:transparent;
  background:rgb(var(--g-tint) / var(--g-fill-chip));
  -webkit-backdrop-filter:blur(var(--g-blur-chip)) saturate(160%);backdrop-filter:blur(var(--g-blur-chip)) saturate(160%);
  box-shadow:inset 0 1px 0 rgb(var(--g-hi)),inset 0 -1px 0 rgb(var(--g-lo)),0 0 0 1px rgb(var(--g-edge)),
    0 1px 2px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .4)),0 10px 24px -16px rgb(var(--g-shadow) / var(--g-shadow-a))}

/* 4. Ask launcher and panel. The launcher is a secondary action, so glass with ink text
   (primary actions stay solid). The panel is a sheet: firm fill, inner fields stay solid. */
#afp-root .afp-launch{
  border:0;color:var(--ivory);
  background:rgb(var(--g-tint) / var(--g-fill-float));
  -webkit-backdrop-filter:blur(var(--g-blur-chip)) saturate(160%);backdrop-filter:blur(var(--g-blur-chip)) saturate(160%);
  box-shadow:inset 0 1px 0 rgb(var(--g-hi)),inset 0 -1px 0 rgb(var(--g-lo)),0 0 0 1px rgb(var(--g-edge)),
    0 1px 2px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .5)),0 14px 32px -16px rgb(var(--g-shadow) / var(--g-shadow-a))}
#afp-root .afp-launch:hover{background:rgb(var(--g-tint) / var(--g-fill-sheet))}
#afp-root .afp-panel{
  border:0;border-radius:18px;
  background:rgb(var(--g-tint) / var(--g-fill-sheet));
  -webkit-backdrop-filter:blur(var(--g-blur-sheet)) saturate(175%);backdrop-filter:blur(var(--g-blur-sheet)) saturate(175%);
  box-shadow:inset 0 1px 0 rgb(var(--g-hi)),inset 0 -1px 0 rgb(var(--g-lo)),0 0 0 1px rgb(var(--g-edge)),
    0 1px 2px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .5)),0 28px 64px -24px rgb(var(--g-shadow) / var(--g-shadow-a))}
#afp-root .afp-head{border-block-end-color:rgb(var(--g-edge))}
#afp-root .afp-panel:not([hidden]){animation:g-pop .2s var(--g-ease)}
#afp-root .afp-panel{transform-origin:bottom left}

/* 5. Fallbacks. Every fill is a token, so each case sets the fills solid and drops the blur. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,:root[data-theme="light"]{--g-fill-chip:.96;--g-fill-nav-rest:.96;--g-fill-nav:.97;--g-fill-float:.97;--g-fill-menu:.98;--g-fill-sheet:.98}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root,:root[data-theme="light"]{--g-fill-chip:1;--g-fill-nav-rest:1;--g-fill-nav:1;--g-fill-float:1;--g-fill-menu:1;--g-fill-sheet:1}
  :root .feer-nav,:root .feer-language-list,:root :is(.op-seg,.fx-pricing .op-seg),
  #afp-root .afp-launch,#afp-root .afp-panel{-webkit-backdrop-filter:none;backdrop-filter:none}
  :root .feer-nav{border-color:var(--line);box-shadow:none}
  :root .feer-nav-inner::before,:root .feer-nav::after{display:none}
}
@media (prefers-contrast:more){
  :root .feer-nav,:root .feer-language-list,:root :is(.op-seg,.fx-pricing .op-seg),
  #afp-root .afp-launch,#afp-root .afp-panel{box-shadow:none;outline:1px solid var(--ivory)}
}
@media (prefers-reduced-motion:reduce){
  :root .feer-nav{transition:none}
  :root .feer-language[open] .feer-language-list,#afp-root .afp-panel:not([hidden]){animation:none}
}

/* 6. Glass QA (30 Oct 2026). One finish for every control in the bar, and the floating pieces
   lined up with each other. Measured at 320 to 1920px, both themes, EN, PT and AR.
   - Theme button: pages with fx.js turned it into a borderless popover trigger while pages
     without fx.js kept the ringed circle, so the same button looked different by page. It is now
     one 44px circle with the same hairline as the phone call button, on every page and width. */
:root .feer-nav .theme-toggle{width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ivory);transition:background-color .2s var(--g-ease),border-color .2s var(--g-ease)}
:root .feer-nav .theme-toggle:hover{background:color-mix(in srgb,var(--ivory) 6%,transparent);border-color:color-mix(in srgb,var(--ivory) 32%,transparent);color:var(--ivory)}
/* - Language menus show all 13 languages without an inner scroll whenever the window is tall
     enough (the last one, Arabic, sat cut off under the fold of the list). */
:root .fx-pop--language,:root .feer-language-list{max-height:min(calc(100dvh - 104px),640px)}
@media (max-width:600px){:root .feer-language-list{max-height:none}}
/* - Price chip: the sliding pill now matches the chip's pill shape (it was a 7px rectangle inside
     a round chip) and settles without the overshoot. */
:root :is(.op-seg,.fx-pricing .op-seg){border-radius:999px}
:root :is(.op-seg,.fx-pricing .op-seg)>button,:root .op-seg .seg-pill{border-radius:999px}
:root .op-seg .seg-pill{transition-timing-function:var(--g-ease)}
/* - Ask launcher: text over whatever scrolls beneath it, so it takes the firmer sheet fill (worst
     pixel was 1.2:1 at the float fill). It sits 20px in and centred on the same line as the
     chat button opposite it (20px in, 56px tall), so the two read as a pair. */
#afp-root .afp-launch{min-height:48px;padding-inline:18px;background:rgb(var(--g-tint) / var(--g-fill-sheet))}
#afp-root .afp-launch:hover{background:rgb(var(--g-tint) / var(--g-fill-menu))}
html #afp-root{inset-block-end:calc(24px + env(safe-area-inset-bottom,0px));left:calc(20px + env(safe-area-inset-left,0px));max-width:calc(100vw - 40px)}
html #afp-root .afp-panel{inset-block-end:60px}
@media (max-width:480px){html #afp-root .afp-panel{inset-inline:20px;inset-block-end:calc(88px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){:root .feer-nav .theme-toggle{transition:none}}

/* Elegance pass, 30 Oct 2026. Quieter weights where the first screen shouted: the primary
   action and plan names drop from 600 to the 500 the headlines already use, so hierarchy comes
   from size and space rather than bold. Prices use lining tabular figures so cards line up. */
:root .fx-btn{font-weight:500;letter-spacing:.005em}
:root .pg-plan h3{font-weight:500}
:root :is(.pg-amount,.op-price,.stg-amount){font-variant-numeric:lining-nums tabular-nums}

/* Refinement pass, 30 Oct 2026 (website items of the 30 Oct refinement critique).
   One shared rule where the site had three to eight variants: buttons, eyebrows, focus, body
   links, long-form reading and prices. Page files load after this one, so the shared rules carry
   `html:root` (and `body` for buttons) to win on specificity rather than !important. */
:root{
  --btn-h:48px;--btn-h-sm:40px;--btn-r:999px;--btn-px:22px;--btn-px-sm:16px;
  --btn-fs:16px;--btn-fs-sm:14px;--btn-fw:500;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --eyebrow-fs:12.5px;--eyebrow-ls:.08em
}

/* 1. One button: a 48px pill, 16px/500, 22px sides. One small size: 40px, 14px/500.
   The home hero buttons are left to the first-screen pass. */
html:root body :is(.btn,.fx-btn,.op-cta,.mcc-btn,.mcc-cta,.he-primary,.button-dark,.button-gold,
  .gradient-closing .gradient-button,.sample-actions .gradient-button,.lc-actions .btn,.ac-form .btn):not(.gradient-opening *){
  min-height:var(--btn-h);height:auto;padding-block:0;padding-inline:var(--btn-px);border-radius:var(--btn-r);
  font-family:var(--font-body,inherit);font-size:var(--btn-fs);font-weight:var(--btn-fw);line-height:1.2;
  letter-spacing:.005em;text-transform:none;justify-content:center;gap:10px}
/* Toggles that sit beside buttons take the same pill and height. */
html:root body :is(.sample-selector button,.he-pair-btn){min-height:var(--btn-h);border-radius:var(--btn-r);font-size:var(--btn-fs);font-weight:var(--btn-fw)}
html:root body :is(.btn-sm,.fx-btn--sm,.mx-replay,.pd-site-btn,.industry-band-toggle,.copy-chip){
  min-height:var(--btn-h-sm);padding-inline:var(--btn-px-sm);border-radius:var(--btn-r);
  font-size:var(--btn-fs-sm);font-weight:var(--btn-fw);line-height:1.2}
@media (min-width:600px){
  html:root body :is(.btn,.fx-btn,.op-cta,.mcc-btn,.mcc-cta,.he-primary,.button-dark,.button-gold,.btn-sm,.fx-btn--sm){white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){
  html:root body :is(.btn,.fx-btn,.op-cta,.mcc-btn,.mcc-cta,.he-primary,.button-dark,.button-gold):active:not(:disabled){transform:scale(.97)}
}

/* 2. One eyebrow: mono 12.5px, +0.08em, never negative tracking on capitals. */
html:root :is(.fx-eyebrow,.op-tier-kicker,.mc-kicker,.mx-kicker,.op-badge,.pg-tag,.mx-col .tag,.sv-group,
  .gradient-product-label,.wrap.article .meta,.wrap.article .kicker){
  font-family:var(--font-mono);font-size:var(--eyebrow-fs);font-weight:500;line-height:1.35;
  letter-spacing:var(--eyebrow-ls);text-transform:uppercase}
html:root:lang(ar) :is(h1,h2,h3,h4,h5,h6,.fx-eyebrow,.gradient-product-label,.op-tier-kicker,.mc-kicker){letter-spacing:0}

/* 3. One focus ring. */
html:root :focus-visible{outline:2px solid var(--focus) !important;outline-offset:2px}

/* 4. One body-link style: ink text, a 1px underline at 35%, 4px offset, accent on hover. */
html:root main :is(p,li,dd,td,figcaption) a:not([class]){
  color:var(--ivory);text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px}
html:root main :is(p,li,dd,td,figcaption) a:not([class]):hover{color:var(--accent);text-decoration-color:currentColor}
@media (pointer:coarse){html:root main :is(p,li,dd) a:not([class]){padding-block:.4em}}

/* 5. Reading: no orphans, balanced headings. */
html:root main :is(p,li,dd,figcaption){text-wrap:pretty}
html:root main :is(h1,h2,h3){text-wrap:balance}

/* 6. Long-form pages (articles and answers): left-aligned body on the site type scale. */
html:root .wrap.article{text-align:start}
html:root .wrap.article h1{font-size:clamp(32px,4.2vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.02em}
html:root .wrap.article :is(p,ul,ol){color:var(--muted)}
html:root .wrap.article :is(.lede,.answer p,b,strong){color:var(--ivory)}
html:root .wrap.article .body{color:var(--muted)}
html:root .hero .wrap.article :is(ul,ol){padding-inline-start:1.2em}
html:root .hero .wrap.article .cta-row{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px}
html:root .wrap.article .endcta{text-align:start}
html:root .wrap.article .endcta .cta-row{justify-content:flex-start!important}
html:root .wrap.article .related-reading{text-align:start}

/* 7. Prices: amounts and their units never break apart. The CAD code before a large amount is set
   small so "CAD $1,300" reads as one figure. */
html:root :is(.mx-total>span,.mx-lines b,.op-rate strong,.pg-cur,.pg-cur+.geo-price,.pr-from,
  :is(.op-usage,.op-tier-price,.op-extra,.mc-say,.mc-how,.op-compare td) .geo-price){white-space:nowrap}
html:root .pg-cur{font-size:.42em;font-weight:500;letter-spacing:.04em;vertical-align:.62em;margin-inline-end:.18em;color:var(--fx-muted,var(--muted))}
html:root .op-tier .op-per{margin-top:6px}
html:root .op-tier .op-cta-note{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--fx-muted,var(--muted));text-align:center}
html:root .op-tier .op-extra{font-size:15.5px;line-height:1.5;color:var(--fx-muted,var(--muted))}
html:root .op-tier .op-extra b{color:var(--fx-ink,var(--ivory));font-weight:600;font-variant-numeric:tabular-nums}

/* 8. Plan cards: head, price, body and button sit on shared rows across a row of cards, so every
   price shares one baseline and every button one line. */
@supports (grid-template-rows:subgrid){
  html:root .op-tiers:has(>.op-tier>.op-tier-head){row-gap:28px}
  html:root .op-tiers>.op-tier:has(>.op-tier-head){display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
}
html:root .op-tier-head .op-tier-kicker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:root .op-tier-head{display:grid;gap:6px;align-content:start}
html:root .op-tier-head :is(.op-tier-kicker,h3,.op-tier-sub){margin:0}
html:root .op-tier-head .op-tier-sub{min-height:0}
html:root .op-tier-price{align-self:start;padding-top:22px}
html:root .op-tier-price .op-price{margin-top:0}
html:root .op-tier-body{display:flex;flex-direction:column;gap:0}
html:root .op-tier-body{padding-top:14px}
html:root .op-tier-body>*{margin-block:0}
html:root .op-tier-body>*+*{margin-top:16px}
html:root .op-tier:has(>.op-tier-head)>.op-tier-cta{align-self:start;margin-top:0;padding-top:24px}

/* 9. The "One booked job" card under the plans: a full-width strip, no stub rule. */
html:root .pr-mc{max-width:none;margin-top:32px}
html:root .pr-mc .mc-card::before{display:none}
@media (min-width:860px){
  html:root .pr-mc .mc-card{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;
    grid-template-areas:"kicker kicker kicker" "num say go" "how how how";column-gap:32px;align-items:center}
  html:root .pr-mc .mc-kicker{grid-area:kicker}
  html:root .pr-mc .mc-num{grid-area:num}
  html:root .pr-mc .mc-say{grid-area:say;max-width:62ch}
  html:root .pr-mc .mc-go{grid-area:go}
  html:root .pr-mc .mc-how{grid-area:how}
}

/* 10. Plan calculator: the figure on one line, the period under it, values never wrap. */
html:root .mx-total{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:clamp(28px,3vw,36px)}
html:root .mx-total small{font-size:14px;line-height:1.3}
html:root .mx-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:14px}
html:root .mx-lines b{text-align:end}
html:root .mx-how{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--mx-muted,var(--muted))}
html:root .mx-how summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600;color:var(--mx-ink,var(--ivory))}
html:root .mx-how summary{list-style:none}
html:root .mx-how summary::-webkit-details-marker{display:none}
html:root .mx-how summary::after{content:"";width:7px;height:7px;margin-inline-start:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
html:root .mx-how[open] summary::after{transform:translateY(1px) rotate(225deg)}
html:root .mx-how ul{margin:4px 0 0;padding-inline-start:1.1em;display:grid;gap:6px}

/* 11. Small fixes: table figures, the 404 path, Findable Check result headings. */
html:root :is(td,th).num{text-align:end;font-variant-numeric:tabular-nums}
html:root .op-list-cap{margin:0 0 10px;font-size:14px;color:var(--fx-muted,var(--muted))}
html:root .fx-404 .gx-path{display:inline-block;max-width:100%;width:auto;padding:3px 10px;border:0;border-radius:8px;
  background:color-mix(in srgb,var(--ivory) 7%,transparent);font-size:14px}
html:root .fc-result h3{font-size:clamp(20px,2vw,24px);line-height:1.2;letter-spacing:-.015em;font-weight:500}

/* 12. Inline form errors, under each field, in plain words (assets/lead-form.js and form-check.js). */
html:root .field-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:14px;font-weight:500;line-height:1.4;
  letter-spacing:normal;text-transform:none;color:var(--crit)}
html:root .field-error::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-.9 3.5h1.8l-.3 6H7.4Zm.9 7.6a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-.9 3.5h1.8l-.3 6H7.4Zm.9 7.6a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
html:root .field-error[hidden]{display:none}
html:root :is(input,textarea,select)[aria-invalid="true"]{border-color:var(--crit)!important}

/* 13. Footer: brand column carries the phone line and hours; four link columns. */
html:root .feer-footer-grid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))}
@media (max-width:980px){html:root .feer-footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}html:root .feer-footer-grid>div:first-child{grid-column:1/-1}}
@media (max-width:600px){html:root .feer-footer-grid{grid-template-columns:1fr 1fr}}
html:root .feer-footer-contact{margin-top:14px;display:grid;gap:2px}
html:root .feer-footer-contact a{font-variant-numeric:tabular-nums}
html:root .feer-footer-hours{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
html:root :is(.pg-amount,.op-price,.stg-amount,.mz-amount) .pr-from{font-size:18px;font-weight:400;letter-spacing:0;color:var(--fx-muted,var(--muted))}

/* 14. One launcher, bottom right (critique item 11). The Ask button takes the corner the chat
   button used; chat opens from the Ask panel header ("Chat with us"). Mirrors in RTL. */
html #afp-root{left:auto;right:auto;inset-inline-end:calc(20px + env(safe-area-inset-right,0px));inset-inline-start:auto}
html #afp-root .afp-panel{left:auto;inset-inline-end:0;inset-inline-start:auto;transform-origin:bottom right}
html[dir="rtl"] #afp-root .afp-panel{transform-origin:bottom left}
html #afp-root .afp-launch{min-height:52px}
#afp-root .afp-chat{margin-inline-start:auto;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ivory);font:500 14px/1 var(--font-body,inherit);cursor:pointer}
#afp-root .afp-chat:hover{background:color-mix(in srgb,var(--ivory) 6%,transparent)}
#afp-root .afp-chat[hidden]{display:none}
@media (max-width:480px){html #afp-root .afp-panel{inset-inline:20px}}
/* A long list price ("audit from CAD $3,250, officer CAD $6,500/mo") wraps between amounts, never inside one. */
html:root .op-list .op-list-price{white-space:normal;min-width:0;max-width:26ch}
@media (max-width:720px){html:root .op-list .op-list-price{max-width:none}}

/* ─── Motion kit (30 Oct 2026) ─────────────────────────────────────────────
   From the usmannaveed.ca teardown (Usman Naveed Site Animation Guide, 30 Oct 2026), rebuilt in our
   own code on our tokens: card lift, scroll reveal, step rails, selection, smooth scroll guard, and
   a faint glow and grain behind every page. Tokens only (a palette change is coming), transform and
   opacity only, every piece off or still under reduced motion. The reveal engine is in theme.js. */

/* 1. Smooth anchor scrolling only when motion is welcome; selection in the accent. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:color-mix(in srgb,var(--accent) 34%,transparent);color:var(--ivory)}

/* 2. Ground: one soft accent glow at the top right and a static grain, fixed behind everything.
   Static layers (no blend mode, never animated), so scrolling does not repaint them. Sections with
   their own ground cover them. Off for reduced motion, reduced transparency and more contrast. */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:radial-gradient(55% 42% at 88% -6%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%)}
:root[data-theme="light"] body::before{background:radial-gradient(55% 42% at 88% -6%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 72%)}
body::after{opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce),(prefers-contrast:more),print{
  body::before,body::after{display:none}}

/* 3. Card lift: every card that is one clickable choice rises 3px and its hairline warms to the
   accent (180ms), presses on :active with the site press (scale .97), and shows a ring for keyboard focus inside it. Mouse and
   trackpad only, so a tap never leaves a card stuck up. Nested cards do not lift twice. */
:root{--lift-ease:cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  html:root :is(.pg-card,.pg-plan,.op-tier,.op-family-card,a.op-family,.op-cards .offer-row,.service-card,.svc-tile,.mc-card,.mx-trust-grid a):not(:is(.pg-card,.op-family-card,.op-tier,.mc-card) *){
    transition:transform .18s var(--lift-ease),border-color .18s ease-out,box-shadow .18s var(--lift-ease)}
  html:root :is(.pg-card,.pg-plan,.op-tier,.op-family-card,a.op-family,.op-cards .offer-row,.service-card,.svc-tile,.mc-card,.mx-trust-grid a):not(:is(.pg-card,.op-family-card,.op-tier,.mc-card) *):hover{
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 62%,var(--line))}
  html:root :is(.pg-card,.pg-plan,.op-tier,.op-family-card,a.op-family,.op-cards .offer-row,.service-card,.svc-tile,.mc-card,.mx-trust-grid a):not(:is(.pg-card,.op-family-card,.op-tier,.mc-card) *):active{
    transform:scale(.97);transition-duration:80ms}
}
html:root :is(.pg-card,.pg-plan,.op-tier,.op-family-card,.service-card,.svc-tile,.mc-card):has(:focus-visible){
  border-color:color-mix(in srgb,var(--accent) 62%,var(--line))}
@media (prefers-reduced-motion:reduce){
  html:root :is(.pg-card,.pg-plan,.op-tier,.op-family-card,a.op-family,.op-cards .offer-row,.service-card,.svc-tile,.mc-card,.mx-trust-grid a):is(:hover,:active){transform:none}
}

/* 4. Scroll reveal: section heads and cards rise 18px and fade in once, about 500ms, as they
   enter. Visible by default: only theme.js adds .rv, only to things below the fold, and only once
   an IntersectionObserver is already watching them. Reduced motion never hides anything. */
html.rv-on .rv{opacity:0;transform:translateY(18px)}
html.rv-on .rv.rv-in{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1);transition-delay:var(--rv-d,0ms)}
html.rv-on .fx-reveal{animation:none}
@media (prefers-reduced-motion:reduce){html.rv-on .rv{opacity:1;transform:none;transition:none}}

/* 5. Step rails: numbered or dotted step lists read as one left-hand line with a mark per step. */
html:root .fx-doc ol.steps>li:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;bottom:calc(-1.1em + 4px);width:1px;
  background:var(--fx-line-strong,var(--line))}
html:root .hi-steps li{position:relative}
html:root .hi-steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:41px;bottom:-15px;width:1px;background:var(--edge-strong,var(--line))}