/* ==========================================================================================================
   company.css — company pages (How it works, Safety & compliance, About, Work) and the project single template.
   Owner: company agent (.build/content/company/*, docs/HANDOFF-company.md). Enqueued by inc/company.php after
   dds.css + wp.css on those views only, and added to the block editor styles.

   Patterns that lib/components.js + dds.css don't cover. Hooks are data-co="…" attributes (GB blocks have no
   className support and the global-class list is a shared file), so nothing here collides with dds-* classes.
   Tone variables only (DESIGN §4.7); the one literal colour is the flight-path sage rgba, copied from dds.css §16.
   ========================================================================================================== */

/* ---------- Hero legend: "On this page" / route list in the text hero's right column (a title-block cousin) ----------
   Two navs per legend: [data-co=legend] (the full list, ≥ 768) and [data-co=legend-compact] (≤ 767: a closed one-item
   GB Pro accordion, "On this page · 7 steps", holding the same links). Only one is displayed at a time, so only one
   "On this page" landmark is exposed (D14). */
:is([data-co="legend"], [data-co="legend-compact"]){ background:var(--surface); border:1px solid var(--rule); }
[data-co="legend"] > :first-child{ display:flex; justify-content:space-between; gap:12px; margin:0; padding:14px 18px; border-bottom:1px solid var(--line); font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--eyebrow); }
:is([data-co="legend"], [data-co="legend-compact"]) ol{ margin:0; padding:6px 18px 8px; list-style:none; }
:is([data-co="legend"], [data-co="legend-compact"]) li + li{ border-top:1px solid var(--line); }
:is([data-co="legend"], [data-co="legend-compact"]) a{ display:grid; grid-template-columns:var(--co-label, 52px) minmax(0,1fr) 18px; align-items:center; gap:10px; min-height:44px; padding:8px 0; color:var(--fg); font-size:.9375rem; line-height:1.35; text-decoration:none; }
:is([data-co="legend"], [data-co="legend-compact"]) a > .gb-text{ display:contents; }
:is([data-co="legend"], [data-co="legend-compact"]) a > .gb-text > span:first-child{ font:500 .75rem/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
:is([data-co="legend"], [data-co="legend-compact"]) a svg{ width:18px; height:18px; color:var(--arrow); stroke-width:1.75; transition:transform var(--t); }
:is([data-co="legend"], [data-co="legend-compact"]) a:hover{ color:var(--link); }
:is([data-co="legend"], [data-co="legend-compact"]) a:hover > .gb-text > span:last-child{ text-decoration:underline; text-underline-offset:3px; }
:is([data-co="legend"], [data-co="legend-compact"]) a:hover svg{ transform:translateY(2px); }
:is([data-co="legend"], [data-co="legend-compact"]) a:focus-visible{ outline-offset:2px; } /* drawn into the list padding, clear of the "WP 01" label */
:is([data-co="legend"], [data-co="legend-compact"])[data-co-label="short"]{ --co-label:28px; }
[data-co="legend"][data-co-cols="2"] ol{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:24px; }
[data-co="legend"][data-co-cols="2"] li + li{ border-top:0; }
[data-co="legend"][data-co-cols="2"] li:nth-child(n+3){ border-top:1px solid var(--line); }
[data-co="legend"][data-co-cols="2"] a{ grid-template-columns:var(--co-label, 52px) minmax(0,1fr); }
[data-co="legend"][data-co-cols="2"] a > .gb-shape{ display:none; }
/* Compact legend: the toggle reads like the full legend's mono title row, with a chevron that turns when open. */
[data-co="legend-compact"]{ display:none; }
[data-co="legend-compact"] .gb-accordion__toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; margin:0; padding:12px 16px; background:transparent; border:0; border-radius:0; color:var(--eyebrow); text-align:left; cursor:pointer; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; }
[data-co="legend-compact"] .gb-accordion__toggle:is(:hover, :focus, :active){ background:transparent; color:var(--eyebrow); }
[data-co="legend-compact"] .gb-accordion__toggle:focus-visible{ outline-offset:-2px; }
[data-co="legend-compact"] .gb-accordion__toggle-icon{ display:inline-flex; flex:none; color:var(--arrow); }
[data-co="legend-compact"] .gb-accordion__toggle-icon svg{ width:18px; height:18px; stroke-width:1.75; transition:transform var(--t); }
[data-co="legend-compact"] .gb-accordion__item-open > .gb-accordion__toggle .gb-accordion__toggle-icon svg{ transform:rotate(180deg); }
[data-co="legend-compact"] .gb-accordion__item-open > .gb-accordion__toggle{ border-bottom:1px solid var(--line); }
/* Polish R3: at 320 "ON THIS PAGE · 10 SECTIONS" wrapped to two lines; below 360 px the unit word drops ("· 10"). */
@media (max-width:359px){ [data-co="legend-compact"] .dds-co-unit{ display:none; } }
@media (max-width:767px){
  [data-co="legend"]{ display:none; }
  [data-co="legend-compact"]{ display:block; }
  :is([data-co="legend"], [data-co="legend-compact"]) ol{ padding-inline:16px; }
  [data-co="legend"] > :first-child{ padding-inline:16px; }
  [data-co="legend"][data-co-cols="2"] ol{ grid-template-columns:1fr; }
  [data-co="legend"][data-co-cols="2"] li:nth-child(n+2){ border-top:1px solid var(--line); }
}

