/*
 * Design system: Portfolio v2
 *
 * Tokens (:root): colour, type scale, spacing, radius, line, icon size, card,
 * table, label, subhead, frame, marquee and gate values. Change a value here, not in the rules.
 *
 * Type scale: caption 12px, small 13px, body 16px, subhead 20px, quote 24px, display 32px.
 * Breakpoints (media queries cannot use variables, so they are written out):
 *   640px  tablet: two columns
 *   767px  phone: maximum width for phone-only rules
 *   1024px maximum width for sticky stage headings, including landscape tablets
 *   1024px desktop: three to five columns, larger quotes and frames
 *
 * Layers: tokens, atoms (labels, frames, icons, pills), molecules (cards, tables, tiles),
 * components (accordion, timeline, gallery, service map), templates (project and page).
 */
/* =========================================================================
   Mindful x Design Studio — Design System & Brand Guidelines (v2)
   Source: imported from getaheadstart.org/portfolio (site bundle index-DOVn9vVv.css)
   Single source of truth for tokens, components and brand rules.

   Link from any page:  <link rel="stylesheet" href="design-system.css">

   ---------------------------------------------------------------------------
   1. BRAND
   ---------------------------------------------------------------------------
   Name        Mindful x Design Studio
   Positioning "Simplifying complexity into clear, scalable outcomes across
                people, platforms and emerging technology."
   Voice       Calm, outcome-driven, precise. Plain English over jargon.
               Short declaratives. Evidence over adjectives.
   Personality Craft-led, curious, unhurried, human. Confident, never loud.
   Mark        Mindful x Design Studio wordmark (/img/logo.webp).
   Motif       The "Discover → Design → Launch → Measure → Learn → ∞" loop.
               Arrows (→) separate journey steps and are the signature detail.

   ---------------------------------------------------------------------------
   2. TYPOGRAPHY
   ---------------------------------------------------------------------------
   Primary     Plus Jakarta Sans (Google Fonts) — headings, body, UI.
   Mono        ui-monospace stack — labels, metadata, tags, code.
   Rules       Eyebrow labels: uppercase, letter-spaced, small.
               Headings: tight, heavy weight, fluid size via clamp().
               Body line-height 1.6. Max measure ~65ch for prose.

   ---------------------------------------------------------------------------
   3. COLOUR
   ---------------------------------------------------------------------------
   Neutral base is warm off-white (paper) and near-black (ink). Accent colours
   are used sparingly, one per card or diagram node — never as page backgrounds.
   ========================================================================= */

:root {
  --ds-label-col: 160px;  /* Width of the label column in the service map. */
  /* Layout percentages: full width, half, and the centring shift. */
  --ds-full: 100%;  /* Full width (100%). */
  --ds-half: 50%;  /* Half (50%). */
  --ds-center-shift: -50%;  /* Centring shift (-50%). */
  /* Icon stroke width. */
  --ds-stroke: 2;  /* Icon stroke width (2). */
  /* Hero height and fluid gap. */
  --ds-hero-height: 92vh;  /* Hero height (92% of the viewport). */
  --ds-fluid: 2vw;  /* Fluid gap, 2% of the viewport width. */
  /* Proportions and aspect ratios: prose share, framework width, photo and diagram ratios. */
  --ds-share-prose: 66.666%;  /* Prose share of a column (two thirds). */
  --ds-ratio-photo: 4 / 3;  /* Photo aspect ratio (4:3). */
  --ds-ratio-diagram: 2 / 3;  /* Diagram aspect ratio (2:3). */
  /* Line-height scale: tight 1.1, snug 1.3, body 1.6, loose 1.7. */
  --ds-lh-tight: 1.1;  /* Tight line height (1.1). */
  --ds-lh-snug: 1.3;  /* Snug line height (1.3). */
  --ds-lh-body: 1.6;  /* Body line height (1.6). */
  --ds-lh-loose: 1.7;  /* Loose line height (1.7). */
  /* Opacity for hover states. */
  --ds-opacity-hover: 0.8;  /* Hover opacity (0.8). */
  --ds-opacity-full: 1;  /* Fully visible (1). */
  --ds-opacity-none: 0;  /* Hidden (0). */
  --ds-filter-mono: grayscale(100%);  /* Black and white image filter. */
  --ds-flow-width: 100%;  /* Flow diagram width (full card width). */
  /* Stacking order: base, sticky headers, overlays and modals. */
  --ds-z-base: 1;  /* Base stacking order. */
  --ds-z-sticky: 30;  /* Sticky header stacking order. */
  --ds-z-overlay: 50;  /* Overlay stacking order. */
  --ds-z-modal: 300;  /* Modal stacking order. */
  /* Motion. Reduced-motion duration used when a visitor asks for less motion. */
  --ds-motion-reduced: 0.01ms;  /* Reduced-motion duration. Applied when the visitor prefers less motion. */
  /* Letter spacing. Scale: wide 2px, caps 0.5px, label 1.2px, eyebrow 0.14em, tight -0.03em. */
  --ds-tracking-wide: 2px;  /* Wide letter spacing for small capitals. */
  /* Widths. Prose and column measures for text and layout blocks. */
  --ds-measure: 600px;  /* Prose measure. Maximum width for body text blocks. */
  --ds-measure-wide: 780px;  /* Wide measure. Maximum width for feature text blocks. */
  --ds-col: 260px;  /* Column width for results lists. */
  /* Icon sizes. One glyph size (24px) and container sizes for circles and tiles. */
  --ds-icon: 24px;  /* Glyph size for every icon (24px). */
  --ds-icon-box: 48px;  /* Icon container size for large circles (48px). */
  --ds-icon-box-sm: 32px;  /* Icon container size for compact tiles (32px). */
  /* Logo height in the navigation bar. */
  --ds-logo-h: 32px;  /* Logo height in the navigation bar. */
  /* Indents for nested lists and switch travel. */
  /* Switch knob diameter. */
  /* Small offsets for optical alignment and tree spacing. */
  /* Frame rim width for the photo frame. */
  --ds-rim: 6px;  /* Photo frame rim width. */
  /* Vertical offset for the timeline connector line. */
  --ds-optical-sm: -0.7px;  /* Optical nudge, small. Centres glyphs in principle icons. */
  --ds-optical-md: -1.4px;  /* Optical nudge, medium. */
  --ds-optical-lg: -2.7px;  /* Optical nudge, large. */
  --ds-tracking-caps: 0.5px;  /* Letter spacing for capitalised small text. */
  /* Vertical gaps between page sections: heading gap and figure gap. */
  --ds-gap-heading: 52px;  /* Gap below section headings. */
  --ds-gap-figure: 56px;  /* Gap above hero figures. */
  /* Touch targets and controls. Minimum tap size and control height. */
  --ds-touch: 44px;  /* Minimum touch target height. */
  /* Gallery and marquee tile width. */
  --ds-tile: 220px;  /* Gallery tile width on phones. */
  /* Width of the label column in the service map. */
  /* Sticky offset for timeline stage headers under the navigation. */
  --ds-stage-top: 144px;  /* Sticky top offset for timeline stage headers. */
  /* Timeline connector length and card spacing. */
  --ds-connector: 28px;  /* Timeline connector length. */
  /* Vertical space above and below the framework diagram. */
  --ds-section-gap: 112px;  /* Vertical space around the framework diagram. */
  /* Spacing scale: 3xs 6px, 2xs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 40px, 2xl 64px, 3xl 96px. Each step is a named token. */
  --ds-space-3xs: 6px;  /* Spacing step 6px. */
  /* Lines and borders. Standard 1px line, strong 2px line, accent bar 3px. */
  --ds-line-strong: 2px;  /* Strong line width (2px). */
  --ds-bar: 3px;  /* Accent bar width (3px). */
  /* Keyboard focus outline and its offset. */
  --ds-focus: 2px solid var(--ds-color-ink);  /* Focus outline style. */
  --ds-line: 1px;  /* Standard line width (1px). */
  /* Type scale: caption 12px, small 13px, body 16px, subhead 20px, quote 24px, display 32px. */
  --ds-text-caption: 12px;  /* Caption text size (12px). */
  --ds-text-small: 13px;  /* Small text size (13px). */
  --ds-text-subhead: 20px;  /* Subhead text size (20px). */
  --ds-text-quote: 24px;  /* Quote text size (24px). */
  --ds-text-display: 32px;  /* Display text size (32px). */
  /* Colour roles. Text on dark surfaces, the photo frame, and the success accent. */
  --ds-text-on-dark-soft: rgb(255 255 255 / 0.8);  /* Soft text colour on dark surfaces. */
  --ds-color-frame: #444444;  /* Photo frame colour. */
  --ds-accent-happy: #0a7a52;  /* Positive feedback colour (happy face). */
  --ds-color-black: #000000;  /* Pure black. */
  /* Surface colours for muted backgrounds and glass cards. */
  --ds-surface-muted: #f4f4f4;  /* Muted surface colour. */
  --ds-surface-glass: rgb(255 255 255 / 50%);  /* Translucent white card surface. */
  /* Component padding. Tiles, panels, cards, and table cells. */
  --ds-tile-pad: 20px 16px;  /* Padding for KPI tiles. */
  --ds-panel-pad: 20px 24px;  /* Padding for context panels. */
  --ds-card-pad: 28px;  /* Padding for deliverable and principle cards. */
  --ds-card-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 8px 24px 0px;  /* Shadow for deliverable cards. */
  /* Table cell padding and minimum table widths. */
  --ds-table-pad: 10px 8px;  /* Table cell padding. */
  --ds-table-min: 560px;  /* Minimum width for tables. */
  --ds-table-min-wide: 1040px;  /* Minimum width for the service map. */
  /* Line heights. Tight, snug, body and loose ratios, and the subhead ratio. */
  --ds-subhead-lh: 1.25;  /* Subhead line-height ratio. */
  /* Label roles: uppercase label font, tracking and colour. */
  --ds-label-font: var(--ds-weight-bold) var(--ds-text-caption)/1.3 var(--ds-font-sans);  /* Label font: bold, caption size, sans. */
  --ds-label-tracking: 1.2px;  /* Label letter spacing (1.2px). */
  --ds-label-color: var(--ds-text-tertiary);  /* Label colour (tertiary text). */
  /* ----- Brand neutrals (light) ----- */
  --ds-color-paper: #f5f4f0; /* page background */
  --ds-color-paper-mid: #ecebe6; /* alternate section background */
  --ds-color-line: #d8d7d2; /* borders, dividers */
  --ds-color-ink: #1a1a1a; /* primary text, dark surfaces */
  --ds-color-ink-muted: #555555; /* tertiary text, captions */
  --ds-color-ink-faint: #888888; /* placeholders, disabled */
  --ds-color-white: #ffffff;  /* White. */

  /* ----- Brand neutrals (dark) ----- */
  --ds-color-ink-line: #2e2e2e; /* dark borders */
  --ds-color-ink-footer-line: #222222;  /* Footer divider colour. */

  /* ----- Hero / stage (imagery-led sections) ----- */
  --ds-color-stage: #07080a;  /* Stage background colour. */

  /* ----- Accent palette (one per card / node, never a background) ----- */
  --ds-accent-blue: #00cfff;  /* Accent colour, blue. */
  --ds-accent-green: #00e5a0;  /* Accent colour, green (ticked state). */
  --ds-accent-red: #d63527;  /* Accent colour, red (sad state). */

  /* ----- Semantic ----- */

  /* ----- Semantic surface / text roles (light default) ----- */
  --ds-surface-page:      var(--ds-color-paper);  /* Page surface colour. */
  --ds-surface-alt:       var(--ds-color-paper-mid);  /* Alternate section surface colour. */
  --ds-surface-card:      var(--ds-color-white);  /* Card surface colour (white). */
  --ds-text-primary:      var(--ds-color-ink);  /* Primary text colour. */
  --ds-text-secondary:    var(--ds-color-ink-muted);  /* Secondary text colour. */
  --ds-text-tertiary: #6b6b6b;  /* Tertiary text colour (labels and meta). */
  --ds-border:            var(--ds-color-line);  /* Default border colour. */
  --ds-nav-bg: color-mix(in srgb, var(--ds-color-paper) 92%, transparent);  /* Navigation background with slight transparency. */

  /* ----- Typography ----- */
  --ds-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;  /* Canonical family from tokens.json. */
  --ds-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;  /* Same approved secondary family as React. */
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;  /* Monospace font stack. */

  /* Font weights: regular 400, medium 500, semibold 600, bold 700, heavy 800. */
  --ds-weight-regular: 400;  /* Font weight 400. */
  --ds-weight-medium: 500;  /* Font weight 500. */
  --ds-weight-semibold: 600;  /* Font weight 600. */
  --ds-weight-bold: 700;  /* Font weight 700. */
  --ds-weight-heavy: 800;  /* Font weight 800. */

  /* Fluid type scale (display → caption) */
  /* Fluid headings. Heading sizes scale with the viewport between a minimum and maximum. */
  --ds-text-h1: clamp(40px, 6.8vw, 88px);  /* Heading 1, fluid. */
  --ds-text-h2-lg: clamp(28px, 5vw, 56px);  /* Heading 2 large, fluid. */
  --ds-text-h2: clamp(24px, 4vw, 42px);  /* Heading 2, fluid. */
  --ds-text-h4: clamp(20px, 3vw, 28px);  /* Heading 4, fluid. */
  --ds-text-hero-sub: clamp(15px, 2vw, 20px);  /* Hero subtitle, fluid. */
  /* Body text: body, leading and tracking for paragraphs and eyebrows. */
  --ds-text-body: 16px;  /* Body text size (16px). */

  --ds-leading-body: 1.5;  /* Body line height (1.5). */

  --ds-tracking-eyebrow: 0.14em;  /* Eyebrow letter spacing (0.14em). */
  --ds-tracking-tight: -0.03em;  /* Tight letter spacing for headings (-0.03em). */

  /* ----- Spacing (4px base) ----- */
  /* Spacing scale tokens (see the scale note above). */
  --ds-space-2xs: 4px;  /* Spacing step 4px. */
  --ds-space-xs: 8px;  /* Spacing step 8px. */
  --ds-space-sm: 12px;  /* Spacing step 12px. */
  --ds-space-md: 16px;  /* Spacing step 16px. */
  --ds-space-lg: 24px;  /* Spacing step 24px. */
  --ds-space-xl: 40px;  /* Spacing step 40px. */
  --ds-space-2xl: 64px;  /* Spacing step 64px. */
  --ds-space-3xl: 96px;  /* Spacing step 96px. */
  --ds-space-section: 100px;  /* Section vertical spacing. */

  /* ----- Layout ----- */
  /* Layout: container width, navigation height and section spacing. */
  --ds-container-max: 1100px;  /* Maximum container width (1100px). */
  --ds-nav-height: 80px;  /* Navigation bar height (80px). */

  /* ----- Shape ----- */
  /* Corner radius scale: small 4px, medium 8px, large 16px, pill 999px, and device corners. */
  --ds-radius-sm: 4px;  /* Small corner radius (4px). */
  --ds-radius-md: 8px;  /* Medium corner radius (8px). */
  --ds-radius-lg: 16px;  /* Large corner radius (16px). */
  --ds-radius-pill: 999px;  /* Pill corner radius. */
  --ds-radius-device-phone: 28px;  /* Phone device corner radius. */

  /* ----- Elevation ----- */

  /* ----- Motion ----- */
  /* Motion durations and easing curves for transitions. */
  --ds-duration-fast: 150ms;  /* Fast transition (150ms). */
  --ds-duration-base: 300ms;  /* Base transition (300ms). */
  --ds-duration-slow: 600ms;  /* Slow transition (600ms). */
  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* Standard easing curve. */
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* Ease-out curve. */

  /* ----- Breakpoints (reference only; use in @media) -----
     sm 480px · md 768px · lg 1024px */
}/* Dark mode: follow system unless the page forces light */



