/* Dark Horse Agency — compiled design-system stylesheet.
   Generated from styles.css and its imports. Edit the design system, not this file. */

/* ===== tokens/fonts.css ===== */
/* Dark Horse Agency — brand webfonts. Licensed files supplied by the brand team.
   LEXIA  → display: headlines, callouts and the trUSt device (XBold, that use only).
   GOTHAM → core: subheads, body copy and all UI.
   Arial remains the declared system typeface for email and any environment
   where the brand fonts are unavailable.
   Only the weights the brand actually uses are shipped — the guidelines call for
   a limited number of weights per layout. */

/* --- Lexia --- */
@font-face{font-family:'Lexia';src:url('../fonts/lexia-thin.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Lexia';src:url('../fonts/lexia-light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lexia';src:url('../fonts/lexia-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lexia';src:url('../fonts/lexia-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Lexia';src:url('../fonts/lexia-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lexia';src:url('../fonts/lexia-xbold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

/* --- Gotham --- */
@font-face{font-family:'Gotham';src:url('../fonts/gotham-light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/gotham-book.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/gotham-book-italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/gotham-medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/gotham-black.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}

/* ===== tokens/colors.css ===== */
/* Dark Horse Agency — colour palette (Brand Guidelines v1.0, Aug 2026)
   Severn Navy and Pure White are used at 100% ONLY.
   Dovecote Blue is the single secondary. Cotswold Stone / Rococo Rose / Cleeve Green
   are tertiary: supporting only, never dominant, never used in isolation. */
:root {
  /* --- Primary --- */
  --dh-severn-navy: #023F5E;
  --dh-pure-white: #FFFFFF;

  /* --- Secondary --- */
  --dh-dovecote: #88B3CA;
  --dh-dovecote-80: #A0C2D5;
  --dh-dovecote-60: #B8D1DF;
  --dh-dovecote-40: #CFE1EA;
  --dh-dovecote-20: #E7F0F4;

  /* --- Tertiary --- */
  --dh-cotswold: #C0B1A4;
  --dh-cotswold-80: #CDC1B6;
  --dh-cotswold-60: #D9D0C8;
  --dh-cotswold-40: #E6E0DB;
  --dh-cotswold-20: #F2EFED;

  --dh-rococo: #CB8793;
  --dh-rococo-80: #D59FA9;
  --dh-rococo-60: #E0B7BE;
  --dh-rococo-40: #EACFD4;
  --dh-rococo-20: #F5E7E9;

  --dh-cleeve: #79AA97;
  --dh-cleeve-80: #94BBAC;
  --dh-cleeve-60: #AFCCC1;
  --dh-cleeve-40: #C9DDD5;
  --dh-cleeve-20: #E4EEEA;

  /* --- Navy transparencies (rules, hairlines, scrims only) --- */
  --dh-navy-a04: rgba(2, 63, 94, 0.04);
  --dh-navy-a08: rgba(2, 63, 94, 0.08);
  --dh-navy-a12: rgba(2, 63, 94, 0.12);
  --dh-navy-a20: rgba(2, 63, 94, 0.20);
  --dh-navy-a60: rgba(2, 63, 94, 0.60);
  --dh-navy-a88: rgba(2, 63, 94, 0.88);
  --dh-white-a12: rgba(255, 255, 255, 0.12);
  --dh-white-a24: rgba(255, 255, 255, 0.24);
  --dh-white-a70: rgba(255, 255, 255, 0.70);

  /* --- Semantic: text --- */
  --text-body: var(--dh-severn-navy);
  --text-heading: var(--dh-severn-navy);
  --text-muted: var(--dh-navy-a60);
  --text-inverse: var(--dh-pure-white);
  --text-inverse-muted: var(--dh-white-a70);
  --text-accent: var(--dh-dovecote);
  --text-link: var(--dh-severn-navy);
  --text-link-hover: var(--dh-dovecote);

  /* --- Semantic: surfaces --- */
  --surface-page: var(--dh-pure-white);
  --surface-card: var(--dh-pure-white);
  --surface-sunken: var(--dh-dovecote-20);
  --surface-warm: var(--dh-cotswold-20);
  --surface-inverse: var(--dh-severn-navy);
  --surface-scrim: var(--dh-navy-a88);

  /* --- Semantic: lines --- */
  --line-hairline: var(--dh-navy-a12);
  --line-rule: var(--dh-navy-a20);
  --line-strong: var(--dh-severn-navy);
  --line-inverse: var(--dh-white-a24);

  /* --- Semantic: interactive --- */
  --action-solid-bg: var(--dh-severn-navy);
  --action-solid-fg: var(--dh-pure-white);
  --action-solid-bg-hover: #01314A;   /* Severn Navy, deepened for hover only */
  --action-solid-bg-active: #012839;
  --action-quiet-fg: var(--dh-severn-navy);
  --action-quiet-bg-hover: var(--dh-navy-a04);
  --focus-ring: var(--dh-dovecote);

  /* --- Semantic: status (drawn from tertiary palette — no new hues) --- */
  --status-positive: var(--dh-cleeve);
  --status-attention: var(--dh-rococo);
  --status-neutral: var(--dh-cotswold);
  --status-info: var(--dh-dovecote);
}

/* ===== tokens/typography.css ===== */
/* Dark Horse Agency — typography tokens.
   Rules taken verbatim from Brand Guidelines v1.0 "Typography Implementation":
   Headline: Lexia Light (Thin above 80pt), sentence case, leading 110%.
   Subhead:  Gotham Book, capitalised, 2-4pt larger than body.
   Body:     Gotham Light, sentence case, never below 8pt, leading 120%.
   Callout:  Lexia Light or Medium, sentence case, leading 120%.
   trUSt:    Lexia XBold ONLY. Never used for anything else. */
:root {
  /* families — display = Lexia (Bitter stand-in), core = Gotham (Montserrat stand-in) */
  --font-display: 'Lexia', Georgia, serif;
  --font-core: 'Gotham', Arial, sans-serif;
  --font-system: Arial, Helvetica, sans-serif;

  /* weights — keep to a limited number per layout; avoid bold-heavy pages */
  --weight-thin: 200;       /* Lexia Thin  — headlines above 80pt */
  --weight-light: 300;      /* Lexia Light / Gotham Light — headlines, body */
  --weight-book: 400;       /* Gotham Book — subheads, UI labels */
  --weight-medium: 500;     /* Lexia Medium / Gotham Medium — callouts, buttons */
  --weight-xbold: 800;      /* Lexia XBold — trUSt device and hero messaging ONLY */

  /* type scale (px, 1.0 = 16px body) */
  --size-hero: 132px;
  --size-display: 76px;
  --size-h1: 54px;
  --size-h2: 40px;
  --size-h3: 30px;
  --size-h4: 23px;
  --size-lead: 21px;
  --size-body: 17px;
  --size-small: 15px;
  --size-caption: 13px;
  --size-micro: 11px;

  /* leading */
  --leading-headline: 1.1;  /* 110% of font size */
  --leading-body: 1.2;      /* 120% of font size */
  --leading-prose: 1.55;    /* long-form web reading — digital extension of 120% rule */
  --leading-trust: 0.78;    /* trUSt lock-up: leading equals 1/2 x-height */

  /* tracking */
  --tracking-hero: -0.02em;
  --tracking-headline: -0.01em;
  --tracking-body: 0;
  --tracking-subhead: 0.14em;   /* capitalised Gotham Book subheads */
  --tracking-eyebrow: 0.2em;
  --tracking-trust: 0;          /* "Lexia XBold, no tracking" */

  /* semantic roles */
  --type-headline-family: var(--font-display);
  --type-headline-weight: var(--weight-light);
  --type-subhead-family: var(--font-core);
  --type-subhead-weight: var(--weight-book);
  --type-body-family: var(--font-core);
  --type-body-weight: var(--weight-light);
  --type-callout-family: var(--font-display);
  --type-callout-weight: var(--weight-medium);
  --type-trust-family: var(--font-display);
  --type-trust-weight: var(--weight-xbold);
  --measure-prose: 68ch;
}

/* ===== tokens/spacing.css ===== */
/* Dark Horse Agency — spacing, layout and radii.
   The brand materials specify one hard spatial rule: logo clearspace equals the
   height of the "D" (i.e. the diameter of the mane mark) on all sides. Everything
   else here is a 4px-based scale derived from the print layouts, which are
   generous, wide-margined and airy. Restraint over density. */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 176px;

  /* section rhythm */
  --section-y: var(--space-10);
  --section-y-tight: var(--space-9);
  --gutter: var(--space-6);
  --container-max: 1240px;
  --container-narrow: 820px;

  /* logo protection: clearspace = height of the D = mark diameter */
  --logo-clearspace: 1em;

  /* radii — the brand is square-cornered. The only circle is the mane mark. */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* borders */
  --border-hairline: 1px;
  --border-strong: 2px;

  /* elevation — near-flat. Shadow is a whisper, never a lift. */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(2, 63, 94, 0.04), 0 12px 32px rgba(2, 63, 94, 0.06);
  --shadow-raised: 0 2px 4px rgba(2, 63, 94, 0.06), 0 24px 56px rgba(2, 63, 94, 0.10);
  --shadow-overlay: 0 32px 80px rgba(2, 63, 94, 0.22);

  /* motion — calm, unhurried, no bounce */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 520ms; /* @kind other */
  /* trust-line rotator dwell */
  --duration-rotate: 3200ms; /* @kind other */

  --blur-scrim: 10px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
}

/* ===== tokens/base.css ===== */
/* Dark Horse Agency — minimal element defaults. Tokens only above this file. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--type-body-family);
  font-weight: var(--type-body-weight);
  font-size: var(--size-body);
  line-height: var(--leading-prose);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4 {
  font-family: var(--type-headline-family);
  font-weight: var(--type-headline-weight);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-headline);
  color: var(--text-heading);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }
p { margin: 0 0 var(--space-4); max-width: var(--measure-prose); }
a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--dh-dovecote); transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); border-color: var(--dh-dovecote-60); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
strong { font-weight: var(--weight-medium); }
hr { border: 0; border-top: var(--border-hairline) solid var(--line-hairline); margin: var(--space-7) 0; }
::selection { background: var(--dh-dovecote-40); color: var(--dh-severn-navy); }
img { max-width: 100%; }

/* ===== components/components.css ===== */
/* Dark Horse Agency — component styles. Tokens only; no new raw values except
   where a component needs a specific optical adjustment (noted inline). */

/* ---------- Button ---------- */
.dh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-core);font-weight:var(--weight-book);letter-spacing:var(--tracking-subhead);text-transform:uppercase;border:var(--border-hairline) solid transparent;border-radius:var(--radius-none);cursor:pointer;text-decoration:none;transition:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),opacity var(--duration-base) var(--ease-standard)}
.dh-btn--md{font-size:var(--size-caption);padding:15px var(--space-6)}
.dh-btn--sm{font-size:var(--size-micro);padding:10px var(--space-5);letter-spacing:var(--tracking-eyebrow)}
.dh-btn--lg{font-size:var(--size-small);padding:19px var(--space-7)}
.dh-btn--solid{background:var(--action-solid-bg);color:var(--action-solid-fg)}
.dh-btn--solid:hover{background:var(--action-solid-bg-hover)}
.dh-btn--solid:active{background:var(--action-solid-bg-active)}
.dh-btn--outline{background:transparent;color:var(--action-quiet-fg);border-color:var(--line-strong)}
.dh-btn--outline:hover{background:var(--action-solid-bg);color:var(--action-solid-fg)}
.dh-btn--quiet{background:transparent;color:var(--action-quiet-fg);padding-left:0;padding-right:0;letter-spacing:var(--tracking-subhead)}
.dh-btn--quiet:hover{color:var(--dh-dovecote)}
.dh-btn--inverse{background:var(--dh-pure-white);color:var(--dh-severn-navy)}
.dh-btn--inverse:hover{background:var(--dh-dovecote-40)}
.dh-btn--inverse-outline{background:transparent;color:var(--dh-pure-white);border-color:var(--line-inverse)}
.dh-btn--inverse-outline:hover{background:var(--dh-pure-white);color:var(--dh-severn-navy);border-color:var(--dh-pure-white)}
.dh-btn[disabled],.dh-btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed}
.dh-btn--block{width:100%}
.dh-btn__arrow{transition:transform var(--duration-base) var(--ease-standard)}
.dh-btn:hover .dh-btn__arrow{transform:translateX(4px)}

/* ---------- IconButton ---------- */
.dh-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:var(--border-hairline) solid var(--line-rule);border-radius:var(--radius-none);color:var(--dh-severn-navy);cursor:pointer;transition:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.dh-iconbtn--sm{width:34px;height:34px}
.dh-iconbtn--md{width:44px;height:44px}
.dh-iconbtn--lg{width:56px;height:56px}
.dh-iconbtn--round{border-radius:var(--radius-circle)}
.dh-iconbtn:hover{background:var(--dh-severn-navy);color:var(--dh-pure-white);border-color:var(--dh-severn-navy)}
.dh-iconbtn--bare{border-color:transparent}
.dh-iconbtn--bare:hover{background:var(--action-quiet-bg-hover);color:var(--dh-dovecote);border-color:transparent}
.dh-iconbtn--inverse{color:var(--dh-pure-white);border-color:var(--line-inverse)}
.dh-iconbtn--inverse:hover{background:var(--dh-pure-white);color:var(--dh-severn-navy);border-color:var(--dh-pure-white)}
.dh-iconbtn[disabled]{opacity:.38;cursor:not-allowed}

/* ---------- Icon (Lucide via CDN, masked so it inherits currentColor) ---------- */
.dh-icon{display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex:none}

/* ---------- Logo & mane ---------- */
.dh-logo{display:inline-block;line-height:0}
.dh-logo img{display:block;height:100%;width:auto}
.dh-logo--clearspace{padding:var(--logo-clearspace)}
.dh-mane{display:block}
.dh-mane--bleed{position:absolute;pointer-events:none;user-select:none}

/* ---------- trUSt device ---------- */
.dh-trust{font-family:var(--type-trust-family);font-weight:var(--weight-xbold);letter-spacing:var(--tracking-trust);line-height:var(--leading-trust);color:var(--dh-severn-navy);display:inline-block;text-align:left}
.dh-trust__word{display:block;white-space:nowrap}
.dh-trust__us{color:var(--dh-dovecote);transition:color var(--duration-slow) var(--ease-standard)}
.dh-trust__sub{display:block;font-size:.5em;white-space:nowrap;perspective:800px}
.dh-trust--inverse{color:var(--dh-pure-white)}
.dh-trust--inverse .dh-trust__us{color:var(--dh-dovecote)}
.dh-trust__rotator{display:inline-block;position:relative}
.dh-trust__line{display:inline-block;transform-origin:50% 0;animation:dh-trust-in var(--duration-slow) var(--ease-entrance) both}
@keyframes dh-trust-in{from{opacity:0;transform:rotateX(-88deg) translateY(-.06em)}to{opacity:1;transform:none}}

/* ---------- Fields ---------- */
.dh-field{display:flex;flex-direction:column;gap:var(--space-2)}
.dh-field__label{font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-body)}
.dh-field__hint{font-size:var(--size-caption);color:var(--text-muted);line-height:var(--leading-body)}
.dh-field__error{font-size:var(--size-caption);color:var(--dh-rococo);line-height:var(--leading-body)}
.dh-input{font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-body);color:var(--text-body);background:transparent;border:0;border-bottom:var(--border-hairline) solid var(--line-rule);border-radius:var(--radius-none);padding:var(--space-3) 0;width:100%;transition:border-color var(--duration-base) var(--ease-standard)}
.dh-input::placeholder{color:var(--dh-navy-a20)}
.dh-input:hover{border-color:var(--dh-navy-a60)}
.dh-input:focus{outline:none;border-bottom-color:var(--dh-severn-navy);border-bottom-width:var(--border-strong);padding-bottom:calc(var(--space-3) - 1px)}
.dh-input--boxed{border:var(--border-hairline) solid var(--line-rule);padding:var(--space-3) var(--space-4)}
.dh-input--boxed:focus{border-width:var(--border-hairline);border-color:var(--dh-severn-navy);box-shadow:inset 0 0 0 1px var(--dh-severn-navy);padding:var(--space-3) var(--space-4)}
.dh-input--invalid{border-bottom-color:var(--dh-rococo)}
.dh-input[disabled]{opacity:.4;cursor:not-allowed}
.dh-textarea{resize:vertical;min-height:120px;line-height:var(--leading-prose)}
.dh-select-wrap{position:relative;display:block}
.dh-select{appearance:none;-webkit-appearance:none;padding-right:var(--space-6)}
.dh-select-wrap .dh-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--dh-severn-navy)}

