/* ==========================================================================
   Drew's Drone Services — "Contour" design system (final)
   Source of truth for docs/DESIGN.md. Class names = GenerateBlocks Pro global classes (dds-*).
   Breakpoints: GB tablet (max-width:1024px), GB mobile (max-width:767px). No JavaScript required.
   ========================================================================== */

/* ---------- 1. Tokens (GeneratePress global colours print these on :root) ---------- */
:root{
  --contrast:#13241D;      /* Ink */
  --contrast-2:#2E3F37;    /* Ink 2 */
  --contrast-3:#56625B;    /* Muted */
  --base:#D5CCB8;          /* Hairline (decorative only) */
  --base-2:#ECE5D6;        /* Sand */
  --base-3:#F7F4EC;        /* Paper */
  --accent:#EE5B24;        /* Signal (fills + markers; never text on light) */
  --accent-2:#A43D10;      /* Signal Deep (links, eyebrows, focus on light) */
  --accent-3:#F9E3D6;      /* Signal Tint (badges) */
  --forest:#2E6A4E;        /* Icons, checks, success */
  --canopy:#173A2D;        /* Dark surface */
  --sage:#A9BDB0;          /* Text + lines on dark */
  --white:#FFFFFF;         /* Form fields only */
  --error:#A3182F; --error-tint:#F8E1E3;
  --success:#2E6A4E; --success-tint:#E1ECE4;
  --notice:#2D5B86; --notice-tint:#E2EAF2;

  --f-head:var(--gp-font--newsreader, 'Newsreader'), Georgia, 'Times New Roman', serif;
  --f-body:var(--gp-font--ibm-plex-sans, 'IBM Plex Sans'), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:var(--gp-font--ibm-plex-mono, 'IBM Plex Mono'), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container:1240px;
  --gutter:24px;
  --section:clamp(64px, 5vw + 40px, 112px);
  --radius:2px;
  --t:.18s ease;
}
@media (max-width:767px){ :root{ --gutter:20px; } }

/* ---------- 2. Tones: every component reads only these variables ---------- */
:root, .dds-tone-paper{
  --bg:var(--base-3); --fg:var(--contrast); --fg-2:var(--contrast-2); --muted:var(--contrast-3);
  --line:var(--base); --rule:var(--contrast); --link:var(--accent-2); --eyebrow:var(--accent-2);
  --arrow:var(--accent-2); --icon:var(--forest); --focus:var(--accent-2);
  --surface:var(--base-3); --tile:var(--base-2);
  --btn-bg:var(--accent); --btn-fg:var(--contrast); --btn-bd:var(--accent);
  --btn-bg-h:var(--contrast); --btn-fg-h:var(--base-3); --btn-bd-h:var(--contrast);
  --out-fg:var(--contrast); --out-bd:var(--contrast); --out-bg-h:var(--contrast); --out-fg-h:var(--base-3);
}
.dds-tone-sand{
  --bg:var(--base-2); --fg:var(--contrast); --fg-2:var(--contrast-2); --muted:var(--contrast-3);
  --line:var(--base); --rule:var(--contrast); --link:var(--accent-2); --eyebrow:var(--accent-2);
  --arrow:var(--accent-2); --icon:var(--forest); --focus:var(--accent-2);
  --surface:var(--base-3); --tile:var(--base-2);
  --btn-bg:var(--accent); --btn-fg:var(--contrast); --btn-bd:var(--contrast); /* ink edge: signal is only 2.72:1 on sand */
  --btn-bg-h:var(--contrast); --btn-fg-h:var(--base-3); --btn-bd-h:var(--contrast);
  --out-fg:var(--contrast); --out-bd:var(--contrast); --out-bg-h:var(--contrast); --out-fg-h:var(--base-3);
}
.dds-tone-canopy, .dds-tone-ink{
  --bg:var(--canopy); --fg:var(--base-3); --fg-2:var(--sage); --muted:var(--sage);
  --line:rgba(169,189,176,.30); --rule:rgba(169,189,176,.65); --link:var(--base-3); --eyebrow:var(--sage);
  --arrow:var(--accent); --icon:var(--base-3); --focus:var(--accent);
  --surface:rgba(19,36,29,.35); --tile:rgba(247,244,236,.06);
  --btn-bg:var(--accent); --btn-fg:var(--contrast); --btn-bd:var(--accent);
  --btn-bg-h:var(--base-3); --btn-fg-h:var(--contrast); --btn-bd-h:var(--base-3);
  --out-fg:var(--base-3); --out-bd:var(--base-3); --out-bg-h:var(--base-3); --out-fg-h:var(--contrast);
}
.dds-tone-ink{ --bg:var(--contrast); }
[class*="dds-tone-"]{ background-color:var(--bg); color:var(--fg); }

/* ---------- 3. Base (GP handles most of this through Customizer settings) ---------- */
*, *::before, *::after{ box-sizing:border-box; } /* GP already does this; kept so the file stands alone */
body{ margin:0; background:var(--base-3); color:var(--contrast); font:400 1.0625rem/1.6 var(--f-body); -webkit-font-smoothing:antialiased; }
@media (max-width:767px){ body{ font-size:1rem; } }
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:500; color:var(--fg); margin:0; text-wrap:balance; }
h1{ font-size:clamp(2.625rem, 1.55rem + 4.1vw, 4.75rem); line-height:1.02; letter-spacing:-.022em; }
h2{ font-size:clamp(2rem, 1.45rem + 2.1vw, 3.25rem); line-height:1.06; letter-spacing:-.016em; }
h3{ font-size:1.625rem; line-height:1.15; letter-spacing:-.008em; }
h4{ font-size:1.375rem; line-height:1.3; letter-spacing:0; }
@media (max-width:767px){ h3{ font-size:1.5rem; } h4{ font-size:1.25rem; } }
h1 em, h2 em{ font-style:italic; font-weight:500; padding-left:.03em; white-space:nowrap; } /* optical nudge so a line-initial italic never overhangs the column */
p{ margin:0; text-wrap:pretty; }
a{ color:var(--link); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--fg); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
img{ max-width:100%; height:auto; }