/* =========================================================================
   4. BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ds-surface-page);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-body);
  line-height: var(--ds-leading-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: var(--ds-full); display: block; }

:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-bar);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: var(--ds-motion-reduced) !important; transition-duration: var(--ds-motion-reduced) !important; }
}/* =========================================================================
   5. COMPONENTS
   Each block maps to a component identified on getaheadstart.org/portfolio.
   ========================================================================= */
/* ---- 5.1 Container ------------------------------------------------------ */

.ds-inner {
  width: var(--ds-full);
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-space-md);
}
@media (min-width: 768px) { .ds-inner { padding-inline: var(--ds-space-lg); } }/* ---- 5.2 Nav (logo-only top bar) ---------------------------------------- */

.ds-nav {
  border-bottom-color: var(--ds-color-line);
  position: sticky;
  top: 0;
  z-index: var(--ds-z-overlay);
  height: var(--ds-nav-height);
  display: flex;
  align-items: center;
  padding-inline: var(--ds-space-md);
  background: var(--ds-nav-bg);
  backdrop-filter: blur(var(--ds-space-xs));
}
.ds-nav__logo img { height: var(--ds-logo-h); width: auto; }/* ---- 5.3 Hero (full-bleed imagery + overlay + staggered title) ----------- */

.ds-hero {
  position: relative;
  min-height: var(--ds-hero-height);
  display: flex;
  align-items: flex-end;
  color: var(--ds-color-white);
  background: var(--ds-color-stage);
  overflow: hidden;
  isolation: isolate;
}
.ds-hero__content { padding-bottom: var(--ds-space-3xl); }
.ds-hero__eyebrow {
  font: var(--ds-weight-semibold) var(--ds-text-caption)/var(--ds-lh-tight) var(--ds-font-mono);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-text-on-dark-soft);
  margin: 0 0 var(--ds-space-md);
}
.ds-hero__title {
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-weight-heavy);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-tracking-tight);
  margin: 0 0 var(--ds-space-lg);
}
.ds-hero__sub {
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-regular);
  max-width: var(--ds-measure);
  line-height: var(--ds-lh-loose);
  color: var(--ds-color-paper-mid);
  opacity: var(--ds-opacity-hover);
  margin: 0;
}/* ---- 5.4 Section + section header --------------------------------------- */

.ds-section { padding-block: var(--ds-space-section); background: var(--ds-surface-page); }
.ds-section--alt { background: var(--ds-surface-alt); }

.ds-section-label {
  font: var(--ds-weight-bold) var(--ds-text-caption)/var(--ds-lh-tight) var(--ds-font-sans);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  color: var(--ds-text-tertiary);
  margin: 0 0 var(--ds-space-xs);
}
.ds-section-heading {
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-weight-heavy);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-tracking-tight);
  max-width: var(--ds-measure-wide);
  margin: 0 0 var(--ds-space-xs);
}
.ds-section-sub {
  font-size: var(--ds-text-body);
  color: var(--ds-text-secondary);
  max-width: var(--ds-measure);
  margin: 0 0 var(--ds-gap-heading);
}/* ---- 5.5 Quad card (Who I am / What I lead / What I deliver / Where I add value) */

.ds-quad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-md);
  margin-top: 0;
}
@media (min-width: 768px) { .ds-quad-grid { grid-template-columns: repeat(2, 1fr); } }
.ds-card {
  background: var(--ds-surface-card);
  border: var(--ds-line) solid var(--ds-border);
  padding: var(--ds-space-lg) var(--ds-space-lg);
}
.ds-card__title {
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-label-tracking);
  text-transform: uppercase;
  color: var(--ds-text-tertiary);
  margin: 0 0 var(--ds-space-sm);
}
.ds-card p {
  margin: 0;
  font-size: var(--ds-text-small);
  line-height: var(--ds-lh-loose);
  color: var(--ds-text-secondary);
}/* ---- 5.6 Process flow (Discover → Design → … → ∞ ) ----------------------- */

.ds-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-xs) var(--ds-space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}/* ---- 5.7 Stage card (01 Setup & Plan, 02 Research & Design, 03 Build & Optimise)
       Each stage has a number, a title, an objective and a checklist of activities
       plus a deliverables block. */

.ds-stage {
  display: grid;
  gap: var(--ds-space-md);
  padding: var(--ds-space-lg);
  background: var(--ds-surface-card);
  border: var(--ds-line) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}/* ---- 5.8 Scenario card (Scenario A / B) --------------------------------- */

.ds-scenario { padding: var(--ds-space-lg); border-left: var(--ds-bar) solid var(--ds-accent-blue); background: var(--ds-surface-card); border-radius: var(--ds-radius-md); }
.ds-tag {
  display: inline-block;
  font: var(--ds-weight-bold) var(--ds-text-caption)/var(--ds-lh-tight) var(--ds-font-sans);
  letter-spacing: var(--ds-label-tracking);
  text-transform: uppercase;
  padding: var(--ds-line-strong) var(--ds-space-xs);
  border: var(--ds-line) solid var(--ds-border);
  color: var(--ds-text-tertiary);
}/* ---- 5.9 Case study block (bp pulse / ASOS / Apple …) -------------------
       Header with tags + title, an optional journey strip, a text grid
       (Challenge · Role & Contribution · Solution · Outcomes) and a media strip. */

