/* ============================================================================
   IAMTrusted Consumer Portal — global.css
   Shared foundation: webfonts, design tokens, base reset, and the components
   that appear on every page (nav, footer, buttons, kicker, verify bar,
   feature card, step list, container).
   Page-specific layout lives in home.css / search.css.
   ============================================================================ */

/* ============================================================
   IAM Design System — Webfonts (self-hosted, real files)
   Headings/UI: Metropolis (Thin→Black + italics)  ·  Body: Roboto
   ============================================================ */

@font-face { font-family: 'Metropolis'; font-weight: 100; font-style: normal; font-display: swap; src: url('Metropolis-Thin.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 200; font-style: normal; font-display: swap; src: url('Metropolis-ExtraLight.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 300; font-style: normal; font-display: swap; src: url('Metropolis-Light.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 400; font-style: normal; font-display: swap; src: url('Metropolis-Regular.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 500; font-style: normal; font-display: swap; src: url('Metropolis-Medium.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 600; font-style: normal; font-display: swap; src: url('Metropolis-SemiBold.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 700; font-style: normal; font-display: swap; src: url('Metropolis-Bold.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 800; font-style: normal; font-display: swap; src: url('Metropolis-ExtraBold.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 900; font-style: normal; font-display: swap; src: url('Metropolis-Black.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 100; font-style: italic; font-display: swap; src: url('Metropolis-ThinItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 200; font-style: italic; font-display: swap; src: url('Metropolis-ExtraLightItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 300; font-style: italic; font-display: swap; src: url('Metropolis-LightItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 400; font-style: italic; font-display: swap; src: url('Metropolis-RegularItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 500; font-style: italic; font-display: swap; src: url('Metropolis-MediumItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 600; font-style: italic; font-display: swap; src: url('Metropolis-SemiBoldItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 700; font-style: italic; font-display: swap; src: url('Metropolis-BoldItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 800; font-style: italic; font-display: swap; src: url('Metropolis-ExtraBoldItalic.woff2') format('woff2'); }

@font-face { font-family: 'Metropolis'; font-weight: 900; font-style: italic; font-display: swap; src: url('Metropolis-BlackItalic.woff2') format('woff2'); }

@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('Roboto-Regular.woff2') format('woff2'); }

@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap; src: url('Roboto-Medium.woff2') format('woff2'); }

@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('Roboto-Bold.woff2') format('woff2'); }

/* IAM Design System — Color tokens
   Base palette from the Consumer Portal handoff (v1.1). Hex values are
   authoritative — do not round or snap. Semantic aliases sit on top so
   product code references intent, not raw hues. */

:root {
  /* ---- Base palette ---------------------------------------------- */
  --iam-blue:        #1B75BC;  /* primary brand blue */
  --iam-blue-dk:     #0F4E85;  /* hover / deep navy */
  --iam-blue-mid:    #1565A8;  /* mid blue (hero gradient stop) */
  --iam-blue-navy:   #0D3A63;  /* hero gradient floor */
  --iam-blue-tint:   #E8F3FB;  /* pale blue fill (icon chips, hovers) */

  --iam-orange:      #E87722;  /* CTA / accent */
  --iam-orange-dk:   #C9621A;  /* CTA hover */
  --iam-orange-tint: #FFF3E8;  /* pale orange fill */

  --iam-gold:        #C9A84C;  /* IAMTrusted badge accent */

  --iam-cream:       #FDF8F2;  /* IAMTrusted section background */
  --iam-cream-dk:    #EDE5D8;  /* cream border / divider */
  --iam-bg:          #F2F4F7;  /* app / page background */
  --iam-white:       #FFFFFF;

  --iam-text:        #111827;  /* primary text */
  --iam-text-mid:    #374151;  /* mid-emphasis text */
  --iam-text-muted:  #6B7280;  /* secondary text */
  --iam-text-faint:  #9CA3AF;  /* tertiary / placeholder */
  --iam-border:      #E5E7EB;  /* hairlines, field borders */
  --iam-border-lt:   #F3F4F6;  /* faint dividers */

  /* Semantic status */
  --iam-success:     #2F8A3F;  /* active filter chip */
  --iam-success-dk:  #256F32;
  --iam-danger:      #DC2626;

  /* On-blue (text/borders over the navy hero) */
  --iam-on-blue:            rgba(255,255,255,0.92);
  --iam-on-blue-muted:      rgba(255,255,255,0.70);
  --iam-on-blue-faint:      rgba(255,255,255,0.45);
  --iam-on-blue-border:     rgba(255,255,255,0.16);
  --iam-on-blue-surface:    rgba(255,255,255,0.08);

  /* ---- Semantic aliases ----------------------------------------- */
  --color-brand:            var(--iam-blue);
  --color-brand-hover:      var(--iam-blue-dk);
  --color-cta:              var(--iam-orange);
  --color-cta-hover:        var(--iam-orange-dk);

  --surface-page:           var(--iam-bg);
  --surface-card:           var(--iam-white);
  --surface-cream:          var(--iam-cream);
  --surface-tint:           var(--iam-blue-tint);

  --text-heading:           var(--iam-text);
  --text-body:              var(--iam-text);
  --text-muted:             var(--iam-text-muted);
  --text-placeholder:       var(--iam-text-faint);
  --text-on-brand:          var(--iam-white);

  --border-default:         var(--iam-border);
  --border-subtle:          var(--iam-border-lt);
  --border-focus:           var(--iam-blue);

  /* Hero / association gradients (exact from portal CSS) */
  --gradient-hero:          radial-gradient(ellipse 70% 90% at 50% 0%, #3A7FC1 0%, #2B5F9A 45%, #1A3F6F 100%); /* @kind color */
  --gradient-band:          linear-gradient(135deg, var(--iam-blue-dk) 0%, var(--iam-blue) 100%);
  --gradient-association:   linear-gradient(135deg, var(--iam-blue-dk) 0%, var(--iam-blue) 100%);
  --gradient-cream:         linear-gradient(180deg, #FFFFFF 0%, var(--iam-cream) 100%);
  --gradient-highlight:     linear-gradient(0deg, #7DD4FC 0%, #BAE8FF 100%); /* @kind color */
}

/* IAM Design System — Typography tokens
   Headings: Metropolis (geometric, tight, weighted 600–800 in use)
   Body:     Roboto (400/500/700)
   Base font-size scales up on large displays (see handoff): 16 → 17px
   @1920 → 19px @2560. All sizes are rem so the scale cascades. */

:root {
  --font-heading: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Weights */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale (rem, on a 16px root) */
  --text-xs:    0.75rem;   /* 12px — kickers, tag labels, meta */
  --text-sm:    0.875rem;  /* 14px — small body, chips, form labels */
  --text-base:  1rem;      /* 16px — body */
  --text-md:    1.125rem;  /* 18px — lead paragraph */
  --text-lg:    1.375rem;  /* 22px — card titles */
  --text-xl:    1.75rem;   /* 28px — section subheads */
  --text-2xl:   2.25rem;   /* 36px — section titles */
  --text-3xl:   3rem;      /* 48px — hero headline */
  --text-stat:  2.75rem;   /* 44px — stat numbers */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-heading: 1.2;
  --leading-snug:    1.4;
  --leading-body:    1.65;

  /* Letter spacing */
  --tracking-kicker:  0.14em;   /* uppercase eyebrow labels */
  --tracking-heading: -0.01em;  /* Metropolis headings pull in slightly */
  --tracking-normal:  0;

  /* Semantic roles */
  --type-kicker: var(--fw-bold) var(--text-xs)/1.2 var(--font-heading);
  --type-h1:     var(--fw-extrabold) var(--text-3xl)/var(--leading-heading) var(--font-heading);
  --type-h2:     var(--fw-bold) var(--text-2xl)/var(--leading-heading) var(--font-heading);
  --type-h3:     var(--fw-semibold) var(--text-lg)/var(--leading-snug) var(--font-heading);
  --type-body:   var(--fw-regular) var(--text-base)/var(--leading-body) var(--font-body);
  --type-small:  var(--fw-regular) var(--text-sm)/var(--leading-snug) var(--font-body);
}

@media (min-width: 1920px) { :root { font-size: 17px; } }

@media (min-width: 2560px) { :root { font-size: 19px; } }

/* IAM Design System — Spacing & layout tokens
   4px base rhythm. Content containers cap at 1280px (handoff). */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Section rhythm */
  --section-y:      80px;   /* vertical padding on major page bands */
  --gutter:         24px;   /* grid gutter */
  --container-max:  1280px; /* content container cap */
  --container-pad:  24px;   /* container side padding */
}

/* IAM Design System — Effects: radii, borders, shadows, motion
   Button radius is 5px throughout (handoff, explicit). Cards use a
   slightly larger radius. Shadows are soft, cool-grey, never heavy. */

:root {
  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   5px;   /* buttons, inputs, tags — the house radius */
  --radius-md:   8px;   /* small cards, chips */
  --radius-lg:   12px;  /* cards, panels, search widget */
  --radius-xl:   16px;  /* large feature panels */
  --radius-pill: 999px; /* filter chips, badges */

  /* Border widths */
  --border-hair: 1px;
  --border-thick: 2px;

  /* Shadows — soft, cool, layered */
  --shadow-xs:   0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm:   0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:   0 4px 12px rgba(17, 24, 39, 0.07), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg:   0 12px 28px rgba(17, 24, 39, 0.10), 0 4px 10px rgba(17, 24, 39, 0.05);
  --shadow-xl:   0 24px 60px rgba(13, 58, 99, 0.18);
  --shadow-focus: 0 0 0 3px rgba(27, 117, 188, 0.12);      /* focus ring */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      200ms; /* @kind other */
  --dur-slow:      320ms; /* @kind other */
  --reveal-dur:    600ms; /* @kind other */
}

/* IAM Design System — base reset & element defaults.
   Light-touch: normalizes box model, sets body type, sane defaults for
   headings, links, and form controls so specimens/components inherit
   the brand without per-file boilerplate. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--iam-blue);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}

a:not(.btn):hover { color: var(--iam-blue-dk); }

img, svg { display: block; max-width: 100%; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* The [hidden] attribute must win over component display rules (e.g. the
   verified-result uses display:flex, which would otherwise override it). */

[hidden] { display: none !important; }

/* The verify-bar input sits seamlessly inside the pill; the field's blue
   focus tint is the affordance, so the input itself needs no focus ring. */

.verify-bar__input:focus-visible { box-shadow: none; }

/* Reveal-on-scroll utility (IntersectionObserver adds .visible) */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
}

.reveal.visible { opacity: 1; transform: none; }

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

/* ============================================================================
   Shared components — used across every page.
   Class values mirror the approved design-system components 1:1.
   ============================================================================ */

/* ---- Layout container ---------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---- 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); }

/* ---- Navbar -------------------------------------------------------------- */

.site-nav {
  background: #fff;
  border-bottom: 1px solid var(--iam-border);
  height: 64px;
  position: -webkit-sticky;
  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); }

/* ---- Feature card (trust pillars, etc.) --------------------------------- */

.feature-card { display: flex; gap: 14px; align-items: flex-start; }

.feature-card__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--iam-blue-tint);
  color: var(--iam-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-card__title {
  font: 700 var(--text-base)/1.3 var(--font-heading);
  color: var(--iam-text);
  margin-bottom: 4px;
}

.feature-card__body { font-size: var(--text-sm); color: var(--iam-text-muted); line-height: 1.55; }

/* ---- 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; }

/* ---- Verify bar + verified result --------------------------------------- */

.verify-bar__form {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  border: none;
}

.verify-bar__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  border-radius: var(--radius-pill);
  padding: 0 20px;
  background: transparent;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background 0.15s ease;
}

/* Focus tint — field fills subtle blue on click, icon turns blue (was --blue-lt) */

.verify-bar__field:focus-within { background: var(--iam-blue-tint); }

.verify-bar__field:focus-within .verify-bar__icon { color: var(--iam-blue); }

.verify-bar__icon { flex-shrink: 0; color: var(--iam-text-faint); transition: color 0.15s ease; }

.verify-bar__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-md);
  color: var(--iam-text);
  min-width: 0;
}

.verify-bar__clear {
  border: none;
  background: transparent;
  color: var(--iam-text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  line-height: 1;
}

.verify-bar__submit {
  height: 58px;
  border-radius: var(--radius-pill);
  padding: 0 32px;
  margin: -5px -5px -5px 0;
}

.verify-bar__helper {
  margin-top: 12px;
  font-size: var(--text-sm);
  color: var(--iam-on-blue-muted);
  text-align: center;
}

.verified-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--iam-border);
  box-shadow: var(--shadow-md);
}

.verified-result__left { display: flex; align-items: center; gap: 12px; }

.verified-result__check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--iam-success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.verified-result__text { font-size: var(--text-sm); color: var(--iam-text); text-align: left; }

.verified-result__text strong { font-family: var(--font-heading); }

/* ---- 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; }

/* ============================================================================
   RESPONSIVE — shared nav + footer.
   Page sections carry their own breakpoints in home.css / search.css.
   Breakpoints: XL 1600 · L 992 · M 768 · S 480 · XS 375.
   ============================================================================ */

/* 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: 992px) {
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; row-gap: 32px; }
}

@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); }

  .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: 480px) {
  /* Verify bar — shared by the homepage hero and the search-page header band.
     At full width it is a pill: field + a ~128px submit sitting beside it.
     Below this width the pair no longer fits. Left horizontal, it pushed the
     search pages ~104px past the viewport, and on the homepage the button was
     silently clipped by .hero's overflow:hidden rather than fitting. Stack it. */
  .verify-bar__form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-lg);
  }
  .verify-bar__field { width: 100%; height: 46px; padding: 0 14px; }
  .verify-bar__submit { width: 100%; height: 50px; margin: 0; padding: 0 20px; }
  .verify-bar__helper { margin-top: 10px; }

  /* Result strip: name and CTA stop fitting side by side. */
  .verified-result { flex-direction: column; align-items: stretch; gap: 12px; }
  .verified-result .btn { width: 100%; justify-content: center; }
}