/* ---------- Choice controls ---------- */
.dh-choice{display:inline-flex;align-items:flex-start;gap:var(--space-3);font-size:var(--size-small);line-height:var(--leading-body);cursor:pointer}
.dh-choice input{position:absolute;opacity:0;width:0;height:0}
.dh-choice__box{width:18px;height:18px;flex:none;border:var(--border-hairline) solid var(--line-strong);background:transparent;display:inline-flex;align-items:center;justify-content:center;margin-top:2px;transition:background-color var(--duration-fast) var(--ease-standard)}
.dh-choice__box--radio{border-radius:var(--radius-circle)}
.dh-choice input:checked+.dh-choice__box{background:var(--dh-severn-navy)}
.dh-choice input:checked+.dh-choice__box .dh-icon{color:var(--dh-pure-white)}
.dh-choice input:checked+.dh-choice__box--radio::after{content:"";width:8px;height:8px;border-radius:var(--radius-circle);background:var(--dh-pure-white)}
.dh-choice input:focus-visible+.dh-choice__box{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.dh-choice--disabled{opacity:.4;cursor:not-allowed}
.dh-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--size-small)}
.dh-switch input{position:absolute;opacity:0;width:0;height:0}
.dh-switch__track{width:44px;height:24px;flex:none;border-radius:var(--radius-pill);background:var(--dh-navy-a20);position:relative;transition:background-color var(--duration-base) var(--ease-standard)}
.dh-switch__knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--radius-circle);background:var(--dh-pure-white);transition:transform var(--duration-base) var(--ease-standard)}
.dh-switch input:checked+.dh-switch__track{background:var(--dh-severn-navy)}
.dh-switch input:checked+.dh-switch__track .dh-switch__knob{transform:translateX(20px)}
.dh-switch input:focus-visible+.dh-switch__track{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}