/* Mono heading for a hero aside (an H2 styled as a label, like the footer column titles, DESIGN §5.4). */
[data-co="aside-title"]{ margin:0 0 12px; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); }
[data-co="aside-link"]{ margin-top:18px; }

/* Facts card (dl.dds-title-block with gated rows): labels like "Business" never break mid-word on phones. */
[data-co="facts"] dt{ overflow-wrap:normal; word-break:normal; hyphens:none; }
@media (max-width:767px){ [data-co="facts"] > div{ grid-template-columns:104px minmax(0,1fr); } }
/* 901–1024: the hero stays two columns (D13). The About hero's facts card gets a 7/5 split instead of the text hero's
   8/4, and a slimmer label column, so the email address stays on one line. */
@media (min-width:901px) and (max-width:1024px){
  .dds-page-hero__grid--text:has(> div > div > [data-co="facts"]){ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  [data-co="facts"] > div{ grid-template-columns:88px minmax(0,1fr); }
  [data-co="facts"] :is(dt, dd){ padding:12px; }
  [data-co="facts"] dd{ font-size:.9375rem; }
}

/* ---------- Vertical flight path (How it works): dds-steps in one column with a dashed segment per step ---------- */
.dds-steps[data-co="vsteps"]{ --co-gap:52px; grid-template-columns:minmax(0,1fr); row-gap:var(--co-gap); }
.dds-steps[data-co="vsteps"]::before{ display:none; }
[data-co="vsteps"] > .dds-step{ padding:0 0 0 64px; }
[data-co="vsteps"] > .dds-step:not(:last-child)::before{ content:""; position:absolute; left:10px; top:12px; bottom:calc(-1 * (var(--co-gap) + 11px)); border-left:2px dashed rgba(169,189,176,.55); }
[data-co="vsteps"] .dds-step__wp{ z-index:1; }
[data-co="vsteps"] .dds-step h3{ font-size:1.75rem; margin-bottom:14px; }
[data-co="vsteps"] .dds-step > p + p,
[data-co="vsteps"] .dds-step > p + ul,
[data-co="vsteps"] .dds-step > ul + p{ margin-top:12px; }
[data-co="vsteps"] .dds-step > :is(p, ul){ max-width:40em; }
@media (max-width:767px){
  .dds-steps[data-co="vsteps"]{ --co-gap:40px; }
  [data-co="vsteps"] > .dds-step{ padding-left:48px; }
  [data-co="vsteps"] .dds-step h3{ font-size:1.5rem; }
}

/* A Business Info line inside a step or prose block: a quiet note set off by a short rule. */
[data-co="bi-note"]{ padding-left:14px; border-left:2px solid var(--line); }
/* A note after the Part 107 rule grid (the certificate number, once set): clear of the grid's last rule. */
[data-co="rules"] + [data-co="bi-note"]{ margin-top:28px; }
/* Consecutive notes share one continuous rule. */
.dds-step > [data-co="bi-note"] + [data-co="bi-note"],
[data-co="prose"] > [data-co="bi-note"] + [data-co="bi-note"]{ margin-top:0; padding-top:8px; }

/* ---------- Lists (prose bullets): short Signal Deep dash on light, Signal on dark ---------- */
[data-co="list"]{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
[data-co="list"] > li{ position:relative; padding-left:24px; }
[data-co="list"] > li::before{ content:""; position:absolute; left:2px; top:.8em; width:10px; height:2px; background:var(--arrow); }

/* ---------- Prose column (paragraphs + lists built from GB Text blocks) ---------- */
[data-co="prose"]{ color:var(--fg-2); max-width:42em; }
[data-co="prose"] > * + *{ margin-top:1.1em; }
[data-co="prose"] strong{ color:var(--fg); font-weight:600; }
[data-co="prose"] > .dds-notice, [data-co="prose"] > .dds-checks{ margin-top:1.5em; }
[data-co="prose"] .dds-lead{ max-width:none; }

/* ---------- Chapters: 4/8 rows with a heading rail, separated by an ink rule (long reference pages) ---------- */
[data-co~="chapter"]{ padding-block:clamp(44px, 4vw, 64px); border-top:1px solid var(--rule); }
[data-co~="chapter"]:first-child{ padding-top:0; border-top:0; }
[data-co~="chapter"]:last-child{ padding-bottom:0; }
[data-co~="chapter"] .dds-eyebrow{ margin-bottom:16px; }
/* Stacked 4/8 and 5/7 rows (chapters included): one head-to-content gap instead of the 40 px grid gap on top of the
   heading's own margin (review #25). The aside variant keeps its 40 px between the FAQ list and the aside card. */
@media (max-width:1024px){
  .dds-split:not(.dds-split--aside){ row-gap:20px; }
  /* …but a left column that ends in links or buttons (not a heading or lead) keeps 40 px before the next block. */
  .dds-split:not(.dds-split--aside):not([data-co="expect"]) > :first-child > :last-child:is(.dds-links, .dds-link-arrow, .dds-btns){ margin-bottom:20px; }
}

/* A section with a sticky column AND the contour texture: dds-contour's overflow:hidden makes the section the
   sticky element's scroll container (so it never sticks). overflow:clip clips the texture the same way without that. */
.dds-contour[data-co="sticky-band"]{ overflow:clip; }

/* ---------- Rule / item grid: icon tile + H3 + text, two columns between hairlines ---------- */
[data-co="rules"]{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:56px; margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); }
[data-co="rules"] > li{ display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto 1fr; gap:8px 20px; align-content:start; padding:28px 0; border-bottom:1px solid var(--line); }
[data-co="rules"] > li > .dds-icon-tile{ grid-row:span 2; }
[data-co="rules"] > li > h3{ align-self:center; font-size:1.375rem; line-height:1.25; }
[data-co="rules"] > li > p{ color:var(--fg-2); }
.dds-tone-sand [data-co="rules"] .dds-icon-tile{ background:var(--surface); }
/* An odd count (Safety's Part 107 grid has 7 cards while the gated pilot card is hidden): the last card takes the whole
   row, so both columns end on one continuous rule; its text keeps the width of a single column. */
@media (min-width:768px){
  [data-co="rules"]:not([data-co-cols="1"]) > li:last-child:nth-child(odd){ grid-column:1 / -1; grid-template-columns:52px minmax(0, calc((100% - 56px) / 2 - 72px)); }
}
@media (max-width:767px){
  [data-co="rules"]{ grid-template-columns:minmax(0,1fr); }
  [data-co="rules"] > li{ grid-template-columns:44px minmax(0,1fr); gap:6px 16px; padding:22px 0; }
  [data-co="rules"] > li > .dds-icon-tile{ width:44px; height:44px; }
  [data-co="rules"] > li > .dds-icon-tile svg{ width:24px; height:24px; }
  [data-co="rules"] > li > h3{ font-size:1.25rem; }
  [data-co="rules"] > li > p{ grid-column:1 / -1; }
}

/* ---------- Check lists as a column (dds-checks is a wrapping row by default) ---------- */
.dds-checks[data-co="checks"]{ display:grid; gap:14px; margin:0; font-size:1rem; line-height:1.55; }
.dds-checks[data-co="checks"] li{ align-items:flex-start; gap:12px; }
.dds-checks[data-co="checks"] li > .gb-shape{ margin-top:3px; }
.dds-checks[data-co="checks"] strong{ color:var(--fg); font-weight:600; }
@media (min-width:1025px){ .dds-checks[data-co="checks"][data-co-cols="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; } }

/* ---------- Preflight checklist outside the hero (no hanging offset) ---------- */
.dds-checklist[data-co="checklist"]{ margin:0; }
.dds-checklist[data-co="checklist"] ul{ gap:12px 28px; }
.dds-checklist[data-co="checklist"] li{ font-size:1rem; line-height:1.45; }
@media (min-width:768px){ .dds-checklist[data-co="checklist"]{ padding:22px 26px 26px; } }

/* ---------- Source list: two columns of descriptive links ---------- */
[data-co="sources"]{ columns:2; column-gap:56px; margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); font-size:.9375rem; line-height:1.5; }
[data-co="sources"] > li{ break-inside:avoid; padding:11px 0; border-bottom:1px solid var(--line); }
@media (max-width:767px){ [data-co="sources"]{ columns:1; } }

/* ---------- Work: project cards from the GB Query (dds-post-card + a "View project" row) ---------- */
[data-co="projects"] .dds-post-card__body{ padding-bottom:20px; }
[data-co="projects"] .dds-card__more{ margin-top:auto; }
.dds-post-card:hover .dds-card__more svg{ transform:translateX(4px); }
[data-co="card-meta"]{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:.875rem; line-height:1.45; color:var(--muted); }
[data-co="card-meta"]:not(:has(*)){ display:none; }
[data-co="card-meta"] > *{ display:inline-flex; align-items:center; gap:6px; }
[data-co="card-meta"] svg{ width:16px; height:16px; color:var(--icon); stroke-width:2; }
/* Service filter (shown once Work is live): chips as links, the current one marked with aria-current. */
[data-co="filters"]{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 32px; padding:0; list-style:none; }
[data-co="filters"] a{ display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--fg); font-size:.9375rem; line-height:1.2; text-decoration:none; transition:border-color var(--t); }
[data-co="filters"] a:hover{ border-color:var(--fg); color:var(--fg); }
[data-co="filters"] a[aria-current]{ border-color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg); font-weight:600; }
/* Pagination (query-string pages) */
[data-co="pager"]{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:40px; }
[data-co="pager"] .page-numbers, [data-co="pager"] > a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius); color:var(--fg); font-size:.9375rem; text-decoration:none; }
[data-co="pager"] nav{ display:flex; flex-wrap:wrap; gap:8px; }
[data-co="pager"] .page-numbers.current{ border-color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg); font-weight:600; }
[data-co="pager"] .page-numbers.dots{ border-color:transparent; }
[data-co="pager"] a:hover{ border-color:var(--fg); }
[data-co="pager"]:not(:has(a, .current)){ display:none; }