/* ---------- 4. Layout ---------- */
.dds-section{ position:relative; padding-block:var(--section); }
.dds-inner{ max-width:calc(var(--container) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.dds-section-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px 64px; align-items:end; margin-bottom:clamp(40px, 4vw, 64px); }
.dds-section-head .dds-intro{ color:var(--fg-2); }
.dds-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px 80px; align-items:start; }
.dds-split--4-8{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px 72px; }
/* 3-child split: intro + aside share the left column on desktop; on tablet/mobile the aside drops below the main column. */
.dds-split--aside{ grid-template-areas:"intro main" "aside main"; grid-template-rows:auto 1fr; row-gap:0; }
.dds-split--aside > :nth-child(1){ grid-area:intro; } .dds-split--aside > :nth-child(2){ grid-area:main; } .dds-split--aside > :nth-child(3){ grid-area:aside; align-self:start; }
.dds-sticky{ position:sticky; top:120px; }
@media (max-width:1024px){
  .dds-section-head, .dds-split, .dds-split--4-8{ grid-template-columns:1fr; align-items:start; }
  .dds-split--aside{ grid-template-areas:"intro" "main" "aside"; grid-template-rows:auto; row-gap:40px; }
  .dds-split--aside .dds-aside{ margin-top:0; }
  .dds-sticky{ position:static; }
}

/* ---------- 5. Type helpers ---------- */
.dds-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 20px; text-wrap:balance; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); }
.dds-eyebrow__idx{ display:inline-flex; align-items:center; gap:12px; color:var(--fg); }
.dds-eyebrow__idx::after{ content:""; width:36px; height:1px; background:currentColor; opacity:.45; }
.dds-eyebrow svg{ width:18px; height:18px; stroke-width:1.75; }
.dds-lead{ font-size:1.25rem; line-height:1.55; color:var(--fg-2); }
@media (max-width:767px){ .dds-lead{ font-size:1.125rem; } }
.dds-mono{ font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; }
.dds-small{ font-size:.9375rem; line-height:1.5; color:var(--muted); }

/* ---------- 6. Icons (Tabler outline) ---------- */
.dds-icon, .dds-inline-icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* GB Text / Shape icons: honour Tabler's fill="none" even if GB's own icon CSS sets a fill. */
.gb-shape svg[fill="none"]{ fill:none !important; }
.gb-shape{ line-height:0; }
.dds-icon-tile{ display:grid; place-items:center; flex:none; width:52px; height:52px; background:var(--tile); border:1px solid var(--line); color:var(--icon); }
.dds-icon-tile svg{ width:28px; height:28px; stroke-width:1.5; }

/* ---------- 7. Buttons + links ---------- */
.dds-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.dds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:13px 22px;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); border-radius:var(--radius);
  font:600 1rem/1.2 var(--f-body); letter-spacing:0; text-decoration:none; cursor:pointer;
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
.dds-btn svg{ width:20px; height:20px; stroke-width:1.75; transition:transform var(--t); }
.dds-btn:is(:hover, :focus-visible){ background:var(--btn-bg-h); color:var(--btn-fg-h); border-color:var(--btn-bd-h); }
.dds-btn:hover > :last-child:is(svg, .gb-shape){ transform:translateX(3px); } /* trailing arrow only; a leading icon (Email Drew) stays put */
.dds-btn .gb-shape{ display:inline-flex; transition:transform var(--t); }
.dds-btn--outline{ --btn-bg:transparent; --btn-fg:var(--out-fg); --btn-bd:var(--out-bd); --btn-bg-h:var(--out-bg-h); --btn-fg-h:var(--out-fg-h); --btn-bd-h:var(--out-bg-h); }
.dds-btn--sm{ min-height:44px; padding:10px 16px; }
.dds-btn[aria-disabled="true"], .dds-btn:disabled{ background:var(--base-2); border-color:var(--base); color:var(--contrast-3); cursor:not-allowed; }
@media (max-width:767px){ .dds-btns > .dds-btn{ flex:1 1 100%; } }

.dds-link-arrow{ display:inline-flex; align-items:center; gap:8px; padding-bottom:3px; border-bottom:1px solid var(--accent); color:var(--fg); font:600 1rem/1.3 var(--f-body); text-decoration:none; }
.dds-link-arrow svg{ width:18px; height:18px; color:var(--arrow); stroke-width:1.75; transition:transform var(--t); }
.dds-link-arrow:hover{ color:var(--link); }
.dds-tone-canopy .dds-link-arrow:hover, .dds-tone-ink .dds-link-arrow:hover{ color:var(--sage); }
.dds-link-arrow:hover svg{ transform:translateX(3px); }
.dds-link-arrow .gb-shape{ display:inline-flex; }

/* ---------- 8. Chips, tags, badges ---------- */
.dds-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.dds-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--fg-2); font:500 .75rem/1.2 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
a.dds-chip:hover{ border-color:var(--fg); color:var(--fg); }
.dds-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:var(--radius); background:var(--accent-3); color:var(--accent-2); font:500 .75rem/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; }

