/* =====================================================================
   RightElevate HR Services - styles.css
   Warm cream · deep magenta (#9b045e) · amber accent (#faaa08)
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --color-ink: #6d0342;
  --color-ink-soft: #9b045e;
  --color-canvas: #fdfaf6;
  --color-surface: #f8f1e9;
  --color-surface-strong: #f1e4d8;
  --color-accent: #faaa08;
  --color-accent-strong: #9a5c02;
  /* Heading emphasis - the amber half of every split headline.
     Change this one value to retune every emphasised heading at once. */
  --color-heading-em: #faaa08;
  --color-text: #2b1520;
  --color-muted: #7b6a70;
  --color-line: #ecdfd3;
  --color-white: #ffffff;
  --color-error: #b5473b;

  /* Type */
  --font-display: "Instrument Sans", Arial, sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;

  /* Spacing rhythm (8px) */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px;
  --sp-14: 112px; --sp-18: 144px;

  /* Layout */
  --shell-max: 1280px;
  --pad-x: 48px;

  /* Radii */
  --r-card: 28px;
  --r-inner: 18px;
  --r-pill: 999px;

  /* Borders / shadow */
  --border: 1px solid var(--color-line);
  --shadow-soft: 0 18px 44px -28px rgba(109, 3, 66, .32);
  --shadow-card: 0 24px 60px -34px rgba(109, 3, 66, .40);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-ui: 260ms;
  --t-slow: 720ms;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--color-canvas);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--color-ink); color: var(--color-white);
  padding: 10px 18px; border-radius: 10px; font-weight: 500;
  transition: top var(--t-ui) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Eyebrows / section titles ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-ink-soft); font-weight: 500; margin-bottom: var(--sp-3);
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--color-accent);
  /* DM Sans reserves more room below the baseline than its caps use, so the
     cap band sits above the line-box centre that flex aligns to. Offset is
     (ascent - descent - capHeight) / 2, about -1.4px at this size. */
  position: relative; top: -1.5px;
}
.eyebrow-light { color: var(--color-accent); }
.eyebrow-light .eyebrow-dot { background: var(--color-accent); }

.section-title {
  font-size: clamp(2.35rem, 4.2vw, 4.4rem);
  line-height: 1.03; color: var(--color-ink); max-width: 18ch;
}
.section-title-light { color: var(--color-white); }

/* Amber emphasis inside a heading: plain lead-in, accented payoff. */
.hl { color: var(--color-heading-em); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-pill);
  font-size: .98rem; font-weight: 500; border: 1px solid transparent;
  transition: transform var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
  position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 46px; padding: 0 18px; font-size: .92rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--color-ink); color: var(--color-canvas); }
.btn-primary:hover { background: #4f0230; }

.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn-secondary:hover { border-color: var(--color-ink); background: var(--color-white); }

.btn-accent { background: var(--color-accent); color: #3a0121; }
.btn-accent:hover { background: #e09604; }

.btn-ghost-light { background: transparent; color: var(--color-canvas); border-color: rgba(253, 250, 246, .34); }
.btn-ghost-light:hover { border-color: var(--color-canvas); background: rgba(253, 250, 246, .08); }

.btn-arrow { transition: transform var(--t-ui) var(--ease); flex: none; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Two-layer label slide for primary CTAs that use .btn-label */
/* line-height must match the height, or the inherited 1.62 line box overflows
   the 1.3em clip from the top and pushes the label visibly low. */
.btn-label { position: relative; display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3; }
.btn-label-text { grid-area: 1 / 1; transition: transform var(--t-ui) var(--ease); white-space: nowrap; }
.btn-label .btn-label-text:last-child { transform: translateY(120%); }
.btn:hover .btn-label .btn-label-text:first-child { transform: translateY(-120%); }
.btn:hover .btn-label .btn-label-text:last-child { transform: translateY(0); }

/* Text CTA */
.text-cta {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
  color: var(--color-ink); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color var(--t-ui) var(--ease), gap var(--t-ui) var(--ease);
}
.text-cta:hover { border-color: var(--color-ink-soft); gap: 12px; }
.text-cta svg { transition: transform var(--t-ui) var(--ease); }
.text-cta:hover svg { transform: translateX(2px); }

/* =====================================================================
   HEADER
   ===================================================================== */
/* The bar itself is only a positioning frame: transparent, and click-through so
   the gutters either side of the capsule do not swallow taps on the page. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 16px var(--pad-x) 0;
  pointer-events: none;
  transition: padding var(--t-ui) var(--ease);
}
/* The floating frosted capsule. It wraps both the bar row and the mobile menu,
   so opening the menu grows this box instead of covering the page. */
.header-shell {
  --bar-h: 70px;
  pointer-events: auto;
  padding-inline: 18px 14px;
  /* Half the bar height is an exact pill while collapsed. A 999px pill radius
     would be clamped against the box height, so it would silently re-clamp
     larger as the menu expands and the corners would warp mid-animation. */
  border-radius: calc(var(--bar-h) / 2);
  overflow: hidden;
  background: rgba(253, 250, 246, .36);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(109, 3, 66, .07);
  box-shadow: 0 10px 30px -16px rgba(109, 3, 66, .24),
              inset 0 1px 0 rgba(255, 255, 255, .33);
  /* Radius runs at the menu's duration so the corners and the height finish
     together; the rest stays on the shorter scroll-state timing. */
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease), border-radius 380ms var(--ease-out);
}
/* The pill row: logo, nav, actions. */
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); height: var(--bar-h);
  transition: height var(--t-ui) var(--ease);
}
/* Tightens and densifies once the page moves under it. One variable drives both
   the row height and the radius, so the pill stays exact in either state. */
.site-header.is-scrolled { padding-top: 10px; }
.site-header.is-scrolled .header-shell {
  --bar-h: 62px;
  background: rgba(253, 250, 246, .52);
  border-color: rgba(109, 3, 66, .10);
  box-shadow: 0 14px 34px -18px rgba(109, 3, 66, .30),
              inset 0 1px 0 rgba(255, 255, 255, .40);
}
/* Open menu squares off the pill into a rounded panel and firms up the glass,
   since nav text now sits over whatever is scrolling behind. Declared last and
   scoped through .site-header so it outranks the scrolled state above. */
.site-header .header-shell:has(.mobile-menu.is-open) {
  border-radius: var(--r-card);
  background: rgba(253, 250, 246, .95);
}
/* Without backdrop-filter the translucency just looks washed out, so go opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-shell { background: rgba(253, 250, 246, .96); }
}

.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { display: inline-flex; }
/* logo.png is icon.png trimmed to the artwork bounds, so height is now the
   glyph's true optical height - no padding compensation needed. */
.brand-logo { height: 30px; width: auto; transition: height var(--t-ui) var(--ease); }
.site-header.is-scrolled .brand-logo { height: 26px; }
.brand-word { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--color-ink); letter-spacing: -0.02em; }
.brand-word-em { color: var(--color-accent); }

