/*
Theme Name:   Bricks Child — IAM Consumer Portal
Theme URI:    https://cpwp.idreamdesign.work
Description:  Child theme for the IAM Consumer Portal WordPress build. Carries the IAM design system (tokens + self-hosted webfonts + component CSS ported verbatim from the demo package); Bricks carries structure and content.
Author:       Jason Marcial
Author URI:   https://idreamdesign.work
Template:     bricks
Version:      1.10.0
*/

/* =========================================================================
   ORGANIZATION
   1. Base typography — global
   2. Header/nav      — VERBATIM from demo package v-2-1 css/global.css
                        (markup imported via Code2Bricks uses the demo's own
                        class names, so these rules apply unchanged)
   3. Shared layout   — .container + page shell (sticky footer)
   4. Footer          — VERBATIM from demo package v-2-1 css/global.css
   5. Shared components — VERBATIM from demo global.css. Used by every page,
                        not just IAMTrusted: buttons, kicker, steplist, reveal.
   6. IAMTrusted page — VERBATIM from demo pages.css (.std- namespace only;
                        the .res- half lands when Resources is ported).
   7. Generic templates — NEW WORK. .page-hero (shared header band for CDRS,
                        compliance, help centre) + .cdrs-timeline.
   8. Compliance archive — NEW WORK. Choice cards, filter bar, jurisdiction
                        grid, disclaimer band. The generic pieces are marked;
                        promote them to section 7 if a second page uses them.
   9. S/XS pass       — NEW WORK, not in the demo. Overrides sections 2 and 4
                        at the small breakpoints; must stay below both. Section
                        10 is .ce-* only and may follow it — no dependency.
   10. Reg. & Compliance — NEW WORK. compliance_entry single. Markup is emitted
                        by parse_compliance.py into post_content; class names
                        here and in the emitter must stay in step — change one,
                        change both.

   SOURCE ORDER IS LOAD-BEARING between 3 and 4: the footer's top grid carries
   class="container site-footer__top", and .site-footer__top's padding must win
   over .container's. Same specificity, so the later rule wins — section 4 must
   stay below section 3. Do not reorder.

   Tokens live in css/global-tokens.css (enqueued first). If a token this
   file references is missing there, sync global-tokens.css to the demo
   package's :root block — do not fork values here.
   ========================================================================= */


/* ====================== 1. Base typography =============================== */

/* The demo's body rule, carried in full. Only font-family was ported before,
   which left the site with NO base font-size — so any element that relies on
   inheriting it (.std-prose p sets colour, line-height and measure but no size)
   fell back to whatever Bricks supplies. Every other text block on the site
   declares its own size, which is why prose paragraphs were the only ones
   reading small. The font shorthand carries size, line-height and family
   together; --font-body already includes the full fallback stack. */
body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}


/* ====================== 2. Header / nav (verbatim port) ================== */

/* ---- Navbar -------------------------------------------------------------- */
.site-nav {
  background: #fff;
  border-bottom: 1px solid var(--iam-border);
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-nav__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.site-nav__logo { display: inline-flex; height: 52px; }
.site-nav__logo img { height: 100%; width: auto; }
.site-nav__brandtext { display: flex; flex-direction: column; line-height: 1.15; }
.site-nav__title {
  font: 800 1.05rem/1.1 var(--font-heading);
  color: var(--iam-blue);
  letter-spacing: -0.01em;
}
.site-nav__subtitle { font-size: var(--text-xs); color: var(--iam-text-muted); }

.site-nav__links { display: flex; align-items: center; gap: 26px; }

.nav-item { position: relative; }
.nav-item__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--iam-text);
  text-decoration: none;
  white-space: nowrap;
  height: 64px;
}
.nav-item__link:hover { color: var(--iam-blue); }
.nav-item__link.is-active { color: var(--iam-blue); }
.nav-item__chevron { width: 11px; height: 11px; }

.nav-item__menu {
  display: none;
  position: absolute;
  top: 52px;
  left: -14px;
  z-index: 30;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--iam-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
/* CSS-only reveal on hover; .is-open supports click / touch (see home.js spec) */
.nav-item:hover .nav-item__menu,
.nav-item.is-open .nav-item__menu { display: block; }

.nav-item__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--iam-text);
  text-decoration: none;
}
.nav-item__menu a:hover { background: var(--iam-bg); }

/* Mobile menu toggle (hidden on desktop) */
.site-nav__toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--iam-text); padding: 8px; margin-right: -8px;
}

@media (max-width: 768px) {
  /* Nav collapses to a burger; links become a full-width dropdown panel */
  .site-nav__toggle { display: inline-flex; align-items: center; }
  .site-nav__links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--iam-border);
    box-shadow: var(--shadow-lg); padding: 6px 0;
  }
  .site-nav.is-nav-open .site-nav__links { display: flex; }
  .nav-item { position: static; }
  .nav-item__link {
    height: auto; padding: 13px var(--container-pad);
    justify-content: space-between; font-size: var(--text-base);
  }
  /* Submenus render expanded inline on mobile (no hover/tap needed) */
  .nav-item__menu {
    position: static; display: block;
    box-shadow: none; border: none; min-width: 0; padding: 0 0 6px; background: transparent;
  }
  .nav-item__menu a { padding: 9px calc(var(--container-pad) + 18px); color: var(--iam-text-muted); }

}

/* Neutralize Bricks lazy-reveal inside the header — a sticky nav must never
   wait for an intersection observer */
.site-nav .bricks-lazy-hidden,
.site-nav.bricks-lazy-hidden {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


/* ====================== 3. Shared layout ================================= */

/* Ported markup outside the header uses the demo's .container wrapper.
   Bricks' own container element is not used for these sections — the demo
   class travels with the imported markup. See the source-order note above. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---- Page shell / sticky footer ------------------------------------------
   Not from the demo. Every demo page is tall enough that the footer never
   lifts off the bottom; WordPress templates are not — a short compliance
   archive or a thin single leaves a band of background below the footer.
   Body becomes the column; the content wrapper absorbs the slack.

   flex: 1 0 auto, not the flex:1 shorthand — the shorthand sets flex-basis:0,
   which can collapse tall content. Grid (auto 1fr auto) does the same job but
   assumes the body keeps exactly three children; Bricks does not guarantee it.
   -------------------------------------------------------------------------- */
body.brx-body {
  display: flex;
  flex-direction: column;
  /* Cross-axis: a column flex container only stretches children to full width
     under align-items:stretch. Declared explicitly because anything else on the
     body (Bricks setting, plugin) shrink-to-fits every wrapper, which renders
     the footer as a narrow block instead of a full-bleed band. */
  align-items: stretch;
  min-height: 100vh;   /* fallback for browsers without dvh */
  min-height: 100dvh;  /* mobile — excludes collapsing browser chrome */
}

/* Absorbs the slack on short pages. No effect when the page is already taller
   than the viewport — there is no free space to distribute, which is correct. */
#brx-content {
  flex: 1 0 auto;
}

/* Belt-and-braces to the align-items rule above: guarantees full-bleed
   wrappers even if a flex parent overrides the cross-axis alignment. */
#brx-header,
#brx-content,
#brx-footer {
  width: 100%;
}

/* .site-footer is a plain div inside #brx-footer. Width is asserted here, in
   the shell section, so section 4 stays a verbatim copy of the demo. */