/* ---------- Project single ---------- */
[data-co="gallery"]{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
[data-co="gallery"] > :first-child{ grid-column:1 / -1; }
[data-co="gallery"] figure{ margin:0; }
[data-co="gallery"] .dds-vf{ display:block; aspect-ratio:3/2; }
[data-co="gallery"] > :first-child .dds-vf{ aspect-ratio:16/9; }
[data-co="gallery"] figcaption{ margin-top:10px; font-size:.875rem; line-height:1.45; color:var(--muted); }
[data-co="gallery"] > :only-child .dds-vf{ aspect-ratio:16/9; }
@media (max-width:767px){
  [data-co="gallery"]{ grid-template-columns:minmax(0,1fr); gap:12px; }
  [data-co="gallery"] > :first-child .dds-vf{ aspect-ratio:3/2; }
}
/* The project story is the post content (core blocks): restore prose rhythm, like single posts in style.css. */
[data-co~="story"] .dynamic-entry-content{ color:var(--fg-2); max-width:42em; }
[data-co~="story"] .dynamic-entry-content > * + *{ margin-top:1.1em; }
[data-co~="story"] .dynamic-entry-content > :is(h2, h3){ margin-top:1.6em; color:var(--fg); }
[data-co~="story"] .dynamic-entry-content > h2{ font-size:clamp(1.625rem, 1.3rem + 1vw, 2.25rem); }
[data-co~="story"] .dynamic-entry-content > h3{ font-size:1.375rem; }
[data-co~="story"] .dynamic-entry-content > :first-child{ margin-top:0; }
[data-co~="story"] .dynamic-entry-content :is(ul, ol){ margin-left:0; margin-bottom:0; padding-left:1.25em; }
[data-co~="story"] .dynamic-entry-content :is(ul, ol) > li + li{ margin-top:.4em; }
/* No story yet (empty post content): the chapter stays out of the page, and the next one loses its top rule. */
[data-co~="story"]:not(:has(.dynamic-entry-content > *)){ display:none; }
[data-co~="story"]:not(:has(.dynamic-entry-content > *)) + [data-co~="chapter"]{ padding-top:0; border-top:0; }
/* Neither a story nor deliverables: no empty sand band. */
[data-co="project-body"]:not(:has([data-co~="deliverables-chapter"])):not(:has(.dynamic-entry-content > *)){ display:none; }
/* Deliverables (ACF repeater rows): the dds-dl look as a list (GB loopers can't be <dl>). */
[data-co="deliverables"]{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); }
[data-co="deliverables"] > li{ display:grid; gap:4px; padding:18px 0; border-bottom:1px solid var(--line); }
[data-co="deliverables"] > li > :first-child{ font:600 1.0625rem/1.35 var(--f-body); color:var(--fg); }
[data-co="deliverables"] > li > :nth-child(2){ font-size:.9375rem; line-height:1.5; color:var(--muted); }
@media (min-width:768px){ [data-co="deliverables"] > li{ grid-template-columns:minmax(0,1fr) minmax(0,auto); align-items:baseline; gap:4px 32px; } [data-co="deliverables"] > li > :nth-child(2){ text-align:right; } }