/* ---------- Card ---------- */
.dh-card{position:relative;background:var(--surface-card);border-radius:var(--radius-none);padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-3);transition:box-shadow var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.dh-card--hairline{border:var(--border-hairline) solid var(--line-hairline)}
.dh-card--raised{box-shadow:var(--shadow-card)}
.dh-card--sunken{background:var(--surface-sunken)}
.dh-card--warm{background:var(--surface-warm)}
.dh-card--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.dh-card--inverse .dh-card__title,.dh-card--inverse .dh-card__eyebrow{color:var(--text-inverse)}
.dh-card--inverse .dh-card__body{color:var(--text-inverse-muted)}
.dh-card--interactive{cursor:pointer}
.dh-card--interactive:hover{box-shadow:var(--shadow-raised)}
.dh-card--interactive.dh-card--sunken:hover,.dh-card--interactive.dh-card--warm:hover{box-shadow:none;transform:translateY(-2px)}
.dh-card__eyebrow{font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.dh-card__title{font-family:var(--type-headline-family);font-weight:var(--weight-light);font-size:var(--size-h4);line-height:var(--leading-headline);color:var(--text-heading);margin:0}
.dh-card__body{font-size:var(--size-small);line-height:var(--leading-prose);color:var(--text-body);margin:0;max-width:none}
.dh-card__media{margin:calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-5);overflow:hidden}
.dh-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.dh-card__index{font-family:var(--type-headline-family);font-weight:var(--weight-light);font-size:var(--size-h3);color:var(--dh-dovecote);line-height:1}