.primary-nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative; display: inline-block; padding: 8px 14px; border-radius: 10px;
  font-size: .95rem; color: var(--color-ink-soft); font-weight: 500;
  transition: color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  background: var(--color-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease);
}
.nav-link:hover { color: var(--color-ink); }
.nav-link.is-active { color: var(--color-ink); }
.nav-link.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* Bare bars, no chrome. Keeps the 46px box as an invisible touch target. */
.nav-toggle {
  display: none; width: 46px; height: 46px;
  border: 0; background: none; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle-bars { position: relative; width: 20px; height: 12px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--color-ink); transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.nav-toggle-bars span:first-child { top: 0; }
.nav-toggle-bars span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
/* Collapses via grid 0fr -> 1fr so it animates to its natural height. Padding
   must stay off the collapsing row, hence the separate clip and inner boxes.
   visibility keeps the links out of the tab order while shut, and is delayed on
   close so the panel stays on screen for the full collapse. */
.mobile-menu {
  display: grid; grid-template-rows: 0fr; visibility: hidden; overflow: hidden;
  transition: grid-template-rows 380ms var(--ease-out), visibility 0s linear 380ms;
}
.mobile-menu.is-open {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 380ms var(--ease-out), visibility 0s;
}
.mobile-menu-clip { min-height: 0; overflow: hidden; }
/* Safety net for short/landscape phones where the panel exceeds the viewport.
   The scrollbar chrome is suppressed: while the row is still growing the content
   always overflows, so an auto scrollbar would flash for the whole animation. */
.mobile-menu.is-open .mobile-menu-clip {
  overflow-y: auto; max-height: calc(100vh - 150px); overscroll-behavior: contain;
  scrollbar-width: none;
}
.mobile-menu-clip::-webkit-scrollbar { display: none; }
/* Deliberately does not move. The clip growing over static content reads as a
   clean wipe from under the bar; translating the content as well makes it
   settle downward at the end, which looks like a shove. */
.mobile-menu-inner {
  padding: 6px 0 16px; margin-top: 6px;
  border-top: 1px solid rgba(109, 3, 66, .09);
}
.mobile-nav-list { display: flex; flex-direction: column; }
.mobile-nav-link {
  display: block; padding: 11px 2px; font-family: var(--font-display);
  font-size: 1.06rem; color: var(--color-ink);
  border-bottom: 1px solid rgba(109, 3, 66, .07);
  transition: padding-left var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.mobile-nav-list li:last-child .mobile-nav-link { border-bottom: 0; }
.mobile-nav-link:hover { padding-left: 10px; color: var(--color-accent-strong); }
.mobile-menu-foot { display: grid; gap: 10px; margin-top: 14px; }
.mobile-menu-promise {
  font-family: var(--font-display); color: var(--color-ink-soft);
  font-size: .9rem; text-align: center;
}
/* Desktop shows the inline nav, so the panel has no reason to exist. */
@media (min-width: 1025px) { .mobile-menu { display: none; } }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; padding: 148px 0 var(--sp-14); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .38;
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 78%);
}
.hero-field {
  position: absolute; top: -20%; right: -14%; width: 62vw; height: 62vw; max-width: 880px; max-height: 880px;
  background: radial-gradient(circle at 50% 50%, rgba(250, 170, 8, .20), rgba(250, 170, 8, 0) 62%);
  border-radius: 50%;
}