@media (max-width: 375px) {
  :root { --container-pad: 16px; }
  .verify-bar__input { font-size: var(--text-base); }
  .site-footer__legallinks { gap: 10px 14px; }
}

/* ============================================================================
   search.css — search results page (single verified profile + Contact modal).
   Depends on global.css (tokens, reset, nav, footer, buttons, verify bar).
   Desktop layout; five-breakpoint responsive pass is a separate session.

   Note: .verified-pill / .cred-row / .check-badge also appear on the homepage
   (home.css). They're defined here too so the search page is self-contained;
   a later pass could promote these shared atoms into global.css.
   ============================================================================ */

body { background: var(--iam-bg); }

/* ---- IAMTrusted trust banner (cream) ------------------------------------ */

.trust-banner { background: var(--iam-cream); }

.trust-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 26px var(--container-pad);
  display: flex;
  gap: 26px;
  align-items: center;
}

.trust-banner__badge { height: 104px; width: auto; flex-shrink: 0; }

.trust-banner__title {
  font: 700 var(--text-lg)/1.15 var(--font-heading);
  color: var(--iam-blue-dk);
  margin-bottom: 6px;
}

.trust-banner__text {
  color: var(--iam-text-muted);
  font-size: var(--text-sm);
  max-width: 620px;
  margin-bottom: 8px;
}