/* ---------- 9. Textures ---------- */
.dds-contour{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; } /* clip (not a scroll container) keeps .dds-sticky children sticking; hidden is the fallback */
.dds-contour::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url(../img/contours-light.svg) center/cover no-repeat; opacity:.16; }
.dds-contour--dark::before{ background-image:url(../img/contours-dark.svg); opacity:.13; }
.dds-contour--fade::before{ -webkit-mask-image:linear-gradient(90deg, transparent 20%, #000 64%); mask-image:linear-gradient(90deg, transparent 20%, #000 64%); }
.dds-ruler{ height:9px; border-bottom:1px solid var(--base);
  background:repeating-linear-gradient(90deg, var(--contrast-3) 0 1px, transparent 1px 80px) left bottom/100% 9px no-repeat,
             repeating-linear-gradient(90deg, var(--base) 0 1px, transparent 1px 8px) left bottom/100% 5px no-repeat; }

/* ---------- 10. Image treatments ---------- */
/* Viewfinder: corner brackets from 8 gradients on one pseudo-element. Default = ink brackets with a 1px paper halo, which
   reads on light plates AND on photos, so an owner can swap a plate for a photo without touching classes.
   .dds-vf--light = paper brackets with an ink halo, for dark plates and dark photos. */
.dds-vf{ --vf-c:rgba(19,36,29,.9); --vf-halo:rgba(247,244,236,.85); --vf-inset:12px; --vf-len:20px; --vf-w:2px; position:relative; overflow:hidden; background:var(--base-2); margin:0; }
.dds-vf--light{ --vf-c:rgba(247,244,236,.95); --vf-halo:rgba(19,36,29,.7); }
.dds-vf img{ display:block; width:100%; height:100%; object-fit:cover; }
.dds-vf::after{ content:""; position:absolute; inset:var(--vf-inset); z-index:2; pointer-events:none; transition:inset .24s ease;
  filter:drop-shadow(0 0 1px var(--vf-halo));
  background:
    linear-gradient(var(--vf-c) 0 0) left top/var(--vf-len) var(--vf-w), linear-gradient(var(--vf-c) 0 0) left top/var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf-c) 0 0) right top/var(--vf-len) var(--vf-w), linear-gradient(var(--vf-c) 0 0) right top/var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf-c) 0 0) left bottom/var(--vf-len) var(--vf-w), linear-gradient(var(--vf-c) 0 0) left bottom/var(--vf-w) var(--vf-len),
    linear-gradient(var(--vf-c) 0 0) right bottom/var(--vf-len) var(--vf-w), linear-gradient(var(--vf-c) 0 0) right bottom/var(--vf-w) var(--vf-len);
  background-repeat:no-repeat; }
.dds-vf:hover::after, a:hover .dds-vf::after, a:focus-visible .dds-vf::after{ inset:calc(var(--vf-inset) + 6px); } /* lock-on */
.dds-vf--lg{ --vf-inset:16px; --vf-len:28px; --vf-w:2.5px; }
.dds-vf--4x3{ aspect-ratio:4/3; } .dds-vf--16x9{ aspect-ratio:16/9; } .dds-vf--2x1{ aspect-ratio:2/1; }

/* Map plate: outer ink neatline + inner hairline neatline with ruler ticks (pseudo-element, no extra DOM). */
.dds-plate{ position:relative; margin:0; padding:24px; background:var(--base-3); border:1px solid rgba(19,36,29,.55); }
.dds-plate::before{ content:""; position:absolute; inset:8px; pointer-events:none; border:1px solid var(--base);
  background:
    repeating-linear-gradient(90deg, rgba(19,36,29,.45) 0 1px, transparent 1px 24px) left 20px top 0/calc(100% - 40px) 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(19,36,29,.45) 0 1px, transparent 1px 24px) left 20px bottom 0/calc(100% - 40px) 6px no-repeat,
    repeating-linear-gradient(180deg, rgba(19,36,29,.45) 0 1px, transparent 1px 24px) left 0 top 20px/6px calc(100% - 40px) no-repeat,
    repeating-linear-gradient(180deg, rgba(19,36,29,.45) 0 1px, transparent 1px 24px) right 0 top 20px/6px calc(100% - 40px) no-repeat; }
.dds-plate--simple::before{ background:none; }
.dds-plate .dds-vf{ aspect-ratio:4/3; }
.dds-plate figcaption{ margin-top:12px; font-size:.875rem; line-height:1.45; color:var(--muted); }
.dds-hud{ position:absolute; left:calc(var(--vf-inset) + 12px); top:calc(var(--vf-inset) + 12px); z-index:3; padding:7px 9px; background:rgba(19,36,29,.8); color:var(--base-3); font:500 .75rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:767px){ .dds-plate{ padding:16px; } .dds-plate::before{ inset:6px; } }
/* Below 360 px the decorative HUD chip (aria-hidden) wraps to two lines and covers the drawing (Polish R2). */
@media (max-width:359px){ .dds-hud{ display:none; } }

/* ---------- 11. Header ---------- */
.dds-topbar{ background:var(--contrast); color:var(--sage); }
.dds-topbar .dds-inner{ display:flex; justify-content:flex-end; align-items:center; min-height:44px; }
.dds-topbar a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-inline:4px; color:var(--base-3); font:500 .875rem/1 var(--f-mono); letter-spacing:.02em; text-decoration:none; }
.dds-topbar a svg{ width:16px; height:16px; color:var(--accent); }
.dds-topbar a:hover{ color:var(--accent); }
.dds-topbar a:focus-visible{ outline-color:var(--accent); }
@media (max-width:767px){ .dds-topbar .dds-inner{ justify-content:center; } }

/* ---------- 12. Hero ---------- */
.dds-hero{ padding-block:clamp(40px, 5vw, 88px) clamp(56px, 6vw, 104px); }
.dds-hero::before{ background-position:right -120px top -40px; background-size:1500px auto; opacity:.2; }
.dds-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); grid-template-areas:"copy media" "note media"; column-gap:clamp(40px, 5vw, 80px); align-items:center; }
.dds-hero__copy{ grid-area:copy; align-self:end; }
.dds-hero__media{ grid-area:media; }
.dds-hero__note{ grid-area:note; align-self:start; }
.dds-hero h1{ max-width:6.4em; margin-bottom:24px; } /* 3 lines: "Your property, / seen clearly / from above." */
.dds-hero .dds-lead{ max-width:33em; margin-bottom:32px; }
.dds-checks{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; padding:0; list-style:none; font-size:.9375rem; line-height:1.4; color:var(--fg-2); }
.dds-checks li{ display:inline-flex; align-items:center; gap:8px; }
.dds-checks svg{ width:18px; height:18px; color:var(--icon); stroke-width:2; } /* tone variable: Forest on light, Paper on canopy/ink */
/* Two columns down to 901 px (D13); the grid stacks below 900 px. */
@media (min-width:901px) and (max-width:1024px){
  .dds-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); column-gap:40px; }
  .dds-hero h1, .dds-page-hero__grid:not(.dds-page-hero__grid--text) h1{ font-size:2.5rem; } /* half-width copy column; text heroes (8/4) keep their size */
}
@media (max-width:900px){
  .dds-hero__grid{ grid-template-columns:1fr; grid-template-areas:"copy" "media" "note"; row-gap:36px; }
  .dds-hero__media{ max-width:720px; }
  .dds-hero::before{ opacity:.16; } /* texture reaches under the copy once the grid stacks */
}
@media (max-width:767px){
  .dds-hero{ padding-top:28px; }
  .dds-hero__grid{ row-gap:28px; }
  .dds-hero .dds-lead{ margin-bottom:26px; }
  .dds-checks{ display:grid; gap:10px; margin:0; }
}