.hero-shell {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.hero-title {
  font-size: clamp(3.4rem, 6.2vw, 6.4rem);
  line-height: .98; font-weight: 500; color: var(--color-ink);
  letter-spacing: -0.02em; margin: 6px 0 var(--sp-3);
}
.hero-title .line { display: block; }
.hero-title .line:last-child { color: var(--color-accent); }
.hero-lede { font-size: 1.16rem; color: var(--color-muted); max-width: 46ch; line-height: 1.62; }

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--sp-5) 0 var(--sp-3); }
.hero-credibility {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--color-line);
  font-size: .95rem; color: var(--color-muted); max-width: 44ch;
}

/* Hero visual + floating cards */
.hero-visual { position: relative; align-self: stretch; min-height: 520px; }
.hero-photo {
  position: absolute; inset: 0 0 0 auto; width: 82%; height: 100%;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--color-surface-strong);
  box-shadow: var(--shadow-card); border: 1px solid rgba(255,255,255,.6);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.float-card {
  position: absolute; background: var(--color-white);
  border: 1px solid var(--color-line); border-radius: var(--r-inner);
  box-shadow: var(--shadow-soft); padding: 14px 16px; z-index: 2;
  will-change: transform;
}
.mini-label {
  display: block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 9px; font-weight: 500;
}
.float-card-flow { left: -6%; top: 12%; max-width: 250px; }
.flow-steps { display: flex; flex-direction: column; gap: 7px; }
.flow-step { font-size: .86rem; font-weight: 500; color: var(--color-ink); }
.flow-arrow { color: var(--color-accent-strong); margin-left: 3px; }

.float-card-modes { left: 2%; bottom: 8%; }
.mode-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-pill {
  font-size: .8rem; font-weight: 500; color: var(--color-ink-soft);
  background: var(--color-surface); border: 1px solid var(--color-line);
  padding: 5px 11px; border-radius: var(--r-pill);
}

.float-card-ready { right: -4%; bottom: 16%; }
.ready-list { display: grid; gap: 7px; }
.ready-list li { display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 500; color: var(--color-ink); }
/* Deep amber, not the brand yellow: this circle carries a white tick, which
   needs a darker ground to read (5.38:1 here, only 1.94:1 on #faaa08).
   Flex centring targets the line box, whose leading hangs below the letters,
   so lift onto the cap band - the same correction the eyebrow dot needs. */
.check { width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent-strong); position: relative; top: -1.5px; flex: none; }
/* Only the right and bottom borders are inked, so the visible tick does not sit
   at the centre of its own 4x7 box - after the 45deg rotation its bounds centre
   lands 1.5px left and 0.8px above the circle's. Offsets compensate. */
.check::after { content: ""; position: absolute; left: 6px; top: 3.8px; width: 4px; height: 7px; border: solid var(--color-white); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* =====================================================================
   CAPABILITY STRIP
   ===================================================================== */
.capability {
  border-block: 1px solid var(--color-line);
  background: var(--color-surface);
  overflow: hidden; padding: 22px 0;
}
.capability-track { display: flex; width: max-content; gap: 0; }
.capability-list {
  display: flex; align-items: center; gap: 26px; padding-right: 26px;
  animation: marquee 34s linear infinite;
}
.capability[data-paused] .capability-list,
.capability-track:hover .capability-list,
.capability-track:focus-within .capability-list { animation-play-state: paused; }
.capability-list li {
  font-family: var(--font-display); font-size: 1.24rem; font-weight: 500;
  color: var(--color-ink-soft); white-space: nowrap;
}
.capability-list .cap-sep { color: var(--color-accent-strong); font-size: 1rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   ABOUT / MISSION / VISION / VALUES
   ===================================================================== */
.about { padding: var(--sp-14) 0; }
.about-top {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 88px);
  align-items: end; margin-bottom: var(--sp-10);
}
.about-narrative p { color: var(--color-muted); font-size: 1.08rem; }
.about-narrative .about-note { margin-top: var(--sp-2); }

.mv-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mv-panel { border-radius: var(--r-card); padding: var(--sp-5); border: var(--border); }
.mv-mission { background: var(--color-ink); color: var(--color-canvas); border-color: transparent; }
.mv-mission .mv-tag { color: var(--color-accent); }
.mv-mission p { color: rgba(253, 250, 246, .9); }
.mv-vision { background: var(--color-surface-strong); }
.mv-tag {
  display: inline-block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-strong); margin-bottom: 14px;
}
.mv-panel p { font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.32; font-weight: 400; }