.trust-banner__link { font-size: var(--text-sm); font-weight: 500; color: var(--iam-blue); }

/* ---- Main content wrapper ----------------------------------------------- */

.main-content { background: var(--iam-bg); min-height: 400px; }

/* ---- Company-search band (reuses .verify-bar from global.css) ------------ */

.search-band { background: var(--gradient-band); }

.search-band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 26px var(--container-pad);
}

.search-band__field { max-width: 620px; margin: 0 auto; }

/* ---- Verified company profile ------------------------------------------- */

/* ---- Layout & Content ---------------------------------------------------- */

.main-content {
  background: var(--surface-page);
  min-height: calc(100vh - 64px - 400px); /* rough nav + footer space */
}

.results { max-width: var(--container-max); margin: 0 auto; padding: 30px var(--container-pad) 64px; }

.profile {
  background: var(--iam-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

.profile__header { padding: 28px 32px 22px; border-bottom: 1px solid var(--iam-border); background: var(--iam-white); }

.profile__titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

.profile__name { font: 800 var(--text-2xl)/1.1 var(--font-heading); color: var(--iam-text); }

.profile__meta {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: var(--text-sm); color: var(--iam-text-muted);
}

.profile__meta-item { display: inline-flex; align-items: center; gap: 6px; }

.profile__meta-item strong { color: var(--iam-text); font-weight: 700; }

/* Trade & related names — company-level. Many movers hold a legal name plus
   trade names they market under; on a verification page the consumer may only
   know the trade name, so all of them are shown and the line wraps freely.
   Used by both the single-company header and the multi-branch company header. */

.profile__trade {
  font-size: var(--text-sm);
  color: var(--iam-text-muted);
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 10px;
}

.profile__trade-label { font-weight: 700; color: var(--iam-text-mid); }

.profile__body { display: grid; grid-template-columns: 1fr 300px; }

.profile__content { padding: 26px 32px; background: var(--iam-white); }

.profile__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.profile__desc {
  font-size: var(--text-base); color: var(--iam-text-mid);
  line-height: 1.7; margin-bottom: 26px; max-width: 640px;
}

.profile__actions { display: flex; gap: 12px; margin-top: 26px; }

.profile__sidebar {
  border-left: 1px solid var(--iam-border);
  padding: 26px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--iam-white);
}

.profile__logo { min-height: 40px; display: flex; align-items: center; }

.profile__logo strong { font-size: 26px; letter-spacing: -0.02em; color: #111; }

.profile__address { font-size: var(--text-sm); color: var(--iam-text-muted); line-height: 1.6; }

.profile__website {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: 500; color: var(--iam-blue);
}

.profile__note {
  width: 100%; border-top: 1px solid var(--iam-border); padding-top: 14px;
  font-size: 12px; color: var(--iam-text-faint);
}

.results__footnote { text-align: center; margin-top: 22px; font-size: var(--text-sm); color: var(--iam-text-muted); }

.results__footnote a { color: var(--iam-blue); font-weight: 500; }

/* ---- Service tags -------------------------------------------------------- */

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1;
  padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap;
}

.tag--neutral { background: #fff; color: var(--iam-text-muted); border-color: var(--iam-border); }

.tag--accent  { background: var(--iam-orange-tint); color: var(--iam-orange-dk); }

.tag--brand   { background: var(--iam-blue-tint); color: var(--iam-blue-dk); }

/* ---- "What the IAM verified" credential block --------------------------- */

.verified-panel { background: var(--iam-border-lt); border-radius: var(--radius-lg); padding: 20px 22px; max-width: 640px; }

.verified-panel__label {
  font: 700 var(--text-xs)/1 var(--font-heading);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--iam-text-muted); margin-bottom: 14px;
}

.verified-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cred-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--iam-text); }