.site-footer {
  width: 100%;
}

/* Bricks container vs demo container — reconciliation.
   Quick Import lands ported markup on a Bricks Container element, so the div
   carries .brxe-container alongside the demo's .container. Bricks sets an
   explicit width on its class, which held the footer grid at 1280px inside a
   430px parent and forced a horizontal scrollbar (the blue band then read as
   "narrow" when it was the only element respecting the viewport).

   Two classes outranks Bricks' one regardless of source order, so this does not
   depend on enqueue order or on Bricks' inline head CSS. Written generically on
   purpose: every future port (IAMTrusted, CDRS, compliance) inherits the same
   collision, and this resolves it once. min-width:0 removes the min-content
   floor; the > * rule lets grid/flex children shrink rather than propping the
   parent open from inside. Lives in section 3 so section 4 stays verbatim. */
.brxe-container.container {
  width: 100%;
  max-width: var(--container-max);
  min-width: 0;
}
.brxe-container.container > * {
  min-width: 0;
}

/* The admin bar adds html{margin-top:32px}, which pushes a full-viewport body
   past the viewport and puts a scrollbar on short pages — logged-in only. */
body.brx-body.admin-bar {
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
  body.brx-body.admin-bar {
    min-height: calc(100vh - 46px);
    min-height: calc(100dvh - 46px);
  }
}


/* ====================== 4. Footer (verbatim port) ======================== */

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--iam-blue-dk); color: var(--iam-on-blue-muted); }
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 54px var(--container-pad) 40px;
}
.footer-extlink { display: inline-flex; align-items: center; gap: 4px; }
.footer-ext-icon { width: 11px; height: 11px; flex-shrink: 0; }
.site-footer__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.site-footer__mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-footer__mark span { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.site-footer__name { font: 700 var(--text-md)/1 var(--font-heading); color: #fff; }
.site-footer__blurb { font-size: var(--text-sm); line-height: 1.65; max-width: 260px; }

.site-footer__colhead {
  font: 700 var(--text-xs)/1 var(--font-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iam-on-blue-faint);
  margin-bottom: 16px;
}
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer__links a { font-size: var(--text-sm); color: var(--iam-on-blue-muted); text-decoration: none; }
.site-footer__links a:hover { color: #fff; }

.site-footer__legal { border-top: 1px solid var(--iam-on-blue-border); }
.site-footer__legalinner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--container-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--iam-on-blue-faint);
}
.site-footer__legalinner a { color: var(--iam-on-blue-faint); text-decoration: none; }
.site-footer__legalinner a:hover { color: #fff; }
.site-footer__legallinks { display: flex; gap: 16px; }

/* ---- Footer responsive --------------------------------------------------- */
/* Kept in this section rather than merged into the header's 768 block, so the
   footer port stays verifiable line-for-line against the demo. Duplicate
   breakpoints across sections are intentional.
   560 is off the documented ladder (XL 1600 · L 992 · M 768 · S 480 · XS 375)
   — it is the demo's own footer-specific breakpoint, carried verbatim. */
@media (max-width: 992px) {
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; row-gap: 32px; }
}

@media (max-width: 768px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__legalinner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer__legallinks { flex-wrap: wrap; }
}

@media (max-width: 375px) {
  .site-footer__legallinks { gap: 10px 14px; }
}


/* ====================== 5. Shared components (verbatim port) ============= */

/* Not IAMTrusted-specific — Resources, the CDRS pair and the compliance
   templates all draw on these. Ported whole (including button variants this
   page does not use) so later ports don't each drag in a fragment. */

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 12px 22px;                 /* size md (default) */
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn--sm { padding: 8px 14px; font-size: var(--text-sm); }
.btn--lg { padding: 15px 30px; font-size: var(--text-md); }

.btn--primary { background: var(--iam-orange); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--iam-orange-dk); }

.btn--brand { background: var(--iam-blue); color: #fff; }
.btn--brand:hover { background: var(--iam-blue-dk); }

.btn--outline { background: transparent; color: var(--iam-blue); border-color: var(--iam-blue); }
.btn--outline:hover { background: var(--iam-blue); color: #fff; }

.btn--ghost { background: transparent; color: var(--iam-blue); }
.btn--ghost:hover { background: var(--iam-blue-tint); }

.btn--link { background: transparent; color: var(--iam-blue); padding: 0; box-shadow: none; }
.btn--link:hover { color: var(--iam-blue-dk); }

/* lift on hover for every variant except link, unless .no-lift is set */
.btn:not(.btn--link):not(.no-lift):hover { transform: translateY(-1px); }

.btn:disabled,
.btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover,
.btn.is-disabled:hover { transform: none; }

/* ---- Section kicker (eyebrow) ------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--iam-orange);           /* default tone: orange */
}
.kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.kicker--blue { color: var(--iam-blue); }
.kicker--on-blue { color: var(--iam-on-blue-muted); }

/* ---- Reveal-on-scroll utility ------------------------------------------- */
/* DEVIATION FROM THE DEMO — deliberate, do not "fix" back.
   The demo is .reveal{opacity:0} unconditionally, safe there because its own
   JS was guaranteed present. Here the hidden state is scoped to a class that
   js/reveal.js sets on <html> at load, so if that script is blocked, fails, or
   is broken by another plugin's error, the page renders fully visible instead
   of blank. The observer then adds .visible per element exactly as the demo. */
html.has-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
}
html.has-reveal .reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.has-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Step list (How It Works) ------------------------------------------- */
/* Styled in its "all active" state, which is how the homepage uses it. */
.steplist { list-style: none; margin: 0; padding: 0; position: relative; }
.steplist__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding-bottom: 28px;
  position: relative;
}
.steplist__item:last-child { padding-bottom: 0; }
.steplist__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--iam-blue);
}
.steplist__num {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--text-sm)/1 var(--font-heading);
  background: var(--iam-blue);
  color: #fff;
  border: 2px solid var(--iam-blue);
}
.steplist__body { padding-top: 2px; }
.steplist__title {
  font: 700 var(--text-md)/1.3 var(--font-heading);
  color: var(--iam-blue);
  margin-bottom: 4px;
}
.steplist__desc { font-size: var(--text-sm); color: var(--iam-text-muted); line-height: 1.55; }


/* ====================== 6. IAMTrusted page (verbatim port) =============== */

/* From demo pages.css, .std- namespace only. The orb/crest geometry is all
   percentage-based inside an aspect-ratio wrapper — the orb and crest must
   remain DIRECT children of .std-hero__media or the positioning context moves
   and the composition collapses. Verify in the Bricks structure panel. */

/* ---- Hero — text left; orb photo + badge-in-crescent right ---------------- */
/* Deliberately NOT the navy homepage hero: this page is explanatory, and the
   light surface differentiates it at a glance. */