.ds-case {
  display: grid;
  gap: var(--ds-space-xl);
  padding-block: var(--ds-space-2xl);
  border-top: var(--ds-line) solid var(--ds-border);
}
.ds-case__tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); margin: 0 0 var(--ds-space-md); }
.ds-case__title {
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-weight-heavy);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-tracking-tight);
  margin: 0 0 var(--ds-space-xs);
}

.ds-sub-heading {
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-weight-heavy);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-tracking-tight);
  margin: var(--ds-space-xl) 0 var(--ds-space-lg);
}
/* ---- 5.10 Screenshot strip + device frames ------------------------------ */



.ds-screen {
  background: var(--ds-color-ink);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
  border: var(--ds-line) solid var(--ds-color-ink-line);
}
.ds-screen--phone {
  border-radius: var(--ds-radius-device-phone);
  border: var(--ds-rim) solid var(--ds-color-frame);
  max-width: var(--ds-tile);
  margin-inline: auto;
}


/* ---- 5.11 Sector list (Sustainability / News / Sports / Gaming / Hospitality) */

.ds-sectors { display: grid; gap: var(--ds-space-md); grid-template-columns: 1fr; }
/* ---- 5.12 Deliverables columns (Alignment / Delivery / Design / Patterns) */

.ds-cols { display: grid; gap: var(--ds-space-md); grid-template-columns: 1fr; }
/* ---- 5.13 Who I am / About block ---------------------------------------- */

.ds-about { display: grid; gap: var(--ds-space-xl); grid-template-columns: 1fr; }
/* ---- 5.14 Closing / contact CTA ----------------------------------------- */

.ds-cta { text-align: left; }/* ---- 5.15 Buttons -------------------------------------------------------- */

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ds-space-xs);
  min-height: var(--ds-touch);
  padding: 0 var(--ds-space-lg);
  font: var(--ds-weight-semibold) var(--ds-text-small)/var(--ds-lh-tight) var(--ds-font-sans);
  border-radius: var(--ds-radius-pill);
  border: var(--ds-line) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ds-duration-base) var(--ds-ease-standard), color var(--ds-duration-base) var(--ds-ease-standard), opacity var(--ds-duration-fast) var(--ds-ease-standard);
}
.ds-btn--primary:hover { opacity: var(--ds-opacity-hover); }/* ---- 5.16 Footer -------------------------------------------------------- */

.ds-footer {
  padding: var(--ds-connector) var(--ds-space-xl);
  border-top: var(--ds-line) solid var(--ds-color-ink-line);
  background: var(--ds-color-ink);
  color: var(--ds-text-tertiary);
  font-size: var(--ds-text-caption);
  line-height: var(--ds-lh-loose);
}
.ds-footer__inner { max-width: var(--ds-container-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); }
.ds-footer__meta p { margin: 0; }
.ds-footer__meta p:first-child { margin-bottom: var(--ds-tracking-wide); }
.ds-footer__links { display: flex; gap: var(--ds-icon); align-items: center; }
.ds-footer__links a { color: var(--ds-text-tertiary); font-weight: var(--ds-weight-medium); text-decoration: none; }
.ds-footer__links a:hover { text-decoration: underline; }
/* ---- 5.17 Scroll reveal (progressive; no JS dependency for visibility) -- */

.ds-reveal { opacity: var(--ds-opacity-full); transform: none; transition: opacity var(--ds-duration-slow) var(--ds-ease-out), transform var(--ds-duration-slow) var(--ds-ease-out); }
.js .ds-reveal--pending { opacity: var(--ds-opacity-none); transform: translateY(var(--ds-space-md)); }/* =========================================================================
   6. PROJECT PAGE COMPONENTS (portfolio v2)
   Tabs, scenario intro, accordions, design process tree, deliverables and
   status tags. Used by portfolio-v2.html.
   ========================================================================= */
/* Tabs (Select a Project) */

.ds-tabs {
  display: flex;
  gap: var(--ds-space-xs);
  overflow-x: auto;
  border-bottom: var(--ds-line) solid var(--ds-border);
  margin-bottom: var(--ds-space-xl);
  scrollbar-width: none;
}
@media (max-width: 767px) {
  .ds-tabs::before {
    content: "";
    flex: 0 0 var(--ds-tabs-edge-start, 0px);
  }
  .ds-tabs::after {
    content: "";
    flex: 0 0 var(--ds-tabs-edge-end, 0px);
  }
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: var(--ds-line-strong) solid transparent;
  padding: var(--ds-space-sm) var(--ds-space-md);
  min-height: var(--ds-touch);
  font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-tight) var(--ds-font-sans);
  color: var(--ds-text-tertiary);
  cursor: pointer;
  white-space: nowrap;
}
.ds-tab[aria-selected="true"] { color: var(--ds-text-primary); border-bottom-color: var(--ds-text-primary); }
.ds-tabpanel[hidden] { display: none; }/* Scenario intro */

.ds-tab-navigation {
  scroll-margin-top: calc(var(--ds-nav-height) + var(--ds-space-xl));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ds-space-md);
  margin-top: var(--ds-space-xl);
  padding-block: var(--ds-space-lg);
  border-top: var(--ds-line) solid var(--ds-border);
}
.ds-tab-navigation__button {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  appearance: none;
  background: none;
  border: 0;
  min-width: 0;
  min-height: var(--ds-touch);
  padding: var(--ds-space-sm) 0;
  font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-tight) var(--ds-font-sans);
  color: var(--ds-text-primary);
  cursor: pointer;
  text-align: left;
}
.ds-tab-navigation__button:hover { color: var(--ds-text-tertiary); }
.ds-tab-navigation__button--previous { grid-column: 1; justify-self: start; }
.ds-tab-navigation__button--next { grid-column: 2; justify-self: end; text-align: right; }
.ds-tab-navigation__button svg {
  width: var(--ds-icon);
  height: var(--ds-icon);
  flex-shrink: 0;
}

.ds-intro {
  padding: var(--ds-space-md) var(--ds-space-lg);
  margin-bottom: var(--ds-space-xl);
  background: var(--ds-color-white);
  border-radius: var(--ds-radius-md);
}
.ds-intro__title { font-weight: var(--ds-weight-semibold); margin: 0 0 var(--ds-space-2xs); }
.ds-intro p { margin: 0; color: var(--ds-text-secondary); }/* Journey chips */

.ds-journey {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-line-strong);
  list-style: none;
  padding: 0;
  margin: var(--ds-space-2xs) 0 0;
  font: var(--ds-weight-bold) var(--ds-text-caption)/var(--ds-lh-snug) var(--ds-font-sans);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-tertiary);
}
.ds-journey li + li::before { content: "→ "; color: var(--ds-border); }/* Status tag (evidence status, see Operating Guide) */

.ds-status {
  display: inline-block;
  font: var(--ds-weight-semibold) var(--ds-text-caption)/var(--ds-lh-tight) var(--ds-font-mono);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  padding: var(--ds-space-2xs) var(--ds-space-xs);
  border: var(--ds-line) solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-tertiary);
  white-space: nowrap;
}/* Results list (outcome plus status) */

.ds-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-sm); }
.ds-results li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ds-space-xs); color: var(--ds-text-secondary); }
.ds-results li > span:first-child { flex: 1 1 var(--ds-col); }/* Accordion (Design Process phases and template) */

/* Design process tree (nested activities and artifacts) */

.ds-tree { list-style: none; margin: 0; padding: 0; }
.ds-tree ul { list-style: none; margin: 0; padding: 0 0 0 var(--ds-space-md); border-left: var(--ds-line) solid var(--ds-border); }
.ds-tree li { padding: var(--ds-space-2xs) 0 var(--ds-space-2xs) var(--ds-space-sm); font-size: var(--ds-text-small); color: var(--ds-text-secondary); }
.ds-tree > li { padding-left: 0; font-weight: var(--ds-weight-semibold); color: var(--ds-text-primary); }
.ds-tree > li > ul { border-left: 0; padding-left: 0; }
.ds-tree > li > ul > li { font-weight: var(--ds-weight-medium); color: var(--ds-text-primary); }/* Deliverable card (one per phase, per scenario) */

.ds-deliverable {
  display: grid;
  gap: var(--ds-space-2xs);
  padding: var(--ds-space-md) var(--ds-space-lg);
  background: var(--ds-surface-card);
  border: var(--ds-line) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-card-shadow);
}
/* Paired cards (e.g. in scope / out of scope): one column on phone, side by side from tablet */
.ds-pair { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-md); margin-top: var(--ds-space-md); }
.ds-pair > .ds-card { padding: var(--ds-space-md); }
.ds-pair .ds-bullets li { font-size: var(--ds-text-small); line-height: var(--ds-lh-loose); color: var(--ds-text-secondary); }
@media (min-width: 640px) { .ds-pair { grid-template-columns: repeat(2, 1fr); } }
/* Principles: title row, then the three cards in their own row */
.ds-principle-set { min-width: 0; }
/* Two-column deliverable tables (Horizon, Type, etc.): label column uses the label-column token */
.ds-deliverable .ds-table tr:has(> :first-child:nth-last-child(2)) > :first-child { width: var(--ds-label-col); }
.ds-principle-set > .ds-deliverable__name { margin: 0; }
.ds-principle-cards { margin-top: var(--ds-space-md); padding-top: var(--ds-space-md); display: grid; grid-auto-flow: column; grid-auto-columns: var(--ds-col); gap: var(--ds-space-md); overflow-x: auto; }
.ds-principle-cards > .ds-card { padding: var(--ds-space-md); }
@media (min-width: 1024px) { .ds-principle-cards { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); overflow-x: visible; } }
/* Question cards: one column on phone, two on tablet, four on desktop */
.ds-cards { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-md); margin-top: var(--ds-space-md); }
@media (min-width: 640px) { .ds-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ds-cards { grid-template-columns: repeat(4, 1fr); } }
.ds-deliverable__figure svg { display: block; width: var(--ds-flow-width); height: auto; margin: 0 auto; }
.ds-card .ds-deliverable__figure svg { width: var(--ds-full); }
@media (max-width: 767px) { .ds-table-wrap > svg { width: var(--ds-table-min-wide); max-width: none; } }
/* Dashboard example: chart in the first two columns, key metrics in the other two (four columns on desktop) */
.ds-dash { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-md); margin-top: var(--ds-space-md); }
.ds-dash__chart, .ds-dash__kpis { min-width: 0; }
.ds-dash__chart svg { display: block; width: var(--ds-full); height: auto; }
.ds-dash__chart button.ds-pill { appearance: none; cursor: pointer; }
.ds-dash__chart .ds-pills { max-width: var(--ds-full); margin: var(--ds-space-xs) 0 var(--ds-space-md); }
.ds-dash__chart .kpi__metric { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-subhead-lh) var(--ds-font-sans); color: var(--ds-text-secondary); margin: 0 0 var(--ds-space-xs); }
@media (min-width: 1024px) {
  .ds-dash { grid-template-columns: repeat(4, 1fr); }
  .ds-dash__chart, .ds-dash__kpis { grid-column: span 2; }
  .ds-dash__kpis .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.ds-card-q { display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-md); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-card); }