/* Value rail */
.values { border-top: 1px solid var(--color-line); padding-top: var(--sp-6); }
.values-kicker { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--sp-4); font-weight: 500; }
.value-list { display: flex; gap: var(--sp-2); align-items: stretch; }
.value-item {
  flex: 1 1 0; min-width: 0;
  /* `anywhere` rather than `break-word`: only this value lowers the box's
     min-content width, which is what lets a shrunken card actually contain a
     long single word like "Responsiveness" instead of spilling it. */
  overflow-wrap: anywhere;
  border: 1px solid var(--color-line); border-radius: 20px; background: var(--color-white);
  padding: var(--sp-3);
  transition: flex-grow var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease); min-height: 172px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
/* Five across leaves a collapsed card ~122px of content - too little to sit a
   long name beside the index at any readable size. So the index sits above the
   name on every card: the name always gets the full width, and all five read
   the same. Below 1025px the cards are wide enough to go back inline. */
.value-trigger {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: none; border: 0;
  padding: 0; text-align: left; width: 100%; color: inherit;
}
.value-index { font-family: var(--font-display); font-size: .9rem; color: var(--color-accent-strong); font-weight: 500; flex: none; }
/* 1rem fits the longest name ("Responsiveness", ~121px) inside a collapsed
   card. Not a vw clamp: the shell caps at 1280px, so above that the cards stop
   growing while a vw-sized name would keep going and overflow again. */
.value-name {
  font-family: var(--font-display); font-size: 1rem;
  font-weight: 500; color: var(--color-ink);
  min-width: 0; hyphens: auto;
  transition: font-size var(--t-ui) var(--ease);
}
.value-item.is-active .value-name { font-size: 1.22rem; }
.value-desc {
  margin-top: 12px; color: var(--color-muted); font-size: .95rem; line-height: 1.5;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease), margin var(--t-ui) var(--ease);
}
.value-item.is-active {
  background: var(--color-ink); border-color: transparent;
  flex-grow: 2.6;
}
.value-item.is-active .value-name { color: var(--color-white); }
.value-item.is-active .value-index { color: var(--color-accent); }
.value-item.is-active .value-desc { max-height: 120px; opacity: 1; color: rgba(253,250,246,.82); }

/* =====================================================================
   SERVICES
   ===================================================================== */
.services { padding: var(--sp-14) 0; background: var(--color-surface); }
.services-head { max-width: 40ch; margin-bottom: var(--sp-8); }

.tablist {
  display: inline-flex; gap: 6px; padding: 6px;
  background: var(--color-white); border: var(--border); border-radius: var(--r-pill);
  margin-bottom: var(--sp-5); max-width: 100%;
}
.tab {
  border: 0; background: none; border-radius: var(--r-pill);
  padding: 12px 22px; font-size: .96rem; font-weight: 500; color: var(--color-ink-soft);
  white-space: nowrap; transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.tab:hover { color: var(--color-ink); }
.tab.is-selected { background: var(--color-ink); color: var(--color-canvas); }

.tabpanels { position: relative; }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: panelIn 420ms var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.panel-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px);
  background: var(--color-white); border: var(--border); border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 52px); align-items: center;
}
.panel-title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; color: var(--color-ink); margin-bottom: 14px; max-width: 20ch; }
.panel-lede { color: var(--color-muted); max-width: 48ch; margin-bottom: var(--sp-3); }
.panel-services {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-line);
}
.panel-services li {
  font-size: .88rem; font-weight: 500; color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-line);
  padding: 7px 14px; border-radius: var(--r-pill);
}
.panel-benefits { display: grid; gap: 10px; margin-bottom: var(--sp-4); }
.panel-benefits li { position: relative; padding-left: 26px; color: var(--color-ink-soft); font-size: .96rem; }
.panel-benefits li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 2px solid var(--color-accent-strong); border-bottom: 2px solid var(--color-accent-strong);
  transform: rotate(-45deg);
}
.panel-visual { border-radius: var(--r-inner); overflow: hidden; background: var(--color-surface-strong); aspect-ratio: 19 / 18; }
.panel-visual img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   PROCESS (deep green)
   ===================================================================== */
.process { position: relative; background: var(--color-ink); color: var(--color-canvas); padding: var(--sp-14) 0; overflow: hidden; }
.process-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.process-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
}
.process .shell { position: relative; z-index: 1; }
.process-head { max-width: 34ch; margin-bottom: var(--sp-10); }

.steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-10); }
.steps-line {
  position: absolute; left: 0; right: 0; top: 15px; height: 2px;
  background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden;
  /* The steps reveal with a translateY, but the bar is not inside them. Move it
     in lockstep, otherwise the circles float below the line for the whole
     720ms reveal. Driven off the steps' own state so the two cannot desync. */
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.steps:has(.step.is-visible) .steps-line { opacity: 1; transform: none; }
.steps-line-fill { display: block; height: 100%; width: 0%; background: var(--color-accent); transition: width 120ms linear; }
.step { position: relative; padding-top: 40px; }
.step-num {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  /* Digits carry no descender, so centring the line box leaves them sitting
     optically high. Centring halves the padding, so this nudges down ~1px. */
  line-height: 1; padding-top: 2px;
  background: var(--color-ink-soft); color: var(--color-accent); border: 2px solid var(--color-ink);
  outline: 2px solid rgba(255,255,255,.14);
  transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease),
              outline-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
/* Lit once the progress bar's leading edge passes this circle. */
.step.is-reached .step-num {
  background: var(--color-accent); color: #3a0121; outline-color: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(250, 170, 8, .16), 0 0 20px 3px rgba(250, 170, 8, .55);
}
.step-title { font-size: 1.24rem; color: var(--color-white); margin-bottom: 8px; }
.step-text { font-size: .92rem; color: rgba(253,250,246,.68); line-height: 1.5; }

.process-cta {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 32px);
}
.process-cta-photo { border-radius: var(--r-inner); overflow: hidden; background: var(--color-ink-soft); aspect-ratio: 17 / 11; }
.process-cta-photo img { width: 100%; height: 100%; object-fit: cover; }
.process-cta-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--color-white); margin-bottom: 10px; }
.process-cta-copy p { color: rgba(253,250,246,.74); max-width: 46ch; margin-bottom: var(--sp-3); }

/* =====================================================================
   PATHWAYS (employers / job seekers)
   ===================================================================== */
.pathways { padding: var(--sp-14) 0; }
.pathways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.path { border-radius: var(--r-card); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }

.path-employer { background: var(--color-surface-strong); border: var(--border); }
.path-title { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.06; color: var(--color-ink); margin-bottom: var(--sp-4); max-width: 16ch; }

.employer-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: var(--sp-4); }
.employer-points li { display: flex; align-items: flex-start; gap: 10px; font-size: .98rem; font-weight: 500; color: var(--color-ink); }
.point-ico { color: var(--color-accent-strong); flex: none; margin-top: 1px; }

.shortlist-viz {
  margin: auto 0 var(--sp-4); background: var(--color-white); border: var(--border);
  border-radius: var(--r-inner); padding: 18px;
}
.shortlist-label { display: block; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 12px; font-weight: 500; }
.shortlist-rows { display: grid; gap: 10px; }
.sl-row { display: flex; align-items: center; gap: 12px; }
.sl-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface-strong); border: 1px solid var(--color-line); flex: none; }
.sl-bar { height: 10px; border-radius: 6px; background: var(--color-surface); border: 1px solid var(--color-line); flex: 1; }
.sl-row-top .sl-avatar { background: var(--color-accent); border-color: var(--color-accent-strong); }
.sl-row-top .sl-bar { background: var(--color-surface-strong); }
.sl-bar-2 { max-width: 72%; }
.sl-bar-3 { max-width: 54%; }
.sl-fit { font-size: .74rem; font-weight: 600; color: #3a0121; background: var(--color-accent); padding: 4px 10px; border-radius: var(--r-pill); flex: none; }

.path-candidate { background: var(--color-ink); border: 1px solid transparent; }
.path-title-light { color: var(--color-white); }

.journey { display: grid; gap: 2px; margin-bottom: var(--sp-4); }
.journey-step { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.journey-step::before {
  content: ""; position: absolute; left: 15px; top: 50%; bottom: -50%; width: 2px;
  background: rgba(250, 170, 8, .28);
}
.journey-step:last-child::before { display: none; }
.journey-dot {
  width: 32px; height: 32px; border-radius: 50%; flex: none; z-index: 1;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  background: var(--color-ink-soft); color: var(--color-accent); border: 1px solid rgba(250,170,8,.4);
}
.journey-label { font-size: 1.05rem; font-weight: 500; color: var(--color-canvas); }

/* Disclaimer */
.disclaimer {
  font-size: .84rem; line-height: 1.5; color: var(--color-muted);
  border-left: 2px solid var(--color-accent-strong); padding-left: 14px;
}
.disclaimer-inline { color: rgba(253,250,246,.6); margin: auto 0 var(--sp-4); }
.disclaimer-modal { margin: 4px 0 var(--sp-2); background: var(--color-surface); border-left-color: var(--color-accent-strong); padding: 12px 14px; border-radius: 0 12px 12px 0; }

/* =====================================================================
   INDUSTRIES
   ===================================================================== */
.industries { padding: var(--sp-14) 0; background: var(--color-surface); }
.industries-head { max-width: 34ch; margin-bottom: var(--sp-8); }
.industries-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-4); align-items: start; }

