/* ==========================================================================
   THUMB360 WEB EXPERIENCE KIT — v1.0
   Header · Mega menu · Mobile drawer · Hero slider · Scroll rail ·
   Marquee · Footer · Buttons · Reveal

   Dependency-free. Every class is namespaced `t3-`.

   HOW TO USE
   1. Copy this file into the client build.
   2. Re-theme SECTION 1 (tokens) only — hue ramp, neutrals, fonts, radius,
      spacing rhythm, motion timing. That is where the client's identity lives.
   3. Leave SECTIONS 2+ structurally alone. Override in a separate client
      stylesheet loaded after this one, so kit upgrades stay mergeable.
   4. Never ship demo.html.

   TOKEN DISCIPLINE
   No raw hex, no raw duration and no raw easing below SECTION 1. If a
   component needs a value that does not exist, add a token — do not inline it.
   Colour method: _skills/05_creative_director/references/colour-system-method.md
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — TOKENS   (the only section you re-theme per client)
   ========================================================================== */

:root {
  /* --- Brand ramp: one hue, nine steps. Replace with the client's hue. ---
     Build the ramp by holding hue roughly constant and stepping lightness,
     easing chroma down at both ends so the light tints do not go chalky and
     the dark shades do not go muddy. See colour-system-method.md §3. */
  --brand-950: #0B1F3A;
  --brand-900: #12315C;
  --brand-800: #1B4585;
  --brand-700: #2359A8;
  --brand-600: #2E6FC9;
  --brand-500: #4A8BE0;   /* brightest permitted accent */
  --brand-300: #9CC2F0;
  --brand-200: #C8DCF7;
  --brand-100: #E4EEFB;
  --brand-050: #F3F8FE;

  /* --- Signal hue: ONE second hue maximum, used scarcely (< 5% of pixels) --- */
  --signal-600: #C2410C;
  --signal-500: #EA580C;
  --signal-100: #FFEDD5;

  /* --- Neutrals: tinted with the brand hue, never pure grey, never #000/#FFF --- */
  --ink-strong: #0D1420;
  --ink:        #2A3444;
  --ink-mute:   #66707F;
  --ink-faint:  #98A0AC;
  --line:       #E2E7EE;
  --line-soft:  #F0F3F7;
  --surface-0:  #FFFFFF;
  --surface-1:  #F8FAFC;
  --surface-2:  #EEF2F7;
  --surface-inverse: #0B1220;

  /* --- Semantic roles: components reference THESE, not the ramp above --- */
  --c-text:        var(--ink);
  --c-heading:     var(--ink-strong);
  --c-muted:       var(--ink-mute);
  --c-action:      var(--brand-700);
  --c-action-hover:var(--brand-800);
  --c-accent:      var(--signal-500);
  --c-focus:       var(--brand-600);
  --c-border:      var(--line);
  --c-bg:          var(--surface-0);
  --c-bg-alt:      var(--surface-1);
  --c-bg-inverse:  var(--surface-inverse);

  /* --- Type --- */
  --font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  --fs-micro: 0.72rem;
  --fs-small: 0.83rem;
  --fs-body:  1rem;
  --fs-lead:  1.12rem;
  --fs-h3:    1.22rem;
  --fs-h2:    clamp(1.6rem, 3vw, 2.35rem);
  --fs-h1:    clamp(2.1rem, 4.8vw, 3.6rem);

  /* --- Space: a 4px rhythm --- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  /* --- Shape --- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --maxw:      1200px;
  --gutter:    clamp(20px, 4vw, 40px);

  /* --- Elevation: shadows tinted with the brand hue, never neutral black --- */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow-md: 0 6px 20px rgba(11, 31, 58, 0.09);
  --shadow-lg: 0 20px 48px rgba(11, 31, 58, 0.14);

  /* --- Motion: see references/motion-and-interaction.md --- */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    380ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Layout constants used by JS --- */
  --header-h: 84px;
  --header-h-scrolled: 64px;
  --z-header: 100;
  --z-panel:  110;
  --z-scrim:  120;
  --z-drawer: 130;
}