.ds-card-q__num { font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }
.ds-card-q__text { margin: 0; font-size: var(--ds-text-body); line-height: var(--ds-lh-body); color: var(--ds-text-primary); }
.ds-deliverable__name { font-weight: var(--ds-weight-semibold); margin: 0; }
.ds-deliverable p { margin: 0; color: var(--ds-text-secondary); font-size: var(--ds-text-small); line-height: var(--ds-lh-loose); }/* Gate line (exit question from the Operating Guide) */

/* Overview blocks (Scenario & Challenge etc.) */

.ds-overview-block { padding: var(--ds-space-lg) 0; border-top: var(--ds-line) solid var(--ds-border); }
.ds-overview-block:first-child { border-top: 0; padding-top: 0; }
.ds-overview-block__title {
  font: var(--ds-weight-bold) var(--ds-text-caption)/var(--ds-lh-tight) var(--ds-font-sans);
  letter-spacing: var(--ds-label-tracking);
  text-transform: uppercase;
  color: var(--ds-text-tertiary);
  margin: 0 0 var(--ds-space-xs);
}
.ds-overview-block__prompt { margin: 0 0 var(--ds-space-sm); font-size: var(--ds-text-small); color: var(--ds-text-tertiary); }
.ds-overview-block p { margin: 0; font-size: var(--ds-text-body); line-height: var(--ds-lh-loose); color: var(--ds-text-secondary); }

@media (max-width: 767px) {
  :root { --ds-space-section: var(--ds-space-2xl); }
}/* Stage timeline (ProductLoop pattern: dot, rail, number, gate) */

.ds-timeline { position: relative; display: flex; flex-direction: column; }
.ds-acc[open] > summary .tl-toggle::before { content: "−"; }
.tl-line p { margin: 0; font-size: var(--ds-text-small); line-height: var(--ds-lh-body); color: var(--ds-text-secondary); }/* Child cards on the stage timeline */


.tl-card .ds-tree > li { padding-top: var(--ds-line-strong); padding-bottom: var(--ds-line-strong); }/* Grandchild cards inside each child card (max 3 columns) */




.tl-subcard .ds-tree li { padding-top: var(--ds-space-2xs); padding-bottom: var(--ds-space-2xs); font-size: var(--ds-text-caption); }/* Principle cards (icon, title, statement) */

.ds-principles { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-md); margin-top: var(--ds-space-md); }
@media (min-width: 640px) { .ds-principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ds-principles { grid-template-columns: repeat(3, 1fr); } }
.ds-principle { background: var(--ds-surface-card); border: var(--ds-line) solid var(--ds-border); padding: var(--ds-card-pad); }
.ds-principle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-icon-box);
  height: var(--ds-icon-box);
  margin-bottom: var(--ds-space-md);
  color: var(--ds-text-primary);
}
.ds-principle__icon svg { width: var(--ds-icon); height: var(--ds-icon); fill: none; stroke: currentColor; stroke-width: var(--ds-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-principle__title { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-snug) var(--ds-font-sans); margin: 0 0 var(--ds-space-3xs); }
.ds-principle__text { margin: 0; font-size: var(--ds-text-body); line-height: var(--ds-lh-loose); color: var(--ds-text-secondary); }/* Statement text (Vision and Mission) */

.ds-card .ds-statement {
  margin: 0;
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-weight-heavy);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text-primary);
}/* Vision and Mission cards: equal padding on every side */

.ds-quad-grid .ds-card { padding: var(--ds-space-lg); }/* Section spacing: avoid doubled gaps between stacked sections */
/* Card style: shared 2px radius */

.ds-card,
.ds-principle,
.tl-card,
.tl-subcard,
.ds-deliverable,
.ds-intro { border-radius: var(--ds-radius-sm); }/* Scenario banner with icon (left) */

.ds-intro { display: flex; align-items: center; gap: var(--ds-space-md); }
.ds-intro__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-icon-box); height: var(--ds-icon-box); color: var(--ds-text-primary); }
.ds-intro__icon svg { width: var(--ds-icon); height: var(--ds-icon); fill: none; stroke: currentColor; stroke-width: var(--ds-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-intro__body { min-width: 0; }/* Scenario banner: more top and bottom padding */

.ds-intro { padding-top: var(--ds-space-xl); padding-bottom: var(--ds-space-xl); }/* Scenario banner text: same sizes as principle title and text */

.ds-intro .ds-intro__title { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-snug) var(--ds-font-sans); margin: 0 0 var(--ds-space-3xs); }
.ds-intro .ds-intro__body > p:last-child { font-size: var(--ds-text-body); line-height: var(--ds-lh-loose); }/* Overview prompts: same style as the banner title */

.ds-overview-block .ds-overview-block__prompt { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-snug) var(--ds-font-sans); color: var(--ds-text-secondary); margin: 0 0 var(--ds-space-3xs); }/* Overview description: two of three columns of the space */

.ds-overview-block p { max-width: var(--ds-share-prose); }/* Timeline: tag above title, question styled as a prompt */

.tl-titlewrap { display: flex; flex-direction: column; gap: var(--ds-space-3xs); min-width: 0; }
.tl-line p { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-snug) var(--ds-font-sans); color: var(--ds-text-secondary); }/* Timeline: stage number inline with the name */

.tl-num { color: var(--ds-text-tertiary); font-variant-numeric: tabular-nums; margin-right: var(--ds-space-3xs); }/* Child card titles: same style as the stage question */

.tl-card .tl-card__title { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-snug) var(--ds-font-sans); color: var(--ds-text-secondary); }/* Phase tags (DIVERGE, CONVERGE): same style as block labels */

/* Grandchild cards: icon and principle-title style; list as body text */


.tl-subcard .ds-tree li { font-size: var(--ds-text-body); line-height: var(--ds-lh-loose); color: var(--ds-text-secondary); font-weight: var(--ds-weight-regular); }/* Grandchild cards: icon above the title, as in principle cards */

/* Grandchild icons: circle outline */

/* Grandchild icons: Lucide stroke, glyph centred in the circle */

/* Grandchild icons: glyph 50% smaller, circle unchanged */

/* Gate text: same style as the stage question */
/* Gate text: body style; the "Gate:" label keeps its bold style */

/* Gate callout: banner style with warning icon, less padding */

/* Gate callout: label on its own row, text below */

/* Gate callout: transparent background, subtle border */

/* Gate icon: circle outline with white background, same as Design Process icons */

/* Collapsed phases: more space between them */

.tl-stage:has(details:not([open])):last-child { padding-bottom: 0; }/* Gate questions: one per line */

/* Buttons: aligned with the getaheadstart.org home page */

.ds-btn {
  gap: var(--ds-space-xs);
  min-height: 0;
  padding: var(--ds-space-sm) var(--ds-space-lg);
  font: var(--ds-weight-bold) var(--ds-text-small)/var(--ds-lh-tight) var(--ds-font-sans);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  border: var(--ds-line) solid var(--ds-color-ink);
  background: var(--ds-color-ink);
  color: var(--ds-color-paper);
}
.ds-btn:hover { opacity: var(--ds-opacity-hover); }
.ds-btn--primary { background: var(--ds-color-ink); color: var(--ds-color-paper); border-color: var(--ds-color-ink); }
.ds-btn--secondary { background: transparent; color: var(--ds-color-ink); border-color: var(--ds-color-ink); }
.ds-btn--secondary:hover { background: var(--ds-color-ink); color: var(--ds-color-paper); opacity: var(--ds-opacity-full); }
.ds-cta-stack { display: flex; flex-wrap: wrap; gap: var(--ds-space-sm); align-items: center; }
.ds-btn { border-radius: 0; }/* Lists inside cards: bullet points */

.tl-subcard .ds-tree,
.tl-subcard .ds-tree ul { list-style: disc; }
.tl-subcard .ds-tree li { display: list-item; margin-left: var(--ds-space-md); padding-left: var(--ds-line-strong); }
.tl-subcard .ds-tree ul { padding-left: var(--ds-space-md); }/* Next Steps text: same style as principle descriptions */

.ds-cta .ds-section-sub { font-size: var(--ds-text-body); line-height: var(--ds-lh-loose); color: var(--ds-text-secondary); font-weight: var(--ds-weight-regular); }/* Hero: double diamond diagram on the light page */

.ds-hero--diagram { display: block; min-height: 0; background: var(--ds-surface-page); color: var(--ds-text-primary); overflow: visible; padding-top: var(--ds-space-section); padding-bottom: var(--ds-space-section); }
.ds-hero--diagram .ds-hero__content { padding-bottom: 0; }
.ds-hero--diagram .ds-hero__eyebrow { color: var(--ds-text-tertiary); }
.ds-hero--diagram .ds-hero__sub { color: var(--ds-text-secondary); opacity: var(--ds-opacity-full); }
.ds-hero__figure { margin: var(--ds-gap-figure) 0 0; }
.ds-diagram { display: block; width: var(--ds-full); height: auto; }/* Hero eyebrow: same style as block labels */

.ds-hero__eyebrow { font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }/* Grandchild cards: space between title and bullet list */
/* Accordion toggle: larger plus and minus */

/* Design Process spacing: less cramped at every level */



/* Tabs: sticky under the nav while scrolling */

.ds-tabs--section { margin-top: var(--ds-space-xl); }
.ds-tabs { position: sticky; top: var(--ds-nav-height); z-index: var(--ds-z-sticky); background: var(--ds-surface-alt); padding-top: var(--ds-space-xs); }/* Stage headers: sticky below the nav and tabs while scrolling */
/* Stage headers: more space above the DIVERGE / CONVERGE label */

/* Design Process row: heading with Show all / Hide all switch */

.tl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-md); margin: var(--ds-space-xl) 0 var(--ds-space-lg); }
.tl-toolbar .ds-sub-heading { margin: 0; }
.tl-switch {
  appearance: none;
  min-height: var(--ds-space-xl);
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border: var(--ds-line) solid var(--ds-color-ink);
  background: transparent;
  color: var(--ds-color-ink);
  font: var(--ds-weight-bold) var(--ds-text-caption)/var(--ds-lh-tight) var(--ds-font-sans);
  letter-spacing: var(--ds-label-tracking);
  text-transform: uppercase;
  cursor: pointer;
}
.tl-switch:focus-visible { outline: var(--ds-focus); outline-offset: var(--ds-bar); }/* Show all / Hide all as a toggle switch */