.industry-rail { display: flex; flex-wrap: wrap; gap: 10px; }
.industry-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--color-line); background: var(--color-white);
  font-size: .95rem; font-weight: 500; color: var(--color-ink-soft);
  transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.industry-chip .ind-ico { color: var(--color-accent-strong); display: inline-flex; transition: color var(--t-ui) var(--ease); }
.industry-chip:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.industry-chip.is-selected { background: var(--color-ink); color: var(--color-canvas); border-color: var(--color-ink); }
.industry-chip.is-selected .ind-ico { color: var(--color-accent); }

.industry-detail { position: sticky; top: 96px; }
.industry-detail-card {
  background: var(--color-ink); color: var(--color-canvas);
  border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); min-height: 220px;
  display: flex; flex-direction: column;
}
.industry-detail-name { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-white); margin-bottom: 12px; }
.industry-detail-text { color: rgba(253,250,246,.78); line-height: 1.55; margin-bottom: auto; }
.industry-detail-foot { margin-top: var(--sp-3); }
.industry-detail-card .btn-secondary { color: var(--color-canvas); border-color: rgba(253,250,246,.32); }
.industry-detail-card .btn-secondary:hover { border-color: var(--color-canvas); background: rgba(253,250,246,.08); }

.industry-controls { display: none; gap: 10px; margin-top: var(--sp-3); }

/* =====================================================================
   WHY (bento)
   ===================================================================== */
.why { padding: var(--sp-14) 0; }
.why-head { margin-bottom: var(--sp-8); max-width: 24ch; }
.why-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.bento {
  border: var(--border); border-radius: var(--r-card); padding: var(--sp-5);
  background: var(--color-white); display: flex; flex-direction: column;
  transition: transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.bento:hover { transform: translateY(-3px); border-color: var(--color-accent-strong); }
.bento-ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--color-surface-strong); color: var(--color-ink); margin-bottom: var(--sp-3);
}
.bento-title { font-size: 1.3rem; color: var(--color-ink); margin-bottom: 8px; }
.bento-text { color: var(--color-muted); font-size: .98rem; }
.bento-a { grid-row: span 1; }
.bento-promise {
  grid-column: span 1; grid-row: span 2; background: var(--color-ink);
  align-items: flex-start; justify-content: center; border-color: transparent;
}
.bento-promise:hover { transform: none; border-color: transparent; }
.promise-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.12; color: var(--color-canvas); display: grid; }
.promise-em { color: var(--color-accent); }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonials { padding: var(--sp-14) 0; background: var(--color-surface); }
.testimonials-head { margin-bottom: var(--sp-6); max-width: 30ch; }
.carousel { background: var(--color-white); border: var(--border); border-radius: var(--r-card); padding: clamp(28px, 4vw, 56px); }
.carousel-viewport { overflow: hidden; }
.carousel-track { position: relative; }
.testi-slide { animation: fadeIn 420ms var(--ease-out); }
.testi-slide[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.testi-flag {
  display: inline-block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--color-error); background: #f7e7e4;
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: var(--sp-3);
}
.testi-quote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.28; color: var(--color-ink);
  max-width: 26ch;
}
.testi-source { margin-top: var(--sp-3); color: var(--color-muted); font-size: .95rem; font-weight: 500; }

.carousel-controls { display: flex; align-items: center; gap: 16px; margin-top: var(--sp-5); }
.carousel-dots { display: flex; gap: 8px; margin-inline: auto 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--color-line); transition: background var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); padding: 0; }
.dot.is-active { background: var(--color-accent-strong); transform: scale(1.25); }

.rail-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-line);
  background: var(--color-white); color: var(--color-ink); display: grid; place-items: center;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.rail-btn:hover { border-color: var(--color-ink); transform: translateY(-1px); }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { padding: var(--sp-14) 0; }
.faq-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-intro { position: sticky; top: 100px; }
.faq-intro-text { color: var(--color-muted); margin: var(--sp-3) 0 var(--sp-3); max-width: 34ch; }

.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; background: none; border: 0; text-align: left;
  padding: var(--sp-3) 0; font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 500; color: var(--color-ink); transition: color var(--t-ui) var(--ease);
}
.faq-q:hover { color: var(--color-ink-soft); }
.faq-icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-accent-strong);
  transform: translate(-50%, -50%); transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.faq-icon::before { width: 16px; height: 2px; }