.std-hero {
  position: relative;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, #FFFFFF 0%, #FBFCFD 55%, #F4F6F9 100%);
  border-bottom: 1px solid var(--iam-border);
}
.std-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  padding-top: 68px;
  padding-bottom: 84px;
}
.std-hero__title {
  font: 800 var(--text-3xl)/1.08 var(--font-heading);
  letter-spacing: -0.015em;
  margin: 14px 0 18px;
}
.std-hero__lead {
  color: var(--iam-text-mid);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 560px;
}
.std-hero__extlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font: 500 var(--text-sm)/1 var(--font-body);
  color: var(--iam-blue);
}
.std-hero__extlink svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Media composition (client concept, 14 Jul): circular photo anchored right;
   the badge's white round container sits ON TOP, overlapping the photo's left
   edge, with the shield centered inside it and a silver stroke on the
   container's right half only. Fully fluid: the wrapper fixes the aspect
   ratio and all geometry is percentage-based, so the composition scales with
   its column at every viewport — no per-breakpoint pixel sizes. Reference
   geometry at 550px wide: orb 380, container 270, overlap 100, badge 150. */
.std-hero__media {
  position: relative;
  width: 100%;
  max-width: 550px;
  margin-left: auto;
  aspect-ratio: 550 / 390;
}
.std-hero__orb {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 69.1%;              /* 380/550 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 15px solid var(--iam-orange);  /* accent ring around the photo */
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.std-hero__orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Soft navy grade keeps any licensed photo in the brand palette; dial the
   final stop up/down (or delete the rule) once the real image is in. */
.std-hero__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(200deg,
    rgba(13, 58, 99, 0)    55%,
    rgba(13, 58, 99, 0.22) 100%);
  pointer-events: none;
}
/* The badge's round white container. Sits ON TOP of the orb, biting into the
   photo's left edge (concept: container overlaps the image, not the reverse).
   The stroke exists only on the RIGHT half — drawn by the ::before ring
   clipped at the vertical midline — so against the light hero surface the
   container reads as a floating arc over the photo. */
.std-hero__crest {
  position: absolute;
  z-index: 2;                /* above the orb */
  right: 50.9%;              /* 280/550 — 100px overlap with the orb @ 550 */
  top: 50%;
  transform: translateY(-50%);
  width: 49.1%;              /* 270/550 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.std-hero__crest::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid #A67C1E;          /* gold arc */
  clip-path: inset(0 0 0 50%);       /* keep the right semicircle only */
  pointer-events: none;
}
.std-hero__badge {
  position: relative;
  height: 55.5%;             /* 150/270, relative to the container */
  width: auto;
  filter: drop-shadow(0 10px 18px rgba(13, 58, 99, 0.22));
}

/* ---- For Consumers — cream band ------------------------------------------ */
/* Cream is the established IAMTrusted consumer-trust surface (search-page
   banner, homepage dispute card family). Prose left, verification card right
   so the paragraph's claims have a visual anchor. */
.std-consumers { background: var(--iam-cream); border-bottom: 1px solid var(--iam-cream-dk); }
.std-consumers__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 64px;
  align-items: start;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.std-consumers__title { font: 700 var(--text-2xl)/1.15 var(--font-heading); margin: 14px 0 18px; }
.std-prose p {
  color: var(--iam-text-mid);
  line-height: 1.75;
  max-width: 62ch;
}
.std-prose p + p { margin-top: 16px; }

/* "What the IAM verifies" card — same credential language as the homepage
   step-2 mock and the search-page verified panel, promoted to a card. */
.std-verifycard {
  background: #fff;
  border: 1px solid var(--iam-cream-dk);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px 28px;
}
.std-verifycard__label {
  font: 700 var(--text-xs)/1 var(--font-heading);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--iam-text-muted);
  margin-bottom: 16px;
}
.std-verifycard__rows { display: flex; flex-direction: column; gap: 12px; }
.std-cred {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 var(--text-sm)/1.3 var(--font-body);
  color: var(--iam-text);
}
.std-cred__mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--iam-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.std-verifycard__note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--iam-border-lt);
  font-size: var(--text-xs);
  color: var(--iam-text-muted);
  line-height: 1.6;
}

/* ---- For Moving Companies — white band ------------------------------------ */
/* Tonal shift signals the audience change. Prose + CTA left; the three ITM
   steps right using the shared .steplist component (global.css) — static, no
   auto-cycle: this is a reference page, not the homepage pitch animation. */