/* ---------- About: "What to expect" (copy + the map plate as the page's visual anchor) ---------- */
.dds-split[data-co="expect"]{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); column-gap:clamp(40px, 5vw, 80px); align-items:center; }
.dds-split[data-co="expect"] .dds-lead{ max-width:32em; }
@media (max-width:1024px){ .dds-split[data-co="expect"]{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); column-gap:40px; } }
@media (max-width:900px){
  .dds-split[data-co="expect"]{ grid-template-columns:minmax(0,1fr); row-gap:32px; }
  .dds-split[data-co="expect"] > .dds-plate{ width:100%; max-width:480px; }
}

/* ---------- About: "A note from Drew" (photo optional) ---------- */
[data-co="note"]{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px 72px; align-items:start; }
[data-co="note"] > :only-child{ grid-column:1 / -1; max-width:46em; }
[data-co="note"] .dds-vf{ aspect-ratio:4/5; }
[data-co="note-text"] > * + *{ margin-top:1em; }
[data-co="note-text"]{ font-size:1.125rem; line-height:1.65; color:var(--fg-2); }
@media (max-width:1024px){ [data-co="note"]{ grid-template-columns:minmax(0,1fr); } [data-co="note"] .dds-vf{ max-width:420px; aspect-ratio:4/3; } }