/* foundation.css — GENERATED from the FROZEN occupation template.
   ⛔ DO NOT HAND-EDIT. Regenerate: automation-scripts/build-foundation-css.py --apply
   Occupation pages and hubs BOTH link this file, so there is one definition of the
   hero, the section nav and the page furniture rather than two copies kept in step.
   ⚠ Tokens are `--occ-*` in the template too, so nothing here can clobber chrome.css's
   --forest (#166534) or --stone (#57534e, a TEXT colour) (R-125). */

:root{
      --occ-ink:#17211b;--occ-muted:#617067;--occ-paper:#fbfaf6;--occ-white:#fff;
      --occ-forest:#0d5c3d;--occ-forest-2:#08724a;--occ-mint:#e8f5ed;--occ-mint-2:#d4eddd;
      --occ-gold:#f2b544;--occ-gold-pale:#fff6dd;--occ-line:#dfe5df;--occ-stone:#f0f1ec;
      --occ-red:#b43a2e;--occ-shadow:0 18px 50px rgba(22,48,35,.10);
      --occ-serif:Georgia,"Times New Roman",serif;--occ-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    }
body{margin:0;background:var(--occ-paper);color:var(--occ-ink);font:15px/1.6 var(--occ-sans)}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.hero{background:linear-gradient(135deg,#0b4b34 0%,#0d6745 60%,#167b51 100%);color:#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:70px;padding:34px 0 44px;align-items:center}
.crumb{font-size:13px;color:#cce2d5;margin-bottom:26px}
.crumb a{text-decoration:none}
.eyebrow{display:inline-flex;gap:7px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:rgba(255,255,255,.97);color:#1c1917;border:1px solid rgba(28,25,23,.15);margin-bottom:14px}
.flag{width:25px;height:17px;background:#173c79;border-radius:2px;display:inline-grid;place-items:center;font-size:12px}
.eyebrow .flag{width:auto;height:auto;background:none;border-radius:0;font-size:13px;display:inline}
h1{font:700 clamp(44px,6vw,76px)/.98 var(--occ-serif);letter-spacing:-.045em;margin:13px 0 18px}
.lede{font-size:19px;line-height:1.55;color:#e1f0e6;max-width:710px;margin:0 0 28px}
.meta{display:flex;gap:18px;flex-wrap:wrap;color:#d4e5da;font-size:13px}
.meta b{color:#fff}
.verdict{background:#fff;color:var(--occ-ink);border-radius:16px;padding:24px;box-shadow:var(--occ-shadow)}
.verdict-label{font-size:12px;color:var(--occ-muted);font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.verdict h2{font:700 25px/1.18 var(--occ-serif);margin:8px 0 10px}
.verdict p{font-size:14px;color:#56635b;margin:0 0 18px}
.verdict-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--occ-line);font-size:14px}
.subnav{background:#fff;border-bottom:1px solid var(--occ-line)}
.subnav .wrap{display:flex;gap:28px;overflow:auto}
.subnav a{white-space:nowrap;padding:15px 0 13px;text-decoration:none;font-size:13px;font-weight:700;color:#5b685f;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--occ-forest);border-color:var(--occ-forest)}
h2{font:700 clamp(29px,4vw,40px)/1.12 var(--occ-serif);letter-spacing:-.025em;margin:0}
.hscroll,.subnav .links,.pb-rounds,.mini-grid[data-immi-kind="sibling_occupation_list"]{scrollbar-width:thin;scrollbar-color:#b9c6be transparent}
.hscroll::-webkit-scrollbar,.subnav .links::-webkit-scrollbar,.pb-rounds::-webkit-scrollbar,.mini-grid[data-immi-kind="sibling_occupation_list"]::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-track,.subnav .links::-webkit-scrollbar-track,.pb-rounds::-webkit-scrollbar-track,.mini-grid[data-immi-kind="sibling_occupation_list"]::-webkit-scrollbar-track{background:#eef2ef;border-radius:4px}
.hscroll::-webkit-scrollbar-thumb,.subnav .links::-webkit-scrollbar-thumb,.pb-rounds::-webkit-scrollbar-thumb,.mini-grid[data-immi-kind="sibling_occupation_list"]::-webkit-scrollbar-thumb{background:#b9c6be;border-radius:4px}
.hscroll::-webkit-scrollbar-thumb:hover,.subnav .links::-webkit-scrollbar-thumb:hover,.pb-rounds::-webkit-scrollbar-thumb:hover,.mini-grid[data-immi-kind="sibling_occupation_list"]::-webkit-scrollbar-thumb:hover{background:#9fc7ae}
@media(max-width:900px){
  .hero-grid,.decision-grid,.lower-grid,.work-grid{grid-template-columns:1fr}
  .hero-grid{gap:28px;padding:45px 0}
}
@media(max-width:580px){
  .wrap{width:min(100% - 26px,1180px)}
  .hero-grid{padding:34px 0}
  .verdict{padding:20px}
  h1{font-size:48px}
  .lede{font-size:17px}
}
.hero,.subnav,main,footer.demo-footer{
    --occ-forest:#0d5c3d;--occ-forest-2:#08724a;--occ-stone:#f0f1ec;--occ-white:#fff;
    --occ-mint:#e8f5ed;--occ-mint-2:#d4eddd;--occ-line:#dfe5df;--occ-paper:#fbfaf6;
    --occ-ink:#17211b;--occ-muted:#617067;--occ-gold:#f2b544;--occ-gold-pale:#fff6dd;
  }
.hero{padding-top:calc(var(--chrome-h,132px) + 6px)}
.subnav{position:sticky;top:var(--chrome-h,132px);z-index:24;
    box-shadow:0 1px 0 rgba(23,33,27,.06)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin}
.subnav a{flex:0 0 auto;white-space:nowrap;padding:11px 6px;font-size:13.5px;text-decoration:none;
    color:#414d45;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--occ-forest);border-bottom-color:#9fc7ae}
.subnav a.is-current{color:var(--occ-forest);border-bottom-color:var(--occ-forest);font-weight:700}
summary [data-immi-field],h2 [data-immi-field],h3 [data-immi-field],
  .verdict-row [data-immi-field],b [data-immi-field],strong [data-immi-field]{display:inline}
:root{--occ-map-listed:#0d5c3d;--occ-map-notlisted:#dfe3dd;--occ-map-nolist:#f2f3f0;--occ-map-nolist-edge:#95a09a}
.signal .status:before,.verdict-row .status:before{
    }
@media (prefers-reduced-motion:reduce){
  .signal .status:before,.verdict-row .status:before{}
}
@media (prefers-reduced-motion:reduce){
  .points-line:after,.signal .status:before,.verdict-row .status:before{}
}
.hero{padding-bottom:26px}
.hero-grid{align-items:start;gap:34px}
.hero .verdict{margin-top:0}
.hero .crumb{font-size:12.5px;margin:0 0 12px;color:#b9d3c5}
.hero .crumb a{color:#dcebe2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.hero .crumb a:hover{border-bottom-color:#fff}
.hero .crumb span[aria-current]{color:#fff;font-weight:600}
.verdict .isrc .isrc-pop{left:auto;right:0;transform:none}
.verdict .isrc .isrc-pop:after{left:auto;right:6px;transform:none}
@media (max-width:720px){
  .subnav{padding:0}
  .subnav .wrap{display:block;padding:0}
  .subnav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
      padding:11px 0;background:none;border:0;font:700 14px var(--occ-sans);color:var(--occ-ink);cursor:pointer}
  .subnav-toggle .chev{transition:transform .2s ease}
  .subnav.is-open .subnav-toggle .chev{transform:rotate(180deg)}
  .subnav .links{display:none;padding:0 0 10px}
  .subnav.is-open .wrap{overflow:visible}
  .subnav.is-open .links{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;
      position:absolute;top:100%;left:0;right:0;z-index:30;
      background:#fff;border-bottom:1px solid var(--occ-line,#dfe5df);
      box-shadow:0 12px 26px rgba(16,32,22,.16);
      padding:10px 16px 14px;max-height:62vh;overflow-y:auto}
  .subnav .links a{padding:8px 2px;font-size:13px;border-bottom:0;color:#3f4b43}
  .subnav .links a.is-current{color:var(--occ-forest);font-weight:700}
}
@media (min-width:721px){
  .subnav-toggle{display:none}
  .subnav .links{display:flex;flex-wrap:nowrap;gap:2px 4px;overflow-x:auto;overflow-y:hidden}
  .subnav{position:sticky}
  .subnav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:46px;
    pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%)}
}
@media (prefers-reduced-motion:reduce){
  .signal .status:before,.verdict-row .status:before{}
}
.lower-grid>*,.tilegrid>*,.work-grid>*,.hero-grid>*,.decision-grid>*,.snapshot>*,
  .timeline>*,.mini-grid>*,.la-grid>*,.pb-cols>*{min-width:0}
.crumb{display:none}
/* ── HUB-ONLY VARIANT ──────────────────────────────────────────────────────
   The occupation hero is a two-column grid: prose left, At-a-glance card
   (`aside.verdict`) right. Hubs have no card, and the empty second column is
   why the hub hero rendered far taller than the occupation hero with a large
   blank area to its right. R-125: removing a grid child does NOT make a
   two-column grid one column — you must say so.
   ────────────────────────────────────────────────────────────────────────── */
.hero-grid.is-single{ grid-template-columns:minmax(0,1fr); gap:0; }
/* ── HERO ASIDE — the hero adapts to whether the slot is USED ────────────────
   `hero.aside` is the panel in the right of the hero. Occupation pages fill it
   with the At-a-glance summary; other families may fill it with something else,
   or leave it out. The NAME is deliberately positional — it says where the slot
   is, not what goes in it, so the content can change without the surface being
   misnamed. (Its implementation class is still `.verdict`; renaming that costs
   a corpus regeneration and buys nothing functional — recorded, not hidden.)

   ⛔ THE LAYOUT FOLLOWS THE CONTENT, NOT A PRODUCER DECISION. This was first
   keyed on an `.is-single` class that `hub_chrome.py` added when it happened to
   build a hero without an aside. That works only for pages that producer makes:
   any family adopting the aside later would have had to know to REMOVE a class,
   and any page dropping it would have had to know to ADD one. `:has()` asks the
   DOM instead, so the rule is true of every page that has ever existed and any
   that will.

   Used   → two columns; the headline, lede and meta compact to the text column.
   Unused → one column; they expand to the full grid width.
   ⚠ `.is-single` is retained as a harmless alias so pages already carrying it
   are unaffected; it is no longer required and the producer no longer needs to
   reason about it. */
.hero-grid:not(:has(> aside)),
.hero-grid.is-single{ grid-template-columns:minmax(0,1fr); gap:0; }
.hero-grid:not(:has(> aside)) > div,
.hero-grid.is-single > div{ max-width:none; }
.hero-grid:not(:has(> aside)) .lede,
.hero-grid:not(:has(> aside)) .meta,
.hero-grid.is-single .lede{ max-width:none; }


/* ── DISCLAIMER WIDTH — match the CTA above it ────────────────────────────
   chrome.css sets `.calc-disclaimer{max-width:760px}` SITE-WIDE. On a hub the
   CTA (`.guide-consultation-cta`, inside `.hub-cta-wrap{max-width:1080px;
   padding:0 24px}`) is 1032px, so the disclaimer sat 272px narrower and
   visibly misaligned beneath it. On an occupation page both are 850px, which
   is why they matched there and only the hubs looked wrong.

   ⚠ This file is linked ONLY by hub pages, so the override cannot reach the
   582 occupation pages or any other family that uses `.calc-disclaimer`.
   ⚠ 1032 is DERIVED (1080 − 2×24), not measured-and-hardcoded: if
   `.hub-cta-wrap` changes, update both together or they drift apart again.
   ───────────────────────────────────────────────────────────────────────── */
/* ⚠ Specificity: chrome.css sets this on `.calc-disclaimer.legal` (0,2,0), so a
   single-class override is silently outranked — it appears in the CSSOM and loses.
   Match the specificity and rely on source order (foundation.css loads last). */
.calc-disclaimer.legal{ max-width:1032px; }


/* ── CTA → DISCLAIMER GAP — match the occupation pages' 44px ───────────────
   Occupation: the disclaimer's own `margin-top:44px` is the WHOLE gap.
   Hub (before): 48 (`.hub-cta-wrap` padding-bottom) + 32 (`.guide-consultation-cta`
   margin-bottom) + 44 (disclaimer margin-top) = 124px. Zeroing the first two
   leaves exactly 44 and makes the two page types agree.
   ⚠ Owner asked for the occupation CTA→disclaimer spacing and the HUB
   disclaimer→footer spacing. This is the first half; the second half needs the
   occupation `main{padding:48px 0 90px}` to become 40 and is NOT applied here,
   because it would modify the 582 frozen pages.
   ───────────────────────────────────────────────────────────────────────── */
.hub-cta-wrap{ padding-bottom:0; }
.hub-cta-wrap .guide-consultation-cta{ margin-bottom:0; }

/* ── HUB SHELL — the desktop rail, matching the occupation page exactly ──────
   The occupation page's `.demo-shell` is `minmax(0,1fr) 300px`, gap 30, width
   min(1180px, 100% - 40px), centred, with a STICKY rail. This reproduces it for
   hubs so the two families carry one component, one set of slot ids and one
   mobile behaviour.

   ⛔ NO SIDEBAR BELOW 1140px, on either family. The rail does not exist on
   mobile — the sticky bottom bar is its mobile equivalent (owner 2026-08-27).
   A rule targeting a sidebar slot without a mobile counterpart silently does
   nothing for most visitors.
   ⚠ `min-width:0` on the main column is load-bearing: without it a wide child
   (the occupation A–Z, a card grid) refuses to shrink and pushes the rail off
   the viewport instead of wrapping.
   ⚠ The hub content containers centre themselves at their own widths, so inside
   the narrower column they stay centred — deliberate, not a bug. */
.hub-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:30px;
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
  align-items:start;
}
.hub-shell > .hub-shell-main{ min-width:0; }
.hub-shell .guide-sidebar{
  display:block;
  position:sticky;
  top:calc(var(--chrome-h,132px) + var(--subnav-h,46px) + 40px);
  padding-top:2px;
}
@media (max-width: 1000px){
  .hub-shell{ display:block; width:auto; }
  .hub-shell .guide-sidebar{ display:none; }
}

/* ── processing-times keeps its own .guide-layout, so align it to the shell ──
   That hub is an ARTICLE layout (800px + 280px inside 1120px) rather than the
   card grids the other eight use, so it was skipped by the shell wrap — it
   already had a working rail. Aligning the numbers here makes all nine identical
   without restructuring a layout that works.
   ⚠ SAFE ONLY BECAUSE foundation.css IS HUB-ONLY (9 pages). `.guide-layout` is
   used by many guide pages; a rule this broad in chrome.css or guide.css would
   reach every one of them. Check what links a stylesheet before widening a
   selector in it (R-125). */
.guide-layout{
  grid-template-columns:minmax(0,1fr) 300px;
  width:min(1180px,calc(100% - 40px));
  /* ⚠ guide.css caps this at 1120px with 24px inline padding, which left the
     content column 732px against every other hub's 850px. Both must be undone
     to match the shell, not just the grid columns.
     ⚠ MEASURED BLAST RADIUS: 264 pages use .guide-layout; exactly ONE of them
     also links foundation.css (processing-times, the only hub with this layout).
     Checked before widening the selector rather than after (R-125). */
  max-width:none;
  padding-inline:0;
  margin-inline:auto;
  gap:30px;   /* ⚠ guide.css uses 40px; the shell uses 30. A 10px gap difference
                 made the content column 840 against every other hub's 850 —
                 the last measurable difference between the two layouts. */
}

/* ── The CTA inside the shell is governed by the column, not by its own wrapper.
   `.hub-cta-wrap` carries `max-width:1080px; padding:0 24px` from when it sat at
   page level. Inside the 850px main column that padding made the CTA 802px while
   the disclaimer beside it was 850 — visibly misaligned, and the kind of
   difference that only appears once two things finally share a container. */
.hub-shell .hub-cta-wrap, .guide-body .hub-cta-wrap{ max-width:none; padding-inline:0; }