.std-movers { background: #fff; }
.std-movers__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: start;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.std-movers__title { font: 700 var(--text-2xl)/1.15 var(--font-heading); margin: 14px 0 18px; }
.std-movers__cta { margin-top: 28px; }

.std-movers__steps {
  background: var(--iam-bg);
  border-radius: var(--radius-xl);
  padding: 32px 34px;
}
.std-movers__stepshead {
  font: 700 var(--text-md)/1.35 var(--font-heading);
  color: var(--iam-text);
  margin-bottom: 24px;
}

/* ---- Closing — consumer counterweight to the Apply CTA -------------------- */
.std-closing { background: var(--iam-bg); }
.std-closing__inner { padding-top: 64px; padding-bottom: 64px; text-align: center; }
.std-closing__title { font: 700 var(--text-2xl)/1.1 var(--font-heading); margin-bottom: 10px; }
.std-closing__text { color: var(--iam-text-muted); margin-bottom: 26px; }

/* ============================================================================
   RESOURCES PAGE (.res-)  —  "Resources for a Smarter Move"
   ============================================================================ */


/* ---- IAMTrusted page responsive ----------------------------------------- */
/* The .std- half of pages.css's four media queries; .res- rules land with the
   Resources port. */
@media (max-width: 992px) {
  /* Stack the hero: text first, composition centered below. The fluid
     composition sizes itself; only alignment changes here. */
  .std-hero__grid {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 52px;
    padding-bottom: 64px;
  }
  .std-hero__media { margin: 0 auto; }
  .std-consumers__grid { grid-template-columns: 1fr; gap: 40px; }
  .std-movers__grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 768px) {
  .std-consumers__grid,
  .std-movers__grid { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 480px) {
  .std-hero__orb { border-width: 10px; }   /* keep the ring proportionate */
  .std-hero__crest::before { border-width: 3px; }
  .std-hero__title { font-size: var(--text-xl); }
  .std-consumers__title,
  .std-movers__title,
  .std-closing__title { font-size: var(--text-xl); }
  .std-movers__steps { padding: 24px 20px; }
  .std-verifycard { padding: 22px 20px; }
}


/* ---- Bricks reconciliation — NOT from the demo --------------------------- */
/* The demo centres this block with text-align:center on a block-level div,
   which also centres the inline-flex .btn. Quick Import makes it a Bricks
   Container, and Bricks containers default to display:flex/column — so the
   heading and paragraph still centre (text-align inherits) but the button
   becomes a flex item positioned by align-items, which defaults to the start.
   Re-express the demo's intent for flex context. Harmless if the element type
   ever changes back to block, where align-items is simply ignored and the
   demo's text-align takes over again.

   The Resources port will need the same on its centred section head. */
.std-closing__inner {
  align-items: center;
}

/* ====================== 7. Generic templates (new work) ================== */

/* Not ported. .page-hero is the shared header band for pages with no demo
   counterpart — the CDRS page now, compliance and help centre later. Type
   values mirror .res-hero exactly so the two bands are indistinguishable;
   kept separate so a change to one never silently moves the other. */
.page-hero {
  background: var(--gradient-band);
  position: relative;
}
.page-hero__inner {
  padding-top: 56px;
  padding-bottom: 60px;
  text-align: center;
  position: relative;
  /* Bricks renders this as a flex column, so text-align alone centres only the
     lead — which has margin:0 auto and therefore centres as a flex item. The
     kicker and title have no auto margins and sit at flex-start. Same fix as
     .std-closing__inner; harmless if the element is ever block. */
  align-items: center;
}
.page-hero__title {
  font: 800 var(--text-3xl)/1.08 var(--font-heading);
  color: #fff;
  letter-spacing: -0.015em;
  margin: 16px 0 14px;
}
.page-hero__lead {
  color: var(--iam-on-blue-muted);
  font-size: var(--text-md);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
}

/* ---- Container rails (opt-in modifier) ---------------------------------- */
/* Vertical hairlines aligned to the 1280px container cap, plus rules top and
   bottom. Deliberately a modifier, not baked into .page-hero, so compliance
   and help-centre heroes don't inherit it — the rails are the CDRS page's
   signature. Positioned off the viewport centre rather than a percentage so
   they track the container, not the window. Below 992 they would collapse onto
   the viewport edges and read as noise, so they're dropped. */
/* Four lines, so they need two elements: verticals on the section, horizontals
   on the inner. The horizontals are INSET from the band edges, not borders on
   it — a border sits exactly on the navy/white and navy/cream boundaries, where
   a translucent white line is invisible. Inset, they read as a frame and give
   the four intersections with the verticals. */
.page-hero--rails::before,
.page-hero--rails::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.page-hero--rails::before { left: calc(50% - (var(--container-max) / 2)); }
.page-hero--rails::after  { left: calc(50% + (var(--container-max) / 2)); }

.page-hero--rails .page-hero__inner::before,
.page-hero--rails .page-hero__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
/* 36px outside the rule, 40px between rule and content — the inner gap stays
   the larger of the two so the frame reads balanced rather than pinched.
   Deeper padding applies only to the railed variant, so a plain .page-hero
   stays dimensionally identical to .res-hero. */
.page-hero--rails .page-hero__inner {
  padding-top: 92px;
  padding-bottom: 96px;
}
.page-hero--rails .page-hero__inner::before { top: 48px; }
.page-hero--rails .page-hero__inner::after  { bottom: 48px; }

@media (max-width: 992px) {
  .page-hero--rails::before,
  .page-hero--rails::after,
  .page-hero--rails .page-hero__inner::before,
  .page-hero--rails .page-hero__inner::after { display: none; }
}

/* ---- Anchor targets ------------------------------------------------------ */
/* The nav is sticky at 64px, so an anchor jump would drop the target underneath
   it. Applies to any section used as an in-page anchor destination. */
[id="how-it-works"],
.anchor-target {
  scroll-margin-top: 78px;
}

/* ---- CDRS timeline ------------------------------------------------------- */
/* Three milestone markers on a rail. Marker spacing is proportional, not
   to scale: at true scale day 10 sits a third of the way along and crowds
   day 0. The trailing pale segment is deliberate — what follows day 30 is
   "alternate dispute resolution options", which carry no published deadline,
   so the rail stops being solid where the copy stops committing to a
   timeframe. */
/* ---- Generic section utilities ------------------------------------------- */
/* .std-movers and friends carry background only — every bit of vertical padding
   lives on their __grid child. A section built from a bare .container therefore
   has none, and its content welds to the band edges. This supplies it for
   sections with no grid of their own. */
.page-section__inner {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Stacked cards in a sidebar column. Adjacent-sibling rather than a gap on the
   wrapper, so it holds whether Bricks renders that div as flex or block.
   Quick Import strips inline style attributes, so spacing like this can never
   be done inline — it needs a class. */
.page-cardstack > * + * {
  margin-top: 20px;
}

/* ---- Ported-component type uplifts -------------------------------------- */
/* Both of these were sized in the demo for a lighter job than they do here.
   Raised in this section rather than edited in place, so sections 5 and 6 stay
   verbatim against the demo.

   .std-verifycard__note: --text-xs (12px base) as a one-line footnote under a
   short credential list. On the CDRS page it carries the eligibility rules and
   the only route out for ineligible users.

   .steplist__desc: --text-sm, sized for the IAMTrusted page's three short ITM
   steps. Here it carries six paragraphs of substantive process copy, so it
   matches the surrounding prose instead. */
.std-verifycard__note {
  font-size: var(--text-sm);
}

/* .std-hero__lead is a six-line paragraph on a 560px measure — body copy doing
   body copy's job, not a strapline. --text-md is lead sizing, which works on
   short text and does not scale to paragraph length; at a 19px root it lands
   near 21px and the block dominates the hero.
   Deliberately NOT applied to .page-hero__lead or .res-hero__lead: those are
   one- and two-line straplines where lead sizing is doing real work. Same token
   in the demo, different jobs here. */
.std-hero__lead {
  font-size: var(--text-base);
}
.steplist__desc {
  font-size: var(--text-base);
}

/* Step 5 of the CISS process carries two paragraphs — a resolved branch and an
   unresolved one. The demo's steplist only ever had single-paragraph steps. */
.steplist__desc + .steplist__desc {
  margin-top: 12px;
}

/* ---- Sidebar-less variant of the consumers grid -------------------------- */
/* .std-consumers__grid is 1.25fr 0.75fr for a prose column plus a card column.
   The CISS process section lost both its cards, which would leave a dead
   0.75fr and set the steplist loose across the full 1280px container — the
   step descriptions are body copy and need a measure. One column at a fixed
   width keeps the content left-aligned with every other section on the page
   rather than centring it, which would break the vertical edge the heroes and
   prose blocks share. */
.std-consumers__grid--solo {
  grid-template-columns: minmax(0, 720px);
}


.cdrs-timeline {
  position: relative;
}
.cdrs-timeline__rail,
.cdrs-timeline__rail-tail {
  position: absolute;
  top: 15px;
  height: 3px;
  border-radius: 2px;
}
.cdrs-timeline__rail {
  left: 0;
  right: 24%;
  background: var(--iam-blue);
}
.cdrs-timeline__rail-tail {
  left: 76%;
  right: 0;
  background: var(--iam-blue-tint);
}
.cdrs-timeline__marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.cdrs-timeline__num {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--iam-blue);
  color: #fff;
  font: 700 var(--text-sm)/1 var(--font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cdrs-timeline__day {
  font: 700 var(--text-base)/1.3 var(--font-heading);
  color: var(--iam-text);
  margin: 14px 0 4px;
}
.cdrs-timeline__desc {
  font-size: var(--text-sm);
  color: var(--iam-text-mid);
  line-height: 1.55;
  margin: 0;
}
.cdrs-timeline__after {
  text-align: right;
  margin-top: 20px;
}
.cdrs-timeline__afterpill {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--iam-blue);
  background: var(--iam-blue-tint);
  border-radius: 6px;
  padding: 6px 14px;
}

/* Stacked below M — three columns will not hold, and a vertical rail reads
   better than three cramped ones. */
@media (max-width: 768px) {
  .cdrs-timeline__rail,
  .cdrs-timeline__rail-tail { display: none; }
  .cdrs-timeline__marks {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .cdrs-timeline__after { text-align: left; }
}

/* ====================== 8. Compliance archive (new work) ================= */

/* Nothing here is ported — the source page is a Hestia link list. Four pieces:
   a move-type chooser, a filter bar, the jurisdiction grid, and a disclaimer
   band. GENERIC candidates, flagged for promotion to section 7 if reused:
   .choice-*, .filterbar, .page-footnote. Page-specific: .juris-*. */

/* ---- Move-type chooser (GENERIC) ---------------------------------------- */
/* width:100% because Bricks renders the parent as a flex column and these
   grids are flex items — without it they take shrink-to-fit width. The chooser
   masked this at first: its cards carry enough text that max-content reaches
   the container edge anyway, while the shorter state cards do not.
   Not fixed via align-items:stretch on .brxe-container.container — that rule is
   two classes and would outrank the single-class align-items:center keeping
   .std-closing__inner and .page-hero__inner centred. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
}
.choice-card {
  display: block;
  background: #fff;
  border: 1px solid var(--iam-cream-dk);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.choice-card:hover {
  border-color: var(--iam-blue);
  transform: translateY(-2px);
}
/* The branch this page is already on — signposted, not a hover state. */
.choice-card--current {
  border-color: var(--iam-blue);
  border-width: 2px;
  padding: 19px 21px;   /* absorb the extra border so cards stay aligned */
}
.choice-card__title {
  font: 700 var(--text-base)/1.3 var(--font-heading);
  color: var(--iam-text);
  margin-bottom: 7px;
}
.choice-card--current .choice-card__title { color: var(--iam-blue); }
.choice-card__desc {
  font-size: var(--text-sm);
  color: var(--iam-text-mid);
  line-height: 1.55;
  margin: 0;
}
.choice-card__go {
  display: inline-block;
  margin-top: 13px;
  font-size: var(--text-sm);
  color: var(--iam-blue);
}

/* ---- Filter bar (GENERIC) ------------------------------------------------ */
/* Hidden by default and revealed by js/compliance-filter.js. Same guard as
   reveal.js: if the script never runs, the field never appears, so nobody
   types into a control that cannot work. The full grid is always rendered. */
.filterbar { display: none; }
html.has-filter .filterbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  /* .std-prose's last paragraph has no bottom margin — p + p only sets the top
     of subsequent paragraphs — so the bar needs its own clearance. */
  margin-top: 30px;
  margin-bottom: 22px;
}
.filterbar__field {
  flex: 1;
  min-width: 240px;
  border: 1px solid var(--iam-border);
  border-radius: 10px;
  padding: 12px 15px;
  font: var(--type-body);
  font-size: var(--text-sm);
  color: var(--iam-text);
  background: #fff;
}
.filterbar__field::placeholder { color: var(--iam-text-muted); }
.filterbar__field:focus {
  outline: none;
  border-color: var(--iam-blue);
  box-shadow: 0 0 0 3px var(--iam-blue-tint);
}
.filterbar__count {
  font-size: var(--text-sm);
  color: var(--iam-text-muted);
  white-space: nowrap;
}

/* ---- Jurisdiction grid --------------------------------------------------- */
.juris-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
.juris-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--iam-cream-dk);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.juris-card:hover {
  border-color: var(--iam-blue);
  transform: translateY(-2px);
}
.juris-card__name {
  font: 700 var(--text-base)/1.25 var(--font-heading);
  color: var(--iam-text);
  margin-bottom: 11px;
}
/* Status is a characterisation of regulatory posture, so both states are
   neutral by design — "no separate licence" must not read as "unregulated".
   Blue for required, grey for not; never red or green. */
.juris-card__status {
  align-self: flex-start;
  font-size: var(--text-sm);
  border-radius: 5px;
  padding: 3px 9px;
  margin-bottom: 13px;
  background: var(--iam-blue-tint);
  color: var(--iam-blue);
}
.juris-card__status--none {
  background: var(--iam-bg);
  color: var(--iam-text-mid);
}
.juris-card__label {
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--iam-text-muted);
  margin-bottom: 4px;
}
.juris-card__regulator {
  font-size: var(--text-sm);
  color: var(--iam-text-mid);
  line-height: 1.5;
}
.juris-card__go {
  border-top: 1px solid var(--iam-border-lt);
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--text-sm);
  color: var(--iam-blue);
}
.juris-card__go::after { content: " \2192"; }