/* Preflight checklist — a legend box that hangs off the plate's lower edge (never over the image subject). */
.dds-checklist{ position:relative; z-index:3; margin:-30px 22px 0; padding:16px 20px 18px; background:var(--base-3); border:1px solid var(--contrast); box-shadow:8px 8px 0 rgba(19,36,29,.10); }
.dds-checklist__title{ display:flex; justify-content:space-between; gap:12px; margin:0 0 12px; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); }
.dds-checklist ul{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 20px; margin:0; padding:0; list-style:none; }
.dds-checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:.9375rem; line-height:1.35; color:var(--contrast); }
.dds-checklist :is(.dds-box, li > .gb-shape){ display:grid; place-items:center; flex:none; width:18px; height:18px; margin-top:1px; border:1px solid var(--forest); color:var(--forest); }
.dds-checklist :is(.dds-box, li > .gb-shape) svg{ width:14px; height:14px; stroke-width:2.25; }
@media (max-width:767px){ .dds-checklist{ margin:-18px 10px 0; padding:14px 16px 16px; } .dds-checklist ul{ grid-template-columns:1fr; gap:8px; } }

/* ---------- 13. Trust strip (map legend) ---------- */
.dds-trust{ border-block:1px solid var(--line); }
.dds-trust__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.dds-trust__item{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:start; align-content:start; padding:28px; border-left:1px solid var(--line); }
.dds-trust__item:first-child{ border-left:0; padding-left:0; }
.dds-trust__item svg{ grid-row:span 2; width:28px; height:28px; color:var(--icon); stroke-width:1.5; }
.dds-trust__title{ font:600 1rem/1.3 var(--f-body); color:var(--fg); }
.dds-trust__text{ font-size:.875rem; line-height:1.45; color:var(--muted); }
@media (max-width:1024px){
  .dds-trust__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dds-trust__item{ padding:22px 20px; }
  .dds-trust__item:nth-child(3){ border-left:0; padding-left:0; }
  .dds-trust__item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:767px){ /* 2 x 2, titles only */
  .dds-trust__item{ grid-template-columns:1fr; gap:8px; padding:16px 0 16px 16px; }
  .dds-trust__item:nth-child(odd){ padding-left:0; padding-right:12px; }
  .dds-trust__item svg{ grid-row:auto; width:24px; height:24px; }
  .dds-trust__title{ font-size:.9375rem; }
  .dds-trust__text{ display:none; }
}

/* ---------- 14. Cards (service) ---------- */
.dds-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.dds-card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); color:var(--fg); text-decoration:none; transition:border-color var(--t); }
.dds-card:hover{ border-color:var(--fg); color:var(--fg); }
.dds-card__media{ aspect-ratio:16/9; border-bottom:1px solid var(--line); }
.dds-card__body{ display:flex; flex:1; flex-direction:column; gap:12px; padding:24px 26px 22px; font-size:1rem; line-height:1.55; color:var(--fg-2); }
.dds-card__head{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.dds-card__media + .dds-card__body .dds-icon-tile{ position:relative; z-index:3; margin-top:-52px; background:var(--surface); }
.dds-card h3{ align-self:stretch; font-size:1.625rem; }
.dds-card .dds-card__for{ font-size:.875rem; line-height:1.45; color:var(--muted); }
.dds-card__more{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); color:var(--fg); font:600 .9375rem/1 var(--f-body); }
.dds-card__more svg{ width:20px; height:20px; color:var(--arrow); stroke-width:1.75; transition:transform .2s ease; }
.dds-card:hover .dds-card__more svg{ transform:translateX(4px); }
@media (max-width:1024px){ .dds-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:767px){
  .dds-cards{ grid-template-columns:1fr; gap:12px; }
  .dds-card__media{ display:none; }
  .dds-card__body{ gap:10px; padding:18px 18px 16px; }
  .dds-card__head{ flex-direction:row; align-items:center; gap:14px; }
  .dds-card__head h3{ flex:1 1 0; min-width:0; }
  .dds-card__media + .dds-card__body .dds-icon-tile, .dds-card .dds-icon-tile{ margin-top:0; width:44px; height:44px; }
  .dds-card .dds-icon-tile svg{ width:24px; height:24px; }
  .dds-card h3{ font-size:1.375rem; }
  .dds-card__more{ padding-top:4px; border-top:0; }
}

