/* ==========================================================================
   VEER shared site chrome
   Extracted from print.html so every page shares one design system instead of
   each carrying its own copy. Pages that predate this file keep their inline
   CSS and only pull in the nav-dropdown block below.
   ========================================================================== */

/* Dark surfaces are deliberately warmer and further apart than they look on
   paper. Light mode differentiates sections two ways — lightness AND hue
   (cream page, tan band, white card) — while dark mode was near-neutral at
   every level, so consecutive sections merged into one black scroll. These
   values restore both: a wider L* gap, and a warm cast that increases as a
   surface comes forward. */
:root{
  --near:#070707; --panel:#131313; --panel-2:#1c1714;
  --line:rgba(255,255,255,.11);
  --text:#ffffff; --muted:rgba(255,255,255,.62); --faint:rgba(255,255,255,.38);
  --orange:#f69323; --peach:#fec97e; --red:#ef4138; --maroon:#be2430;
  --brand-red:#e63329; --spark:#f4941e;
  --font-display:'DM Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:20px;
  --burst:radial-gradient(120% 115% at 80% 16%, #FEC97E 0%, #F69323 22%, #EE5A2A 46%, #8A2216 72%, #0A0503 100%);
}
:root{color-scheme:dark}
:root[data-theme="light"]{
  color-scheme:light;
  --near:#f6f1e8; --panel:#fffdf8; --panel-2:#f1e9dc;
  --line:rgba(26,16,8,.12);
  --text:#1a130d; --muted:rgba(26,19,13,.66); --faint:rgba(26,19,13,.44);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--near);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--orange);color:#0a0503}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.05;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* Inter ships no italic here, so <em> would be a browser-faked slant.
   Emphasise with weight instead — 600 is loaded, 700 would fake a bold. */
p em, li em{font-style:normal;font-weight:600}

/* skip link — keyboard users should not have to tab the whole nav */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:#0a0503;padding:12px 20px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

/* ---------- header ---------- */
/* Transparent over the hero, solid once scrolled — same as the Care pages.
   A permanently-solid bar sitting on the hero reads as a second shadow line
   under the real one, which is what it used to do here. */
header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
header.scrolled{
  background:color-mix(in srgb,var(--near) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
/* the hero underneath is dark in both themes, so the unscrolled bar has to be
   light-on-dark regardless of the light-mode tokens */
header:not(.scrolled) .logo,
header:not(.scrolled) .nav-links a:not(.btn),
header:not(.scrolled) .navdrop > .navdrop-t{color:rgba(255,255,255,.82)}
header:not(.scrolled) .nav-links a:not(.btn):hover,
header:not(.scrolled) .nav-links a[aria-current],
header:not(.scrolled) .navdrop > .navdrop-t:hover,
header:not(.scrolled) .navdrop.is-current > .navdrop-t{color:#fff}
header:not(.scrolled) .theme-toggle{color:#fff;border-color:rgba(255,255,255,.3)}
header:not(.scrolled) .burger{color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo img{height:30px;width:auto}
.logo span{font-family:var(--font-display);font-weight:900;font-size:17px;letter-spacing:3px;display:flex;flex-direction:column;line-height:1}
.logo em{font-style:normal;font-weight:600;font-size:8.5px;letter-spacing:2.4px;opacity:.6;margin-top:4px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:linear-gradient(120deg,var(--orange),var(--red));color:#0a0503;box-shadow:0 8px 26px rgba(246,147,35,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(246,147,35,.4)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.theme-toggle{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.ic-moon{display:none}
[data-theme="light"] .ic-sun{display:none}
[data-theme="light"] .ic-moon{display:block}
.burger{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer}

/* ---------- breadcrumbs ---------- */
.crumbs{padding-top:96px;font-size:13px;color:var(--faint)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs li::after{content:"/";margin-left:8px;opacity:.5}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--orange)}
.crumbs [aria-current]{color:var(--text)}
/* when a page leads with a burst hero the crumbs sit inside it instead */
.hero .crumbs{padding-top:0;margin-bottom:18px;color:rgba(255,255,255,.7)}
.hero .crumbs a{color:rgba(255,255,255,.85)}
.hero .crumbs [aria-current]{color:#fff}

/* ---------- hero · motion header ---------- */
/* Matches the Care pages: a burst-gradient panel with giant words drifting
   behind the copy, and a soft fade into the page at the bottom.
   Keep .hero / .ghostwall / .hero-inner in sync with care.html — the two
   Care pages carry their own inline copy of this block. */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--burst);color:#fff;
  overflow:hidden;isolation:isolate;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:2;
  background:linear-gradient(to bottom, transparent, var(--near) 92%);
  pointer-events:none;
}
.ghostwall{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.4vw,18px);
  user-select:none;pointer-events:none;
}
/* Filled at low opacity rather than outlined with -webkit-text-stroke.
   DM Sans is loaded as a variable font, and variable fonts routinely keep
   glyph components as overlapping unmerged contours — merging them would
   break interpolation across the axes. A nonzero fill hides that overlap;
   a stroke traces every contour, so the internal seams in R, P, B and A
   showed up as lines cutting through the letter. */
.ghostline{
  font-family:var(--font-display);font-weight:900;
  letter-spacing:max(.025em,5px);
  font-size:clamp(120px,24vw,330px);line-height:.84;white-space:nowrap;
  color:rgba(255,255,255,.038);
  display:flex;width:max-content;
}
.ghostline.fill{color:rgba(255,255,255,.075)}
.ghostline span{padding-right:.35em}
.drift-l{animation:driftL 60s linear infinite}
.drift-r{animation:driftR 70s linear infinite}
@keyframes driftL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes driftR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.hero-inner{position:relative;z-index:3}
.hero .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.85;margin-bottom:18px}
.hero h1{font-size:clamp(44px,7.2vw,96px);font-weight:900;max-width:15ch;margin-bottom:20px;text-shadow:0 1px 3px rgba(10,5,3,.3)}
/* Solid white, not a clipped gradient — same call care.html made, for two
   reasons. The peach end of the gradient lands on a peach/orange backdrop and
   has no reliable contrast anywhere along the line. And with the fill set
   transparent, the h1's own text-shadow paints straight through the glyphs and
   reads as a grey second copy of the word sitting inside it. */
.hero h1 .hl{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:currentColor;color:#fff;
}
.hero p{font-size:clamp(16px,2.2vw,20px);max-width:60ch;color:rgba(255,255,255,.88);text-shadow:0 1px 18px rgba(10,5,3,.5)}
.hero-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:38px}
.hstat b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(26px,4vw,38px);line-height:1}
.hstat span{font-size:13px;color:rgba(255,255,255,.75)}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.scrolldown{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:3;color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;font-family:var(--font-display);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* the hero is a brand canvas and stays dark in light mode, so re-pin the
   tokens inside it — children that inherit colour need the explicit reset */
:root[data-theme="light"] .hero{
  --text:#ffffff;
  --muted:rgba(255,255,255,.62);
  --faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.08);
  color:var(--text);
}
/* the bottom fade blends into cream in light mode — shorten it so copy
   sitting low in the hero stays over the dark part of the gradient */
:root[data-theme="light"] .hero::after{height:20vh}
:root[data-theme="light"] .scrolldown{color:rgba(26,19,13,.55)}

@media(prefers-reduced-motion: reduce){
  .drift-l,.drift-r,.scrolldown{animation:none}
}

/* ---------- sections ---------- */
section{padding:82px 0}
.sec-head{max-width:64ch;margin-bottom:40px}
.sec-head .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.sec-head h2{font-size:clamp(30px,4.6vw,50px);font-weight:800;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:17px}
/* Alternating band. The warm bloom along the top edge is the part that reads
   when you're scrolling fast — a flat fill this dark registers as nothing. */
.alt{
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(246,147,35,.055), transparent 68%),
    var(--panel-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* Cards sit on the page in a plain section but on the band in an alt one, so
   re-pin the card surface inside .alt to keep them reading as raised rather
   than punched out. Light mode already has the contrast and keeps its white. */
.alt{--panel:#242019}
:root[data-theme="light"] .alt{--panel:#fffdf8}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h3{font-size:clamp(21px,2.6vw,27px);font-weight:800;margin:34px 0 12px}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--muted);margin-bottom:16px}
.prose ul,.prose ol{color:var(--muted);margin:0 0 18px 20px;display:grid;gap:8px}
.prose b,.prose strong{color:var(--text)}
.prose a{color:var(--orange);font-weight:600}
.prose a:hover{text-decoration:underline}

/* ---------- cards & tiles ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.tile h3,.tile h4{font-size:19px;font-weight:800;margin-bottom:9px}
.tile p{color:var(--muted);font-size:14.5px}
.tile ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.tile ul li{font-size:14px;color:var(--muted);padding-left:17px;position:relative}
.tile ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.tile .ic{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--orange) 16%,transparent);display:grid;place-items:center;margin-bottom:15px}
.tile .ic svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tile .more{display:inline-block;margin-top:16px;color:var(--orange);font-weight:600;font-size:14px}
.tile .more:hover{text-decoration:underline}

/* numbered pillar cards (home + service pages) */
.pillar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.pillar:hover{border-color:color-mix(in srgb,var(--orange) 45%,transparent);transform:translateY(-3px)}
.pillar::before{content:attr(data-no);position:absolute;top:16px;right:22px;font-family:var(--font-display);font-weight:900;font-size:54px;line-height:1;color:var(--text);opacity:.05}
.pillar h3{font-size:24px;font-weight:800;margin-bottom:10px}
.pillar > p{color:var(--muted);font-size:15px;margin-bottom:16px}
.pillar ul{list-style:none;display:grid;gap:9px}
.pillar ul li{font-size:14.5px;color:var(--muted);padding-left:18px;position:relative}
.pillar ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.pillar .more{display:inline-block;margin-top:20px;color:var(--orange);font-weight:700;font-size:14.5px}
.pillar .more:hover{text-decoration:underline}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;counter-reset:step}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-mono);font-size:12px;letter-spacing:2px;color:var(--orange);display:block;margin-bottom:12px}
.step h3,.step h4{font-size:20px;font-weight:800;margin-bottom:9px}
.step p{color:var(--muted);font-size:14.5px}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint)}
tbody tr:last-child td{border-bottom:0}
td.ours{font-weight:800;color:var(--orange);font-family:var(--font-display);font-size:17px}
.win{color:#4ade80;font-weight:700}
.tnote{font-size:13px;color:var(--faint);margin-top:14px}

/* ---------- FAQ (also feeds FAQPage structured data) ---------- */
.faq{display:grid;gap:12px;max-width:78ch}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font-family:var(--font-display);font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--orange);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .ans{padding:16px 0 22px;color:var(--muted);font-size:15px}
.faq .ans p+p{margin-top:12px}
.faq .ans a{color:var(--orange);font-weight:600}

/* ---------- closer ---------- */
.closer{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.closer h2{font-size:clamp(28px,4.4vw,44px);font-weight:900;margin-bottom:14px}
.closer p{color:var(--muted);max-width:56ch;margin:0 auto 26px;font-size:17px}
.closer .btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ---------- cross-sell band ---------- */
.crossband{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.crossband h3{font-size:22px;font-weight:800;margin-bottom:8px}
.crossband p{color:var(--muted);font-size:15px;max-width:56ch}

/* ---------- footer ---------- */
footer{padding:64px 0 30px;background:var(--near)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot-grid p{color:var(--muted);font-size:14px;margin-top:14px;max-width:40ch}
.foot-grid h5{font-family:var(--font-display);font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-grid ul a{font-size:14px;color:var(--muted)}
.foot-grid ul a:hover{color:var(--orange)}
.foot-note{padding:22px 0;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.foot-note b{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:var(--faint)}

@media(max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:16px;padding:22px 24px;background:var(--near);border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr}
}