/* Generated by _tools/build.py from canonical CSS and css/compositions.css. */
/* DynAmIc webfonts. Two faces, four weights, self-hosted, SIL Open Font License 1.1.
   DM Sans 400 and 700 for everything read; DM Mono 400 and 500 for everything measured.
   No 500, 600 or 800 sans exist in this system: a spec that asks for one renders as 400.
   Radikal (the face the logo was drawn from) is never loaded; the mark ships as outlined SVG. */
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* DynAmIc colour tokens. Three values, and the third one is an argument.
   Source of truth for the reasoning: auditos/01-agency/brand.md. */
:root {
  --af-ink: #111111;               /* text, headings, dark grounds, the cover ground */
  --af-paper: #FFFFFF;             /* every content ground. White, never cream or grey */
  --af-accent: #F5C518;            /* the one accent. Gold. 1.63:1 on paper, 11.58:1 on ink */
  --af-series-2: #009494;          /* chart series 2 ONLY. Never type, rules, tags, grounds */

  /* Ink tints. Grey is not a fourth colour: every grey is ink at reduced opacity. */
  --af-ink-68: rgba(17,17,17,0.68); /* secondary body, lead paragraphs. 6.6:1 */
  --af-ink-62: rgba(17,17,17,0.62); /* labels, captions, footers. 5.3:1, the floor for text */
  --af-ink-30: rgba(17,17,17,0.30); /* chart series 3 only. Never text */
  --af-ink-12: rgba(17,17,17,0.12); /* every rule and divider except the title rule. Never text */

  /* On ink grounds the hierarchy inverts to white at the same opacities. */
  --af-paper-68: rgba(255,255,255,0.68);
  --af-paper-62: rgba(255,255,255,0.62);
  --af-paper-12: rgba(255,255,255,0.12);

  /* Semantic aliases */
  --text-primary: var(--af-ink);
  --text-secondary: var(--af-ink-68);
  --text-muted: var(--af-ink-62);
  --text-inverse: var(--af-paper);
  --surface-base: var(--af-paper);
  --surface-cover: var(--af-ink);
  --surface-section: var(--af-accent);
  --border-default: var(--af-ink-12);
  --rule-title: var(--af-accent);
  --chart-series-1: var(--af-accent);
  --chart-series-2: var(--af-series-2);
  --chart-series-3: var(--af-ink-30);
  --chart-outline: rgba(17,17,17,0.55);  /* 1px outline on every gold fill over a light ground */
}
/* There is no red, no success/error/warning colour, no second accent, no lighter or darker gold.
   Severity is carried by ink weight, an ink-filled block, or the accent. */

/* DynAmIc type tokens. Sizes are for the 1920x1080 slide canvas; multiply by 0.71 for 1366x768. */
:root {
  --font-display: "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --af-font: var(--font-body);
  --af-mono: var(--font-mono);

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-mono: 400;
  --weight-mono-label: 500;

  /* Slide scale, 1920x1080 */
  --type-cover-title: 140px;     /* 700, -0.02em, white on ink or ink on gold */
  --type-cover-eyebrow: 20px;    /* DM Mono 500, 0.2em tracking, caps, gold on ink */
  --type-cover-desc: 30px;       /* 400, white at 70% */
  --type-slide-title: 64px;      /* 700, -0.03em, line-height 1.05, ink, one line */
  --type-section-label: 15px;    /* DM Mono 500, 0.16em, caps, ink 62 (gold on ink) */
  --type-display-number: 96px;   /* 700, -0.04em, gold, always with an ink unit or label */
  --type-display-unit: 36px;     /* 700, ink, never coloured, never larger than the number */
  --type-h3: 26px;               /* 700, -0.01em */
  --type-body: 22px;             /* 400, line-height 1.5, ink 68 or ink */
  --type-bullet: 21px;           /* 400, line-height 1.45, ink "+" marker */
  --type-small: 18px;            /* 400, line-height 1.45 */
  --type-caption: 15px;          /* DM Mono 400, 0.08em, caps, ink 62. Footers, slide numbers */
  --type-data: 18px;             /* DM Mono 400. Metrics, dates, sources, system names */

  --tracking-title: -0.03em;
  --tracking-display: -0.04em;
  --tracking-label: 0.16em;
  --tracking-caption: 0.08em;
}

/* DynAmIc web tokens, v1, September 2026.
   The screen sibling of layout.css and typography.css. Colours and faces come from colors.css
   and fonts.css unchanged: the web adds a fluid type scale, a spacing scale, breakpoints and a
   container, and changes nothing else. Reasons: 01-agency/brand.md. Rules: web-design-system.html.
   Stack-agnostic: every value here can be typed into Framer's breakpoints or used as CSS. */