/* ==========================================================================
   SECTION 2 — BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Anchor links must clear the sticky header. Most-missed line in the kit. */
  scroll-padding-top: calc(var(--header-h-scrolled) + var(--sp-4));
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

body.t3-noscroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--c-heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--sp-4); }

a { color: var(--c-action); text-decoration: none; }
a:hover { color: var(--c-action-hover); }

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

.t3-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Focus: one ring, everywhere, visible on light AND dark surfaces. */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.t3-on-dark :focus-visible { outline-color: var(--brand-300); }

.t3-skip {
  position: absolute; left: var(--sp-4); top: -100px;
  background: var(--c-bg); color: var(--c-action);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  z-index: 999; transition: top var(--dur-fast) var(--ease-out);
}
.t3-skip:focus { top: var(--sp-4); }

.t3-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SECTION 3 — BUTTONS   (all four states, always)
   ========================================================================== */

.t3-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                      /* WCAG 2.2 target size */
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-head);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.t3-btn:active { transform: translateY(1px); }        /* physical feedback */
.t3-btn[disabled], .t3-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}

.t3-btn-primary { background: var(--c-action); color: #fff; }
.t3-btn-primary:hover { background: var(--c-action-hover); color: #fff; box-shadow: var(--shadow-md); }

.t3-btn-secondary { background: transparent; color: var(--c-action); border-color: var(--c-border); }
.t3-btn-secondary:hover { border-color: var(--c-action); background: var(--brand-050); }

.t3-btn-ghost { background: transparent; color: var(--c-heading); padding-inline: var(--sp-3); }
.t3-btn-ghost:hover { color: var(--c-action); }

/* Loading state — prevents the double-submit that creates duplicate CRM records */
.t3-btn[data-loading="true"] { pointer-events: none; opacity: 0.7; }
.t3-btn[data-loading="true"]::after {
  content: ""; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: t3-spin 700ms linear infinite;
}
@keyframes t3-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   SECTION 4 — HEADER
   ========================================================================== */

.t3-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-bg);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.t3-header[data-scrolled="true"] {
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}

/* Transparent-over-hero variant. Add data-transparent="true" to .t3-header.
   The JS flips data-scrolled using an IntersectionObserver sentinel — never a
   hard-coded scroll position, because hero heights change per breakpoint. */
.t3-header[data-transparent="true"]:not([data-scrolled="true"]) {
  background: transparent; box-shadow: none; border-bottom-color: transparent;
}
.t3-header[data-transparent="true"]:not([data-scrolled="true"]) .t3-nav-link,
.t3-header[data-transparent="true"]:not([data-scrolled="true"]) .t3-logo-text { color: #fff; }

.t3-header-inner {
  display: flex; align-items: center; gap: var(--sp-5);
  height: var(--header-h);
  transition: height var(--dur-base) var(--ease-out);
}
.t3-header[data-scrolled="true"] .t3-header-inner { height: var(--header-h-scrolled); }

.t3-logo { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.t3-logo img { height: 34px; width: auto; }
.t3-logo-text {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.05rem; color: var(--c-heading); letter-spacing: -0.02em;
}
/* Descriptor: for company names that do not explain themselves */
.t3-logo-desc {
  font-size: var(--fs-micro); color: var(--c-muted);
  letter-spacing: 0.06em; text-transform: uppercase; display: block;
}

.t3-nav { margin-left: auto; }
.t3-nav-list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.t3-nav-item { position: relative; }

.t3-nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-head); font-size: var(--fs-small); font-weight: 500;
  color: var(--c-heading); background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.t3-nav-link:hover { color: var(--c-action); background: var(--brand-050); }
.t3-nav-link[aria-current="page"] { color: var(--c-action); }
.t3-nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 6px;
  height: 2px; background: var(--c-action); border-radius: 2px;
}

.t3-nav-chev {
  width: 10px; height: 10px; flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.t3-nav-link[aria-expanded="true"] .t3-nav-chev { transform: rotate(180deg); }

.t3-header-cta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* Hamburger */
.t3-burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; border-radius: var(--radius-sm);
}
.t3-burger span {
  display: block; width: 20px; height: 2px; background: var(--c-heading);
  border-radius: 2px; position: relative;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.t3-burger span::before, .t3-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--c-heading); border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}
