/* Open Table Advisory - theme stylesheet.
Built from the approved demo layers in their ORIGINAL order:
ds tokens > bridge tokens > style > v2 > type-v2 > surface-v2 > blocks-v2.
Rules for classes the homepage does not use were dropped. Do not reorder. */
/* ===== assets/ds/tokens/colors.css ===== */
/* Open Table — Colour system.
Base brand palette from the Brand Positioning evaluation (V3):
Ivory, Charcoal, Copper, Taupe, Stone. Extended into a usable scale
with warm, harmonious tints/shades (kept in the same warm family). */
:root {
/* ---- Brand base ---- */
--ivory: #F7F3EA; /* client confidence / calm paper */
--charcoal: #1D2423; /* commercial authority / ink */
--copper: #B85F33; /* human warmth / APAC accent */
--taupe: #B8A58F; /* grounded neutrality / relationship layer */
--stone: #DAD7CF; /* partner network / secondary panels */
/* ---- Ivory / paper scale ---- */
--ivory-50: #FCFAF4; /* card / near-white warm */
--ivory-100: #F7F3EA; /* page paper (= --ivory) */
--ivory-200: #F1EBDC; /* deeper paper, sunken wells */
--ivory-300: #E9E1CE;
/* ---- Stone / neutral panels ---- */
--stone-100: #E7E4DC;
--stone-200: #DAD7CF; /* = --stone */
--stone-300: #C9C4B8; /* hairline on light, dividers */
--stone-400: #B4AE9F;
/* ---- Taupe / relationship neutral ---- */
--taupe-200: #D2C7B7;
--taupe-300: #C4B6A2;
--taupe-400: #B8A58F; /* = --taupe */
--taupe-500: #9C8970;
--taupe-600: #7C6B55;
/* ---- Charcoal / ink scale ---- */
--charcoal-900: #141917; /* deepest panel */
--charcoal-800: #1D2423; /* = --charcoal, primary ink & dark surface */
--charcoal-700: #2C3432; /* raised dark panel */
--ink-600: #3A403E; /* strong body on light */
--ink-500: #565C59; /* body */
--ink-400: #6B706C; /* secondary / muted */
--ink-300: #8A8E89; /* faint / captions */
/* ---- Copper / accent scale ---- */
--copper-050: #F6ECE4;
--copper-100: #EBD7C9;
--copper-200: #DDBBA4;
--copper-400: #C57A50;
--copper-500: #B85F33; /* = --copper */
--copper-600: #9F4E27; /* hover */
--copper-700: #85401F; /* press / on-light emphasis */
--copper-on-dark: #D07A4B; /* copper legible on charcoal */
/* ---- Semantic status (kept warm, restrained) ---- */
--positive: #4F7256; /* muted advisory green */
--positive-bg: #E4EAE1;
--caution: #B98328; /* amber, warmer than copper */
--caution-bg: #F3E7CC;
--critical: #A23524; /* deep terracotta-red, harmonised with copper */
--critical-bg: #F1DCD5;
--info: #4A5F6B; /* slate, used sparingly */
--info-bg: #DFE6E8;
/* ---- Semantic surface aliases ---- */
--surface-page: var(--ivory-100);
--surface-raised: var(--ivory-50);
--surface-card: var(--ivory-50);
--surface-sunken: var(--ivory-200);
--surface-panel: var(--stone-200);
--surface-panel-soft: var(--stone-100);
--surface-dark: var(--charcoal-800);
--surface-dark-raised: var(--charcoal-700);
--surface-dark-deep: var(--charcoal-900);
/* ---- Semantic text aliases ---- */
--text-primary: var(--charcoal-800);
--text-body: var(--ink-600);
--text-secondary: var(--ink-400);
--text-faint: var(--ink-300);
--text-inverse: var(--ivory-100);
--text-inverse-soft: rgba(247, 243, 234, 0.68);
--text-accent: var(--copper-600);
--text-accent-on-dark: var(--copper-on-dark);
/* ---- Borders & lines ---- */
--border-hairline: rgba(29, 36, 35, 0.12);
--border-line: rgba(29, 36, 35, 0.18);
--border-strong: var(--taupe-400);
--border-accent: var(--copper-500);
--border-on-dark: rgba(247, 243, 234, 0.16);
--rule-copper: var(--copper-500);
/* ---- Accent aliases ---- */
--accent: var(--copper-500);
--accent-hover: var(--copper-600);
--accent-press: var(--copper-700);
--accent-soft: var(--copper-050);
/* ---- Focus ring ---- */
--focus-ring: rgba(184, 95, 51, 0.45);
}
/* ===== assets/ds/tokens/typography.css ===== */
/* Open Table — Typography.
Signature serif (Spectral) for brand/editorial voice.
Operating sans (Hanken Grotesk) for descriptors, labels, UI, data.
Mono (IBM Plex Mono) for indices, numerals and kickers. */
:root {
--font-serif: "Spectral", Georgia, "Times New Roman", serif;
--font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
/* Roles */
--font-display: var(--font-serif); /* headlines, hero, brand signature */
--font-body: var(--font-sans); /* running UI + operating copy */
--font-prose: var(--font-serif); /* long-form editorial prose */
--font-label: var(--font-sans); /* labels, buttons, nav */
--font-index: var(--font-mono); /* section indices, numerals, kickers */
/* Weights */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
/* Type scale (fluid-friendly px). Display uses serif, UI uses sans. */
--text-hero: 4.5rem; /* 72px — website hero */
--text-display: 3.25rem; /* 52px */
--text-h1: 2.5rem; /* 40px */
--text-h2: 1.9rem; /* ~30px */
--text-h3: 1.4rem; /* ~22px */
--text-h4: 1.15rem; /* ~18px */
--text-lead: 1.3rem; /* 21px intro copy */
--text-body-lg: 1.0625rem;/* 17px */
--text-body-md: 0.9375rem;/* 15px base UI */
--text-body-sm: 0.8125rem;/* 13px */
--text-caption: 0.75rem; /* 12px */
--text-micro: 0.6875rem; /* 11px, tracked labels */
/* Line heights */
--leading-tight: 1.05; /* display headlines */
--leading-snug: 1.2; /* subheads */
--leading-normal: 1.5; /* UI */
--leading-relaxed: 1.7; /* editorial prose */
/* Letter spacing */
--tracking-tight: -0.02em; /* large serif display */
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.08em; /* sans labels */
--tracking-wider: 0.16em; /* uppercase kickers */
--tracking-widest: 0.28em; /* wordmark, tiny tracked labels */
}
/* ===== assets/ds/tokens/spacing.css ===== */
/* Open Table — Spacing & layout. 4px base rhythm. */
:root {
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 8rem; /* 128 */
/* Layout */
--container-max: 1200px; /* editorial content column max */
--container-wide: 1360px; /* full sections */
--container-prose: 680px; /* long-form reading measure */
--gutter: 1.5rem; /* mobile side padding */
--gutter-lg: 3rem; /* desktop side padding */
--section-y: 6rem; /* vertical rhythm between sections */
}
/* ===== assets/ds/tokens/effects.css ===== */
/* Open Table — Effects: radius, shadow, motion.
Premium/editorial = restrained rounding, warm low-alpha shadows. */
:root {
/* Corner radii — small and precise; pills only for tags */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-pill: 999px;
/* Borders */
--border-w: 1px;
--border-w-strong: 1.5px;
/* Shadows — warm charcoal, soft, never bluish */
--shadow-xs: 0 1px 2px rgba(29, 36, 35, 0.06);
--shadow-sm: 0 1px 3px rgba(29, 36, 35, 0.08), 0 1px 2px rgba(29, 36, 35, 0.04);
--shadow-md: 0 4px 14px rgba(29, 36, 35, 0.08), 0 2px 5px rgba(29, 36, 35, 0.05);
--shadow-lg: 0 14px 40px rgba(29, 36, 35, 0.12), 0 4px 12px rgba(29, 36, 35, 0.06);
--shadow-copper: 0 8px 24px rgba(133, 64, 31, 0.22);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
/* Motion — calm, diplomatic; no bounce */
--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
--dur-fast: 140ms; /* @kind other */
--dur-base: 240ms; /* @kind other */
--dur-slow: 420ms; /* @kind other */
}
/* ===== assets/css/tokens.css ===== */
/* ============================================================
OPEN TABLE — bridge tokens
Maps this site's variable names onto the OFFICIAL design-system
tokens (assets/ds/tokens/*.css). Warm ivory · Spectral · Hanken.
============================================================ */
:root {
/* surfaces */
--paper: var(--surface-page); /* ivory #F7F3EA */
--paper-2: var(--surface-sunken); /* deeper paper */
--cream: var(--surface-card); /* ivory-50 raised */
--ink: var(--charcoal-800); /* #1D2423 */
--ink-soft: var(--ink-500);
--line: var(--border-hairline);
/* accent + neutrals */
--copper: var(--copper-500);
--copper-ink: var(--copper-700);
--copper-tint: var(--copper-050);
--taupe: var(--taupe-400);
--stone: var(--stone-200);
--charcoal: var(--charcoal-800);
/* type families (official) */
--serif: var(--font-serif); /* Spectral */
--sans: var(--font-sans); /* Hanken Grotesk */
--mono: var(--font-index); /* IBM Plex Mono */
/* semantic */
--bg: var(--surface-page);
--text: var(--charcoal-800);
--muted: var(--ink-500);
--accent: var(--copper-500);
--border: var(--border-hairline);
/* layout */
--maxw: var(--container-max); /* 1200 — editorial content column */
--gutter: clamp(1.25rem, 5vw, 3rem);
/* my type scale (kept) */
--fs-mega: clamp(3rem, 1.4rem + 6vw, 5rem);
--fs-h1: clamp(2.2rem, 1.4rem + 3vw, 3.25rem);
--fs-h2: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
--fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
--fs-lead: var(--text-lead);
--fs-body: var(--text-body-lg);
--fs-small: var(--text-body-sm);
}
/* ===== assets/css/style.css ===== */
/* ============================================================
OPEN TABLE - "The Table" concept
Built around the seating metaphor. Layout rhythm varies
per section on purpose (anti-template).
============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:var(--sans);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
position:relative;
overflow-x:hidden; /* guard against any accidental horizontal scroll */
}
body > *{ position:relative; z-index:2; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--copper); color:#fff; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
/* ---- Type roles ---- */
h1,h2,h3{ margin:0; font-weight:400; overflow-wrap:break-word; }
/* let grid/flex children shrink instead of forcing overflow on mobile */
.letter > *{ min-width:0; }
.h2 em{ font-style:italic; font-weight:460; color:var(--copper); }
.h2{ font-family:var(--serif); font-weight:500; font-size:var(--fs-h2); line-height:1; letter-spacing:-0.025em; }
.lead{ font-family:var(--sans); font-weight:400; font-size:var(--fs-lead); line-height:1.5; letter-spacing:-0.005em; color:var(--ink-soft); }
/* small-caps label instead of mono-cosplay */
.kicker{
font-family:var(--sans); font-weight:600; font-size:0.74rem;
letter-spacing:0.24em; text-transform:uppercase; color:var(--copper);
}
/* ============================================================
HEADER
============================================================ */
.brand{ display:inline-flex; align-items:center; gap:0.65rem; }
.brand__ring{ width:36px; height:36px; flex:none; }
.brand__name{ font-family:var(--serif); font-weight:500; font-size:1.45rem; letter-spacing:0.02em; line-height:1; }
/* ============================================================
BUTTONS
============================================================ */
.btn{
display:inline-flex; align-items:center; gap:0.55rem;
font-family:var(--sans); font-weight:600; font-size:0.86rem; letter-spacing:0.01em;
padding:0.95rem 1.6rem; border:1.5px solid var(--ink); border-radius:3px;
background:transparent; color:var(--ink); cursor:pointer;
transition:background .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--copper:hover{ box-shadow:0 10px 24px -12px rgba(184,95,51,0.7); }
.btn--fill{ background:var(--ink); color:var(--paper); }
.btn--fill:hover{ background:var(--copper); border-color:var(--copper); }
.btn--copper{ background:var(--copper); border-color:var(--copper); color:#fff; }
.btn--copper:hover{ background:var(--copper-ink); border-color:var(--copper-ink); }
.btn--onink{ border-color:rgba(243,236,222,0.5); color:var(--paper); }
.btn--onink:hover{ background:var(--paper); color:var(--ink); }
.btn--lg{ padding:1.05rem 1.9rem; font-size:0.95rem; }
/* ============================================================
NAV (official - real logo, solid ivory, working mobile menu)
============================================================ */
.nav{ position:sticky; top:0; z-index:70; background:var(--surface-page); border-bottom:1px solid var(--border-hairline); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:var(--container-wide); margin:0 auto; padding:0.8rem var(--gutter); }
.nav__brand{ display:inline-flex; align-items:center; flex:none; }
.nav__brand img{ height:32px; width:auto; display:block; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav__links > a:not(.btn){ font-family:var(--font-sans); font-size:0.92rem; font-weight:500; color:var(--ink-500); transition:color .18s var(--ease-standard); }
.nav__links > a:not(.btn):hover{ color:var(--charcoal-800); }
.nav__cta-m{ display:none; }
.nav__toggle{ display:none; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
width:44px; height:44px; padding:0; margin-left:auto; background:transparent; border:1px solid var(--border-line); border-radius:var(--radius-sm); cursor:pointer; -webkit-appearance:none; appearance:none; }
.nav__toggle span{ width:20px; height:2px; background:var(--charcoal-800); border-radius:2px; transition:transform .2s var(--ease-standard), opacity .2s; }
.nav.open .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.open .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media(max-width:940px){
.nav__cta{ display:none; }
.nav__toggle{ display:flex; }
.nav__inner{ gap:1rem; }
.nav__brand img{ height:28px; }
.nav__links{
position:absolute; top:100%; left:0; right:0; display:none;
flex-direction:column; align-items:stretch; gap:0;
background:var(--surface-page); border-bottom:1px solid var(--border-hairline);
padding:0.25rem var(--gutter) 1.25rem; box-shadow:var(--shadow-lg);
}
.nav.open .nav__links{ display:flex; }
.nav__links > a:not(.btn){ padding:0.95rem 0; border-bottom:1px solid var(--border-hairline); font-size:1rem; }
.nav__cta-m{ display:inline-flex; justify-content:center; margin-top:1.1rem; }
}
/* ============================================================
HERO (official dark - founder portrait + copper glow)
============================================================ */
.herod__glow{ position:absolute; inset:0; pointer-events:none;
background:radial-gradient(120% 90% at 88% 8%, rgba(184,95,51,0.16), transparent 55%); }
.stat b{ font-family:var(--font-serif); font-size:1.9rem; font-weight:500; display:block; line-height:1; }
.stat span{ font-family:var(--font-sans); font-size:var(--text-body-sm); color:var(--text-inverse-soft); margin-top:6px; display:block; max-width:17ch; }
.herod__cov{ position:relative; margin-top:56px; border-top:1px solid var(--border-on-dark); }
.herod__cov-in{ max-width:var(--container-wide); margin:0 auto; padding:18px var(--gutter); display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.herod__cov-k{ font-family:var(--font-index); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-accent-on-dark); }
.covchips{ display:flex; gap:10px; flex-wrap:wrap; }
.covchips span{ font-family:var(--font-sans); font-size:var(--text-caption); font-weight:500; color:var(--text-inverse-soft); border:1px solid var(--border-on-dark); border-radius:var(--radius-pill); padding:5px 12px; }
.covchips .apac{ font-weight:600; color:var(--charcoal-900); background:var(--copper-on-dark); border-color:transparent; }
/* ============================================================
HERO - the table sits under the invitation
============================================================ */
/* the table graphic band */
/* keep the hero eyebrow from clipping on narrow phones */
/* ============================================================
INVITATION RULE (running line between the name letters)
============================================================ */
/* ============================================================
SECTION SHELL (varies via modifiers)
============================================================ */
.sec{ padding-block:clamp(3.5rem,7vw,6.5rem); border-bottom:1px solid var(--border); }
.sec--panel{ background:var(--paper-2); }
.sec--ink{ background:var(--ink); color:var(--paper); border-bottom-color:var(--charcoal-900); }
.sec--ink .lead{ color:rgba(243,236,222,0.92); }
/* ============================================================
METHOD - four sides of the table
============================================================ */
/* ============================================================
POSITION - big typographic Not / Is
============================================================ */
/* ============================================================
FOUNDER - a signed letter
============================================================ */
.letter{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.letter__aside{ position:sticky; top:120px; }
@media(max-width:820px){
.letter{ grid-template-columns:1fr; }
.letter__aside{ position:static; top:auto; } /* no floating over sections on mobile */
}
.portrait{ margin:0; border:1px solid var(--ink); padding:0.55rem; background:var(--cream); }
.portrait img{
display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:54% 32%;
filter:saturate(1.02) contrast(1.02);
}
.portrait figcaption{
font-family:var(--sans); font-weight:600; font-size:0.68rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ink-soft);
padding:0.7rem 0.15rem 0.15rem; display:flex; justify-content:space-between; gap:0.5rem;
}
.letter__aside .kicker{ display:block; margin-top:1.25rem; }
.letter__aside .fact{ font-family:var(--serif); font-size:1.05rem; line-height:1.35; margin-top:0.5rem; }
.letter__body .h2{ max-width:20ch; }
.letter__p{ font-family:var(--serif); font-weight:340; font-size:clamp(1.15rem,1rem+0.7vw,1.5rem); line-height:1.5; letter-spacing:-0.01em; margin:1.5rem 0; }
.letter__p em{ font-style:italic; color:var(--copper-ink); }
.sign{ margin-top:2rem; }
.sign__name{ font-family:var(--serif); font-style:italic; font-size:2rem; }
.sign__role{ font-family:var(--sans); font-weight:600; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.35rem; }
/* ============================================================
ENGAGEMENTS - index rows
============================================================ */
/* ============================================================
PARTNERS - the seating diagram (big table)
============================================================ */
/* ============================================================
MARKETS - tiers
============================================================ */
/* ============================================================
PATHWAYS
============================================================ */
/* ============================================================
CONSULTATION - a place card / invitation
============================================================ */
/* ============================================================
FOOTER
============================================================ */
.foot{ background:var(--ink); color:rgba(243,236,222,0.7); }
.foot .wrap{ padding-block:clamp(3rem,6vw,4.5rem) 1.75rem; }
.foot a{ color:rgba(243,236,222,0.7); }
.foot a:hover{ color:var(--paper); }
.foot__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(243,236,222,0.16); }
@media(max-width:780px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
.foot .brand__name{ color:var(--paper); }
.foot h4{ font-family:var(--sans); font-weight:600; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--copper); margin-bottom:0.9rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.5rem; font-size:0.92rem; }
.foot__legal{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; padding-top:1.5rem; font-size:0.78rem; color:rgba(243,236,222,0.5); }
.foot__tag{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--paper); margin-top:1rem; }
/* ============================================================
METHOD - four sides of the table (cross layout)
============================================================ */
@media(max-width:760px){ /* E */ /* A */ /* S */ /* I */
}
/* ============================================================
STANCE v2 - editorial redlines
============================================================ */
/* ============================================================
ENGAGEMENTS v2 - the menu
============================================================ */
/* ============================================================
MARKETS v2 - tier bands with chips
============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{ font-family:var(--sans); font-weight:500; font-size:0.9rem; padding:0.45rem 0.95rem; border-radius:100px; border:1.5px solid var(--ink); }
.chips--1 .chip{ background:var(--ink); color:var(--paper); }
.chips--2 .chip{ background:transparent; color:var(--ink); border-color:var(--ink); }
.chips--3 .chip{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
/* ============================================================
PATHWAYS v2 - EASI process bar
============================================================ */
/* ============================================================
INVITE v2 - reservation card
============================================================ */
/* ============================================================
MOTION
============================================================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms); }
.reveal.is-visible{ opacity:1; transform:none; }
/* SVG line-draw for the signature table outlines */
/* header condense */
/* moving ticker */
@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1; transform:none; transition:none; }
}
/* ============================================================
DESIGN SYSTEM PAGE
============================================================ */
/* ===== assets/css/v2.css ===== */
/* ============================================================
OPEN TABLE - v2 homepage layer
Loaded AFTER style.css, only by index-v2.html.
Company-led structure: service-first hero, scalable header,
tabs instead of long stacks, inline consultation form.
============================================================ */
/* ---------- Header: scalable site nav with Services dropdown ---------- */
.nav2 .nav__links{ gap:clamp(0.9rem,1.8vw,1.75rem); }
.nav2 .nav__links > a:not(.btn){
font-family:var(--font-sans); font-size:0.92rem; font-weight:500; color:var(--ink-500);
transition:color .18s var(--ease-standard);
}
.nav2 .nav__links > a:not(.btn):hover{ color:var(--charcoal-800); }
.nav2 a:focus-visible, .nav2 button:focus-visible{ outline:2px solid var(--copper-500); outline-offset:3px; border-radius:2px; }
/* ---------- Hero: service-led ---------- */
.hx{ position:relative; background:var(--charcoal-900); color:var(--text-inverse); overflow:hidden; }
.hx__inner{ position:relative; max-width:var(--container-wide); margin:0 auto; padding:clamp(48px,7vw,84px) var(--gutter) 0;
display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:clamp(36px,5vw,72px); align-items:start; }
.hx__eyebrow{ font-family:var(--font-index); font-size:var(--text-micro); letter-spacing:0.16em; text-transform:uppercase; color:var(--text-accent-on-dark); }
.hx h1{ font-family:var(--font-serif); font-size:clamp(2.4rem,4.4vw,3.9rem); line-height:1.02; font-weight:500; letter-spacing:-0.025em; margin:22px 0 0; text-wrap:balance; }
.hx h1 em{ font-style:italic; font-weight:400; color:var(--text-accent-on-dark); }
.hx__lead{ font-size:var(--text-lead); line-height:var(--leading-relaxed); color:var(--text-inverse-soft); max-width:52ch; margin:24px 0 0; }
.hx__actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hx__stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,3vw,2.5rem); margin-top:44px; padding-top:26px; border-top:1px solid var(--border-on-dark); }
.hx__stats .stat span{ max-width:none; }
/* "What do you need?" service router */
@media(max-width:900px){ .hx__inner{ grid-template-columns:1fr; } }
@media(max-width:520px){ .hx__stats{ grid-template-columns:1fr; gap:14px; } }
/* ---------- Section heads without roman numerals ---------- */
.shead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.25rem,4vw,4rem); align-items:end; margin-bottom:clamp(1.75rem,3.5vw,2.75rem); }
.shead .kicker{ display:block; margin-bottom:0.9rem; }
.shead .h2{ text-wrap:balance; }
.shead .lead{ margin:0; max-width:52ch; }
@media(max-width:780px){ .shead{ grid-template-columns:1fr; } }
.sec--tight{ padding-block:clamp(3rem,6vw,5rem); }
/* ---------- Tabs (shared) ---------- */
.tabs__list{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); border-bottom:1px solid var(--border-line); }
.tab{
appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
padding:14px 12px 16px; text-align:left; cursor:pointer; color:var(--ink-400);
font-family:var(--font-sans); transition:color .15s, border-color .15s;
}
.tab:hover{ color:var(--charcoal-800); }
.tab[aria-selected="true"]{ color:var(--charcoal-800); border-bottom-color:var(--copper-500); }
.tab:focus-visible{ outline:2px solid var(--copper-500); outline-offset:-2px; }
.tab__n{ font-family:var(--font-serif); font-size:1.25rem; }
.tab__s{ display:block; font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; margin-top:6px; }
.tabs__panel{ padding-top:clamp(1.5rem,3vw,2.25rem); }
.tabs__panel[hidden]{ display:none !important; }
@media(max-width:640px){
.tabs__list{ grid-auto-flow:row; grid-template-columns:1fr 1fr; } .tab__n{ font-size:1.05rem; } .tab__s{ display:none; }
}
/* ---------- How we work: stage + services ---------- */
/* ---------- Positioning: compact 2x2 ---------- */
.pos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(1.5rem,4vw,4rem); }
.pos__row{ padding:1.1rem 0; border-top:1px solid var(--border-on-dark); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:14px; }
.pos__not{ grid-column:1/2; font-size:0.92rem; color:rgba(247,243,234,0.62); text-decoration:line-through; text-decoration-color:var(--copper-on-dark); text-decoration-thickness:1.5px; }
.pos__arrow{ grid-column:2/3; grid-row:1/3; color:var(--copper-on-dark); font-size:1.3rem; align-self:center; }
.pos__is{ grid-column:1/2; display:block; font-size:clamp(1.15rem,1rem+0.6vw,1.45rem); font-weight:600; letter-spacing:-0.015em; margin-top:4px; }
@media(max-width:680px){
.pos{ grid-template-columns:1fr; }
.pos__row{ grid-template-columns:1fr auto; }
}
/* ---------- Network + coverage ---------- */
.net{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.net .h2{ text-wrap:balance; }
.net__facts{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:0.6rem; }
.net__facts li{ display:grid; grid-template-columns:1.25rem 1fr; gap:0.5rem; font-size:0.95rem; }
.net__facts li::before{ content:"→"; color:var(--copper-500); }
.tier-note{ font-size:0.95rem; color:var(--ink-500); margin:0 0 1.1rem; max-width:56ch; }
.net .tab__n{ font-size:1.1rem; }
@media(max-width:860px){ .net{ grid-template-columns:1fr; } }
/* ---------- Client pathways: 3 columns ---------- */
.cases{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
.case{ background:var(--ivory-50); border:1px solid var(--border-hairline); border-radius:var(--radius-md); padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; }
.case__where{ font-size:0.68rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--copper-600); }
.case__t{ font-family:var(--font-serif); font-size:1.35rem; line-height:1.15; margin:6px 0 8px; }
.case__d{ font-size:0.9rem; color:var(--ink-500); margin:0 0 1.25rem; }
.cases__note{ font-size:0.8rem; color:var(--ink-400); margin:14px 0 0; }
@media(max-width:900px){ .cases{ grid-template-columns:1fr; } }
/* ---------- Leadership teaser ---------- */
/* ---------- Consultation + form ---------- */
.consult{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.consult .h2{ text-wrap:balance; }
.offer{ margin-top:1.75rem; border-top:1px solid var(--border-on-dark); padding-top:1.25rem; }
.offer__price{ display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap; }
.offer__price b{ font-family:var(--font-serif); font-size:2.6rem; font-weight:500; line-height:1; }
.offer__price sup{ font-size:0.75rem; font-weight:600; letter-spacing:0.1em; color:var(--copper-on-dark); vertical-align:0.9em; }
.offer__price span{ font-size:0.86rem; color:var(--text-inverse-soft); }
.offer ul{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:0.55rem; }
.offer li{ display:grid; grid-template-columns:1.25rem 1fr; gap:0.5rem; font-size:0.95rem; color:var(--text-inverse-soft); }
.offer li::before{ content:"→"; color:var(--copper-on-dark); }
.form{ background:var(--ivory-50); color:var(--charcoal-800); border-radius:var(--radius-lg); padding:clamp(20px,3vw,34px); display:grid; grid-template-columns:1fr 1fr; gap:16px 16px; }
.form__full{ grid-column:1/-1; }
.field{ display:grid; gap:6px; min-width:0; }
.field label, .field legend{ font-size:0.8rem; font-weight:600; color:var(--charcoal-800); padding:0; }
.field .opt{ font-weight:400; color:var(--ink-400); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea{
width:100%; font:inherit; font-size:0.95rem; color:var(--charcoal-800);
background:#fff; border:1px solid var(--border-line); border-radius:var(--radius-sm); padding:11px 12px;
transition:border-color .15s, box-shadow .15s;
}
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--copper-500); box-shadow:0 0 0 3px var(--focus-ring); }
.field input:user-invalid, .field select:user-invalid{ border-color:var(--critical); }
fieldset.field{ border:0; margin:0; padding:0; }
.checks{ display:flex; flex-wrap:wrap; gap:8px; }
.checks label{ font-weight:500; font-size:0.85rem; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--border-line); border-radius:var(--radius-pill); cursor:pointer; background:#fff; transition:border-color .15s, background .15s; }
.checks input{ accent-color:var(--copper-600); margin:0; }
.checks label:has(input:checked){ border-color:var(--copper-500); background:var(--copper-050); }
.checks label:has(input:focus-visible){ outline:2px solid var(--copper-500); outline-offset:2px; }
.form__foot{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-top:4px; }
.form__foot p{ font-size:0.78rem; color:var(--ink-400); margin:0; max-width:40ch; }
.form__done{ grid-column:1/-1; padding:8px 0; }
.form__done b{ display:block; font-family:var(--font-serif); font-size:1.6rem; font-weight:500; }
.form__done p{ color:var(--ink-500); margin:8px 0 0; }
@media(max-width:860px){ .consult{ grid-template-columns:1fr; } }
@media(max-width:560px){ .form{ grid-template-columns:1fr; } }
/* ---------- Footer: site-wide ---------- */
.foot2 .foot__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
.foot2 .foot__legal a{ color:rgba(243,236,222,0.5); }
@media(max-width:780px){ .foot2 .foot__grid{ grid-template-columns:1fr 1fr; } .foot2 .foot__grid > div:first-child{ grid-column:1/-1; } }
/* ===== assets/css/type-v2.css ===== */
/* ============================================================
OPEN TABLE - single-typeface layer for index-v2
One face does every job: display, body, labels, numerals.
Hierarchy is built from WEIGHT and SIZE, never from swapping
faces. That is what separates this from the serif-display-over-
sans-body shape that reads as generated.
TO TRY A DIFFERENT FACE: change --ot-face on the next line and
swap the Google Fonts in index-v2.html. Nothing else.
Archivo -> current. Grotesque, slightly narrow, industrial.
Schibsted Grotesk -> "Schibsted Grotesk", Helvetica, sans-serif (cooler, Nordic)
Source Serif 4 -> "Source Serif 4", Georgia, serif (warmer, all-serif)
Libre Franklin -> "Libre Franklin", Helvetica, sans-serif (plainer)
Loaded LAST, after v2.css.
============================================================ */
:root{
--ot-face: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* every family token in the design system collapses to one face */
--font-serif: var(--ot-face);
--font-sans: var(--ot-face);
--font-mono: var(--ot-face);
--font-display: var(--ot-face);
--font-body: var(--ot-face);
--font-prose: var(--ot-face);
--font-label: var(--ot-face);
--font-index: var(--ot-face);
/* the bridge tokens in tokens.css */
--serif: var(--ot-face);
--sans: var(--ot-face);
--mono: var(--ot-face);
}
/* ============================================================
DISPLAY
Spectral held together at weight 460-500. A grotesque does not:
at display size it needs more weight and tighter tracking, or it
reads thin and web-default.
============================================================ */
.hx h1{ font-weight: 650; letter-spacing: -0.035em; line-height: 1.0; }
.h2{ font-weight: 640; letter-spacing: -0.03em; }
/* The italic serif flourish has no equivalent here. Copper alone
carries the emphasis - cleaner, and one less voice on the page. */
.hx h1 em,
.h2 em{ font-style: normal; font-weight: inherit; }
/* ============================================================
TRACKED LABELS
These were IBM Plex Mono. A sans needs wider tracking than a
mono to read as a label rather than as small body copy.
============================================================ */
.hx__eyebrow,
.herod__cov-k{ font-weight: 600; letter-spacing: 0.2em; }
/* ============================================================
MID-SCALE
Everything that was serif, set at the one weight that reads as
a heading in this face.
============================================================ */
.case__t,
.tab__n,
.form__done b,
.offer__price b{ font-weight: 600; letter-spacing: -0.015em; }
.offer__price b{ letter-spacing: -0.03em; }
.brand__name{ font-weight: 700; letter-spacing: -0.01em; }
/* The EASI marks: circle letters and tab letters */
/* Italic serif -> upright, weighted. Italics in a grotesque read
as emphasis-within-a-sentence, not as a heading voice. */
.pos__is{ font-style: normal; font-weight: 600; letter-spacing: -0.015em; }
.foot__tag{ font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
/* ============================================================
READING SIZES
Libre Franklin runs a touch large at the same px, so body and
lead get slightly more line-height and a hair less size.
============================================================ */
.lead{ font-weight: 400; line-height: 1.55; letter-spacing: -0.005em; }
/* ============================================================
HERO ROUTER - the affordance
The rows jump to the matching stage in Services below, so the
arrow points down and the destination is stated outright.
============================================================ */
/* ===== assets/css/surface-v2.css ===== */
/* ============================================================
OPEN TABLE - surface layer for index-v2
The page was flat digital fill. This gives the surfaces the
unevenness of a material without reaching for the device both
reference sites use - an off-centre metallic radial bloom on a
near-black ground, which is currently one of the most common
AI/SaaS hero tells.
The difference is where the variation appears to COME FROM:
radial, off-centre -> light emitting from behind an element
(screen, tech, generated)
linear + grain -> a surface catching light unevenly
(paper, print, made)
Two devices, both on the second reading:
1. a ~3% tonal wash down the page, like paper stock
2. a fine grain overlay, which is what actually kills the
"perfectly clean digital fill" read
Loaded LAST, after type-v2.css.
============================================================ */
/* ============================================================
1. PAPER WASH
Ivory-50 at the top settling to a slightly deeper ivory at the
foot. Roughly three points of lightness across the whole page -
below conscious notice, above flat.
============================================================ */
body{
background-color: var(--ivory-100);
background-image: linear-gradient(
180deg,
#FCFAF4 0%,
#F7F3EA 38%,
#F3EEE1 100%
);
background-attachment: fixed;
}
/* ============================================================
2. GRAIN
style.css already sets `body > * { z-index: 2 }`, so a layer at
z-index 1 sits under every section and over the page ground.
Fixed, so it reads as grain in the paper rather than as a
texture scrolling with the content.
============================================================ */
body::before{
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.038;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ============================================================
3. THE HERO
The hero was flat charcoal-900 (#141917) - the near-black the
client objected to. It now runs a slow vertical falloff inside
the charcoal-700/800 range instead: same depth, read as a
surface, and out of near-black territory.
NOTE: this also changes the hero's darkness, not only its
gradient. To keep the old near-black, delete this block.
============================================================ */
/* Reverted to the original value, as asked: flat charcoal-900
#141917, exactly as index.html has it, with the corner glow on
top. No linear falloff here - index.html has none either.
Worth knowing: the glow now reads considerably STRONGER than it
did on charcoal-700. Same 0.16 alpha; the darker ground simply
gives the bloom more room to register. If it comes out too hot,
lower the alpha at style.css:161 rather than lifting the ground
back up. */
.hx{
background-color: var(--charcoal-900);
background-image: none;
}
/* Accent stays at the design-system value, --copper-on-dark
#D07A4B. It clears 3.0 (AA large text) across the whole
gradient - 3.54 / 3.99 / 4.52 - and the hero runs 38-62px.
The glow layer below sits ON TOP of the linear falloff, not
instead of it: the linear pass gives the surface its vertical
weight, the radial pass warms the top-right corner. */
/* ============================================================
5. CORNER GLOW
As on index.html: a soft copper bloom off the top-right.
Markup is inside .hx, and the rule
lives in style.css - .hx is position:relative + overflow:hidden
already, so the layer is clipped to the hero.
============================================================ */
.hx .herod__glow{ z-index: 0; }
/* The coverage strip inherits the hero ground, as it always did. */
/* ============================================================
4. DARK SECTIONS
The same falloff, much shallower, so the charcoal blocks lower
down are not flat either.
============================================================ */
.sec--ink{
background-image: linear-gradient(
176deg,
#232A28 0%,
#1D2423 60%
);
}
.foot{
background-image: linear-gradient(
180deg,
#1D2423 0%,
#171D1C 100%
);
}
/* ===== assets/css/blocks-v2.css ===== */
/* ============================================================
OPEN TABLE - v2 blocks
.hub hero aside: the seating diagram, with hover detail
.srail services as a progress rail (EASI IS a sequence)
.cstage engagement stages as a labelled set (NOT a sequence)
.course service detail blocks on services.html
The .srail / .cstage split is deliberate. EASI runs in order,
so the services list gets a rail that fills. An engagement uses
a SUBSET of stages in whatever order suits the client, so the
case cards get chips instead - connecting bars there implied a
progression that does not exist, which is what made them read
as broken.
Loaded after surface-v2.css.
============================================================ */
/* ============================================================
1. THE HUB
============================================================ */
.hub{ align-self: start; }
.hub__k{
font-family: var(--font-index);
font-size: 11px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-inverse-soft);
margin-bottom: 10px;
}
.hub__d{
display: block; width: 100%; max-width: 420px; height: auto;
margin-inline: auto; overflow: visible;
}
/* Ring and seats share r=100: the table edge runs THROUGH the seat
centres. Seats are opaque and painted after the ring, so the edge
shows only in the arcs between them - which is what makes it read
as one table rather than a circle with dots near it.
Circumference = 2*pi*100 = 628.3; every dash value derives from
that, so changing r means changing them too. */
.hub__ring{
fill: none; stroke: rgba(247,243,234,0.22); stroke-width: 1;
stroke-dasharray: 628.3; stroke-dashoffset: 628.3;
animation: hub-draw 1.1s var(--ease-entrance, ease-out) 0.15s forwards;
}
.hub__trace{
fill: none; stroke: var(--copper-on-dark); stroke-width: 2;
stroke-linecap: round; stroke-dasharray: 26 602; opacity: 0;
animation: hub-fade 0.6s ease 1.2s forwards,
hub-trace 9s linear 1.2s infinite;
}
.hub__seat{
transform-box: fill-box; transform-origin: center;
opacity: 0; cursor: pointer;
animation: hub-seat 0.5s var(--ease-entrance, cubic-bezier(.16,1,.3,1)) forwards;
animation-delay: calc(0.45s + var(--i) * 0.09s);
transition: transform .22s var(--ease-standard, ease-out);
}
.hub__seat circle{
fill: var(--charcoal-900); stroke: rgba(247,243,234,0.34); stroke-width: 1;
transition: stroke .22s, fill .22s;
}
.hub__seat:hover, .hub__seat:focus-visible{ transform: scale(1.12); outline: none; }
.hub__seat:hover circle,
.hub__seat:focus-visible circle{ stroke: var(--copper-on-dark); stroke-width: 1.5; fill: #23292b; }
.hub__seat:focus-visible circle{ stroke-width: 2.5; }
.hub__mk{
fill: var(--text-inverse); font-family: var(--font-sans);
font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
text-anchor: middle; pointer-events: none;
}
.hub__n{
fill: var(--copper-on-dark); font-family: var(--font-sans);
font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
text-anchor: middle; pointer-events: none;
}
.hub__centre{ opacity: 0; animation: hub-fade 0.7s ease 0.95s forwards; }
.hub__name{
fill: var(--text-inverse); font-family: var(--font-sans);
font-size: 19px; font-weight: 600; letter-spacing: -0.015em; text-anchor: middle;
}
.hub__role{
fill: var(--copper-on-dark); font-family: var(--font-sans);
font-size: 8px; font-weight: 600; letter-spacing: 0.2em; text-anchor: middle;
}
/* The "1-2" needed explaining - it meant nothing on its own.
This line says what it is, and becomes the market detail on
hover or keyboard focus. */
.hub__detail{
font-size: 0.82rem; line-height: 1.5;
color: var(--text-inverse-soft);
text-align: center; margin: 14px auto 0; max-width: 40ch;
min-height: 2.6em;
}
.hub__detail b{ color: var(--copper-on-dark); font-weight: 600; }
@keyframes hub-draw{ to{ stroke-dashoffset: 0; } }
@keyframes hub-fade{ to{ opacity: 1; } }
@keyframes hub-seat{ from{ opacity:0; transform:scale(0.62); } to{ opacity:1; transform:scale(1); } }
@keyframes hub-trace{ to{ stroke-dashoffset: -628.3; } }
@media(max-width:900px){ .hub{ margin-top: 8px; } .hub__d{ max-width: 330px; } }
/* ============================================================
2. THE SERVICE RAIL
EASI runs in order, so this one earns a progress treatment:
the rail fills downward and each node lights as it is reached.
============================================================ */
.srail{ list-style: none; margin: 0; padding: 0; position: relative; }
/* the unfilled track */
.srail::before{
content: ""; position: absolute; z-index: 0;
left: 22px; top: 30px; bottom: 30px; width: 2px;
background: var(--border-line);
}
/* the fill, drawn on reveal */
.srail::after{
content: ""; position: absolute; z-index: 1;
left: 22px; top: 30px; bottom: 30px; width: 2px;
background: var(--copper-500);
transform: scaleY(0); transform-origin: top center;
}
.sec.is-visible .srail::after{
animation: rail-fill 1.5s var(--ease-standard, ease-out) 0.2s forwards;
}
@keyframes rail-fill{ to{ transform: scaleY(1); } }
.srail__item{
position: relative; z-index: 2;
display: grid; grid-template-columns: 46px minmax(0, 1fr);
gap: 0 1.5rem; padding: 0.9rem 0;
}
.srail__node{
width: 46px; height: 46px; border-radius: 50%;
border: 1.5px solid var(--border-line);
background: var(--ivory-100);
display: grid; place-items: center;
font-size: 1.1rem; font-weight: 700; color: var(--ink-400);
transition: color .3s, border-color .3s, background .3s;
}
.sec.is-visible .srail__item:nth-child(1) .srail__node{ animation: node-on .45s ease 0.35s forwards; }
.sec.is-visible .srail__item:nth-child(2) .srail__node{ animation: node-on .45s ease 0.65s forwards; }
.sec.is-visible .srail__item:nth-child(3) .srail__node{ animation: node-on .45s ease 0.95s forwards; }
.sec.is-visible .srail__item:nth-child(4) .srail__node{ animation: node-on .45s ease 1.25s forwards; }
.sec.is-visible .srail__item:nth-child(5) .srail__node{ animation: node-on .45s ease 1.55s forwards; }
@keyframes node-on{
to{ background: var(--copper-500); border-color: var(--copper-500); color: var(--ivory-50); }
}
.srail__row{ display: flex; align-items: baseline; gap: 0.85rem; padding-top: 0.55rem; }
.srail__name{
font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600;
letter-spacing: -0.02em; line-height: 1.15; margin: 0; flex: none;
}
.srail__dots{
flex: 1 1 auto; min-width: 1.5rem;
border-bottom: 1.5px dotted var(--border-line);
transform: translateY(-0.3rem);
}
.srail__stage{
flex: none; font-size: 0.64rem; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-600);
}
.srail__desc{
font-size: 0.92rem; line-height: 1.55; color: var(--ink-500);
margin: 0.35rem 0 0; max-width: 62ch;
}
.srail__foot{
display: flex; align-items: center; justify-content: space-between;
gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.75rem;
padding-top: 1.5rem; border-top: 1px solid var(--border-hairline);
}
.srail__foot p{ font-size: 0.92rem; color: var(--ink-500); margin: 0; max-width: 44ch; }
@media(max-width:620px){
.srail__item{ grid-template-columns: 38px minmax(0,1fr); gap: 0 1rem; }
.srail__node{ width: 38px; height: 38px; font-size: 0.95rem; }
.srail::before, .srail::after{ left: 18px; }
.srail__dots{ display: none; }
.srail__row{ flex-wrap: wrap; gap: 0.3rem 0.75rem; }
}
/* ============================================================
3. ENGAGEMENT STAGES - a set, not a sequence
Every card shows all four stages in canonical E-A-S-I order,
with the ones this engagement used filled in. No connectors:
the stages used are a selection, and the order they ran in is
not what this is communicating.
============================================================ */
.cstage{ margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--border-hairline); }
.cstage__k{
display: block; font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-400); margin-bottom: 0.65rem;
}
.cstage__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cstage__i{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px 5px 6px; border-radius: var(--radius-pill);
border: 1px solid var(--border-hairline);
font-size: 0.74rem; font-weight: 500; color: var(--ink-400);
opacity: 0.55;
}
.cstage__i b{
width: 19px; height: 19px; border-radius: 50%; flex: none;
display: grid; place-items: center;
font-size: 0.66rem; font-weight: 700;
background: var(--stone-200); color: var(--ink-500);
}
.cstage__i.is-on{
border-color: var(--copper-200); background: var(--copper-050);
color: var(--charcoal-800); font-weight: 600; opacity: 1;
}
.cstage__i.is-on b{ background: var(--copper-500); color: #fff; }
/* used stages arrive in order on reveal; unused ones just sit there */
.sec .cstage__i.is-on{ opacity: 0; transform: translateY(5px); }
.sec.is-visible .cstage__i.is-on{
animation: chip-in .4s var(--ease-entrance, cubic-bezier(.16,1,.3,1)) forwards;
}
.sec.is-visible .cstage__i:nth-child(1).is-on{ animation-delay: .15s; }
.sec.is-visible .cstage__i:nth-child(2).is-on{ animation-delay: .27s; }
.sec.is-visible .cstage__i:nth-child(3).is-on{ animation-delay: .39s; }
.sec.is-visible .cstage__i:nth-child(4).is-on{ animation-delay: .51s; }
@keyframes chip-in{ to{ opacity: 1; transform: none; } }
/* ============================================================
4. COURSES - services.html detail blocks
============================================================ */
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce){
.hub__ring{ stroke-dashoffset: 0; animation: none; }
.hub__trace{ opacity: 1; animation: none; }
.hub__seat, .hub__centre{ opacity: 1; transform: none; animation: none; }
.hub__seat:hover, .hub__seat:focus-visible{ transform: none; }
.srail::after{ transform: scaleY(1); animation: none; }
.srail__node{ background: var(--copper-500); border-color: var(--copper-500); color: var(--ivory-50); animation: none !important; }
.sec .cstage__i.is-on{ opacity: 1; transform: none; animation: none !important; }
}