:root {
  /* ---- Container and breakpoints. Three widths, matched to the render checks (390, 768, 1440). */
  --w-container: 1160px;               /* the same content width as the design-system documents */
  --w-gutter: clamp(20px, 3.5vw, 40px); /* side padding inside the container: 20 on a phone, 40 at desktop */
  --w-bp-phone: 640px;                 /* below: one column, the nav links fold into the menu, the hero stacks */
  --w-bp-tablet: 1024px;               /* between: two columns where the component has them */
  --w-col-gap: clamp(20px, 2.5vw, 40px); /* the twelve-column gap */

  /* ---- Spacing scale. 4px base. Named by size, not by role, so a role can move without a rename. */
  --w-s1: 4px;  --w-s2: 8px;  --w-s3: 12px;  --w-s4: 16px;  --w-s5: 24px;  --w-s6: 32px;
  --w-s7: 48px; --w-s8: 64px; --w-s9: 96px;  --w-s10: 128px; --w-s11: 160px;
  --w-section: clamp(64px, 6.095vw + 40.23px, 128px);   /* vertical padding of a section: 64 phone, 128 desktop */
  --w-hero-pad: clamp(72px, 6.857vw + 45.26px, 144px);  /* vertical padding of the hero band */
  --w-block-gap: clamp(40px, 2.286vw + 31.09px, 64px);  /* gap between a section header and its content */

  /* ---- Fluid type scale. Every step interpolates between 390 and 1440 wide, then locks.
     Two faces, four weights, unchanged. Sizes are the floor and ceiling of each clamp. */
  --w-display: clamp(40px, 3.048vw + 28.11px, 72px);   /* hero h1. 700, -0.03em, line-height 1.02. Ceiling 64 to 72 on 2026-09-20 (v1.2), the largest size the home title holds at three lines in its column */
  --w-h2:      clamp(30px, 2.095vw + 21.83px, 52px);   /* section title. 700, -0.025em, 1.1. Ceiling 44 to 52 on 2026-09-20 (v1.2) */
  --w-h3:      clamp(20px, 0.190vw + 19.26px, 22px);   /* step, card and summary titles. 700, -0.01em, 1.25 */
  --w-lead:    clamp(19px, 0.286vw + 17.89px, 22px);   /* lead paragraph. 400, 1.5, ink 68 */
  --w-body:    clamp(17px, 0.095vw + 16.63px, 18px);   /* body. 400, 1.6, ink 68 or ink */
  --w-quote:   clamp(20px, 0.381vw + 18.51px, 24px);   /* quote text. 400, 1.45, ink */
  --w-number:  clamp(56px, 1.524vw + 50.06px, 72px);   /* display number. 700, -0.04em, gold, ink label mandatory. 56 is the display floor */
  --w-small:   15px;                                    /* small sans: error sentences, attribution roles, footer lines. 400, 1.5 */
  --w-button:  16px;                                    /* button label. 700, 0 tracking */
  --w-label:   13px;                                    /* mono caps label. 500, 0.16em. The mono floor */
  --w-data:    14px;                                    /* mono data and captions. 400, 0.04em */
  --w-floor-sans: 15px;                                 /* nothing in DM Sans renders smaller */
  --w-floor-mono: 13px;                                 /* nothing in DM Mono renders smaller */

  --w-lh-tight: 1.02; --w-lh-heading: 1.1; --w-lh-h3: 1.25; --w-lh-body: 1.6; --w-lh-lead: 1.5; --w-lh-quote: 1.45;
  --w-tracking-display: -0.03em; --w-tracking-h2: -0.025em; --w-tracking-h3: -0.01em;
  --w-tracking-number: -0.04em; --w-tracking-label: 0.16em; --w-tracking-data: 0.04em;
  --w-measure: 62ch;                                    /* body paragraphs never run wider than this */

  /* ---- Controls. One focus rule on every ground: a 2px ring in the ground's text colour, 3px out. */
  --w-focus-w: 2px; --w-focus-offset: 3px;
  --w-underline: 1px; --w-underline-hover: 2px; --w-underline-offset: 0.18em;
  --w-button-h: 56px; --w-button-h-small: 44px; --w-button-pad: 0 28px; --w-button-pad-small: 0 18px;
  --w-field-h: 48px;
  --w-nav-h: 60px; --w-logo-nav: 28px;                 /* 28 + 2 x (0.58 x 28) = 60.5, rounded to 60 */
  --w-logo-footer: 28px;
  --w-media-aspect: 4 / 5;                              /* the hero media slot */
  --w-motion: 160ms;                                    /* functional transitions: underline weight, disclosure mark */
  --w-rise: 1.2s;                                       /* the light rising, once, on the nav mark */
}
@media (prefers-reduced-motion: reduce) {
  :root { --w-motion: 0ms; --w-rise: 0s; }
}

/* DynAmIc web components, v1.1, September 2026 (v1 2026-09-08, the four-page additions 2026-09-20).
   The eight components of the credibility page, the four the multi-page site added, and the primitives inside them, as CSS that
   any hand-built site can use directly and that Framer can re-express from the rendered cards.
   Tokens: ../tokens/web.css (imported by ../styles.css). Reasons: 01-agency/brand.md.
   Rules and measured contrast: ../../web-design-system.html.
   Everything here is square-cornered, shadowless, three colours, two faces, four weights. */