.tl-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  min-height: var(--ds-space-xl);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-text-primary);
  font: var(--ds-weight-bold) var(--ds-text-caption)/var(--ds-lh-tight) var(--ds-font-sans);
  letter-spacing: var(--ds-label-tracking);
  text-transform: uppercase;
  cursor: pointer;
}
.tl-switch:hover { background: transparent; color: var(--ds-text-primary); opacity: var(--ds-opacity-hover); }
.tl-switch-track {
  position: relative;
  width: var(--ds-space-xl);
  height: var(--ds-icon);
  border: var(--ds-line) solid var(--ds-color-ink);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-page);
  transition: background var(--ds-duration-fast) var(--ds-ease-standard);
}
.tl-switch-knob {
  position: absolute;
  top: var(--ds-line-strong);
  left: var(--ds-line-strong);
  width: var(--ds-space-md);
  height: var(--ds-space-md);
  border-radius: var(--ds-half);
  background: var(--ds-color-ink);
  transition: transform var(--ds-duration-fast) var(--ds-ease-standard);
}
.tl-switch[aria-checked="true"] .tl-switch-track { background: var(--ds-color-ink); }
.tl-switch[aria-checked="true"] .tl-switch-knob { background: var(--ds-color-paper); transform: translateX(var(--ds-space-md)); }/* Show all / Hide all: label on the left of the switch */

.tl-switch { flex-direction: row-reverse; }/* Design Process row: whole row toggles all phases */

.tl-toolbar { cursor: pointer; user-select: none; }/* Hero photo (sketches) and framework figure under Principles */

.ds-hero__figure img { display: block; width: var(--ds-full); height: auto; }
.ds-framework .ds-diagram { display: block; width: var(--ds-full); height: auto; }/* Hero to Summary spacing; framework spacing equal top and bottom */

.ds-hero--diagram { padding-bottom: 0; }
.ds-hero + .ds-section { padding-top: var(--ds-space-2xl); }/* Framework diagram at 80% of its previous width, centred */
/* Framework: more space above it, between the principles and the diagram */

.ds-framework { margin-top: var(--ds-section-gap); }/* Hero photo: 4px corner radius */

.ds-hero__figure img { border-radius: var(--ds-radius-sm); }/* Framework: equal space above and below (112px each) */
/* Framework: remove the extra bottom space (section padding handles it) */
/* Contrast and mobile type: darker tertiary text, larger small sizes on phones */


@media (max-width: 767px) {
  
}/* Principles on phones: title larger than its description */

@media (max-width: 767px) {
  .ds-principle__title { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
}/* Phones: titles larger than the text they head (same rule as principles) */

@media (max-width: 767px) {
  .ds-intro .ds-intro__title { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
  .tl-card .tl-card__title { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
  .tl-subcard .tl-subcard__title { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
  .ds-deliverable .ds-deliverable__name { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
}/* Phones: Overview prompts larger than the body text */

@media (max-width: 767px) {
  .ds-overview-block .ds-overview-block__prompt { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
}/* Phones: stage questions match the other prompts */

@media (max-width: 767px) {
  .tl-line p { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
}/* Grandchild cards: click or tap to show a tick on a black icon */


.tl-subcard:focus-visible { outline: var(--ds-focus); outline-offset: var(--ds-bar); }/* Framework: equal space above and below on every screen size */

.ds-section:has(.ds-framework) { padding-bottom: 0; }/* Principle icons: circle frame, black background, white icon */

.ds-principle__icon { border: var(--ds-line) solid var(--ds-color-ink); border-radius: var(--ds-half); background: var(--ds-color-ink); color: var(--ds-color-paper); }/* Tick state: green background with a dark tick (green is light) */

.tl-subcard__icon.is-ticked { background: var(--ds-accent-green); border-color: var(--ds-accent-green); color: var(--ds-color-ink); }/* Principle icons: optical centring of glyphs that sit off-centre */

.ds-principle:nth-child(2) .ds-principle__icon svg { transform: translateY(var(--ds-optical-md)); }
.ds-principle:nth-child(4) .ds-principle__icon svg { transform: translateY(var(--ds-optical-lg)); }
.ds-principle:nth-child(7) .ds-principle__icon svg { transform: translate(var(--ds-optical-sm), var(--ds-optical-sm)); }/* Double diamond: black backdrop, zoom button, fullscreen viewer */

.ds-framework { position: relative; background: var(--ds-color-black); border-radius: var(--ds-radius-sm); padding: var(--ds-space-md); cursor: zoom-in; }
.ds-framework__zoom {
  position: absolute; top: var(--ds-space-sm); left: var(--ds-space-sm); z-index: var(--ds-z-base);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ds-space-xl); height: var(--ds-space-xl); padding: 0; border: var(--ds-line) solid var(--ds-color-white); border-radius: var(--ds-radius-sm);
  background: transparent; color: var(--ds-color-white); cursor: pointer;
}
.ds-framework__zoom svg { width: var(--ds-icon); height: var(--ds-icon); fill: none; stroke: currentColor; stroke-width: var(--ds-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-lightbox {
  position: fixed; inset: 0; z-index: var(--ds-z-modal); background: var(--ds-color-black);
  overflow: auto; touch-action: pinch-zoom; cursor: zoom-out;
}
.ds-lightbox__close {
  position: fixed; top: var(--ds-space-md); left: var(--ds-space-md); z-index: var(--ds-z-modal);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ds-space-xl); height: var(--ds-space-xl); padding: 0; border: var(--ds-line) solid var(--ds-color-white); border-radius: var(--ds-radius-sm);
  background: var(--ds-color-black); color: var(--ds-color-white); cursor: pointer;
}
.ds-lightbox__close svg { width: var(--ds-icon); height: var(--ds-icon); fill: none; stroke: currentColor; stroke-width: var(--ds-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-lightbox__stage { min-height: var(--ds-full); display: flex; align-items: center; justify-content: center; padding: var(--ds-space-2xl) var(--ds-space-md) var(--ds-space-md); box-sizing: border-box; }
.ds-lightbox__stage svg { width: var(--ds-full); max-width: var(--ds-container-max); height: auto; display: block; }/* Section headings (Overview, Start: Design Process): larger */

.ds-sub-heading { font-size: var(--ds-text-h2); line-height: var(--ds-lh-tight); }/* Double diamond backdrop: same width as the hero image */

.ds-framework { width: var(--ds-full); margin: var(--ds-section-gap) 0; padding: 0; }
.ds-framework .ds-diagram { position: absolute; top: var(--ds-space-md); left: var(--ds-space-md); width: calc(var(--ds-full) - var(--ds-space-lg)); height: calc(var(--ds-full) - var(--ds-space-lg)); margin: 0; }/* Double diamond square: 1:1, within the page padding (full content width) */

/* Phones: smaller space above and below the double diamond (equal) */
@media (max-width: 767px) {
  .ds-framework { margin: var(--ds-space-2xl) 0; }
}/* Zoom button: same icon size as the card icons (24px glyph, 48px button) */

.ds-framework__zoom { width: var(--ds-icon-box); height: var(--ds-icon-box); }
.ds-framework__zoom svg { width: var(--ds-icon); height: var(--ds-icon); }/* Double diamond backdrop: 2:3 ratio */

.ds-framework { aspect-ratio: var(--ds-ratio-diagram); }/* Project titles: same size and weight as the Overview heading */

.ds-case__title { font-size: var(--ds-text-h2); font-weight: var(--ds-weight-heavy); line-height: var(--ds-lh-tight); }/* Compact toolkit cards on the project tabs (titles and icons only) */

/* Project subtitle and context block */

.ds-case__subtitle {
  margin: 0;
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-lh-loose);
  color: var(--ds-text-secondary);
}
.ds-context { margin: 0 0 var(--ds-space-lg); padding: var(--ds-space-md) var(--ds-space-lg); background: var(--ds-surface-card); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-radius-sm); }/* Context block: no white background (border kept) */

.ds-context { background: transparent; }/* Persona comparison table inside a deliverable card */

.ds-table-wrap { overflow-x: auto; margin-top: var(--ds-space-md); }
.ds-table { width: var(--ds-full); min-width: var(--ds-table-min); border-collapse: collapse; font-size: var(--ds-text-small); line-height: var(--ds-lh-body); }
.ds-table th, .ds-table td { text-align: left; vertical-align: top; padding: var(--ds-table-pad); border-top: var(--ds-line) solid var(--ds-border); color: var(--ds-text-secondary); }
.ds-table thead th { font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); border-top: 0; }
.ds-table tbody th { font-weight: var(--ds-weight-bold); color: var(--ds-text-primary); }/* Deliverable cards: name styled like the Frame card title (no label) */

.ds-deliverable .ds-deliverable__name { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-snug) var(--ds-font-sans); color: var(--ds-text-secondary); margin: 0 0 var(--ds-space-sm); }
@media (max-width: 767px) {
  .ds-deliverable .ds-deliverable__name { font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-snug) var(--ds-font-sans); }
}/* Stacked deliverable cards: same spacing as the other cards */
/* Child cards: background at 50% opacity (phases 01 to 04) */

/* One card gap across the whole page */

:root { }
.tl-cards,
.tl-subcards,
.tl-compact,
.tl-compact .tl-subcards,
.ds-principles,
.ds-quad-grid { gap: var(--ds-space-lg); }
.ds-deliverable + .ds-deliverable { margin-top: var(--ds-space-lg); }/* Child card background: 50% only on New and Existing tabs */

#panel-overview .tl-card { background: var(--ds-surface-card); }
#panel-new .tl-card,
#panel-existing .tl-card { background: var(--ds-surface-glass); }/* Review & Sign-Off: same gap above it as between cards */

/* New and Existing tabs: card padding and spacing match the Toolkit tab */

/* Deliverable cards: same padding as the child cards */

.ds-deliverable { padding: var(--ds-card-pad); }/* Compact cards: same gap below the deliverable cards as between cards */

/* Design sprint pills under the project title */

.ds-pills { display: flex; flex-wrap: wrap; gap: var(--ds-space-sm); margin: 0 0 var(--ds-space-lg); }
.ds-pill { display: inline-flex; align-items: center; min-height: var(--ds-touch); padding: var(--ds-space-xs) var(--ds-space-md); border: var(--ds-line) solid var(--ds-color-ink); border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-color-ink); font: var(--ds-weight-medium) var(--ds-text-body)/var(--ds-lh-tight) var(--ds-font-sans); }
.ds-pill--active { background: var(--ds-color-ink); color: var(--ds-color-paper); }/* Sprint pills: space between the project title and the pills */
/* Sprint pills: two of three columns (matches the Overview description) */
.ds-pills {
 margin-top: var(--ds-space-md);
 max-width: var(--ds-share-prose); }
/* Context table: wraps within the card on phones (no sideways scroll) */

.ds-context .ds-table th, .ds-context .ds-table td { word-break: break-word; }/* Context table: Statement row at body text size (matches Scenario text) */
/* Sprint pills: same text size as the Overview prompts */

.ds-pill { font-size: var(--ds-text-subhead); }
@media (max-width: 767px) { .ds-pill { font-size: var(--ds-text-h4); } }/* Sprint pills: bold, to match the scenario title */

.ds-pill { font-weight: var(--ds-weight-bold); }/* Context table: all rows at the Statement size */

.ds-context .ds-table td { font-size: var(--ds-text-body); line-height: var(--ds-lh-loose); }/* Context table body rows: description style (16px, regular, secondary) */

.ds-context .ds-table tbody th,
.ds-context .ds-table tbody td {
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-lh-loose);
  color: var(--ds-text-secondary);
}/* Context table: keep the size change, restore the previous style */

.ds-context .ds-table tbody th { font-weight: var(--ds-weight-bold); color: var(--ds-text-primary); }/* Key performance metrics: six-column grid */

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-lg); margin-top: var(--ds-space-md); }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi__outcome { margin: 0 0 var(--ds-space-3xs); font: var(--ds-weight-bold) var(--ds-text-body)/var(--ds-lh-snug) var(--ds-font-sans); color: var(--ds-text-primary); }
.kpi__metric { margin: 0 0 var(--ds-space-sm); font-size: var(--ds-text-small); line-height: var(--ds-lh-body); color: var(--ds-text-secondary); }
.kpi__values { display: grid; gap: var(--ds-space-2xs); }
.kpi__value--result { font-size: var(--ds-text-body); letter-spacing: 0; text-transform: none; font-weight: var(--ds-weight-bold); color: var(--ds-text-primary); }/* KPI tiles: no borders; metric set large */
/* KPI metric: size and weight set as separate properties */
.kpi__metric {
 font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-tight) var(--ds-font-sans);
 letter-spacing: var(--ds-tracking-tight);
 color: var(--ds-text-primary);
 margin: 0 0 var(--ds-space-md);
 font-family: var(--ds-font-sans); font-size: var(--ds-text-h4); font-weight: var(--ds-weight-bold); line-height: var(--ds-lh-tight); }