/* ---------- Badge & Tag ---------- */
.dh-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:5px var(--space-3);border-radius:var(--radius-none)}
.dh-badge--navy{background:var(--dh-severn-navy);color:var(--dh-pure-white)}
.dh-badge--dovecote{background:var(--dh-dovecote-40);color:var(--dh-severn-navy)}
.dh-badge--stone{background:var(--dh-cotswold-40);color:var(--dh-severn-navy)}
.dh-badge--rose{background:var(--dh-rococo-40);color:var(--dh-severn-navy)}
.dh-badge--green{background:var(--dh-cleeve-40);color:var(--dh-severn-navy)}
.dh-badge--outline{background:transparent;color:var(--dh-severn-navy);box-shadow:inset 0 0 0 1px var(--line-rule)}
.dh-badge__dot{width:6px;height:6px;border-radius:var(--radius-circle);background:currentColor}
.dh-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-caption);letter-spacing:.02em;padding:7px var(--space-4);border:var(--border-hairline) solid var(--line-rule);border-radius:var(--radius-pill);color:var(--text-body);background:transparent;cursor:default;transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.dh-tag--clickable{cursor:pointer}
.dh-tag--clickable:hover{border-color:var(--dh-severn-navy)}
.dh-tag--selected{background:var(--dh-severn-navy);border-color:var(--dh-severn-navy);color:var(--dh-pure-white)}
.dh-tag__remove{display:inline-flex;background:none;border:0;padding:0;color:inherit;cursor:pointer;opacity:.6}
.dh-tag__remove:hover{opacity:1}