.t3-burger span::before { top: -6px; }
.t3-burger span::after  { top: 6px; }
.t3-burger[aria-expanded="true"] span { background: transparent; }
.t3-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.t3-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   SECTION 5 — MEGA MENU
   ========================================================================== */

.t3-mega {
  position: absolute; top: 100%; left: 50%; z-index: var(--z-panel);
  width: min(var(--maxw), calc(100vw - var(--gutter) * 2));
  max-height: 70vh;                        /* a scrolling mega menu has failed */
  transform: translateX(-50%) translateY(-6px);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.t3-mega[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
  transition-delay: 0s;
}

/* Pattern B — columns + feature panel. The upgrade that makes navigation sell. */
.t3-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: var(--sp-6);
}
.t3-mega-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t3-mega-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.t3-mega-heading {
  font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-muted);
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
}
.t3-mega-list { list-style: none; margin: 0; padding: 0; }
.t3-mega-list li + li { margin-top: 2px; }

.t3-mega-link {
  display: block; padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--radius-sm); color: var(--c-heading);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.t3-mega-link:hover { background: var(--brand-050); color: var(--c-action); }
.t3-mega-link strong { display: block; font-size: var(--fs-small); font-weight: 600; line-height: 1.35; }
/* Descriptions: mandatory wherever the label is jargon the visitor may not know */
.t3-mega-link span {
  display: block; font-size: var(--fs-micro); color: var(--c-muted);
  line-height: 1.45; margin-top: 2px;
}

.t3-mega-all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3); font-size: var(--fs-micro); font-weight: 600;
  font-family: var(--font-head); color: var(--c-action);
}

/* Feature panel — merchandise one thing */
.t3-mega-feature {
  background: var(--surface-1); border-radius: var(--radius);
  padding: var(--sp-5); display: flex; flex-direction: column;
}
.t3-mega-feature .t3-kicker {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.t3-mega-feature h4 { font-family: var(--font-head); font-size: var(--fs-body); margin: 0 0 var(--sp-2); color: var(--c-heading); }
.t3-mega-feature p  { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--sp-4); }
.t3-mega-feature .t3-btn { margin-top: auto; }

/* Quiet proof strip along the bottom of the panel */
.t3-mega-proof {
  grid-column: 1 / -1;
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  font-size: var(--fs-micro); color: var(--c-muted);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}

/* ==========================================================================
   SECTION 6 — MOBILE DRAWER
   ========================================================================== */

.t3-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(11, 18, 32, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.t3-scrim[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }

.t3-drawer {
  position: fixed; top: 0; right: 0; z-index: var(--z-drawer);
  width: min(400px, 88vw);
  height: 100dvh;                          /* dvh, or iOS clips it */
  background: var(--c-bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);             /* transform only — never `right` */
  transition: transform var(--dur-slow) var(--ease-out);
}
@supports not (height: 100dvh) { .t3-drawer { height: 100vh; } }
.t3-drawer[data-open="true"] { transform: translateX(0); }

.t3-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.t3-drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); -webkit-overflow-scrolling: touch; }
.t3-drawer-foot {
  flex-shrink: 0; padding: var(--sp-5);
  border-top: 1px solid var(--c-border); background: var(--surface-1);
}
.t3-drawer-foot .t3-btn { width: 100%; }
.t3-drawer-contact {
  margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-small);
}