.check-badge {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--iam-success); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Recovery fields ----------------------------------------------------- */

.field__icon { color: var(--iam-text-faint); display: inline-flex; flex-shrink: 0; }

/* ---- Verified pill (green) ---------------------------------------------- */

.verified-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--radius-pill);
  background: rgba(47,138,63,.10); color: var(--iam-success-dk);
  font: 700 var(--text-xs)/1 var(--font-heading); letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---- Contact Me modal ---------------------------------------------------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 58, 99, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}

.modal-overlay.open { display: flex; }

.modal-dialog {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-xl);
}

.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px 0; }

.modal-title { font: 700 var(--text-xl)/1.2 var(--font-heading); color: var(--iam-text); }

.modal-subtitle { margin-top: 6px; font-size: var(--text-sm); color: var(--iam-text-muted); }

.modal-close {
  border: none; background: var(--iam-bg); color: var(--iam-text-muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; flex-shrink: 0;
}

.modal-body { padding: 20px 26px; }

.modal-footer { padding: 0 26px 24px; display: flex; gap: 12px; justify-content: flex-end; }

.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.modal-row + .modal-row { margin-top: 14px; }

.modal-group { margin-top: 16px; }

/* A row can also follow a group (the contact fields sit under the preferred-
   contact pills). Without this it inherits no top margin and sits flush. */

.modal-group + .modal-row { margin-top: 16px; }

.modal-grouplabel {
  font: 700 var(--text-xs)/1 var(--font-heading);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--iam-text-muted); margin-bottom: 8px;
}

