/* ───────────────────────────────────────────────────────────────
   Strata Match — Wayfinding motif layer (built on strata-refined.css)
   The site as a transit map: every resource is a colour-coded
   "destination". One recurring kit of parts used on every page.
     · line colours        — Match=terracotta, Directory=teal,
                              Benchmark=navy, Resources=amber
     · .way-marker          — the numbered/lettered route marker
     · .sign                — signage label chip (mono)
     · .station             — section/page header (rule + marker + title)
     · .dest                — destination row (marker · label · → )
     · .plate               — full-bleed photo plate w/ scrim + label
   ─────────────────────────────────────────────────────────────── */

/* line colour — set on a wrapper, components read var(--line).
   WCAG AA (audit 2026-06-03): white text sits on --line for the filled .sign
   chips + way-markers. The bright terracotta (#D46A2E, 3.55:1) and amber
   (#9A7531, 4.23:1) failed AA, so line-match + line-res use the one-step-darker
   brand shade (--t-600 4.82:1, --amber-600 5.98:1). Same hue, slightly deeper. */
.line-match  { --line: var(--t-600);      --line-deep: var(--t-700);   --line-soft: var(--t-50); }
.line-dir    { --line: var(--teal-500);   --line-deep: var(--teal-700); --line-soft: var(--teal-50); }
.line-bench  { --line: var(--navy-600);   --line-deep: var(--navy-800); --line-soft: var(--navy-50); }
.line-res    { --line: var(--amber-600);  --line-deep: var(--amber-700);--line-soft: var(--amber-50); }
:root{ --line: var(--t-600); --line-deep: var(--t-700); --line-soft: var(--t-50); }

/* ── layout helpers ── */
.wf-wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.wf-wide{max-width:1340px;margin:0 auto;padding:0 32px;}

/* ── route marker — the signature pin ── */
.way-marker{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;background:var(--line);color:var(--paper);
  font-family:var(--font-mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1;}
.way-marker-sm{width:32px;height:32px;font-size:13px;}
.way-marker-lg{width:60px;height:60px;font-size:24px;}
.way-marker-hollow{background:transparent;color:var(--line);box-shadow:inset 0 0 0 2px var(--line);}

/* connector line between markers */
.way-line{flex:1;height:2px;background:var(--border-strong);position:relative;}
.way-line-on{background:var(--line);}

/* ── signage label chip ── */
.sign{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:7px 13px;
  background:var(--line);color:var(--paper);font-variant-numeric:tabular-nums;}
.sign-line{background:transparent;color:var(--line-deep);box-shadow:inset 0 0 0 1px var(--line);}
.sign-ghost{background:rgba(5,13,30,.55);color:var(--paper);backdrop-filter:blur(5px);}
.sign .dot{width:7px;height:7px;border-radius:999px;background:currentColor;}

/* ── station header — recurring section/page header ── */
.station{margin-bottom:48px;}
.station .topline{display:flex;align-items:stretch;height:3px;margin-bottom:30px;}
.station .topline .seg{width:120px;background:var(--line);}
.station .topline .rest{flex:1;background:var(--border);}
.station .head{display:flex;align-items:flex-start;gap:24px;}
.station .head .body{flex:1;}
.station h2{max-width:18ch;margin-top:6px;}
.station .meta{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-subtle);text-align:right;white-space:nowrap;padding-top:8px;
  font-variant-numeric:tabular-nums;}
.station .dek{margin-top:18px;max-width:60ch;font-size:18px;line-height:1.6;color:var(--fg-muted);text-wrap:pretty;}

/* ── destination row — marker · title · arrow, line extends on hover ── */
.dest{display:flex;align-items:center;gap:22px;padding:26px 0;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;}
.dest .arrow{margin-left:auto;width:76px;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:0;color:var(--line-deep);}
.dest .arrow .track{width:48px;height:2px;background:var(--line);transform:scaleX(.5);transform-origin:right center;transition:transform var(--dur-med) var(--ease-out);}
.dest:hover .arrow .track{transform:scaleX(1);}
.dest .arrow .glyph{font-size:22px;line-height:1;margin-left:6px;transition:transform var(--dur-med) var(--ease-out);}
.dest:hover .arrow .glyph{transform:translateX(2px);}

/* ── photo plate ── */
.plate{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900);color:var(--paper);}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.plate .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,13,30,.84) 0%,rgba(5,13,30,.42) 45%,rgba(5,13,30,.42) 60%,rgba(5,13,30,.82) 100%),
             linear-gradient(90deg,rgba(5,13,30,.66) 0%,rgba(5,13,30,.12) 60%,transparent 82%);}
