/* ═══════════════════════════════════════════════════════════════════
   RIJAL.CO.NZ — DESIGN SYSTEM V15
   Single source of truth. Applied site-wide. Overrides all patches.
   Palette: Midnight #080f1c · Navy #0B1F3A · Teal #0FA3B1 #15C5D8
            Gold #C9A24A #E8C97A · Ivory #F1EDE4 · Slate #94A3B8
═══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg:        #080f1c;
  --bg-2:      #0c1525;
  --surface:   #0d1e35;
  --surface-2: #112647;
  --surface-hi:#162e55;

  /* Brand */
  --teal:      #0FA3B1;
  --teal-2:    #15C5D8;
  --teal-3:    #1ad4e8;
  --gold:      #C9A24A;
  --gold-2:    #E8C97A;
  --ivory:     #F1EDE4;
  --muted:     #94A3B8;
  --subtle:    #64748B;

  /* Semantic alpha */
  --teal-soft:   rgba(15,163,177,.10);
  --teal-border: rgba(15,163,177,.22);
  --gold-soft:   rgba(201,162,74,.10);
  --gold-border: rgba(201,162,74,.22);
  --line:        rgba(255,255,255,.055);
  --line-2:      rgba(255,255,255,.095);

  /* Typography */
  --serif: 'Fraunces','Georgia',serif;
  --sans:  'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:  'DM Mono','Menlo',monospace;

  /* Layout */
  --max:    1160px;
  --nav-h:  66px;
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   20px;
  --r-xl:   28px;

  /* Elevation */
  --sh-sm:  0 4px 12px rgba(0,0,0,.3);
  --sh:     0 8px 28px rgba(0,0,0,.4);
  --sh-lg:  0 24px 64px rgba(0,0,0,.55);
  --sh-glow:0 0 0 1px var(--teal-border), 0 12px 44px rgba(15,163,177,.18);

  /* Gradients */
  --g-teal:   linear-gradient(135deg,#0FA3B1,#15C5D8);
  --g-gold:   linear-gradient(135deg,#C9A24A,#E8C97A);
  --g-card:   linear-gradient(180deg,rgba(255,255,255,.033) 0%,rgba(255,255,255,.008) 100%);
  --g-glow:   radial-gradient(circle at 50% 0%, rgba(15,163,177,.08), transparent 70%);
}

/* ── RESET & BASE ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,163,177,.2) transparent;
}
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(15,163,177,.2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(15,163,177,.38); }

body {
  background:var(--bg);
  color:var(--muted);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  letter-spacing:-.005em;
  overflow-x:hidden;
}

/* Ambient atmosphere */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 1000px 600px at 85% -5%, rgba(15,163,177,.07), transparent 65%),
    radial-gradient(ellipse 700px 500px at -5% 65%,  rgba(201,162,74,.04), transparent 70%),
    radial-gradient(ellipse 600px 400px at 90% 100%,rgba(15,163,177,.05), transparent 70%);
}