/* form field (matches the design-system Field) */

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font: 700 var(--text-xs)/1 var(--font-heading);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--iam-text-muted);
}

.field__label .req { color: var(--iam-orange); }

.field__control {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--iam-border); border-radius: var(--radius-md);
  padding: 0 12px; height: 46px;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.field__control:focus-within { border-color: var(--iam-blue); box-shadow: var(--shadow-focus); }

.field__control input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: var(--text-base); color: var(--iam-text); min-width: 0;
}

.field__control input:focus-visible { box-shadow: none; }

.modal-textarea {
  width: 100%; border: 1px solid var(--iam-border); border-radius: var(--radius-md);
  padding: 10px 12px; resize: vertical; outline: none; font-family: var(--font-body); font-size: var(--text-base);
}

.modal-textarea:focus-visible { border-color: var(--iam-blue); box-shadow: var(--shadow-focus); }

/* preferred-contact pills */

.contact-pills { display: flex; gap: 8px; }

.contact-pill {
  padding: 9px 20px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--iam-border); background: #fff; color: var(--iam-text);
  font-size: var(--text-sm); font-weight: 500;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}

.contact-pill.is-active { background: var(--iam-blue); color: #fff; border-color: var(--iam-blue); }

/* Preferred-contact emphasis (Spec 1). Both the phone and email fields are
   always present; the pill selection moves the required marker and the field
   highlight between them. Nothing is ever hidden — the modal keeps a constant
   height and the consumer can still supply both if they want to. */

.contact-field:not(.is-required) .req { display: none; }

.contact-field.is-required .opt { display: none; }

.contact-field.is-required .field__control { border-color: var(--iam-blue); }

/* ---- No-results empty state --------------------------------------------- */

.noresults { padding-top: 76px; padding-bottom: 60px; }

.noresults__inner { max-width: 680px; margin: 0 auto; text-align: center; }

.noresults__icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--iam-blue-tint); color: var(--iam-blue);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}

.noresults__title { font: 700 var(--text-2xl)/1.2 var(--font-heading); margin: 0 auto 14px; max-width: 560px; }

.noresults__text { color: var(--iam-text-muted); line-height: 1.65; margin: 0 auto 28px; max-width: 560px; }

.noresults__recovery {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: #fff; border: 1px solid var(--iam-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px;
}

.noresults__field { flex: 1; min-width: 0; }

.field__icon { color: var(--iam-text-faint); display: inline-flex; flex-shrink: 0; }

.noresults__btn { height: 46px; white-space: nowrap; box-shadow: none; }

.noresults__note { margin-top: 14px; font-size: 12px; color: var(--iam-text-faint); }

/* ============================================================================
   RESPONSIVE — search, multi-branch, no-results, modal.
   Shared nav/footer live in global.css. Breakpoints: 768 · 560 · 480 · 375.
   ============================================================================ */

