/* ============================================================ DM CONSULTANCY — DESIGN SYSTEM v4.0 Mobile-first. Montserrat. Animated. Premium. Reference: DIFC.ae, ADGM.com, Apple.com, McKinsey.com ============================================================ */ /* Montserrat — self-hosted, Latin subset, variable (weights 100-900) + italic. Preloaded via in each page ; display:swap. Do NOT re-add @import or the Google Fonts CDN. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/montserrat-latin.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/montserrat-italic-latin.woff2') format('woff2'); } /* DMC Display (Bricolage Grotesque, OFL; instanced + renamed per OFL reserved-name rules, original copyright/designer attribution retained). Display face. FOUNDER SPEC (2026-06-12): the 500 instance is the ONLY display weight — H1/H2, large display, and the component display titles (rate-card titles, package names, ON THE RECORD labels, struck claims, consequence figures) all render at 500. The heavier 580 cut was removed (headlines were reading bold/700-class against the locked spec). Display + labels only, never running text, floor 12px rendered. font-display:swap; dmc-display-500-latin.woff2 is preloaded in every page head (it paints the LCP headline). Do NOT reintroduce a heavier display cut. */ @font-face { font-family: 'DMC Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/dmc-display-500-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; } /* ── TOKENS ── */ :root { color-scheme: light; } html, body { color-scheme: light; } :root { --indigo: #0F07BD; --indigo-dark: #0A0590; --indigo-mid: #1410C8; --gold: #C9981A; --gold-light: #E8B420; --deep: #09082A; --deep2: #0D0C35; --ivory: #F7F5F0; --white: #FFFFFF; --text: #09082A; --text2: #4A4869; --text3: #67658A; --border: rgba(9,8,42,0.08); --font: 'Montserrat', -apple-system, sans-serif; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ── DECREE v1.1 derived tokens ── */ --rule: rgba(9,8,42,0.10); /* solid hairlines in ledger components */ --rule-dotted: rgba(9,8,42,0.25); /* dotted leaders */ --paper: #FFFFFF; /* rate cards always sit on white */ --seal: var(--gold); /* seal ring + verification ticks */ --serif: 'DMC Display', 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --serif-500: 'DMC Display', 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; /* type scale (mobile-first; DMC Display only >=24px) H1 ceiling 56px per the Homepage Lock Sprint typography order (calm > big) */ --fs-h1: clamp(34px, 9vw, 56px); --fs-h2: clamp(26px, 6vw, 42px); --fs-h3: clamp(20px, 4.5vw, 26px); --fs-lead: clamp(15.5px, 4vw, 19px); --fs-eyebrow: 10.5px; --fs-num: clamp(28px, 7vw, 48px); /* rhythm + motion timing */ --sec-pad: 64px; --t-fast: 180ms; --t-base: 420ms; --t-slow: 700ms; /* ── unified elevation system (one shadow family wires every raised element together) ── */ --shadow-card: 0 2px 8px rgba(9,8,42,0.05), 0 18px 44px -20px rgba(9,8,42,0.17); --shadow-card-h: 0 6px 16px rgba(9,8,42,0.07), 0 30px 60px -22px rgba(9,8,42,0.25); --shadow-gold: 0 6px 18px -7px rgba(201,152,26,0.42); --shadow-gold-h: 0 12px 26px -8px rgba(201,152,26,0.52); --shadow-indigo: 0 7px 18px -8px rgba(15,7,189,0.42); --shadow-indigo-h: 0 14px 30px -10px rgba(15,7,189,0.52); } @media (min-width: 768px) { :root { --sec-pad: 96px; } } @media (min-width: 1200px) { :root { --sec-pad: 120px; } } /* ════════════════════════════════════════════════════════════════════════ DESIGN SYSTEM (LOCKED) — canonical component map (2026-06) Do not introduce new variants without updating this map. ════════════════════════════════════════════════════════════════════════ ONE CARD: .pcard — service/feature card (3px indigo top-border, icon, CTA link) .route — route/option card (gold tag, detail list, indigo outline on hover) .tcard — testimonial card (quote, attribution, star rating) .case-card — proof/case card (2px gold top-bar, compact) .commit — pull-quote with large opening quotation mark ONE BUTTON: .btn-primary — white text on indigo (light surfaces) .btn-gold / .btn-cta — deep-ink #09082A on gold (primary CTA, every surface) .btn-outline-ink — ink outline, transparent fill (light surfaces ONLY) .btn-outline-white — white outline, transparent fill (dark surfaces ONLY) See BUTTON-VARIANT POLICY banner below for surface rules. ONE EYEBROW: .eyebrow — 11px uppercase 600, --text3, gold accent bar (inner pages only) ONE DIVIDER: .s-rule — 1px solid rgba(9,8,42,0.1), full-width section separator ONE PULL-QUOTE: .commit — see ONE CARD above RADIUS LOCK: Cards (pcard/route/tcard/case-card/commit/pkg) = 16px Solid action buttons (btn-primary/btn-gold/nav-cta/mob-cta) = 8px Small chips = 4–6px Pill (tag/badge) = 99px Do NOT introduce intermediate values. ELEVATION: One shadow family wires all raised elements together. Use the tokens, never ad-hoc shadows: --shadow-card / --shadow-card-h (cards at rest / hover), --shadow-indigo(-h) (indigo buttons), --shadow-gold(-h) (gold buttons). Cards lift on hover; buttons lift -2px on hover. Nothing interactive ships flat. ICON STROKE: 1.75px stroke-width on all functional 24×24 line SVGs. Nav-caret chevrons controlled via .nav-caret CSS below. WhatsApp phone glyph (.wa-fab svg) kept at 2.5px. WEIGHT CEILING: 700 — never 800/900. Hierarchy via size + spacing + color. GOLD RULE: One restrained highlight moment per section. Never gold body/label text on a light surface (WCAG < 4.5:1). ════════════════════════════════════════════════════════════════════════ */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* overflow-x on body deliberately OMITTED: body overflow-x:hidden clips nested scrollable children (e.g. .compare-scroller tables), breaking horizontal scroll inside containers. html clip is enough. */ body { font-family: var(--font); font-size: 16px; color: var(--text); background: var(--white); line-height: 1.65; text-wrap: pretty; -moz-osx-font-smoothing: grayscale; } /* premium micro-detail: branded text selection */ ::selection { background: rgba(15,7,189,0.92); color: #fff; } ::-moz-selection { background: rgba(15,7,189,0.92); color: #fff; } .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; font-family: var(--font); border: none; background: none; } /* ── ANIMATIONS ── */ /* FIRST-PAINT RULE (permanent): nothing above the fold depends on JS to be visible. BOTH reveal systems hide ONLY under html.js (no JS = everything visible), and hero containers are fully exempted in the CRITICAL FIRST-PAINT FIX block further down. Was previously un-gated: .reveal{opacity:0} hid content permanently for no-JS visitors on 180 pages. */ html.js .reveal { opacity: 0; transform: translateY(40px) scale(0.985); filter: blur(7px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); will-change: opacity, transform; } html.js .reveal.visible { opacity: 1; transform: none; filter: blur(0); } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; filter: none; transition: none; } } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } .reveal-delay-5 { transition-delay: 0.40s; } .reveal-delay-6 { transition-delay: 0.48s; } .reveal-delay-7 { transition-delay: 0.56s; } .reveal-delay-8 { transition-delay: 0.64s; } /* Scroll progress bar (Apple-style) */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--indigo), var(--gold)); z-index: 300; pointer-events: none; transition: width 0.12s linear; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible { opacity: 1; transform: none; filter: none; transition: none; } } /* ── LAYOUT ── */ .wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { .wrap { padding: 0 32px; } } @media (min-width: 1024px) { .wrap { padding: 0 40px; } } .section { padding: 40px 0; } .section-sm { padding: 30px 0; } .section-lg { padding: 58px 0; } @media (min-width: 768px) { .section { padding: 56px 0; } .section-lg { padding: 76px 0; } } @media (min-width: 1024px) { .section { padding: 64px 0; } .section-lg { padding: 88px 0; } } .bg-ivory { background: var(--ivory); } .bg-deep { background: var(--deep); } .bg-indigo{ background: var(--indigo); } /* ── HEADER (transparent over hero → solid on scroll / menu) ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; background: transparent; border-bottom: 1px solid transparent; transition: background 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s; } .site-header.is-solid { background: rgba(255,255,255,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--border); box-shadow: 0 1px 24px rgba(9,8,42,0.07); } @media (min-width: 1024px) { .site-header { height: 72px; } } @media (max-width: 1023px) { .site-header.is-solid { background: rgba(251,250,247,0.98) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* D2: disable backdrop-filter on mobile (#hdr alias) */ @media (max-width:1024px) { #hdr.is-solid { background: rgba(251,250,247,0.98); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* D2: unpin assumptions scene on mobile */ @media (max-width:1024px) { .asc-grid { display: block !important; position: static !important; } .asc-rail { display: none !important; } .asc-item { opacity: 1 !important; transform: none !important; } } /* D2: limit will-change to actively animating elements only */ .reveal:not(.visible) { will-change: opacity, transform; } .reveal.visible { will-change: auto; } /* D2: smooth touch scrolling — body overflow-x intentionally NOT hidden (clips scroll children). Page-level horizontal containment is handled by html { overflow-x: clip } above. */ * { -webkit-overflow-scrolling: touch; } .header-inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 768px) { .header-inner { padding: 0 32px; } } @media (min-width: 1024px) { .header-inner { padding: 0 40px; } } .site-logo { display: flex; align-items: center; flex-shrink: 0; } .logo-img { height: 30px; width: auto; max-width: none; flex-shrink: 0; display: block; } @media (min-width: 768px) { .logo-img { height: 34px; } } @media (min-width: 1024px) { .logo-img { height: 38px; } } /* logo swap: white over the dark hero, blue once header turns solid */ .logo-on-light { display: none; } .site-header.is-solid .logo-on-dark { display: none; } .site-header.is-solid .logo-on-light { display: block; } .nav-links { display: none; align-items: center; gap: 22px; } @media (min-width: 1024px) { .nav-links { display: flex; } } .nav-links a { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.82); letter-spacing: 0.01em; transition: color 0.2s; white-space: nowrap; } .nav-links a:hover { color: #fff; } .site-header.is-solid .nav-links a { color: var(--text2); } .site-header.is-solid .nav-links a:hover { color: var(--indigo); } /* "Start here" — the soft entry, lifted out of the category cluster and paired with the CTA on the right as a deliberate action (a quiet ghost button, not another nav category). */ .nav-start { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.34); color: rgba(255,255,255,0.92) !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: 0.01em; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, transform .18s; } .nav-start:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); color: #fff !important; transform: translateY(-1px); } .nav-start-ico { width: 15px; height: 15px; flex-shrink: 0; } body.lighthero .site-header .nav-start, .site-header.is-solid .nav-start { color: var(--indigo) !important; border-color: rgba(15,7,189,0.28); } body.lighthero .site-header .nav-start:hover, .site-header.is-solid .nav-start:hover { background: rgba(15,7,189,0.06); border-color: var(--indigo); color: var(--indigo-dark) !important; } /* mobile drawer: keep "Start here" first (the natural "begin here"), with the same compass cue */ .mnav-link.mnav-start { display: flex; align-items: center; justify-content: flex-start; gap: 9px; } .mnav-start .nav-start-ico { width: 17px; height: 17px; } .nav-link.active, .nav-link[aria-current="page"] { color: var(--indigo); font-weight: 600; } .mob-sub a:hover, .mob-sub a[aria-current="page"] { color: var(--indigo); } .nav-cta { padding: 9px 20px; background: var(--gold); color: var(--deep) !important; border-radius: 8px; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.01em; box-shadow: var(--shadow-gold); transition: background 0.2s, transform 0.2s, color 0.2s, box-shadow 0.2s; } .nav-cta:hover { background: var(--gold-light) !important; transform: translateY(-2px); box-shadow: var(--shadow-gold-h); } .site-header.is-solid .nav-cta { background: var(--indigo); color: #fff !important; } .site-header.is-solid .nav-cta:hover { background: var(--indigo-dark) !important; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 8px; margin-right: -8px; width: 44px; height: 44px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.25s var(--ease); } .site-header.is-solid .nav-toggle span { background: var(--text); } .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1024px) { .nav-toggle { display: none; } } /* Mobile nav */ /* ── MOBILE NAV — modern accordion drawer (native details/summary) ── */ .mobile-nav { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 99; flex-direction: column; padding: 10px 20px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-nav.open { display: flex; } /* direct top-level links (Start here, Golden Visa) */ .mnav-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 6px; font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--text); border-bottom: 1px solid var(--rule); text-decoration: none; } .mnav-start { color: var(--indigo); } /* collapsible groups */ .mnav-group { border-bottom: 1px solid var(--rule); } .mnav-summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 6px; font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--text); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .mnav-summary::-webkit-details-marker { display: none; } .mnav-chev { width: 18px; height: 18px; color: var(--text3); flex: 0 0 auto; transition: transform .28s var(--ease), color .28s var(--ease); } .mnav-group[open] .mnav-summary .mnav-chev { transform: rotate(180deg); color: var(--indigo); } .mnav-panel { padding: 0 0 14px; } .mnav-panel a { display: block; padding: 11px 6px 11px 18px; margin-left: 7px; font-size: 15.5px; color: var(--text2); border-left: 2px solid var(--rule); border-bottom: none; text-decoration: none; transition: color .15s, border-color .15s; } .mnav-panel a:active, .mnav-panel a:hover { color: var(--indigo); border-left-color: var(--indigo); } .mnav-panel .mnav-all { color: var(--indigo); font-weight: 600; } .mnav-link[aria-current="page"], .mnav-panel a[aria-current="page"] { color: var(--indigo); font-weight: 600; border-left-color: var(--indigo); } /* CTA + quick-contact footer */ .mobile-nav .mob-cta { margin-top: 20px; padding: 16px; background: var(--indigo); color: #fff; border-radius: 8px; text-align: center; font-weight: 600; font-size: 15px; border-bottom: none; text-decoration: none; box-shadow: var(--shadow-indigo); } .mnav-contact { display: flex; gap: 10px; margin-top: 14px; } .mnav-contact-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--rule); border-radius: 12px; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text2); text-decoration: none; transition: border-color .15s, color .15s; } .mnav-contact-btn svg { width: 21px; height: 21px; color: var(--indigo); } .mnav-contact-btn:active, .mnav-contact-btn:hover { border-color: var(--indigo); color: var(--text); } /* ── NAV DROPDOWN (desktop) ── */ .nav-item { position: relative; display: inline-flex; align-items: center; } .nav-dd-trigger { display: inline-flex !important; align-items: center; gap: 5px; cursor: pointer; } .nav-caret { width: 9px; height: 9px; transition: transform .25s; opacity: .6; } .nav-item.has-dd:hover .nav-caret { transform: rotate(180deg); } .nav-dd { position: absolute; top: 100%; left: -16px; margin-top: 16px; min-width: 236px; background: #fff; border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 28px 60px -20px rgba(9,8,42,0.30); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .nav-dd::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .nav-dd.nav-dd-r { left: auto; right: -16px; } /* Skip-to-content (accessibility) */ .skip-nav { position: absolute; top: -48px; left: 8px; background: var(--gold); color: var(--deep); padding: 8px 14px; font-size: 12px; font-weight: 600; border-radius: 0 0 6px 6px; z-index: 999; transition: top .2s; } .skip-nav:focus { top: 0; } .nav-item.has-dd:hover .nav-dd, .nav-item.has-dd:focus-within .nav-dd { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dd a { display: block !important; padding: 10px 14px; border-radius: 8px; font-size: 12.5px !important; font-weight: 500 !important; color: var(--text2) !important; white-space: nowrap; letter-spacing: 0; } .nav-caret { display: inline-block; vertical-align: middle; stroke-width: 2; width: 14px; height: 14px; margin-left: 2px; } .nav-dd a:hover { background: rgba(15,7,189,0.05); color: var(--indigo) !important; } /* ── NAV MEGA-MENU (Industries: category heads + sector sub-links) ── */ .nav-dd-mega { left: auto; right: -16px; min-width: 0; width: 480px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 8px; padding: 16px; } /* Left-anchored variant: for a mega opened from a LEFT-side nav item (e.g. Company Setup), so the panel extends rightward instead of overflowing off the left edge. */ .nav-dd-mega.mega-left { left: 0; right: auto; } @media (min-width: 1280px) { .nav-dd-mega { width: 740px; grid-template-columns: repeat(4, 1fr); } } .nav-dd-col { display: block; } .nav-dd-h { display: block; padding: 8px 12px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--indigo); } .nav-dd-mega a { white-space: normal !important; line-height: 1.3; padding: 7px 12px !important; } .nav-dd-allrow { grid-column: 1 / -1; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); } .nav-dd-all { font-weight: 600 !important; color: var(--indigo) !important; } .nav-dd-all:hover { background: var(--ivory) !important; } /* ── IN-CONTENT LINKS ── Exclude ALL button classes ([class*="btn"]) so any button placed directly inside a .section (e.g. a .btn-gold CTA) keeps its button styling instead of being overridden to an underlined indigo link. Fixes the "Request the Guide" and "Back to home" gold buttons rendering as broken links. */ /* Underline ONLY inline prose links (classless anchors). Card / tile / button / component links always carry a class, so they are excluded automatically, with no per-class :not() list to maintain. This kills underlined link text inside cards site-wide. */ .section a:not([class]) { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; } .section a:not([class]):hover { color: var(--indigo-dark); } /* ── TYPOGRAPHY UTILITIES ── */ /* Desktop body scale for readability */ @media (min-width: 1024px) { body { font-size: 17px; line-height: 1.7; } .s-lead { font-size: 1.15rem; } } /* Eyebrow labels — brand blue on light, inherited (gold/muted) on dark */ .eyebrow { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); margin-bottom: 8px; } .eyebrow-light, .page-hero .eyebrow { color: rgba(255,255,255,0.65); } /* Preserve gold eyebrow on dark surfaces (cta-strip, hero already handled) */ .hero .eyebrow { color: rgba(255,255,255,0.65); } /* CRITICAL FIX: the homepage founder eyebrow carries .eyebrow-light but sits on the IVORY .founder-light section, where white@0.65 is invisible (1.06:1). Restore brand-blue indigo on this light surface (10.79:1) — context-scoped so .eyebrow-light stays correct on every dark hero/CTA. CSS-only; HTML untouched. */ .founder-light .eyebrow-light, .founder-light .eyebrow { color: var(--indigo); } /* Unified heading system — hierarchy from size, not heavy weight */ .s-title { font-size: clamp(1.5rem, 3.4vw, 2.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--indigo); margin-bottom: 12px; margin-top: 0; text-wrap: balance; } /* Hero headline — premium scale; inline homepage override (.hero-h1) must stay in sync. Synced to the homepage .hero-h1 ceiling so both templates read at one authority. */ .hero-title { font-size: clamp(2rem, 5.2vw, 3.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; } /* Protect headings inside dark/coloured sections — they stay white/inherited */ .hero .s-title, .page-hero .s-title, .cta-strip .s-title, footer .s-title { color: inherit; } .cta-strip.ip .s-title { color: #FFFFFF; } .s-lead { font-size: clamp(15px, 1.6vw, 16px); font-weight: 400; color: var(--text2); line-height: 1.75; max-width: 60ch; margin-top: 12px; margin-bottom: 32px; } .lede { color: var(--text2); } /* Hero subtitle — restrained lead weight (400 floor) for editorial elegance. 400 guards any page that uses the shared class without an inline override. */ .hero-sub, .hero-pitch { font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 400; line-height: 1.65; } /* ── BUTTONS ── */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--indigo); color: #fff; border: 1.5px solid var(--indigo); font-size: 13px; font-weight: 600; border-radius: 8px; letter-spacing: 0.02em; transition: all 0.2s var(--ease); box-shadow: var(--shadow-indigo); white-space: nowrap; } .btn-primary:hover { background: #0c06a5; border-color: #0c06a5; transform: translateY(-2px); box-shadow: var(--shadow-indigo-h); } /* ════════════════════════════════════════════════ BUTTON-VARIANT POLICY (locked — never regress in CSS or HTML) DARK surfaces (.page-hero, .cta-strip.ip, footer): allowed → .btn-gold/.btn-cta (deep ink on gold), .btn-outline-white, .btn-outline-light forbidden → .btn-outline, .btn-outline-ink (ink text disappears on dark) LIGHT surfaces (white / --ivory): allowed → .btn-primary (white on indigo), .btn-gold/.btn-cta (ink on gold), .btn-outline, .btn-outline-ink forbidden → .btn-outline-white, .btn-outline-light (white text disappears on light) Gold fills ALWAYS carry deep-ink #09082A text (7.40:1), never white (2.63:1 = WCAG fail). ════════════════════════════════════════════════ */ .btn-gold, .btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--gold); color: #09082A; border: 1.5px solid var(--gold); font-size: 13px; font-weight: 600; border-radius: 8px; letter-spacing: 0.02em; transition: all 0.2s var(--ease); box-shadow: var(--shadow-gold); white-space: nowrap; } .btn-gold:hover, .btn-cta:hover { background: #b8870f; border-color: #b8870f; transform: translateY(-2px); box-shadow: var(--shadow-gold-h); } .btn-outline-light { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); border-radius: 4px; font-size: 13px; font-weight: 500; transition: all 0.2s; white-space: nowrap; } .btn-outline-light:hover { background: rgba(255,255,255,0.10); } .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; border: 1.5px solid rgba(9,8,42,0.18); border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .btn-outline:hover { border-color: var(--text); background: var(--ivory); } .btn-outline-ink { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border: 1.5px solid rgba(9,8,42,0.22); color: var(--text) !important; border-radius: 4px; font-size: 13px; font-weight: 600; font-family: var(--font); text-decoration: none; transition: border-color .2s, background .2s; background: transparent; } .btn-outline-ink:hover { border-color: var(--text); background: rgba(9,8,42,0.04); } .btn-outline-white { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: transparent; color: white; font-size: 13px; font-weight: 500; border: 1.5px solid rgba(255,255,255,0.45); border-radius: 4px; transition: all 0.2s; white-space: nowrap; } .btn-outline-white:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); } .btn-arrow { font-size: 12.5px; font-weight: 600; color: var(--indigo); display: inline-flex; align-items: center; gap: 5px; transition: gap 0.2s; } .btn-arrow:hover { gap: 9px; } .btn-arrow::after { content: '→'; } /* ── PROOF STRIP ── */ .proof-wrap { background: linear-gradient(165deg, #F4F1EA 0%, #EDE9DF 100%); border-top: 1px solid rgba(9,8,42,0.07); border-bottom: 1px solid rgba(9,8,42,0.07); padding: 40px 0; position: relative; } .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(4,1fr); } } .proof-stat { text-align: center; padding: 20px 16px; border-right: 1px solid rgba(9,8,42,0.08); border-bottom: 1px solid rgba(9,8,42,0.08); } .proof-stat:nth-child(2n) { border-right: none; } .proof-stat:nth-child(n+3) { border-bottom: none; } @media (min-width: 768px) { .proof-stat { padding: 0 24px; border-right: 1px solid rgba(9,8,42,0.08); border-bottom: none; } .proof-stat:last-child { border-right: none; } .proof-stat:nth-child(2n) { border-right: 1px solid rgba(9,8,42,0.08); } .proof-stat:nth-child(2n):last-child { border-right: none; } } .proof-num { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--indigo); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .proof-num span { color: var(--indigo); } .proof-label { font-size: 10.5px; font-weight: 500; color: var(--text3); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; } /* ── COMPARE TABLE — DESKTOP ── */ .compare-scroller { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; -webkit-overflow-scrolling: touch; } /* Right-edge fade hint — signals horizontal scroll where the table overflows. Only shown ≤700px (where the cost column is pushed off-screen); pointer-events none so it never blocks taps. Transparent→ivory channel avoids Safari fade-to-black. */ .compare-scroller::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(90deg, rgba(247,245,240,0), var(--ivory)); border-radius: 0 8px 8px 0; opacity: 0; transition: opacity .2s ease; } @media (max-width: 700px) { .compare-scroller::after { opacity: 1; } } .compare-table { width: 100%; min-width: 620px; border-collapse: collapse; } .compare-table th { padding: 12px 14px; text-align: left; background: var(--indigo); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; border-bottom: 1px solid var(--border); } .compare-table th.col-hl { background: var(--indigo-dark); border-top: 3px solid var(--gold); color: #FFFFFF; } .compare-table td { padding: 12px 14px; font-size: 13.5px; color: var(--text2); border-bottom: 1px solid rgba(15,7,189,0.08); vertical-align: top; line-height: 1.6; font-variant-numeric: tabular-nums; } .compare-table td.col-hl { background: rgba(15,7,189,0.025); } .compare-table td strong { color: var(--text); font-weight: 600; } .compare-table .row-label { font-size: 12.5px; font-weight: 600; color: var(--text); } .compare-table tr:last-child td { border-bottom: none; } .compare-table tr:hover td { background: rgba(9,8,42,0.02); } .compare-table tr:hover td.col-hl { background: rgba(15,7,189,0.04); } .most-chosen { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--gold); color: var(--deep); border: 1px solid var(--gold); padding: 2px 7px; border-radius: 20px; margin-left: 6px; vertical-align: middle; } .compare-note { font-size: 12px; color: var(--text3); line-height: 1.6; } /* Small honest disclaimer for pages discussing accounting, tax, legal, liquidation */ .advisory-note { font-size: 12.5px; line-height: 1.65; color: var(--text3); background: rgba(15,7,189,0.03); border-left: 3px solid rgba(15,7,189,0.22); border-radius: 0 8px 8px 0; padding: 13px 17px; margin: 0; max-width: 80ch; } .advisory-note strong { color: var(--text2); font-weight: 600; } /* ── MOBILE COMPARE TABS ── */ .compare-mobile { display: none; } @media (max-width: 1023px) { .compare-desktop { display: none; } .compare-mobile { display: block; } } @media (min-width: 1024px) { .compare-desktop { display: block; } .compare-mobile { display: none; } } .ctabs-nav { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 16px; } .ctab-btn { padding: 12px 8px; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text2); background: var(--ivory); border-right: 1px solid var(--border); cursor: pointer; transition: all 0.15s; text-align: center; } .ctab-btn:last-child { border-right: none; } .ctab-btn.active { background: var(--indigo); color: white; } .ctab-panel { display: none; } .ctab-panel.active { display: block; } .mob-compare-card { border: 1px solid var(--border); border-radius: 8px; padding: 20px; } .mob-compare-card.featured { border-color: rgba(15,7,189,0.25); border-top: 3px solid var(--indigo); } .mob-col-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; } .mob-col-sub { font-size: 11px; color: var(--text3); margin-bottom: 16px; } .mob-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(9,8,42,0.05); font-size: 13px; align-items: start; } .mob-row:last-child { border-bottom: none; } .mob-row-k { font-size: 11px; font-weight: 600; color: var(--text3); } .mob-row-v { color: var(--text2); line-height: 1.5; } .mob-row-v strong { color: var(--text); font-weight: 600; } /* ── SERVICE CARDS ── */ .svc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 600px) { .svc-grid { grid-template-columns: 1fr 1fr; gap: 18px; } } @media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .svc-card { display: flex; flex-direction: column; padding: 24px 22px 22px; background: #fff; border: 1px solid var(--border); border-radius: 16px; position: relative; overflow: hidden; transition: transform 260ms cubic-bezier(0.22,1,0.36,1), box-shadow 260ms cubic-bezier(0.22,1,0.36,1), border-color 260ms; text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(9,8,42,0.04), 0 16px 40px -18px rgba(9,8,42,0.14); --mx: 50%; --my: 50%; } .svc-card::after { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--indigo), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); display: none; } .svc-card:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(9,8,42,0.08), 0 20px 48px rgba(9,8,42,0.12); border-color: rgba(15,7,189,0.18); } .svc-card:hover::after { display: none; } .svc-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(15,7,189,0.09), transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 0; } .svc-card:hover::before { opacity: 1; } .svc-card > * { position: relative; z-index: 1; } .svc-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .svc-ico { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, rgba(15,7,189,0.08), rgba(15,7,189,0.04)); color: var(--indigo); display: flex; align-items: center; justify-content: center; transition: background .24s, transform .24s cubic-bezier(0.22,1,0.36,1), color .24s; } .svc-ico svg { width: 23px; height: 23px; } .svc-card:hover .svc-ico { background: linear-gradient(135deg, rgba(15,7,189,0.14), rgba(15,7,189,0.08)); transform: scale(1.06); color: var(--indigo); } .svc-no { font-size: 12px; font-weight: 700; color: var(--text3); letter-spacing: 0.08em; } .svc-name { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 7px; letter-spacing: 0; line-height: 1.35; transition: color 0.25s; } .svc-card:hover .svc-name { color: var(--indigo); } .svc-desc { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.72; margin-bottom: 16px; flex: 1; } .svc-tags { font-size: 10px; color: var(--text3); font-weight: 600; letter-spacing: 0.02em; line-height: 1.6; padding-top: 15px; border-top: 1px solid var(--border); text-transform: uppercase; } /* ── ASSUMPTIONS ── */ .assumption-block { border-top: 1px solid var(--border); } .assumption-item { border-bottom: 1px solid var(--border); } .assumption-grid { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 768px) { .assumption-grid { grid-template-columns: 1fr 1fr; } } .a-believe { padding: 24px 0; border-bottom: 1px solid var(--border); } .a-see { padding: 24px 0; } @media (min-width: 768px) { .a-believe { padding: 28px 32px 28px 0; border-bottom: none; border-right: 1px solid var(--border); } .a-see { padding: 28px 0 28px 32px; } } .a-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; } .a-label-b { color: var(--text3); } .a-label-s { color: var(--indigo); } .a-num { font-size: 12px; font-weight: 700; color: var(--indigo); letter-spacing: 0.12em; margin-bottom: 14px; } .a-num::after { content: ''; display: inline-block; width: 22px; height: 1px; background: rgba(201,152,26,0.5); vertical-align: middle; margin-left: 10px; } .a-believe-text { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.45; letter-spacing: 0; } .a-see-text { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.8; } /* ── PRICING ── */ .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 10px 28px; box-shadow: 0 16px 40px rgba(9,8,42,0.05); } @media (min-width: 768px) { .pricing-grid { grid-template-columns: 1fr 1fr; padding: 14px 40px; } .pricing-col:first-child { padding-right: 40px; } .pricing-col:last-child { padding-left: 40px; border-left: 1px solid var(--border); } } .pricing-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(9,8,42,0.06); } .pricing-row:first-child { border-top: 1px solid rgba(9,8,42,0.06); } .pricing-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .pricing-sub { font-size: 11px; color: var(--text3); } .pricing-price { font-size: 14px; font-weight: 700; color: var(--indigo); white-space: nowrap; letter-spacing: 0; } .pricing-note { font-size: 11px; color: var(--text3); margin-top: 12px; line-height: 1.7; } /* ── FOUNDER (ivory light section — primary class) ── */ .founder-light { background: var(--ivory); position: relative; overflow: hidden; color: var(--text); } .founder-light .s-title { color: var(--indigo); } /* founder portrait gets real depth (was flat) */ #founder .split img, .founder-light .split img { box-shadow: 0 26px 54px -30px rgba(9,8,42,0.42); border-radius: 12px; } .founder-light p, .founder-light .s-lead, .founder-light .note-sign, .founder-light .founder-name, .founder-light .founder-role { color: var(--text); } .founder-light::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold), transparent 70%); } /* ── FOUNDER DARK (legacy class — keep for backward compat) ── */ .founder-dark { position: relative; overflow: hidden; background: var(--ivory); color: var(--text); } .founder-dark .s-title, .founder-dark p, .founder-dark .s-lead, .founder-dark .founder-name, .founder-dark .founder-role, .founder-dark blockquote, .founder-dark .pull-quote, .founder-dark .note-sign { color: var(--text); } .founder-dark::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold), transparent 70%); } .founder-quote { font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; color: var(--text); max-width: 20ch; margin: 6px 0 22px; } .founder-quote .hl { color: var(--indigo); } .founder-body p { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.85; margin-bottom: 12px; max-width: 64ch; } .founder-sig { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .founder-avatar { width: 46px; height: 46px; border-radius: 50%; background: rgba(201,152,26,0.12); border: 1.5px solid rgba(201,152,26,0.55); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--gold); flex-shrink: 0; } .founder-name { font-size: 14px; font-weight: 700; color: var(--text); } .founder-title { font-size: 11.5px; color: var(--text3); margin-top: 2px; } .founder-dark .btn-arrow { color: var(--indigo); } /* ── GUIDE BOX ── */ .guide-box { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 26px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); } @media (min-width: 768px) { .guide-box { grid-template-columns: 1fr auto; gap: 32px; padding: 32px; align-items: center; } } .guide-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); margin-bottom: 7px; } .guide-title { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.38; letter-spacing: 0; } .guide-desc { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.72; margin-bottom: 16px; } .guide-pts li { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); padding: 5px 0; display: flex; gap: 8px; line-height: 1.5; } .guide-pts li::before { content: '✓'; color: var(--gold); font-weight: 700; font-size: 11px; flex-shrink: 0; margin-top: 1px; } .guide-num { text-align: center; } .guide-num strong { display: block; font-size: 3rem; font-weight: 700; color: var(--indigo); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .guide-num small { font-size: 11px; color: var(--text3); } /* ── FAQ ── */ .faq-list { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 4px 24px; box-shadow: var(--shadow-card); } .faq-item { border-bottom: 1px solid var(--border); } .faq-list > .faq-item:last-child { border-bottom: none; } .faq-q { padding: 18px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; cursor: pointer; border-radius: 8px; transition: background 0.15s; } @media (min-width: 1024px) { .faq-q:hover { background: rgba(15,7,189,0.022); } } .faq-q h4, .faq-q h3, details.faq-item > summary.faq-q h4, details.faq-item > summary.faq-q h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; flex: 1; letter-spacing: 0; color: var(--text); } .faq-icon { width: 20px; height: 20px; border: 1.5px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text3); flex-shrink: 0; transition: all 0.2s; margin-top: 2px; } .faq-item.open .faq-icon { background: var(--gold); border-color: var(--gold); color: var(--deep); transform: rotate(45deg); } .faq-a { display: none; padding: 12px 0 18px; font-size: clamp(15.5px,1.6vw,16.5px); color: var(--text2); line-height: 1.82; max-width: 72ch; } .faq-item.open .faq-a { display: block; } @media (min-width: 1024px) { .faq-icon { display: none; } .faq-a { display: block; } } /* FAQ —
/ variant (spec-compliant, crawler-safe; internal pages). Reuses .faq-q / .faq-icon / .faq-a base styles + the desktop media query above. */ details.faq-item > summary.faq-q { list-style: none; -webkit-appearance: none; border-left: 3px solid transparent; padding-left: 14px; transition: border-color 0.2s; } details.faq-item > summary.faq-q::-webkit-details-marker { display: none; } details.faq-item > summary.faq-q::marker { display: none; } details.faq-item[open] > summary.faq-q { border-left-color: var(--indigo); } details.faq-item[open] > summary .faq-icon { background: var(--gold); border-color: var(--gold); color: var(--deep); transform: rotate(45deg); } details.faq-item[open] > .faq-a { display: block; } /* Author / review attribution shown above the FAQ on service pages (E-E-A-T) */ .faq-author { font-size: 12px; color: var(--text3); margin: 0 0 16px; max-width: 760px; letter-spacing: .01em; } .faq-author strong { color: var(--text2); font-weight: 600; } /* ── CTA STRIP ── */ .cta-strip { background: var(--deep); padding: 64px 0; position: relative; overflow: hidden; text-align: center; } @media (min-width: 768px) { .cta-strip { padding: 80px 0; } } @media (min-width: 1024px) { .cta-strip { padding: 96px 0; } } .cta-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 60% 50%, rgba(15,7,189,0.30) 0%, transparent 65%); pointer-events: none; } .cta-strip .wrap { position: relative; z-index: 1; } .cta-strip h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-weight: 700; color: white; max-width: 18ch; margin: 10px auto 14px; line-height: 1.16; letter-spacing: -0.02em; } .cta-strip-sub { font-size: clamp(13px, 2vw, 15px); font-weight: 400; color: rgba(255,255,255,0.62); max-width: 42ch; margin: 0 auto 32px; line-height: 1.72; } .cta-strip-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } /* Fine-print contact/licence line — lifted to AA (12px / .62 = 7.6:1 on the dark strip). Shared token: this single change clears the faint line on every .cta-strip.ip page. */ .cta-strip-detail { margin-top: 20px; font-size: 12px; color: rgba(255,255,255,0.62); } .cta-strip.cta-warm { background: linear-gradient(135deg, var(--indigo) 0%, #1309D4 100%); border-top: none; border-bottom: none; } .cta-strip.cta-warm::before { display: none; } .cta-strip.cta-warm h2 { color: #FFFFFF; } .cta-strip.cta-warm .cta-strip-sub { color: rgba(255,255,255,0.75); } .cta-strip.cta-warm .cta-strip-detail { color: rgba(255,255,255,0.62); } .cta-strip.cta-warm .cta-aurora { display: none; } .cta-strip.cta-warm .cta-accent { color: var(--gold); } /* ── Mobile: CTA heading 2-line fix ── */ @media (max-width: 640px) { .cta-strip h2 { font-size: clamp(1.0rem, 5vw, 1.25rem); max-width: none; text-align: left; margin-left: 0; margin-right: 0; } .cta-strip h2 br { display: none; } .cta-strip-sub { text-align: left; margin-left: 0; margin-right: 0; max-width: none; } .cta-strip-btns { justify-content: flex-start; } .cta-meta { justify-content: flex-start; flex-wrap: wrap; } } /* ── FOOTER ── */ .site-footer { background: #060519; padding: 56px 0 24px; border-top: 1px solid rgba(255,255,255,0.05); } @media (min-width: 768px) { .site-footer { padding: 64px 0 28px; } } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 28px; } } .footer-logo-img { height: 30px; width: auto; margin-bottom: 14px; } @media (min-width: 768px) { .footer-logo-img { height: 34px; } } .footer-brand p { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.72; max-width: 26ch; } .footer-lic { margin-top: 12px; font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.72; } .footer-cred { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 34ch; } .footer-cred-i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px; fill: var(--gold-light); } .footer-col h6, .footer-col h3 { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 12px; } .footer-col h6::before, .footer-col h3::before { content: ''; display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--gold); opacity: 0.9; margin-bottom: 9px; } .footer-col a { display: block; font-size: 12.5px; color: rgba(255,255,255,0.62); padding: 3px 0; transition: color 0.15s, transform 0.15s; } .footer-col a:hover { color: #fff; transform: translateX(3px); } /* ── FOOTER SITEMAP ── */ .footer-sitemap { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0 20px; display: flex; flex-wrap: wrap; gap: 20px 48px; } .footer-sitemap-hd { font-size: 9px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.35); display: block; margin-bottom: 10px; } .footer-sitemap a { font-size: 11.5px; color: rgba(255,255,255,0.52); text-decoration: none; display: block; line-height: 1.9; transition: color .2s; } .footer-sitemap a:hover { color: rgba(255,255,255,0.88); } @media (max-width: 600px) { .footer-sitemap { gap: 16px 28px; } } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 8px; } .footer-bottom a:hover { color: rgba(255,255,255,0.78); } /* ── WHATSAPP FAB ── */ .wa-fab { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,0.40); z-index: 98; transition: transform 0.2s; } @media (min-width: 768px) { .wa-fab { bottom: 28px; right: 28px; width: 52px; height: 52px; } } .wa-fab:hover { transform: scale(1.08); } .wa-fab svg { width: 22px; height: 22px; fill: white; } /* ── PAGE HERO (inner pages) ── */ .page-hero { padding-top: 64px; background: var(--deep); padding-bottom: 72px; position: relative; overflow: hidden; } @media (min-width: 1024px) { .page-hero { padding-top: 72px; padding-bottom: 96px; } } .page-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 72% 82% at 28% 18%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse 72% 82% at 28% 18%, #000 18%, transparent 78%); } .page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--gold), transparent 55%); opacity: 0.55; } .ph-arc { position: absolute; right: -110px; top: -120px; width: 460px; height: 460px; pointer-events: none; opacity: 0.42; z-index: 0; } @media (max-width: 700px) { .ph-arc { width: 300px; height: 300px; right: -90px; top: -80px; } } .fact-strip { display: flex; flex-wrap: wrap; margin-top: 24px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; max-width: 720px; } .fact-strip > div { flex: 1 1 130px; padding: 14px 20px; border-right: 1px solid rgba(255,255,255,0.08); } .fact-strip > div:last-child { border-right: none; } .fact-strip b { display: block; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .fact-strip b i { color: var(--gold); font-style: normal; font-weight: 600; font-size: 12.5px; margin-left: 2px; } .fact-strip span { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.07em; } .page-hero-inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 64px 20px 0; } @media (min-width: 768px) { .page-hero-inner { padding: 80px 32px 0; } } @media (min-width: 1024px) { .page-hero-inner { padding: 96px 40px 0; } } .breadcrumb { display: flex; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.28); margin-bottom: 18px; } .breadcrumb a:hover { color: rgba(255,255,255,0.6); } /* ── TICKER ── */ .ticker-outer { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; } .ticker-track { display: flex; animation: ticker 32s linear infinite; } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } .ticker-item { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); padding: 0 28px; border-right: 1px solid var(--border); white-space: nowrap; flex-shrink: 0; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ════════════════════════════════════════════════ TEXTURE & MOTION (brand-aligned, restrained) ════════════════════════════════════════════════ */ /* ── HERO BACKGROUND — brand blue (restored from D1 light override) ── */ .hero { background: linear-gradient(150deg, #06053A 0%, #0C0B95 45%, #0F07BD 75%, #1309D4 100%); position: relative; overflow: hidden; } /* ── HERO TEXT COLOURS — white on dark blue ── */ .hero .hero-title { color: #FFFFFF; } .hero .hero-title em { color: var(--gold); } .hero .hero-sub, .hero .hero-pitch { color: rgba(255,255,255,0.84); } .hero .hero-eyebrow, .hero .eyebrow { color: rgba(255,255,255,0.65); letter-spacing: 0.12em; } .hero .hero-eyebrow-line { background: var(--gold); } /* ── LIGHT-HERO HEADER (Decree §3: the header is dark-on-light over the light hero). Applied to migrated light-hero pages via body.lighthero; mirrors the .art-bc treatment — header solid from the top, blue logo, dark nav, indigo CTA. Replaces the former white-on-dark homepage hero-nav rules. ── */ body.lighthero .site-header { background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom-color: var(--border); box-shadow: 0 1px 24px rgba(9,8,42,0.07); } @media (max-width: 1023px) { body.lighthero .site-header { background: rgba(251,250,247,0.98); -webkit-backdrop-filter: none; backdrop-filter: none; } } body.lighthero .site-header .logo-on-dark { display: none; } body.lighthero .site-header .logo-on-light { display: block; } body.lighthero .site-header .nav-links a { color: var(--text2); } body.lighthero .site-header .nav-links a:hover { color: var(--indigo); } body.lighthero .site-header .nav-cta { background: var(--indigo); color: #fff !important; } body.lighthero .site-header .nav-cta:hover { background: var(--indigo-dark) !important; } body.lighthero .site-header .nav-toggle span { background: var(--text); } /* Film grain — quiet richness on dark surfaces */ .grain::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.055; mix-blend-mode: overlay; } /* Aurora — slow drifting brand glow (colour set per-section) */ .aurora { position: absolute; inset: -14%; z-index: 0; pointer-events: none; background-size: 165% 165%; } .hero-aurora { background: radial-gradient(38% 44% at 72% 14%, rgba(201,152,26,0.14), transparent 70%), radial-gradient(44% 52% at 22% 84%, rgba(74,90,230,0.22), transparent 72%); } .cta-aurora { background: radial-gradient(38% 50% at 20% 26%, rgba(22,14,214,0.55), transparent 68%), radial-gradient(32% 44% at 82% 74%, rgba(201,152,26,0.18), transparent 70%), radial-gradient(46% 56% at 60% 114%, rgba(15,7,189,0.42), transparent 72%); } @media (prefers-reduced-motion: no-preference) { .aurora { animation: auroraShift 26s ease-in-out infinite alternate; } } @keyframes auroraShift { 0% { background-position: 14% 16%, 84% 78%, 56% 100%; } 100% { background-position: 32% 38%, 68% 58%, 40% 76%; } } /* keep real content above the decorative layers */ .hero-inner, .cta-strip .wrap, .founder-dark .wrap { position: relative; z-index: 2; } /* CTA strip — showpiece treatment */ .cta-strip { background: #070620; } .cta-strip::before { background: radial-gradient(125% 115% at 50% 45%, transparent 42%, rgba(0,0,0,0.45) 100%); } .cta-accent { color: var(--gold); } .btn-lg { padding: 16px 34px; font-size: 14px; } .cta-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 14px; margin-top: 22px; font-size: 11.5px; color: rgba(255,255,255,0.42); } .cta-meta b { color: rgba(255,255,255,0.72); font-weight: 600; } .cta-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.28); } /* ════════════════════════════════════════════════ INNER-PAGE TEMPLATE COMPONENTS (reused on every sub-page) ════════════════════════════════════════════════ */ /* Inner-page hero — refined, unmistakably BLUE premium gradient. Every stop stays in the indigo family (focal #1B13D6 → true brand-indigo #160FB0 → deep blue-navy #0B0836), so the field reads blue, never muddy near-black. White text clears 9.95:1+ on every stop. */ .page-hero { background: radial-gradient(135% 125% at 78% -10%, #1B13D6 0%, #160FB0 34%, #0E0A5E 70%, #0B0836 100%); background-color: var(--deep); padding-bottom: 56px; } @media (min-width: 1024px) { .page-hero { padding-bottom: 76px; } } .page-hero-inner { z-index: 2; } .ip-rule { width: 46px; height: 3px; background: var(--gold); border-radius: 3px; margin: 0 0 20px; } .ph-h1 { font-size: clamp(2.05rem, 5.2vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: #fff; max-width: 20ch; margin: 8px 0 18px; text-wrap: balance; } .ph-h1 em { font-style: normal; color: var(--gold); } .ph-sub { font-size: clamp(1rem, 2.1vw, 1.15rem); font-weight: 400; color: rgba(255,255,255,0.78); max-width: 58ch; line-height: 1.7; margin-bottom: 28px; } .ph-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; } .ph-facts { display: flex; flex-wrap: wrap; gap: 9px 16px; } .ph-fact { font-size: 12px; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .ph-fact b { color: #fff; font-weight: 600; } .ph-fact + .ph-fact::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.3); } .lede { font-size: clamp(15px, 1.7vw, 18px); font-weight: 400; color: var(--text2); line-height: 1.8; max-width: 64ch; } .lede strong { color: var(--text); font-weight: 600; } /* Process / steps */ .steps { border-top: 1px solid var(--border); } .step { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start; } .step-n { width: 40px; height: 40px; border-radius: 50%; background: rgba(15,7,189,0.07); border: 1px solid rgba(15,7,189,0.16); color: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .step-t { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: 0; } .step-d { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.72; max-width: 62ch; } /* Honest callout */ .callout { border-left: 2px solid var(--gold); background: var(--ivory); border-radius: 0 12px 12px 0; padding: 24px 28px; } .callout p { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.8; } .callout p + p { margin-top: 10px; } .callout strong { color: var(--text); font-weight: 600; } /* Price line (reused) */ .priceline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .priceline .amt { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--indigo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .priceline .unit { font-size: 13px; color: var(--text3); } /* ════════════════════════════════════════════════ INTERNAL PAGE SYSTEM — editorial, reused across all sub-pages ════════════════════════════════════════════════ */ /* Founder / origin note (editorial body) */ .note-body { max-width: 64ch; } .note-body p { font-size: 15px; color: var(--text2); line-height: 1.92; margin-bottom: 14px; } .note-body p strong, .note-body p b { color: var(--text); font-weight: 600; } .note-sign { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--text); } .note-sign span { display: block; font-size: 12px; font-weight: 500; color: var(--text3); margin-top: 3px; letter-spacing: 0.02em; } /* Legal sub-headings (privacy + terms) — into the brand-blue heading system. Without this rule bare

fell back to ink --text, breaking the all-blue heading language. 700 weight (never 800/900). Indigo on white = 11.76:1. */ .note-body h3 { color: var(--indigo); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.3; margin: 22px 0 6px; } .note-body h3:first-child { margin-top: 0; } /* 3-column credentials */ .cols-3 { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .col-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .col-body { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.82; } /* Commitments — quote cards */ .commit-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 700px) { .commit-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } .commit { position: relative; padding: 22px 22px 22px 28px; background: #fff; border: 1px solid var(--border); border-radius: 16px; transition: border-color .25s, transform .25s; } .commit:hover { border-color: rgba(15,7,189,0.18); transform: translateY(-3px); } .commit::before { content: '\201C'; position: absolute; left: 16px; top: 10px; font-size: 38px; line-height: 1; color: rgba(201,152,26,0.55); font-family: Georgia, 'Times New Roman', serif; } .commit p { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.65; letter-spacing: 0; } /* Detail rows (entity / contact) */ .detail-rows { border-top: 1px solid var(--border); max-width: 580px; } .detail-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: clamp(15px,1.6vw,15.5px); align-items: start; } .detail-row .k { color: var(--text3); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; } .detail-row .v { color: var(--text2); line-height: 1.65; } .detail-row .v a { color: var(--indigo); font-weight: 600; } /* Split (two-column) layout + sticky aside */ .split { display: grid; grid-template-columns: 1fr; gap: 36px; } @media (min-width: 920px) { .split { grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: start; } } .aside-card { background: var(--ivory); border: 1px solid var(--border); border-radius: 16px; padding: 26px; } @media (min-width: 920px) { .aside-card.sticky { position: sticky; top: 104px; } } .aside-card h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 14px; letter-spacing: 0; } .aside-card + .aside-card { margin-top: 14px; } /* ── FORM ── */ .form { display: flex; flex-direction: column; gap: 14px; } .form-head { font-size: 12.5px; font-weight: 600; color: var(--text2); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 2px; } .form-head::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.16); flex-shrink: 0; } .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 12px; font-weight: 600; color: var(--text); } .field label .req { color: var(--gold); } .field input, .field select, .field textarea { font-family: var(--font); font-size: 16px; color: var(--text); width: 100%; background: #fff; border: 1px solid rgba(9,8,42,0.16); border-radius: 9px; padding: 13px 14px; transition: border-color .15s, box-shadow .15s; } .field textarea { resize: vertical; min-height: 112px; } .field input::placeholder, .field textarea::placeholder { color: var(--text3); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(15,7,189,0.12); } .field-row { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } } .form-note { font-size: 11.5px; color: var(--text3); line-height: 1.6; } .form-ok { display: none; padding: 16px 18px; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.3); border-radius: 10px; font-size: 13.5px; color: #15803d; line-height: 1.6; } .form-ok.show { display: block; } /* CTA strip — homepage: full brand blue moment (not the soft tint from D1) */ .cta-strip:not(.ip) { background: linear-gradient(135deg, var(--indigo) 0%, #1309D4 100%); } .cta-strip:not(.ip) .s-title, .cta-strip:not(.ip) .cta-accent, .cta-strip:not(.ip) p, .cta-strip:not(.ip) .cta-meta { color: #FFFFFF; } .cta-strip:not(.ip) .btn-primary { background: var(--gold); color: #09082A; border-color: var(--gold); } .cta-strip:not(.ip) .btn-outline { color: #FFFFFF; border-color: rgba(255,255,255,0.40); } .cta-strip:not(.ip) .btn-outline:hover { background: rgba(255,255,255,0.12); } /* Internal CTA (no skyline — simpler than homepage) */ .cta-strip.ip { background: #0a0930; } .cta-strip.ip::before { background: radial-gradient(120% 130% at 50% -10%, rgba(15,7,189,0.28), transparent 62%); } .cta-rule { width: 46px; height: 3px; background: var(--gold); border-radius: 3px; margin: 0 auto 16px; } /* ── Premium light cards (gold top accent) ── */ .pcard-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 640px) { .pcard-grid.c2 { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (min-width: 900px) { .pcard-grid.c3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .pcard { position: relative; background: #fff; border: 1px solid rgba(9,8,42,0.09); border-radius: 16px; padding: 28px 24px 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform 260ms cubic-bezier(0.22,1,0.36,1), box-shadow 260ms cubic-bezier(0.22,1,0.36,1), border-color 260ms; box-shadow: 0 2px 8px rgba(9,8,42,0.04), 0 16px 40px -18px rgba(9,8,42,0.14); --mx: 50%; --my: 50%; } .pcard:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(9,8,42,0.08), 0 20px 48px rgba(9,8,42,0.12); border-color: rgba(15,7,189,0.14); } .pcard-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(15,7,189,0.07); color: var(--indigo); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .pcard-ic svg { width: 23px; height: 23px; } .pcard h3 { font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.3; transition: color .2s; } .pcard:hover h3 { color: var(--indigo); } .pcard::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(15,7,189,0.09), transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 0; } .pcard:hover::before { opacity: 1; } .pcard::after { content: '→'; position: absolute; bottom: 20px; right: 20px; font-size: 13px; color: var(--indigo); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.22s cubic-bezier(0.22,1,0.36,1); pointer-events: none; z-index: 2; } .pcard:hover::after { opacity: 1; transform: translateX(0); } .pcard > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .pcard, .svc-card { transition: border-color .2s !important; } .pcard:hover, .svc-card:hover { transform: none !important; box-shadow: 0 1px 2px rgba(9,8,42,0.05), 0 8px 24px rgba(9,8,42,0.06) !important; } .pcard::before, .svc-card::before, .pcard::after { display: none !important; } .svc-ico, .svc-card:hover .svc-ico { transform: none !important; } } .pcard p { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.74; } .pcard .pcard-tag { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text3); } .pcard .pnum { position: absolute; top: 18px; right: 20px; font-size: 12px; font-weight: 700; color: var(--text3); letter-spacing: 0.06em; } /* ── Route panels (detailed eligibility blocks) ── */ .route-list { display: grid; gap: 16px; } .route { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px; position: relative; overflow: hidden; } .route::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold), rgba(201,152,26,0.1)); } .route-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 880px) { .route-grid { grid-template-columns: 270px 1fr; gap: 36px; } } .route-n { font-size: 13px; font-weight: 700; color: var(--indigo); letter-spacing: 0.1em; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .route-title { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 10px; line-height: 1.3; } .route-th { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text); background: rgba(201,152,26,0.12); border: 1px solid rgba(201,152,26,0.28); border-radius: 8px; padding: 7px 12px; } .route-applies { margin-top: 14px; font-size: 12px; color: var(--text3); line-height: 1.65; } .route-applies .lbl { color: var(--text2); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 3px; } .route-applies .lbl:not(:first-child) { margin-top: 12px; } .route-body { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.82; } .route-body p { margin-bottom: 13px; } .route-body p:last-child { margin-bottom: 0; } .route-body ul { margin: 12px 0; display: flex; flex-direction: column; gap: 7px; } .route-body li { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.6; padding-left: 18px; position: relative; } .route-body li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.65; } /* ── Honest view rows ── */ .honest { border-top: 1px solid var(--border); } .honest-item { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--border); } @media (min-width: 768px) { .honest-item { grid-template-columns: 270px 1fr; gap: 36px; } } .honest-label { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: 0; line-height: 1.4; } .honest-label::before { content: ''; display: block; width: 28px; height: 2px; background: var(--gold); margin-bottom: 10px; } .honest-body { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.85; } .honest-n { font-size: 2.0rem; font-weight: 700; color: rgba(201,152,26,0.3); line-height: 1; margin-bottom: 8px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Route icon tile + hover */ .route-ic { width: 44px; height: 44px; border-radius: 11px; background: rgba(201,152,26,0.1); border: 1px solid rgba(201,152,26,0.24); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .route-ic svg { width: 22px; height: 22px; } .route { transition: border-color .25s var(--ease-out), box-shadow .25s, transform .25s; } .route:hover { border-color: rgba(201,152,26,0.32); box-shadow: 0 2px 6px rgba(9,8,42,0.04), 0 22px 46px rgba(9,8,42,0.09); } .route:hover .route-ic { background: var(--gold); color: #fff; border-color: var(--gold); } .route-ic { transition: background .25s, color .25s, border-color .25s; } /* ════════════════════════════════════════════════ INTERNAL-PAGE CRAFT PASS (scoped to body.ip — homepage untouched) ════════════════════════════════════════════════ */ /* Section-header signature: a gold kicker rule before every eyebrow */ body.ip .eyebrow { display: inline-flex; align-items: center; } body.ip .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; margin-right: 12px; flex-shrink: 0; opacity: 0.9; } /* ── THE DATUM LINE (site-wide brand motion): the eyebrow's gold rule draws itself in on scroll. Decorative only (the label text never hides); gated on html.js (no-JS = full); reduced-motion = static. ── */ html.js body.ip .eyebrow::before { transform: scaleX(0); transform-origin: left; } html.js body.ip .eyebrow.is-drawn::before { transform: scaleX(1); transition: transform 0.55s var(--ease-out); } @media (prefers-reduced-motion: reduce) { html.js body.ip .eyebrow::before { transform: none !important; } } body.ip .cta-strip .eyebrow { display: inline-flex; } /* Confident, tighter internal headings + higher-contrast hero sub */ body.ip .s-title { letter-spacing: -0.028em; line-height: 1.14; } body.ip .ph-h1 { letter-spacing: -0.032em; } body.ip .ph-sub { color: rgba(255,255,255,0.8); } body.ip .section { padding-top: 56px; padding-bottom: 56px; } @media (min-width: 1024px) { body.ip .section { padding-top: 80px; padding-bottom: 80px; } } /* Credential strip → premium (gold top hairline, gradient fill, larger numerals) */ .fact-strip { background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)); position: relative; } .fact-strip::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,152,26,0.6), transparent); } .fact-strip > div { border-right-color: rgba(255,255,255,0.07); } .fact-strip b { font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Softer, layered card shadows + icon hover fill — shadow values now managed by CARD DEPTH + TILT SYSTEM block at end of file */ .pcard-ic { transition: background .25s, color .25s; } .pcard:hover .pcard-ic { background: var(--indigo); color: #fff; } .pcard .pcard-cost { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--indigo); letter-spacing: 0; font-variant-numeric: tabular-nums; } .pcard .pcard-cost span { display: block; font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; } .pcard .pcard-when { font-size: 13px; color: var(--text2); line-height: 1.7; } .pcard .pcard-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--indigo); transition: gap .2s; } .pcard:hover .pcard-link { gap: 10px; } /* Decision columns / panels / checklists (service pages) */ .duo { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; gap: 20px; } } .panel { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px 22px; } .panel.ivory { background: var(--ivory); } .panel.gold { border-color: rgba(201,152,26,0.3); box-shadow: 0 1px 3px rgba(201,152,26,0.06); } .panel-h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; color: var(--indigo); } .panel-h.muted { color: var(--text3); } .checklist { display: flex; flex-direction: column; gap: 10px; } .checklist li { font-size: clamp(15px,1.6vw,15.5px); color: var(--text2); line-height: 1.55; padding-left: 27px; position: relative; } .checklist li::before { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 13px; } .checklist.do li::before { content: '\2713'; color: var(--gold); } .checklist.alt li::before { content: '\2192'; color: var(--indigo); } .checklist.no li::before { content: '\2715'; color: var(--text3); } .checklist.no li { color: var(--text3); } /* ── FOUNDER PHOTO PLACEHOLDER (P1.5) ── */ .founder-wrap-photo{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;} @media(min-width:768px){.founder-wrap-photo{grid-template-columns:300px 1fr;gap:48px;}} /* Note: the :not(:has(img)) rule was removed — the photo placeholder uses a
, not an , so it always triggered the single-column collapse. The 2-col layout (300px 1fr) is always used at ≥768px regardless of photo vs placeholder. */ .founder-photo-ph{position:relative;width:100%;max-width:300px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(150deg,var(--ivory),color-mix(in srgb,var(--indigo) 8%,var(--ivory)));display:flex;align-items:center;justify-content:center;margin:0 auto 28px;} @media(min-width:768px){.founder-photo-ph{margin:0;}} .founder-photo-mono{font-size:64px;font-weight:700;color:var(--indigo);opacity:0.18;letter-spacing:-0.03em;} .founder-content{flex:1;min-width:0;} .founder-opener{font-size:clamp(15px,1.6vw,16px);color:var(--text2);line-height:1.75;margin-bottom:24px;font-style:italic;max-width:60ch;} /* Video slot: hidden until a real video is supplied — avoids large blank dashed box */ .founder-video-slot{display:none;} /* ── TRUST / CASE CARDS (C1) ── */ .case-cards{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0;} @media(min-width:640px){.case-cards{grid-template-columns:repeat(3,1fr);}} .case-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:20px 20px 24px;position:relative;} .case-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:2px;background:var(--gold);border-radius:0 0 2px 2px;} .case-text{font-size:clamp(15px,1.6vw,15.5px);color:var(--text2);line-height:1.75;margin:0;} /* ── PROOF DISCLAIMER (P1.2) ── */ .proof-disclaimer{font-size:13px;color:var(--text3);text-align:center;margin-top:20px;max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.5;} /* ── CALL FAB (P2.2) ── */ .call-fab{position:fixed;bottom:80px;right:24px;z-index:900;width:52px;height:52px;border-radius:50%;background:var(--indigo);color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(15,7,189,.35);text-decoration:none;transition:transform .2s,background .2s;} .call-fab:hover{transform:scale(1.08);background:#1a10d0;} .call-fab-tooltip{position:absolute;right:64px;top:50%;transform:translateY(-50%);background:var(--deep);color:var(--white);padding:8px 12px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s;} .call-fab:hover .call-fab-tooltip,.call-fab:focus .call-fab-tooltip{opacity:1;} @media(max-width:768px){.call-fab-tooltip{display:none;}} /* ── STICKY CTA BAR (P2.5) ── */ .sticky-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:800;background:var(--deep);padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:20px;transform:translateY(100%);transition:transform .3s ease;border-top:1px solid rgba(255,255,255,.08);} .sticky-cta-bar.visible{transform:translateY(0);} .sticky-cta-text{color:rgba(255,255,255,.85);font-size:14px;font-weight:500;margin:0;} .sticky-cta-btn{background:var(--gold);color:var(--deep);padding:9px 20px;border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:opacity .2s;display:inline-block;} .sticky-cta-btn:hover{opacity:.9;} .sticky-cta-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:22px;cursor:pointer;padding:4px 8px;transition:color .2s;line-height:1;} .sticky-cta-close:hover{color:var(--white);} .sticky-bar-active .wa-fab{bottom:86px;transition:bottom .3s ease;} .sticky-bar-active .call-fab{bottom:148px;transition:bottom .3s ease;} @media(max-width:768px){.sticky-cta-text{display:none;}} /* ── GOLDEN VISA CHECKER TOOL ── */ .checker-wrap{max-width:620px;margin:0 auto;background:var(--white);border:1px solid var(--rule);border-radius:16px;padding:40px;box-shadow:var(--shadow-card-h);} .checker-progress{height:4px;background:var(--border);border-radius:2px;margin-bottom:32px;overflow:hidden;} .checker-progress-fill{height:100%;background:var(--indigo);border-radius:2px;transition:width .4s ease;} .checker-step-label{font-size:12px;font-weight:600;color:var(--text3);letter-spacing:.08em;margin-bottom:12px;} .checker-q{font-size:clamp(17px,2.2vw,20px);font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.4;font-variant-numeric:tabular-nums;} .checker-hint{font-size:14px;color:var(--text3);margin-bottom:24px;line-height:1.6;} .checker-options{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;} .checker-option{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s;font-size:15px;color:var(--text);font-weight:500;background:var(--white);text-align:left;width:100%;} .checker-option:hover{border-color:var(--indigo);background:rgba(15,7,189,.03);} .checker-option.selected{border-color:var(--gold);background:rgba(201,152,26,.06);} .checker-option-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;transition:border-color .15s,background .15s;} .checker-option.selected .checker-option-dot{border-color:var(--gold);background:var(--gold);} .checker-nav{display:flex;gap:12px;justify-content:space-between;} .checker-btn-next{background:var(--gold);color:var(--deep);padding:12px 28px;border-radius:8px;font-size:15px;font-weight:600;border:none;cursor:pointer;box-shadow:var(--shadow-gold);transition:opacity .2s,transform .2s,box-shadow .2s;} .checker-btn-next:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold-h);} .checker-btn-next:hover{opacity:.9;} .checker-btn-prev{background:none;border:1.5px solid var(--border);color:var(--text2);padding:12px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s;} .checker-btn-prev:hover{border-color:var(--text2);} .checker-result{background:var(--ivory);border-left:3px solid var(--indigo);border-radius:0 10px 10px 0;padding:24px;margin-bottom:24px;} .checker-result-label{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--indigo);margin-bottom:10px;} .checker-result-text{font-size:15px;color:var(--text);line-height:1.75;} .checker-email-group{display:flex;flex-direction:column;gap:8px;margin:20px 0;} .checker-email-input{padding:14px 16px;border:1.5px solid var(--border);border-radius:8px;font-size:16px;font-family:var(--font);color:var(--text);background:var(--white);transition:border-color .2s;width:100%;box-sizing:border-box;} .checker-email-input:focus{outline:none;border-color:var(--indigo);} .checker-submit-btn{background:var(--indigo);color:var(--white);padding:14px 28px;border-radius:8px;font-size:15px;font-weight:700;border:none;cursor:pointer;width:100%;transition:opacity .2s;} .checker-submit-btn:hover{opacity:.9;} .checker-step{display:none;}.checker-step.active{display:block;animation:stepIn .25s ease;} @keyframes stepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}} .checker-confirm{text-align:center;padding:16px 0;} .checker-confirm-icon{font-size:40px;margin-bottom:16px;} .checker-confirm-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px;} /* ── PARTNER LOGOS SECTION ── */ .logos-section { padding:40px 0 36px; border-top:1px solid var(--border); background:var(--white); } .logos-heading { text-align:center; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--text3); text-transform:uppercase; margin-bottom:24px; display:block; } .logos-row { margin-bottom:20px; } .logos-row:last-child { margin-bottom:0; } .logos-row-label { font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--text3); text-transform:uppercase; text-align:center; margin-bottom:10px; } .logo-static-grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 28px; padding:4px 0; } .logo-item { height:30px; width:auto; max-width:140px; object-fit:contain; display:block; flex-shrink:0; opacity:0.82; transition:opacity .2s ease; filter:grayscale(20%); } .logo-item:hover { opacity:1; } /* Inline contextual grid (inside content sections) */ .logo-inline-strip { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:20px 0 6px; border-top:1px solid var(--border); margin-top:20px; } /* White chip so light/white wordmarks (IFZA, DIFC) read on the ivory section instead of vanishing. Full opacity + hairline border unifies the strip. content-box keeps height:28px as the logo height; padding sits around it. */ .logo-inline-strip .logo-item { height:28px; opacity:1; background:#FFFFFF; border:1px solid var(--border); border-radius:6px; padding:7px 12px; box-sizing:content-box; } /* IFZA ships as a PURE-WHITE wordmark (every pixel luminance 255) — invisible on the white chip above. Give just IFZA a deep-navy chip so its white mark reads (19.45:1), matching the dark-boxed logos already in the strip. Targeted by alt + src so it survives either attribute. CSS-only; no asset/HTML change. */ .logo-inline-strip .logo-item[alt="IFZA"], .logo-inline-strip .logo-item[src*="ifza"] { background:#09082A; border-color:rgba(255,255,255,0.12); } .logo-inline-strip .logo-item:hover { opacity:1; } .logo-inline-label { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-bottom:0; width:100%; } .checker-confirm-text{font-size:15px;color:var(--text2);line-height:1.7;} /* ── BANK CARDS WITH LOGO ── */ .bank-pcard { display:flex; flex-direction:column; } .bank-logo-wrap { height:52px; display:flex; align-items:center; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border); } /* Real bank logos, optically normalized: each is sized to its own shape (driven by --blh) so the heterogeneous set reads at even visual weight in identical card cells — wide wordmarks shorter, compact/stacked marks taller (same technique as .zl free-zone logos). */ .bank-logo { display:block; width:auto; max-width:190px; height:var(--blh,30px); object-fit:contain; object-position:left center; flex-shrink:0; } .bank-logo[data-bank="emirates-nbd"] { --blh:39px; } .bank-logo[data-bank="fab"] { --blh:36px; } .bank-logo[data-bank="wio"] { --blh:33px; } .bank-logo[data-bank="dib"] { --blh:32px; } .bank-logo[data-bank="standard-chartered"]{ --blh:30px; } .bank-logo[data-bank="adcb"] { --blh:28px; } .bank-logo[data-bank="hsbc"] { --blh:27px; } .bank-logo[data-bank="rakbank"] { --blh:26px; } .bank-logo[data-bank="adib"] { --blh:24px; } .bank-logo[data-bank="mashreq"] { --blh:20px; } /* ── BANK CHIP (D3: uniform typographic treatment) ── */ .bank-chip { display: flex; align-items: center; justify-content: center; height: 56px; border: 1px solid var(--border, rgba(0,0,0,0.08)); border-radius: 10px; background: var(--ivory); font-weight: 700; font-size: 15px; color: var(--text); letter-spacing: -0.01em; } .bank-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } @media (max-width:600px) { .bank-chip-grid { grid-template-columns: repeat(2, 1fr); } } /* ── ZONE CHIP ── typographic network signal (free zones / authorities) when no logos are licensed; reusable across structure/jurisdiction pages */ .zone-net { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); } .zone-net-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 13px; } .zone-chip-row { display: flex; flex-wrap: wrap; gap: 9px; } .zone-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--ivory); font-size: 13px; font-weight: 600; color: var(--text2); letter-spacing: -0.005em; } /* ── ZONE LOGOS ── real free-zone / financial-centre logos, normalized in uniform white cells (reusable) ── */ .zone-logos { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); } .zone-logos-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 16px; } .zone-logos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .zl { height: 80px; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px 18px; box-shadow: 0 1px 2px rgba(9,8,42,0.04); transition: border-color .2s, box-shadow .2s, transform .2s; } a.zl:hover { border-color: rgba(15,7,189,0.18); box-shadow: var(--shadow-card-h); transform: translateY(-2px); } /* Optical normalization: each logo is sized to its own shape (driven by --zlh) so all ten read at equal visual weight inside identical cells — wide wordmarks shorter, square/compact emblems taller. Tuned per logo; this is what makes a heterogeneous logo wall look intentional. */ .zl img { width: auto; max-width: 100%; height: var(--zlh, 28px); object-fit: contain; display: block; } .zl[data-z="ifza"] img { --zlh: 23px; } .zl[data-z="adgm"] img { --zlh: 26px; } .zl[data-z="dmcc"] img { --zlh: 26px; } .zl[data-z="difc"] img { --zlh: 23px; } .zl[data-z="spc"] img { --zlh: 28px; } .zl[data-z="meydan"] img { --zlh: 31px; } .zl[data-z="dafza"] img { --zlh: 33px; } .zl[data-z="jafza"] img { --zlh: 35px; } .zl[data-z="dubai-south"] img { --zlh: 42px; } .zl[data-z="rakez"] img { --zlh: 46px; } @media (max-width: 560px) { .zone-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .zl { height: 70px; padding: 10px 16px; } .zl img { height: calc(var(--zlh, 28px) * 0.9); } } /* ── LOGO PLACEHOLDER BOX ── reserved space for real logos; drop image in and remove this */ .logo-ph-box { display: inline-flex; align-items: center; justify-content: center; background: var(--ivory); border: 1px solid var(--border); border-radius: 8px; padding: 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); white-space: nowrap; overflow: hidden; flex-shrink: 0; } /* ════════════════════════════════════════════════ D4: MOBILE POLISH ════════════════════════════════════════════════ */ /* D4 §11 — section vertical padding tighter on mobile */ @media (max-width:768px) { section, .section { padding-top: 44px; padding-bottom: 44px; } } @media (max-width:480px) { section, .section { padding-top: 36px; padding-bottom: 36px; } } /* D4 §12 — tap targets ≥ 44px */ .nav-link, .mob-sub a, .nav-toggle, .wa-fab, .btn, button, details.faq-item summary { min-height: 44px; } /* D4 §13 — prevent iOS zoom on form inputs */ @media (max-width:768px) { input, select, textarea { font-size: 16px !important; } } /* D4 §14 — compare table: shrink + reveal the cost column on mobile. 2-col cost/fee tables (golden-visa, mainland) fit without scroll on narrow phones. The 5-col free-zone table uses .zone-cards swap (see end of file). The d-matrix on company-setup uses .d-matrix-cards swap (existing). */ @media (max-width: 640px) { .compare-table { min-width: 0; width: 100%; } .compare-table th, .compare-table td { padding: 9px 10px; font-size: 12.5px; white-space: normal; } .compare-table .row-label { font-size: 12px; } } /* D4 §15 — consistent 20px horizontal gutters on mobile */ @media (max-width:768px) { .container, .inner { padding-left: 20px; padding-right: 20px; } } /* D4 §16 — FAB + sticky CTA must not overlap */ @media (max-width:768px) { .wa-fab { bottom: 16px; } .call-fab { bottom: 72px; } } /* When sticky bar is visible on mobile, push FABs above it */ @media (max-width:768px) { .sticky-bar-active .wa-fab { bottom: 72px; } .sticky-bar-active .call-fab { bottom: 132px; } } /* D4 §17 — hero H1 must not overflow at 360px (floor synced to new desktop ceilings) */ @media (max-width:400px) { .hero .hero-title, .ph-h1 { font-size: clamp(1.65rem, 7vw, 2.05rem) !important; } } /* ── TESTIMONIAL CARDS (tcard) ── */ .tcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .tcard { background: #fff; border: 1px solid var(--border, rgba(0,0,0,0.08)); border-top: 3px solid var(--indigo); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; } .tcard-body { font-size: 1.0625rem; line-height: 1.72; color: var(--text2); font-style: italic; flex: 1; } .tcard-foot { display: flex; flex-direction: column; gap: 4px; } .tcard-name { font-weight: 700; color: var(--text); font-size: 0.95rem; font-style: normal; } .tcard-title { font-size: 0.85rem; color: var(--text2); } .tcard-source { font-size: 0.8rem; color: var(--indigo); text-decoration: none; } .tcard-source:hover { text-decoration: underline; } /* Verified indicator on testimonial source links. Checkmark prefix makes it instantly clear the review is independently verifiable. */ .tcard-source::before { content: "\2713\00a0"; color: var(--indigo); font-weight: 700; } /* Rating badge — more prominent near testimonials */ .rating-badge { display: inline-flex; margin: 14px 0; } .rating-badge a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; color: var(--indigo); text-decoration: none; padding: 8px 18px; border: 1.5px solid var(--indigo); border-radius: 99px; transition: background 0.2s, color 0.2s; } .rating-badge a:hover { background: var(--indigo); color: #fff; } .founder-video-slot { width: 100%; margin: 24px 0; } .founder-video-slot iframe, .founder-video-slot > div { width: 100%; aspect-ratio: 16/9; border-radius: 12px; } /* ── MARKETING ENHANCEMENTS ──────────────────────────────────────────────── */ /* 1. Hero primary CTA — subtle breathing pulse. Applied to the first .btn-gold inside .hero-actions so only the primary booking CTA pulses — not every gold button on the page. Also available via explicit class .btn-gold.cta-pulse on any page hero. Merged into the existing box-shadow so hover shadow still works correctly. Respects prefers-reduced-motion: stops entirely when opted out. */ @keyframes cta-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(201,152,26,0.28), 0 0 0 0 rgba(201,152,26,0.40); } 50% { box-shadow: 0 4px 16px rgba(201,152,26,0.28), 0 0 0 8px rgba(201,152,26,0); } } .btn-gold.cta-pulse, .hero-actions .btn-gold:first-child, .hero-actions .btn-primary:first-child { animation: cta-pulse 2.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .btn-gold.cta-pulse, .hero-actions .btn-gold:first-child, .hero-actions .btn-primary:first-child { animation: none; } } /* 2. Sticky CTA bar action button. Deep-ink #09082A on gold = 7.40:1 (WCAG AA). White-on-gold would be 2.63:1 (FAIL) — keep deep ink, consistent with the locked gold-fill button policy. */ .sticky-cta-bar .sticky-cta-btn { background: var(--gold); color: #09082A; font-weight: 700; } .sticky-cta-bar .sticky-cta-btn:hover { opacity: 0.88; } /* ════════════════════════════════════════════════ UX IMPROVEMENTS — NNGroup audit pass All changes are additive; they do not touch homepage-fenced HTML. ════════════════════════════════════════════════ */ /* ── 1a. SECTION SEPARATORS — subtle visual break between adjacent light sections ── */ .section + .section { border-top: 1px solid rgba(15,7,189,0.06); } /* Suppress between dark/proof sections that already carry their own boundary */ .bg-deep + .section, .section + .bg-deep, .cta-strip + .section, .section + .cta-strip, .proof-wrap + .section, .section + .proof-wrap, .logos-section + .section, .section + .logos-section { border-top: none; } /* ── 1b. CARD HOVER — premium soft-deep, blue-tinted shadow + lift ── Refreshed (2026) to the spcfz/Meydan "soft + depth" stacked-shadow language, kept in the brand indigo so the hover reads as DMC, not a generic drop shadow. Grouped across every inner-page card type for one consistent interaction. */ .pcard:hover, .route:hover, .tcard:hover, .case-card:hover, .commit:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(9,8,42,0.08), 0 20px 48px rgba(9,8,42,0.12); } .svc-card:hover { box-shadow: 0 2px 6px rgba(9,8,42,0.08), 0 20px 48px rgba(9,8,42,0.12); } @media (prefers-reduced-motion: reduce) { .pcard:hover, .route:hover, .tcard:hover, .case-card:hover, .commit:hover { transform: none; } } /* ── 2a. HERO CTA BUTTONS — full-width stacked on narrow mobile ── */ @media (max-width: 600px) { .hero-actions { flex-direction: column; align-items: stretch; width: 100%; } .hero-actions .btn-gold, .hero-actions .btn-outline-ink, .hero-actions .btn-primary, .hero-actions .btn-outline-light, .hero-actions .btn-outline-white { width: 100%; text-align: center; justify-content: center; } } /* ── 2b. PREMIUM CARD GRIDS — single column below 600px ── */ @media (max-width: 600px) { .pcard-grid.c2, .pcard-grid.c3 { grid-template-columns: 1fr; } } /* ── 2c. NAVIGATION DROPDOWN — legible min-width on 768–1024px tablets ── */ @media (max-width: 1024px) and (min-width: 769px) { .nav-dd { min-width: 220px; } } /* ── 3a. FORM SUBMIT BUTTON — full-width on mobile ── */ @media (max-width: 600px) { .form .btn-gold, .form .btn-primary, .form [type="submit"] { width: 100% !important; justify-content: center; } } /* ── 3b. FORM SUCCESS STATE — branded indigo (overrides earlier generic green) ── */ .form-ok { border-left: 4px solid var(--indigo) !important; background: rgba(15,7,189,0.04) !important; padding: 20px !important; border-radius: 8px !important; color: var(--indigo) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; } /* ── 4. FOCUS STATES — keyboard-safe accessible ring ── */ /* :focus-visible fires only for keyboard/assistive navigation; mouse clicks do not trigger it, so sighted pointer users see no persistent outline rings. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 3px; } /* ════════════════════════════════════════════════ BRAND FORM FOCUS RING — global layer The .field-scoped rule (line ~1025) already covers form components inside the .field wrapper. This global catch-all covers standalone inputs outside that wrapper (checker tool, inline search, etc.). Uses 0.15 opacity vs the 0.12 in .field — slightly more visible on unstyled contexts. No !important — specificity cascade is correct. ════════════════════════════════════════════════ */ input:focus, select:focus, textarea:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(15,7,189,0.15); outline: none; } /* ════════════════════════════════════════════════ BRAND SCROLLBAR — webkit Track: warm off-white (matches ivory page backgrounds). Thumb: indigo (primary brand trust colour) → gold on hover (the one interaction moment gold is permitted: hover state on dark). Keeps the indigo/gold brand system even at the OS chrome level. ════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f0ede6; } ::-webkit-scrollbar-thumb { background: var(--indigo); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ════════════════════════════════════════════════════════════════════════ MOTION LIBRARY v2 + IMAGE PLACEHOLDERS (2026 refresh — fully additive) ──────────────────────────────────────────────────────────────────────── Layers on the EXISTING `.reveal → .visible` IntersectionObserver already wired into every page (no JS change needed for the CSS reveal variants). Reference inspiration: spcfz.ae / IFZA / Meydan FZ / Apple — adapted to the LOCKED DMC system: blue-dominant, gold highlights-only, Montserrat 700, never bouncy. Every transform/clip below is neutralised under prefers-reduced-motion at the foot of this block. ════════════════════════════════════════════════════════════════════════ */ /* ── Reveal variants (add alongside `.reveal`; the observer toggles `.visible`) ── */ /* Figure / image clip-wipe — reveals upward behind its own overflow box. Overrides the base translateY/blur so a figure gets ONE clean wipe, not two moves. */ .reveal.reveal-clip { transform: none; filter: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease-out), opacity 0.9s var(--ease-out); } .reveal.reveal-clip.visible { clip-path: inset(0 0 0 0); } /* Directional slides for side-by-side / split content (skips the blur). */ .reveal.reveal-left { transform: translateX(-32px); filter: none; } .reveal.reveal-right { transform: translateX(32px); filter: none; } /* ── Animated gold underline (opt-in on a heading that also carries `.reveal`) ── Decorative gold bar (not text) → contrast-safe on light surfaces. */ .ul-draw { position: relative; } .ul-draw::after { content: ''; position: absolute; left: 0; bottom: -12px; width: 48px; height: 3px; border-radius: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease-out) 0.25s; } .ul-draw.visible::after { transform: scaleX(1); } .ul-draw.ul-center::after { left: 50%; transform: translateX(-50%) scaleX(0); } .ul-draw.ul-center.visible::after { transform: translateX(-50%) scaleX(1); } /* ── CTA / link micro-accents (IFZA-style sliding arrow) ── Opt-in: structure as Text → */ .lnk-arrow .arr { display: inline-block; transition: transform 0.25s var(--ease-out); } .lnk-arrow:hover .arr, .lnk-arrow:focus-visible .arr { transform: translateX(4px); } /* Restrained gold accent-dot that can lead an eyebrow/label (one moment, decorative). */ .acc-dot { position: relative; padding-left: 16px; } .acc-dot::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,152,26,0.16); } /* ── Form-field micro-interactions ("field-specific") ── Subtle focus lift + label highlight; reuses the existing focus ring/border. */ .field input, .field select, .field textarea { transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .field input:focus, .field select:focus, .field textarea:focus { transform: translateY(-1px); } .field:focus-within label { color: var(--indigo); } .field:focus-within label .req { color: var(--gold); } /* ════════════════════════════════════════════════════════════════════════ IMAGE PLACEHOLDERS (phase-2 ready) Reuses the proven `.founder-photo-ph` recipe (aspect-ratio + ivory→indigo gradient + overflow). A placeholder carries NO (the SEO gate requires alt on every ); the real image is a commented … template inside. When that is uncommented, `:has(img)` hides the label and the image fills the frame — all scrim/grade/zoom "formatting on top" is pre-baked. ════════════════════════════════════════════════════════════════════════ */ .img-ph { position: relative; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(150deg, var(--ivory), color-mix(in srgb, var(--indigo) 7%, var(--ivory))); display: flex; align-items: center; justify-content: center; } .img-ph__label { display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text3); line-height: 1.5; } .img-ph__label svg { width: 18px; height: 18px; stroke: var(--indigo); opacity: 0.5; flex-shrink: 0; } .img-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Phase-2: when a real is dropped in, hide the holding label automatically. */ .img-ph:has(img) .img-ph__label { display: none; } /* Hide the placeholder box entirely when no image is present — avoids a large blank area. When a real is added, the :not(:has(img)) no longer matches and the box reappears. */ .img-ph:not(:has(img)) { display: none; } /* Aspect-ratio variants */ .img-ph--wide { aspect-ratio: 16 / 9; } .img-ph--photo { aspect-ratio: 4 / 5; } .img-ph--square { aspect-ratio: 1 / 1; } .img-ph--hero { aspect-ratio: 4 / 3; } .img-ph--tall { aspect-ratio: 3 / 4; } /* Pre-baked "formatting on top / filters" the owner asked to have ready: */ .img-ph--scrim::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(9,8,42,0.55), transparent 62%); } .img-ph--scrim:not(:has(img))::after { display: none; } /* no dark veil over an empty box */ .img-ph--grade > img { filter: saturate(1.05) contrast(1.02); } .img-ph--zoom > img { transition: transform 0.9s var(--ease-out); } .img-ph--zoom:hover > img { transform: scale(1.04); } /* A caption that rides over the bottom of a scrimmed image (shown only with an image). */ .img-ph__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; font-size: 12.5px; font-weight: 600; color: #fff; display: none; } .img-ph:has(img) .img-ph__cap { display: block; } /* ── Inner-page hero photographic layer (spcfz/IFZA/Meydan scrim look) ── First child of `.page-hero`; sits behind `.page-hero-inner` (z-index:2). INERT until a real is added → zero change to the current hero now. */ .page-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .page-hero-media:not(:has(img)) { display: none; } .page-hero-media > img { width: 100%; height: 100%; object-fit: cover; opacity: 0.30; } .page-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,8,54,0.92) 0%, rgba(11,8,54,0.55) 50%, rgba(11,8,54,0.22) 100%); } /* ── Light figure parallax — progressive enhancement, NO JS ── Modern scroll-driven timeline; degrades to the static clip-reveal elsewhere. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) { .parallax-fig > img { animation: figRise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } } } @keyframes figRise { from { transform: translateY(26px); } to { transform: translateY(0); } } /* ── Reduced-motion guard for everything added above ── */ @media (prefers-reduced-motion: reduce) { .reveal.reveal-clip { clip-path: none; transition: none; } .reveal.reveal-left, .reveal.reveal-right { transform: none; } .ul-draw::after, .ul-draw.ul-center::after { transform: scaleX(1); transition: none; } .ul-draw.ul-center::after { transform: translateX(-50%) scaleX(1); } .lnk-arrow .arr { transition: none; } .field input:focus, .field select:focus, .field textarea:focus { transform: none; } .img-ph--zoom:hover > img { transform: none; } .parallax-fig > img { animation: none; } } /* Phase-2 enablers for the EXISTING founder placeholders (homepage `.founder-photo-ph` + the hidden `.founder-video-slot`): drop in a real /