/* Set by the filter script; the grid itself never changes. */
.juris-card.is-hidden { display: none; }

.juris-empty {
  display: none;
  padding: 34px 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--iam-text-mid);
}
.juris-empty.is-shown { display: block; }

/* ---- Section footnote (GENERIC) ------------------------------------------ */
/* Was a full-bleed band. Two problems with that: it sat on --iam-bg directly
   above .std-closing, which is also light, so the two merged into one grey
   block and the disclaimer read as a preamble to the CTA rather than a
   qualifier on the state list. And it detached the caveat from the content it
   qualifies.

   Now a bordered footnote at the end of the section, grouped with the
   last-updated line — both say the same thing, that this is a snapshot to be
   verified. Ray's source has it before the list, but only because a bare link
   list has nowhere else to put it. The copy is unchanged. */
.page-footnote {
  width: 100%;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--iam-border-lt);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
.page-footnote__note {
  flex: 1;
  min-width: 280px;
  margin: 0;
  max-width: 68ch;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--iam-text-mid);
  line-height: 1.7;
}
.page-footnote__note strong {
  font-style: normal;
  color: var(--iam-text);
}
.page-footnote__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--iam-text-muted);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .page-footnote { flex-direction: column; gap: 14px; }
  .page-footnote__meta { white-space: normal; }
}

/* ---- Compliance archive responsive --------------------------------------- */
@media (max-width: 992px) {
  .choice-grid { grid-template-columns: 1fr; gap: 14px; }
  .juris-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .juris-grid { grid-template-columns: 1fr; }
  html.has-filter .filterbar { gap: 10px; }
  .filterbar__field { min-width: 0; }
}


/* ====================== 9. S/XS pass (new work) ========================== */

/* Not ported — the demo has no rules below 768 for the nav, and stacks the
   footer to a single column. Both are revised here for phone widths. Kept in
   its own section, last in the file, so sections 2 and 4 stay diffable against
   the demo and every deviation from it is visible in one place. */

/* ---- Mobile nav panel: reachability ------------------------------------- */
/* The panel is position:absolute inside a position:sticky nav, so it cannot be
   scrolled to — anything past the viewport bottom is simply unavailable. With
   five items and eight inline-expanded sub-items the panel runs ~535px, which
   overflows a phone in landscape (375px tall) by ~260px. Cap it and let the
   panel scroll internally. overscroll-behavior stops the scroll chaining to
   the page once the panel hits its end. */