.plate h1,.plate h2,.plate h3{color:var(--paper);}
.plate .topbar{display:flex;justify-content:space-between;align-items:center;
  position:relative;padding:20px 32px;border-bottom:2px solid var(--line);}
.plate .topbar .meta{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.plate .topbar .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-muted);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);}
.plate .topbar .back:hover{color:var(--paper);}

/* outline / ghost buttons sitting on a photo plate must read light */
.plate .btn-sq-line{color:#fff;border-color:rgba(255,255,255,.45);}
.plate .btn-sq-line:hover{background:#fff;color:var(--ink);border-color:#fff;}
.plate .btn-pill-ghost{color:#fff;border-color:rgba(255,255,255,.45);}
.plate .btn-pill-ghost:hover{border-color:var(--t-400);color:var(--t-400);}

/* ── nav ── */
.wf-nav{position:sticky;top:0;z-index:50;background:rgba(250,248,243,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);}
.wf-nav .inner{display:flex;align-items:center;gap:28px;padding:16px 32px;}
.wf-nav .brand{font-family:var(--font-display);font-size:27px;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:0.26em;}
.wf-nav .navlinks{display:flex;gap:26px;margin-left:18px;}
.wf-nav .inner>.btn:last-child{margin-left:auto;}
.wf-nav .navlinks a{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-muted);text-decoration:none;padding:6px 0;position:relative;
  transition:color var(--dur-med) var(--ease-out);}
.wf-nav .navlinks a:hover{color:var(--ink);}
.wf-nav .navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--line);transition:right var(--dur-med) var(--ease-out);}
.wf-nav .navlinks a:hover::after,.wf-nav .navlinks a.is-active::after{right:0;}
.wf-nav .navlinks a.is-active{color:var(--ink);}

/* ── nav dropdowns (sub-page menus) ── */
.wf-nav .navlinks{align-items:center;}
.wf-nav .nav-item{position:relative;display:flex;align-items:center;}
.wf-nav .nav-top{display:inline-flex;align-items:center;gap:5px;}
.wf-nav .nav-caret{font-size:8px;line-height:1;opacity:.5;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast);}
.wf-nav .nav-item:hover .nav-caret,.wf-nav .nav-item:focus-within .nav-caret{opacity:1;transform:translateY(2px);}
.wf-nav .nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:246px;
  background:var(--bg-elevated);border:1px solid var(--border);box-shadow:0 16px 38px rgba(7,23,43,.17);
  padding:7px;margin-top:12px;opacity:0;visibility:hidden;pointer-events:none;z-index:60;
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.wf-nav .nav-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.wf-nav .nav-menu::after{content:"";position:absolute;top:0;right:0;width:18px;height:18px;border-top:2px solid var(--terracotta);border-right:2px solid var(--terracotta);opacity:.5;}
.wf-nav .nav-item:hover .nav-menu,.wf-nav .nav-item:focus-within .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.wf-nav .nav-menu-head{padding:7px 15px 10px;margin:0 0 5px;border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-subtle);}
.wf-nav .nav-menu a{display:block!important;padding:11px 15px!important;font-family:var(--font-mono);font-size:11px;
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted)!important;white-space:nowrap;
  border-left:2px solid transparent;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);}
.wf-nav .nav-menu a::after{display:none!important;}
.wf-nav .nav-menu a:hover{background:var(--bg-sunken);color:var(--ink)!important;border-left-color:var(--terracotta);}
@media (max-width:900px){
  .wf-nav .nav-menu,.wf-nav .nav-caret{display:none;}
  .wf-nav .navlinks{flex-wrap:wrap;gap:12px 18px;}
}

/* the wordmark tick — sized in em so it scales with any wordmark size */
.wm-tick{display:inline-block;width:0.44em;height:0.44em;border-top:0.08em solid var(--terracotta);
  border-right:0.08em solid var(--terracotta);transform:translateY(-0.32em);}
.wf-nav .wm-tick{margin-left:-0.26em;}
/* footer wordmark must never wrap its tick to a new line */
.surface-ink a[style*="font-size:38px"]{white-space:nowrap;}

/* generic section padding */
.wf-sec{padding:96px 0;border-bottom:1px solid var(--border);}
.wf-sec-tight{padding:68px 0;border-bottom:1px solid var(--border);}

/* responsive */
@media (max-width:860px){
  .station .head{flex-direction:column;gap:14px;}
  .station .meta{text-align:left;}
}