/* Accordion sections — one level at a time, never a 40-item flat list */
.t3-acc { border-bottom: 1px solid var(--line-soft); }
.t3-acc-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 52px; padding: var(--sp-3) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-size: var(--fs-body); font-weight: 500;
  color: var(--c-heading);
}
.t3-acc-trigger .t3-nav-chev { width: 12px; height: 12px; }
.t3-acc-panel {
  display: grid; grid-template-rows: 0fr;      /* modern height animation */
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.t3-acc-panel > div { overflow: hidden; }
.t3-acc-trigger[aria-expanded="true"] + .t3-acc-panel { grid-template-rows: 1fr; }
.t3-acc-panel a {
  display: block; padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  min-height: 44px; font-size: var(--fs-small); color: var(--c-text);
}

/* ==========================================================================
   SECTION 7 — HERO SLIDER   (manual by default; see sliders-and-carousels.md)
   ========================================================================== */

.t3-hero { position: relative; overflow: hidden; background: var(--c-bg-inverse); }
.t3-hero-track { position: relative; min-height: clamp(440px, 62vh, 620px); }

.t3-slide {
  position: absolute; inset: 0;
  display: grid; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.t3-slide[data-active="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }

.t3-slide-media { position: absolute; inset: 0; }
.t3-slide-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim, tinted with the brand hue — never neutral black.
   Check contrast against the LIGHTEST pixel the text can land on. */
.t3-slide-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,31,58,0.88) 0%, rgba(11,31,58,0.62) 48%, rgba(11,31,58,0.25) 100%);
}
.t3-slide-content { position: relative; max-width: 640px; color: #fff; padding-block: var(--sp-8); }
.t3-slide-content h1, .t3-slide-content h2 { color: #fff; }
.t3-slide-content p { color: rgba(255,255,255,0.86); font-size: var(--fs-lead); }

.t3-hero-controls {
  position: absolute; left: 0; right: 0; bottom: var(--sp-5); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-3);
}
.t3-hero-dots { display: flex; gap: var(--sp-2); }
.t3-dot {
  width: 32px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,0.35); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.t3-dot[aria-current="true"] { background: #fff; }
/* Hit area stays 44px even though the visual is 4px tall */
.t3-dot { position: relative; }
.t3-dot::before { content: ""; position: absolute; inset: -20px -4px; }

.t3-hero-count {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: rgba(255,255,255,0.75); letter-spacing: 0.1em;
}
.t3-hero-arrows { margin-left: auto; display: flex; gap: var(--sp-2); }
.t3-hero-arrows button, .t3-hero-pause {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24);
  color: #fff; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.t3-hero-arrows button:hover, .t3-hero-pause:hover { background: rgba(255,255,255,0.24); }

/* ==========================================================================
   SECTION 8 — SCROLL-SNAP RAIL   (reach for this before any carousel)
   ========================================================================== */

.t3-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.t3-rail-nav  { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.t3-rail-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--c-heading);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.t3-rail-btn:hover:not([disabled]) { border-color: var(--c-action); color: var(--c-action); }
/* Disabled, never hidden — hiding causes layout shift */
.t3-rail-btn[disabled] { opacity: 0.35; cursor: default; }

.t3-rail {
  display: flex; gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Snap flush with the page grid, not the raw viewport edge */
  scroll-padding-inline-start: var(--gutter);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}
.t3-rail > * {
  scroll-snap-align: start;
  flex: 0 0 85%;              /* the peek IS the affordance on mobile */
}
@media (min-width: 640px)  { .t3-rail > * { flex-basis: 48%; } }
@media (min-width: 1024px) { .t3-rail > * { flex-basis: 31%; } }

.t3-rail-progress { height: 3px; background: var(--line-soft); border-radius: 2px; margin-top: var(--sp-3); overflow: hidden; }
.t3-rail-progress span {
  display: block; height: 100%; background: var(--c-action); border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out); transform-origin: left;
}

.t3-card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-5);
  /* ONE hover move, not three */
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.t3-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }

/* ==========================================================================
   SECTION 9 — LOGO MARQUEE   (a static grid is usually better — see reference)
   ========================================================================== */

.t3-marquee { overflow: hidden; position: relative; padding-block: var(--sp-5); }
.t3-marquee::before, .t3-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.t3-marquee::before { left: 0;  background: linear-gradient(90deg, var(--c-bg-alt), transparent); }
.t3-marquee::after  { right: 0; background: linear-gradient(270deg, var(--c-bg-alt), transparent); }