/* ---------- Page ground and prose ---------- */
.w-page { background: var(--af-paper); color: var(--af-ink); font-family: var(--af-font); -webkit-font-smoothing: antialiased; font-size: var(--w-body); line-height: var(--w-lh-body); }
.w-container { max-width: var(--w-container); margin: 0 auto; padding-left: var(--w-gutter); padding-right: var(--w-gutter); }
.w-section { padding-top: var(--w-section); padding-bottom: var(--w-section); }
.w-section + .w-section { border-top: 1px solid var(--af-ink-12); }
.w-label { font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-ink-62); }
.w-h2 { font-size: var(--w-h2); font-weight: 700; letter-spacing: var(--w-tracking-h2); line-height: var(--w-lh-heading); margin: 12px 0 0; }
.w-rule { width: 66px; height: 3px; background: var(--af-accent); margin-top: 18px; }   /* the one gold rule per section */
.w-h3 { font-size: var(--w-h3); font-weight: 700; letter-spacing: var(--w-tracking-h3); line-height: var(--w-lh-h3); margin: 0; }
.w-lead { font-size: var(--w-lead); line-height: var(--w-lh-lead); color: var(--af-ink-68); max-width: var(--w-measure); margin: 0; }
.w-body { font-size: var(--w-body); line-height: var(--w-lh-body); color: var(--af-ink-68); max-width: var(--w-measure); margin: 0; }
.w-body b, .w-lead b { color: var(--af-ink); font-weight: 700; }
.w-small { font-size: var(--w-small); line-height: 1.5; }
.w-data { font-family: var(--af-mono); font-size: var(--w-data); letter-spacing: var(--w-tracking-data); }
.w-section-head { margin-bottom: var(--w-block-gap); }
.w-section-head .w-lead { margin-top: 24px; }

/* Ink grounds invert the hierarchy: white at the same opacities, and the label may take the accent. */
.w-on-ink, .w-hero { background: var(--af-ink); color: var(--af-paper); }   /* the hero is an ink ground */
.w-on-ink .w-label, .w-hero .w-label { color: var(--af-accent); }
.w-on-ink .w-lead, .w-on-ink .w-body { color: var(--af-paper-68); }
.w-on-ink .w-body b, .w-on-ink .w-lead b { color: var(--af-paper); }
/* Gold grounds are the highlight block only. Type on gold is ink (labels included: ink 62 on gold is 4.43:1 and fails). */
.w-on-gold { background: var(--af-accent); color: var(--af-ink); }
.w-on-gold .w-label { color: var(--af-ink); }
.w-on-gold .w-lead, .w-on-gold .w-body { color: var(--af-ink-68); }

/* ---------- Focus: one rule on every ground ---------- */
.w-page :focus-visible { outline: var(--w-focus-w) solid var(--af-ink); outline-offset: var(--w-focus-offset); }
.w-on-ink :focus-visible, .w-hero :focus-visible { outline-color: var(--af-paper); }
.w-on-gold :focus-visible { outline-color: var(--af-ink); }
.w-page :focus:not(:focus-visible) { outline: none; }

/* ---------- Links: ink text, ink underline, hover thickens the line, the colour never changes ---------- */
.w-link, .w-prose a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: var(--w-underline); text-underline-offset: var(--w-underline-offset); transition: text-decoration-thickness var(--w-motion) ease-out; }
.w-link:hover, .w-prose a:hover { text-decoration-thickness: var(--w-underline-hover); }
.w-link:visited, .w-prose a:visited { color: inherit; }          /* the palette has no visited colour */
.w-body .w-link, .w-lead .w-link, .w-prose p a { color: var(--af-ink); }   /* a link inside ink 68 text is ink 100 */
.w-on-ink .w-body .w-link, .w-on-ink .w-lead .w-link { color: var(--af-paper); }
.w-link--action { display: inline-block; font-weight: 700; font-size: var(--w-body); color: var(--af-ink); }   /* the section-ending action: one destination, no button */
.w-on-ink .w-link--action, .w-hero .w-link--action { color: var(--af-paper); }
.w-link--mono { font-family: var(--af-mono); font-size: var(--w-data); letter-spacing: var(--w-tracking-data); }

/* ---------- Buttons: ink fill, paper type; inverted on ink. Hover is an underline, never a colour ---------- */
.w-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--w-button-h); padding: var(--w-button-pad); background: var(--af-ink); color: var(--af-paper); font-family: var(--af-font); font-size: var(--w-button); font-weight: 700; line-height: 1; letter-spacing: 0; text-decoration: none; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; }
.w-btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.w-btn:active { text-decoration: none; }
.w-btn--small { height: var(--w-button-h-small); padding: var(--w-button-pad-small); font-size: var(--w-small); }
.w-btn--inverse, .w-on-ink .w-btn, .w-hero .w-btn { background: var(--af-paper); color: var(--af-ink); }
.w-on-gold .w-btn { background: var(--af-ink); color: var(--af-paper); }
.w-btn[disabled], .w-btn[aria-disabled="true"] { cursor: default; text-decoration: none; }   /* no disabled state exists on this page; if one is ever needed it is a bordered ghost, not a tint */