/* ---------- Accordion ---------- */
.dh-accordion{border-top:var(--border-hairline) solid var(--line-hairline)}
.dh-accordion__item{border-bottom:var(--border-hairline) solid var(--line-hairline)}
.dh-accordion__trigger{display:flex;width:100%;align-items:baseline;gap:var(--space-5);background:none;border:0;padding:var(--space-5) 0;cursor:pointer;text-align:left;font-family:var(--type-headline-family);font-weight:var(--weight-light);font-size:var(--size-h4);line-height:var(--leading-headline);color:var(--text-heading);transition:color var(--duration-base) var(--ease-standard)}
.dh-accordion__trigger:hover{color:var(--dh-dovecote)}
.dh-accordion__num{font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);color:var(--dh-dovecote);flex:none;width:2.4em}
.dh-accordion__mark{margin-left:auto;flex:none;transition:transform var(--duration-base) var(--ease-standard);color:var(--dh-severn-navy)}
.dh-accordion__item--open .dh-accordion__mark{transform:rotate(45deg)}
.dh-accordion__panel{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-base) var(--ease-standard)}
.dh-accordion__item--open .dh-accordion__panel{grid-template-rows:1fr}
.dh-accordion__panel>div{min-height:0}
.dh-accordion__body{padding:0 0 var(--space-6) calc(2.4em + var(--space-5));font-size:var(--size-small);line-height:var(--leading-prose);color:var(--text-body);max-width:var(--measure-prose)}
.dh-accordion--tight .dh-accordion__trigger{padding:var(--space-4) 0}