@media (max-width: 768px) {
  .profile__body { grid-template-columns: 1fr; }
  .profile__sidebar {
    border-left: none; border-top: 1px solid var(--iam-border);
    text-align: left; align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .modal-overlay { padding: 16px; }
  .modal-row { grid-template-columns: 1fr; }

  .trust-banner__inner { flex-direction: column; text-align: center; gap: 16px; }
  .trust-banner__badge { height: 84px; }
  .trust-banner__text { margin-left: auto; margin-right: auto; }

  .profile__header, .profile__content, .profile__sidebar { padding-left: 20px; padding-right: 20px; }
  .profile__actions { flex-direction: column; align-items: stretch; }

  .noresults__recovery { flex-direction: column; align-items: stretch; }
  .noresults__btn { width: 100%; }
}

@media (max-width: 480px) {
  /* The verify/company-search bar stacks at this width (global.css). Give the
     header band room for the taller bar and pull the dense blocks in. */
  .search-band__inner { padding-top: 22px; padding-bottom: 22px; }

  .profile__header, .profile__content, .profile__sidebar { padding-left: 16px; padding-right: 16px; }
  .profile__name { font-size: var(--text-xl); }
  .profile__titlerow { gap: 8px; }
  .profile__meta { gap: 10px 14px; }

  /* Trade names can run long; let them breathe rather than crowd the meta row. */
  .profile__trade { margin-bottom: 12px; }

  .verified-panel__grid { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .modal-overlay { padding: 12px; }
  .modal-body { padding: 16px 18px; }
  .modal-footer { padding-left: 18px; padding-right: 18px; }
  .modal-footer .btn { flex: 1; }

  .profile__header, .profile__content, .profile__sidebar { padding-left: 14px; padding-right: 14px; }
  .profile__name { font-size: var(--text-lg); }
  .profile__tags { gap: 6px; }

  .noresults__title { font-size: var(--text-xl); }
}


/* ============================================================================
   home.css — homepage-specific sections.
   Depends on global.css (tokens, reset, shared components).
   Desktop layout only; the five-breakpoint responsive pass is a separate
   session (see note at the foot of this file).
   ============================================================================ */

body { background: var(--iam-bg); }

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1C5C98 0%, #0F4E85 55%, #0D3A63 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: url('hero-gradient.svg') center / cover no-repeat;
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Tint uses --iam-blue-navy (#0D3A63) so the hero's dark end stays in the
     same blue family as the authority band and footer. Was rgba(11,42,74) —
     an off-family navy that pulled the hero toward indigo. */
  background: linear-gradient(180deg,
    rgba(13, 58, 99, 0.55) 0%,
    rgba(13, 58, 99, 0.30) 34%,
    rgba(13, 58, 99, 0.10) 55%,
    rgba(13, 58, 99, 0.28) 100%);
}

.hero__inner {
  position: relative;
  padding-top: 76px;
  padding-bottom: 86px;
  text-align: center;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--iam-on-blue-surface);
  border: 1px solid var(--iam-on-blue-border);
  color: var(--iam-on-blue-muted);
  font: 700 11px/1 var(--font-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero__title {
  font: 800 var(--text-3xl)/1.06 var(--font-heading);
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.hero__lead {
  color: var(--iam-on-blue-muted);
  font-size: var(--text-md);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 34px;
}

.hero__verify {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---- Trust pillars ------------------------------------------------------- */

.pillars { background: #fff; border-bottom: 1px solid var(--iam-border); }

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 34px;
  padding-bottom: 34px;
}

.pillars__cell--divided { border-left: 1px solid var(--iam-border); padding-left: 32px; }

/* ---- How It Works (two-column step interactor) -------------------------- */

.how .container { padding-top: 76px; padding-bottom: 76px; }

.how__head { text-align: center; margin-bottom: 52px; }

.how__title {
  font: 700 var(--text-2xl)/1.15 var(--font-heading);
  margin: 14px auto 0;
  max-width: 720px;
}

.how__body {
  display: grid;
  grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
  gap: 64px;
  align-items: center;
}

/* steps list + progress rail (positioned by home.js) */

.steps { list-style: none; margin: 0; padding: 0; position: relative; }

.steps-track,
.steps-indicator { position: absolute; left: 16px; width: 2px; border-radius: 2px; z-index: 0; }

.steps-track { background: var(--iam-border); }

.steps-indicator { background: var(--iam-blue); top: 0; height: 0; }

.step {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  padding-bottom: 30px; cursor: pointer; position: relative;
}

.step:last-child { padding-bottom: 0; }

.step-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-white); color: var(--iam-text-faint);
  border: 2px solid var(--iam-border);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

@-webkit-keyframes stepPulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 117, 188, 0.45); }
  70%  { box-shadow: 0 0 0 11px rgba(27, 117, 188, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 117, 188, 0); }
}

@keyframes stepPulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 117, 188, 0.45); }
  70%  { box-shadow: 0 0 0 11px rgba(27, 117, 188, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 117, 188, 0); }
}

.step.is-active .step-num {
  background: var(--iam-blue); color: #fff; border-color: var(--iam-blue);
  -webkit-animation: stepPulse 2s ease-out infinite;
          animation: stepPulse 2s ease-out infinite;
}

.step-body { padding-top: 3px; opacity: 0.5; transition: opacity 6000ms linear; }

