/* RDK Group — generated from tokens.json */
:root, [data-theme="light"] {
  --brand-navy: #001e5a; /* RDK Navy, the master logo ink (logo.ai, CMYK 100/82/0/65 equivalent). Headlines, primary buttons, the inverse band. Same value in every theme. */
  --brand-gold: #dab617; /* RDK Gold, the skyline block in the Group and Developments logos. Accent only: section numerals, short rules, highlighted words, icon tiles, hover fills. Never body text on light grounds (1.8:1 on paper); fine as text on navy (8.0:1) and on the dark ground (9.3:1). */
  --brand-cobalt: #0047ab; /* Brochure body and statement blue. Intro paragraphs, pull statements, links on light grounds (7.7:1 on paper, 8.4:1 on white). */
  --brand-sky: #8cc7fb; /* Brochure accent on dark spreads (the section numeral on the Our Services page). Light-blue text and marks on navy or the dark ground only (8.8:1 on navy). */
  --brand-charcoal: #29303c; /* Charcoal ink of the RDK Civil Engineering Limited logo. Long-form body copy on light grounds (12.2:1 on paper). */
  --civils-blue: #0c4da2; /* Legacy RDK Civils business-card blue. Only for reprints of the existing Civils card set; new work uses brand-navy. */
  --civils-yellow: #ffc20e; /* Legacy RDK Civils business-card yellow (the ribbon). Only for reprints of the existing Civils card set; new work uses brand-gold. */
  --surface-page: #f5f5f5; /* Page ground. Light: the brochure paper grey. Dark: the brochure's near-black spread colour. */
  --surface-card: #ffffff; /* Cards, panels, nav bar, form fields on surface-page. */
  --surface-inverse: #001e5a; /* Navy band: CTA strips, footer, the hero overlay, logo-white placements. */
  --surface-accent: var(--brand-gold); /* Gold fill: icon tiles, the numeral tab, the hover state of primary buttons. Put on-accent text on it. */
  --ink-heading: #001e5a; /* Headlines and section titles on surface-page and surface-card (14.5:1 light, 16.8:1 dark). */
  --ink: #29303c; /* Body copy on surface-page and surface-card (12.2:1 light, 15.2:1 dark). */
  --ink-accent: #0047ab; /* Intro paragraphs, statements, links and active filters on surface-page and surface-card (7.7:1 light, 9.2:1 dark). */
  --ink-muted: #7a7a7a; /* Captions, metadata, borough names. Brochure grey: 3.9:1 on paper and 4.3:1 on white in light, so use it at 18px+ or 14px bold and above there; dark passes at all sizes (6.9:1 on surface-card). */
  --ink-highlight: #dab617; /* Gold emphasis inside statements ('Success Rate', '95%') and section numerals. Light theme: display sizes only, decorative (1.8:1 on paper, kept from the brochure); always pair with a navy or cobalt word carrying the meaning. */
  --on-inverse: #ffffff; /* Text and logo-white on surface-inverse (15.8:1). */
  --on-accent: #001e5a; /* Text and icons on surface-accent gold (8.0:1). */
  --action-primary: #001e5a; /* Primary button fill: navy in light, gold in dark. */
  --on-action-primary: #ffffff; /* Label on action-primary (15.8:1 light, 8.0:1 dark). */
  --action-primary-hover: #dab617; /* Primary hover: the brief's Navy-to-Gold transition in light; gold lifts to paper in dark. */
  --on-action-primary-hover: #001e5a; /* Label on action-primary-hover (8.0:1 on gold, 14.5:1 on paper). */
  --line: #ececec; /* Hairline dividers between stats and list rows. Decorative only; never the sole edge of a control. */
  --line-blueprint: #d9d9d9; /* The dashed vertical drafting grid behind brochure pages; also blueprint linework over photos at low opacity. */
  --line-control: #001e5a; /* Borders of outline buttons, inputs and filter tabs (meets 3:1 on every surface). */
  --focus-ring: #0047ab; /* 2px solid focus outline, 2px offset. 7.7:1 on paper in light, 9.3:1 on the dark ground. */
  --shadow-card: 0 8px 24px rgba(0, 30, 90, 0.08); /* Cards and the floating stat bar. Navy-tinted, never grey-black, in light. */
  --shadow-raised: 0 16px 40px rgba(0, 30, 90, 0.14); /* Hovered cards and sticky CTAs. */
}
[data-theme="dark"] {
  --surface-page: #12151a;
  --surface-card: #1b1f26;
  --surface-inverse: #001e5a;
  --surface-accent: var(--brand-gold);
  --ink-heading: #f5f5f5;
  --ink: #f5f5f5;
  --ink-accent: #8cc7fb;
  --ink-muted: #a3a8b2;
  --ink-highlight: #dab617;
  --action-primary: #dab617;
  --on-action-primary: #001e5a;
  --action-primary-hover: #f5f5f5;
  --line: #2a2f38;
  --line-blueprint: #2a2f38;
  --line-control: #a3a8b2;
  --focus-ring: #dab617;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.5);
}
:root {
  --space-1: 4px; /* Icon-to-label gaps. */
  --space-2: 8px; /* Tag padding, tight stacks. */
  --space-3: 12px; /* Button vertical padding, list rows. */
  --space-4: 16px; /* Card inner gaps, mobile side gutter. */
  --space-6: 24px; /* Card padding, heading-to-body. */
  --space-8: 32px; /* Between cards in a grid. */
  --space-12: 48px; /* Section padding on mobile; numeral-to-content. */
  --space-16: 64px; /* Desktop page margins (brochure keeps ~15mm). */
  --space-24: 96px; /* Between page sections on desktop. */
  --radius-0: 0px; /* The logo square, blueprint frames, the numeral page tab, full-bleed photos. */
  --radius-sm: 6px; /* Buttons, inputs, tags. */
  --radius-md: 12px; /* Cards, image tiles, stat bars. */
  --radius-lg: 20px; /* Large photo panels and the CTA band (brochure rounded image frames). */
  --radius-pill: 999px; /* Filter tabs and the process-step chips. */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-heading: Satoshi, "Poppins", system-ui, sans-serif;
  --font-sans: "Poppins", system-ui, sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;
  --text-section-title: 800 60px/64px var(--font-montserrat); /* Brochure section titles (Source Serif 60pt). One per page or section, Title Case, ink-heading. */
  --text-title-lg: 800 44px/50px var(--font-montserrat); /* Section titles on web pages and tablet layouts. */
  --text-numeral: 700 72px/72px var(--font-sans); /* Two-digit section numbers above a section-title (Poppins Bold 72pt, ink-highlight). */
  --text-stat: 700 40px/44px var(--font-sans); /* Key metrics: success rates, years, project counts. */
  --text-page-tab: 500 15px/20px var(--font-sans); /* Folio numbers on the gold page tab (Poppins Medium 15.4pt). */
  --text-statement: 700 36px/44px var(--font-heading); /* Pull statements in ink-accent with one ink-highlight phrase (Satoshi Bold 36pt). */
  --text-heading: 700 24px/32px var(--font-heading); /* Sub-sections and card titles (Satoshi Bold 24pt), ink-heading. */
  --text-heading-sm: 700 18px/24px var(--font-heading); /* Card and list titles. */
  --text-eyebrow: 700 12px/16px var(--font-heading); /* Uppercase kicker above a heading, ink-accent. The only all-caps text style. */
  --text-lead: 300 18px/28px var(--font-sans); /* Intro paragraphs under a title, ink-accent. */
  --text-body: 300 15px/24px var(--font-sans); /* Running copy (Poppins Light 14pt in print), ink. */
  --text-body-strong: 500 15px/24px var(--font-sans); /* Inline emphasis, list labels, process step names. */
  --text-label: 500 14px/20px var(--font-sans); /* Buttons, tabs, nav links. */
  --text-caption: 400 12px/18px var(--font-sans); /* Metadata, image credits, borough names under stats. ink-muted only on dark; in light use ink. */
}
.section-title {
  font-family: var(--font-montserrat);
  font-size: 60px;
  line-height: 64px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.title-lg {
  font-family: var(--font-montserrat);
  font-size: 44px;
  line-height: 50px;
  font-weight: 800;
  letter-spacing: 0;
}
.numeral {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 72px;
  font-weight: 700;
  letter-spacing: 0;
}
.stat {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: 0;
}
.page-tab {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.statement {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: 0;
}
.heading {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}
.heading-sm {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}