/* ---------- 15. Audience rows (whole-row links) + routing card ---------- */
.dds-rows{ border-top:1px solid var(--rule); }
.dds-row{ display:grid; grid-template-columns:52px minmax(0,1fr) 44px; gap:8px 22px; align-items:start; padding:24px 0; border-bottom:1px solid var(--line); color:var(--fg); text-decoration:none; }
.dds-row .dds-icon-tile{ width:44px; height:44px; } .dds-row .dds-icon-tile svg{ width:24px; height:24px; }
.dds-row h3{ margin-bottom:6px; font-size:1.5rem; transition:color var(--t); }
.dds-row__body{ font-size:1rem; line-height:1.55; color:var(--fg-2); }
.dds-row .dds-tags{ margin-top:12px; }
.dds-arrow-box{ display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--fg); color:var(--fg); transition:background-color var(--t), color var(--t); }
.dds-arrow-box svg{ width:20px; height:20px; stroke-width:1.75; transition:transform var(--t); }
.dds-row:hover{ color:var(--fg); }
.dds-row:hover h3{ color:var(--link); }
.dds-row:hover .dds-arrow-box{ background:var(--fg); color:var(--bg); }
.dds-row:hover .dds-arrow-box svg{ transform:translateX(2px); }
.dds-route{ color:var(--fg-2); display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; align-items:start; margin-top:28px; padding:22px 24px; border:1.5px dashed var(--muted); }
.dds-route .dds-icon-tile{ grid-row:span 3; width:44px; height:44px; } .dds-route .dds-icon-tile svg{ width:24px; height:24px; }
.dds-route h3{ font-size:1.375rem; }
.dds-route .dds-link-arrow{ justify-self:start; margin-top:8px; }
@media (max-width:767px){
  .dds-row{ grid-template-columns:minmax(0,1fr) 36px; gap:8px 14px; padding:20px 0; }
  .dds-row .dds-icon-tile{ display:none; }
  .dds-row h3{ font-size:1.3125rem; }
  .dds-arrow-box{ width:36px; height:36px; }
  .dds-route{ grid-template-columns:1fr; padding:20px; }
  .dds-route .dds-icon-tile{ display:none; }
}

/* ---------- 16. Steps (flight path) ---------- */
.dds-steps{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:36px; margin:0; padding:0; list-style:none; }
.dds-steps::before{ content:""; position:absolute; left:10px; right:0; top:10px; border-top:2px dashed rgba(169,189,176,.55); }
.dds-step{ position:relative; padding-top:48px; font-size:1rem; line-height:1.6; color:var(--fg-2); }
.dds-step__wp{ position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--bg), 0 0 0 7px rgba(169,189,176,.7); }
.dds-step:last-child .dds-step__wp{ background:var(--base-3); }
.dds-step__label{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); }
.dds-step__label svg{ width:20px; height:20px; color:var(--icon); stroke-width:1.5; }
.dds-step h3{ margin-bottom:10px; font-size:1.5rem; }
.dds-band-foot{ color:var(--fg-2); display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.dds-band-foot > p{ max-width:36em; margin-right:auto; }
@media (max-width:1024px){ .dds-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:44px; } .dds-steps::before{ display:none; } }
@media (max-width:767px){
  .dds-steps{ grid-template-columns:1fr; row-gap:32px; }
  .dds-steps::before{ display:block; left:10px; right:auto; top:12px; bottom:12px; border-top:0; border-left:2px dashed rgba(169,189,176,.55); }
  .dds-step{ padding:0 0 0 50px; }
  .dds-band-foot{ margin-top:40px; }
  .dds-band-foot .dds-btn{ flex:1 1 100%; }
}

/* ---------- 17. Deliverables list ---------- */
.dds-dl{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:56px; margin:0; border-top:1px solid var(--rule); }
.dds-dl > div{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:4px 18px; align-content:start; padding:20px 0; border-bottom:1px solid var(--line); }
.dds-dl dt{ grid-row:span 2; padding-top:3px; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--link); }
.dds-dl dd{ margin:0; }
.dds-dl__title{ font:600 1.0625rem/1.35 var(--f-body); color:var(--fg); }
.dds-dl__desc{ font-size:.9375rem; line-height:1.5; color:var(--muted); }
@media (max-width:767px){ .dds-dl{ grid-template-columns:1fr; } .dds-dl > div{ grid-template-columns:78px minmax(0,1fr); padding:16px 0; } }

/* ---------- 18. FAQ (GB Pro Accordion markup) + personal aside ---------- */
.dds-faq{ border-top:1px solid var(--rule); }
.dds-faq .gb-accordion__item{ border-bottom:1px solid var(--line); }
.dds-faq .gb-accordion__toggle{ display:grid; grid-template-columns:44px minmax(0,1fr) 32px; gap:8px; align-items:start; width:100%; margin:0; padding:22px 0; background:transparent; border:0; border-radius:0; color:var(--fg); text-align:left; cursor:pointer; font:500 1.375rem/1.3 var(--f-head); }
.dds-faq .gb-accordion__toggle:is(:hover, :focus){ background:transparent; color:var(--fg); }
.dds-faq__ref{ font:500 .75rem/2.4 var(--f-mono); letter-spacing:.1em; color:var(--link); }
.dds-faq .gb-accordion__toggle-icon{ display:grid; place-items:center; width:32px; height:32px; margin-top:1px; border:1px solid var(--fg); transition:background-color var(--t), color var(--t); }
.dds-faq .gb-accordion__toggle-icon svg{ width:16px; height:16px; stroke-width:2; }
.dds-faq .gb-accordion__toggle:hover .gb-accordion__toggle-icon{ background:var(--fg); color:var(--bg); }
.dds-faq .gb-accordion__content{ color:var(--fg-2); }
.dds-faq .gb-accordion__content > *{ max-width:40em; margin:0; padding:0 40px 24px 52px; }
.dds-aside{ font-size:.9375rem; line-height:1.55; color:var(--fg-2); display:flex; align-items:flex-start; gap:16px; margin-top:32px; padding:22px 24px; background:var(--surface); border:1px solid var(--line); }
.dds-aside .dds-icon-tile{ width:44px; height:44px; } .dds-aside .dds-icon-tile svg{ width:22px; height:22px; }
.dds-aside__title{ display:block; margin-bottom:4px; font:500 1.25rem/1.3 var(--f-head); color:var(--fg); }
.dds-aside a{ font-weight:600; overflow-wrap:anywhere; }
@media (max-width:767px){
  .dds-faq .gb-accordion__toggle{ grid-template-columns:34px minmax(0,1fr) 32px; padding:18px 0; font-size:1.1875rem; }
  .dds-faq .gb-accordion__content > *{ padding:0 0 20px 42px; }
  .dds-aside{ padding:18px; }
}