/* ---------- Fields: boxed, ink 62 rule, one focus rule, error without red ---------- */
.w-field { display: flex; flex-direction: column; gap: 8px; }
.w-field__label { font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-ink-62); }
.w-field__input { height: var(--w-field-h); padding: 0 14px; border: 1px solid var(--af-ink-62); border-radius: 0; background: var(--af-paper); color: var(--af-ink); font-family: var(--af-font); font-size: 17px; line-height: 1; -webkit-appearance: none; appearance: none; }
.w-field__input::placeholder { color: var(--af-ink-62); }
textarea.w-field__input { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.w-field__input:focus-visible { border-color: var(--af-ink); }
.w-field:focus-within .w-field__label { color: var(--af-ink); }
.w-field--error .w-field__label { color: var(--af-ink); font-weight: 500; }
.w-field--error .w-field__input { border: 2px solid var(--af-ink); padding: 0 13px; }
.w-field__error { font-size: var(--w-small); line-height: 1.5; color: var(--af-ink); margin: 0; }
.w-field__error::before { content: "+ "; font-weight: 700; }

/* ---------- Nav ---------- */
.w-nav { position: sticky; top: 0; z-index: 10; height: var(--w-nav-h); background: var(--af-paper); border-bottom: 1px solid var(--af-ink-12); }
.w-nav .w-container { height: 100%; display: flex; align-items: center; gap: 32px; }
.w-nav__mark { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.w-nav__mark svg, .w-nav__mark img { display: block; height: var(--w-logo-nav); width: auto; }
.w-nav__links { display: flex; gap: 4px; margin-left: 8px; }
.w-nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-ink-62); text-decoration: none; padding: 8px 10px; white-space: nowrap; transition: color var(--w-motion) ease-out; }
.w-nav__links a:hover { color: var(--af-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.w-nav__links a[aria-current="true"] { color: var(--af-ink); }
.w-nav__action { margin-left: auto; }
@media (max-width: 1023px) { .w-nav__links { display: none; } .w-nav .w-container { gap: 16px; } }
/* The light rises once on the nav mark. Only the two projections move; the letters and the head never do. */
.w-mark-light { transform-box: view-box; transform-origin: 0px 103.341px; animation: w-rise var(--w-rise) cubic-bezier(0.2, 0.7, 0.15, 1) 1 both; }
@keyframes w-rise { from { transform: skewX(20deg) scaleY(2.6); opacity: 0.35; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .w-mark-light { animation: none; } }

/* ---------- Hero: one grid, two variants ---------- */
.w-hero { position: relative; overflow: hidden; background: var(--af-ink); color: var(--af-paper); padding-top: var(--w-hero-pad); padding-bottom: var(--w-hero-pad); }
.w-hero__shapes { position: absolute; inset: 0; pointer-events: none; }
.w-hero__a { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; transform: translateX(-59.47%); }   /* the cover's offset: x -614 of 1032 */
.w-hero__i { position: absolute; left: 72.19%; bottom: 0; height: 92.3%; width: auto; }                             /* the cover's I: x 1386 of 1920, y 83 of 1080 */
.w-hero--media .w-hero__i { display: none; }   /* the media takes the I's column */
.w-hero .w-container { position: relative; }
.w-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--w-col-gap); align-items: center; }
.w-hero__text { grid-column: 1; max-width: 640px; }
.w-hero__eyebrow { font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-accent); }
.w-hero__title { font-size: var(--w-display); font-weight: 700; letter-spacing: var(--w-tracking-display); line-height: var(--w-lh-tight); margin: 16px 0 0; color: var(--af-paper); }
.w-hero__lead { font-size: var(--w-lead); line-height: var(--w-lh-lead); color: var(--af-paper-68); max-width: 34em; margin: 24px 0 0; }
.w-hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 40px; flex-wrap: wrap; }
.w-hero__media { grid-column: 2; aspect-ratio: var(--w-media-aspect); width: 100%; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.w-hero__media video, .w-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .w-hero__grid { grid-template-columns: 6fr 5fr; } }
@media (max-width: 639px) {
  .w-hero__grid { grid-template-columns: 1fr; }
  .w-hero__text, .w-hero__media { grid-column: 1; }
  .w-hero__media { margin-top: 40px; }
  .w-hero__actions .w-btn { width: 100%; }
}

/* ---------- Step sequence: the one place the gold display number transfers unchanged ---------- */
.w-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--w-col-gap); }
.w-step { border-top: 1px solid var(--af-ink-12); padding-top: 24px; }
.w-step__head { display: flex; align-items: baseline; align-items: last baseline; gap: 14px; }   /* the label's last line on the number's baseline, so a wrapped name flushes down to the number (2026-09-20); plain baseline is the fallback */
.w-step__n { font-size: var(--w-number); font-weight: 700; letter-spacing: var(--w-tracking-number); line-height: 1; color: var(--af-accent); }
.w-step__t { font-size: var(--w-h3); font-weight: 700; letter-spacing: var(--w-tracking-h3); line-height: var(--w-lh-h3); color: var(--af-ink); }   /* the mandatory ink label */
.w-step__d { font-size: var(--w-body); line-height: var(--w-lh-body); color: var(--af-ink-68); margin: 16px 0 0; }
@media (max-width: 1023px) { .w-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .w-steps { grid-template-columns: 1fr; gap: 32px; } }

/* Step sequence, stacked variant (2026-09-20): when the label is a sentence rather than a name, the
   number sits above it at full column width instead of beside it on the baseline, and the three rows
   (number, label, description) share their tracks across the row through a subgrid, so every
   description starts on the same line whatever the labels do. Without subgrid the rows fall back to
   the step's own flow. The four moves keep the baseline form: their labels are one or two words. */