/* KPI tiles: rules win over the Overview paragraph rule */
/* KPI tiles: value and change */

.kpi .kpi__change { font-size: var(--ds-text-small); letter-spacing: 0; text-transform: none; font-weight: var(--ds-weight-bold); color: var(--ds-text-secondary); }/* KPI tiles: value is the largest type; other labels balanced */

.kpi .kpi__value--result { font-size: var(--ds-text-h2-lg); font-weight: var(--ds-weight-heavy); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-tracking-tight); color: var(--ds-text-primary); text-transform: none; }
.kpi .kpi__outcome { font-size: var(--ds-text-small); font-weight: var(--ds-weight-bold); line-height: var(--ds-lh-snug); margin: 0 0 var(--ds-space-xs); }
.kpi .kpi__metric { font-size: var(--ds-text-small); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); margin: 0 0 var(--ds-space-md); color: var(--ds-text-secondary); }
.kpi .kpi__change { font-size: var(--ds-text-small); font-weight: var(--ds-weight-bold); color: var(--ds-text-secondary); }/* KPI tiles: value moves to the top of each tile */
.kpi {
 min-width: 0;
 padding: var(--ds-space-md) var(--ds-space-md);
 background: var(--ds-surface-card);
 border: var(--ds-line) solid var(--ds-border);
 border-radius: var(--ds-radius-sm);
 border: 0;
 display: flex; flex-direction: column; }

.kpi .kpi__values { order: -1; margin-bottom: var(--ds-space-sm); }/* KPI grid: four-column system on desktop */

@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }/* KPI labels: same style as persona row headers (Team Supervisor) */

.kpi .kpi__outcome { font-size: var(--ds-text-small); font-weight: var(--ds-weight-bold); line-height: var(--ds-lh-body); color: var(--ds-text-primary); }/* Deliverable figure: experience map image */

.ds-deliverable__figure { margin: var(--ds-space-md) 0 0; } .ds-deliverable__figure { min-width: 0; }
.ds-deliverable__figure img { display: block; width: var(--ds-full); height: auto; border-radius: var(--ds-radius-sm); }
.ds-deliverable__figure .ds-screen__display img, .ds-deliverable__figure .ds-screen__chrome img { border-radius: 0; }/* Serif accent: research quotes */

:root { --ds-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; }
.ds-quotes { display: grid; gap: var(--ds-space-lg); margin-top: var(--ds-space-md); }
.ds-quote { margin: 0; padding: 0; }
.ds-quote__text { margin: 0 0 var(--ds-space-xs); font-family: var(--ds-font-serif); font-size: var(--ds-text-subhead); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-body); color: var(--ds-text-primary); }
.ds-quote__source { font-family: var(--ds-font-sans); font-size: var(--ds-text-small); font-weight: var(--ds-weight-bold); color: var(--ds-text-secondary); }
.ds-quote__source::before { content: "— "; }/* Research quotes: size set above the deliverable text rule */

@media (min-width: 1024px) { .ds-deliverable .ds-quote__text { font-size: var(--ds-text-quote); } }/* Research quotes: larger serif */

.ds-deliverable .ds-quote__text { font-size: var(--ds-text-quote); line-height: var(--ds-lh-snug); }
@media (min-width: 1024px) { .ds-deliverable .ds-quote__text { font-size: var(--ds-text-display); line-height: var(--ds-lh-snug); } }/* Research quotes: two-column system */

@media (min-width: 640px) { .ds-quotes { grid-template-columns: repeat(2, 1fr); } }/* Research quotes: right padding on each column */

@media (min-width: 640px) { .ds-quotes .ds-quote { padding-right: var(--ds-space-lg); } }/* Research quote sources: same style as table header row */

.ds-deliverable .ds-quote__source { font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }
.ds-deliverable .ds-quote__source::before { content: none; }/* Research quotes: more space between quote and source */
/* Phase content: image prompts and success metric lists */

.ds-image-prompt { border-style: dashed; }
.ds-bullets { margin: var(--ds-space-md) 0 0; padding-left: var(--ds-space-md); font-size: var(--ds-text-body); line-height: var(--ds-lh-body); color: var(--ds-text-secondary); }
.ds-bullets li + li { margin-top: var(--ds-space-xs); }/* Research quotes: heavier serif weight */
.ds-deliverable .ds-quote__text {
 margin-bottom: var(--ds-space-lg);
 font-weight: var(--ds-weight-semibold); }
/* Compact cards: icon beside the title, smaller tiles */

.tl-compact .tl-subcard__head { flex-direction: row; align-items: center; gap: var(--ds-space-sm); }/* Compact cards: icon and title centred in the tile */
/* Compact cards: vertical centring only (horizontal stays left) */

/* Closing CTAs: stacked on desktop */

@media (min-width: 1024px) { .ds-cta-stack { flex-direction: column; align-items: flex-start; } }/* KPI labels: same style as table header labels (TYPE, STATEMENT) */

.kpi .kpi__outcome { font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }/* KPI metric: same style as the overview prompt */

.kpi .kpi__metric { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-subhead-lh) var(--ds-font-sans); color: var(--ds-text-secondary); margin: 0 0 var(--ds-space-3xs); }
@media (min-width: 1024px) { .kpi .kpi__metric { font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-subhead-lh) var(--ds-font-sans); } }/* Service map: table, faces, platform and system rows */