/* ---------- 19. CTA panel + title block ---------- */
.dds-cta{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px 64px; align-items:center; padding:clamp(32px, 5vw, 72px); }
.dds-cta::before{ background-position:left 40% center; }
.dds-cta h2{ margin-bottom:18px; }
.dds-cta .dds-intro{ max-width:32em; margin-bottom:30px; font-size:1.125rem; color:var(--fg-2); }
.dds-cta .dds-note{ margin-top:18px; font-size:.9375rem; color:var(--fg-2); }
.dds-cta .dds-note a{ color:var(--fg); font-weight:600; overflow-wrap:anywhere; }
.dds-cta .dds-note a:hover{ color:var(--sage); }
.dds-title-block{ margin:0; border:1px solid var(--rule); background:var(--surface); }
.dds-title-block > div{ display:grid; grid-template-columns:112px minmax(0,1fr); border-bottom:1px solid var(--line); }
.dds-title-block > div:last-child{ border-bottom:0; }
.dds-title-block dt{ padding:16px; border-right:1px solid var(--line); font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); }
.dds-title-block dd{ margin:0; padding:14px 16px; font-size:1rem; line-height:1.45; color:var(--fg); }
@media (max-width:1024px){ .dds-cta{ grid-template-columns:1fr; } }
@media (max-width:767px){
  .dds-cta{ padding:32px 20px; }
  .dds-title-block > div{ grid-template-columns:88px minmax(0,1fr); }
  .dds-title-block dt, .dds-title-block dd{ padding:12px; }
}

/* ---------- 20. Footer ---------- */
.dds-footer{ position:relative; overflow:hidden; isolation:isolate; padding-top:72px; }
.dds-footer::before{ content:""; position:absolute; right:-200px; top:-120px; z-index:-1; width:900px; height:620px; background:url(../img/contours-dark.svg) center/cover no-repeat; opacity:.08; }
.dds-footer__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:40px; }
.dds-footer__brand img{ display:block; height:72px; width:auto; margin-bottom:22px; }
.dds-footer__brand p{ max-width:30em; margin-bottom:18px; font-size:.9375rem; line-height:1.6; color:var(--sage); }
.dds-footer h2{ margin:6px 0 16px; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--base-3); }
.dds-footer ul{ display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.dds-footer ul a{ display:inline-block; padding:5px 0; color:var(--base-3); font-size:.9375rem; text-decoration:none; }
.dds-footer a:hover{ color:var(--accent); text-decoration:underline; }
.dds-footer__mail{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--base-3); font:500 .875rem/1.4 var(--f-mono); text-decoration:none; }
.dds-footer__mail svg{ width:18px; height:18px; color:var(--accent); }
.dds-footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 28px; margin-top:48px; padding:20px 0 28px; border-top:1px solid rgba(169,189,176,.25); font-size:.8125rem; color:var(--sage); }
.dds-footer__bottom a{ display:inline-block; padding:6px 0; color:var(--base-3); font-size:.8125rem; }
@media (max-width:1024px){ .dds-footer__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } .dds-footer__brand{ grid-column:1/-1; } }
@media (max-width:767px){ .dds-footer{ padding-top:56px; } .dds-footer__grid{ grid-template-columns:1fr 1fr; gap:32px 20px; } .dds-footer__contact{ grid-column:1/-1; } }


/* ---------- 21. Interior page hero, service hero, cinematic hero, breadcrumbs ---------- */
.dds-page-hero{ padding-block:clamp(40px, 4vw, 72px) clamp(48px, 5vw, 88px); border-bottom:1px solid var(--line); }
.dds-page-hero::before{ background-position:right -160px top -60px; background-size:1400px auto; opacity:.18; }
.dds-page-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.dds-page-hero__grid--text{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); align-items:end; }
.dds-page-hero h1{ max-width:14ch; margin-bottom:20px; font-size:clamp(2.5rem, 1.7rem + 3vw, 4rem); line-height:1.04; }
.dds-page-hero .dds-lead{ max-width:34em; }
.dds-page-hero .dds-btns{ margin-top:28px; }
.dds-crumbs{ display:flex; flex-wrap:wrap; gap:6px 10px; margin:0 0 28px; padding:0; list-style:none; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
/* The separator belongs to the item before it (::after), so a wrapped crumb never starts its line with "/" (Polish R2). */
.dds-crumbs li:not(:last-child)::after{ content:"/"; margin-left:10px; color:var(--line); }
.dds-crumbs a{ color:var(--fg-2); text-decoration:none; } .dds-crumbs a:hover{ color:var(--link); text-decoration:underline; }
.dds-crumbs [aria-current]{ color:var(--link); }
.dds-hero--cinematic{ padding:0; }
.dds-hero--cinematic .dds-vf{ aspect-ratio:21/9; max-height:560px; width:100%; --vf-inset:20px; --vf-len:34px; --vf-w:2.5px; }
.dds-hero--cinematic .dds-cinematic__copy{ padding-block:clamp(32px, 4vw, 56px); }
.dds-timecode{ position:absolute; right:calc(var(--vf-inset) + 14px); bottom:calc(var(--vf-inset) + 14px); z-index:3; display:inline-flex; align-items:center; gap:8px; padding:7px 9px; background:rgba(19,36,29,.8); color:var(--base-3); font:500 .75rem/1 var(--f-mono); letter-spacing:.08em; }
.dds-timecode::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
@media (min-width:901px) and (max-width:1024px){ .dds-page-hero__grid:not(.dds-page-hero__grid--text){ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); } } /* text heroes keep 8/4 */
@media (max-width:900px){ .dds-page-hero__grid, .dds-page-hero__grid--text{ grid-template-columns:1fr; } }
@media (max-width:767px){ .dds-hero--cinematic .dds-vf{ aspect-ratio:16/9; --vf-inset:12px; --vf-len:20px; } .dds-crumbs{ margin-bottom:20px; } }