/* ═══════════════════════════════════════════════════════════════
   CODIFIED MOTIF SYSTEM  ·  reuse these on every page
   ───────────────────────────────────────────────────────────────
   1. .plate + .corner-tick     — image with overlaid text + the
                                  signature orange L-tick (brand mark)
   2. .page-header (.plate)      — interior page header: topbar + title
   3. .station                  — section header (rule + marker + title)
   4. .tool-card                — image-led card representing a TOOL
   5. .cta-band (.plate)         — the repeating call-to-action band
   6. .way-marker / .sign / .dest — markers, signage labels, dest rows
   7. line-* wrappers            — colour code: match/dir/bench/res
   8. iconify-icon               — Tabler outline icons (currentColor)
   Imagery rule: bright / positive / BC. Never dark-rainy.
   ═══════════════════════════════════════════════════════════════ */

/* ── the signature corner tick — anchors top-RIGHT (brand canonical).
   Horizontal side is pinned right here so legacy inline left:* values
   resolve to the right edge automatically. ── */
.corner-tick{position:absolute;width:42px;height:42px;pointer-events:none;z-index:3;
  border-top:3px solid var(--accent);border-right:3px solid var(--accent);
  left:auto!important;right:32px!important;}
.corner-tick.lg{width:64px;height:64px;border-width:3px;}
.corner-tick.tl{border-right:0;border-left:3px solid var(--accent);left:32px!important;right:auto!important;}
.corner-tick.bl{border-top:0;border-right:0;border-bottom:3px solid var(--accent);border-left:3px solid var(--accent);left:32px!important;right:auto!important;}
.corner-tick.br{border-top:0;border-bottom:3px solid var(--accent);}

/* ── interior page header (image + overlaid text) ── */
.page-header{position:relative;}
.page-header .ph-inner{position:relative;max-width:1340px;margin:0 auto;padding:80px 32px 58px;}
.page-header .ph-title{font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-0.025em;
  margin-top:22px;max-width:18ch;text-shadow:0 2px 28px rgba(5,13,30,.5);}
.page-header .ph-dek{margin-top:22px;max-width:56ch;font-size:20px;line-height:1.5;color:#EEE9DF;
  font-weight:470;text-shadow:0 1px 16px rgba(5,13,30,.5);}

/* ── tool card — represent a tool with an image ── */
.tool-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;
  background:var(--bg-elevated);border:1px solid var(--border);
  transition:box-shadow var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.tool-card .ph{aspect-ratio:16/10;overflow:hidden;}
.tool-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.tool-card:hover .ph img{transform:scale(1.05);}
.tool-card .body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.tool-card .tool-head{display:flex;align-items:center;gap:13px;}
.tool-card .tool-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:999px;background:var(--line-soft);color:var(--line-deep);font-size:21px;}
.tool-card h3{font-size:23px;margin-top:0;}
.tool-card p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--fg-muted);}
.tool-card .arrow-row{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--line-deep);}
.tool-card .arrow-row .track{width:22px;height:2px;background:var(--line);transition:width var(--dur-med) var(--ease-out);}
.tool-card:hover .arrow-row .track{width:42px;}
.tool-card .arrow-row .arr{display:inline-block;transition:transform var(--dur-med) var(--ease-out);}
.tool-card:hover .arrow-row .arr{transform:translateX(4px);}

/* ── repeating CTA band ── */
.cta-band{position:relative;isolation:isolate;overflow:hidden;text-align:center;}
.cta-band .inner{position:relative;max-width:900px;margin:0 auto;padding:100px 32px;
  display:flex;flex-direction:column;align-items:center;}
.cta-band h2{color:var(--paper);font-size:clamp(38px,5vw,68px);line-height:.99;margin-top:22px;
  max-width:18ch;text-shadow:0 2px 28px rgba(5,13,30,.5);}
.cta-band p{margin-top:22px;max-width:50ch;font-size:19px;color:#EAF0F7;font-weight:470;}
.cta-band .row{margin-top:34px;justify-content:center;}

/* ── icons (Tabler via iconify web component) ── */
iconify-icon{display:inline-flex;align-items:center;line-height:0;}

/* generic grid helper (children spaced via inline grid-template-columns) */
.grid{display:grid;}

/* small trust signal row */
.trust-row{display:flex;flex-wrap:wrap;gap:14px 26px;}
.trust-row .ts{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:var(--fg-muted);}
.trust-row .ts iconify-icon{color:var(--accent-text);font-size:20px;}