.ds-servicemap-wrap { margin-top: var(--ds-space-md); }
.ds-servicemap { min-width: var(--ds-table-min-wide); font-size: var(--ds-text-small); line-height: var(--ds-lh-body); }
.ds-servicemap th, .ds-servicemap td { vertical-align: top; }
.ds-servicemap tbody th { position: sticky; left: 0; z-index: var(--ds-z-base); background: var(--ds-surface-card); width: var(--ds-label-col); font-weight: var(--ds-weight-bold); color: var(--ds-text-primary); }
.ds-servicemap thead th:first-child { position: sticky; left: 0; z-index: var(--ds-z-base); background: var(--ds-surface-card); }
.ds-servicemap__group th { background: var(--ds-surface-muted); font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }
.ds-servicemap__mood { display: flex; align-items: flex-start; gap: var(--ds-space-xs); }
.ds-face { flex: 0 0 auto; display: inline-flex; width: var(--ds-icon); height: var(--ds-icon); }
.ds-face svg { width: var(--ds-icon); height: var(--ds-icon); fill: none; stroke: currentColor; stroke-width: var(--ds-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-face--happy { color: var(--ds-accent-happy); }
.ds-face--sad { color: var(--ds-accent-red); }
.ds-face--neutral { color: var(--ds-text-tertiary); }
.ds-servicemap__chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.ds-servicemap__chip { display: inline-block; padding: var(--ds-space-2xs) var(--ds-space-sm); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-radius-pill); font-size: var(--ds-text-caption); color: var(--ds-text-secondary); }
.ds-servicemap__note { margin: var(--ds-space-sm) 0 0; font-size: var(--ds-text-caption); color: var(--ds-text-tertiary); }/* Service map: group labels stay fixed when scrolled sideways */

.ds-servicemap__label { position: sticky; left: 0; z-index: var(--ds-z-base); display: inline-block; }/* Research insights: three-column system on desktop */

@media (min-width: 1024px) { .ds-quotes { grid-template-columns: repeat(3, 1fr); } }/* Project overview label: same style as the block titles */

.ds-overview-label { margin: var(--ds-space-md) 0 var(--ds-space-xs); font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }/* Small uppercase labels: one pattern across the page */

.ds-overview-label,
.ds-overview-block .ds-overview-block__title,
.kpi .kpi__outcome,
.ds-deliverable .ds-quote__source,
.ds-table thead th,
.ds-servicemap .ds-servicemap__label {
  font: var(--ds-weight-bold) var(--ds-text-caption)/var(--ds-lh-snug) var(--ds-font-sans);
  letter-spacing: var(--ds-label-tracking);
  text-transform: uppercase;
  color: var(--ds-text-tertiary);
}/* Research insights: 2.5-column system on desktop */

@media (min-width: 1024px) {
  .ds-quotes { grid-template-columns: repeat(4, 1fr); }
  .ds-quotes .ds-quote { grid-column: span 2; }
}/* Screen frames: component tokens and rules */
/* Browser and phone frames for project screenshots. Phone widths use the first  */
/* values; desktop (1024px and up) overrides the tokens in one place.             */

:root {
  /* Mobile frames */
  /* Device frames. Mobile values (phones) and desktop values (1024px and up). */
  --ds-frame-desktop-pad: 6px 5px;
  --ds-frame-desktop-screen-radius: 26px;
  --ds-frame-phone-columns: 3;
  --ds-frame-mobile-radius: var(--ds-radius-device-phone);  /* Mobile phone frame outer radius (scales with the screen). */
  --ds-frame-mobile-pad: var(--ds-frame-desktop-pad);  /* Mobile phone frame bezel padding (scales with the screen). */
  --ds-frame-mobile-screen-radius: var(--ds-frame-desktop-screen-radius);  /* Mobile phone screen radius (scales with the screen). */
  --ds-frame-mobile-width: 200px;  /* Mobile phone frame width. */
  --ds-frame-browser-border: var(--ds-line) solid var(--ds-border);  /* Browser frame border (line width and colour). */
  --ds-frame-browser-radius: var(--ds-radius-sm);  /* Browser frame radius (alias: mobile or desktop value). */
  --ds-frame-phone-radius: var(--ds-frame-mobile-radius);  /* Phone frame outer radius (alias: mobile or desktop value). */
  --ds-frame-phone-pad: var(--ds-frame-mobile-pad);  /* Phone frame bezel padding (alias: mobile or desktop value). */
  --ds-frame-phone-screen-radius: var(--ds-frame-mobile-screen-radius);  /* Phone screen radius (alias: mobile or desktop value). */
  --ds-frame-phone-width: var(--ds-frame-mobile-width);  /* Phone frame width (alias: mobile or desktop value). */
}
@media (min-width: 1024px) {
  :root {
    /* Desktop frames */
    --ds-frame-desktop-browser-radius: 6px;  /* Desktop browser frame radius. */
    --ds-frame-desktop-pad: 6px 5px;  /* Desktop phone frame bezel padding. */
    --ds-frame-desktop-screen-radius: 26px;  /* Desktop phone screen radius (26px). */
    --ds-frame-desktop-width: auto;  /* Desktop phone frame width (auto, fills the column). */
    --ds-frame-browser-radius: var(--ds-frame-desktop-browser-radius);  /* Browser frame radius (alias: mobile or desktop value). */
    --ds-frame-phone-radius: var(--ds-radius-device-phone);  /* Phone frame outer radius (alias: mobile or desktop value). */
    --ds-frame-phone-pad: var(--ds-frame-desktop-pad);  /* Phone frame bezel padding (alias: mobile or desktop value). */
    --ds-frame-phone-screen-radius: var(--ds-frame-desktop-screen-radius);  /* Phone screen radius (alias: mobile or desktop value). */
    --ds-frame-phone-width: var(--ds-frame-desktop-width);  /* Phone frame width (alias: mobile or desktop value). */
  }
}/* Layout */

.ds-shots { display: grid; gap: var(--ds-space-lg); margin: var(--ds-space-lg) 0; }
.ds-shots__label { margin: 0 0 var(--ds-space-sm); font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }
.ds-shots__web { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--ds-space-lg); }
.ds-shots__web .ds-screen--full { grid-column: 1 / -1; margin-inline: var(--ds-space-md); }
@media (max-width: 767px) {
  .ds-shots__web .ds-screen--full { margin-inline: 0; }
}
.ds-screen--mono .ds-screen__display img { filter: var(--ds-filter-mono); }
.ds-shots__mobile { display: flex; flex-wrap: wrap; gap: var(--ds-space-lg); }
@media (min-width: 640px) { .ds-shots__web { grid-template-columns: repeat(1, 1fr); } }
@media (min-width: 1024px) {
}/* Shared screen */

.ds-screen { margin: 0; }
.ds-screen__display { overflow: hidden; background: var(--ds-surface-muted); }
.ds-screen__display img { display: block; width: var(--ds-full); height: auto; }/* Browser frame: a thin border around the screenshot */

.ds-screen--browser { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ds-screen--browser::before { display: none; }
.ds-screen--browser .ds-screen__display { border: var(--ds-frame-browser-border); border-radius: var(--ds-frame-browser-radius); background: transparent; }
/* Browser chrome: the title bar artwork from the Platform browser screenshots, reused above the image */
.ds-screen--chrome .ds-screen__chrome { overflow: hidden; border-radius: var(--ds-frame-browser-radius) var(--ds-frame-browser-radius) 0 0; }
.ds-screen--chrome .ds-screen__chrome img { display: block; width: var(--ds-full); height: auto; }
.ds-screen--chrome .ds-screen__display { border-top: 0; border-radius: 0 0 var(--ds-frame-browser-radius) var(--ds-frame-browser-radius); }/* Phone frame: solid bezel, rounded screen */

.ds-screen--phone { width: var(--ds-frame-phone-width); padding: var(--ds-frame-phone-pad); border: 0; border-radius: var(--ds-frame-phone-radius); background: var(--ds-color-ink); box-shadow: none; }
.ds-screen--phone .ds-screen__display { height: auto; border-radius: var(--ds-frame-phone-screen-radius); clip-path: inset(0 round var(--ds-frame-phone-screen-radius)); }
.ds-screen--phone .ds-screen__display img { height: auto; object-fit: unset; border-radius: var(--ds-frame-phone-screen-radius); }/* Project highlights: two rows, each a continuous slow loop */

:root { --ds-marquee-duration: 720s; --ds-marquee-tile: var(--ds-tile); --ds-marquee-gap: var(--ds-space-lg); }
@media (min-width: 1024px) { :root { --ds-marquee-tile: var(--ds-col); } }
.ds-marquee { display: flex; flex-direction: column; gap: var(--ds-marquee-gap); margin-top: var(--ds-space-lg); }
.ds-marquee__row { overflow: hidden; }
.ds-marquee__set { display: flex; flex-shrink: 0; gap: var(--ds-marquee-gap); }
.ds-marquee__track { --ds-marquee-offset: calc(var(--ds-space-xs) * var(--ds-opacity-none)); display: flex; gap: var(--ds-marquee-gap); width: max-content; transform: translateX(var(--ds-marquee-offset)); }
.ds-marquee__track--reverse { animation-direction: reverse; }
.ds-marquee:hover .ds-marquee__track { animation-play-state: paused; }
.ds-marquee__item { flex: 0 0 var(--ds-marquee-tile); display: block; border-radius: var(--ds-radius-md); overflow: hidden; border: var(--ds-line) solid var(--ds-border); background: var(--ds-surface-muted); }
.ds-marquee__item img { display: block; width: var(--ds-full); aspect-ratio: var(--ds-ratio-photo); object-fit: cover; }
.ds-marquee__item:focus-visible { outline: var(--ds-focus); outline-offset: var(--ds-bar); }
@keyframes ds-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(var(--ds-marquee-shift)); } }
@media (prefers-reduced-motion: reduce) {
  .ds-marquee__row { overflow-x: auto; }
  .ds-marquee__track { animation: none; }
}/* Project highlights: slower loop (one cycle every 360s) */
/* Project highlights: slower loop (one cycle every 720s) */

:root { }/* Context table: same minimum width and sideways scroll as other tables */

.ds-context .ds-table { min-width: var(--ds-table-min); }/* Context table: cell text matches the Long Term Goal table */

.ds-context .ds-table tbody td,
.ds-context .ds-table tbody th { font-size: var(--ds-text-small); line-height: var(--ds-lh-body); }
.ds-context .ds-table tbody tr:first-child td { font-size: var(--ds-text-small); line-height: var(--ds-lh-body); }/* Context table: label column stays on one line */
.ds-context .ds-table tbody th {
 font-weight: var(--ds-weight-bold);
 white-space: nowrap; }
/* Sprint pills: text size matches the overview prompt */

.ds-pills .ds-pill { font-size: var(--ds-text-subhead); line-height: var(--ds-subhead-lh); }


/* ---- Subhead role: prompts, sprint pills, KPI metrics, deliverable names ------- */
@media (min-width: 1024px) { :root { --ds-subhead-lh: 1.3; } }
.ds-overview-block .ds-overview-block__prompt,
.ds-deliverable .ds-deliverable__name,
.kpi .kpi__metric,
.ds-pills .ds-pill { font-weight: var(--ds-weight-bold); font-size: var(--ds-text-subhead); line-height: var(--ds-subhead-lh); }

/* ---- Tables: one text size, padding and minimum width for every table ---------- */
.ds-table, .ds-context .ds-table { font-size: var(--ds-text-small); line-height: var(--ds-leading-body); min-width: var(--ds-table-min); }
.ds-table th, .ds-table td { padding: var(--ds-table-pad); }
.ds-servicemap { min-width: var(--ds-table-min-wide); }

/* ---- Cards: one surface for deliverable and principle cards ------------------ */
.ds-deliverable, .ds-principle { background: var(--ds-surface-card); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-radius-sm); padding: var(--ds-card-pad); }
.ds-deliverable { box-shadow: var(--ds-card-shadow); }

/* ---- KPI tiles and the context panel: padding from tokens ---------------------- */
.kpi { padding: var(--ds-tile-pad); }
.ds-context { padding: var(--ds-panel-pad); }