.w-steps--stacked .w-step { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.w-steps--stacked .w-step__n { display: block; }
.w-steps--stacked .w-step__t { margin-top: 12px; }
.w-steps--stacked .w-step__d { margin-top: 16px; }

/* Process variant: approved numbered rows; the benefits keep their grid. */

@media (min-width: 640px) {
  .w-steps--process { display: block; }
  .w-steps--process .w-step { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr); gap: var(--w-col-gap); align-items: start; padding: 24px 0; }
  .w-steps--process .w-step__head { display: grid; grid-template-columns: calc(var(--w-number) * 1.35) minmax(0, 1fr); gap: 24px; align-items: start; }
  .w-steps--process .w-step__t { padding-top: 8px; }
  .w-steps--process .w-step__d { margin: 8px 0 0; max-width: var(--w-measure); }
  .w-steps--process .w-step:last-child { padding-bottom: 0; }
}

/* ---------- Quote card: type-led, two-up first ---------- */
.w-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--w-col-gap); }
.w-quote { display: flex; flex-direction: column; border-top: 1px solid var(--af-ink-12); padding-top: 24px; }
.w-quote__label { font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-ink-62); margin-bottom: 16px; }
.w-quote__text { font-size: var(--w-quote); line-height: var(--w-lh-quote); color: var(--af-ink); margin: 0; font-style: normal; }
.w-quote__text::before { content: "\201C"; } .w-quote__text::after { content: "\201D"; }
.w-quote .w-attr { margin-top: auto; padding-top: 28px; }
.w-quote--case .w-quote__text { font-size: var(--w-body); line-height: var(--w-lh-body); color: var(--af-ink-68); }
.w-quote--case .w-quote__text::before, .w-quote--case .w-quote__text::after { content: none; }
.w-quote__stat { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.w-quote__stat .n { font-size: var(--w-number); font-weight: 700; letter-spacing: var(--w-tracking-number); line-height: 1; color: var(--af-accent); }
.w-quote__stat .u { font-size: var(--w-h3); font-weight: 700; color: var(--af-ink); }
@media (max-width: 639px) { .w-quotes { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Attribution line: what separates a testimonial from a pull quote ---------- */
.w-attr { display: flex; align-items: center; gap: 16px; }
.w-attr__face { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; filter: grayscale(1); border: 1px solid var(--af-ink-12); }   /* optional, off by default */
.w-attr__lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.w-attr__name { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--af-ink); }
.w-attr__role { font-family: var(--af-mono); font-size: var(--w-data); letter-spacing: var(--w-tracking-data); line-height: 1.4; color: var(--af-ink-62); }
.w-on-ink .w-attr__name { color: var(--af-paper); } .w-on-ink .w-attr__role { color: var(--af-paper-62); }

/* ---------- Disclosure: native details, a stroke mark that turns ---------- */
.w-faq { border-bottom: 1px solid var(--af-ink-12); }
.w-disc { border-top: 1px solid var(--af-ink-12); }
.w-disc__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: var(--w-h3); font-weight: 700; letter-spacing: var(--w-tracking-h3); line-height: var(--w-lh-h3); color: var(--af-ink); }
.w-disc__summary::-webkit-details-marker { display: none; }
.w-disc__summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.w-disc__mark { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; transition: transform var(--w-motion) ease-out; }
.w-disc__mark line { stroke: var(--af-ink); stroke-width: 2; stroke-linecap: square; }
.w-disc[open] .w-disc__mark { transform: rotate(45deg); }
.w-disc__body { padding: 0 0 26px; max-width: var(--w-measure); font-size: var(--w-body); line-height: var(--w-lh-body); color: var(--af-ink-68); }
.w-disc__body p { margin: 0 0 12px; } .w-disc__body p:last-child { margin-bottom: 0; }

/* ---------- Action block: the page's one highlight block, inside the container, never full bleed ---------- */
.w-action { background: var(--af-accent); color: var(--af-ink); padding: clamp(32px, 4.5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px var(--w-block-gap); align-items: center; }
.w-action__title { font-size: var(--w-h2); font-weight: 700; letter-spacing: var(--w-tracking-h2); line-height: var(--w-lh-heading); margin: 0; }
.w-action__text { font-size: var(--w-body); line-height: var(--w-lh-body); color: var(--af-ink-68); max-width: 40em; margin: 12px 0 0; }
.w-action__text b { color: var(--af-ink); }
.w-action__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.w-action__alt { font-family: var(--af-mono); font-size: var(--w-data); letter-spacing: var(--w-tracking-data); color: var(--af-ink); }
@media (max-width: 767px) { .w-action { grid-template-columns: 1fr; } .w-action__cta { align-items: stretch; } .w-action__cta .w-btn { width: 100%; } }

/* ---------- Footer: approved 2026-09-21; gold CTA stays outside ---------- */

.w-footer { background: var(--af-ink); color: var(--af-paper); padding: var(--w-section) 0 24px; }
.w-footer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(64px, 8vw, 128px); }
.w-footer__brand .w-footer__mark { display: inline-flex; min-height: 44px; align-items: center; }
.w-footer__brand .w-footer__mark svg { height: 40px; width: auto; }
.w-footer__line { font-size: 17px; line-height: 1.5; color: var(--af-paper-68); margin: 12px 0 28px; }
.w-footer__position { font-size: 17px; line-height: 1.65; color: var(--af-paper-68); max-width: 43ch; margin: 0; }
.w-footer__action { margin-top: 28px; }
.w-footer__reassurance { font-size: var(--w-small); line-height: 1.5; color: var(--af-paper-68); margin: 12px 0 0; }
.w-footer__navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.w-footer__navigation h2 { display: flex; align-items: center; min-height: 44px; margin: 0 0 4px; font: 500 13px/1.5 var(--af-mono); color: var(--af-paper-62); }
.w-footer__navigation a { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--af-paper); text-decoration: none; }
.w-footer__navigation h2 a { width: 100%; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 5px; }
.w-footer__navigation a:hover, .w-footer__legal a:hover { text-decoration: underline; text-underline-offset: 5px; }
.w-footer__legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; border-top: 1px solid var(--af-paper-12); margin-top: 56px; padding-top: 16px; color: var(--af-paper-62); }
.w-footer__legal > span { font: 400 13px/1.6 var(--af-mono); }
.w-footer__legal nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.w-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--af-paper-68); text-decoration: none; }
.w-footer__navigation a[aria-current="page"], .w-footer__legal a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 767px) {
  .w-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .w-footer__navigation { gap: 24px; }
  .w-footer__legal { margin-top: 40px; gap: 8px; }
}
@media (max-width: 639px) { .w-footer__action .w-btn { width: 100%; } }