/* text dims with the cycle; the number circle stays solid */

.step.is-active .step-body { opacity: 1; transition: opacity 200ms ease; }

.step-title {
  font: 700 var(--text-md)/1.3 var(--font-heading); color: var(--iam-text);
  margin-bottom: 5px; transition: color 200ms ease;
}

.step.is-active .step-title { color: var(--iam-blue); }

.step-desc { font-size: var(--text-sm); color: var(--iam-text-muted); line-height: 1.6; }

/* visual panels (right) — slide in horizontally from the right */

/* visual panels (right) — glide in horizontally from the right.
   overflow:hidden clips the longer slide so it can't push a page scrollbar;
   the padding keeps the resting card's shadow from being cut at the edge. */

.steps-visual { position: relative; min-height: 360px; overflow: hidden; padding: 16px; }

.panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateX(72px);
  transition: opacity 760ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 760ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

.mock {
  background: var(--iam-white); border: 1px solid var(--iam-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px 28px;
}

/* Panel 1 — verify bar */

.mock-verify__bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--iam-white); border: 1px solid var(--iam-border);
  border-radius: var(--radius-pill); padding: 8px 8px 8px 18px; box-shadow: var(--shadow-sm);
}

.mock-verify__bar svg { flex-shrink: 0; color: var(--iam-text-faint); }

.mock-verify__typed { flex: 1; font-size: var(--text-base); color: var(--iam-text); }

.mock-verify__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--iam-orange); color: #fff; border: none;
  font: 700 var(--text-sm)/1 var(--font-heading); padding: 12px 20px; border-radius: var(--radius-pill);
}

.mock-verify__result {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 14px 16px; background: var(--iam-white);
  border: 1px solid var(--iam-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}

.mock-verify__result span { font-size: var(--text-sm); color: var(--iam-text); }

.mock-verify__result strong { font-family: var(--font-heading); }

.check-badge {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--iam-success); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Panel 2 — credential card */

.mock-cred__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

.mock-cred__name { font: 800 var(--text-lg)/1.1 var(--font-heading); color: var(--iam-text); }

.verified-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(47,138,63,.10); color: var(--iam-success-dk);
  font: 700 var(--text-xs)/1 var(--font-heading); letter-spacing: .04em; text-transform: uppercase;
}

.mock-cred__label {
  font: 700 var(--text-xs)/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  color: var(--iam-text-muted); margin-bottom: 14px;
}

.mock-cred__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cred-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--iam-text); }

.cred-row .check-badge { width: 22px; height: 22px; }

/* Panel 3 — protection state */

.mock-protect { text-align: center; padding: 34px 28px; }

.mock-protect__ring {
  width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--iam-blue-tint); color: var(--iam-blue);
  display: inline-flex; align-items: center; justify-content: center;
}

.mock-protect__title { font: 700 var(--text-lg)/1.2 var(--font-heading); color: var(--iam-text); margin-bottom: 8px; }

.mock-protect__text { font-size: var(--text-sm); color: var(--iam-text-muted); line-height: 1.6; max-width: 340px; margin: 0 auto; }

.mock-protect__tag {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: rgba(47,138,63,.10); color: var(--iam-success-dk);
  font: 700 var(--text-sm)/1 var(--font-heading);
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--iam-success); }

/* Interactor is desktop-only (matches the original spec). At <=992px the
   visual panel drops and steps become a static list; at <=768px the rail
   and animation are removed and all steps sit at full opacity. Full behaviour
   is confirmed in the dedicated responsive pass. */

@media (max-width: 992px) {
  .how__body { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
  .steps-visual { display: none; }
}

@media (max-width: 768px) {
  .steps-track, .steps-indicator { display: none; }
  .step-body { opacity: 1 !important; }
  .step .step-num { background: var(--iam-blue); color: #fff; border-color: var(--iam-blue); -webkit-animation: none; animation: none; }
  .step .step-title { color: var(--iam-blue); }
}

/* ---- Badge studio -------------------------------------------------------- */

.badge-studio {
  position: relative;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, #FFFFFF 0%, #FBFCFD 55%, #F4F6F9 100%);
}

.badge-studio__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
  padding-top: 68px;
  padding-bottom: 44px;
}

.badge-studio__art { text-align: center; position: relative; }

.badge-studio__img {
  height: 275px;
  width: auto;
  display: inline-block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 22px 30px rgba(13, 58, 99, 0.14));
}

.badge-studio__shadow {
  position: absolute;
  left: 50%;
  bottom: -64px;
  transform: translateX(-50%);
  width: 250px;
  height: 50px;
  background: radial-gradient(ellipse at center, rgba(13,58,99,0.20) 0%, rgba(13,58,99,0.09) 42%, transparent 72%);
  filter: blur(7px);
  z-index: 0;
  pointer-events: none;
}