::selection { background:rgba(15,163,177,.22); color:#F1EDE4; }
a { color:inherit; text-decoration:none; transition:color .2s; }
img { max-width:100%; height:auto; display:block; }

/* ── FOCUS RING ─────────────────────────────────────────────────── */
:focus-visible {
  outline:2px solid var(--teal-2);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
h1,h2,h3,h4 {
  font-family:var(--serif);
  font-weight:400;
  color:var(--ivory);
  line-height:1.07;
  letter-spacing:-.025em;
}
h1 { font-size:clamp(2.4rem,5.4vw,4.4rem); font-variation-settings:"opsz" 144; }
h2 { font-size:clamp(1.85rem,3.8vw,3.1rem); font-variation-settings:"opsz" 80; }
h3 { font-size:clamp(1.2rem,2vw,1.65rem); font-variation-settings:"opsz" 48; }

/* Italic gradient on em in headings */
h1 em, h2 em, h3 em {
  font-style:italic; font-weight:300;
  background:linear-gradient(125deg, var(--teal-2) 0%, #4FE5F0 55%, var(--teal-2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
h2 em { background:linear-gradient(125deg, var(--teal-2) 0%, #4FE5F0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Gold accent */
.g, h1 .g, h2 .g { color:var(--gold-2) !important; font-weight:600; }

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.container {
  max-width:var(--max); margin:0 auto;
  padding:0 clamp(18px,4vw,28px);
  position:relative; z-index:1;
}
.section {
  padding:clamp(68px,8vw,108px) 0;
  position:relative; z-index:1;
  scroll-margin-top:var(--nav-h);
}
.section + .section { border-top:1px solid rgba(255,255,255,.04); }

.section-head {
  text-align:center; max-width:720px;
  margin:0 auto clamp(32px,5vw,54px);
}

/* ── EYEBROW ────────────────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:.63rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal-2); margin-bottom:16px;
  justify-content:center;
}
.eyebrow::before,.eyebrow::after {
  content:''; width:26px; height:1px;
  background:linear-gradient(90deg,transparent,var(--teal-2));
}
.eyebrow::after { background:linear-gradient(90deg,var(--teal-2),transparent); }

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 24px; min-height:46px;
  border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--sans); font-size:.88rem; font-weight:700;
  letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
  text-decoration:none; position:relative; overflow:hidden;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
/* Sheen */
.btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-100%); transition:transform .55s ease;
}
.btn:hover::before { transform:translateX(100%); }

.btn.primary {
  background:var(--g-teal); color:#042818;
  border-color:var(--teal-border);
  box-shadow:0 6px 22px rgba(15,163,177,.3);
}
.btn.primary:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 38px rgba(15,163,177,.48);
}
.btn.ghost {
  background:rgba(255,255,255,.04); color:var(--ivory);
  border-color:rgba(255,255,255,.11);
}
.btn.ghost:hover {
  background:var(--teal-soft); border-color:var(--teal-border);
  color:var(--teal-2); transform:translateY(-2px);
}
.btn.gold {
  background:var(--g-gold); color:#1a0f00;
  border-color:var(--gold-border);
  box-shadow:0 6px 22px rgba(201,162,74,.22);
}
.btn.gold:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,162,74,.38); }

/* ── BADGE / TAG ────────────────────────────────────────────────── */
.badge,.tag {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.61rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; border:1px solid;
}
.badge.teal,.tag.teal { background:var(--teal-soft); color:var(--teal-2); border-color:var(--teal-border); }
.badge.gold,.tag.gold { background:var(--gold-soft); color:var(--gold-2); border-color:var(--gold-border); }
.badge.green { background:rgba(16,185,129,.1); color:#34D399; border-color:rgba(16,185,129,.25); }

/* ── SECTION TITLE ──────────────────────────────────────────────── */
.section-title { font-family:var(--serif); }
.section-title em {
  background:linear-gradient(130deg,var(--teal-2) 0%,#4FE5F0 100%) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.section-copy {
  font-size:1rem; line-height:1.85;
  color:var(--muted); max-width:640px; margin:0 auto;
}

/* ── REVEAL ANIMATION ───────────────────────────────────────────── */
.rv {
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.rv.vis { opacity:1; transform:none; }
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s} .rv.d4{transition-delay:.32s}
.rv.d5{transition-delay:.40s}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ── NAV ────────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:9990;
  height:var(--nav-h);
  background:rgba(8,15,28,.78);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.nav.scrolled {
  background:rgba(8,15,28,.97);
  border-bottom-color:var(--line);
  box-shadow:0 6px 30px rgba(0,0,0,.35);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; height:100%;
  max-width:var(--max); margin:0 auto;
  padding:0 clamp(18px,4vw,28px);
}

/* Brand */
.brand {
  display:flex; align-items:center; gap:11px;
  text-decoration:none; flex-shrink:0;
  padding:5px 8px; border-radius:10px;
  transition:background .2s;
}
.brand:hover { background:rgba(255,255,255,.04); }
.brand-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:url('profile-icon-nav.png') center/cover;
  border:1.5px solid var(--teal-border);
  box-shadow:0 0 0 2.5px rgba(8,15,28,1), 0 4px 10px rgba(0,0,0,.4);
}
.brand-text span {
  display:block; font-size:.9rem; font-weight:700;
  color:var(--ivory); letter-spacing:-.015em; line-height:1.2;
}
.brand-text small {
  display:block; font-family:var(--mono); font-size:.57rem;
  color:var(--teal-2); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}

/* Nav links */
.nav-links {
  display:flex; gap:2px; list-style:none;
  flex:1; justify-content:center;
}
.nav-links > li > a,
.nav-links > li > button {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 13px; font-size:.84rem; font-weight:500;
  color:var(--muted); border-radius:8px;
  background:transparent; border:none; cursor:pointer;
  font-family:var(--sans); letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav-links > li > a:hover,
.nav-links > li > button:hover { color:var(--ivory); background:rgba(255,255,255,.055); }
.nav-links > li > a.active,
.nav-links > li > button.active { color:var(--teal-2); background:var(--teal-soft); }

.nav-mega-chev {
  flex-shrink:0; opacity:.5;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s;
}
.nav-mega-parent.open > button .nav-mega-chev { transform:rotate(180deg); opacity:1; }

/* Mega panel */
.nav-mega {
  position:absolute;
  top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(8px);
  width:588px;
  background:linear-gradient(180deg,#0d2244 0%,#08162a 100%);
  border:1px solid rgba(15,163,177,.16);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 3px 0 rgba(15,163,177,.14) inset,
             0 36px 88px rgba(0,0,0,.75);
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s cubic-bezier(.16,1,.3,1),
             transform .22s cubic-bezier(.16,1,.3,1),
             visibility .22s;
  z-index:9999;
}
.nav-mega::before {
  content:''; position:absolute; top:-12px; left:0; right:0; height:14px;
}
.nav-mega::after {
  content:''; position:absolute; top:-5px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:#0d2244;
  border-top:1px solid rgba(15,163,177,.16);
  border-left:1px solid rgba(15,163,177,.16);
  border-radius:2px 0 0 0;
}
.nav-mega-parent.open > .nav-mega {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-mega-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav-mega-label {
  font-family:var(--mono); font-size:.59rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal-2);
}
.nav-mega-see-all {
  font-size:.77rem; font-weight:600; color:var(--teal-2);
  opacity:.7; transition:opacity .2s;
}
.nav-mega-see-all:hover { opacity:1; }

.nav-mega-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:8px; }

.nav-mega-item {
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 13px; border-radius:12px;
  text-decoration:none;
  transition:background .2s, box-shadow .2s;
}
.nav-mega-item:hover {
  background:rgba(15,163,177,.07);
  box-shadow:inset 0 0 0 1px rgba(15,163,177,.1);
}
.nav-mega-item:focus-visible { outline:2px solid var(--teal-2); outline-offset:2px; }
.nmi-icon {
  flex-shrink:0; width:34px; height:34px; border-radius:9px;
  background:rgba(15,163,177,.07); border:1px solid rgba(15,163,177,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:.98rem; margin-top:1px;
}
.nmi-title { font-size:.84rem; font-weight:600; color:var(--ivory); line-height:1.25; display:block; }
.nmi-desc  { font-size:.71rem; color:var(--muted); line-height:1.4; margin-top:3px; display:block; }

.nav-mega-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
  border-top:1px solid rgba(255,255,255,.04);
  background:rgba(0,0,0,.18);
}
.nav-mega-cred { display:flex; gap:6px; flex-wrap:wrap; }
.nav-mega-badge {
  font-family:var(--mono); font-size:.59rem; font-weight:700;
  padding:3px 9px; border-radius:20px;
  background:var(--teal-soft); border:1px solid var(--teal-border);
  color:var(--teal-2); letter-spacing:.04em;
}
.nav-mega-cta-btn {
  font-size:.78rem; font-weight:700; padding:7px 16px;
  border-radius:8px; background:var(--g-teal);
  color:#042818; text-decoration:none;
  transition:all .22s; white-space:nowrap;
}
.nav-mega-cta-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,163,177,.36); }

/* Nav CTA button */
.nav-cta { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-cta .btn { padding:8px 18px!important; font-size:.83rem!important; min-height:38px!important; height:38px!important; }

/* Scroll progress */
.nav-scroll-bar {
  position:absolute; top:0; left:0; height:2px;
  background:linear-gradient(90deg,var(--teal),var(--gold-2));
  width:0%; transition:width .1s linear; pointer-events:none; z-index:1;
}

/* Mobile hamburger */
@media(max-width:900px) {
  .nav-links { display:none!important; }
  .nav-cta   { display:none!important; }
  #navHamburger { display:flex!important; }
  .nav-inner { padding:0 20px; }
}

/* ── HERO ───────────────────────────────────────────────────────── */
.hero {
  padding-top:clamp(118px,14vw,168px);
  padding-bottom:clamp(54px,7vw,88px);
  position:relative; overflow:hidden; z-index:1;
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 52% at 22% 40%, rgba(15,163,177,.09),transparent 70%),
    radial-gradient(ellipse 55% 40% at 82% 18%, rgba(201,162,74,.05),transparent 65%);
}
.hero > * { position:relative; z-index:1; }

/* Float animation */
.hero-photo { animation:heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}

/* Status pill */
.status-pill {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px;
  background:var(--teal-soft); border:1px solid var(--teal-border);
  border-radius:999px; font-family:var(--mono);
  font-size:.67rem; font-weight:600; color:var(--teal-2);
  letter-spacing:.14em; text-transform:uppercase;
}
.live-dot {
  width:7px; height:7px; background:#22c55e;
  border-radius:50%; flex-shrink:0;
  animation:livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  50%     { box-shadow:0 0 0 8px rgba(34,197,94,0); }
}

/* Trust bar */
.hero-trust {
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:0!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:16px!important;
  overflow:hidden!important; padding:0!important;
}
.hero-trust > div {
  padding:16px 12px!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
  text-align:center!important;
}
.hero-trust > div:last-child { border-right:none!important; }
.hero-trust b {
  display:block!important; font-family:var(--serif)!important;
  font-size:clamp(1.2rem,2vw,1.6rem)!important; font-weight:500!important;
  color:var(--teal-2)!important; letter-spacing:-.02em!important;
  line-height:1!important; margin-bottom:5px!important;
}
.hero-trust span {
  font-size:.69rem!important; color:var(--muted)!important; line-height:1.35!important;
}

/* Photo frame */
.photo-frame {
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 0 0 1px var(--teal-border), 0 32px 80px rgba(0,0,0,.55);
  isolation:isolate;
}
.photo-frame::before {
  content:''; position:absolute; inset:0; z-index:3;
  border:1px solid rgba(255,255,255,.07); border-radius:var(--r-xl); pointer-events:none;
}
.photo-frame::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:36%; z-index:2;
  background:linear-gradient(180deg,transparent,rgba(8,15,28,.52)); pointer-events:none;
}