/* ---------- v1.1, 2026-09-20: what the four-page site added ---------- */
/* Current page: mandatory and static on a multi-page site. aria-current="page" on the link. */
.w-nav__links a[aria-current="page"], .w-nav__panel a[aria-current="page"] { color: var(--af-ink); }

/* Approved 2026-09-21: icon-only native menu, grouped with the booking action on the right. */
.w-nav__menu { display: none; }
.w-nav__toggle { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; cursor: pointer; list-style: none; }
.w-nav__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.w-nav__toggle::-webkit-details-marker { display: none; }
.w-nav__toggle svg { width: 24px; height: 24px; }
.w-nav__toggle svg line { stroke: var(--af-ink); stroke-width: 2; stroke-linecap: square; }
.w-nav__bar { transform-origin: 12px 12px; transition: transform 180ms ease-out, opacity 180ms ease-out; }
.w-nav__bar--top { transform: translateY(-6px); }
.w-nav__bar--bottom { transform: translateY(6px); }
.w-nav__menu[open] .w-nav__bar--top { transform: rotate(45deg); }
.w-nav__menu[open] .w-nav__bar--middle { opacity: 0; }
.w-nav__menu[open] .w-nav__bar--bottom { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .w-nav__bar { transition: none; } }
.w-nav__panel { position: absolute; left: 0; right: 0; top: var(--w-nav-h); background: var(--af-paper); border-bottom: 1px solid var(--af-ink-12); padding: 0 var(--w-gutter) 8px; }
.w-nav__panel a { display: block; padding: 16px 0; border-top: 1px solid var(--af-ink-12); font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-ink-62); text-decoration: none; }
.w-nav__panel a:first-child { border-top: 0; }
.w-nav__panel a:hover { color: var(--af-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1023px) {
  .w-nav__menu { display: block; flex-shrink: 0; margin-left: auto; }
  .w-nav__action { margin-left: 0; flex-shrink: 0; }
}
@media (max-width: 379px) { .w-nav .w-container { gap: 6px; } }

/* Approved 2026-09-22: the language switch. One link to the same page in the other language, named in
   that language. From 1024 it sits in the bar, grouped 8px left of the button; below, it is the menu's
   last row (a plain panel link). The nav folds at 1024, not 900: the Spanish bar with the switch
   needs about 960px. */
.w-nav__lang { display: none; }
.w-nav__lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-ink-62); text-decoration: none; white-space: nowrap; transition: color var(--w-motion) ease-out; }
.w-nav__lang a:hover { color: var(--af-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 1024px) {
  .w-nav__lang { display: flex; margin-left: auto; }
  .w-nav__lang + .w-nav__action { margin-left: -24px; }
}
/* A button label too long for the phone bar carries a short form beside it; one is displayed at a
   time, so the accessible name is always the visible text. */
.w-btn__short { display: none; }
@media (max-width: 639px) { .w-btn__full { display: none; } .w-btn__short { display: inline; } }

/* Inner-page header: the deck's section cover on screen. Ink, no shapes, section padding.
   The title at the H2 size, since the Display is the home hero's alone. */
.w-pagehead { background: var(--af-ink); color: var(--af-paper); padding-top: var(--w-section); padding-bottom: var(--w-section); }
.w-pagehead__eyebrow { font-family: var(--af-mono); font-size: var(--w-label); font-weight: 500; letter-spacing: var(--w-tracking-label); text-transform: uppercase; color: var(--af-accent); }
.w-pagehead__title { font-size: var(--w-h2); font-weight: 700; letter-spacing: var(--w-tracking-h2); line-height: var(--w-lh-heading); color: var(--af-paper); margin: 16px 0 0; max-width: 22em; }
.w-pagehead__lead { font-size: var(--w-lead); line-height: var(--w-lh-lead); color: var(--af-paper-68); max-width: 34em; margin: 20px 0 0; }

/* The booking embed: third-party UI inside the brand. Full container width between two Ink 12
   rules, no card, no shadow. The direct action and loading recovery precede the calendar. */
.w-embed { border-top: 1px solid var(--af-ink-12); border-bottom: 1px solid var(--af-ink-12); padding: 32px 0; }
.w-embed__frame { display: block; width: 100%; min-height: 560px; border: 0; }
.w-embed__frame[hidden], .w-embed__status[hidden], .w-embed__status [hidden] { display: none; }
.w-embed__frame iframe { border: 0; }
.w-embed__fallback { margin: 0 0 16px; }
.w-embed__fallback a { display: inline-flex; align-items: center; min-height: 44px; }
.w-embed__status { color: var(--af-ink-68); margin: 0 0 24px; max-width: var(--w-measure); }

/* About: the one photograph the site carries, beside the text at desktop, under it below 1024. */
.w-about { display: grid; grid-template-columns: 7fr 5fr; gap: var(--w-col-gap); align-items: start; }
.w-about__text > * + * { margin-top: 24px; }
.w-about__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }   /* height auto, or the img's height attribute wins over the ratio (found on the site, 2026-09-20) */
@media (max-width: 1023px) { .w-about { grid-template-columns: 1fr; } .w-about__photo { max-width: 420px; order: -1; } }   /* stacked, the face comes before the paragraph */

