/* Power Action — static pages (services, sectors, insights).
   Generated stylesheet: edit scripts/pages.css.mjs, not this file. */
:root {
  --ink: #f6f8fc;
  --ink-2: #eef2f8;
  --surface: #ffffff;
  --line: #d3dbe7;
  --text: #0e1622;
  --muted: #46525f;
  --faint: #5c6877;
  --yellow: #ffd21a;
  --yellow-deep: #cc9a10;
  --blue: #1378b4;
  --blue-bright: #1c97d4;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.015em; line-height: 1.1; }
:where(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .wrap { padding: 0 2rem; } }

/* header ------------------------------------------------------------------ */
.bar { position: sticky; top: 0; z-index: 40; background: rgba(246, 248, 252, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* The bar runs wider than the 68rem content measure — matching the app's
   headers — so brand, navigation and action read as three separated groups
   rather than one cramped line. */
.bar .wrap { max-width: 96rem; }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--text); min-width: 0; }
.brand span { font-family: var(--display); font-size: 0.94rem; font-weight: 600; letter-spacing: 0.14em; white-space: nowrap; }
.brand i { color: var(--yellow-deep); font-style: normal; }
.bar-nav { display: none; gap: 1.6rem; margin-right: auto; margin-left: 2.2rem; }
.bar-nav a { font-size: 0.9rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.bar-nav a:hover { color: var(--text); }
.bar-nav a[aria-current='page'] { color: var(--text); font-weight: 500; }
@media (min-width: 860px) { .bar-nav { display: flex; } }

.bar-links { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.phone { font-size: 0.9rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.phone:hover { color: var(--text); }
@media (max-width: 620px) { .phone { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(to right, #ffe070, var(--yellow), var(--yellow-deep));
  color: #0d1018; font-weight: 600; font-size: 0.88rem;
  padding: 0.6rem 1.15rem; border-radius: 999px; text-decoration: none;
  white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(204, 154, 16, 0.7); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.btn.ghost:hover { border-color: var(--yellow-deep); box-shadow: none; }

/* body -------------------------------------------------------------------- */
/* Bottom padding matters: the article's date line sits directly beneath and
   the two metadata rows read as one cramped block without it. */
.crumbs { font-size: 0.8rem; color: var(--faint); padding: 1.4rem 0 1.6rem; }
.crumbs a { color: var(--faint); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs span[aria-hidden] { padding: 0 0.35rem; }

.eyebrow { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--faint); margin: 0 0 0.9rem; }
.hero { padding: 2rem 0 0; max-width: 46rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0; font-weight: 600; text-wrap: balance; }
.lede { font-size: 1.09rem; color: var(--muted); margin: 1.3rem 0 0; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 3rem 0; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--surface); padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.fact .n { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: var(--text); }
.fact .l { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--faint); }

.cols { display: grid; gap: 3rem; margin: 0 0 3.5rem; }
@media (min-width: 860px) { .cols { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.cols h2, .why h2, .related h2, .cta h2 { font-size: 1.45rem; font-weight: 600; margin: 0 0 1.1rem; }

ul.ticks { list-style: none; margin: 0; padding: 0; }
ul.ticks li { position: relative; padding: 0.42rem 0 0.42rem 1.7rem; color: var(--muted); font-size: 0.95rem; }
ul.ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.85rem;
  width: 0.44rem; height: 0.44rem; border-radius: 2px; background: var(--yellow-deep);
}

dl.spec { margin: 0; border-top: 1px solid var(--line); }
dl.spec dt { font-family: var(--mono); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--faint); padding-top: 0.95rem; }
dl.spec dd { margin: 0.3rem 0 0; padding-bottom: 0.95rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }

/* quality page */
.held-name { font-family: var(--display); font-size: 1.5rem; font-weight: 600; margin: 0 0 0.6rem; color: var(--text); }
.held-name span { display: block; font-family: var(--mono); font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--faint); margin-top: 0.3rem; }
.held-body { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.2rem; text-wrap: pretty; }
.evidence { margin: 0 0 3.5rem; }
@media (min-width: 860px) { .spec-wide dt { float: left; width: 9rem; clear: left; } .spec-wide dd { margin-left: 10rem; } }

.why { border-left: 3px solid var(--yellow); background: var(--ink-2); border-radius: 0 14px 14px 0; padding: 1.7rem 1.8rem; margin: 0 0 3.5rem; }
.why p { margin: 0; color: var(--muted); text-wrap: pretty; }
/* Sector pages put the rationale beside the list rather than beneath it, so it
   needs to sit flush in the grid cell rather than carry its own bottom margin. */
.why-inline { margin: 0; align-self: start; }

/* Long-form article body — insights only. Narrower measure than the two-column
   pages, because prose read at 68rem is unreadable. */
.prose { max-width: 44rem; margin: 0 0 3.5rem; }
.prose h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 0; font-weight: 600; text-wrap: balance; }
.prose h2 { font-size: 1.3rem; font-weight: 600; margin: 2.6rem 0 0.9rem; }
.prose p { color: var(--muted); margin: 0; text-wrap: pretty; }
.prose .lede { color: var(--text); font-size: 1.15rem; margin-top: 1.3rem; }
.prose .eyebrow { margin-bottom: 1rem; }
.takeaway { margin-top: 2.6rem !important; border-left: 3px solid var(--yellow); background: var(--ink-2); border-radius: 0 12px 12px 0; padding: 1.2rem 1.4rem; color: var(--text) !important; font-weight: 500; }
.card-date { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--faint); margin: 0; }

.cta { display: grid; gap: 1.7rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 2rem; margin: 0 0 3.5rem; }
@media (min-width: 860px) { .cta { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; padding: 2.4rem 2.6rem; } }
.cta h2 { margin-bottom: 0.7rem; }
.cta p { margin: 0; color: var(--muted); }
.cta strong { color: var(--text); font-weight: 600; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.callus { font-size: 0.87rem; color: var(--faint); text-decoration: none; }
.callus:hover { color: var(--text); text-decoration: underline; }

/* Top margin, not just bottom: on the section indexes the card grid follows the
   hero's action buttons directly, and with no gap the CTAs read as though they
   belong to the first card. Collapses against .cta's 3.5rem elsewhere, so this
   costs nothing on the pages where a CTA block sits above. */
.related { margin: 3.25rem 0 4rem; }
.cards { display: grid; gap: 1rem; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; gap: 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 14px 34px -20px rgba(14, 22, 34, 0.45); }
/* Two lines' worth of space whether the title needs it or not, so the dates
   and body copy line up across a row of cards instead of stepping. */
.card h2, .card h3 { font-size: 1.05rem; font-weight: 600; margin: 0; text-wrap: balance; }
.cards .card h2 { min-height: 2.5em; }
.card p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.card .more { margin-top: auto; padding-top: 0.5rem; font-size: 0.83rem; color: var(--blue); }

/* ── article imagery ──────────────────────────────────────────────────────
   Stills from the site's own 3D board. The image carries itself; the caption
   is quiet, and labelled "Render" so it is never taken for a photograph of the
   floor. */
.fig { margin: 0; }
.fig img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); }
.fig figcaption { margin-top: 0.7rem; font-size: 0.82rem; line-height: 1.5; color: var(--faint); text-wrap: pretty; }
.fig figcaption b {
  display: inline-block; margin-right: 0.55rem; padding: 0.12rem 0.4rem;
  border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono);
  font-size: 0.58rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--faint); vertical-align: 0.1em;
}