@media (max-width: 768px) {
  .site-nav__links {
    max-height: calc(100vh - 64px);   /* fallback */
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- Footer: 2-up instead of a single stack ----------------------------- */
/* Section 4 stacks all five columns at 560, which puts the footer at ~972px —
   taller than the viewport on a page with no content. Two columns for the four
   link groups, brand full-width above them, drops it to roughly 550-600px.
   CSS only: no markup change, no re-import, nothing to touch in Bricks.

   Overrides section 4's single-column rule on source order, same specificity,
   which is why this section stays last. */
@media (max-width: 560px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
  /* Brand + blurb column spans the full width above the link groups. */
  .site-footer__top > :first-child {
    grid-column: 1 / -1;
  }
  /* max-width:260px from section 4 is a desktop measure; let it fill here. */
  .site-footer__blurb {
    max-width: none;
  }
}

/* At XS the columns land near 157px, so the longest labels ("For Moving
   Professionals", "How Verification Works") wrap to two lines. Expected, not a
   defect — the tighter row gap keeps the wrapped rows from reading as one
   run-on block. */
@media (max-width: 375px) {
  .site-footer__top {
    column-gap: 20px;
    row-gap: 26px;
  }
  .site-footer__links {
    gap: 13px;
  }
}

/* ===================== 10. Regulatory & Compliance ======================= */

/* compliance_entry single. Direction: documentary — a filed record rather
   than a brochure. Three devices carry it and nothing else decorates:

     1. the state seal, masked and embossed into the hero
     2. Quick Facts as a ruled register, not a card
     3. a monospace utility face on statutory instruments and exact figures
        (system stack — no additional webfont)

   The register spans the 860px column while prose is measured at 66ch. That
   two-tier rhythm is deliberate; do not equalise them.
*/

/* FULL-WIDTH BANDS
   .ce-hero and .ce-subnav simply fill their parent; their inners re-establish
   the 1280px measure so content aligns with .ce-body below.

   This works because the Bricks single template puts Post Content inside a
   Block element, which carries no width cap or horizontal padding. A Section
   or Container would constrain it — and a Container also picking up the
   `container` CSS class would be capped at --container-max by section 3's
   .brxe-container.container rule, whatever the Bricks width field says.

   Earlier revisions escaped a constrained container with width:100vw and
   negative margins. Removed deliberately: 100vw includes the vertical
   scrollbar, so the band came out ~17px wider than the visible area, overflowed
   both edges and shifted the hero off centre. It also needed overflow-x:clip on
   the article to absorb, which risks re-scoping position:sticky on .ce-subnav.
   Keeping the template's Block element means none of that is necessary. */
.ce-hero,
.ce-subnav {
  width: 100%;
}

.ce {
  /* Clearance above the sticky sub-nav.
     0 is correct when .site-nav scrolls away on this template — which is what
     it currently does, because the header sits inside the template's container
     and position:sticky is scoped to that ancestor.
     If you restructure the Bricks template so .site-nav stays pinned (header as
     a top-level sibling of the content section, not nested inside it), change
     this to 64px — its height — and both the sub-nav and every anchor target
     will follow. It is the only value to change. */
  --ce-nav-offset: 0px;
  /* Matches the site container, so the hero inner, the sub-nav and the body
     all align to the same measure as every other page. */
  --ce-body: var(--container-max);
  /* Prose stays measured regardless of how wide the column gets — 72ch is the
     comfortable ceiling. The empty space to its right is intentional. */
  --ce-measure: 72ch;
  --ce-rule: color-mix(in srgb, var(--iam-blue-navy) 12%, transparent);
  --ce-rule-firm: color-mix(in srgb, var(--iam-blue-navy) 26%, transparent);
  --ce-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--iam-text);
}

/* ---- the utility face: statutory instruments and exact figures ---------- */

.ce-inst {
  font-family: var(--ce-mono);
  font-size: 0.88em;
  letter-spacing: -0.01em;
  padding: 0.1em 0.3em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--iam-blue) 7%, transparent);
  color: var(--iam-blue-dk);
  white-space: nowrap;
}

/* ---- hero -------------------------------------------------------------- */

.ce-hero {
  position: relative;
  overflow: hidden;
  /* Same band as .page-hero (section 7), so the single and the archive share
     one surface. Was a flat --iam-blue-navy. */
  background: var(--gradient-band);
  padding: clamp(48px, 6vw, 72px) 0 clamp(40px, 5vw, 60px);
  isolation: isolate;
}

/* The seal, embossed.
   Not a CSS mask of the image: a mask uses only alpha, and these seals are
   fully opaque inside their outline, so masking reduces each one to a
   featureless disc.
   Not a plain low-opacity image either: the source PNGs carry an opaque
   circular ground, so any brightening turns that ground into a visible
   lighter disc with a hard edge.
   So — real image, blended into the navy, with a radial gradient fading the
   outer ring. The gradient is what dissolves the disc edge; the blend is what
   makes the engraving read as an impression rather than a sticker. */
.ce-hero__seal {
  position: absolute;
  z-index: 0;
  top: 50%;
  /* .ce-hero spans the full width of a full-width container, so a plain right
     offset would anchor the seal to the viewport edge and it would drift
     outside the content column on wide screens. This aligns its right edge to
     the 1280px measure instead, falling back to a small inset once the
     viewport is narrower than that. */
  right: max(16px, calc(50% - (var(--container-max) / 2)));
  /* Sized against the band, not only the viewport. A width clamp alone let the
     seal reach 300px in a band that is roughly 295px tall once the hero padding
     came down with the smaller title, so it touched both edges. max-height
     keeps a fixed clearance top and bottom; aspect-ratio pulls the width down
     with it, so the seal stays square whichever constraint binds. */
  width: clamp(120px, 14vw, 175px);
  max-height: calc(100% - 88px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background-image: var(--seal);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Plain image — no blend, no desaturation. The seal reads as itself: full
     colour, sitting on the band rather than pressed into it. */
  opacity: 1;
  /* No mask. With a blend, the radial fade was what dissolved the seal's
     opaque circular ground into the band; shown plainly there is nothing to
     dissolve into, and feathering a full-colour image just makes it look
     damaged. The PNG's own edge is the edge. */
  pointer-events: none;
}

/* To go back to a blended watermark, restore inside .ce-hero__seal:
     filter: grayscale(1) contrast(1.25);
     opacity: 0.55;
     mix-blend-mode: multiply;
     -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 88%);
     mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 88%);
   The mask matters there: without it the seal's opaque circular ground shows
   as a hard-edged disc.                                          */

.ce-hero__inner {
  position: relative;
  z-index: 1;
  width: min(var(--ce-body), calc(100% - 2 * var(--container-pad, 24px)));
  margin-inline: auto;
}

.ce-kicker {
  margin: 0 0 var(--space-5);
  font: var(--fw-bold) var(--text-xs)/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--iam-on-blue-muted);
}
.ce-kicker span { color: var(--iam-orange); padding: 0 0.35em; }

/* Matched to .page-hero__title (section 7) exactly — same weight, size, line
   height and tracking — so the compliance single and the archive read as one
   family. Was a fluid clamp up to 5.75rem, which was distinctive but made this
   page the odd one out. */
.ce-hero__name {
  margin: 0;
  font: var(--fw-extrabold) var(--text-3xl)/1.08 var(--font-heading);
  letter-spacing: -0.015em;
  color: var(--iam-white);
  text-wrap: balance;
}

/* The verdict: the one fact most readers came for, restated from the
   License Required field. Rule above it, not a chip — a chip would read as
   a badge, and this is a finding. */
.ce-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 2px solid var(--iam-orange);
  font: var(--fw-semibold) var(--text-lg)/1.2 var(--font-heading);
  color: var(--iam-white);
}
.ce-verdict__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--iam-orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--iam-orange) 22%, transparent);
}
.ce-verdict--none { border-top-color: var(--iam-on-blue-border); }
.ce-verdict--none .ce-verdict__dot {
  background: color-mix(in srgb, var(--iam-white) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--iam-white) 14%, transparent);
}