/* ---- Gate callout: one banner style with a warning icon -------------------------- */
.ds-gate { display: flex; align-items: center; gap: var(--ds-space-md); margin: var(--ds-space-lg) 0 0; padding: var(--ds-space-md) var(--ds-space-lg); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-radius-sm); background: transparent; font: var(--ds-weight-regular) var(--ds-text-body)/var(--ds-lh-loose) var(--ds-font-sans); color: var(--ds-text-secondary); }
.ds-gate strong { font: var(--ds-weight-bold) var(--ds-text-body)/var(--ds-lh-loose) var(--ds-font-sans); color: var(--ds-text-secondary); }
.ds-gate__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-icon-box); height: var(--ds-icon-box); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-half); background: var(--ds-color-white); color: var(--ds-text-primary); }
.ds-gate__icon svg { display: block; width: var(--ds-icon); height: var(--ds-icon); fill: none; stroke: currentColor; stroke-width: var(--ds-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ds-gate__text { min-width: 0; display: block; }
.ds-gate__body { display: flex; flex-direction: column; gap: var(--ds-space-2xs); min-width: 0; }
.ds-gate__body strong { display: block; }

/* ---- Accordion: one style for design-process phases ----------------------------- */
.ds-acc { border-top: var(--ds-line) solid var(--ds-border); }
.ds-acc:last-of-type { border-bottom: var(--ds-line) solid var(--ds-border); }
.ds-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-md); min-height: var(--ds-touch); padding: var(--ds-space-md) 0; cursor: pointer; font: var(--ds-weight-bold) var(--ds-text-h4)/var(--ds-lh-tight) var(--ds-font-sans); letter-spacing: var(--ds-tracking-tight); }
.ds-acc > summary::-webkit-details-marker { display: none; }
.ds-acc > summary::after { content: "+"; font-size: var(--ds-text-quote); font-weight: var(--ds-weight-regular); line-height: var(--ds-lh-tight); color: var(--ds-text-tertiary); }
.ds-acc[open] > summary::after { content: "−"; }
.ds-acc__meta { margin-left: auto; margin-right: var(--ds-space-md); font: var(--ds-label-font); letter-spacing: var(--ds-label-tracking); text-transform: uppercase; color: var(--ds-label-color); }
.ds-acc__body { padding: 0 0 var(--ds-space-lg); }
.tl-stage .ds-acc { border: 0; }
.tl-stage .ds-acc > summary { display: block; min-height: 0; padding: var(--ds-space-lg) 0 var(--ds-space-sm); cursor: pointer; list-style: none; position: sticky; top: var(--ds-stage-top); z-index: var(--ds-z-base); background: var(--ds-surface-alt); }
@media (max-width: 1024px) {
  .tl-stage .ds-acc > summary { z-index: var(--ds-z-sticky); }
}
.tl-stage .ds-acc > summary::-webkit-details-marker { display: none; }
.tl-stage .ds-acc > summary::after { content: none; }
.tl-stage .ds-acc__body { padding: var(--ds-space-xs) 0 var(--ds-space-xl); }
.tl-titlewrap .ds-acc__meta { margin: 0; }

/* ---- Timeline stage: markers, dots, headings and toggles ------------------------ */
.tl-stage { display: grid; grid-template-columns: var(--ds-icon) 1fr; gap: var(--ds-space-md); padding-bottom: var(--ds-space-xl); }
.tl-body { min-width: 0; }
.tl-stage:last-child { padding-bottom: 0; }
.tl-stage:has(details:not([open])) { padding-bottom: var(--ds-space-xl); }
.tl-stage:has(details:not([open])):last-child { padding-bottom: 0; }
.tl-mark { position: relative; display: flex; justify-content: center; }
.tl-mark::before { content: ""; position: absolute; top: var(--ds-space-xs); bottom: calc(-1 * clamp(var(--ds-space-sm), var(--ds-fluid), var(--ds-space-lg))); left: var(--ds-half); transform: translateX(var(--ds-center-shift)); width: var(--ds-line-strong); background: var(--ds-border); }
.tl-stage:last-child .tl-mark::before { display: none; }
.tl-dot { width: var(--ds-space-sm); height: var(--ds-space-sm); margin-top: var(--ds-bar); border-radius: var(--ds-half); border: var(--ds-line-strong) solid var(--ds-text-primary); background: var(--ds-surface-page); position: relative; z-index: var(--ds-z-base); }
.tl-stage:has(details[open]) .tl-dot { background: var(--ds-text-primary); }
.tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-md); }
.tl-title { font: var(--ds-weight-heavy) var(--ds-text-h4)/var(--ds-lh-tight) var(--ds-font-sans); letter-spacing: var(--ds-tracking-tight); }
.tl-toggle::before { content: "+"; font-size: var(--ds-text-display); line-height: var(--ds-lh-tight); font-weight: var(--ds-weight-regular); color: var(--ds-text-tertiary); }
.tl-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ds-space-2xs) var(--ds-space-md); margin-top: var(--ds-space-2xs); }

/* ---- Child cards on the stage timeline: one base card -------------------------- */
.tl-cards { display: grid; gap: var(--ds-space-lg); grid-template-columns: 1fr; }
.tl-card { position: relative; background: var(--ds-surface-glass); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-radius-sm); padding: var(--ds-card-pad); }
.tl-card::before { content: ""; position: absolute; left: calc(-1 * var(--ds-connector)); top: var(--ds-space-lg); width: var(--ds-connector); height: var(--ds-line); background: var(--ds-border); }
.tl-card__title { margin: 0 0 var(--ds-space-md); font: var(--ds-weight-bold) var(--ds-text-body)/var(--ds-lh-snug) var(--ds-font-sans); }

/* ---- Grandchild cards: one base card, icon and title -------------------------- */
.tl-subcards { display: grid; gap: var(--ds-space-lg); grid-template-columns: 1fr; margin-top: var(--ds-space-lg); }
@media (min-width: 640px) { .tl-subcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tl-subcards { grid-template-columns: repeat(4, 1fr); } }
.tl-subcard { border: var(--ds-line) solid var(--ds-border); background: var(--ds-surface-page); padding: var(--ds-space-md) var(--ds-space-md); min-width: 0; }
.tl-subcard__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 0; }
.tl-subcard__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--ds-icon-box); height: var(--ds-icon-box); margin-bottom: var(--ds-space-md); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-half); color: var(--ds-text-primary); }
.tl-subcard__icon svg { display: block; margin: auto; width: var(--ds-icon); height: var(--ds-icon); fill: none; stroke: currentColor; stroke-width: var(--ds-stroke); stroke-linecap: round; stroke-linejoin: round; }
.tl-subcard__title { margin: 0 0 var(--ds-space-sm); font: var(--ds-weight-bold) var(--ds-text-subhead)/var(--ds-lh-snug) var(--ds-font-sans); color: var(--ds-text-primary); }

/* ---- Compact tiles: one set of rules for project pills and tiles ----------------- */
.tl-compact { margin: var(--ds-space-lg) 0 0; gap: var(--ds-space-lg); }
.tl-compact .tl-subcards { margin-top: var(--ds-space-lg); gap: var(--ds-space-lg); }
.tl-compact .tl-card { padding: var(--ds-card-pad); }
.tl-compact .tl-card__title { margin-bottom: var(--ds-space-md); font-size: inherit; }
.tl-compact .tl-subcard { padding: var(--ds-space-sm); display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
.tl-compact .tl-subcard__head { margin-bottom: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--ds-space-sm); }
.tl-compact .tl-subcard__icon { width: var(--ds-icon-box-sm); height: var(--ds-icon-box-sm); margin-bottom: 0; flex: 0 0 var(--ds-icon-box-sm); }
.tl-compact .tl-subcard__title { margin-bottom: 0; font-size: inherit; text-align: left; }

/* Phone frames scale down with their column on narrow screens */
.ds-screen--phone { max-width: var(--ds-full); }


/* Mobile frame row: frames scale with the screen (2 per row on phones, 3 on tablets, 5 on desktop) */
.ds-shots__mobile { display: grid; grid-template-columns: repeat(var(--ds-frame-phone-columns), minmax(0, 1fr)); gap: var(--ds-space-lg); }
.ds-screen--phone { width: auto; max-width: none; }

/* Overview label to heading: same gap as block title to prompt */
.ds-overview-label + .ds-sub-heading { margin-top: 0; }

/* Service map on desktop: fits the content width, so no sideways scroll */
@media (min-width: 1024px) { .ds-servicemap { min-width: 0; } }

/* Compact table column headers on phones without shrinking their body rows. */
@media (max-width: 767px) {
  .ds-table thead th {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

/* Keep the project tabs directly under the selection hero and sticky through the panels. */
.ds-project-picker { padding-top: var(--ds-space-xs); }
.ds-project-picker .ds-tabs--section { margin-top: 0; }
.ds-hero--diagram .ds-hero__content { padding-bottom: var(--ds-space-xl); }

/* Toolkit context sits after the banner and before the master overview. */
.ds-toolkit-foundation { margin-top: 0; }
.ds-toolkit-intro { padding: 0 0 var(--ds-space-lg); }
.ds-toolkit-intro .ds-section-heading { margin-bottom: var(--ds-space-sm); }
.ds-toolkit-intro__sub { margin-bottom: 0; line-height: var(--ds-lh-loose); }
.ds-toolkit-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-lg);
  margin: 0 0 var(--ds-space-2xl);
}
.ds-toolkit-visuals > .ds-hero__figure,
.ds-toolkit-visuals > .ds-framework {
  width: var(--ds-full);
  aspect-ratio: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.ds-toolkit-visuals > .ds-hero__figure img {
  width: var(--ds-full);
  height: var(--ds-full);
  object-fit: cover;
}
.ds-toolkit-visuals > .ds-framework { padding: 0; }

/* Use the context block's bottom spacing as the single gap before screen examples. */
.ds-context + .ds-shots { margin-top: 0; }

/* Keep major content groups on the same vertical rhythm in all four tabs. */
.ds-tab-detail-stack {
  --ds-tab-detail-gap: var(--ds-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-tab-detail-gap);
}
.ds-tab-detail-stack > * { margin-block: 0; }
.ds-project-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-md);
}
.ds-copy-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ds-space-lg);
}
.ds-copy-column-grid > .ds-hero__eyebrow,
.ds-copy-column-grid > .ds-hero__title,
.ds-copy-column-grid > .ds-section-heading,
.ds-copy-column-grid > .ds-case__title { grid-column: 1 / -1; }
.ds-copy-column-grid > .ds-hero__sub,
.ds-copy-column-grid > .ds-toolkit-intro__sub,
.ds-copy-column-grid > .ds-case__subtitle { grid-column: 1; }
.ds-copy-column-grid > .ds-hero__sub,
.ds-copy-column-grid > .ds-toolkit-intro__sub { max-width: none; }
.ds-project-title-copy {
  row-gap: var(--ds-space-3xs);
  width: 100%;
}
.ds-project-title-copy > .ds-case__title,
.ds-project-title-copy > .ds-case__subtitle,
.ds-project-heading > .ds-pills { margin: 0; }
#panel-platform .ds-project-heading > .ds-pills { margin-top: var(--ds-space-xs); }
.ds-project-overview > .ds-overview-label { margin: 0 0 var(--ds-space-xs); }
.ds-project-overview > .ds-sub-heading { margin: 0 0 var(--ds-space-lg); }
#template-overview > .ds-sub-heading { margin-top: 0; }
#template-process > .tl-toolbar,
.ds-project-process > .tl-toolbar { margin: 0 0 var(--ds-space-lg); }
.ds-tab-detail-stack { --ds-tab-overview-gap: var(--ds-space-2xl); }
.ds-tab-detail-stack > #template-overview,
.ds-tab-detail-stack > .ds-project-overview {
  margin-top: calc(var(--ds-tab-overview-gap) - var(--ds-tab-detail-gap));
}
@media (max-width: 767px) {
  .ds-copy-column-grid { grid-template-columns: minmax(0, 1fr); }
}