/* In an article: full measure, with air around it. */
.fig-lead { margin: 2.3rem 0 0.6rem; }
/* On a card: full-bleed banner, no caption — the card's own text does that job. */
.card-illustrated { padding-top: 0; overflow: hidden; }
.fig-card { margin: 0 -1.4rem 0.95rem; }
.fig-card img { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; aspect-ratio: 1600 / 760; object-fit: cover; }
.fig-card figcaption { display: none; }

/* Under the title, and quiet: it is metadata, not the headline. */
.card-date { order: 1; font-family: var(--mono); font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin: -0.25rem 0 0; }
.card h2 { order: 0; }
.card > p { order: 2; }
.card .more { order: 3; }

/* footer ------------------------------------------------------------------ */
.foot { border-top: 1px solid var(--line); background: var(--ink-2); padding: 3rem 0 2.5rem; }
.foot-grid { display: grid; gap: 2.5rem; }
@media (min-width: 620px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot h2 { font-family: var(--mono); font-size: 0.67rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--faint); margin: 0 0 0.9rem; }
.foot-blurb { color: var(--muted); font-size: 0.9rem; max-width: 22rem; margin: 1.1rem 0 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 0.28rem 0; }
ul.plain a { font-size: 0.9rem; color: var(--muted); text-decoration: none; }
ul.plain a:hover { color: var(--blue); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--faint); }
.foot-base p { margin: 0; }
.foot-contact { display: flex; gap: 1.2rem; }
.foot-contact a { color: var(--faint); text-decoration: none; }
.foot-contact a:hover { color: var(--blue); }
.statutory { margin: 1.2rem 0 0; font-size: 0.72rem; line-height: 1.6; color: var(--faint); }