.ce-hero__auth {
  max-width: 52ch;
  margin: var(--space-4) 0 0;
  font: var(--fw-regular) var(--text-base)/1.6 var(--font-body);
  color: var(--iam-on-blue-muted);
}
.ce-hero__authlab {
  display: block;
  margin-bottom: 2px;
  font: var(--fw-bold) var(--text-xs)/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--iam-on-blue-faint);
}
/* Two classes, so a global or Bricks anchor colour cannot outrank it — at one
   class the link was being repainted and read as dimmer than the plain text
   beside it, which is backwards. Text goes full white; the underline carries
   the softer tone instead. */
.ce-hero .ce-hero__auth a {
  color: var(--iam-white);
  text-decoration: underline;
  text-decoration-color: var(--iam-on-blue-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ce-hero .ce-hero__auth a:hover {
  text-decoration-color: var(--iam-white);
}
.ce-hero__auth .ce-inst {
  background: var(--iam-on-blue-surface);
  color: var(--iam-white);
}

/* ---- sticky subnav ----------------------------------------------------- */

.ce-subnav {
  position: sticky;
  top: var(--ce-nav-offset);
  /* Below .site-nav (100) so it never covers the main nav, above content. */
  z-index: 20;
  background: color-mix(in srgb, var(--iam-white) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ce-rule);
}
.ce-subnav__inner {
  width: min(var(--ce-body), calc(100% - 2 * var(--container-pad, 24px)));
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3) var(--space-6);
  min-height: 54px;
  padding-block: var(--space-3);
}
/* Breadcrumb — replaces the "On this page" label. Same typographic voice as
   the label it replaces so the bar's texture is unchanged; only the first
   segment is interactive. */
.ce-crumb {
  flex: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;   /* three segments will not hold on one line at XS */
  gap: var(--space-2);
  padding-top: 9px;
  font: var(--fw-bold) var(--text-xs)/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ce-crumb__link {
  color: var(--iam-text-faint);
  text-decoration: none;
  transition: color var(--dur-fast, .15s);
}
.ce-crumb__link:hover { color: var(--iam-blue-dk); }
.ce-crumb__link:focus-visible {
  outline: 2px solid var(--iam-orange);
  outline-offset: 2px;
  color: var(--iam-blue-dk);
}
/* Ancestor segment with no page worth landing on yet — same resting colour as
   a link so the bar's texture is unchanged, but not interactive. */
.ce-crumb__anc  { color: var(--iam-text-faint); }
.ce-crumb__sep  { color: var(--iam-text-faint); }
.ce-crumb__here { color: var(--iam-text-mid); }
.ce-subnav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.ce-subnav__link {
  padding: 6px 12px;
  border: 1px solid var(--ce-rule-firm);
  border-radius: var(--radius-sm, 4px);
  background: var(--iam-white);
  font: var(--fw-medium) var(--text-sm)/1.3 var(--font-body);
  color: var(--iam-text-mid);
  text-decoration: none;
  transition:
    color var(--dur-fast, .15s),
    border-color var(--dur-fast, .15s),
    background-color var(--dur-fast, .15s);
}
.ce-subnav__link:hover {
  color: var(--iam-blue-dk);
  border-color: var(--iam-blue);
  background: color-mix(in srgb, var(--iam-blue) 6%, var(--iam-white));
}
.ce-subnav__link:focus-visible {
  outline: 2px solid var(--iam-orange);
  outline-offset: 2px;
  color: var(--iam-blue-dk);
  border-color: var(--iam-blue);
}

/* ---- body -------------------------------------------------------------- */

.ce-body {
  width: min(var(--ce-body), calc(100% - 2 * var(--container-pad, 24px)));
  margin-inline: auto;
  padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px);
}

/* Clears the site nav plus a wrapped two-row chip bar. Section 7 sets 78px on
   [id="how-it-works"] for the same reason with only one bar to clear. */
.ce-section { scroll-margin-top: calc(var(--ce-nav-offset) + 6.5rem); }
.ce-section + .ce-section { margin-top: clamp(40px, 5vw, 64px); }

/* Heading: an eyebrow that names the section's role, then the title. The
   eyebrow is content, not decoration — it's how the subnav labels map. */
.ce-h2 {
  margin: 0 0 var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ce-rule-firm);
  font: var(--fw-semibold) var(--text-xl)/1.15 var(--font-heading);
  letter-spacing: -0.02em;
  color: var(--iam-blue-navy);
}
.ce-h2__num {
  display: block;
  margin-bottom: var(--space-3);
  font: var(--fw-bold) var(--text-xs)/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--iam-orange-dk);
}

.ce-section p,
.ce-section li {
  font: var(--fw-regular) var(--text-base)/1.7 var(--font-body);
  color: var(--iam-text-mid);
}
.ce-section p { max-width: var(--ce-measure); margin: 0 0 var(--space-4); }
.ce-section p:last-child { margin-bottom: 0; }

.ce-list,
.ce-steps { max-width: var(--ce-measure); margin: 0 0 var(--space-5); padding-left: 0; list-style: none; }
.ce-list > li,
.ce-steps > li { position: relative; padding-left: var(--space-6); }
.ce-list > li + li,
.ce-steps > li + li { margin-top: var(--space-2); }
.ce-list > li::before {
  content: ""; position: absolute; left: 7px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--iam-orange);
}
.ce-steps { counter-reset: ce-step; }
.ce-steps > li { counter-increment: ce-step; padding-left: var(--space-8); }
.ce-steps > li::before {
  content: counter(ce-step);
  position: absolute; left: 0; top: 0.15em;
  font: var(--fw-bold) var(--text-xs)/1 var(--ce-mono);
  color: var(--iam-blue);
  padding-top: 4px;
}
.ce-list .ce-list, .ce-steps .ce-list { margin: var(--space-2) 0 0; }
.ce-list .ce-list > li::before, .ce-steps .ce-list > li::before {
  background: var(--iam-text-faint); width: 4px; height: 4px;
}
.ce-section a { color: var(--iam-blue-dk); text-decoration: underline; text-underline-offset: 2px; }

/* ---- notice ------------------------------------------------------------ */

.ce-notice {
  max-width: var(--ce-measure);
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-left: var(--space-5);
  border-left: 2px solid var(--iam-orange);
}
.ce-notice__lab {
  margin: 0 0 var(--space-2);
  font: var(--fw-bold) var(--text-xs)/1 var(--font-heading);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--iam-orange-dk);
}
.ce-notice__txt {
  margin: 0;
  font: var(--fw-regular) var(--text-sm)/1.65 var(--font-body);
  color: var(--iam-text-muted);
}

/* ---- the ledger -------------------------------------------------------- */
/* A register, not a card: hairline rules, no fill, no border box. Three
   columns — what, whether, and the particulars. */

.ce-ledger {
  margin: 0;
  border-top: 1px solid var(--ce-rule-firm);
}
.ce-ledger__row {
  display: grid;
  /* Capped, not 1fr: at container width an unbounded detail column reaches
     roughly 108ch, which is unreadable for short fragments. */
  grid-template-columns: 15rem 7rem minmax(0, 60ch);
  gap: var(--space-2) var(--space-5);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ce-rule);
}