/* Approved Philosophy index: existing section titles, no new marketing copy. */
.s-page-index { padding-block: 32px; border-bottom: 1px solid var(--af-ink-12); }
.s-page-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--w-col-gap); }
.s-page-index li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.s-page-index a { justify-self: start; }
main > .w-section[id] { scroll-margin-top: calc(var(--w-nav-h) + 24px); }
@media (max-width: 639px) { .s-page-index ol { grid-template-columns: 1fr; } }

/* Approved About layout: attribution joins the portrait on stacked layouts. */
@media (max-width: 1023px) {
  .w-about__text { display: contents; }
  .w-about__photo { grid-row: 1; }
  .w-about__text > .w-attr { grid-row: 2; margin-top: 0 !important; }
  .w-about__text > .w-body { margin: 0; }
  .w-about__text > .s-action { margin-top: 8px !important; }
}
@media (max-width: 639px) { .w-about__photo { max-width: 280px; } }

/* ---------- Site compositions, 2026-09-20: primitives arranged for the four pages, no new component ---------- */
* { box-sizing: border-box; }
html { background: var(--af-paper); }
body { margin: 0; }
main { display: block; }
h1, h2, h3, p { margin-top: 0; }
img, svg { max-width: 100%; }
.s-action { margin: 48px 0 0; }                               /* the text action that ends a section */
.s-section-head .w-lead { margin-top: 24px; }
.s-prose > * + * { margin-top: 24px; }                        /* body paragraphs 24px apart */
.s-services { border-bottom: 1px solid var(--af-ink-12); }    /* four rows, each an H3 over a Body sentence */
.s-service { border-top: 1px solid var(--af-ink-12); padding: 24px 0 28px; }
.s-service .w-body { margin-top: 12px; }
.s-service:target .w-h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.s-count { margin: 0; }
h1, h2, h3, .w-hero__eyebrow, .w-disc__summary > span { text-wrap: balance; }   /* titles break into even lines, never a lone last word; same line count */
.s-nowrap { white-space: nowrap; }                           /* a hyphenated word in a title never breaks at its hyphen */                                        /* the section counter: a mono label above the title, 12px over the H2 by the H2's own margin */
.w-hero .w-link--mono { color: var(--af-paper); }
.w-pagehead + .w-section, .w-hero + .w-section { border-top: 1px solid var(--af-ink-12); }
.s-email { margin: 32px 0 0; }

/* The split section, 2026-09-20: title on columns 1 to 5, content on 7 to 12, on a shared top line,
   alternated with the stacked section so a page has two shapes instead of one. A full-width block
   (the steps) spans both columns below the head row. Stacks below 1024, where the steps go two-up. */
.s-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--w-col-gap); align-items: start; }
.s-split__head { grid-column: 1 / 6; margin-bottom: 0; }
.s-split__body { grid-column: 7 / 13; min-width: 0; }
.s-split__body > * + * { margin-top: 24px; }
.s-split__body > .s-action { margin-top: 48px; }
.s-split__wide { grid-column: 1 / -1; min-width: 0; margin-top: var(--w-block-gap); }
.s-how-close { margin-top: var(--w-block-gap); }   /* the refusals and who leads the work, under the four moves (2026-09-23) */
@media (max-width: 1023px) {
  .s-split { grid-template-columns: 1fr; }
  .s-split__head, .s-split__body, .s-split__wide { grid-column: 1; }
  .s-split__head { margin-bottom: var(--w-block-gap); }
}

.s-head-lead { margin: 24px 0 0; max-width: var(--w-measure); }   /* a lead under a full-width section title (2026-09-22) */