/* ---------- Blockquote / pull quote ---------- */
.dh-quote{margin:0;display:flex;flex-direction:column;gap:var(--space-5);border-left:var(--border-strong) solid var(--dh-dovecote);padding-left:var(--space-6)}
.dh-quote--plain{border:0;padding:0}
.dh-quote__text{font-family:var(--type-callout-family);font-weight:var(--weight-light);font-size:var(--size-h3);line-height:var(--leading-body);color:var(--text-heading);margin:0;max-width:24em}
.dh-quote__attr{font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.dh-quote--inverse .dh-quote__text{color:var(--text-inverse)}
.dh-quote--inverse .dh-quote__attr{color:var(--text-inverse-muted)}

/* ---------- SectionHeading ---------- */
.dh-heading{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--container-narrow)}
.dh-heading__eyebrow{font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-caption);letter-spacing:var(--tracking-subhead);text-transform:uppercase;color:var(--text-muted);margin:0}
.dh-heading__title{font-family:var(--type-headline-family);font-weight:var(--weight-light);line-height:var(--leading-headline);letter-spacing:var(--tracking-headline);color:var(--text-heading);margin:0}
.dh-heading--sm .dh-heading__title{font-size:var(--size-h3)}
.dh-heading--md .dh-heading__title{font-size:var(--size-h2)}
.dh-heading--lg .dh-heading__title{font-size:var(--size-h1)}
.dh-heading__lead{font-size:var(--size-lead);font-weight:var(--weight-light);line-height:var(--leading-prose);color:var(--text-body);margin:0;max-width:var(--measure-prose)}
.dh-heading--center{align-items:center;text-align:center;margin-inline:auto}
.dh-heading--inverse .dh-heading__title{color:var(--text-inverse)}
.dh-heading--inverse .dh-heading__eyebrow,.dh-heading--inverse .dh-heading__lead{color:var(--text-inverse-muted)}
.dh-heading__rule{width:56px;height:2px;background:var(--dh-dovecote);border:0}