.faq-icon::after { width: 2px; height: 16px; }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; height: 0; transition: height var(--t-ui) var(--ease); }
.faq-a-inner { padding-bottom: var(--sp-3); }
.faq-a-inner p { color: var(--color-muted); max-width: 56ch; }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.final-cta { padding: var(--sp-14) 0 var(--sp-18); }
.final-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0;
  background: var(--color-ink); border-radius: var(--r-card); overflow: hidden;
}
.final-copy { padding: clamp(36px, 5vw, 72px); color: var(--color-canvas); }
.final-title { font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.06; color: var(--color-white); max-width: 18ch; }
.final-lede { color: rgba(253,250,246,.78); margin: var(--sp-3) 0 var(--sp-5); max-width: 44ch; }
.final-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--sp-6); }

.final-contact { display: grid; gap: 12px; padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.14); }
.final-contact li { display: flex; align-items: baseline; gap: 16px; }
.fc-key { width: 52px; flex: none; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; }
.fc-val { color: rgba(253,250,246,.9); font-size: 1rem; background: none; border: 0; padding: 0; text-align: left; }
button.fc-val { transition: color var(--t-ui) var(--ease); }
button.fc-val:hover { color: var(--color-accent); }
.final-promise { margin-top: var(--sp-5); font-family: var(--font-display); color: var(--color-accent); font-size: 1.02rem; }

.final-photo { background: var(--color-ink-soft); min-height: 320px; }
.final-photo img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--color-canvas); border-top: 1px solid var(--color-line); padding: var(--sp-10) 0 var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-5); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--color-line); }
.brand-footer { margin-bottom: var(--sp-3); }
.brand-footer .brand-logo { height: 27px; }
.footer-desc { color: var(--color-muted); max-width: 38ch; font-size: .96rem; margin-bottom: var(--sp-3); }
.footer-contact { display: grid; gap: 6px; }
.footer-contact-item { text-align: left; background: none; border: 0; padding: 0; color: var(--color-ink-soft); font-size: .94rem; font-weight: 500; transition: color var(--t-ui) var(--ease); }
button.footer-contact-item:hover { color: var(--color-accent-strong); }
.footer-h { font-family: var(--font-body); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; margin-bottom: var(--sp-3); }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--color-ink-soft); font-size: .95rem; transition: color var(--t-ui) var(--ease); }
.footer-col a:hover { color: var(--color-accent-strong); }
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: var(--sp-4); }
.footer-copy { color: var(--color-muted); font-size: .9rem; }
.footer-promise { font-family: var(--font-display); color: var(--color-ink-soft); font-size: .95rem; }

/* =====================================================================
   MODALS
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 300; display: none; }
.modal.is-open { display: block; }
.modal-overlay { position: absolute; inset: 0; background: rgba(45, 2, 26, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeOverlay 240ms var(--ease); }
@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }
.modal-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 40px)); max-height: calc(100vh - 48px);
  background: var(--color-canvas); border-radius: var(--r-card); overflow-y: auto;
  box-shadow: var(--shadow-card); animation: modalIn 320ms var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px) var(--sp-3); }
.modal-eyebrow { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-strong); font-weight: 600; margin-bottom: 8px; }
.modal-title { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--color-ink); }
.modal-helper { color: var(--color-muted); font-size: .96rem; margin-top: 8px; max-width: 52ch; }
.modal-close {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  border: 1px solid var(--color-line); background: var(--color-white); color: var(--color-ink);
  display: grid; place-items: center; transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.modal-close:hover { border-color: var(--color-ink); background: var(--color-surface); }

.modal-form { padding: 0 clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 500; color: var(--color-ink); }
.label-hint { color: var(--color-muted); font-weight: 400; font-size: .8rem; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .98rem; color: var(--color-text);
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: 12px;
  padding: 12px 14px; min-height: 48px; transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
  width: 100%;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-ink-soft);
  box-shadow: 0 0 0 3px rgba(155, 4, 94, .16);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-error); }
.field.has-error input:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(181, 71, 59, .16); }
.field-err { font-size: .82rem; color: var(--color-error); min-height: 0; }

.file-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 16px; min-height: 46px; border-radius: 12px; font-weight: 500; font-size: .92rem;
  background: var(--color-surface-strong); border: 1px solid var(--color-line); color: var(--color-ink);
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.file-btn:hover { border-color: var(--color-ink); }
.file-name { font-size: .9rem; color: var(--color-muted); }
.file-name.has-file { color: var(--color-ink); font-weight: 500; }

.consent { display: flex; align-items: flex-start; gap: 10px; margin: var(--sp-2) 0 var(--sp-3); font-size: .92rem; color: var(--color-ink-soft); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent-strong); flex: none; }
.modal-submit .btn-label-text { display: inline-block; }
.modal-submit[disabled] { opacity: .72; cursor: default; }

/* =====================================================================
   TOAST
   ===================================================================== */
.toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 400; display: grid; gap: 10px; width: min(440px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--color-ink); color: var(--color-canvas);
  border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-card);
  animation: toastIn 320ms var(--ease-out); font-size: .94rem; line-height: 1.45;
}
.toast.is-out { animation: toastOut 280ms var(--ease) forwards; }
.toast-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent); color: #3a0121; display: grid; place-items: center; margin-top: 1px; }
.toast-ico svg { width: 13px; height: 13px; }
.toast--info .toast-ico { background: var(--color-surface-strong); color: var(--color-ink); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px); } }

/* =====================================================================
   REVEAL (scroll-in)
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Broken-image graceful fallback */
img.img-failed { opacity: 0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .hero-shell { gap: 40px; }
  .float-card-flow { left: -2%; }
  .float-card-ready { right: -1%; }
}

@media (max-width: 1024px) {
  :root { --pad-x: 28px; }
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }

  .about-top { grid-template-columns: 1fr; gap: 28px; }
  .mv-row { grid-template-columns: 1fr; }
  /* Cards are 50%/full width here, so the name fits beside the index again. */
  .value-trigger { flex-direction: row; align-items: baseline; gap: 10px; }
  .value-name, .value-item.is-active .value-name { font-size: 1.22rem; }

  .value-list { flex-wrap: wrap; }
  .value-item { flex: 1 1 calc(50% - var(--sp-2)); }
  .value-item.is-active { flex-basis: 100%; }

  .panel-grid { grid-template-columns: 1fr; }
  .panel-visual { order: -1; aspect-ratio: 16 / 9; }

  .steps { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-6); }
  .steps-line { display: none; }
  .process-cta { grid-template-columns: 1fr; }
  .process-cta-photo { aspect-ratio: 16 / 8; }

  .industries-body { grid-template-columns: 1fr; }
  .industry-detail { position: static; }

  .why-bento { grid-template-columns: repeat(2, 1fr); }
  .bento-promise { grid-column: span 2; grid-row: span 1; }

  .faq-shell { grid-template-columns: 1fr; }
  .faq-intro { position: static; }

  .final-grid { grid-template-columns: 1fr; }
  .final-photo { order: -1; min-height: 260px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --pad-x: 20px; --r-card: 22px; }
  body { font-size: 16px; }

  /* A nowrap label cannot shrink below its own width, so a long CTA such as
     "Submit Your Requirement" forced its card wider than the viewport and
     dragged the page out to the right. Labels inside .btn-label keep nowrap:
     that wrapper clips to a single line for the two-layer hover slide. */
  .btn > .btn-label-text { white-space: normal; }
  .btn { padding-inline: 18px; }

  /* 112px top and bottom reads as a third of a phone screen in dead space, and
     it doubles up between adjacent sections. Cut the rhythm to 64px. */
  .about, .services, .process, .pathways,
  .industries, .why, .testimonials, .faq { padding-block: var(--sp-8); }
  .final-cta { padding-block: var(--sp-8) var(--sp-10); }
  .site-footer { padding-block: var(--sp-8) var(--sp-4); }

  .hero { padding: 124px 0 var(--sp-10); }
  .hero-shell { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero-visual { min-height: 440px; order: 2; }
  .hero-photo { position: relative; width: 100%; height: 340px; }
  .float-card { position: absolute; }
  .float-card-flow { left: 0; top: -18px; max-width: 220px; }
  .float-card-modes { left: auto; right: 0; bottom: 60px; }
  .float-card-ready { right: 8px; bottom: -14px; }
  .hero-cta-row .btn { flex: 1 1 auto; }

  .capability-list li { font-size: 1.06rem; }

  .value-item { flex-basis: 100%; min-height: auto; }
  .value-desc { max-height: 0; }
  .value-item.is-active .value-desc { max-height: 140px; }

  .tablist { display: flex; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tablist::-webkit-scrollbar { display: none; }
  .tab { flex: none; }

  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step { padding: 0 0 28px 52px; }
  .step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; background: rgba(255,255,255,.14); }
  .step.is-reached:not(:last-child)::before { background: var(--color-accent); }

  .pathways-grid { grid-template-columns: 1fr; }
  .employer-points { grid-template-columns: 1fr; }

  .why-bento { grid-template-columns: 1fr; }
  .bento-promise { grid-column: span 1; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 8px; }

  .final-cta-row .btn, .hero-cta-row .btn { min-height: 50px; }

  /* Full-screen modal sheet on phones */
  .modal-dialog { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; top: 0; left: 0; transform: none; border-radius: 0; }
  @keyframes modalIn { from { opacity: 0; transform: translateY(2%); } to { opacity: 1; transform: none; } }
  .form-grid { grid-template-columns: 1fr; }

  .industry-controls { display: flex; }
  .industry-rail { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .industry-rail::-webkit-scrollbar { display: none; }
  .industry-chip { flex: none; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 3rem; }
  .float-card-flow { max-width: 190px; }
  .brand-word { font-size: 1.16rem; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .steps-line { opacity: 1; transform: none; }
  .capability-list { animation: none; }
  [data-parallax] { transform: none !important; }
}