/* The recognition section, 2026-09-21: the reader's own situation, before the method. It carries
   the eyebrow instead of the section counter, because it frames the argument rather than being a
   step in it, so the five counted sections keep their numbering. Each row is a card as DESIGN.md
   defines one: a 1px Ink 12 rule above and space around, never a panel, never a shadow. The
   rows take the gold Number above the sentence, the same treatment as the four benefits, so the
   page has one numbering language: mono counters for sections, gold Numbers for rows. */
.s-split__head > .w-lead, .s-split__head > .s-split__lead { margin: 24px 0 0; max-width: var(--w-measure); }
.s-recognition { display: grid; grid-template-columns: 1fr; }
.s-recognition .w-step { padding: 24px 0 28px; }
.s-recognition .w-step:last-child { padding-bottom: 0; }
.s-recognition .w-step__d { margin-top: 12px; max-width: var(--w-measure); }

/* Home reassurance and Philosophy decisions reuse the existing type and rule tokens. */
.s-hero-actions { display: grid; justify-items: start; gap: 12px; }   /* one path out of the hero (2026-09-22): the button and its reassurance, no email */
.s-hero-reassurance { font-size: var(--w-small); line-height: 1.5; color: var(--af-paper-68); margin: 0; }
.s-decisions { max-width: var(--w-measure); margin-bottom: 0; border-bottom: 1px solid var(--af-ink-12); }
.s-decision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--af-ink-12); }
.s-decision > dt, .s-decision > dd { margin: 0; }
@media (max-width: 1023px) {
  .s-hero-actions { grid-template-columns: 1fr; }
  .s-hero-actions > .w-link { grid-column: 1; grid-row: 3; margin-top: 8px; }
}
@media (max-width: 639px) {
  .s-decision { grid-template-columns: 1fr; gap: 12px; }
}

/* Approved 2026-09-21: introductory Diagnostic, narrower desktop measure and About topics. */
.s-service__measure { max-width: var(--w-measure); font-size: var(--w-body); }
.s-service__measure .w-body { max-width: none; }
.s-service--intro { border-top: 0; padding-top: 32px; padding-bottom: 40px; }
.s-service--intro .w-body { font-size: var(--w-lead); line-height: var(--w-lh-lead); color: var(--af-ink); }
@media (min-width: 1024px) {
  .s-service__measure { max-width: min(var(--w-measure), 660px); }
}
.s-about-topic > .w-h3 { margin: 0 0 12px; }
.s-about-topic > .w-body { margin: 0; }
.s-about-topic > .w-body + .w-body { margin-top: 24px; }       /* a topic with two paragraphs (2026-09-23), prose spacing */
.w-about__text > .s-about-topic { margin-top: 32px; }
.w-about__text > .s-about-topic:first-child { margin-top: 0; }
@media (max-width: 1023px) { .w-about__text > .s-about-topic { margin: 0; } }

/* Legal placeholders reuse the site's body measure and topic spacing. */
.s-legal-topic { max-width: var(--w-measure); font-size: var(--w-body); }
.s-legal-topic + .s-legal-topic { margin-top: 40px; }
.s-legal-topic .w-h3 { margin: 0 0 12px; }
.s-legal-topic .w-body { margin: 0; }

/* Contact approved 2026-09-21: call steps, full-width booking and FAQs. */

.c-booking { padding-top:clamp(40px,4.5vw,64px); }
.c-booking-heading { margin-bottom:32px; }
.c-booking-heading .w-h2 { margin:0 0 12px; }
.c-booking-heading .w-body { margin:0; }
.c-booking-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start; }
.c-calendar { min-width:0; }
.c-expectations { min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.c-topic { margin:0; }
.c-calendar .w-embed { border:0; padding:0; }
.c-calendar .w-embed__fallback { margin-bottom:12px; }
.c-calendar .w-embed__fallback a { font-size:var(--w-small); }
.c-email { border-top:1px solid var(--af-ink-12); padding-top:24px; margin-top:32px; }
.c-email p { margin:0 0 8px; }
.c-email a { overflow-wrap:anywhere; }
.c-faq-layout { display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:40px; }
.c-faq-layout>.w-h2 { margin:0; }
.c-faq-layout .w-disc:last-child { border-bottom:1px solid var(--af-ink-12); }
@media(max-width:1023px) {
 .c-booking-grid,.c-faq-layout { grid-template-columns:minmax(0,1fr); gap:40px; }
 .c-expectations { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .c-topic { margin:0; }
}
@media(max-width:639px) {
 .c-expectations { grid-template-columns:minmax(0,1fr); }
 .c-booking-heading { margin-bottom:20px; }
}

/* Contact FAQ discovery and return to booking, requested 2026-09-21. */
.c-faq-jump { margin:0; }
.c-faq-jump .w-link { min-height:44px; display:inline-flex; align-items:center; }
#calendar, #call-faqs { scroll-margin-top:calc(var(--w-nav-h) + 24px); }
.c-faq-action { display:flex; justify-content:center; padding:clamp(24px,3.5vw,40px); margin-top:var(--w-section); }   /* 2026-09-22: the gold box sits a section's worth below the FAQs, as home's action block does, instead of 40px */
@media(max-width:639px) { .c-faq-action .w-btn { width:100%; } }