@font-face{font-family:'Rubik';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/rubik.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/fonts.css --- */ /* ============================================================ SATalent1st — Font loading Display + Body/UI: Rubik (Google Fonts), with the system stack as fallback. The Rubik stylesheet is loaded via in the HTML (a parallel fetch — faster than a render-blocking nested @import here). Cormorant Garamond + Inter were removed: the live design uses Rubik throughout. ============================================================ */ :root { /* Display — Rubik. Headlines, wordmark, slogan. */ --font-display: "Rubik", -apple-system, system-ui, "Segoe UI", sans-serif; /* Body / UI — Rubik (Google Fonts), system stack as fallback. */ --font-text: "Rubik", -apple-system, system-ui, "Segoe UI", sans-serif; --font-display-ui: "Rubik", -apple-system, system-ui, "Segoe UI", sans-serif; /* aliases */ --font-serif: var(--font-display); --font-sans: var(--font-text); } /* --- tokens/colors.css --- */ /* ============================================================ SATalent1st — Colour tokens One warm palette at two volumes: a light gallery and dark punctuation tiles. The accent is gold and gold alone. ============================================================ */ :root { /* --- accent: the single interactive colour (SAT's "one Action Blue") --- */ --gold: #B8924C; /* fills · the mark dot · focus ring */ --gold-deep: #9a7a3e; /* primary button pressed */ --gold-text: #7d6230; /* gold-as-text on light (AA ≥5.2:1) */ --gold-lt: #ddbc7e; /* gold-as-text on dark (AA ≥5.2:1) */ /* --- core neutral (mark ring + hairline base) --- */ --taupe: #9C8770; /* --- surface: light-dominant gallery --- */ --canvas: #FBFAF6; /* the dominant page */ --canvas-parchment: #F5F1E8; /* alternating light tile */ --surface-pearl: #F1ECDF; /* inset panels, grouped blocks */ --surface-card: #FFFFFF; /* raised cards only */ --tile-1: #2F4F35; /* primary dark tile (forest) */ --tile-2: #243d29; /* deepest floor (forest-deep) — heroes */ --tile-3: #2C2A26; /* warm near-black — stat band, footer */ --tile-oxblood: #6B2E2E; /* rare heritage / alert tile */ /* --- text --- */ --ink: #2C2A26; /* headlines + body on light */ --body-muted: #6a6052; /* secondary copy on light */ --ink-on-dark: #F5F1E8; /* primary text on dark tiles */ --body-on-dark: #cfc3ad; /* secondary copy on dark */ --body-on-dark-soft: rgba(245,241,232,.78); /* hero lead over dark */ /* --- hairline --- */ --hairline: rgba(156,135,112,.30); /* taupe separator on light */ --hairline-dark: rgba(255,255,255,.12); /* separator inside dark tiles */ --hairline-strong: rgba(120,103,82,.6); /* prefers-contrast upgrade */ /* --- semantic aliases --- */ --bg: var(--canvas); --surface: var(--canvas); --surface-alt: var(--canvas-parchment); --text: var(--ink); --text-muted: var(--body-muted); --accent: var(--gold); --border: var(--hairline); --focus-ring: var(--gold); /* --- status pips (verticals: live / pre-launch / in-dev) --- */ --pip-live: #3c8f57; --pip-pre: var(--gold); --pip-dev: var(--taupe); } @media (prefers-contrast: more) { :root { --hairline: var(--hairline-strong); --body-muted: #544e42; } } /* --- tokens/typography.css --- */ /* ============================================================ SATalent1st — Typography tokens Two families, one boundary: Cormorant for display, SF/Inter for everything else. Body runs at 17px / 1.65. Cormorant numerals MUST be lining figures (see body rule). ============================================================ */ :root { /* --- size / weight / tracking primitives --- */ --fs-hero: clamp(46px, 8.4vw, 92px); /* @kind font */ --fs-display-lg: clamp(40px, 6vw, 64px); /* @kind font */ --fs-display-md: clamp(30px, 4vw, 40px); /* @kind font */ --fs-display-italic: clamp(20px, 3vw, 34px); /* @kind font */ --fs-lead: 21px; /* @kind font */ --fs-tagline: 20px; /* @kind font */ --fs-body: 17px; /* @kind font */ --fs-caption: 14px; /* @kind font */ --fs-button: 13px; /* @kind font */ --fs-nav: 13px; /* @kind font */ --fs-fine: 12px; /* @kind font */ --fs-micro: 11px; /* @kind font */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --lh-tight: 1.0; /* @kind font */ --lh-display: 1.18; /* @kind font */ --lh-body: 1.65; /* @kind font */ } /* ---------------------------------------------------------- Type-token utility classes — apply the full ramp. Cormorant: 500/600, natural (slightly positive) tracking. SF/Inter: negative tracking only at ≥20px. ---------------------------------------------------------- */ .t-hero { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 500; line-height: 1.0; letter-spacing: .005em; } .t-display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: 600; line-height: 1.04; letter-spacing: .005em; } .t-display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: 600; line-height: 1.18; letter-spacing: .01em; } .t-italic { font-family: var(--font-display); font-style: italic; font-size: var(--fs-display-italic); font-weight: 500; line-height: 1.2; letter-spacing: .02em; } .t-lead { font-family: var(--font-display-ui); font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; letter-spacing: -.01em; } .t-tagline { font-family: var(--font-display-ui); font-size: var(--fs-tagline); font-weight: 400; line-height: 1.4; letter-spacing: -.005em; } .t-body-strong { font-family: var(--font-text); font-size: var(--fs-body); font-weight: 600; line-height: 1.6; } .t-body { font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; line-height: 1.65; } .t-caption { font-family: var(--font-text); font-size: var(--fs-caption); font-weight: 400; line-height: 1.55; } .t-button { font-family: var(--font-text); font-size: var(--fs-button); font-weight: 600; line-height: 1; letter-spacing: .02em; } .t-nav { font-family: var(--font-text); font-size: var(--fs-nav); font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase; } .t-fine { font-family: var(--font-text); font-size: var(--fs-fine); font-weight: 400; line-height: 1.7; } .t-micro { font-family: var(--font-text); font-size: var(--fs-micro); font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; } /* Belt-and-braces lining figures on every Cormorant element. (The body rule in base.css already inherits; this guarantees it.) */ .t-hero, .t-display-lg, .t-display-md, .t-italic { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } /* --- tokens/spacing.css --- */ /* ============================================================ SATalent1st — Spacing & layout tokens Base unit 4px. Structural layout snaps to 8/12/16/24/40/64. ============================================================ */ :root { --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; /* card padding */ --space-xl: 40px; --space-xxl: 64px; /* fluid */ --space-section: clamp(64px, 9vw, 96px); /* vertical padding inside every tile */ /* page gutter, safe-area aware in use */ --gutter: clamp(20px, 5vw, 28px); /* @kind spacing */ --maxw: 1180px; /* max content width */ /* short aliases (mirror the showcase build) */ --xxs: var(--space-xxs); --xs: var(--space-xs); --sm: var(--space-sm); --md: var(--space-md); --lg: var(--space-lg); --xl: var(--space-xl); --xxl: var(--space-xxl); --section: var(--space-section); } /* --- tokens/radius.css --- */ /* ============================================================ SATalent1st — Radius tokens Pill is the action signal (gold CTA + circular controls). Full-bleed tiles use none — the colour change is the divider. ============================================================ */ :root { --r-none: 0px; --r-xs: 2px; /* utility chips */ --r-sm: 4px; /* cards, inset panels, caution box */ --r-md: 8px; /* swatches, lockup frames, larger panels */ --r-lg: 16px; /* feature cards */ --r-pill: 9999px; /* gold CTA · ghost · circular controls */ /* aliases */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-pill: var(--r-pill); } /* --- tokens/elevation.css --- */ /* ============================================================ SATalent1st — Elevation tokens ONE signature shadow, warm-tinted (never black), only where something lifts or floats. Never at rest, never on text, never on tiles. Elevation otherwise comes from the tone step (parchment → white card) and the tile alternation. ============================================================ */ :root { --shadow-card: 0 22px 48px -28px rgba(36,32,26,.45); /* card on hover */ --shadow-float: 0 20px 50px -24px rgba(36,32,26,.40); /* floating UI */ } /* --- tokens/motion.css --- */ /* ============================================================ SATalent1st — Motion tokens Restraint, codified: two easings, three durations. No parallax, no continuous animation. Respect reduced-motion. ============================================================ */ :root { --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */ --dur-fast: 200ms; /* @kind other */ --dur-base: 280ms; /* @kind other */ --dur-slow: 500ms; /* @kind other */ } /* --- tokens/base.css --- */ /* ============================================================ SATalent1st — Base resets & document defaults ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--canvas); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Cormorant defaults to OLD-STYLE figures — its "1" reads as an l / dotless-i, turning "SATalent1st" into "SATalentıst". Force lining figures globally; both properties inherit, reaching every Cormorant element. */ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } img { max-width: 100%; display: block; } a { color: inherit; } /* Shared focus ring — gold, offset. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; } /* Layout helper: max-width container + page gutter (safe-area aware). */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ SATalent1st group site — composed strictly on the house tokens. ============================================================ */ /* ---- layout primitives ---- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-section); } section[id], article[id] { scroll-margin-top: 90px; } .tile-light { background: var(--canvas); color: var(--ink); } .tile-parchment { background: var(--canvas-parchment); color: var(--ink); } .tile-charcoal { background: var(--tile-3); color: var(--ink-on-dark); } /* ---- brand lockup ---- */ .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .logo__mark { width: 30px; height: 30px; color: var(--ink); flex: none; } .logo__word { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: .005em; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .logo__word b { color: var(--gold-text); font-weight: 600; } .on-dark .logo__mark, .logo--on-dark .logo__mark { color: var(--ink-on-dark); } .on-dark .logo__word, .logo--on-dark .logo__word { color: var(--ink-on-dark); } .on-dark .logo__word b, .logo--on-dark .logo__word b { color: var(--gold-lt); } /* ---- eyebrow ---- */ .eyebrow { margin: 0; font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .on-dark .eyebrow, .eyebrow--on-dark { color: var(--gold-lt); } /* ---- display headings ---- */ .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin: 0; } .display--hero { font-size: var(--fs-hero); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .display--lg { font-size: var(--fs-display-lg); } .display--md { font-size: var(--fs-display-md); line-height: 1.14; } .italic { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: .02em; } .lead { font-family: var(--font-text); font-weight: 300; font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -.01em; } .body { font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; } .muted { color: var(--body-muted); } .on-dark .muted, .muted--on-dark { color: var(--body-on-dark); } /* ---- buttons (single accent — gold) ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-text); cursor: pointer; text-decoration: none; border: 1px solid transparent; box-sizing: border-box; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1; padding: 13px 26px; border-radius: var(--r-pill); min-height: 44px; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .btn--primary { background: var(--gold); color: var(--tile-3); border-color: var(--gold); } .btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--gold-text); border-color: currentColor; } .btn--ghost:hover { background: var(--gold); color: var(--tile-3); border-color: var(--gold); transform: translateY(-1px); } .btn--ghost.on-dark, .on-dark .btn--ghost { color: var(--gold-lt); } .btn--ghost.on-dark:hover, .on-dark .btn--ghost:hover { color: var(--tile-3); } /* ---- text link (gold underline expands from left) ---- */ .text-link { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-text); font-size: 15px; font-weight: 600; text-decoration: none; color: var(--gold-text); padding-bottom: 2px; } .text-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-standard); } .text-link:hover::after { transform: scaleX(1); } .text-link .arrow { transition: transform var(--dur-base) var(--ease-standard); } .text-link:hover .arrow { transform: translateX(3px); } .on-dark .text-link, .text-link--on-dark { color: var(--gold-lt); } /* ---- status pip ---- */ .pip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--taupe); } /* ---- hairline rules ---- */ .rule-gold { width: 64px; height: 2px; background: var(--gold); border: 0; margin: 0; } /* product screenshot — native ratio, lifts off the tile */ .shot { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline-dark); box-shadow: 0 22px 48px -28px rgba(0,0,0,.55); background: #fff; } .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(251,250,246,.86); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--hairline); } .nav__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nav__links { display: flex; gap: 26px; align-items: center; } .nav__link { font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; position: relative; padding-block: 6px; white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-standard); } .nav__link:hover::after { transform: scaleX(1); } /* ---- nav dropdowns ---- */ .nav__item { position: relative; display: flex; align-items: center; } .nav__trigger { background: none; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; } .nav__caret { font-size: 10px; line-height: 1; color: var(--gold-text); margin-left: 1px; transition: transform var(--dur-base) var(--ease-standard); } .nav__item:hover .nav__caret, .nav__item.is-open .nav__caret { transform: rotate(180deg); } .nav__dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); min-width: 210px; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 8px; box-shadow: 0 22px 48px -28px rgba(36,32,26,.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); z-index: 60; } .nav__dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 14px; } .nav__dropdown--wide { min-width: 290px; } .nav__item:hover .nav__dropdown, .nav__item.is-open .nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav__dd-link { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .nav__dd-link:hover, .nav__dd-link:focus-visible { background: var(--surface-pearl); color: var(--gold-text); outline: none; } .nav__dd-meta { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--body-muted); } .nav__dd-head { margin: 12px 12px 4px; font-family: var(--font-text); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); } .nav__dd-head:first-child { margin-top: 4px; } .nav__menu-head { font-family: var(--font-text); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); padding: 18px 4px 6px; } .nav__right { display: flex; align-items: center; gap: 18px; } .nav__burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); } .nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav--open .nav__burger span:nth-child(2) { opacity: 0; } .nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile menu panel */ .nav__menu { position: fixed; inset: 72px 0 auto 0; background: var(--canvas); border-bottom: 1px solid var(--hairline); transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard); z-index: 49; } .nav--open .nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; } .nav__menu ul { list-style: none; margin: 0; padding: 16px var(--gutter) 28px; display: flex; flex-direction: column; gap: 2px; } .nav__menu a { display: block; padding: 14px 4px; font-family: var(--font-text); font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); } .nav__menu .btn { margin-top: 18px; width: 100%; justify-content: center; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; padding-block: clamp(112px, 19vh, 200px); } .hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 80% 12%, rgba(184,146,76,.16), transparent 55%); } .hero__watermark { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: min(44vw, 540px); height: min(44vw, 540px); color: rgba(245,241,232,.14); opacity: .32; pointer-events: none; } .hero__inner { position: relative; } .hero h1 { margin: 0; color: var(--ink-on-dark); } .hero h1 b { color: var(--gold-lt); font-weight: 600; } .hero__slogan { margin: 22px 0 0; font-family: var(--font-text); font-weight: 600; font-size: clamp(14px, 1.5vw, 16px); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lt); } .hero__sub { margin: 22px 0 0; max-width: 40ch; color: var(--body-on-dark-soft); } .hero__cta { margin-top: 40px; } /* ============================================================ PRESENTATION (centred intro) ============================================================ */ .presentation__grid { display: grid; grid-template-columns: 1fr 1.28fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .presentation h2 { margin: 12px 0 0; color: var(--tile-1); } .presentation__body { max-width: 54ch; margin: 28px 0 0; text-align: left; } .presentation__body p { margin: 0 0 1.15em; font-size: 18px; color: var(--body-muted); text-wrap: pretty; } .presentation__body p:last-child { margin-bottom: 0; } .presentation__body b { color: var(--ink); font-weight: 600; } .presentation__panel { background: var(--tile-3); border: 1px solid var(--hairline-dark); border-radius: var(--r-md); padding: clamp(22px,2.4vw,28px) clamp(24px,2.6vw,32px); margin: 6px 0 1.15em; } .presentation__panel p { color: var(--body-on-dark); } .presentation__panel p:last-child { margin-bottom: 0; } .presentation__panel b { color: var(--gold-lt); } .presentation__cta { margin-top: 36px; } .presentation__lede { align-self: center; } .presentation__lede .presentation__cta { margin-top: 32px; } .presentation__grid .presentation__body { margin-top: 0; } /* ============================================================ SPLIT (value proposition / philosophy) ============================================================ */ .split { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px, 6vw, 84px); align-items: center; } #value .split { align-items: center; grid-template-columns: 1fr 1.28fr; } #philosophy .split { align-items: center; } .split__lede { align-self: center; } .split__copy h2 { margin: 0; color: var(--tile-1); } .goal { font-family: var(--font-text); font-weight: 300; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.34; color: var(--ink); margin: 6px 0 24px; max-width: 30ch; letter-spacing: -.01em; text-wrap: balance; } .split__copy .body { color: var(--body-muted); } .split__copy .body p { margin: 0 0 1.1em; max-width: 52ch; } .split__copy .body p:last-child { margin-bottom: 0; } /* philosophy vision / mission */ .belief { font-family: var(--font-text); font-weight: 300; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.36; color: var(--ink); margin: 6px 0 30px; max-width: 34ch; letter-spacing: -.01em; text-wrap: pretty; } .vm-block { padding: 22px 0; border-top: 1px solid var(--hairline); } .vm-block:last-child { border-bottom: 1px solid var(--hairline); } .vm-block .label { margin: 0 0 8px; } .vm-block p { margin: 0; color: var(--body-muted); max-width: 54ch; } /* ============================================================ VALUES (framed numbered list) ============================================================ */ .values-head { max-width: 54ch; } .values-head h2 { margin: 12px 0 0; color: var(--tile-1); } .values-frame { margin: 44px 0 0; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 56px); } .values-list { list-style: none; } .value { display: grid; grid-template-columns: 64px 1fr; gap: clamp(16px, 2.5vw, 36px); padding: 26px 0; border-top: 1px solid var(--hairline); align-items: start; } .value:first-child { border-top: 0; padding-top: 0; } .value:last-child { padding-bottom: 0; } .value__num { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--gold-text); line-height: 1; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .value h3 { font-family: var(--font-text); font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--ink); margin: 0 0 7px; } .value p { margin: 0; color: var(--body-muted); font-size: 16px; max-width: 64ch; } /* break long unbreakable tokens (emails / URLs) so they never overflow narrow screens */ .body, .lead, .goal, .belief, p, a, h1, h2, h3, li { overflow-wrap: break-word; } /* values rows cascade in on scroll — 01 then 02 then 03 ... */ #values .value:nth-child(2) { transition-delay: 60ms; } #values .value:nth-child(3) { transition-delay: 120ms; } #values .value:nth-child(4) { transition-delay: 180ms; } #values .value:nth-child(5) { transition-delay: 240ms; } #values .value:nth-child(6) { transition-delay: 300ms; } /* ============================================================ DIVISIONS (two tiers of alternating rows) ============================================================ */ .divisions-head { text-align: center; max-width: 64ch; margin-inline: auto; } .divisions-head h2 { margin: 12px 0 0; color: var(--tile-1); } .divisions-head .lead { margin: 20px auto 0; max-width: 60ch; color: var(--body-muted); } /* ============================================================ CONTACT ============================================================ */ .contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .contact__intro h2 { margin: 12px 0 0; color: var(--tile-1); max-width: 14ch; } .contact__intro p { margin: 22px 0 0; max-width: 40ch; } .contact__assurance { margin-top: 28px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--surface-pearl); border-radius: var(--r-sm); max-width: 42ch; } .contact__assurance svg { width: 20px; height: 20px; color: var(--gold-text); flex: none; margin-top: 1px; } .contact__assurance p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body-muted); } .form-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; } .field { display: flex; flex-direction: column; gap: 8px; } .field--full { grid-column: 1 / -1; } .field label { font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); } .field label .opt { color: var(--body-muted); font-weight: 400; letter-spacing: 0; } .field input, .field select, .field textarea { font-family: var(--font-text); font-size: 16px; color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 13px 14px; width: 100%; box-sizing: border-box; min-height: 48px; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .field textarea { min-height: 128px; resize: vertical; line-height: 1.55; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(154,122,62,.28); } .field input::placeholder, .field textarea::placeholder { color: #6b6253; } .field--error input, .field--error select, .field--error textarea { border-color: var(--tile-oxblood); } .field--error input:focus, .field--error select:focus, .field--error textarea:focus { box-shadow: 0 0 0 3px rgba(107,46,46,.16); } .field__error { font-family: var(--font-text); font-size: 12.5px; font-weight: 500; color: var(--tile-oxblood); min-height: 0; opacity: 0; height: 0; overflow: hidden; transition: opacity var(--dur-fast) var(--ease-standard); } .field--error .field__error { opacity: 1; height: auto; } .form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; } .form-foot .btn { min-width: 200px; justify-content: center; } .form-note { font-family: var(--font-text); font-size: 13px; color: var(--body-muted); } .form-success { display: none; text-align: left; padding: 8px 0; } .form-success .badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pip-live); } .form-success .badge .pip__dot { background: var(--pip-live); box-shadow: 0 0 0 4px rgba(60,143,87,.18); } .form-success h3 { font-family: var(--font-display); font-weight: 600; font-size: 30px; color: var(--ink); margin: 16px 0 0; letter-spacing: .005em; } .form-success p { font-family: var(--font-text); font-size: 16px; color: var(--body-muted); margin: 12px 0 0; max-width: 46ch; } .form--sent .field-grid, .form--sent .form-foot { display: none; } .form--sent .form-success { display: block; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--tile-3); color: var(--body-on-dark); } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--hairline-dark); } .footer__lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .footer__mark { width: 34px; height: 34px; color: var(--ink-on-dark); flex: none; } .footer__word { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: .005em; color: var(--ink-on-dark); line-height: 1; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .footer__word b { color: var(--gold-lt); font-weight: 600; } .footer__slogan { font-family: var(--font-text); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); margin: 16px 0 0; } .footer__col h2 { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--body-on-dark); margin: 0 0 16px; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .footer__col a { font-family: var(--font-text); font-size: 14px; color: var(--body-on-dark); text-decoration: none; position: relative; } .footer__col a:hover { color: var(--gold-lt); } .footer__fine { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 26px; font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--body-on-dark); } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 28px; } #value .split { grid-template-columns: 1fr; } .presentation__grid { grid-template-columns: 1fr; gap: 32px; } .presentation__lede, .split__lede { position: static; } .contact__grid { grid-template-columns: 1fr; gap: 40px; } .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .nav__links { display: none; } .nav__right .btn { display: none; } .nav__burger { display: flex; } .field-grid { grid-template-columns: 1fr; } } @media (min-width: 861px) { .nav__menu { display: none; } } @media (max-width: 560px) { .value { grid-template-columns: 48px 1fr; gap: 16px; } .footer__top { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 480px) { .form-foot { flex-direction: column; align-items: stretch; } .form-foot .btn { width: 100%; min-width: 0; } .hero__watermark { display: none; } } @media (max-width: 360px) { .logo__word { font-size: 20px; } } /* ---- form: honeypot, sending, error, consent ---- */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .btn.is-sending { opacity: .6; pointer-events: none; } .form-error { font-family: var(--font-text); font-size: 14px; line-height: 1.55; color: var(--tile-oxblood); margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--tile-oxblood); border-radius: var(--r-sm); background: rgba(107,46,46,.05); } .form-error[hidden] { display: none; } .form-error a { color: var(--tile-oxblood); font-weight: 600; } .form-consent { font-family: var(--font-text); font-size: 12.5px; line-height: 1.6; color: var(--body-muted); margin: 16px 0 0; max-width: 60ch; } .form-consent a { color: var(--gold-text); font-weight: 600; } /* ---- footer legal / POPIA ---- */ .footer__legal { margin-top: 26px; } .footer__legal p { font-family: var(--font-text); font-size: 12px; line-height: 1.65; color: var(--body-on-dark); margin: 0; max-width: 92ch; } .footer__legal b { color: var(--gold-lt); font-weight: 600; } .footer__legal a { color: var(--gold-lt); } [id] { scroll-margin-top: 90px; } .sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; clip-path: none; overflow: visible; white-space: normal; background: var(--ink); color: var(--ink-on-dark); border-radius: var(--r-sm); font-family: var(--font-text); font-size: 14px; font-weight: 600; z-index: 1000; } /* ============================================================ ABOUT / TEAM (about.html) ============================================================ */ .about-hero { padding-block: clamp(92px, 14vh, 156px); min-height: 0; } .about-hero__h1 { color: var(--ink-on-dark); max-width: 18ch; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(40px, 5vw, 60px); } .member { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .member:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); } .member__photo { width: 100%; aspect-ratio: 4 / 5; background: var(--surface-pearl); } .member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } .member__body { padding: clamp(18px, 1.6vw, 22px); display: flex; flex-direction: column; flex: 1; } .member__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--ink); margin: 0; line-height: 1.15; } .member__role { font-family: var(--font-text); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin: 9px 0 0; line-height: 1.4; } .member__bio { font-family: var(--font-text); font-size: 13.5px; line-height: 1.62; color: var(--body-muted); margin: 14px 0 0; } .member__edu { margin: auto 0 0; padding-top: 16px; font-family: var(--font-text); font-size: 12.5px; color: var(--body-muted); line-height: 1.5; } .member__edu b { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 5px; } .member__edu { margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 14px; } .about-cta__inner { text-align: center; max-width: 52ch; margin-inline: auto; } .about-cta__sub { margin: 18px auto 30px; max-width: 44ch; } @media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } } /* ============================================================ DIVISIONS (divisions.html) ============================================================ */ .divisions-intro { padding-block: clamp(96px, 15vh, 168px); min-height: 0; } .divisions-intro__h1 { color: var(--ink-on-dark); } .div-sec { scroll-margin-top: 80px; } /* cinematic band */ .div-band { position: relative; min-height: clamp(340px, 50vh, 520px); display: flex; align-items: flex-end; overflow: hidden; background: var(--tile-2); } .div-band--img::before { content: ""; position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: var(--pos, center); filter: saturate(.92) contrast(1.04) brightness(.84); z-index: 0; } /* TransformationWorks: the band image is its constellation render (already dark) — don't dim it */ #transformationworks .div-band--img::before { filter: saturate(1.05) contrast(1.05) brightness(1.05); } .div-band__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20,18,16,.90) 0%, rgba(20,18,16,.62) 42%, rgba(20,18,16,.18) 74%, rgba(20,18,16,.04) 100%), linear-gradient(0deg, rgba(20,18,16,.78) 0%, rgba(20,18,16,.10) 48%, rgba(20,18,16,.30) 100%); } .div-band--dark { background: radial-gradient(120% 95% at 82% 14%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 56%), var(--tile-3); } .div-band--dark .div-band__scrim { background: none; } .div-band__watermark { position: absolute; right: -6%; bottom: -14%; width: min(40vw, 460px); height: min(40vw, 460px); color: rgba(245,241,232,.06); z-index: 0; pointer-events: none; } .div-band__inner { position: relative; z-index: 2; padding-block: clamp(40px, 6vw, 76px); } .div-band__eyebrow { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-lt); margin: 0; } .div-band__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -.025em; line-height: .98; color: var(--ink-on-dark); margin: 14px 0 0; } .div-band__strap { font-family: var(--font-text); font-weight: 300; font-size: clamp(17px, 2vw, 21px); color: var(--body-on-dark); margin: 16px 0 0; max-width: 40ch; letter-spacing: -.01em; } /* body */ .div-body__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .div-body__copy .body { max-width: 52ch; } .div-accent { color: var(--accent-text); } .div-accent--dark { color: var(--accent-lt); } .div-link { margin-top: 24px; } .div-link::after { background: currentColor; } .div-facts { background: var(--surface-card); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 30px); } .div-facts__label { font-family: var(--font-text); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; } .div-facts ul { list-style: none; margin: 0; padding: 0; } .div-facts li { font-family: var(--font-text); font-size: 15px; line-height: 1.5; color: var(--body-muted); padding: 13px 0 13px 22px; border-top: 1px solid var(--hairline); position: relative; } .div-facts li:first-child { border-top: 0; } .div-facts li::before { content: ""; position: absolute; left: 0; top: 21px; width: 9px; height: 2px; background: var(--accent); } .div-body__side .shot { box-shadow: 0 26px 60px -30px rgba(0,0,0,.6); } /* platform body is now a light tile — give the dashboard frame a light-visible border */ #platform .shot { border-color: var(--hairline); } @media (max-width: 980px) { .div-body__grid { grid-template-columns: 1fr; gap: 28px; } .div-band { min-height: clamp(300px, 46vh, 420px); } } @media (max-width: 600px) { .div-band__title { font-size: clamp(28px, 7.4vw, 42px); letter-spacing: -.02em; } .div-band__watermark { display: none; } } /* ============================================================ DIVISION TEASERS (homepage) ============================================================ */ .teaser-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(40px, 5vw, 56px); } .teaser { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: clamp(24px, 2.8vw, 36px); text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .teaser:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); } .teaser__market { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin: 0; } .teaser__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -.01em; line-height: 1.05; color: var(--tile-1); margin: 11px 0 0; } .teaser__line { font-family: var(--font-text); font-size: 15px; line-height: 1.58; color: var(--body-muted); margin: 13px 0 0; max-width: 46ch; } .teaser__cta { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--gold-text); margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; } .teaser__cta .arrow { transition: transform var(--dur-base) var(--ease-standard); } .teaser:hover .teaser__cta .arrow { transform: translateX(4px); } .divisions-cta { text-align: center; margin-top: clamp(36px, 4vw, 50px); } @media (max-width: 600px) { .teaser-grid { grid-template-columns: 1fr; } } /* ============================================================ TRANSFORMATIONWORKS PAGE (transformationworks.html) ============================================================ */ .tw-hero { padding-block: clamp(92px, 14vh, 156px); min-height: 0; } .tw-hero__h1 { color: var(--ink-on-dark); } .tw-hero__cta { margin-top: clamp(28px, 3vw, 36px); } .tw-cards, .tw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 26px); margin-top: clamp(40px, 5vw, 56px); } .tw-card { background: var(--surface-card); border: 1px solid var(--hairline); border-top: 3px solid var(--gold); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 30px); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .tw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .tw-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 21px); letter-spacing: -.01em; line-height: 1.15; color: var(--tile-1); margin: 0 0 10px; } .tw-card p { font-family: var(--font-text); font-size: 14.5px; line-height: 1.6; color: var(--body-muted); margin: 0; } .tw-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.32; letter-spacing: -.01em; color: var(--ink); border-left: 3px solid var(--gold); padding-left: 22px; margin: 28px 0 0; } @media (max-width: 900px) { .tw-cards, .tw-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .tw-cards, .tw-grid { grid-template-columns: 1fr; } .tw-hero__h1 { font-size: clamp(30px, 8.2vw, 44px); letter-spacing: -.02em; } } /* ============================================================ STATEMENT BAND (homepage brand moment — full-bleed sunset) ============================================================ */ .statement-band { min-height: clamp(440px, 60vh, 620px); align-items: center; } .statement-band.div-band--img::before { filter: saturate(1.05) contrast(1.02) brightness(.92); } .statement-scrim { background: radial-gradient(ellipse 82% 74% at 50% 46%, rgba(20,18,16,.62), rgba(20,18,16,.36) 60%, rgba(20,18,16,.50) 100%), linear-gradient(0deg, rgba(20,18,16,.46), transparent 42%), linear-gradient(180deg, rgba(20,18,16,.28), transparent 38%); } .statement__inner { position: relative; z-index: 2; text-align: center; max-width: 52ch; margin-inline: auto; padding-block: clamp(40px, 6vw, 76px); } .statement__slogan { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 6vw, 68px); letter-spacing: -.02em; line-height: 1.04; color: var(--ink-on-dark); text-shadow: 0 2px 26px rgba(0,0,0,.5); margin: 0; } .statement__sub { font-family: var(--font-text); font-weight: 300; font-size: clamp(15px, 1.8vw, 19px); color: var(--body-on-dark); max-width: 46ch; margin: 18px auto 0; text-shadow: 0 1px 14px rgba(0,0,0,.45); } /* ============================================================ LEGAL / ESSENTIAL PAGES (compliance, terms, accessibility, 404) ============================================================ */ .legal { max-width: 72ch; } .legal__updated { font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 28px; } .legal__lead { font-family: var(--font-text); font-size: 19px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; } .legal h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.01em; color: var(--tile-1); margin: 40px 0 12px; } .legal p { font-family: var(--font-text); font-size: 16px; line-height: 1.7; color: var(--body-muted); margin: 0 0 14px; } .legal ul { margin: 0 0 14px; padding-left: 22px; } .legal li { font-family: var(--font-text); font-size: 16px; line-height: 1.7; color: var(--body-muted); margin: 0 0 6px; } .legal a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; } .legal a:hover { color: var(--gold-deep); } .legal__links-404 { list-style: none; padding: 0; margin-top: 20px; } .legal__links-404 li { padding: 12px 0; border-top: 1px solid var(--hairline); } .legal__links-404 a { font-weight: 600; } .footer__legal-links { margin: 14px 0 0; font-size: 13px; } .footer__legal-links a { color: var(--gold-lt); } /* ============================================================ AAA HARDENING — a11y + mobile (audit fixes) ============================================================ */ /* kill the default teal mobile tap-highlight (brand "no-teal" law) */ html { -webkit-tap-highlight-color: rgba(184,146,76,.18); } /* form fields: a real, visible focus outline (was only a translucent box-shadow < 3:1) */ .field input:focus, .field textarea:focus, .field select:focus, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; } /* success badge: AA-contrast green as text (#3c8f57 was 3.99:1 on white) */ .badge { color: #2b6e41; } /* statement sub-line: hold up over bright sunset clouds */ .statement__sub { font-weight: 400; color: #f1ebdd; text-shadow: 0 1px 3px rgba(0,0,0,.72), 0 2px 16px rgba(0,0,0,.5); } /* ============================================================ PRINT ============================================================ */ @media print { .nav, .nav__menu, .hero__glow, .hero__watermark, .div-band__scrim, .statement-sec, .footer__top, .btn, .teaser__cta, .reveal { box-shadow: none !important; } .nav, .footer__top, .hero__glow, .hero__watermark { display: none !important; } * { background: #fff !important; color: #000 !important; text-shadow: none !important; } a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; } .section, .div-body, .hero { padding-block: 16px !important; min-height: 0 !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ PREMIUM HERO — commanding scale + atmosphere + signature motion ============================================================ */ :root { --fs-hero: clamp(48px, 11.5vw, 150px); } .hero { min-height: clamp(600px, 88vh, 880px); display: flex; align-items: center; padding-block: clamp(88px, 12vh, 150px); background: linear-gradient(108deg, #21342b 0%, #2C2A26 48%, #201e1b 100%); } .hero__glow { background: radial-gradient(78% 72% at 80% 22%, rgba(184,146,76,.24), transparent 60%), radial-gradient(54% 64% at 8% 96%, rgba(47,79,53,.40), transparent 72%); } .hero .display--hero { letter-spacing: -.045em; line-height: .9; } .hero h1 b { color: var(--gold); } .hero__slogan { margin-top: clamp(18px, 3vh, 30px); font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.5vw, 31px); letter-spacing: -.01em; text-transform: none; color: var(--gold-lt); } .hero__sub { margin-top: 18px; font-size: clamp(16px, 1.5vw, 20px); max-width: 46ch; } .hero__cta { margin-top: clamp(32px, 5vh, 48px); } .hero__watermark { right: -11%; width: min(64vw, 780px); height: min(64vw, 780px); opacity: .55; color: rgba(245,241,232,.045); } /* Hero entrance is paint-driven, never IO-gated: the brand must lead the screen. Base state = fully visible (covers no-JS, reduced-motion, and slow devices); the animation runs from style-apply, and the watermark settles AFTER the wordmark. */ .hero .reveal { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: no-preference) { .hero__inner > .reveal { animation: heroIn .55s var(--ease-entrance) both; } .hero__inner > .reveal:nth-child(1) { animation-delay: .04s; } .hero__inner > .reveal:nth-child(2) { animation-delay: .12s; } .hero__inner > .reveal:nth-child(3) { animation-delay: .20s; } .hero__inner > .reveal:nth-child(4) { animation-delay: .28s; } @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .hero__watermark { animation: heroMark 1.1s var(--ease-entrance) .25s both; } @keyframes heroMark { from { opacity: 0; transform: translateY(-50%) scale(1.1) rotate(-4deg); } to { opacity: .55; transform: translateY(-50%) scale(1) rotate(0); } } } /* ============================================================ PREMIUM POLISH — confident editorial scale (move 2) ============================================================ */ :root { --fs-display-lg: clamp(38px, 6.4vw, 84px); } .display--lg { line-height: 1.02; } /* Values 01-06 → a large editorial index hung in the margin */ .value { grid-template-columns: clamp(74px, 9vw, 128px) 1fr; gap: clamp(20px, 3vw, 44px); padding: clamp(28px, 3.4vw, 40px) 0; align-items: baseline; } .value__num { font-size: clamp(46px, 6vw, 78px); font-weight: 700; letter-spacing: -.03em; color: var(--gold); } .value h3 { font-size: clamp(17px, 1.7vw, 20px); } /* ============================================================ PREMIUM POLISH — editorial pull-quote (move 3, Philosophy belief) ============================================================ */ .belief { font-weight: 300; font-size: clamp(28px, 4.2vw, 50px); line-height: 1.14; max-width: 22ch; letter-spacing: -.022em; } /* ============================================================ AAA UPLIFT (2026-07-02) — UX review remediation ============================================================ */ /* Why-us rail carries the same editorial weight as the Philosophy belief */ .goal { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; letter-spacing: -.02em; max-width: 22ch; } /* gold rationing: quiet eyebrows where the screen already has a bigger gold gesture */ .eyebrow--quiet { color: var(--body-muted); } /* active nav page marker (was an unstyled class) */ .nav__link.is-active, .nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; } /* per-page watermark variance — inner pages open differently from home */ .divisions-intro .hero__watermark { right: -16%; top: 42%; width: min(72vw, 880px); height: min(72vw, 880px); opacity: .38; } .about-hero .hero__watermark { right: -18%; top: 62%; width: min(48vw, 560px); height: min(48vw, 560px); opacity: .4; } /* cinematic band settle — image eases from a slight zoom as the band enters view */ .div-band--img { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .div-band--img::before { transform: scale(1.05); transition: transform 1.3s var(--ease-entrance); } .div-band--img.is-settled::before { transform: scale(1); } } /* multi-field error summary (announced via role=alert) */ .form-summary { margin: 14px 0 0; font-family: var(--font-text); font-size: 13.5px; font-weight: 600; color: #8c3b2e; } /* ============================================================ DRAWPOINT DEDICATED PAGE (coal-amber world in the SAT frame) Brand laws: amber #EDB22E on dark ONLY (10.2:1); on light tiles amber is borders-only with #845A0E text. The Cut never distorted. ============================================================ */ .dp-page { --accent: #EDB22E; --accent-lt: #f6be00; --accent-text: #845A0E; } .dp-page .tw-card { border-top-color: var(--accent); } .dp-page .rule-gold { background: var(--accent); } .dp-page .tw-proof { background: rgba(237,178,46,.10); border-left-color: var(--accent); } /* DP Hard Law #1: no green anywhere — the SAT forest (--tile-1) headings and the SAT gold accents must not render inside the DrawPoint world */ .dp-page .divisions-head h2, .dp-page .tw-card h3, .dp-page .tw-h3, .dp-page .dp-steps b { color: var(--ink); } .dp-page .section .eyebrow { color: var(--accent-text); } .dp-page .on-dark .eyebrow { color: var(--accent-lt); } .dp-page .on-dark .text-link.div-accent { color: var(--accent-lt); } /* the wordmark's real faces — self-hosted letter subsets (CSP font-src 'self') */ @font-face { font-family: 'Bebas Neue DP'; font-style: normal; font-weight: 400; src: url('/fonts/bebas-dp.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Barlow Condensed DP'; font-style: normal; font-weight: 600; src: url('/fonts/barlowcond-dp.woff2') format('woff2'); font-display: swap; } /* hero — coal world, The Cut plate right, text left inside the wrap grid */ .dp-hero { position: relative; overflow: hidden; min-height: clamp(520px, 74vh, 760px); padding-block: clamp(96px, 13vh, 150px); background: linear-gradient(115deg, #17130c 0%, #0D0D0D 55%, #0f0e0c 100%); } .dp-hero .hero__inner { position: relative; z-index: 2; width: 100%; } .dp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(36px, 5vw, 84px); align-items: center; } .dp-hero__h1 { color: #F5F0E8; font-size: clamp(40px, 5.6vw, 76px); font-weight: 500; letter-spacing: -.03em; } .dp-hero__strap { margin: 10px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -.01em; color: var(--accent); } .dp-hero__sub { max-width: 48ch; } .dp-hero__cta { margin-top: clamp(28px, 3vw, 36px); display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); flex-wrap: wrap; } .dp-hero__figure { text-align: center; } .dp-hero__lockup { display: block; width: min(100%, 420px); height: auto; margin-inline: auto; } @media (prefers-reduced-motion: no-preference) { .dp-hero__text > .reveal { animation: heroIn .55s var(--ease-entrance) both; } .dp-hero__text > .reveal:nth-child(1) { animation-delay: .04s; } .dp-hero__text > .reveal:nth-child(2) { animation-delay: .12s; } .dp-hero__text > .reveal:nth-child(3) { animation-delay: .18s; } .dp-hero__text > .reveal:nth-child(4) { animation-delay: .24s; } .dp-hero__text > .reveal:nth-child(5) { animation-delay: .30s; } /* base states stay VISIBLE; the keyframes animate FROM hidden (heroIn pattern) — anything that blocks animation leaves the mark shown, never a blank lockup */ .dp-cut { transform-box: fill-box; transform-origin: center; animation: dpCut .7s var(--ease-entrance) .2s both; } .dp-word { animation: dpIn .6s var(--ease-entrance) .7s both; } @keyframes dpIn { from { opacity: 0; } } @keyframes dpCut { from { opacity: 0; transform: scale(.94); } } } @media (max-width: 1060px) { .dp-hero__figure { display: none; } .dp-hero__grid { grid-template-columns: 1fr; } .dp-hero { min-height: clamp(460px, 62vh, 620px); } } @media (max-width: 600px) { .dp-hero__h1 { font-size: clamp(34px, 9vw, 48px); } } /* mid-page cinematic band — single statement */ .dp-band { min-height: clamp(340px, 48vh, 520px); align-items: center; } .dp-band__scrim { background: radial-gradient(ellipse 80% 76% at 50% 50%, rgba(13,13,13,.62), rgba(13,13,13,.34) 62%, rgba(13,13,13,.5) 100%); } .dp-band__inner { position: relative; z-index: 2; text-align: center; max-width: 62ch; margin-inline: auto; } .dp-band__line { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 42px); letter-spacing: -.02em; line-height: 1.18; color: #F5F0E8; text-shadow: 0 2px 22px rgba(0,0,0,.55); margin: 0; } /* dark sections — coal, amber accents earn their 10.2:1 here */ .dp-dark { background: linear-gradient(180deg, #111009 0%, #0D0D0D 100%); } .dp-dark-h2 { color: #F5F0E8; margin: 14px 0 0; } .dp-dark-lead { color: rgba(245,240,232,.72); } /* .divisions-head h2/.lead (0-1-1) outrank the single classes above — re-assert on dark */ .dp-dark .divisions-head h2 { color: #F5F0E8; } .dp-dark .divisions-head .lead { color: rgba(245,240,232,.72); } .dp-dark .eyebrow { color: var(--accent); } .dp-card { background: rgba(245,240,232,.045); border: 1px solid rgba(245,240,232,.12); border-top: 3px solid var(--accent); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 28px); } .dp-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.9vw, 20px); letter-spacing: -.01em; color: #F5F0E8; margin: 0 0 8px; } .dp-card p { font-family: var(--font-text); font-size: 14px; line-height: 1.6; color: rgba(245,240,232,.66); margin: 0; } .dp-grid { margin-top: clamp(30px, 3.6vw, 44px); } .tw-cards--three { grid-template-columns: repeat(3, 1fr); } .dp-page .dp-dark .div-facts { background: rgba(245,240,232,.045); border-color: rgba(245,240,232,.12); border-left-color: var(--accent); } .dp-page .dp-dark .div-facts li { color: rgba(245,240,232,.72); border-top-color: rgba(245,240,232,.12); } .dp-dark-body { margin-top: 20px; } .dp-dark-body p { color: rgba(245,240,232,.72); max-width: 56ch; margin: 0 0 1.1em; } .dp-visit { margin-top: 8px; } #group.section { padding-block: clamp(72px, 9vw, 120px); } /* numbered steps */ .dp-steps { list-style: none; margin: 0; padding: 0; counter-reset: dp; } .dp-steps li { counter-increment: dp; position: relative; padding: 14px 0 14px 52px; border-top: 1px solid var(--hairline); } .dp-steps li:first-child { border-top: 0; padding-top: 0; } .dp-steps li::before { content: counter(dp, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--accent-text); } .dp-steps li:first-child::before { top: 0; } .dp-steps b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--tile-1); margin-bottom: 3px; } .dp-steps span { font-family: var(--font-text); font-size: 14px; line-height: 1.55; color: var(--body-muted); } .dp-page .dp-cta { border-top: 1px solid var(--hairline-dark); } /* stacked division links (used on divisions.html #drawpoint too — unscoped) */ .div-links { display: flex; gap: clamp(18px, 2.6vw, 30px); flex-wrap: wrap; align-items: center; } @media (max-width: 900px) { .tw-cards--three { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .tw-cards--three { grid-template-columns: 1fr; } .dp-hero__cta { gap: 14px; } } /* nav orientation: the current page inside the Divisions dropdown */ .nav__dd-link[aria-current="page"] { color: var(--gold-text); font-weight: 600; } /* ============================================================ HAUS OF YACHTING DEDICATED PAGE (navy-gold world in the SAT frame) Division laws honoured up front (the DrawPoint lessons): light-section headings use ink (never the SAT forest), eyebrows/links re-pointed to the HOY accent trio, dark sections are HOY navy — not SAT charcoal. ============================================================ */ .hoy-page { --accent: #c9a84c; --accent-lt: #e2c87a; --accent-text: #7d6230; } .hoy-page .tw-card { border-top-color: var(--accent); } .hoy-page .rule-gold { background: var(--accent); } .hoy-page .tw-proof { background: rgba(201,168,76,.12); border-left-color: var(--accent); } .hoy-page .divisions-head h2, .hoy-page .tw-card h3, .hoy-page .tw-h3, .hoy-page .dp-steps b { color: var(--ink); } .hoy-page .section .eyebrow { color: var(--accent-text); } .hoy-page .on-dark .eyebrow { color: var(--accent-lt); } .hoy-page .on-dark .text-link.div-accent { color: var(--accent-lt); } /* hero — navy world, the real lockup as shipped */ .hoy-hero { position: relative; overflow: hidden; min-height: clamp(520px, 74vh, 760px); padding-block: clamp(96px, 13vh, 150px); background: linear-gradient(115deg, #0e2d3d 0%, #071c27 55%, #050f16 100%); } .hoy-hero .hero__inner { position: relative; z-index: 2; width: 100%; } .hoy-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(36px, 5vw, 84px); align-items: center; } .hoy-hero__h1 { color: #f7f4ef; font-size: clamp(38px, 5vw, 68px); font-weight: 500; letter-spacing: -.03em; } .hoy-hero__strap { margin: 10px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -.01em; color: var(--accent-lt); } .hoy-hero__sub { max-width: 48ch; } .hoy-hero__cta { margin-top: clamp(28px, 3vw, 36px); display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); flex-wrap: wrap; } .hoy-hero__figure { text-align: center; } .hoy-hero__mark { display: block; width: min(58%, 240px); height: auto; margin-inline: auto; } .hoy-hero__word { display: block; width: min(96%, 380px); height: auto; margin: 22px auto 0; } @media (prefers-reduced-motion: no-preference) { .hoy-hero__text > .reveal { animation: heroIn .55s var(--ease-entrance) both; } .hoy-hero__text > .reveal:nth-child(1) { animation-delay: .04s; } .hoy-hero__text > .reveal:nth-child(2) { animation-delay: .12s; } .hoy-hero__text > .reveal:nth-child(3) { animation-delay: .18s; } .hoy-hero__text > .reveal:nth-child(4) { animation-delay: .24s; } .hoy-hero__text > .reveal:nth-child(5) { animation-delay: .30s; } /* base visible; animate FROM hidden (heroIn pattern) */ .hoy-hero__mark { animation: hoyIn .7s var(--ease-entrance) .2s both; } .hoy-hero__word { animation: hoyIn .6s var(--ease-entrance) .6s both; } @keyframes hoyIn { from { opacity: 0; } } } @media (max-width: 1060px) { .hoy-hero__figure { display: none; } .hoy-hero__grid { grid-template-columns: 1fr; } .hoy-hero { min-height: clamp(460px, 62vh, 620px); } } @media (max-width: 600px) { .hoy-hero__h1 { font-size: clamp(32px, 8.6vw, 44px); letter-spacing: -.02em; } } /* mid-page cinematic band — navy ground so the pre-paint/failure state stays in the HOY world (the base .div-band ground is SAT forest) */ .hoy-band { min-height: clamp(340px, 48vh, 520px); align-items: center; background: #071c27; } .hoy-band__scrim { background: radial-gradient(ellipse 80% 76% at 50% 50%, rgba(5,15,22,.6), rgba(5,15,22,.32) 62%, rgba(5,15,22,.5) 100%); } .hoy-band__inner { position: relative; z-index: 2; text-align: center; max-width: 62ch; margin-inline: auto; } .hoy-band__line { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 42px); letter-spacing: -.02em; line-height: 1.18; color: #f7f4ef; text-shadow: 0 2px 22px rgba(0,0,0,.55); margin: 0; } /* dark sections — HOY navy (reuses the generic .dp-card dark-card component) */ .hoy-dark { background: linear-gradient(180deg, #0b2430 0%, #071c27 100%); } .hoy-dark .divisions-head h2, .hoy-dark-h2 { color: #f7f4ef; } .hoy-page .hoy-dark .divisions-head h2 { color: #f7f4ef; } .hoy-page .hoy-dark .divisions-head .lead { color: rgba(247,244,239,.72); } .hoy-grid { margin-top: clamp(30px, 3.6vw, 44px); } .hoy-page .dp-card { background: rgba(247,244,239,.05); border-color: rgba(247,244,239,.13); border-top-color: var(--accent); } .hoy-page .dp-card h3 { color: #f7f4ef; } .hoy-page .dp-card p { color: rgba(247,244,239,.68); } .hoy-page .hoy-dark .div-facts { background: rgba(247,244,239,.05); border-color: rgba(247,244,239,.13); border-left-color: var(--accent); } .hoy-page .hoy-dark .div-facts li { color: rgba(247,244,239,.72); border-top-color: rgba(247,244,239,.13); } .hoy-dark-body { margin-top: 20px; } .hoy-dark-body p { color: rgba(247,244,239,.72); max-width: 56ch; margin: 0 0 1.1em; } .hoy-visit { margin-top: 8px; } #group.section { padding-block: clamp(72px, 9vw, 120px); } /* the client-pack sign-off */ .hoy-quality { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.9vw, 21px); letter-spacing: .04em; color: var(--accent-text); } /* regions strip */ .hoy-reach { margin: clamp(36px, 4.4vw, 56px) 0 0; text-align: center; font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--body-muted); } .hoy-page .hoy-cta { border-top: 1px solid var(--hairline-dark); } /* ============================================================ TALENT PLATFORM DEDICATED PAGE (the group's own gold world) ============================================================ */ .plat-page { --accent: #B8924C; --accent-lt: #ddbc7e; --accent-text: #7d6230; } /* hero — statement type left, the real product right, both inside the content frame */ .plat-hero { position: relative; overflow: hidden; min-height: clamp(520px, 74vh, 760px); padding-block: clamp(96px, 13vh, 150px); background: linear-gradient(115deg, #2b2519 0%, #1b1915 52%, #151310 100%); } /* .hero is a flex row — without width:100% the inner shrink-wraps to its widest child and centers; the grid must span the wrap */ .plat-hero .hero__inner { position: relative; z-index: 2; width: 100%; } .plat-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr); gap: clamp(36px, 5vw, 84px); align-items: center; } .plat-hero__h1 { color: var(--ink-on-dark); font-size: clamp(38px, 5.2vw, 72px); font-weight: 500; letter-spacing: -.03em; max-width: 12ch; } .plat-hero__sub { max-width: 46ch; } .plat-hero__cta { margin-top: clamp(28px, 3vw, 36px); } .plat-hero__figure { transform: rotate(.4deg); } .plat-hero__figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(237,232,223,.14); box-shadow: 0 30px 80px rgba(0,0,0,.5); } /* the base hero entrance only targets .hero__inner > .reveal — re-point it at the text column so the brand text still enters at first paint (never IO-gated) */ @media (prefers-reduced-motion: no-preference) { .plat-hero__text > .reveal { animation: heroIn .55s var(--ease-entrance) both; } .plat-hero__text > .reveal:nth-child(1) { animation-delay: .04s; } .plat-hero__text > .reveal:nth-child(2) { animation-delay: .10s; } .plat-hero__text > .reveal:nth-child(3) { animation-delay: .16s; } .plat-hero__text > .reveal:nth-child(4) { animation-delay: .22s; } .plat-hero__text > .reveal:nth-child(5) { animation-delay: .28s; } .plat-hero__text > .reveal:nth-child(6) { animation-delay: .34s; } .plat-hero__text > .reveal:nth-child(7) { animation-delay: .40s; } .plat-hero__figure { animation: heroIn .7s var(--ease-entrance) .25s both; } } @media (max-width: 1360px) { .plat-hero__h1 { font-size: clamp(36px, 4.6vw, 60px); } } @media (max-width: 1060px) { /* 2026-07-15 revamp: phones now SEE the product (76KB crop) instead of a text-only hero */ .plat-hero__figure { max-width: min(440px, 92%); margin: 28px auto 0; transform: none; } .plat-hero__grid { grid-template-columns: 1fr; } .plat-hero { min-height: clamp(460px, 62vh, 620px); } } /* dark sections — body copy legible on charcoal */ .plat-dark-h2 { color: var(--ink-on-dark); } .plat-dark-body p { color: var(--body-on-dark); } /* the Workforce Wallet content, folded into the hero (2026-07-03 merge) */ .plat-hero__walletlead { margin: clamp(24px, 2.6vw, 32px) 0 2px; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.9vw, 21px); letter-spacing: -.01em; color: var(--ink-on-dark); } .plat-wallet__item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--hairline-dark); max-width: 58ch; } .plat-wallet__item:first-of-type { border-top: 0; } .plat-wallet__item img { width: 36px; height: 36px; flex: none; } .plat-wallet__item b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; color: var(--ink-on-dark); margin: 0 0 5px; } .plat-wallet__item p { font-family: var(--font-text); font-size: 14px; line-height: 1.6; color: rgba(237,232,223,.7); margin: 0; } /* the composite's baked annotation labels are dark text drawn for a white ground — the light card keeps them legible on charcoal */ .plat-hero__figure--card { background: #f7f5f0; border-radius: 14px; padding: clamp(14px, 1.6vw, 24px); border: 1px solid rgba(237,232,223,.14); } .plat-hero__figure--card img { display: block; width: 100%; height: auto; } /* licence facts rhythm */ .plat-page .div-body__grid { align-items: center; } #licence.section { padding-block: clamp(72px, 9vw, 130px); } /* four-up grids collapse gracefully */ @media (max-width: 1100px) { .plat-page .tw-cards--four { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .plat-page .tw-cards--four { grid-template-columns: 1fr 1fr; gap: 12px; } .plat-page .tw-card { padding: 14px; } .plat-page .tw-card p { font-size: 12.5px; } .plat-page .tw-card h3 { font-size: 15px; } } /* ============================================================ TRANSFORMATIONWORKS DEDICATED PAGE (sage world in the SAT frame) ============================================================ */ .tw-page { --accent: #96AD7B; --accent-lt: #aecb8f; --accent-text: #5c6b44; } .tw-page .section .eyebrow { color: var(--accent-text); } .tw-page .on-dark .eyebrow { color: var(--accent-lt); } .tw-page .rule-gold { background: var(--accent); } .tw-page .tw-card { border-top-color: var(--accent); } /* hero — the mark is the opening: unconnected dots, then the column of three connects */ .tw-hero { position: relative; overflow: hidden; min-height: clamp(520px, 74vh, 760px); padding-block: clamp(96px, 13vh, 150px); background: linear-gradient(115deg, #20301f 0%, #191919 52%, #151713 100%); } .tw-hero .hero__inner { position: relative; z-index: 2; } /* the mark is the hero's commanding gesture — the one-long-word h1 steps down a size */ .tw-hero__h1 { color: var(--ink-on-dark); font-size: clamp(34px, 4.8vw, 62px); font-weight: 500; letter-spacing: -.03em; } .tw-hero__cta { margin-top: clamp(28px, 3vw, 36px); } .tw-hero__figure { position: absolute; right: clamp(24px, 3vw, 44px); top: 50%; transform: translateY(-50%); z-index: 1; text-align: center; } .tw-hero__mark { display: block; height: min(44vh, 360px); width: auto; margin-inline: auto; } .tw-hero__caption { margin: 16px auto 0; max-width: 320px; line-height: 1.6; font-family: var(--font-text); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-lt); } .tw-sig { display: block; width: clamp(200px, 17vw, 238px); height: auto; margin-top: clamp(30px, 4vh, 44px); opacity: .85; } @media (prefers-reduced-motion: no-preference) { .tw-hero__mark circle { opacity: 0; animation: twDot .5s var(--ease-entrance) both; transform-box: fill-box; transform-origin: center; } .tw-hero__mark circle:nth-of-type(1) { animation-delay: .15s; } .tw-hero__mark circle:nth-of-type(2) { animation-delay: .25s; } .tw-hero__mark circle:nth-of-type(4) { animation-delay: .50s; } /* the two sage dots keep a quiet breath after the entrance — simplistic, but alive */ .tw-hero__mark circle:nth-of-type(3) { animation: twDot .5s var(--ease-entrance) .40s both, twBreathe 6s ease-in-out 2.6s infinite; } .tw-hero__mark circle:nth-of-type(5) { animation: twDot .5s var(--ease-entrance) .60s both, twBreathe 6s ease-in-out 3.2s infinite; } @keyframes twDot { to { opacity: 1; } } @keyframes twBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .tw-hero__join { stroke-dasharray: 36; stroke-dashoffset: 36; animation: twJoin .6s var(--ease-entrance) .85s both; } .tw-plate__grid, .tw-plate__ticks { opacity: 0; animation: twDot .8s var(--ease-entrance) .05s both; } @keyframes twJoin { to { stroke-dashoffset: 0; } } .tw-hero__caption { opacity: 0; animation: twDot .6s var(--ease-entrance) 1.25s both; } } @media (max-width: 1320px) { .tw-hero__h1 { font-size: clamp(34px, 4.4vw, 56px); } } @media (max-width: 1280px) { .tw-hero__mark { height: min(36vh, 280px); } .tw-hero__caption { display: none; } } @media (max-width: 960px) { .tw-hero__figure { display: none; } .tw-hero { min-height: clamp(460px, 62vh, 620px); } } /* product worlds inside the TW frame — accents scoped per spotlight */ .tw-emblem { display: block; width: 52px; height: 52px; margin: 0 auto 16px; } #schoolai .tw-proof { background: rgba(30,58,95,.08); } #financeworks .tw-list li::before { background: var(--accent); } /* audit P1 fixes: layout variety + sibling hierarchy */ .tw-head--left { text-align: left; margin-inline: 0; max-width: 72ch; } .tw-head--left .lead { margin-left: 0; max-width: 62ch; } #financeworks .divisions-head h2 { font-size: clamp(32px, 3.8vw, 54px); } .tw-stack { display: grid; gap: clamp(14px, 1.8vw, 20px); align-content: start; } .tw-lede-note { margin-top: 20px; max-width: 38ch; color: var(--body-muted); } #opportunity .tw-school__grid { margin-top: clamp(44px, 5.5vw, 64px); } #financeworks.section { padding-block: clamp(56px, 7vw, 100px); } #financeworks .tw-card { padding: clamp(16px, 1.8vw, 22px); } #financeworks .tw-card p { font-size: 13.5px; } #financeworks .tw-grid { margin-top: clamp(30px, 3.4vw, 40px); } /* P2: about-section weight + mobile card stacking */ #about-tw.section { padding-block: clamp(56px, 7vw, 100px); } #about-tw .tw-cards { margin-top: clamp(30px, 3.4vw, 40px); } #about-tw .tw-card { padding: clamp(16px, 1.8vw, 24px); } @media (max-width: 600px) { #financeworks .tw-grid, #schoolai .tw-cards { grid-template-columns: 1fr 1fr; gap: 12px; } #financeworks .tw-card, #schoolai .tw-card { padding: 14px; } #financeworks .tw-card p, #schoolai .tw-card p { font-size: 12.5px; } #financeworks .tw-card h3, #schoolai .tw-card h3 { font-size: 15px; } } /* divisions-page TW band — the mark as the band's figure */ .tw-band__mark { position: absolute; right: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(-50%); height: 58%; width: auto; } @media (max-width: 1150px) { .tw-band__mark { display: none; } } /* four-up promise grid */ .tw-cards--four { grid-template-columns: repeat(4, 1fr); } /* the principals — dark panels, the only dark objects in the light section (technology first, operators second; medallions carry initials until cleared headshots are supplied) */ .tw-team { display: grid; grid-template-columns: 1.06fr 1fr 1fr; gap: clamp(18px, 2.2vw, 28px); margin-top: clamp(36px, 4.4vw, 52px); } .tw-panel { background: linear-gradient(135deg, #20301f 0%, #191919 60%, #151713 100%); border: 1px solid rgba(237,232,223,.1); border-top: 3px solid var(--accent); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); } .tw-panel__label { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lt); margin: 0 0 20px; } .tw-principal { display: flex; gap: clamp(14px, 1.6vw, 20px); align-items: center; margin: 0 0 24px; } /* the text column must be allowed to shrink below its content width, or the unbroken URLs force the panel past the viewport on mobile */ .tw-principal > div { min-width: 0; } .tw-principal .tw-name__links { flex-wrap: wrap; } .tw-principal .tw-name__links a { overflow-wrap: anywhere; } .tw-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(150,173,123,.16); border: 2px solid var(--accent); color: #EDE8DF; font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: .02em; } .tw-avatar--sm { width: 46px; height: 46px; font-size: 15px; border-width: 2px; } .tw-principal__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.12; color: #EDE8DF; } .tw-principal__role { display: block; margin-top: 5px; font-family: var(--font-text); font-size: 13px; letter-spacing: .02em; color: rgba(237,232,223,.66); } .tw-panel .tw-name__links { margin-top: 9px; } .tw-panel .tw-name__links a { color: var(--accent-lt); border-bottom-color: rgba(150,173,123,.45); } .tw-panel .tw-name__links a:hover { color: #EDE8DF; border-bottom-color: var(--accent-lt); } .tw-panel__lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 22px); letter-spacing: -.01em; line-height: 1.25; color: var(--accent-lt); margin: 0 0 14px; } .tw-panel > p:not(.tw-panel__lead) { font-family: var(--font-text); font-size: 15px; line-height: 1.62; color: rgba(237,232,223,.72); margin: 0 0 1em; } .tw-panel > p:last-child { margin-bottom: 0; } /* the SA plate joins the principal treatment */ .tw-name--person { flex-direction: row; align-items: center; gap: 14px; } .tw-name--person b { font-size: 18px; } /* opportunity — two model cards + machinery */ .tw-cards--two { grid-template-columns: 1fr 1fr; } .tw-opp-cta { margin: 22px 0 0; } /* active-product pill */ .tw-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: 2px; font-family: var(--font-text); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); } .tw-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } /* schoolai spotlight */ .tw-school__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 56px); align-items: start; } .tw-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2vw, 23px); letter-spacing: -.01em; color: var(--tile-1); margin: 0 0 16px; } .tw-list { list-style: none; margin: 0; padding: 0; } .tw-list li { font-family: var(--font-text); font-size: 15px; line-height: 1.55; color: var(--body-muted); padding: 11px 0 11px 22px; border-top: 1px solid var(--hairline); position: relative; } .tw-list li:first-child { border-top: 0; padding-top: 0; } .tw-list li:first-child::before { top: 8px; } .tw-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 2px; background: var(--accent); } .tw-adopt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 20px); } .tw-adopt__item { background: var(--surface-card); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: clamp(18px, 2vw, 24px); } .tw-adopt__item b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--tile-1); margin-bottom: 8px; } .tw-adopt__item p { font-family: var(--font-text); font-size: 13.5px; line-height: 1.6; color: var(--body-muted); margin: 0; } .tw-proof { margin: 18px 0 0; padding: 14px 18px; background: rgba(150,173,123,.10); border-left: 3px solid var(--accent); border-radius: var(--r-xs); font-family: var(--font-text); font-size: 14.5px; line-height: 1.6; color: var(--ink); } /* dark SA-position section */ .tw-page .tw-dark-h2 { color: var(--ink-on-dark); margin: 14px 0 0; } .tw-page .tw-dark-body { margin-top: 20px; } .tw-page .tw-dark-body p { color: var(--body-on-dark); max-width: 56ch; margin: 0 0 1.1em; } .tw-page #south-africa .div-facts { background: rgba(245,241,232,.04); border-color: var(--hairline-dark); border-left-color: var(--accent); } .tw-page #south-africa .div-facts li { color: var(--body-on-dark); border-top-color: var(--hairline-dark); } .tw-page #south-africa { padding-block: clamp(72px, 9vw, 120px); } .tw-page .tw-cta { border-top: 1px solid var(--hairline-dark); } @media (max-width: 1100px) { .tw-cards--four { grid-template-columns: 1fr 1fr; } .tw-team { grid-template-columns: 1fr; } } @media (max-width: 980px) { .tw-school__grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 600px) { .tw-cards--four, .tw-adopt, .tw-cards--two { grid-template-columns: 1fr; } .tw-hero__h1 { font-size: clamp(30px, 8.2vw, 44px); letter-spacing: -.02em; } } /* named principals — compact credential plates */ .tw-name { display: flex; flex-direction: column; gap: 3px; margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--accent); background: rgba(150,173,123,.08); border-radius: 0 10px 10px 0; } .tw-name b { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--tile-1); } .tw-name span { font-family: var(--font-text); font-size: 12.5px; letter-spacing: .02em; color: var(--body-muted); } .tw-name--dark { background: rgba(150,173,123,.14); margin-top: 6px; max-width: 420px; } .tw-name--dark b { color: var(--ink-on-dark); } .tw-name--dark span { color: var(--body-on-dark); } .tw-name__links { display: flex; align-items: center; gap: 14px; margin-top: 7px; } .tw-name__links a { font-family: var(--font-text); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid rgba(150,173,123,.55); transition: color .18s, border-color .18s; } .tw-name__links a:hover { color: var(--tile-1); border-bottom-color: var(--accent); } .tw-name__links a.tw-name__li { border-bottom: none; line-height: 0; } .tw-name__li svg { display: block; width: 16px; height: 16px; fill: currentColor; } /* suite rail — fallback layout first: the viewport behaves as the old wrap, the track keeps .tw-grid, so no-JS / mobile / reduced-motion = the plain grid */ .tw-rail__viewport { max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); } /* scrubbed mode — the class is added by app.js only on desktop + motion-safe */ .tw-rail-sec.rail-on { height: 260vh; padding-block: 0; } .rail-on .tw-rail__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: clamp(40px, 6vh, 72px); } .rail-on .tw-rail__sticky .divisions-head { margin-bottom: clamp(28px, 5vh, 52px); } .rail-on .tw-rail__viewport { max-width: none; margin: 0; padding-right: 0; padding-left: calc(max((100vw - var(--maxw)) / 2, 0px) + var(--gutter)); } .rail-on .tw-rail__track { display: flex; gap: clamp(18px, 2vw, 26px); will-change: transform; padding-right: calc(max((100vw - var(--maxw)) / 2, 0px) + var(--gutter)); } .rail-on .tw-rail__track .tw-card { flex: 0 0 clamp(300px, 27vw, 390px); } /* ============================================================ PARTNERS PAGE (group gold world; attributed trusted-by marquees) ============================================================ */ /* group-gold accent trio — shared components (.div-accent, .dp-steps etc.) resolve var(--accent-text); undefined vars fall back to inherited ink */ .pt-page { --accent: var(--gold); --accent-lt: var(--gold-lt); --accent-text: var(--gold-text); } .pt-hero { position: relative; overflow: hidden; min-height: clamp(420px, 56vh, 600px); padding-block: clamp(88px, 11vh, 130px); background: linear-gradient(115deg, #2C2A26 0%, #201e1a 100%); } .pt-hero__inner { position: relative; z-index: 2; width: 100%; } .pt-hero__h1 { color: var(--ink-on-dark); font-size: clamp(38px, 5.2vw, 72px); font-weight: 500; letter-spacing: -.03em; } .pt-hero__sub { max-width: 54ch; } .pt-hero__cta { margin-top: clamp(26px, 3vw, 34px); } /* partner panels — dark objects in the light section (the principals law) */ /* minmax(0,1fr): grid items default min-width:auto, so the marquee's max-content track would otherwise force the column to ~5500px wide */ .pt-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.2vw, 28px); } .pt-stack > * { min-width: 0; } .pt-panel { background: linear-gradient(135deg, #2e2b25 0%, #26241f 60%, #201e1a 100%); border: 1px solid rgba(237,232,223,.1); border-top: 3px solid var(--gold); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); } .pt-panel__head { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; } .pt-panel__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(23px, 2.5vw, 30px); letter-spacing: -.02em; color: var(--ink-on-dark); margin: 0; } .pt-panel__role { margin: 6px 0 0; font-family: var(--font-text); font-size: 13px; letter-spacing: .02em; color: rgba(237,232,223,.62); } .pt-panel__links { display: flex; gap: 22px; flex-wrap: wrap; } .pt-page .pt-panel .text-link.div-accent { color: var(--gold-lt); } .pt-panel__body p { font-family: var(--font-text); font-size: 15px; line-height: 1.62; color: rgba(237,232,223,.72); margin: 0 0 1em; max-width: 76ch; } .pt-panel__body p:last-child { margin-bottom: 0; } .pt-facts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; } .pt-facts li { font-family: var(--font-text); font-size: 13px; color: rgba(237,232,223,.62); padding-left: 16px; position: relative; } .pt-facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 2px; background: var(--gold); } /* attributed trusted-by marquee (CSS-only; the strips are the PARTNERS' clients) */ .pt-strip { margin-top: -6px; } .pt-strip__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; } .pt-strip__label { margin: 0; font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } /* WCAG 2.2.2: a real pause control (hover-pause alone excludes keyboard/touch) */ .pt-marquee__pause { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 14px; cursor: pointer; } .pt-marquee__pause:hover { border-color: var(--gold); } .pt-strip.is-paused .pt-marquee__track { animation-play-state: paused; } .pt-marquee { overflow: hidden; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* padding must equal gap/2 or the -50% loop lands offset and snaps each cycle */ .pt-marquee__track { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); width: max-content; padding-inline: calc(clamp(40px, 5vw, 72px) / 2); } .pt-marquee__dup { display: contents; } .pt-logo { height: 34px; width: auto; filter: grayscale(1) opacity(.72); transition: filter .25s, opacity .25s; } .pt-logo:hover { filter: none; opacity: 1; } .pt-logo--inv { filter: invert(.82) grayscale(1) opacity(.72); } .pt-logo--inv:hover { filter: invert(.82); opacity: 1; } @media (prefers-reduced-motion: no-preference) { .pt-marquee__track { animation: ptScroll var(--pt-dur, 40s) linear infinite; } .pt-marquee:hover .pt-marquee__track { animation-play-state: paused; } @keyframes ptScroll { to { transform: translateX(-50%); } } } @media (prefers-reduced-motion: reduce) { .pt-marquee__dup { display: none; } .pt-marquee__track { flex-wrap: wrap; width: auto; gap: 26px 40px; padding: 18px 24px; } /* nothing scrolls: no edge fade (it would clip row-end logos), no pause control */ .pt-marquee { mask-image: none; -webkit-mask-image: none; } .pt-marquee__pause { display: none; } } /* the HOY Community Network — the yachting house's world inside the group page */ .pt-hoy { background: linear-gradient(115deg, #0e2d3d 0%, #0b2430 55%, #071c27 100%); } .pt-hoy__h2 { color: #f7f4ef; } .pt-hoy .divisions-head .lead, .pt-hoy__lead { color: rgba(247,244,239,.72); } .pt-hoy .divisions-head h2 { color: #f7f4ef; } .pt-hoy .eyebrow { color: var(--accent-lt); } .pt-hoy .pt-strip__label { color: var(--accent-lt); } .pt-hoy .pt-marquee__pause { color: var(--accent-lt); border-color: rgba(247,244,239,.25); } .pt-hoy .pt-marquee__pause:hover { border-color: var(--accent); } .pt-hoy .pt-strip { margin-top: clamp(28px, 3.4vw, 40px); } .pt-hoy__foot { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; margin-top: clamp(24px, 3vw, 34px); } .pt-hoy__sponsor { display: flex; align-items: center; gap: 16px; margin: 0; font-family: var(--font-text); font-size: 13.5px; line-height: 1.5; color: rgba(247,244,239,.72); max-width: 46ch; } .pt-hoy__sponsor img { height: 40px; width: auto; flex: none; background: #f7f4ef; border-radius: 8px; padding: 5px 10px; } .pt-hoy .text-link.div-accent { color: var(--accent-lt); } .pt-bridge-cta { margin-top: 20px; } .pt-page .pt-cta { border-top: 1px solid var(--hairline-dark); } @media (max-width: 600px) { .pt-panel__head { flex-direction: column; gap: 10px; } .pt-logo { height: 28px; } } /* ============================================================ SHARED VISUAL PRIMITIVES (2026-07-15 scan-readability revamp) Drawn diagrams + scannable objects; each world tints via its own --accent / --accent-lt / --accent-text custom properties. ============================================================ */ /* bold stand-first inside cards/panels — the line a scanner reads */ .kicker { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; } .on-dark .kicker { color: var(--ink-on-dark); } /* chip row — deal terms and tags as scannable pills */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .chip { font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--body-muted); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 13px; white-space: nowrap; } .on-dark .chip { color: var(--body-on-dark); border-color: var(--hairline-dark); } .chip--accent { color: var(--accent-text, var(--gold-text)); border-color: currentColor; } .on-dark .chip--accent { color: var(--accent-lt, var(--gold-lt)); } /* the fork diagram (demand lanes) — inline SVG wrapper */ .fork { display: block; width: min(440px, 86%); margin: 6px auto 2px; } .fork-node { display: flex; justify-content: center; margin: clamp(20px, 2.6vw, 30px) 0 0; } .fork-node span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink); border: 1px solid var(--gold); border-radius: 999px; padding: 9px 22px; } .fork-node i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; } .on-dark .fork-node span { color: var(--ink-on-dark); } /* horizontal numbered journey (lifecycle) */ .jflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: clamp(8px, 1.2vw, 18px); margin-top: clamp(36px, 4.4vw, 54px); } .jstep { text-align: center; } .jstep i { display: block; font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); color: var(--gold-text); } .jstep b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.8vw, 21px); color: var(--tile-1); margin: 6px 0 5px; } .jstep p { font-family: var(--font-text); font-size: 13.5px; line-height: 1.5; color: var(--body-muted); margin: 0 auto; max-width: 24ch; } .jarrow { align-self: center; width: clamp(18px, 2.4vw, 30px); color: var(--taupe); margin-top: 6px; } .jarrow svg { display: block; width: 100%; height: auto; } @media (max-width: 860px) { .jflow { grid-template-columns: 1fr; gap: 4px; } .jarrow { transform: rotate(90deg); margin: 6px auto; width: 18px; } } /* stat tiles — big quiet numerals */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: clamp(28px, 3.4vw, 44px); } .stat { text-align: center; } .stat b { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -.02em; line-height: 1; color: var(--gold-text); } .on-dark .stat b { color: var(--gold-lt); } .stat span { display: block; margin-top: 8px; font-family: var(--font-text); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--body-muted); } .on-dark .stat span { color: var(--body-on-dark); } /* proof tiles — the 6-marketplace grid (and DP sectors) */ .mkt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 16px); margin: clamp(28px, 3.4vw, 44px) 0 0; } .mkt { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md, 10px); padding: 14px 16px; } .mkt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--tile-1); } .mkt span { display: block; margin-top: 3px; font-family: var(--font-text); font-size: 12.5px; color: var(--body-muted); } .mkt--ours { border-color: var(--gold); } .mkt--ours span { color: var(--gold-text); } @media (max-width: 700px) { .mkt-grid { grid-template-columns: 1fr 1fr; } } /* vertical connector on numbered step lists (approach timelines, licence chain) */ .dp-steps--line li::after { content: ""; position: absolute; left: 14px; top: 44px; bottom: -8px; width: 1px; background: var(--hairline); } .dp-steps--line li:last-child::after { display: none; } .on-dark .dp-steps--line li::after { background: var(--hairline-dark); } /* tick list — verification lists get drawn checks in the world accent */ .tick-list li::before { width: 10px !important; height: 5px !important; background: none !important; border-left: 2px solid var(--accent, var(--gold)); border-bottom: 2px solid var(--accent, var(--gold)); transform: rotate(-45deg); top: 15px !important; } /* house sigils on teaser cards — the mark says it before the words do */ .teaser { position: relative; } .teaser__sigil { position: absolute; top: clamp(20px, 2.4vw, 30px); right: clamp(20px, 2.4vw, 30px); width: 34px; height: 34px; opacity: .5; } .teaser__sigil svg, .teaser__sigil img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); } /* milestone strip (About story) */ .milestones { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 34px); align-items: flex-start; margin-top: clamp(30px, 3.6vw, 46px); padding-top: 20px; border-top: 1px solid var(--hairline); } .milestone { flex: 1 1 150px; } .milestone b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--tile-1); } .milestone span { display: block; margin-top: 3px; font-family: var(--font-text); font-size: 12.5px; line-height: 1.5; color: var(--body-muted); } /* philosophy numbered index */ .vm-index { counter-reset: vmi; } .vm-index .vm-block { counter-increment: vmi; position: relative; padding-left: 58px; } .vm-index .vm-block::before { content: counter(vmi, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--gold-text); } /* bold one-line deck under metaphor headlines */ .deck { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.8vw, 21px); letter-spacing: -.01em; line-height: 1.4; color: var(--ink); margin: 14px 0 0; max-width: 52ch; } .on-dark .deck { color: var(--ink-on-dark); } /* small line-glyphs on product panels */ .glyph { display: block; width: 30px; height: 30px; color: var(--tile-1); margin-bottom: 12px; } .glyph svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; } .on-dark .glyph { color: var(--ink-on-dark); } /* platform licence chain + side stats (dark section overrides) */ .plat-chain { margin-top: clamp(24px, 3vw, 36px); max-width: 54ch; } .plat-chain li { border-top-color: var(--hairline-dark); } .plat-chain li::before { color: var(--gold-lt); } .plat-chain b { color: var(--ink-on-dark); } .plat-chain span { color: var(--body-on-dark); } .stat-row--grid2 { grid-template-columns: 1fr 1fr; } @media (max-width: 1100px) { .stat-row--grid2 { margin-top: 8px; } } /* TW appointment diagram (south-africa) */ .tw-appoint { margin-top: clamp(26px, 3.2vw, 40px); max-width: 480px; } .tw-appoint__top { display: flex; justify-content: space-between; padding: 0 16px; margin: 0 0 6px; } .tw-appoint__top span { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--body-on-dark); } .tw-appoint svg { display: block; width: 100%; height: auto; } .tw-appoint__cape { margin: 10px 0 0; text-align: center; font-family: var(--font-text); font-size: 12.5px; letter-spacing: .04em; color: var(--gold-lt); } /* ============================================================ OXBLOOD ACCENT (#6B2E2E — the brand's heritage red) + tile operator lines. Approved 2026-07-16: oxblood is the EMPHASIS rank — the one thing on a screen that outranks gold. Used surgically: highlighted chips, the "ours" proof tile, hover. ============================================================ */ .chip--accent { color: #6B2E2E; border-color: currentColor; } .on-dark .chip--accent { color: #c98a8a; } .mkt--ours { border-color: #6B2E2E; } .mkt--ours span { color: #6B2E2E; } .plat-page .teaser:hover { border-left-color: #6B2E2E; } .plat-page .teaser:hover .teaser__cta { color: #6B2E2E; } .plat-page .teaser:hover .teaser__cta .arrow { color: #6B2E2E; } /* operator line on the marketplace proof tiles */ .mkt .mkt__ops { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); color: var(--ink); font-size: 12px; } .mkt--ours .mkt__ops { color: #6B2E2E; }