/* Feerasta house design system, shared across all division landing pages.
   Tokens: navy var(--navy), gold var(--gold), ivory var(--ivory), Fraunces (display) + Inter (text). */
/* Self-hosted Fraunces + Inter (both OFL). Replaces the Google Fonts @import:
   an @import serialised HTML -> CSS -> Google -> font, and sent every visitor's IP
   to a third party on a site whose promise is that data stays yours. Same families,
   same subsets and unicode-ranges Google served, so rendering is unchanged. Both are
   variable fonts, so one file covers 400-600 per style and subset. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/fraunces-italic-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:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/fraunces-italic-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:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/fraunces-italic-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;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/fraunces-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:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/fraunces-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:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/fraunces-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;}
@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{
  --navy-deep:#0b1018; --navy:#10161f; --navy-soft:#161f2e;
  --gold:#b68b53; --gold-soft:#d8b375; --ivory:#e9e3d7; --cream:#f4f0e7;
  --muted:#9aa3b2; --line:rgba(233,227,215,.12);
  --panel:#0e1622; --sage:#8fae86; --lilac:#a394c8;
  color-scheme:dark;
  --maxw:1140px;
}
*{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:'Fraunces',Georgia,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:'Fraunces',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:'Fraunces',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(--gold);color:#12100e;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(--gold-soft)}
.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(--gold);color:#12100e;border:1px solid var(--gold);box-shadow:none}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);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:'Fraunces',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:'Fraunces',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:'Fraunces',serif;font-size:40px;font-weight:500}
.price span{font-size:15px;color:var(--muted);font-family:var(--font-body, Inter, sans-serif)}

/* ---- 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:'Fraunces',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:'Fraunces',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:no-repeat center/contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b68b53' 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")}
.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(9,13,20,.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. */
:root[data-theme="light"]{
  --navy-deep:#fdfcf4;      /* page: warm lumen */
  --navy:#f5f2e9;           /* alternate band */
  --navy-soft:#fffdf8;      /* card base: warm paper, never #fff */
  --panel:#fffdf8;
  --gold:#9a7134; --gold-soft:#7d5a26;
  --ivory:#1a1614;          /* ink: warm near-black, not navy */
  --cream:#fdfcf4;
  --muted:#6b6459; --line:rgba(94,84,72,.16);
  --sage:#4f6f48; --lilac:#5b4a8f;
  color-scheme:light;
  /* Warm structural line, the thing that replaces most of the old shadow. */
  --edge:rgba(94,84,72,.18);
  --edge-strong:rgba(94,84,72,.30);
}
: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:#fffdf8 !important;
  border:1px solid var(--edge) !important;
  box-shadow:0 1px 2px rgba(94,84,72,.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:#fffefb !important;
  box-shadow:0 1px 3px rgba(94,84,72,.07) !important;
}

/* Panels: the one place something genuinely sits above the page. */
:root[data-theme="light"] .panel{
  background:#fffdf8;
  border:1px solid var(--edge-strong);
  box-shadow:0 12px 40px -28px rgba(94,84,72,.45);
}
:root[data-theme="light"] .nav{
  background:rgba(253,252,244,.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:#9a7134;
  color:#fdfcf4;
  box-shadow:none;
  border:1px solid #8a6428;
}
:root[data-theme="light"] .btn-gold:hover{background:#87612a;box-shadow:none}
/* The warm-black secondary: for pages where gold on gold would shout. */
:root[data-theme="light"] .btn-ink{background:#1a1614;color:#fdfcf4;border:1px solid #1a1614}
:root[data-theme="light"] .btn-ink:hover{background:#2d2928}
:root[data-theme="light"] .btn-ghost{border-color:var(--edge-strong);color:var(--ivory)}
:root[data-theme="light"] .btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(154,113,52,.05)}

/* 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,#f7f3e8,var(--navy-deep));
}
:root[data-theme="light"] .chip{
  background:#fffdf8;border-color:var(--edge);box-shadow:none;
}
:root[data-theme="light"] .card .ic{background:rgba(154,113,52,.08);border-color:rgba(154,113,52,.28)}
/* 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(35,43,58,.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:'Fraunces',Georgia,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:#f8f5ec}
@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:#f8f5ec}
@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:'Fraunces',Georgia,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:#0b1018;color:#e9e3d7}
/* 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(216,179,117,.20), transparent 68%),
    conic-gradient(from 200deg at 82% -4%, rgba(216,179,117,.09), transparent 22%, rgba(216,179,117,.06) 40%, transparent 60%)}
:root[data-theme="light"] .hero::before{background:radial-gradient(900px 620px at 78% 0%, rgba(216,179,117,.30), transparent 70%),
    conic-gradient(from 200deg at 82% -6%, rgba(216,179,117,.13), transparent 24%, rgba(216,179,117,.08) 42%, transparent 62%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,16,24,.18), rgba(11,16,24,.5) 60%, rgba(11,16,24,.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 #0b1018. 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:#fdfcf4;color:#1a1614}
: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(253,252,244,0), rgba(253,252,244,.30) 62%, rgba(253,252,244,.9) 100%)}
:root[data-theme="light"] .hero h1{color:#1a1614}
:root[data-theme="light"] .hero .sub{color:color-mix(in srgb, #1a1614 74%, transparent)}
:root[data-theme="light"] .hero-note{color:color-mix(in srgb, #1a1614 55%, transparent)}
:root[data-theme="light"] .hero-capture input{color:#1a1614}
:root[data-theme="light"] .hero-capture input::placeholder{color:color-mix(in srgb,#1a1614 45%,transparent)}
@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:'Fraunces',Georgia,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:'Fraunces',Georgia,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:'Fraunces',Georgia,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 Fraunces and Inter 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;
}