.ce-ledger__label {
  font: var(--fw-semibold) var(--text-sm)/1.35 var(--font-heading);
  color: var(--iam-blue-navy);
}
.ce-ledger__status { margin: 0; padding-top: 0.2em; }
.ce-ledger__detail {
  margin: 0;
  font: var(--fw-regular) var(--text-sm)/1.6 var(--font-body);
  color: var(--iam-text-mid);
}
.ce-ledger__detail a { color: var(--iam-blue-dk); text-decoration: underline; text-underline-offset: 2px; }
.ce-ledger__detail ul { margin: var(--space-2) 0 0; padding-left: 0; list-style: none; }
.ce-ledger__detail li { position: relative; padding-left: var(--space-4); }
.ce-ledger__detail li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--iam-orange);
}
.ce-ledger__detail li + li { margin-top: 3px; }

.ce-status {
  font: var(--fw-bold) var(--text-xs)/1 var(--ce-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--iam-blue-dk);
  white-space: nowrap;
}
.ce-status--no,
.ce-status--not-required,
.ce-status--none { color: var(--iam-text-faint); }

.ce-ledger__note {
  max-width: var(--ce-measure);
  margin: var(--space-4) 0 0;
  font: var(--fw-regular) var(--text-xs)/1.6 var(--font-body);
  color: var(--iam-text-muted);
}

/* Rows the parser reconstructed. Visible on purpose while this is in
   review — it is the honest state of the data, not a defect to hide. */
.ce-ledger__row[data-recovered="true"] .ce-ledger__label::after {
  content: "reconstructed";
  display: block;
  margin-top: 3px;
  font: var(--fw-regular) 0.6875rem/1 var(--ce-mono);
  text-transform: none;
  letter-spacing: 0;
  color: var(--iam-orange-dk);
}

/* ---- checklist --------------------------------------------------------- */

.ce-checklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ce-rule-firm); }
.ce-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 62ch) auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ce-rule);
}

.ce-check__mark {
  position: relative;
  top: 0.12em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--iam-success, #2E7D4F) 14%, transparent);
}
.ce-check__mark::after {
  content: "";
  position: absolute;
  left: 5px; top: 5px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--iam-success, #2E7D4F);
  border-bottom: 2px solid var(--iam-success, #2E7D4F);
  transform: rotate(-45deg);
}
.ce-check--neg .ce-check__mark { background: color-mix(in srgb, var(--iam-text-faint) 16%, transparent); }
.ce-check--neg .ce-check__mark::after {
  left: 5px; top: 8px;
  width: 8px; height: 2px;
  border: 0;
  background: var(--iam-text-faint);
  transform: none;
}

.ce-check__req {
  font: var(--fw-medium) var(--text-sm)/1.5 var(--font-body);
  color: var(--iam-text);
}
.ce-check__status {
  text-align: right;
  padding-top: 0.2em;
  font: var(--fw-bold) var(--text-xs)/1 var(--ce-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--iam-blue-dk);
}
.ce-check--neg .ce-check__status { color: var(--iam-text-faint); }
.ce-check__qual {
  display: block;
  max-width: 18ch;
  margin-top: 5px;
  font: var(--fw-regular) 0.6875rem/1.4 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--iam-text-muted);
}

/* ---- footer meta ------------------------------------------------------- */

.ce-foot {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ce-rule-firm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
}
/* Footer nav — All 51 + the two tier links restored from the source's button
   block. Full-width first row inside .ce-foot's flex, ruled off from the
   meta so navigation and provenance don't blur together. */
.ce-foot__nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ce-rule);
}
.ce-foot__navlink {
  font: var(--fw-medium) var(--text-sm)/1.3 var(--font-body);
  color: var(--iam-blue-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ce-foot__navlink:hover { color: var(--iam-blue); }
.ce-foot__navlink:focus-visible { outline: 2px solid var(--iam-orange); outline-offset: 2px; }

.ce-foot p { margin: 0; font: var(--fw-regular) var(--text-xs)/1.6 var(--font-body); color: var(--iam-text-muted); }
.ce-foot__meta span:first-child {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.12em; margin-right: var(--space-3);
  color: var(--iam-text-faint);
}
.ce-foot__src a { color: var(--iam-blue-dk); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Sources — statutory citations ------------------------------------- */
/* Present only where the entry carries them; hand-authored files do, the
   transcribed mx corpus does not. Full width so it sits on its own row inside
   .ce-foot's flex, ruled off from the provenance lines above it. Small and
   muted deliberately: this is apparatus, and it should read as citation rather
   than compete with the content. */
.ce-sources {
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ce-rule);
}
.ce-sources__label {
  margin-bottom: var(--space-2);
  font: var(--fw-bold) var(--text-xs)/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--iam-text-faint);
}
.ce-sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.ce-sources__item {
  font: var(--fw-regular) var(--text-xs)/1.6 var(--font-body);
  color: var(--iam-text-muted);
}
.ce-sources__item a {
  color: var(--iam-blue-dk);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- responsive: L 992 · M 768 · S 480 · XS 375 ------------------------ */

@media (max-width: 1180px) {
  .ce-ledger__row { grid-template-columns: 13rem 6rem minmax(0, 1fr); }
  .ce-check { grid-template-columns: 18px minmax(0, 1fr) auto; }
}

@media (max-width: 860px) {
  .ce-ledger__row { grid-template-columns: 11rem 5.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
}

@media (max-width: 768px) {
  .ce-subnav__inner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .ce-crumb { padding-top: 0; }
  /* Label over value over particulars — the status keeps its own line so it
     stays scannable, which is the whole point of the register. */
  .ce-ledger__row {
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-4) 0;
  }
  .ce-ledger__label { grid-column: 1; }
  .ce-ledger__status { grid-column: 2; grid-row: 1; text-align: right; }
  .ce-ledger__detail { grid-column: 1 / -1; margin-top: 2px; }
}

@media (max-width: 480px) {
  .ce-hero__seal {
    right: -60px;
    width: 220px;
    top: auto;
    bottom: -30px;
    transform: none;
    opacity: 0.3;
  }
  .ce-verdict { font-size: var(--text-md); }
  .ce-check { grid-template-columns: 18px minmax(0, 1fr); }
  .ce-check__status { grid-column: 2; text-align: left; padding-top: 0; }
  .ce-check__qual { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}


/* ---- Archive card additions --------------------------------------------
   These belong with .juris-card in section 8 and should be moved there when
   that section is next touched. They live here only to avoid mid-file surgery
   on a working stylesheet.

   Section 8 defines two status tones — blue for required, grey for not — and
   its comment is explicit that neither may read as a judgement. A third case
   exists in the data: the source page hedges (Minnesota says "Presumed No"),
   so IAM has not established the answer either way. That must not render as
   the grey "not required" pill, which would assert something the source does
   not. Dashed rather than filled: visibly a gap, not a finding. */
.juris-card__status--unknown {
  background: transparent;
  border: 1px dashed var(--iam-border);
  color: var(--iam-text-muted);
  font-style: italic;
}

/* Alaska's source has no Authority row, so its regulator field renders empty
   and the card would show a REGULATOR heading over nothing.

   NOT solved in CSS. :empty requires no child nodes at all, and Bricks outputs
   an empty dynamic field containing whitespace, so it never matches. :blank
   would match but lacks browser support.

   Handled instead by a Bricks condition on both .juris-card__label and
   .juris-card__regulator — render only when ce_regulator is not empty. Same
   mechanism as the three status pills. Conditions evaluate on the front end
   only, not in the builder canvas. */