/* ---------- ServiceList (the "designed, not typed" list) ---------- */
.dh-services{list-style:none;margin:0;padding:0;border-top:var(--border-hairline) solid var(--line-hairline)}
.dh-services__item{display:flex;align-items:baseline;gap:var(--space-5);padding:var(--space-4) 0;border-bottom:var(--border-hairline) solid var(--line-hairline);font-family:var(--type-headline-family);font-weight:var(--weight-light);font-size:var(--size-h4);line-height:var(--leading-headline);color:var(--text-heading);transition:color var(--duration-base) var(--ease-standard),padding-left var(--duration-base) var(--ease-standard)}
.dh-services__item:hover{color:var(--dh-dovecote);padding-left:var(--space-3)}
.dh-services__num{font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);color:var(--dh-dovecote);flex:none;width:2.4em}
.dh-services--inverse{border-color:var(--line-inverse)}
.dh-services--inverse .dh-services__item{color:var(--text-inverse);border-color:var(--line-inverse)}
.dh-services--columns{column-gap:var(--space-9);border-top:0}
.dh-services--columns .dh-services__item{break-inside:avoid;border-top:var(--border-hairline) solid var(--line-hairline);border-bottom:0}

/* ---------- Tabs ---------- */
.dh-tabs__list{display:flex;gap:var(--space-7);border-bottom:var(--border-hairline) solid var(--line-hairline);margin:0;padding:0}
.dh-tabs__tab{background:none;border:0;border-bottom:var(--border-strong) solid transparent;padding:0 0 var(--space-3);margin-bottom:-1px;font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-caption);letter-spacing:var(--tracking-subhead);text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.dh-tabs__tab:hover{color:var(--text-body)}
.dh-tabs__tab--active{color:var(--text-body);border-bottom-color:var(--dh-severn-navy)}
.dh-tabs__panel{padding-top:var(--space-6)}

/* ---------- Dialog ---------- */
.dh-dialog__scrim{position:fixed;inset:0;background:var(--surface-scrim);backdrop-filter:blur(var(--blur-scrim));display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:60;animation:dh-fade var(--duration-base) var(--ease-standard) both}
.dh-dialog{background:var(--surface-card);border-radius:var(--radius-none);box-shadow:var(--shadow-overlay);width:100%;max-width:560px;padding:var(--space-8);position:relative;animation:dh-rise var(--duration-base) var(--ease-entrance) both}
.dh-dialog__close{position:absolute;top:var(--space-5);right:var(--space-5)}
.dh-dialog__title{font-family:var(--type-headline-family);font-weight:var(--weight-light);font-size:var(--size-h3);line-height:var(--leading-headline);margin:0 0 var(--space-4)}
.dh-dialog__body{font-size:var(--size-small);line-height:var(--leading-prose);color:var(--text-body)}
.dh-dialog__actions{display:flex;gap:var(--space-3);margin-top:var(--space-7)}
@keyframes dh-fade{from{opacity:0}to{opacity:1}}
@keyframes dh-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.dh-toast{display:flex;align-items:flex-start;gap:var(--space-4);background:var(--surface-inverse);color:var(--text-inverse);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-raised);max-width:420px;animation:dh-rise var(--duration-base) var(--ease-entrance) both}
.dh-toast__accent{width:3px;align-self:stretch;flex:none;background:var(--dh-dovecote)}
.dh-toast--positive .dh-toast__accent{background:var(--status-positive)}
.dh-toast--attention .dh-toast__accent{background:var(--status-attention)}
.dh-toast__title{font-family:var(--font-core);font-weight:var(--weight-book);font-size:var(--size-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;margin:0 0 var(--space-1)}
.dh-toast__body{font-size:var(--size-small);line-height:var(--leading-body);color:var(--text-inverse-muted);margin:0}

/* ---------- Tooltip ---------- */
.dh-tooltip{position:relative;display:inline-flex}
.dh-tooltip__bubble{position:absolute;z-index:40;background:var(--dh-severn-navy);color:var(--dh-pure-white);font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-caption);line-height:var(--leading-body);padding:var(--space-2) var(--space-3);white-space:nowrap;pointer-events:none;animation:dh-fade var(--duration-fast) var(--ease-standard) both}
.dh-tooltip__bubble--top{bottom:calc(100% + var(--space-2));left:50%;transform:translateX(-50%)}
.dh-tooltip__bubble--bottom{top:calc(100% + var(--space-2));left:50%;transform:translateX(-50%)}
.dh-tooltip__bubble--right{left:calc(100% + var(--space-2));top:50%;transform:translateY(-50%)}
.dh-tooltip__bubble--left{right:calc(100% + var(--space-2));top:50%;transform:translateY(-50%)}