/* ---------- 22. Notices (state colours always paired with an icon + words) ---------- */
.dds-notice{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-left:4px solid var(--n-c); background:var(--n-bg); color:var(--contrast); font-size:.9375rem; line-height:1.5; }
.dds-notice svg{ flex:none; width:22px; height:22px; margin-top:1px; color:var(--n-c); stroke-width:1.75; }
.dds-notice strong{ color:var(--n-c); }
.dds-notice--error{ --n-c:var(--error); --n-bg:var(--error-tint); }
.dds-notice--success{ --n-c:var(--success); --n-bg:var(--success-tint); }
.dds-notice--info{ --n-c:var(--notice); --n-bg:var(--notice-tint); }

/* ---------- 23. Forms — Formidable (wrap the form block in a GB element with class dds-form) ---------- */
.dds-form{ max-width:720px; }
.dds-form .frm_forms.with_frm_style{
  --font:var(--f-body); --font-size:16px; --label-color:var(--contrast); --text-color:var(--contrast); --border-color:var(--contrast-3);
  --border-color-active:var(--contrast); --bg-color:var(--white); --bg-color-active:var(--white); --border-radius:2px; --field-height:48px; --field-border-width:1.5px;
  --error-text:var(--error); --error-border:var(--error); --success-bg-color:var(--success-tint); --success-text-color:var(--contrast);
  --submit-bg-color:var(--accent); --submit-border-color:var(--accent); --submit-text-color:var(--contrast);
  --submit-hover-bg-color:var(--contrast); --submit-hover-border-color:var(--contrast); --submit-hover-color:var(--base-3);
  --progress-active-bg-color:var(--accent); --progress-bg-color:var(--base-3); --progress-color:var(--contrast); --toggle-on-color:var(--contrast);
  font-family:var(--f-body); color:var(--contrast);
}
.dds-form .frm_forms.with_frm_style fieldset{ margin:0; padding:0; border:0; min-width:0; }
.dds-form .frm_forms.with_frm_style .frm_form_field{ margin:0 0 22px; }
.dds-form .frm_forms.with_frm_style .frm_primary_label{ display:block; margin:0 0 8px; padding:0; color:var(--contrast); font:600 1rem/1.35 var(--f-body); }
.dds-form .frm_forms.with_frm_style .frm_required{ color:var(--accent-2); }
.dds-form .frm_forms.with_frm_style .frm_description{ margin-top:6px; padding:0; color:var(--contrast-3); font-size:.875rem; line-height:1.45; }
.dds-form .frm_forms.with_frm_style :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea){
  box-sizing:border-box; width:100%; min-height:48px; margin:0; padding:12px 14px; background-color:var(--white); color:var(--contrast);
  border:1.5px solid var(--contrast-3); border-radius:2px; box-shadow:none; font:400 1rem/1.4 var(--f-body);
  transition:border-color var(--t), box-shadow var(--t);
}
.dds-form .frm_forms.with_frm_style textarea{ min-height:132px; resize:vertical; }
.dds-form .frm_forms.with_frm_style select:not([multiple]){ appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313241D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-position:right 14px center; background-size:18px; background-repeat:no-repeat; }
.dds-form .frm_forms.with_frm_style ::placeholder{ color:var(--contrast-3); opacity:1; }
.dds-form .frm_forms.with_frm_style :is(input, select, textarea):hover{ border-color:var(--contrast); }
.dds-form .frm_forms.with_frm_style :is(input, select, textarea):focus{ outline:2px solid var(--accent-2); outline-offset:3px; border-color:var(--contrast); box-shadow:none; }
.dds-form .frm_forms.with_frm_style .frm_blank_field :is(input, select, textarea){ border-color:var(--error); border-width:2px; }
.dds-form .frm_forms.with_frm_style .frm_error{ display:flex; align-items:center; gap:6px; margin-top:8px; padding:0; color:var(--error); font:600 .875rem/1.4 var(--f-body); }
.dds-form .frm_forms.with_frm_style .frm_error::before{ content:""; flex:none; width:16px; height:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
.dds-form .frm_forms.with_frm_style .frm_error_style{ margin:0 0 24px; padding:14px 16px; border:0; border-left:4px solid var(--error); border-radius:0; background:var(--error-tint); color:var(--contrast); font-size:.9375rem; }
/* Option cards for radio / checkbox groups */
.dds-form .frm_forms.with_frm_style .frm_opt_container{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox){ margin:0; }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label{ display:flex; align-items:center; gap:12px; min-height:52px; padding:12px 14px; background:var(--white); border:1.5px solid var(--contrast-3); border-radius:2px; color:var(--contrast); font:400 1rem/1.35 var(--f-body); cursor:pointer; transition:border-color var(--t), background-color var(--t); }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) input{ flex:none; width:20px; height:20px; margin:0; accent-color:var(--contrast); }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label:hover{ border-color:var(--contrast); }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label:has(input:checked){ border-color:var(--contrast); box-shadow:inset 0 0 0 1px var(--contrast); background:var(--accent-3); }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label:has(input:focus-visible){ outline:2px solid var(--accent-2); outline-offset:3px; }
/* Step label (an HTML field at the top of each page): "STEP 1 / 4 · The property" */
.dds-form-step{ display:flex; align-items:center; gap:12px; margin:0 0 6px; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); }
.dds-form-step::after{ content:""; flex:1; height:1px; background:var(--base); }
/* Rootline progress as waypoints (Formidable progress type "rootline", titles on, numbers hidden visually) */
.dds-form .frm_forms.with_frm_style .frm_rootline_group{ margin:0 0 36px; }
.dds-form .frm_forms.with_frm_style .frm_rootline{ position:relative; display:grid; grid-template-columns:repeat(var(--steps, 4), minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.dds-form .frm_forms.with_frm_style .frm_rootline_single{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:0; padding:0; }
.dds-form .frm_forms.with_frm_style .frm_rootline_single + .frm_rootline_single::before{ content:""; position:absolute; top:11px; left:calc(-100% + 34px); right:calc(100% + 10px); border-top:2px dashed var(--contrast-3); opacity:.6; }
.dds-form .frm_forms.with_frm_style .frm_rootline_single input{ position:relative; z-index:1; width:24px; height:24px; min-height:0; margin:0; padding:0; border-radius:50%; border:1.5px solid var(--contrast-3); background:var(--base-3); color:transparent; font-size:0; cursor:default; box-shadow:0 0 0 5px var(--base-3); }
.dds-form .frm_forms.with_frm_style .frm_rootline_single input.frm_page_back{ background:var(--contrast); border-color:var(--contrast); cursor:pointer; }
.dds-form .frm_forms.with_frm_style .frm_rootline_single.frm_current_page input{ background:var(--accent); border-color:var(--contrast); box-shadow:0 0 0 5px var(--base-3), 0 0 0 6px var(--contrast); }
.dds-form .frm_forms.with_frm_style .frm_rootline_title{ font:500 .75rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--contrast-3); }
.dds-form .frm_forms.with_frm_style .frm_current_page .frm_rootline_title{ color:var(--contrast); }
/* Buttons */
.dds-form .frm_forms.with_frm_style .frm_submit{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }
.dds-form .frm_forms.with_frm_style .frm_submit :is(button, input[type=submit]){ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; margin:0; padding:13px 24px; background:var(--accent); border:1px solid var(--accent); border-radius:2px; color:var(--contrast); font:600 1rem/1.2 var(--f-body); cursor:pointer; box-shadow:none; transition:background-color var(--t), color var(--t), border-color var(--t); }
.dds-form .frm_forms.with_frm_style .frm_submit :is(button, input[type=submit]):is(:hover, :focus-visible){ background:var(--contrast); border-color:var(--contrast); color:var(--base-3); }
.dds-form .frm_forms.with_frm_style .frm_submit :is(button, input).frm_prev_page{ background:transparent; border-color:var(--contrast); color:var(--contrast); }
.dds-form .frm_forms.with_frm_style .frm_submit :is(button, input).frm_prev_page:is(:hover, :focus-visible){ background:var(--contrast); color:var(--base-3); }
.dds-form .frm_forms.with_frm_style .frm_submit :is(button, input[type=submit]):focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
.dds-form .frm_forms.with_frm_style .frm_submit :is(button, input)[disabled]{ background:var(--base-2); border-color:var(--base); color:var(--contrast-3); cursor:not-allowed; }
.dds-form .frm_forms.with_frm_style .frm_message{ margin:0; padding:18px 20px; border:0; border-left:4px solid var(--success); border-radius:0; background:var(--success-tint); color:var(--contrast); font-size:1rem; }
.dds-form .frm_forms.with_frm_style .frm_message h2, .dds-form .frm_forms.with_frm_style .frm_message h3{ margin:0 0 6px; font-size:1.5rem; }
@media (max-width:767px){
  .dds-form .frm_forms.with_frm_style .frm_opt_container{ grid-template-columns:1fr; }
  .dds-form .frm_forms.with_frm_style .frm_rootline_title{ font-size:.75rem; letter-spacing:.06em; }
  .dds-form .frm_forms.with_frm_style .frm_submit :is(button, input[type=submit]){ flex:1 1 100%; }
  .dds-form .frm_forms.with_frm_style .frm_submit :is(button, input).frm_prev_page{ order:2; }
}

/* ---------- 24. Empty state (Work), article cards (Resources), 404 ---------- */
.dds-empty{ color:var(--fg-2); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 4vw, 56px); align-items:center; padding:clamp(20px, 3vw, 32px); background:var(--surface); border:1px solid var(--line); }
.dds-empty .dds-vf{ aspect-ratio:4/3; }
.dds-empty h2{ margin-bottom:14px; font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.dds-empty .dds-btns{ margin-top:24px; }
.dds-post-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.dds-post-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); color:var(--fg); text-decoration:none; transition:border-color var(--t); }
.dds-post-card:hover{ border-color:var(--fg); color:var(--fg); }
.dds-post-card .dds-vf{ aspect-ratio:16/9; border-bottom:1px solid var(--line); }
.dds-post-card__fallback{ width:100%; height:100%; background:var(--base-2) url(../img/contours-light.svg) center/180% auto no-repeat; }
.dds-post-card__body{ display:flex; flex:1; flex-direction:column; gap:10px; padding:22px 24px 24px; font-size:1rem; line-height:1.55; color:var(--fg-2); }
.dds-post-card__meta{ font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--link); }
.dds-post-card h3{ font-size:1.5rem; }
@media (max-width:1024px){ .dds-empty, .dds-post-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:767px){ .dds-empty, .dds-post-cards{ grid-template-columns:1fr; } }