.t3-marquee-track {
  display: flex; gap: var(--sp-8); width: max-content;
  animation: t3-marquee 38s linear infinite;   /* 25–45s; faster reads as anxious */
}
.t3-marquee:hover .t3-marquee-track,
.t3-marquee:focus-within .t3-marquee-track { animation-play-state: paused; }
@keyframes t3-marquee { to { transform: translateX(-50%); } }

.t3-marquee-item {
  display: grid; place-items: center; height: 40px; flex-shrink: 0;
  filter: grayscale(1); opacity: 0.62;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.t3-marquee:hover .t3-marquee-item { opacity: 0.85; }
.t3-marquee-item:hover { filter: grayscale(0); opacity: 1; }

/* Reduced motion: becomes a scrollable rail, never a frozen clipped loop */
@media (prefers-reduced-motion: reduce) {
  .t3-marquee-track { animation: none; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
  .t3-marquee { overflow-x: auto; }
}

/* ==========================================================================
   SECTION 10 — FOOTER
   ========================================================================== */

.t3-cta-band {
  background: var(--c-bg-inverse); color: #fff; padding-block: var(--sp-8);
}
.t3-cta-band h2 { color: #fff; max-width: 620px; }
.t3-cta-band p  { color: rgba(255,255,255,0.78); max-width: 560px; }

.t3-footer { background: var(--c-bg-inverse); color: rgba(255,255,255,0.74); padding-top: var(--sp-8); }
.t3-footer h3, .t3-footer strong { color: #fff; }
/* Footer links are where contrast most often fails. 4.5:1 minimum. */
.t3-footer a { color: rgba(255,255,255,0.74); }
.t3-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.t3-footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6); padding-bottom: var(--sp-7);
}
.t3-footer-col-heading {
  font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.52);     /* distinct from links, or grouping is invisible */
  margin-bottom: var(--sp-3);
}
.t3-footer-list { list-style: none; margin: 0; padding: 0; }
.t3-footer-list li + li { margin-top: var(--sp-1); }
.t3-footer-list a { display: block; padding-block: var(--sp-2); min-height: 44px; font-size: var(--fs-small); }

.t3-footer-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-micro); letter-spacing: 0.06em;
}
.t3-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-micro);
}
.t3-footer-bottom nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ==========================================================================
   SECTION 11 — SCROLL REVEAL
   Initial hidden state is applied ONLY when JS has added .t3-js to <html>,
   so a JS failure or a crawler still sees the content.
   ========================================================================== */

.t3-js .t3-reveal { opacity: 0; transform: translateY(18px); }
.t3-js .t3-reveal {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.t3-js .t3-reveal[data-revealed="true"] { opacity: 1; transform: none; }

/* ==========================================================================
   SECTION 12 — RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .t3-nav, .t3-header-cta .t3-btn { display: none; }
  .t3-burger { display: flex; }
  /* The header row is pushed right by `.t3-nav { margin-left: auto }`. Once
     the nav is display:none that auto margin goes with it, and the burger
     collapses back against the logo. Move the auto margin onto the CTA
     cluster for as long as the nav is hidden. */
  .t3-header-cta { margin-left: auto; }
  :root { --header-h: 68px; --header-h-scrolled: 60px; }
}

@media (max-width: 1200px) {
  .t3-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) 260px; }
}

@media (min-width: 1024px) {
  .t3-drawer, .t3-scrim { display: none; }
}

/* ==========================================================================
   SECTION 13 — REDUCED MOTION
   Removes MOVEMENT, keeps state feedback. Not a blanket kill switch.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Re-enable short opacity fades — they aid comprehension without moving anything */
  .t3-mega, .t3-slide, .t3-scrim { transition: opacity 120ms linear !important; }
  .t3-js .t3-reveal { opacity: 1 !important; transform: none !important; }
  .t3-drawer { transition: none !important; }
}

/* ==========================================================================
   SECTION 14 — PRINT
   ========================================================================== */

@media print {
  .t3-header, .t3-drawer, .t3-scrim, .t3-hero-controls, .t3-rail-nav, .t3-marquee { display: none !important; }
  .t3-rail { display: block; overflow: visible; }
  body { color: #000; background: #fff; }
}