/* ============================================================================
SOL Growth — Unified Theme (blended system)
One design language across the whole site: editorial paper + charcoal, teal +
gold accents, Bricolage display / Inter body, and the SOL Motion Standard
(see /brand/sol-motion.{css,js}). Every page shares this + the nav/footer shell.
Colour tokens are the authoritative brand values from CLAUDE.md §12.
Contrast: every text/background pair below is >= 4.5:1 (>= 3:1 for large text
and non-text UI). Teal #0F8B8D is decoration only — text/CTA fills use --deep.
========================================================================== */
:root{
/* Branded icon set — inline SVG as data URIs, painted with currentColor via mask.
Emoji are deliberately not used anywhere: they render inconsistently per platform
(iOS gave the CTA arrow an emoji box) and they are not brand assets. */
--icon-arrow:url('data:image/svg+xml;utf8,');
--icon-whatsapp:url('data:image/svg+xml;utf8,');
--icon-calendar:url('data:image/svg+xml;utf8,');
--icon-coin:url('data:image/svg+xml;utf8,');
--icon-clock:url('data:image/svg+xml;utf8,');
--icon-check:url('data:image/svg+xml;utf8,');
--paper:#FBF9F5; --paper2:#F4F1EA; --card:#FFFFFF; --ink:#1A1916; --muted:#5E5B53;
--faint:#6B6456; --line:#E6E0D5; --line2:#EFEAE0; --teal:#0F8B8D; --deep:#0A6F70;
--deeper:#095B5C;
--gold:#C8922A; --night:#12100D; --night2:#1B1813; --tint:#E9F3F2;
/* type scale — 6 steps, nothing below .75rem (12px). Display sizes are the
clamp()s on h1/h2/h3 and are deliberately outside this ramp. */
--t1:.75rem; --t2:.85rem; --t3:.95rem; --t4:1.05rem; --t5:1.35rem; --t6:1.55rem;
/* spacing — 4px scale */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;
--shadow:0 2px 4px rgba(26,25,22,.04),0 22px 55px -30px rgba(26,25,22,.30);
--shadow-lg:0 50px 120px -50px rgba(10,111,112,.5);
--disp:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
--body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[dir="rtl"]{--disp:"Noto Sans Arabic",sans-serif;--body:"Noto Sans Arabic",sans-serif;--mono:"Noto Sans Arabic",sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0;line-height:1.32}
html[dir="rtl"] .accent{font-style:normal}
/* Arabic is a connected script — tracking and uppercasing break the joins.
Every tracked/uppercased micro-label is neutralised in RTL. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .mono,
html[dir="rtl"] .hero .loc,
html[dir="rtl"] .chip .k,
html[dir="rtl"] .vcard .num,
html[dir="rtl"] .layer .ix,
html[dir="rtl"] .tstep .day,
html[dir="rtl"] .pcard .tag,
html[dir="rtl"] .fcol h5,
html[dir="rtl"] .fcol h3,
html[dir="rtl"] .wtile .wl small,
html[dir="rtl"] .heromock .hm-top,
html[dir="rtl"] .heromock .hm-k b{letter-spacing:0;text-transform:none;word-spacing:normal}
html[dir="rtl"] .pnum,html[dir="rtl"] .pt-tag,html[dir="rtl"] .case dt,
html[dir="rtl"] .ph-l{letter-spacing:0;text-transform:none;word-spacing:normal}
*{box-sizing:border-box}
/* visually hidden — text that must reach assistive tech but never paint */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
/* every is wrapped in for the WebP source — keep the itself
as the laid-out box so no existing selector or flex/grid rule shifts. */
picture{display:contents}
a{color:inherit;text-decoration:none}
/* line-height 1.06 (not 1.02) + a hair of bottom padding so descenders/italics never clip inside
sections that use overflow:hidden for their rounded-corner glow */
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink);text-wrap:balance;margin:0;padding-bottom:.03em}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:1.32rem;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s6)}
.eyebrow{font-family:var(--mono);font-size:var(--t1);letter-spacing:.2em;text-transform:uppercase;color:var(--deep);font-weight:500}
/* Bricolage Grotesque ships no true italic — the browser-synthesised oblique is
visibly wrong at 4.6rem/800, so the accent is colour only. */
.accent{color:var(--teal)}
section{padding:96px 0}
@media(max-width:860px){section{padding:68px 0}}
/* sticky nav is 70px — anchor targets must clear it */
section[id],[id][data-anchor],main[id]{scroll-margin-block-start:86px}
.shead{max-width:60ch;margin-bottom:44px}
.shead p{font-size:var(--t4);color:var(--muted);margin-top:14px}
/* focus — one visible ring everywhere. Gold on the dark bands where deep teal
would not clear 3:1 against #12100D. */
:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.dark :focus-visible,.ctaband :focus-visible,.funnel :focus-visible,
.reel :focus-visible,.vcard:focus-visible,.wafloat:focus-visible,
.heroart :focus-visible{outline-color:var(--gold)}
/* skip link — off-screen until focused */
.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:200}
.skip:focus{inset-inline-start:var(--s3);inset-block-start:var(--s3);background:var(--ink);color:var(--paper);padding:var(--s3) var(--s5);border-radius:100px;font-weight:600;font-size:var(--t2)}
/* scroll reveal — the homepage/marketing `.rv` hook. Lives here (not per page) so
every surface on unified.css gets the SOL Motion Standard. See CLAUDE.md §12.1. */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
/* buttons — one system */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;padding:var(--s3) var(--s6);font-weight:600;font-size:var(--t3);white-space:nowrap;transition:transform .18s cubic-bezier(.2,.9,.3,1),background .18s,box-shadow .18s,border-color .18s;cursor:pointer;will-change:transform}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);background:var(--night);box-shadow:0 16px 30px -14px rgba(26,25,22,.55)}
/* #0F8B8D on white is 4.12:1 — fails 1.4.3 for a 15px semibold label. --deep is 5.96:1. */
.btn-teal{background:var(--deep);color:#fff}
.btn-teal:hover{transform:translateY(-2px);background:var(--deeper);box-shadow:0 16px 34px -14px rgba(10,111,112,.65)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
/* WhatsApp brand green stays; the label goes near-black (8.7:1 instead of 1.98:1) */
.btn-wa{background:#25D366;color:#0A1E10}.btn-wa:hover{transform:translateY(-2px);background:#1EB257}
/* Branded CTA arrow.
The markup carries a bare "↗"/"→" glyph. iOS applies emoji presentation to those codepoints,
so the button rendered a boxed colour emoji instead of a typographic arrow (reported on a
real device). Blanking the glyph and painting an inline SVG via mask fixes every page at once
without touching 146 occurrences in the HTML, inherits currentColor so it works on every
button variant, and is direction-aware: the arrow flips under RTL so it always points the way
the reader is going. */
.btn .ar{
font-size:0; line-height:0; display:inline-block;
inline-size:.72em; block-size:.72em; vertical-align:-.04em;
background:currentColor;
-webkit-mask:var(--icon-arrow) center/contain no-repeat;
mask:var(--icon-arrow) center/contain no-repeat;
transition:transform .18s var(--ease-expo,cubic-bezier(.16,1,.3,1));
}
html[dir=rtl] .btn .ar{transform:scaleX(-1)}
.btn:hover .ar{transform:translateX(4px)}
html[dir=rtl] .btn:hover .ar{transform:scaleX(-1) translateX(4px)}
/* NAV */
nav.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
nav.site.scrolled{border-color:var(--line)}
nav.site .row{display:flex;align-items:center;justify-content:space-between;height:70px;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:26px;width:auto}
.navlinks{display:flex;align-items:center;gap:var(--s6);font-size:var(--t3);color:var(--muted)}
/* 2.5.8 — 0.95rem x 1.6 is 24px; the padding keeps the hit target clear of the floor */
.navlinks a{position:relative;display:inline-block;padding-block:var(--s1);transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.navtools{display:flex;align-items:center;gap:var(--s3)}
/* language switch — Arabic-capable font stack (Inter for Latin, Noto for العربية), no tracking */
.lang,[data-langbtn]{font-family:"Inter","Noto Sans Arabic",system-ui,sans-serif;letter-spacing:0}
.lang{font-size:var(--t2);font-weight:600;border:1px solid var(--line);border-radius:100px;padding:var(--s2) var(--s4);cursor:pointer;background:transparent;color:var(--ink);transition:border-color .2s,background .2s}
.lang:hover{border-color:var(--ink);background:var(--paper2)}
.navlogin{font-size:var(--t2);color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:var(--s2) var(--s4)}
.navlogin:hover{border-color:var(--ink);color:var(--ink)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:transparent;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline-start:0;width:18px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:900px){.navlinks,.navtools .navlogin,.navtools .lang{display:none}.burger{display:flex}}
/* transform alone leaves all 10 links in the tab order on every viewport — including
desktop, where the burger that opens this is display:none. visibility is the real
switch; the delayed transition keeps the slide-out animation intact. */
.drawer{position:fixed;inset:0;z-index:70;background:var(--paper);transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;display:flex;flex-direction:column;padding:var(--s6)}
.drawer.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
html[dir="rtl"] .drawer{transform:translateX(-100%)}
html[dir="rtl"] .drawer.open{transform:none}
.drawer .dtop{display:flex;align-items:center;justify-content:space-between;height:44px}
.drawer .dclose{font-size:26px;background:none;border:0;cursor:pointer;color:var(--ink);width:44px;height:44px}
.drawer a{font-family:var(--disp);font-weight:700;font-size:var(--t6);padding:var(--s3) 0;border-bottom:1px solid var(--line2)}
.drawer .dcta{margin-top:auto;display:grid;gap:10px}
/* motion pause control — WCAG 2.2.2. Hover-pause is mouse-only and does not
satisfy it; this is a real, keyboard-reachable switch for the marquee, the
image wall and the autoplaying reel. */
.motionbar{display:flex;justify-content:flex-end;padding-block-start:var(--s2)}
.motionctl{font-family:var(--body);font-size:var(--t1);font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:100px;padding:6px 14px;cursor:pointer;transition:border-color .2s,color .2s}
.motionctl:hover{border-color:var(--ink);color:var(--ink)}
html.motion-off .strip .track,html.motion-off .wtrack{animation-play-state:paused}
html.motion-off .sol-grain{animation:none}
/* HERO */
.hero{position:relative;padding:56px 0 30px;background:
radial-gradient(1100px 520px at 88% -6%,rgba(15,139,141,.13),transparent 62%),
radial-gradient(760px 460px at -4% 10%,rgba(200,146,42,.09),transparent 58%),var(--paper)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.hero .loc{color:var(--deep);font-weight:600;font-size:var(--t2);letter-spacing:.05em}
.hero h1{margin:18px 0}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:52ch;margin:0 0 28px;line-height:1.7}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero .note{margin-top:18px;font-size:var(--t2);color:var(--faint)}
.hero .note b{color:var(--deep);font-weight:600}
.heroart{position:relative}
.heroart .shot{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/13;background:linear-gradient(140deg,var(--night),#0a3b3c)}
.heroart .shot img,.heroart .shot video{width:100%;height:100%;object-fit:cover}
/* live-portal mock — was 8 inline style blocks: untokenised, untranslatable, and
clipped below ~420px. */
.heromock{background:#0D1413;padding:22px;display:block}
.heromock .hm-top{display:flex;align-items:center;gap:var(--s2);color:#7FD8D0;font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em}
.heromock .hm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.heromock .hm-k{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:var(--s3)}
.heromock .hm-k b{display:block;color:#AEBFBC;font-family:var(--mono);font-size:var(--t1);letter-spacing:.08em;font-weight:500;line-height:1.3}
.heromock .hm-k i{display:block;font-style:normal;color:#fff;font-family:var(--disp);font-weight:800;font-size:1.15rem;margin-top:var(--s1);line-height:1.2}
.heromock .hm-chart{width:100%;height:90px;margin-top:var(--s4)}
.heromock .hm-plat{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.heromock .hm-plat span{flex:1;text-align:center;background:rgba(255,255,255,.05);border-radius:8px;padding:var(--s2);color:#CBD6D3;font-size:var(--t1);font-weight:600}
/* Compliance label for the mock's figures (CLAUDE.md §13/§15) — must stay legible, so it uses
the same #CBD6D3 as .hm-plat (10.6:1 on --night), not a dimmer "fine print" grey. */
.heromock .hm-note{margin-top:var(--s2);color:#CBD6D3;font-size:var(--t1);line-height:1.45;text-align:start}
@media(max-width:420px){
.heroart .shot{aspect-ratio:auto}
.heromock{padding:var(--s4)}
.heromock .hm-kpis{grid-template-columns:1fr;gap:6px}
.heromock .hm-plat span{flex:1 1 calc(50% - 3px)}
}
.chip{position:absolute;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:var(--s3) var(--s4)}
.chip .k{font-family:var(--mono);color:var(--faint);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase}
.chip .v{font-family:var(--disp);font-weight:800;font-size:var(--t5);color:var(--deep);line-height:1.1}
/* Straddles the mock's top edge. At inset-block-start:16px it sat in the same band as the
KPI row and covered the third tile (ROAS) by 128px at 1440px. */
.chip.a{inset-block-start:-20px;inset-inline-end:-18px}
.chip.b{inset-block-end:18px;inset-inline-start:-16px}
/* on small screens the floating chips crowd the hero + collide with the WhatsApp button — hide them
(the dashboard mockup already shows the KPIs) */
@media(max-width:640px){.chip{display:none}}
/* Our Work — motion reel + endless up/down scrolling image wall */
.reel{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:21/9;box-shadow:var(--shadow-lg);margin-bottom:16px;background:var(--night)}
.reel video{width:100%;height:100%;object-fit:cover}
.reel-l{position:absolute;inset-inline-start:16px;inset-block-end:14px;color:#fff;font-weight:600;font-size:var(--t2);background:rgba(10,10,8,.62);padding:6px var(--s3);border-radius:100px;backdrop-filter:blur(6px)}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;height:600px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
@media(max-width:900px){.wall{grid-template-columns:repeat(2,1fr);height:520px}}
.wcol{overflow:hidden}
.wtrack{display:flex;flex-direction:column;will-change:transform;animation-name:wscroll;animation-timing-function:linear;animation-iteration-count:infinite}
.wtrack.down{animation-direction:reverse}
.wtrack img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;margin-bottom:14px;box-shadow:var(--shadow)}
.wtrack picture{display:contents}
@keyframes wscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.wall:hover .wtrack{animation-play-state:paused}
/* (legacy) tile grid — kept for any page still using it */
.work{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.work{grid-template-columns:repeat(2,1fr)}}
.wtile{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow);background:var(--night)}
.wtile img,.wtile video{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wtile:hover img{transform:scale(1.07)}
.wtile-video{grid-column:span 2;aspect-ratio:16/10}
@media(max-width:900px){.wtile-video{grid-column:span 2}}
.wtile .wl{position:absolute;inset-inline:0;inset-block-end:0;padding:14px 14px 13px;color:#fff;font-weight:600;font-size:var(--t2);background:linear-gradient(transparent,rgba(10,10,8,.8))}
.wtile .wl small{display:block;font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;opacity:.85;text-transform:uppercase;margin-bottom:2px}
/* ── Case cards ─────────────────────────────────────────────────────────────
Replaces the aria-hidden, unlabelled image wall. Vertical · what ran · one
headline result · one honest caveat. Every value is a [[PLACEHOLDER]] and the
whole block ships with `hidden` — nothing unevidenced is ever published.
Preview with /?preview=cases. Contrast on --card #FFF: --ink 17.6:1,
--muted 6.2:1, --faint 5.4:1, --deep on --tint 5.3:1. */
.casebar{margin-top:var(--s6);font-size:var(--t3);color:var(--muted);max-width:66ch}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--s6)}
/* author `display:grid` beats the UA `[hidden]{display:none}` rule regardless of
specificity — without this the unfilled placeholder cards would ship publicly. */
.cases[hidden]{display:none}
@media(max-width:900px){.cases{grid-template-columns:1fr}}
.case{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:var(--s6);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.case-t{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.vchip{font-size:var(--t1);font-weight:600;color:var(--deep);background:var(--tint);border-radius:100px;padding:4px 11px}
.case h3{font-size:var(--t4);line-height:1.3;margin:0}
.case-d{margin:0;display:block}
.case dt{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:18px;margin-bottom:6px}
.case dd{margin:0;font-size:var(--t3);color:var(--ink);line-height:1.5}
.case dd.big{font-family:var(--disp);font-weight:800;font-size:var(--t6);line-height:1.25;letter-spacing:-.02em}
.case dd.sub{font-size:var(--t2);color:var(--muted);margin-top:4px}
.case-f{margin-top:auto;padding-top:20px;font-size:var(--t1);color:var(--faint);line-height:1.55}
/* unfilled slot marker — deliberately loud so it can never ship by accident */
.ph{color:var(--faint);border:1px dashed var(--deep);border-radius:6px;padding:2px 6px}
/* trust strip / marquee */
.strip{border-block:1px solid var(--line);background:var(--card);overflow:hidden;padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* The track is two identical halves and the loop shifts by -50%, so the seam only
stays invisible while one half is at least as wide as the viewport. min-width:200%
plus flex-grow on the labels guarantees that at any width — both halves grow by
the same amount, so they stay byte-identical and the seam never opens a gap. */
.strip .track{display:flex;gap:52px;width:max-content;min-width:200%;animation:marq 34s linear infinite}
.strip:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
html[dir=rtl] .strip .track{animation-direction:reverse}
.strip .track span{flex:1 0 auto;font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:52px;white-space:nowrap;opacity:.8}
.strip .track span::after{content:"✦";color:var(--gold);font-size:var(--t3)}
/* generic grid of cards */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:var(--s6);box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
a.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(26,25,22,.35);border-color:color-mix(in srgb,var(--teal) 30%,var(--line))}
.card .ci{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--deep);margin-bottom:14px;font-size:var(--t4)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:var(--t3)}
/* verticals gallery */
.vgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.vcard{position:relative;border-radius:20px;overflow:hidden;background:var(--night);color:#fff;min-height:330px;display:flex;align-items:flex-end;isolation:isolate;box-shadow:var(--shadow)}
.vcard picture{display:contents}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.vcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,8,.05) 30%,rgba(10,10,8,.84))}
.vcard:hover img{transform:scale(1.06)}
.vcard .b{padding:var(--s6)}
.vcard .num{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;opacity:.85}
.vcard h3{color:#fff;font-size:var(--t6);margin:6px 0 6px}
.vcard p{font-size:var(--t3);opacity:.9;margin:0 0 14px;max-width:34ch}
.vcard .go{display:inline-flex;align-items:center;gap:7px;background:var(--deep);color:#fff;font-weight:600;font-size:var(--t2);padding:10px var(--s4);border-radius:100px;transition:transform .18s,background .18s}
.vcard .go:hover{transform:translateY(-2px);background:var(--deeper)}
.v-a{grid-column:span 7}.v-b{grid-column:span 5}.v-c{grid-column:span 5}.v-d{grid-column:span 7}
@media(max-width:820px){.vcard{grid-column:1/-1!important;min-height:260px}}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:var(--s7) var(--s6);border-inline-start:1px solid var(--line)}
.stat:first-child{border-inline-start:0}
@media(max-width:760px){.stat:nth-child(odd){border-inline-start:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}
/* 2 columns x 48px of cell padding overflows a 320–430px viewport */
@media(max-width:430px){
.stats{grid-template-columns:1fr}
.stat{padding:var(--s6) var(--s5);border-inline-start:0}
.stat:nth-child(n+2){border-top:1px solid var(--line)}
}
.stat .n{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);color:var(--ink);line-height:1.08;overflow-wrap:anywhere}
.stat .n em{font-style:normal;color:var(--teal)}
.stat .l{font-size:var(--t2);color:var(--muted);margin-top:8px;line-height:1.45}
/* funnel band (division pages) */
.funnel{background:var(--night);color:#F1EDE4;padding:var(--s6) 0}
.funnel .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:center}
.funnel .st{font-family:var(--disp);font-weight:800;font-size:clamp(1rem,2.4vw,1.4rem)}
.funnel .ar{color:var(--gold)}
/* dark system band */
.dark{background:var(--night);color:#F1EDE4;border-radius:28px;padding:64px 40px;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 380px at 82% 0%,rgba(15,139,141,.26),transparent 60%),radial-gradient(540px 320px at 0% 100%,rgba(200,146,42,.15),transparent 60%);pointer-events:none}
.dark>*{position:relative}
.dark h2{color:#fff}.dark .shead p{color:#C7C0B2}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media(max-width:820px){.layers{grid-template-columns:1fr}}
.layer{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:var(--s5);background:rgba(255,255,255,.03);transition:background .25s,border-color .25s}
.layer:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.layer .ix{font-family:var(--mono);font-size:var(--t1);color:var(--gold);letter-spacing:.1em}
.layer h3,.layer h4{font-family:var(--disp);font-weight:800;font-size:var(--t4);margin:8px 0 5px;letter-spacing:-.01em;line-height:1.2;color:inherit}
.layer p{margin:0;font-size:var(--t2);color:#C7C0B2;line-height:1.5}
/* ── The operating-system pipeline ──────────────────────────────────────────
Replaces the six disconnected .layer boxes. The layout IS the argument:
one continuous rail, six stations, and the payload handed between them
rendered on the connector. Flex row inherits `dir`, so RTL mirrors for free;
the only physical thing anywhere is the arrowhead's clip-path, flipped by a
transform. Contrast on --night #12100D: rail rgba(255,255,255,.38) = 3.6:1,
arrowhead .55 = 6.3:1, dot/label #7FD8D0 = 11.4:1, body #C7C0B2 = 10.5:1,
number --gold = 6.9:1. Collapses to a vertical flow below 1040px. */
.pipe{display:flex;align-items:flex-start;margin-top:var(--s6)}
.pstage{flex:1 1 0;min-width:0}
.prail{position:relative;height:12px;display:flex;align-items:center}
.pdot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:#7FD8D0;box-shadow:0 0 0 4px rgba(127,216,208,.15)}
.prail::after{content:"";position:absolute;inset-inline-start:11px;inset-inline-end:0;inset-block-start:5px;height:2px;background:rgba(255,255,255,.38)}
.pstage:last-child .prail::after{display:none}
.pnum{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;color:var(--gold);margin-top:14px;line-height:1}
.pstage h3{font-family:var(--disp);font-weight:800;font-size:var(--t3);letter-spacing:-.01em;line-height:1.2;color:#fff;margin:6px 0 6px;padding-inline-end:10px}
.pstage p{margin:0;font-size:.78rem;line-height:1.5;color:#C7C0B2;padding-inline-end:16px;overflow-wrap:break-word}
.phand{flex:0 0 clamp(56px,5.6vw,78px);display:flex;flex-direction:column;align-items:center}
.ph-a{position:relative;width:100%;height:12px}
.ph-a::before{content:"";position:absolute;inset-inline:0;inset-block-start:5px;height:2px;background:rgba(255,255,255,.38)}
.ph-a::after{content:"";position:absolute;inset-inline-end:0;inset-block-start:1px;width:8px;height:10px;background:rgba(255,255,255,.55);clip-path:polygon(0 0,100% 50%,0 100%)}
html[dir="rtl"] .ph-a::after{transform:scaleX(-1)}
/* max-width pins the label to its connector column. Without it the text overflows the 58px
flex basis and butts straight against the next stage's .pnum -- measured at a 0px gap in
4 of 5 connectors at 1440px, so "positioning" and "02" read as one string. */
/* max-width pins the label to its connector column; without it the text overflowed the flex
basis and butted against the next stage's .pnum (measured 0px gap at 1440px, so
"positioning" and "02" read as one string). The column is sized to fit the longest single
word ("positioning") so wrapping happens at spaces -- break-word/hyphens produced
"posi-tioning" and "ap-proved", which is worse than the collision it fixed. */
.ph-l{margin-top:10px;max-width:100%;padding-inline:3px;font-size:var(--t1);font-weight:600;line-height:1.35;color:#7FD8D0;text-align:center;overflow-wrap:break-word;hyphens:none}
@media(max-width:1120px){.dark{padding-inline:28px}}
@media(max-width:1040px){
.pipe{display:block}
.prail::after{inset-inline-end:auto;width:30px}
.pstage:last-child .prail::after{display:block}
.pstage h3{font-size:var(--t4);padding-inline-end:0}
.pstage p{font-size:var(--t2);padding-inline-end:0;max-width:64ch}
.phand{flex-direction:row;align-items:center;gap:12px;padding-block:14px;padding-inline-start:2px}
.ph-a{flex:0 0 auto;width:12px;height:26px}
.ph-a::before{inset-inline:auto;inset-inline-start:5px;inset-block:0;width:2px;height:auto}
.ph-a::after{inset-inline-start:1px;inset-inline-end:auto;inset-block-start:auto;inset-block-end:0;width:10px;height:8px;clip-path:polygon(0 0,100% 0,50% 100%)}
html[dir="rtl"] .ph-a::after{transform:none}
.ph-l{margin-top:0;text-align:start;font-size:var(--t2)}
}
/* timeline */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.tl{grid-template-columns:1fr 1fr}}
.tstep{border:1px solid var(--line);border-radius:16px;padding:var(--s5);background:var(--card)}
.tstep .day{font-family:var(--mono);font-size:var(--t1);color:var(--deep);letter-spacing:.1em}
.tstep h3,.tstep h4{font-family:var(--disp);font-weight:800;font-size:var(--t4);margin:8px 0 5px;line-height:1.2}
.tstep p{margin:0;font-size:var(--t2);color:var(--muted)}
.tstep .bar{height:4px;border-radius:4px;background:var(--paper2);margin-top:12px;overflow:hidden}
.tstep .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold))}
/* plans */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.pgrid{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--card);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard.pop{border-color:var(--teal);box-shadow:0 24px 60px -34px rgba(10,111,112,.45)}
.pcard .tag{align-self:flex-start;font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;color:#fff;background:var(--deep);padding:5px var(--s3);border-radius:100px;margin-bottom:12px}
/* .pn is an
so the Plans section is navigable by heading — every visual
property is pinned here, so promoting the tag changes nothing on screen. */
.pcard .pn{font-family:var(--disp);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin:0;padding:0}
.pcard .pf{font-size:var(--t2);color:var(--muted);margin:4px 0 16px}
.pcard ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.pcard li{font-size:var(--t3);display:flex;gap:9px}.pcard li::before{content:"→";color:var(--deep);font-weight:700}
.pcard .btn{margin-top:auto;justify-content:center}
.note{margin-top:var(--s5);text-align:center;font-size:var(--t2);color:var(--faint);max-width:72ch;margin-inline:auto}
/* ── Plans comparison table ─────────────────────────────────────────────────
Replaces three near-identical bullet lists with one grid where the rows are
the dimensions and the columns are the plans — so what actually differs is
readable in one pass. Values transcribed from config/business.ts (TIERS).
Small screens: the region scrolls sideways (permitted by 1.4.10 for data
tables) with the row-header column pinned via inset-inline-start, so the RTL
mirror is automatic. The region is focusable so the scroll is keyboard-
reachable (2.1.1). Contrast: row headers --muted on --paper 6.5:1, values
--ink on --paper 16.7:1 and on --tint 15.5:1, ticks --deep on --tint 5.3:1,
MOST POPULAR --night on --gold 6.9:1, plan name #fff on --deep 6.0:1. */
.pt-hint{display:none;font-size:var(--t2);color:var(--faint);margin-bottom:10px}
@media(max-width:920px){.pt-hint{display:block}}
/* padding+negative margin so a focus ring inside the scroller is never clipped */
.ptwrap{overflow:auto;padding:7px;margin:-7px}
.ptable{width:100%;min-width:740px;border-collapse:separate;border-spacing:0;font-size:var(--t3)}
.ptable th,.ptable td{text-align:start;vertical-align:top;padding:var(--s4);border-block-end:1px solid var(--line);font-weight:400;line-height:1.45}
.ptable thead th,.ptable thead td{vertical-align:bottom;border-block-end:0;padding-block-end:var(--s5)}
.ptable th[scope="row"]{position:sticky;inset-inline-start:0;z-index:2;width:clamp(118px,24vw,190px);background:var(--paper);color:var(--muted);font-weight:600;font-size:var(--t2)}
.ptable .pt-corner{position:sticky;inset-inline-start:0;z-index:2;background:var(--paper);border-block-end:0}
.ptable td{color:var(--ink)}
.ptable .pop{background:var(--tint)}
.ptable thead th.pop{background:var(--deep);border-start-start-radius:14px;border-start-end-radius:14px}
.ptable thead th.pop .pn{color:#fff}
.ptable tfoot td{border-block-end:0;padding-block-start:var(--s5)}
.ptable tfoot td.pop{border-end-start-radius:14px;border-end-end-radius:14px}
.ptable tfoot .btn{width:100%}
.pt-tag{display:inline-block;font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;color:var(--night);background:var(--gold);padding:4px 11px;border-radius:100px;margin-bottom:10px}
.ptable .pn{font-family:var(--disp);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:0;padding:0}
.ptable .num{font-family:var(--disp);font-weight:800;font-size:var(--t5);letter-spacing:-.02em;line-height:1.2}
.ptable .tick{color:var(--deep);font-weight:800}
.ptable .dash{color:var(--faint)}
@media(max-width:560px){
.ptable{min-width:600px;font-size:var(--t2)}
.ptable th,.ptable td{padding:var(--s3)}
.ptable .num{font-size:var(--t4)}
}
/* faq */
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--deep);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);font-size:var(--t3);margin:10px 0 0;max-width:72ch}
/* CTA band */
.ctaband{background:var(--night);color:#fff;border-radius:28px;padding:72px 40px;text-align:center;position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 340px at 50% -10%,rgba(15,139,141,.3),transparent 60%);pointer-events:none}
.ctaband h2{color:#fff;position:relative}
.ctaband p{position:relative;color:#C7C0B2;font-size:var(--t4);max-width:48ch;margin:14px auto 28px}
.ctaband .cta{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* 40px of inline padding on each side eats 80px of a 328px viewport */
@media(max-width:640px){
.dark{padding:44px var(--s5);border-radius:22px}
.ctaband{padding:52px var(--s5);border-radius:22px}
}
/* footer */
footer.site{padding:60px 0 40px;border-top:1px solid var(--line);margin-top:40px}
/* auto-fit grid — the wrapped flex + space-between orphaned the 4th column
between 700 and 1000px */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:34px;align-items:start}
.fbrand{max-width:300px;grid-column:span 2}
@media(max-width:640px){.fbrand{grid-column:auto}}
.fbrand img{height:26px;width:auto;margin-bottom:14px}
.fbrand p{font-size:var(--t2);color:var(--muted)}
.fcol h5,.fcol h3{font-family:var(--mono);font-size:var(--t1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;padding:0;line-height:1.4}
.fcol a{display:block;font-size:var(--t3);color:var(--muted);margin-bottom:5px;padding-block:3px}
.fcol a:hover{color:var(--ink)}
.fbot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:var(--t1);color:var(--faint)}
/* NHRA/SFDA regulatory disclaimer — the least readable text on the page at .72rem */
.compliance{max-width:74ch;font-size:var(--t1);color:var(--faint);line-height:1.55;margin-top:16px}
/* the fixed mobile CTA bar permanently covered this block */
@media(max-width:640px){footer.site{padding-block-end:104px}}
/* whatsapp float + mobile sticky cta */
.wafloat{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:55;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(37,211,102,.6);transition:transform .2s}
/* white on #25D366 is 1.98:1 — below the 3:1 floor for meaningful graphics (1.4.11) */
.wafloat svg,.wafloat svg path{fill:#0A1E10}
.wafloat:hover{transform:scale(1.06)}
.mobilecta{display:none}
/* ONE persistent WhatsApp per viewport.
Previously the floating bubble AND the sticky bar's WhatsApp button both rendered on a phone,
so together with the hero's WhatsApp CTA a user saw three at once (reported from a real
device). The float is now desktop-only, where no sticky bar exists; on mobile the sticky bar
is the single persistent entry point. */
@media(max-width:640px){
.mobilecta{display:flex;position:fixed;inset-inline:12px;inset-block-end:12px;z-index:54;gap:8px;
transform:translateY(140%);transition:transform .45s var(--ease-expo,cubic-bezier(.16,1,.3,1))}
.mobilecta.in{transform:none}
.mobilecta .btn{flex:1}
.wafloat{display:none}
}
/* The primary CTA draws the eye once, as the bar arrives — not a loop. A persistent pulse on a
fixed element is visual noise and an accessibility problem on long pages. */
.mobilecta.in .btn-primary,.mobilecta.in .btn-teal{animation:ctaland .9s var(--ease-expo,cubic-bezier(.16,1,.3,1)) .12s both}
@keyframes ctaland{0%{transform:translateY(6px) scale(.98)}60%{transform:translateY(0) scale(1.02)}100%{transform:none}}
/* ============================================================================
Reduced motion — hard off switch (CLAUDE.md §12.1).
Covers smooth scrolling, both infinite marquees, every hover transform, the
reveal hook and the autoplaying reel.
========================================================================== */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
animation-delay:0s!important;transition-duration:.001ms!important;
transition-delay:0s!important;scroll-behavior:auto!important;
}
.rv{opacity:1!important;transform:none!important}
.strip .track,.wtrack{animation:none!important;transform:none!important}
.wall{height:auto;-webkit-mask-image:none;mask-image:none}
.sol-grain{display:none}
.btn:hover,.btn-teal:hover,.btn-ghost:hover,.btn-primary:hover,.btn-wa:hover,
a.card:hover,.pcard:hover,.vcard:hover img,.wtile:hover img,.vcard .go:hover,
.wafloat:hover,.btn:hover .ar,.btn:active{transform:none!important}
.motionbar{display:none}
}
/* ── Branded card icons ─────────────────────────────────────────────────────────────────────
The .ci chips previously held bare glyphs (✦ ⌁ ◷ ✓). Those are symbol codepoints, not brand
assets: they render differently on every platform and iOS gives several of them emoji
presentation. Each chip now declares data-icon and is painted from the inline SVG set in
:root via mask, so it inherits currentColor and stays crisp at any size.
No emoji anywhere — every icon is a drawn brand asset. */
.ci[data-icon]{font-size:0;line-height:0;position:relative}
.ci[data-icon]::before{
content:"";position:absolute;inset:0;margin:auto;
inline-size:52%;block-size:52%;
background:currentColor;
-webkit-mask:var(--ci-src) center/contain no-repeat;
mask:var(--ci-src) center/contain no-repeat;
}
.ci[data-icon="calendar"]{--ci-src:var(--icon-calendar)}
.ci[data-icon="coin"] {--ci-src:var(--icon-coin)}
.ci[data-icon="clock"] {--ci-src:var(--icon-clock)}
.ci[data-icon="check"] {--ci-src:var(--icon-check)}
/* Compliance caption for the landing hero's floating stat chips (CLAUDE.md §13/§15).
Those chips read "ROAS this month 6.7×" and "Cost per lead SAR 5.4" with no qualifier, i.e.
as a real client's numbers. Same fix already applied to the index hero mock. */
.heroart .mocknote{
position:absolute;inset-inline:0;inset-block-end:-2.1em;
font-size:var(--t1);line-height:1.45;color:var(--muted);text-align:center;margin:0;
}
@media(max-width:860px){.heroart .mocknote{position:static;margin-top:var(--s3);text-align:start}}
/* ============================================================================
v8 — SHARED COMPONENTS ADDED WITH THE 2026 REDESIGN
These carry the company-profile deck's visual language onto the website, so
the two surfaces read as one studio: outlined display type, the growth-curve
arc, the PROOF values band, a permissioned partner wall, and the credentials
band. All names are new — nothing above this line changes, so every existing
page keeps rendering exactly as it did.
Source of the same language: /decks/deck.css
========================================================================== */
:root{--teal-lit:#3EBDB8;--gold-lit:#E3B356;--paper3:#EDE8DC}
/* Paragraphs read better with pretty wrapping; harmless where unsupported. */
p,li{text-wrap:pretty}
/* ── Outlined display type ────────────────────────────────────────────────
The counterweight to a solid headline. Bricolage has no true italic, so the
deck and the site both use weight + outline for emphasis instead. */
.outline{color:transparent;-webkit-text-stroke:2px var(--teal);-webkit-text-fill-color:transparent;
paint-order:stroke}
.dark .outline,.ctaband .outline,.proof .outline{-webkit-text-stroke-color:var(--gold)}
@supports not ((-webkit-text-stroke:2px red)){
.outline{color:var(--teal);-webkit-text-fill-color:currentColor}
.dark .outline,.ctaband .outline,.proof .outline{color:var(--gold)}
}
html[dir="rtl"] .outline{-webkit-text-stroke-width:2.5px}
/* ── The growth curve ─────────────────────────────────────────────────────
Ambient artwork behind the hero. Decorative and inert: aria-hidden at the
call site, pointer-events off, and it never sits above content. */
.arcart{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.arcart svg{position:absolute;width:min(1180px,86vw);height:auto;top:-16%;inset-inline-end:-16%;
opacity:.68}
@media(max-width:860px){.arcart svg{opacity:.28;inset-inline-end:-42%}}
.hero > .wrap,.hero-grid{position:relative;z-index:1}
/* ── PROOF — the values band ──────────────────────────────────────────────── */
.proof{background:var(--night);color:#F1EDE4;border-radius:28px;padding:64px 40px 56px;
position:relative;overflow:hidden}
.proof h2{color:#FFFDF8}
.proof > *{position:relative;z-index:1}
.proofword{font-family:var(--disp);font-weight:800;letter-spacing:.02em;line-height:1;
font-size:clamp(3.4rem,11.5vw,10rem);text-align:center;color:#FFFDF8;
margin:36px 0 40px;overflow-wrap:anywhere}
html[dir="rtl"] .proofword{letter-spacing:0;font-size:clamp(3rem,9vw,7.5rem);line-height:1.2}
.pw-ar{display:none}
html[dir="rtl"] .pw-en{display:none}
html[dir="rtl"] .pw-ar{display:block}
.proofgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.proofgrid > div{padding:0 26px;border-inline-start:1px solid rgba(241,237,228,.16)}
.proofgrid > div:first-child{padding-inline-start:0;border-inline-start:0}
.proofgrid b{display:block;font-family:var(--mono);font-size:var(--t1);font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lit);
line-height:1.45;min-height:2.9em}
.proofgrid span{display:block;margin-top:10px;font-size:var(--t2);line-height:1.55;
color:rgba(241,237,228,.72)}
html[dir="rtl"] .proofgrid b{letter-spacing:0;text-transform:none}
@media(max-width:980px){.proofgrid{grid-template-columns:repeat(2,1fr);gap:24px}
.proofgrid > div{padding:0;border-inline-start:0}
.proofgrid b{min-height:0}}
@media(max-width:560px){.proofgrid{grid-template-columns:1fr}
.proof{padding:44px 22px 40px;border-radius:20px}}
/* ── Partner wall ─────────────────────────────────────────────────────────
NOTE: `.wall` is already the scrolling image marquee on the division pages.
This is a different component and is deliberately named differently. */
.logowall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.logowall .lslot{aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;
background:var(--card);display:grid;place-items:center;padding:14px;overflow:hidden}
.logowall .lslot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* An unfilled slot must look unfilled — never like a client we do not have. */
.logowall .lslot.empty{border-style:dashed;border-width:1.5px;border-color:#CFC6B4;
background:var(--paper2)}
.logowall .lslot.empty span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--faint);text-align:center;line-height:1.5}
html[dir="rtl"] .logowall .lslot.empty span{letter-spacing:0;text-transform:none;
font-family:var(--body);font-size:var(--t1)}
@media(max-width:980px){.logowall{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.logowall{grid-template-columns:repeat(2,1fr);gap:10px}}
/* ── Credentials band (the company profile) ───────────────────────────────── */
.credband{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center;
border:1px solid var(--line);border-radius:24px;padding:44px;background:
radial-gradient(120% 160% at 100% 0%,var(--tint) 0%,transparent 58%),var(--card)}
.credband h3{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.025em}
.credband p{margin-top:12px;color:var(--muted);font-size:var(--t3);max-width:56ch}
.credband .meta{margin-top:16px;font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;
text-transform:uppercase;color:var(--deep)}
html[dir="rtl"] .credband .meta{letter-spacing:0;text-transform:none;font-family:var(--body)}
.credband .acts{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media(max-width:860px){.credband{grid-template-columns:1fr;padding:30px;gap:26px}}
/* ── Section head accent rule — lifts every page that uses .shead ─────────── */
.shead .eyebrow + h2{margin-top:12px}
.shead::before{content:"";display:block;width:52px;height:2px;background:var(--teal);
margin-bottom:20px;border-radius:2px}
.dark .shead::before,.ctaband .shead::before,.proof .shead::before{background:var(--gold)}
.ctaband .shead::before{margin-inline:auto}