.badge-studio__title { font: 700 var(--text-2xl)/1.15 var(--font-heading); margin: 14px 0; }

.badge-studio__text {
  color: var(--iam-text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 460px;
}

.badge-studio__checks { display: flex; flex-direction: column; gap: 12px; }

.check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--iam-text);
}

.check-item__mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--iam-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-studio__link {
  display: inline-block;
  margin-top: 22px;
  font: 700 var(--text-sm)/1 var(--font-heading);
  color: var(--iam-blue);
}

/* ---- Dispute-resolution card (shares the studio surface) ----------------- */

.badge-studio__dispute { padding-bottom: 72px; }

.dispute-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 22px;
  align-items: start;
  background: #FBF1DE;
  border-top: 2px solid transparent;
  -o-border-image: linear-gradient(90deg, transparent 0%, #E3D0A4 50%, transparent 100%) 1;
     border-image: linear-gradient(90deg, transparent 0%, #E3D0A4 50%, transparent 100%) 1;
  border-radius: var(--radius-xl);
  padding: 30px 36px;
  box-shadow: rgba(0, 0, 0, 0.315) 0px 25px 20px -20px;
}

.dispute-card__icon {
  width: 48px;
  height: 48px;
  margin-top: 8px;
  border-radius: 50%;
  background: #A67C1E;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dispute-card__title { font: 700 var(--text-xl)/1.2 var(--font-heading); margin-bottom: 6px; }

.dispute-card__text {
  color: var(--iam-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 620px;
}

.dispute-card__cta { align-self: center; }

/* ---- IAM authority ------------------------------------------------------- */

.authority {
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    var(--gradient-association);
  background-size: 44px 44px, 44px 44px, auto;
}

.authority__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 76px;
}

.authority__title {
  font: 700 var(--text-2xl)/1.15 var(--font-heading);
  color: #fff;
  margin: 14px 0 16px;
}

.quote { border-left: 3px solid var(--iam-orange); padding: 4px 0 4px 18px; margin: 0; }

.quote__text {
  color: var(--iam-on-blue);
  font-style: italic;
  line-height: 1.65;
  max-width: 460px;
}

.quote__attr { margin-top: 12px; font-size: 0.975rem; color: var(--iam-on-blue-faint); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.stat {
  background: var(--iam-on-blue-surface);
  border: 1px solid var(--iam-on-blue-border);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  text-align: center;
}

.stat__num {
  font: 800 var(--text-2xl)/1 var(--font-heading);
  color: #fff;
  letter-spacing: -0.02em;
}

.stat__suffix { color: var(--iam-orange); }

.stat__label { margin-top: 6px; font-size: 12px; color: var(--iam-on-blue-muted); }

/* ---- Closing ------------------------------------------------------------- */

.closing { background: var(--iam-bg); }

.closing__inner { padding-top: 64px; padding-bottom: 64px; text-align: center; }

.closing__title { font: 700 var(--text-2xl)/1.1 var(--font-heading); margin-bottom: 10px; }

.closing__text { color: var(--iam-text-muted); margin-bottom: 26px; }

/* ============================================================================
   RESPONSIVE — homepage sections. Shared nav/footer live in global.css.
   (How It Works already carries its own 992/768 rules above.)
   ============================================================================ */

@media (max-width: 992px) {
  .authority__grid { gap: 40px; }
}

@media (max-width: 768px) {
  .hero__inner { padding-top: 56px; padding-bottom: 62px; }
  .hero__title { font-size: var(--text-2xl); }

  .pillars__grid { grid-template-columns: 1fr; gap: 24px; }
  .pillars__cell--divided { border-left: none; padding-left: 0; }

  .how .container { padding-top: 56px; padding-bottom: 56px; }

  .badge-studio__grid { grid-template-columns: 1fr; gap: 32px; text-align: center; padding-top: 52px; }
  .badge-studio__text { text-align: left; margin-left: auto; margin-right: auto; }
  .badge-studio__checks { text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; }
  .badge-studio__shadow { display: none; }

  .dispute-card { grid-template-columns: 1fr; gap: 16px; }
  .dispute-card__cta { align-self: start; justify-self: start; }

  .authority__grid { grid-template-columns: 1fr; gap: 36px; }
  .authority .container { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 480px) {
  .hero__title { font-size: var(--text-xl); }
  .stats { grid-template-columns: 1fr; }
  .badge-studio__img { height: 220px; }
  .dispute-card__cta { width: 100%; justify-content: center; }
}

@media (max-width: 375px) {
  .hero__title { font-size: var(--text-lg); }
  .hero__inner { padding-top: 44px; padding-bottom: 50px; }
  .hero__pill { font-size: 0.68rem; }
  .stat__num { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .step.is-active .step-num { -webkit-animation: none; animation: none; }
  .step-body { transition: opacity 200ms ease; }
}


/*# sourceMappingURL=styles.css.map*/