/* Photo chips */
.photo-chip {
  backdrop-filter:blur(20px) saturate(160%);
  transition:transform .3s ease, box-shadow .3s ease;
}
.photo-chip:hover { transform:scale(1.035)!important; box-shadow:0 14px 36px rgba(0,0,0,.5)!important; }

/* ── CARDS — unified ────────────────────────────────────────────── */
.why-card {
  background:var(--g-card)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;
  padding:clamp(22px,3vw,34px) clamp(18px,3vw,28px)!important;
  position:relative; overflow:hidden;
  transition:border-color .3s, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s!important;
}
.why-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  opacity:0; transition:opacity .3s;
}
.why-card:hover {
  border-color:var(--teal-border)!important;
  transform:translateY(-6px)!important;
  box-shadow:var(--sh-glow)!important;
}
.why-card:hover::before { opacity:1; }

/* Why stat number */
.why-stat {
  font-family:var(--serif)!important;
  font-size:clamp(2rem,3.5vw,3rem)!important;
  line-height:1!important; letter-spacing:-.03em!important;
  background:linear-gradient(130deg,var(--teal-2),var(--gold-2))!important;
  -webkit-background-clip:text!important; -webkit-text-fill-color:transparent!important;
  background-clip:text!important; margin-bottom:6px!important;
}

.exp-card {
  background:linear-gradient(180deg,var(--surface),rgba(13,30,53,.5));
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:all .35s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden;
}
.exp-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--gold-2)); opacity:.7;
}
.exp-card:hover { border-color:var(--teal-border); transform:translateY(-6px); box-shadow:var(--sh-glow); }

.testimonial {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); position:relative;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.testimonial::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--teal),var(--gold-2));
  opacity:0; transition:opacity .3s;
}
.testimonial::after {
  content:'"'; position:absolute; top:12px; right:20px;
  font-family:Georgia,serif; font-size:5rem; line-height:1;
  color:rgba(15,163,177,.05); pointer-events:none;
}
.testimonial:hover {
  border-color:var(--teal-border);
  transform:translateY(-4px); box-shadow:var(--sh);
}
.testimonial:hover::before { opacity:1; }

.metric {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; transition:all .3s;
}
.metric:hover { border-color:var(--teal-border); transform:translateY(-4px); }
.metric.featured {
  background:linear-gradient(135deg,rgba(15,163,177,.10),rgba(8,15,28,.5));
  border-color:var(--teal-border);
}
.metric .stat-value { text-shadow:0 0 30px rgba(15,163,177,.22); }

.cred-row {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  transition:all .25s;
}
.cred-row:hover { border-color:var(--teal-border); background:var(--surface-2); transform:translateX(3px); }
.cred-row.gold { background:linear-gradient(135deg,var(--gold-soft),var(--surface)); border-color:var(--gold-border); }
.cred-row.gold:hover { border-color:var(--gold-2); box-shadow:0 8px 24px rgba(201,162,74,.14); }

.faq-item {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .3s;
}
.faq-item:hover { border-color:var(--teal-border); }

/* Spotlight */
.spotlight {
  background:linear-gradient(135deg,rgba(15,163,177,.065),rgba(201,162,74,.04));
  border:1px solid var(--teal-border);
  border-radius:var(--r-xl); position:relative; overflow:hidden;
}
.spotlight::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--teal-2),var(--gold-2),transparent);
}

/* ── TIMELINE ───────────────────────────────────────────────────── */
.timeline { position:relative; padding-left:40px; overflow:visible!important; }
.timeline::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px;
  width:1px; background:linear-gradient(180deg,transparent,rgba(15,163,177,.25),transparent);
}
.tl-item {
  position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  margin-bottom:20px; transition:all .3s;
}
.tl-item:hover { border-color:var(--teal-border); transform:translateX(4px); }
.tl-item::before {
  content:''; position:absolute;
  left:-28px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; background:var(--teal);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--bg), 0 0 0 5.5px var(--teal-border);
}
.tl-item.current::before {
  background:var(--gold-2);
  box-shadow:0 0 0 4px var(--bg), 0 0 0 5.5px var(--gold-border), 0 0 16px var(--gold-2);
  animation:tlGold 2.4s ease-in-out infinite;
}
@keyframes tlGold {
  0%,100% { box-shadow:0 0 0 4px var(--bg),0 0 0 5.5px var(--gold-border),0 0 16px var(--gold-2); }
  50%     { box-shadow:0 0 0 4px var(--bg),0 0 0 5.5px var(--gold-2),0 0 28px var(--gold-2); }
}

/* ── COMPANIES STRIP ────────────────────────────────────────────── */
.companies { padding:40px 0; position:relative; }
.companies::before,.companies::after {
  content:''; position:absolute; left:10%; right:10%; height:1px;
}
.companies::before { top:0; background:linear-gradient(90deg,transparent,rgba(15,163,177,.12),transparent); }
.companies::after  { bottom:0; background:linear-gradient(90deg,transparent,rgba(201,162,74,.08),transparent); }
.company {
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; font-size:.83rem; font-weight:600; color:var(--ivory);
  transition:all .25s; white-space:nowrap;
}
.company:hover {
  border-color:var(--teal-border); background:var(--surface-2);
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(15,163,177,.12);
}

/* ── KHUB CARDS ─────────────────────────────────────────────────── */
.khub-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:all .3s; }
.khub-card:hover { border-color:var(--teal-border); transform:translateY(-3px); box-shadow:0 16px 48px rgba(0,0,0,.2),0 0 0 1px rgba(15,163,177,.07); }

/* ── PARTNER CARDS ──────────────────────────────────────────────── */
.partner-card { transition:all .35s cubic-bezier(.16,1,.3,1)!important; }
.partner-card:hover { transform:translateY(-5px)!important; box-shadow:0 20px 56px rgba(0,0,0,.3)!important; }

/* ── CONTACT ────────────────────────────────────────────────────── */
.contact-option {
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; transition:all .25s;
}
.contact-option:hover { border-color:var(--teal-border); background:var(--surface-2); transform:translateX(4px); }

/* ── FOOTER ─────────────────────────────────────────────────────── */
.site-footer-v14 {
  border-top:1px solid rgba(15,163,177,.08);
  background:linear-gradient(180deg,rgba(8,15,28,.55) 0%,rgba(3,7,15,.98) 100%);
}
.sf14-top { padding:52px 0 44px; }
.sf14-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;
  gap:0 36px; align-items:start;
}
.sf14-heading {
  font-family:var(--mono); font-size:.60rem; font-weight:700;
  letter-spacing:.20em; text-transform:uppercase; color:var(--teal-2);
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid rgba(15,163,177,.10);
}
.sf14-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
.sf14-links a {
  font-size:.83rem; color:var(--muted); text-decoration:none;
  transition:color .2s, transform .2s; display:block;
}
.sf14-links a:hover { color:var(--ivory); transform:translateX(3px); }
.sf14-cta {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  width:100%!important; padding:10px 20px!important; border-radius:var(--r-sm)!important;
  background:var(--g-teal)!important; color:#042818!important;
  font-size:.83rem!important; font-weight:700!important;
  text-decoration:none!important;
  box-shadow:0 4px 16px rgba(15,163,177,.25)!important;
  transition:all .25s!important; margin-bottom:10px!important;
}
.sf14-cta:hover { transform:translateY(-2px)!important; box-shadow:0 8px 24px rgba(15,163,177,.38)!important; }
.sf14-bottom {
  border-top:1px solid rgba(255,255,255,.05); padding:16px 0;
}
.sf14-bottom-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  font-size:.74rem; color:var(--subtle);
}
.sf14-bottom-links { display:flex; gap:18px; }
.sf14-bottom-links a { color:var(--subtle); transition:color .2s; }
.sf14-bottom-links a:hover { color:var(--muted); }
.sf14-avatar {
  width:40px!important; height:40px!important;
  border-radius:12px!important;
  background:url('profile-icon-nav.png') center/cover!important;
  border:1.5px solid rgba(15,163,177,.25)!important;
  box-shadow:0 0 0 3px rgba(8,15,28,.9),0 4px 16px rgba(15,163,177,.15)!important;
  flex-shrink:0!important;
}
.sf14-social {
  width:32px!important; height:32px!important; border-radius:8px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:var(--muted)!important; display:inline-flex!important;
  align-items:center!important; justify-content:center!important;
  font-size:.8rem!important; font-weight:700!important;
  text-decoration:none!important; transition:all .2s!important;
}
.sf14-social:hover {
  background:var(--teal-soft)!important;
  border-color:var(--teal-border)!important;
  color:var(--teal-2)!important; transform:translateY(-2px)!important;
}

/* ── FORMS ──────────────────────────────────────────────────────── */
input,select,textarea {
  font-family:var(--sans); background:rgba(255,255,255,.04);
  border:1px solid var(--line-2); color:var(--ivory);
  border-radius:var(--r-sm); padding:11px 14px;
  font-size:.9rem; font-weight:500; outline:none; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder,textarea::placeholder { color:var(--subtle); }
input:focus,select:focus,textarea:focus {
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,163,177,.12);
}
textarea { min-height:90px; resize:vertical; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:1100px) {
  .sf14-grid { grid-template-columns:1fr 1fr 1fr; gap:28px; }
  .sf14-brand { grid-column:1/4; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .sf14-logo { grid-column:1/3; }
}
@media(max-width:900px) {
  .hero-photo { animation:none; }
}
@media(max-width:700px) {
  .hero-trust { grid-template-columns:1fr 1fr!important; }
  .hero-trust > div:nth-child(2) { border-right:none!important; }
  .hero-trust > div:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.06)!important; }
  .sf14-grid { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .sf14-brand { grid-column:1/3; display:block; }
  .sf14-bottom-inner { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media(max-width:480px) {
  .sf14-grid { grid-template-columns:1fr; }
}

/* ── Engagement Pathways - Featured card (recruiter) ── */
.p26-path-card--featured {
  background: linear-gradient(135deg, rgba(201,162,74,.08), rgba(15,163,177,.06)) !important;
  border-color: rgba(201,162,74,.28) !important;
  position: relative;
}
.p26-path-card--featured::before {
  content: '👔 For recruiters & hiring teams';
  position: absolute;
  top: -1px; left: 16px;
  font-family: var(--mono,'DM Mono',monospace);
  font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-2,#E8C97A);
  background: linear-gradient(135deg, rgba(201,162,74,.18), rgba(8,15,28,.9));
  border: 1px solid rgba(201,162,74,.30);
  border-top: none;
  padding: 4px 10px;
  border-radius: 0 0 8px 8px;
}
.p26-path-card--featured:hover {
  border-color: rgba(201,162,74,.45) !important;
  box-shadow: 0 12px 44px rgba(201,162,74,.14) !important;
}

/* ── Open to full-time signal in status pill ── */
.status-pill .pill-sep {
  opacity: .35;
  margin: 0 4px;
}

/* ═══════════════════════════════════════════════════════════
   V16 TARGETED UI FIXES — Screenshots 2025-05-23
═══════════════════════════════════════════════════════════ */

/* ── FIX 1: "What brings you here?" heading layout ────────
   Problem: p26-pathways-head is a 2-column grid.
   The heading sits left, lead text floats right — looks broken.
   Fix: Stack vertically, centred, lead below heading.
─────────────────────────────────────────────────────────── */
.p26-pathways-head {
  display: block !important;
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto clamp(32px,4vw,48px) !important;
}
.p26-kicker {
  justify-content: center !important;
  display: inline-flex !important;
  margin-bottom: 16px !important;
}
.p26-pathways h2 {
  font-size: clamp(2.4rem,5vw,4rem) !important;
  margin-bottom: 18px !important;
}
.p26-pathways-lead {
  max-width: 620px !important;
  margin: 0 auto !important;
  font-size: clamp(.96rem,1.25vw,1.08rem) !important;
}

/* ── FIX 2: 5 pathway cards — proper responsive grid ──────
   Problem: grid-template-columns:repeat(4,1fr) → 5th card
   orphans to its own row at full width. Ugly.
   Fix: 5 columns on wide desktop, 2-col on medium, 1-col mobile.
   The recruiter card is first and gets visual emphasis.
─────────────────────────────────────────────────────────── */
.p26-path-grid {
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 12px !important;
}
/* Scale to 3-col then 2-col as viewport narrows */
@media (max-width: 1280px) {
  .p26-path-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width: 900px) {
  .p26-path-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 580px) {
  .p26-path-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Make the featured (recruiter) card slightly taller on desktop */
.p26-path-card--featured {
  min-height: 320px !important;
}

/* ── FIX 3: About section — reduce wasted space ───────────
   Problem: profile-book-grid is 50/50 split — photo takes
   too much space and the text feels cramped beside it.
   Fix: Give text column more width, reduce photo column.
   Also tighten the about-profile-shell padding.
─────────────────────────────────────────────────────────── */
#about .about-profile-grid {
  grid-template-columns: minmax(0,1fr) minmax(280px,380px) !important;
  gap: clamp(24px,3.5vw,44px) !important;
}
/* Tighten the shell padding */
.about-profile-shell .about-editorial-layout,
.about-profile-shell .about-profile-grid,
.about-profile-shell > .profile-book-grid {
  padding: clamp(24px,4vw,48px) !important;
}
/* Reduce profile book card width so photo doesn't dominate */
.about-profile-visual .profile-book-card {
  width: min(360px, 88vw) !important;
}
.about-profile-visual .profile-book-stage {
  min-height: auto !important;
  max-width: 380px !important;
}
/* Text should feel airy not cramped */
#about .about-profile-copy h2 {
  font-size: clamp(2rem,3.8vw,3rem) !important;
}
/* About meta tags — wrap naturally */
#about .about-meta {
  white-space: normal !important;
  flex-wrap: wrap !important;
}

/* ── FIX 4: Service cards — icon alignment ────────────────
   Problem: exp-card-tag (text label) is on its own line,
   then exp-icon (emoji box) on next line → icon appears
   to "hang" on a separate row, not connected to card title.
   Fix: Put tag and icon together in a flex row,
   then title + content below.
─────────────────────────────────────────────────────────── */
.exp-card {
  display: flex !important;
  flex-direction: column !important;
}
.exp-card-tag {
  /* Reorder: we'll use a wrapper via CSS order trick */
  order: 0 !important;
  margin-bottom: 14px !important;
}
.exp-icon {
  order: 1 !important;
  margin-bottom: 16px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 1.5rem !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
}
.exp-card h3 {
  order: 2 !important;
}
.exp-card > p {
  order: 3 !important;
}
.exp-skills {
  order: 4 !important;
}
/* Better: put tag INLINE with icon using a header row */
.exp-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── FIX 5: Heading typography — desktop wrapping ─────────
   Ensure all major headings don't orphan single words.
─────────────────────────────────────────────────────────── */
h1, h2, .section-title, .p26-pathways h2 {
  text-wrap: balance !important;
}
/* Focused Services section heading */
#services .section-title {
  font-size: clamp(2rem,4.2vw,3.4rem) !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Partners section heading */
#partners .partners-sub-title {
  font-size: clamp(1.55rem,2.2vw,2.05rem) !important;
}
/* Why section heading */
#why .section-title {
  font-size: clamp(1.85rem,3.6vw,3rem) !important;
}
/* Career section */
#career .section-title {
  font-size: clamp(1.8rem,3.4vw,2.8rem) !important;
}

/* ── FIX 6: About meta badges — desktop single row ────────
   Ensure they wrap cleanly, no overflow
─────────────────────────────────────────────────────────── */
.about-meta {
  gap: 7px !important;
}
.about-meta span {
  font-size: clamp(.62rem,.68rem,.72rem) !important;
  padding: 5px 9px !important;
  white-space: nowrap !important;
}

/* ── Responsive cleanup ───────────────────────────────────── */
@media (max-width: 920px) {
  #about .about-profile-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .about-profile-visual .profile-book-stage {
    margin: 0 auto !important;
  }
  #about .about-meta {
    justify-content: center !important;
  }
}
@media (max-width: 640px) {
  .p26-pathways-lead {
    font-size: .95rem !important;
  }
  #services .section-title {
    font-size: clamp(1.75rem,9vw,2.8rem) !important;
  }
}

/* ── exp-card-header: icon + tag inline row ─────────────── */
.exp-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
.exp-card-header .exp-icon {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  order: unset !important;
}
.exp-card-header .exp-card-tag {
  margin-bottom: 0 !important;
  order: unset !important;
}
/* Remove old order values when header is used */
.exp-card:has(.exp-card-header) .exp-card-tag,
.exp-card:has(.exp-card-header) .exp-icon {
  order: unset !important;
  margin-bottom: 0 !important;
}