/* ---------- 25. Mobile menu — GP Menu Plus off-canvas panel (#generate-slideout-menu) ---------- */
.dds-offcanvas{ width:min(360px, 88vw); min-height:100%; padding:20px 24px 32px; background:var(--canopy); color:var(--base-3); display:flex; flex-direction:column; }
.dds-offcanvas__close{ align-self:flex-end; display:grid; place-items:center; width:44px; height:44px; margin:0 -8px 8px 0; background:transparent; border:1px solid rgba(169,189,176,.5); border-radius:2px; color:var(--base-3); cursor:pointer; }
.dds-offcanvas__close svg{ width:22px; height:22px; }
.dds-offcanvas ul{ margin:0; padding:0; list-style:none; border-top:1px solid rgba(169,189,176,.3); }
.dds-offcanvas ul a{ display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:12px 0; border-bottom:1px solid rgba(169,189,176,.3); color:var(--base-3); font:500 1.375rem/1.2 var(--f-head); text-decoration:none; }
.dds-offcanvas ul a:hover{ color:var(--base-3); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:6px; }
.dds-offcanvas ul a[aria-current]{ padding-left:14px; box-shadow:inset 3px 0 0 var(--accent); } /* signal is 3.67:1 on canopy: marker only, never text */
.dds-offcanvas .dds-btn{ margin-top:28px; }
.dds-offcanvas__mail{ margin-top:20px; color:var(--sage); font-size:.9375rem; }
.dds-offcanvas__mail a{ color:var(--base-3); font-weight:600; }

/* ---------- 26. Motion ---------- */
@media (prefers-reduced-motion:reduce){ *, *::before, *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }