@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'DM Sans',system-ui,sans-serif;color:#1a1f2e;background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font-family:inherit}

:root {
  --navy: #0B1F3A;  --navy-deep: #060e1e;  --navy-mid: #112340;
  --forest: #163B2C;  --forest-mid: #1f5040;  --sage: #4D9E78;
  --sky: #3B82C4;  --amber: #C9943A;
  --ink: #1a1f2e;  --ink-mid: #374151;  --ink-light: #6b7280;
  --border: #e5e7eb;  --bg: #f9fafb;  --bg-mid: #f3f4f6;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --max: 1180px;  --g: 64px;
  --ease: cubic-bezier(.4,0,.2,1);  --t: .22s var(--ease);
  --sh: 0 2px 14px rgba(0,0,0,.07);
  --sh-lg: 0 12px 44px rgba(0,0,0,.13);
  --sh-xl: 0 28px 80px rgba(0,0,0,.2);
  --r: 2px; --rm: 6px; --rl: 10px; --rx: 18px;
}

h1,h2,h3,h4 { font-family: var(--serif); line-height: 1.08; letter-spacing: -.02em; color: var(--ink) }
h1 { font-size: clamp(46px,6.5vw,90px); font-weight: 700 }
h2 { font-size: clamp(36px,4.8vw,62px); font-weight: 600 }
h3 { font-size: clamp(26px,3.2vw,42px); font-weight: 600 }
h4 { font-size: clamp(18px,2.2vw,26px); font-weight: 600 }
p  { color: var(--ink-light); font-size: 16px; line-height: 1.82 }
.lead { font-size: 19px; line-height: 1.76; color: var(--ink-mid); font-weight: 300 }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--g) }
.section    { padding: 110px 0 }
.section-sm { padding: 72px 0 }

/* ── GRID ──────────────────────── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px }

/* ── EYEBROW ───────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 20px
}
.eyebrow::before {
  content: ''; width: 30px; height: 1px;
  background: linear-gradient(90deg,var(--sage),transparent); flex-shrink: 0
}
.eyebrow-center { justify-content: center }
.eyebrow-center::before { display: none }

/* ── BUTTONS ───────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  padding: 14px 32px; border-radius: var(--r); transition: all var(--t);
  cursor: pointer; font-family: var(--sans); border: none; white-space: normal;
  text-align: center; justify-content: center; max-width: 100%
}
.btn-primary  { background: var(--navy); color: #fff }
.btn-primary:hover { background: var(--navy-mid); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(11,31,58,.35) }
.btn-sage     { background: var(--sage); color: #fff }
.btn-sage:hover { background: #3d8a65; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(77,158,120,.35) }
.btn-forest   { background: var(--forest); color: #fff }
.btn-forest:hover { background: var(--forest-mid); transform: translateY(-2px) }
.btn-outline  { border: 1.5px solid var(--navy); color: var(--navy); background: transparent }
.btn-outline:hover { background: var(--navy); color: #fff }
.btn-outline-w {
  border: 1.5px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06); backdrop-filter: blur(10px)
}
.btn-outline-w:hover { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.14); color: #fff }
.btn-sm { padding: 9px 22px; font-size: 11.5px }
.btn-lg { padding: 17px 44px; font-size: 13.5px }

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all .35s var(--ease) }
#navbar.transparent  { background: transparent }
#navbar.scrolled     { background: rgba(255,255,255,.97); backdrop-filter: blur(24px); box-shadow: 0 1px 0 rgba(0,0,0,.07) }

.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--g);
  height: 76px; display: flex; align-items: center; justify-content: space-between
}
.nav-logo-img { height: 40px; width: auto; object-fit: contain; transition: filter var(--t) }
#navbar.transparent .nav-logo-img       { filter: brightness(0) invert(1) }
#navbar.transparent.scrolled .nav-logo-img { filter: none }

.nav-menu  { display: flex; align-items: center }
.nav-item  { position: relative }
.nav-link  {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500; color: var(--ink-mid);
  padding: 8px 14px; border-radius: var(--r); transition: all var(--t)
}
.nav-link:hover, .nav-link.active { color: var(--navy) }
#navbar.transparent     .nav-link { color: rgba(255,255,255,.72) }
#navbar.transparent     .nav-link:hover { color: #fff; background: rgba(255,255,255,.08) }
#navbar.transparent.scrolled .nav-link { color: var(--ink-mid) }
#navbar.transparent.scrolled .nav-link:hover { color: var(--navy); background: var(--bg) }
.nav-caret { width: 10px; height: 10px; stroke: currentColor; fill: none; transition: transform var(--t) }
.nav-item.has-dropdown:hover .nav-caret { transform: rotate(180deg) }
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: #fff; border-radius: var(--rl); border: 1px solid var(--border);
  box-shadow: var(--sh-xl); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .2s var(--ease)
}
.nav-item.has-dropdown:hover .nav-dropdown { opacity: 1; visibility: visible; transform: none }
.nav-drop-item { display: block; padding: 9px 13px; border-radius: var(--rm); font-size: 13px; color: var(--ink-mid); transition: all var(--t) }
.nav-drop-item:hover { background: var(--bg); color: var(--navy) }
.nav-actions { display: flex; align-items: center; gap: 12px }
.nav-tel { font-size: 13px; color: var(--ink-light); font-weight: 500; transition: color var(--t) }
.nav-tel:hover { color: var(--navy) }
#navbar.transparent .nav-tel { color: rgba(255,255,255,.45) }
#navbar.transparent.scrolled .nav-tel { color: var(--ink-light) }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer }
.nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: all var(--t) }
#navbar.transparent .nav-burger span { background: #fff }
#navbar.transparent.scrolled .nav-burger span { background: var(--ink) }
.hidden-mobile { display: flex }

/* ══════════════════════════════════════
   HERO  — full cinematic BG
══════════════════════════════════════ */
.hero {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center; padding-top: 76px
}
.hero-bg-img {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?auto=format&fit=crop&w=1920&q=85');
  background-size: cover; background-position: center 42%;
  animation: heroZoom 18s ease-out both
}
@keyframes heroZoom { from { transform: scale(1.08) } to { transform: scale(1.0) } }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(108deg,rgba(6,14,28,.91) 0%,rgba(11,31,58,.83) 52%,rgba(22,59,44,.58) 100%)
}
.hero-grain {
  position: absolute; inset: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px
}
.hero-inner { position: relative; z-index: 2; padding: 90px 0 110px; width: 100% }
.hero-layout { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: center }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(77,158,120,.12); border: 1px solid rgba(77,158,120,.28);
  color: rgba(255,255,255,.72); font-size: 10.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 100px; margin-bottom: 28px;
  letter-spacing: .1em; text-transform: uppercase
}
.hero-pulse {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sage);
  animation: pulse 2.2s infinite; flex-shrink: 0
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.5)} }
.hero h1 { color: #fff; margin-bottom: 20px; text-shadow: 0 4px 36px rgba(0,0,0,.3) }
.hero h1 em { font-style: italic; color: var(--sage) }
.hero .lead { color: rgba(255,255,255,.62); margin-bottom: 38px; max-width: 520px }
.hero-btns  { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px }
.hero-divider { width: 1px; height: 36px; background: rgba(255,255,255,.18); align-self: center }
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.1); padding-top: 36px }
.hs-item { padding-right: 30px }
.hs-item + .hs-item { padding-left: 30px; border-left: 1px solid rgba(255,255,255,.1) }
.hs-num { font-family: var(--serif); font-size: 54px; color: #fff; line-height: 1; font-weight: 700; letter-spacing: -.03em }
.hs-num sup { font-size: .45em; vertical-align: super }
.hs-lbl { font-size: 10px; color: rgba(255,255,255,.36); font-weight: 500; margin-top: 5px; text-transform: uppercase; letter-spacing: .09em }

.hero-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--rx); overflow: hidden;
  backdrop-filter: blur(20px); box-shadow: 0 36px 88px rgba(0,0,0,.32)
}
.hero-photo { aspect-ratio: .82; overflow: hidden; position: relative }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block }
.hero-photo::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 38%;
  background: linear-gradient(0deg,rgba(6,14,28,.72),transparent)
}
.hero-card-body { padding: 20px 22px 24px }
.hc-name  { font-family: var(--serif); font-size: 20px; color: #fff; font-weight: 600; margin-bottom: 3px }
.hc-title { color: rgba(255,255,255,.4); font-size: 12px; margin-bottom: 14px }
.hc-tags  { display: flex; flex-wrap: wrap; gap: 5px }
.hct { background: rgba(255,255,255,.06); color: rgba(255,255,255,.42); font-size: 10px; padding: 4px 10px; border-radius: 100px; border: 1px solid rgba(255,255,255,.1); font-weight: 500 }

/* ══════════════════════════════════════
   STAT BAR — fleet BG
══════════════════════════════════════ */
.stat-bar { position: relative; padding: 34px 0; overflow: hidden }
.stat-bar-photo {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1519003722824-194d4455a60c?auto=format&fit=crop&w=1600&q=50') center 60%/cover
}
.stat-bar-overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(22,59,44,.98),rgba(11,31,58,.96)) }
.stat-bar-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--g);
  display: flex; justify-content: space-around; align-items: center; position: relative; z-index: 1
}
.sb-item { text-align: center }
.sb-num { font-family: var(--serif); font-size: 40px; color: #fff; font-weight: 700; line-height: 1; letter-spacing: -.02em }
.sb-num span { font-size: .65em }
.sb-lbl { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em }
.sb-div { width: 1px; height: 44px; background: rgba(255,255,255,.1) }

/* ══════════════════════════════════════
   4-IMAGE BAND
══════════════════════════════════════ */
.img-band { display: grid; grid-template-columns: repeat(4,1fr); height: 290px; overflow: hidden }
.img-band-item { overflow: hidden; position: relative }
.img-band-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease); filter: brightness(.82) saturate(.9)
}
.img-band-item:hover img { transform: scale(1.09); filter: brightness(1) saturate(1.08) }
.img-band-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg,rgba(11,31,58,.52) 0%,transparent 55%)
}

/* ══════════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════════ */
.plain-intro { max-width: 720px; margin: 0 auto; text-align: center }
.plain-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 50px }
.plain-step {
  background: #fff; border: 1px solid var(--border); border-radius: var(--rl);
  padding: 28px 24px; min-height: 100%; transition: all var(--t)
}
.plain-step:hover { border-color: rgba(77,158,120,.24); box-shadow: var(--sh-lg); transform: translateY(-4px) }
.plain-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--rm);
  background: rgba(77,158,120,.1); color: var(--sage);
  font-size: 11px; font-weight: 700; margin-bottom: 18px
}
.plain-step h4 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin-bottom: 8px }
.plain-step p { font-size: 13px; line-height: 1.72 }

.prob-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 17px 20px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--rl); margin-bottom: 10px;
  transition: all var(--t); position: relative; overflow: hidden
}
.prob-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg,var(--sage),var(--sky));
  transform: scaleY(0); transform-origin: top; transition: transform .38s var(--ease)
}
.prob-item:hover { border-color: rgba(77,158,120,.25); box-shadow: var(--sh); transform: translateX(4px) }
.prob-item:hover::before { transform: scaleY(1) }
.prob-icon { width: 38px; height: 38px; border-radius: var(--rm); background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0 }
.prob-item h5 { font-family: var(--sans); font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--ink) }
.prob-item p  { font-size: 12.5px; line-height: 1.65 }

/* DATA PANEL */
.dp { background: var(--navy); border-radius: var(--rx); padding: 38px; position: relative; overflow: hidden }
.dp-photo {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=50') center/cover;
  opacity: .05
}
.dp-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 80%,rgba(22,59,44,.75),transparent 55%) }
.dp-in { position: relative; z-index: 1 }
.dp-in h4 { color: rgba(255,255,255,.38); font-family: var(--sans); font-size: 10.5px; font-weight: 600; margin-bottom: 28px; letter-spacing: .14em; text-transform: uppercase }
.mr { margin-bottom: 20px }
.mh { display: flex; justify-content: space-between; margin-bottom: 7px }
.mh span:first-child { color: rgba(255,255,255,.48); font-size: 12.5px }
.mh span:last-child  { color: var(--sage); font-size: 12.5px; font-weight: 700 }
.mt { height: 3px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden }
.mf { height: 100%; border-radius: 3px; background: linear-gradient(90deg,var(--forest-mid),var(--sage)); transition: width 1.6s cubic-bezier(.4,0,.2,1) }
.mf.sky { background: linear-gradient(90deg,#1e3a5f,var(--sky)) }
.dp-callout {
  margin-top: 30px; padding: 18px 20px;
  background: rgba(77,158,120,.1); border: 1px solid rgba(77,158,120,.18); border-radius: var(--rm)
}
.dp-callout p       { color: rgba(255,255,255,.38); font-size: 10.5px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .07em }
.dp-callout strong  { color: #fff; font-family: var(--serif); font-size: 22px; font-weight: 600 }

/* ══════════════════════════════════════
   DRIVER JOURNEY + FIT
══════════════════════════════════════ */
.journey-section { background: #fff }
.journey-flow {
  display: grid; grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 14px; margin-top: 54px; align-items: stretch
}
.journey-flow.compact { margin-top: 46px }
.journey-node {
  position: relative; min-height: 132px; padding: 18px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rl);
  display: flex; flex-direction: column; justify-content: space-between
}
.journey-node:not(:last-child)::after {
  content: '>'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  color: rgba(11,31,58,.28); font-family: var(--sans); font-weight: 700; z-index: 2
}
.journey-node.leak {
  background: #fff; border-color: rgba(201,148,58,.46);
  box-shadow: inset 0 3px 0 rgba(201,148,58,.72)
}
.journey-label { font-family: var(--sans); font-size: 13px; color: var(--ink); font-weight: 700; line-height: 1.25 }
.journey-note { color: var(--ink-light); font-size: 11.5px; line-height: 1.5; margin-top: 10px }
.leak-tag {
  display: inline-flex; width: fit-content; margin-top: 12px; padding: 4px 8px;
  border-radius: 100px; background: rgba(201,148,58,.12); color: #8a5d12;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em
}
.fit-list { display: flex; flex-direction: column; gap: 12px }
.fit-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--rl);
  color: var(--ink-mid); font-size: 14px; font-weight: 500
}
.fit-item span {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 8px;
  background: var(--sage); box-shadow: 0 0 0 5px rgba(77,158,120,.12); flex-shrink: 0
}

/* ══════════════════════════════════════
   FRAMEWORK CARDS
══════════════════════════════════════ */
.fw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px }
.fw-card {
  border: 1px solid var(--border); border-radius: var(--rl);
  padding: 30px 28px; background: #fff; position: relative; overflow: hidden; transition: all var(--t)
}
.fw-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,var(--navy),var(--sage));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease)
}
.fw-card:hover { border-color: rgba(77,158,120,.2); box-shadow: var(--sh-lg); transform: translateY(-5px) }
.fw-card:hover::after { transform: scaleX(1) }
.fw-num { font-family: var(--serif); font-size: 58px; color: var(--bg-mid); line-height: 1; margin-bottom: 12px; font-weight: 700 }
.fw-card h4 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--ink) }
.fw-card p  { font-size: 13px; line-height: 1.72 }
.fw-dark { background: var(--navy); border-color: transparent }
.fw-dark .fw-num { color: rgba(255,255,255,.05) }
.fw-dark h4 { color: #fff }
.fw-dark p  { color: rgba(255,255,255,.44) }
.fw-dark::after { background: linear-gradient(90deg,var(--sage),var(--sky)) }

/* ══════════════════════════════════════
   FULL-BLEED IMAGE DIVIDER
══════════════════════════════════════ */
.img-divider { width: 100%; height: 340px; overflow: hidden; position: relative }
.img-divider img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.72) saturate(.9); transition: transform 8s ease
}
.img-divider:hover img { transform: scale(1.03) }
.img-divider::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,rgba(255,255,255,.5) 0%,transparent 25%,transparent 75%,rgba(255,255,255,.5) 100%)
}

/* ══════════════════════════════════════
   WHY SECTION — deep forest/highway BG
══════════════════════════════════════ */
.why-section { position: relative; overflow: hidden }
.why-photo {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1532187643603-ba119ca4109e?auto=format&fit=crop&w=1600&q=70') center 55%/cover
}
.why-overlay { position: absolute; inset: 0; background: linear-gradient(115deg,rgba(22,59,44,.97) 0%,rgba(11,31,58,.96) 60%,rgba(6,14,28,.98) 100%) }
.wp {
  display: flex; gap: 16px; padding: 20px 22px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--rl); margin-bottom: 12px; transition: all var(--t)
}
.wp:hover { background: rgba(255,255,255,.08); transform: translateX(5px) }
.wp-icon { width: 42px; height: 42px; border-radius: var(--rm); background: rgba(77,158,120,.18); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0 }
.wp h5 { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px }
.wp p  { color: rgba(255,255,255,.42); font-size: 13px }

.wq-box {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--rx); padding: 48px; position: relative; overflow: hidden
}
.wq-mark { font-family: var(--serif); font-size: 120px; line-height: .7; color: rgba(255,255,255,.06); display: block; margin-bottom: 16px }
.wq-box blockquote { font-family: var(--serif); font-size: 27px; color: #fff; line-height: 1.48; margin-bottom: 30px; font-style: italic }
.wq-div { width: 38px; height: 1.5px; background: var(--sage); margin-bottom: 22px }
.wq-author { display: flex; align-items: center; gap: 14px }
.wq-av { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.15); flex-shrink: 0 }
.wq-av img { width: 100%; height: 100%; object-fit: cover; object-position: center top }
.wq-author strong { font-family: var(--sans); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.84); display: block }
.wq-author span   { font-size: 12px; color: rgba(255,255,255,.36) }

/* ══════════════════════════════════════
   IMAGE SPLIT BAND
══════════════════════════════════════ */
.split-band { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px }
.split-img { overflow: hidden; position: relative }
.split-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease) }
.split-img:hover img { transform: scale(1.04) }
.split-content { display: flex; flex-direction: column; justify-content: center; padding: 72px }
.split-dark   { background: var(--navy) }
.split-forest { background: var(--forest) }
.split-light  { background: var(--bg) }

/* ══════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════ */
.svc-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  padding: 88px 0; border-bottom: 1px solid var(--bg-mid)
}
.svc-block:last-child { border-bottom: none }
.svc-block.rev .svc-vis { order: -1 }
.svc-big-num { font-family: var(--serif); font-size: 96px; color: var(--bg-mid); line-height: 1; margin-bottom: -22px; font-weight: 700; letter-spacing: -.03em }
.svc-vis { border-radius: var(--rx); overflow: hidden; aspect-ratio: 4/3; position: relative; box-shadow: var(--sh-xl) }
.svc-vis img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease) }
.svc-vis:hover img { transform: scale(1.05) }
.svc-vis-cap {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 22px;
  background: linear-gradient(0deg,rgba(11,31,58,.82),transparent)
}
.svc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(77,158,120,.22); border: 1px solid rgba(77,158,120,.35);
  color: rgba(255,255,255,.86); font-size: 10px; font-weight: 600;
  padding: 5px 12px; border-radius: 100px; letter-spacing: .1em; text-transform: uppercase
}
.checklist { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 28px }
.ci { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-mid) }
.ci-dot { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: rgba(77,158,120,.12); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: var(--sage); margin-top: 3px }

/* ══════════════════════════════════════
   PAGE HERO — with BG image
══════════════════════════════════════ */
.page-hero { position: relative; padding: 158px 0 88px; overflow: hidden }
.ph-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.32) saturate(.8) }
.ph-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(11,31,58,.62) 0%,rgba(11,31,58,.9) 100%) }
.ph-inner { position: relative; z-index: 2; max-width: 700px }
.page-hero h1   { color: #fff; margin-bottom: 18px }
.page-hero .lead { color: rgba(255,255,255,.56); max-width: 540px }
.page-hero .eyebrow { color: rgba(255,255,255,.36) }
.page-hero .eyebrow::before { background: rgba(255,255,255,.18) }
.bc { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.32); margin-bottom: 24px }
.bc a { color: rgba(255,255,255,.32); transition: color var(--t) }
.bc a:hover { color: rgba(255,255,255,.7) }
.bc span { color: rgba(255,255,255,.14) }

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
.about-photo { border-radius: var(--rx); overflow: hidden; aspect-ratio: .88; position: relative; box-shadow: var(--sh-xl) }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block }
.about-photo::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 42%;
  background: linear-gradient(0deg,rgba(11,31,58,.62),transparent)
}
.sc-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; margin-bottom: 16px }
.sc-box h5 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--sage); margin-bottom: 14px }
.sc-item { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px; font-size: 13px; color: var(--ink-mid) }
.sc-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sage); flex-shrink: 0; margin-top: 7px }
.sc-navy { background: var(--navy); border-color: var(--navy) }
.sc-navy .sc-dot { background: rgba(255,255,255,.25) }
.sc-navy .sc-item { color: rgba(255,255,255,.48) }
.sc-navy h5 { color: rgba(255,255,255,.34) }

/* ══════════════════════════════════════
   INSIGHTS
══════════════════════════════════════ */
.post-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; transition: all var(--t); display: flex; flex-direction: column }
.post-card:hover { border-color: rgba(77,158,120,.22); box-shadow: var(--sh-lg); transform: translateY(-5px) }
.pc-thumb { height: 210px; overflow: hidden; position: relative; background: var(--bg) }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease) }
.post-card:hover .pc-thumb img { transform: scale(1.08) }
.pc-thumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient(0deg,rgba(11,31,58,.45),transparent) }
.pc-body { padding: 24px; flex: 1; display: flex; flex-direction: column }
.pc-cat  { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-bottom: 9px }
.pc-title   { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; margin-bottom: 9px }
.pc-excerpt { font-size: 13px; color: var(--ink-light); line-height: 1.72; flex: 1 }
.pc-meta    { display: flex; gap: 10px; font-size: 11px; color: var(--ink-light); margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); font-weight: 500 }

.fp { border: 1px solid var(--border); border-radius: var(--rx); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 44px; transition: all var(--t) }
.fp:hover { box-shadow: var(--sh-xl); border-color: rgba(77,158,120,.2) }
.fp-thumb { overflow: hidden; min-height: 380px; position: relative }
.fp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease) }
.fp:hover .fp-thumb img { transform: scale(1.05) }
.fp-label  { display: inline-block; background: rgba(77,158,120,.1); color: var(--sage); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 16px }
.fp-body   { padding: 52px; display: flex; flex-direction: column; justify-content: center }
.fp-body h3 { font-family: var(--sans); font-size: 22px; font-weight: 600; margin-bottom: 12px; line-height: 1.45; color: var(--ink) }
.fp-body p  { margin-bottom: 26px; font-size: 15px }
.cat-bar    { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 44px }
.cat-btn { padding: 7px 18px; border-radius: 100px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--border); color: var(--ink-mid); cursor: pointer; transition: all var(--t); background: #fff }
.cat-btn:hover, .cat-btn.active { background: var(--navy); color: #fff; border-color: var(--navy) }

/* ══════════════════════════════════════
   POST BODY
══════════════════════════════════════ */
.post-body { max-width: 720px; margin: 0 auto }
.post-body h2, .post-body h3 { margin: 40px 0 14px }
.post-body p  { margin-bottom: 22px; font-size: 17px; line-height: 1.88; color: var(--ink-mid) }
.post-body ul, .post-body ol { margin: 14px 0 22px 22px; list-style: revert }
.post-body li { font-size: 16px; color: var(--ink-mid); margin-bottom: 7px; line-height: 1.77 }
.post-body blockquote { border-left: 2px solid var(--sage); padding: 8px 0 8px 24px; margin: 28px 0 }
.post-body blockquote p { font-family: var(--serif); font-size: 23px; color: var(--ink); font-style: italic; margin: 0; line-height: 1.5 }

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.contact-layout { display: grid; grid-template-columns: 1fr 400px; gap: 88px; padding: 88px 0 }
.cr { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border) }
.cr:last-child { border-bottom: none }
.cr-icon { width: 40px; height: 40px; border-radius: var(--rm); background: rgba(77,158,120,.1); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0 }
.cr-lbl  { font-size: 10px; font-weight: 600; color: var(--ink-light); text-transform: uppercase; letter-spacing: .08em }
.cr-val  { font-size: 14px; font-weight: 600; color: var(--ink) }
.cal-box { border-radius: var(--rl); overflow: hidden; position: relative; margin-bottom: 18px }
.cal-box-bg      { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=600&q=60') center/cover }
.cal-box-overlay { position: absolute; inset: 0; background: rgba(11,31,58,.9) }
.cal-box-in      { position: relative; z-index: 1; padding: 30px; text-align: center }
.cal-box h4 { color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 600; margin-bottom: 6px }
.cal-box p  { color: rgba(255,255,255,.48); font-size: 13px; margin-bottom: 22px }

/* ══════════════════════════════════════
   FORMS
══════════════════════════════════════ */
.fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px }
.fg label { font-size: 12.5px; font-weight: 600; color: var(--ink) }
.fi,.fs,.fta {
  padding: 12px 14px; border: 1.5px solid var(--border);
  border-radius: var(--rm); font-size: 15px; color: var(--ink);
  background: #fff; outline: none; transition: all var(--t); width: 100%
}
.fi:focus,.fs:focus,.fta:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(77,158,120,.1) }
.fi::placeholder,.fta::placeholder { color: var(--ink-light); opacity: .6 }
.fta { resize: vertical; min-height: 120px; line-height: 1.72 }
.fs  { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }

/* ══════════════════════════════════════
   NEWSLETTER — city/people BG
══════════════════════════════════════ */
.nl-section { position: relative; overflow: hidden }
.nl-photo {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=65') center 35%/cover
}
.nl-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(6,14,28,.97),rgba(22,59,44,.96)) }
.nl-inner   { position: relative; z-index: 1; text-align: center; max-width: 560px; margin: 0 auto }
.nl-inner h2 { color: #fff; margin-bottom: 14px }
.nl-inner p  { color: rgba(255,255,255,.48) }
.nl-form { display: flex; gap: 10px; margin-top: 28px }
.nl-form .fi { flex: 1; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #fff }
.nl-form .fi::placeholder { color: rgba(255,255,255,.3) }
.nl-form .fi:focus { border-color: var(--sage); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(77,158,120,.15) }
.nl-trust { font-size: 11.5px; color: rgba(255,255,255,.26); margin-top: 12px }

/* ══════════════════════════════════════
   CTA STRIP — fleet highway BG
══════════════════════════════════════ */
.cta-strip { position: relative; padding: 100px 0; text-align: center; overflow: hidden }
.cta-photo {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1600&q=65') center 42%/cover
}
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(6,14,28,.94),rgba(22,59,44,.92)) }
.cta-in   { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 var(--g) }
.cta-in h2 { color: #fff; margin-bottom: 16px }
.cta-in p  { color: rgba(255,255,255,.46); margin: 0 auto 40px; max-width: 460px; font-size: 17px }
.cta-btns  { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }

/* ══════════════════════════════════════
   FOOTER — deep dark with subtle truck
══════════════════════════════════════ */
#site-footer { position: relative; overflow: hidden; padding: 88px 0 0; background: var(--navy-deep) }
.footer-photo {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1519003722824-194d4455a60c?auto=format&fit=crop&w=1600&q=30') center/cover;
  opacity: .04
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px;
  padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 1
}
.footer-logo-img { height: 34px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 20px; display: block }
.footer-desc { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.88; max-width: 268px; margin-bottom: 24px }
.footer-social { display: flex; gap: 7px }
.fsb { width: 34px; height: 34px; border-radius: 5px; border: 1px solid rgba(255,255,255,.24); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; transition: all var(--t) }
.fsb:hover { border-color: var(--sage); color: var(--sage); background: rgba(77,158,120,.1) }
.footer-col { position: relative; z-index: 1 }
.footer-col h6 { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 18px }
.footer-link { display: block; font-size: 13px; color: rgba(255,255,255,.82); margin-bottom: 11px; transition: color var(--t) }
.footer-link:hover { color: #fff }
.footer-bottom { padding: 24px 0; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1 }
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,.6) }
.footer-legal { display: flex; gap: 20px }
.footer-legal a { font-size: 11.5px; color: rgba(255,255,255,.6); transition: color var(--t) }
.footer-legal a:hover { color: #fff }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  background: var(--ink); color: #fff; padding: 14px 20px;
  border-radius: var(--rm); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; box-shadow: var(--sh-xl);
  opacity: 0; transform: translateY(12px); transition: all .3s var(--ease); pointer-events: none
}
.toast.show { opacity: 1; transform: none }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex-shrink: 0 }

/* ══════════════════════════════════════
   UTILS
══════════════════════════════════════ */
.text-center { text-align: center }
.text-white  { color: #fff !important }
.text-sage   { color: var(--sage) !important }
.mt-4 { margin-top: 16px } .mt-6 { margin-top: 24px } .mt-8 { margin-top: 32px } .mt-12 { margin-top: 48px }
.mb-4 { margin-bottom: 16px } .mb-6 { margin-bottom: 24px } .mb-8 { margin-bottom: 32px }
.bg-light { background: var(--bg) }
.tag { display: inline-block; padding: 3px 11px; border-radius: 100px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase }
.tag-green { background: rgba(77,158,120,.1); color: var(--sage); border: 1px solid rgba(77,158,120,.18) }
.fade-up { opacity: 0; transform: translateY(26px); transition: opacity .72s var(--ease), transform .72s var(--ease) }
.fade-up.visible { opacity: 1; transform: none }
.fade-up:nth-child(2) { transition-delay: .1s }
.fade-up:nth-child(3) { transition-delay: .2s }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1024px) {
  :root { --g: 32px }
  .hero-layout { grid-template-columns: 1fr } .hero-card { display: none }
  .plain-steps { grid-template-columns: 1fr 1fr }
  .journey-flow { grid-template-columns: repeat(4,1fr) }
  .journey-node::after { display: none }
  .fw-grid { grid-template-columns: 1fr 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px }
  .split-band { grid-template-columns: 1fr } .split-img { height: 300px }
}
@media(max-width:768px) {
  :root { --g: 24px }
  .nav-menu { display: none; position: fixed; top: 76px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); flex-direction: column; padding: 10px; z-index: 999; box-shadow: var(--sh-xl) }
  .nav-menu.open { display: flex }
  .nav-burger { display: flex }
  .nav-actions>.btn { display: none }
  .nav-logo-img { max-width: 170px }
  .nav-link { width: 100%; padding: 10px 13px }
  .nav-dropdown { position: static; box-shadow: none; border: none; background: var(--bg); opacity: 1; visibility: visible; transform: none; display: none; padding: 4px 0 6px 16px; margin-top: 2px }
  .nav-item.has-dropdown.open .nav-dropdown { display: block }
  .hidden-mobile { display: none !important }
  .g2, .g3 { grid-template-columns: 1fr; gap: 36px }
  .g4 { grid-template-columns: 1fr 1fr }
  .hero { min-height: auto; align-items: flex-start }
  .hero-inner { padding: 86px 0 72px }
  .hero .lead { max-width: none }
  .hero-btns { margin-bottom: 42px }
  .hero-stats { gap: 16px; padding-top: 26px }
  .hs-item { padding-right: 0 }
  .hs-num { font-size: 44px }
  .stat-bar-inner { flex-wrap: wrap; gap: 22px }
  .sb-div { display: none }
  .sb-item { flex: 1 1 calc(50% - 22px) }
  .plain-steps { grid-template-columns: 1fr; gap: 14px }
  .journey-flow, .journey-flow.compact { grid-template-columns: 1fr; gap: 12px; margin-top: 36px }
  .journey-node { min-height: auto; padding: 18px }
  .fp, .svc-block { grid-template-columns: 1fr }
  .svc-block.rev .svc-vis { order: 0 }
  .svc-block { gap: 34px; padding: 64px 0 }
  .svc-big-num { font-size: 76px }
  .dp { padding: 28px }
  .dp-callout strong { font-size: 20px }
  .contact-layout { grid-template-columns: 1fr; gap: 40px }
  .section { padding: 68px 0 }
  .frow { grid-template-columns: 1fr }
  .nl-form { flex-direction: column }
  .img-band { grid-template-columns: 1fr 1fr; height: 320px }
  .hero-stats { grid-template-columns: 1fr 1fr }
  .hs-item+.hs-item { border-left: none; padding-left: 0 }
  .split-content { padding: 44px 32px }
}
@media(max-width:480px) {
  :root { --g: 18px }
  h1 { font-size: 38px }
  h2 { font-size: 31px }
  h3 { font-size: 25px }
  .lead { font-size: 17px }
  .nav-inner { height: 68px }
  .nav-menu { top: 68px }
  .nav-logo-img { max-width: 145px; height: auto }
  .btn { width: 100%; padding-left: 18px; padding-right: 18px }
  .btn-sm, .btn-lg { padding-left: 18px; padding-right: 18px }
  .hero-inner { padding: 76px 0 58px }
  .hero-badge { font-size: 9.5px; letter-spacing: .07em; max-width: 100% }
  .hero-stats { grid-template-columns: 1fr }
  .hs-item { padding: 0 0 16px }
  .hs-item + .hs-item { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px }
  .stat-bar-inner { display: grid; grid-template-columns: 1fr; gap: 18px }
  .sb-item { flex: none }
  .dp { padding: 24px 18px }
  .mh { flex-direction: column; gap: 3px }
  .dp-callout { padding: 16px }
  .dp-callout strong { font-size: 18px }
  .g4, .fw-grid { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr }
  .img-band { grid-template-columns: 1fr } .img-band-item { height: 200px }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px }
}