/* =========================================================================
   KARVIO — premium automotive transport & import, bold/exuberant direction
   Palette: deep navy + electric blue (from the Karvio mark), white surfaces
   Type:    Unbounded (chunky geometric display) + Manrope (text) — Cyrillic-safe
   ========================================================================= */

/* ----------------------------------------------------------------- Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100%;line-height:1.62;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px;border-radius:2px}
::selection{background:var(--blue);color:#fff}

/* ---------------------------------------------------------------- Tokens */
:root{
  --ink:#001B46;
  --ink-2:#000D28;
  --ink-3:#012258;
  --blue:#005EFC;
  --blue-2:#4C93FF;
  --blue-ink:#0047C4;         /* darker blue for small text on light bg (AA) */
  --paper:#F4F8FF;
  --paper-2:#E7EFFC;
  --white:#FFFFFF;
  --text:#071B3D;
  --muted:#55628A;
  --muted-dark:rgba(255,255,255,.68);
  --line:#DAE3F5;
  --line-dark:rgba(255,255,255,.14);
  --ok:#1FAE6B;
  --err:#FF5A66;

  --font-display:"Unbounded",system-ui,sans-serif;
  --font-text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1280px;
  --gutter:clamp(1.15rem,5vw,4rem);
  --section-y:clamp(4rem,9vw,8rem);

  --ease:cubic-bezier(.16,.84,.32,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* -------------------------------------------------------------- Base type */
body{background:var(--paper);color:var(--text);font-family:var(--font-text);font-size:1.05rem}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.9rem + 4.2vw,4.9rem);font-weight:800;line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,1.5rem + 2.2vw,3.1rem);font-weight:700}
h3{font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem);font-weight:600}
p{max-width:64ch}
strong{font-weight:700}

.lead{font-size:clamp(1.1rem,1rem + .6vw,1.32rem);line-height:1.55;color:var(--muted);max-width:52ch}
.night .lead,.hero .lead,.page-head .lead{color:var(--muted-dark)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-ink);
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 20%,transparent)}
.night .eyebrow,.hero .eyebrow,.page-head .eyebrow{color:var(--blue-2)}

/* ------------------------------------------------------------- Utilities */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.stack>*+*{margin-top:1.1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.center{text-align:center}
.night{background:var(--ink);color:var(--white)}
.night h1,.night h2,.night h3{color:var(--white)}
.night p{color:var(--muted-dark)}

.skip-link{position:fixed;top:.6rem;left:.6rem;z-index:200;background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;font-weight:700;border-radius:.5rem;transform:translateY(-160%);
  transition:transform .2s var(--ease)}
.skip-link:focus{transform:none}

/* ---------------------------------------------------------------- Header */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--white) 90%,transparent);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.8rem}
.brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand img{height:1.7rem;width:auto;display:block}

.nav{display:flex;align-items:center;gap:2rem}
.nav__links{display:flex;align-items:center;gap:1.7rem}
.nav__links a{font-size:.95rem;font-weight:600;position:relative;padding-block:.4rem}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__links a[aria-current="page"]{color:var(--blue-ink)}

.nav__side{display:flex;align-items:center;gap:1rem}
.lang-switch{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:.78rem;
  letter-spacing:.03em;text-transform:uppercase;overflow:hidden}
.lang-switch a,.lang-switch span{padding:.4rem .8rem;display:block}
.lang-switch [aria-current="true"]{background:var(--ink);color:#fff}

.menu-toggle{display:none;width:2.7rem;height:2.7rem;border:1.5px solid var(--line);border-radius:.6rem;
  align-items:center;justify-content:center}
.menu-toggle svg{width:1.25rem;height:1.25rem}

@media (max-width:960px){
  .nav__links,.nav .nav__cta{display:none}
  .menu-toggle{display:inline-flex}
  .nav.is-open .nav__links{display:flex;position:fixed;inset:4.8rem 0 auto 0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--white);border-bottom:1px solid var(--line);padding:var(--gutter);
    box-shadow:0 20px 40px -20px rgba(0,20,60,.25)}
  .nav.is-open .nav__links a{width:100%;padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.1rem}
  .nav.is-open .nav__links a::after{display:none}
}

/* --------------------------------------------------------------- Buttons */
.btn{
  --bg:var(--blue);--fg:#fff;position:relative;
  display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.7rem;border-radius:999px;
  font-weight:700;font-size:.98rem;background:var(--bg);color:var(--fg);border:1.5px solid transparent;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),background .22s var(--ease-out);
  box-shadow:0 10px 28px -10px color-mix(in srgb,var(--blue) 55%,transparent);
}
.btn svg{width:1.05rem;height:1.05rem;transition:transform .28s var(--ease-out)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -10px color-mix(in srgb,var(--blue) 65%,transparent)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(-1px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line);box-shadow:none}
.btn--ghost:hover{--bg:var(--paper-2);box-shadow:none}
.night .btn--ghost,.hero .btn--ghost,.page-head .btn--ghost{--fg:#fff;border-color:var(--line-dark)}
.night .btn--ghost:hover,.hero .btn--ghost:hover,.page-head .btn--ghost:hover{--bg:rgba(255,255,255,.08)}
.btn--lg{padding:1.15rem 2.1rem;font-size:1.05rem}
.btn--white{--bg:#fff;--fg:var(--ink);box-shadow:0 10px 28px -10px rgba(0,0,0,.35)}
.btn--white:hover{--bg:var(--paper-2)}

.text-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--blue-ink)}
.night .text-link{color:var(--blue-2)}
.text-link svg{width:1rem;height:1rem;transition:transform .28s var(--ease-out)}
.text-link:hover svg{transform:translateX(4px)}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;
  opacity:.55;pointer-events:none}
.hero::before{width:46vw;height:46vw;max-width:640px;max-height:640px;background:radial-gradient(circle,var(--blue) 0%,transparent 70%);
  top:-14%;right:-10%;animation:driftA 16s ease-in-out infinite}
.hero::after{width:32vw;height:32vw;max-width:440px;max-height:440px;background:radial-gradient(circle,var(--blue-2) 0%,transparent 70%);
  bottom:-16%;left:-8%;animation:driftB 20s ease-in-out infinite}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,5%) scale(1.08)}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-6%) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}

.hero__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(3.5rem,8vw,7rem)}
.hero__kicker{margin-bottom:1.5rem}
.hero h1{margin-bottom:1.6rem}
.hero h1 .hl{color:var(--blue-2)}
.hero__cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1rem}
.hero__meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;border-top:1px solid var(--line-dark);
  padding-top:1.5rem}
.hero__meta div{min-width:8rem}
.hero__meta dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.hero__meta dd{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin-top:.3rem;color:#fff}

@media (max-width:880px){.hero__inner{grid-template-columns:1fr;gap:2.5rem}}

.hero__visual{position:relative;min-height:320px}

/* Route visual card in hero */
.route-card{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
  border-radius:1.5rem;background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark);backdrop-filter:blur(8px);padding:1.8rem 1.6rem 1.6rem;overflow:hidden}
.route-card__map{position:relative}
.route-card__map svg{width:100%;height:auto}
.route-line{stroke:var(--blue-2);stroke-width:3;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 6px rgba(76,147,255,.7))}
.route-dash{stroke:rgba(255,255,255,.25);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round;fill:none}
.pin{fill:var(--blue-2)}
.pin-ring{fill:none;stroke:var(--blue-2);stroke-width:2;opacity:.55}
[data-car-dot]{opacity:0}
.car-dot-glow{fill:#fff;filter:drop-shadow(0 0 8px rgba(76,147,255,.95))}
.route-card__labels{display:flex;justify-content:space-between;margin-top:1rem;font-size:.82rem;font-weight:700;
  color:var(--muted-dark);text-transform:uppercase;letter-spacing:.06em}
.route-card__chip{position:absolute;top:1.4rem;right:1.4rem;background:rgba(255,255,255,.08);
  border:1px solid var(--line-dark);border-radius:999px;padding:.4rem .9rem;font-size:.74rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#fff}

/* --------------------------------------------------------------- Marquee */
.marquee{background:var(--ink-2);color:#fff;overflow:hidden;padding-block:1rem;border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark)}
.marquee__track{display:flex;gap:3rem;width:max-content;animation:marquee 34s linear infinite}
.marquee__track span{font-family:var(--font-display);font-weight:600;font-size:1.1rem;
  display:inline-flex;align-items:center;gap:3rem;white-space:nowrap;color:rgba(255,255,255,.85)}
.marquee__track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-2)}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ------------------------------------------------------- Section heading */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);
  align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head__title h2{margin-top:.9rem}
.sec-head__aside{padding-bottom:.4rem;color:var(--muted)}
.night .sec-head__aside{color:var(--muted-dark)}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* --------------------------------------------------------- Service cards */
.services{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;perspective:1400px}
@media (max-width:820px){.services{grid-template-columns:1fr}}
.svc-card{position:relative;border-radius:1.75rem;padding:clamp(1.8rem,3vw,2.6rem);overflow:hidden;
  background:var(--white);border:1px solid var(--line);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
  transform-style:preserve-3d;will-change:transform}
.svc-card:hover{box-shadow:0 30px 60px -24px rgba(0,27,70,.28)}
.svc-card__glow{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
  color-mix(in srgb,var(--blue) 14%,transparent),transparent 60%);opacity:0;transition:opacity .3s var(--ease-out);pointer-events:none}
.svc-card:hover .svc-card__glow{opacity:1}
.svc-card--dark{background:var(--ink);color:#fff;border-color:var(--line-dark)}
.svc-card--dark h3{color:#fff}
.svc-card--dark p{color:var(--muted-dark)}
.svc-card__ic{width:3.2rem;height:3.2rem;border-radius:1rem;background:color-mix(in srgb,var(--blue) 12%,transparent);
  display:grid;place-items:center;margin-bottom:1.3rem}
.svc-card--dark .svc-card__ic{background:rgba(255,255,255,.08)}
.svc-card__ic svg{width:1.7rem;height:1.7rem;color:var(--blue)}
.svc-card--dark .svc-card__ic svg{color:var(--blue-2)}
.svc-card h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin-bottom:.7rem}
.svc-card p{color:var(--muted);margin-bottom:1.4rem}
.svc-card__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.svc-card__tags span{font-size:.76rem;font-weight:700;padding:.35rem .7rem;border-radius:999px;
  background:var(--paper-2);color:var(--blue-ink);text-transform:uppercase;letter-spacing:.03em}
.svc-card--dark .svc-card__tags span{background:rgba(255,255,255,.08);color:var(--blue-2)}

/* ------------------------------------------------------------- Process */
.steps{border-top:1px solid var(--line)}
.night .steps{border-top-color:var(--line-dark)}
.step{display:grid;grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1rem,3vw,3rem);
  align-items:start;padding-block:clamp(1.7rem,3.5vw,2.6rem);border-bottom:1px solid var(--line);
  transition:background .25s var(--ease-out)}
.night .step{border-bottom-color:var(--line-dark)}
.step:hover{background:var(--paper-2)}
.night .step:hover{background:rgba(255,255,255,.04)}
.step__num{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--blue-ink);line-height:1;
  padding-top:.3rem}
.night .step__num{color:var(--blue-2)}
.step__body p{color:var(--muted);margin-top:.5rem;max-width:44ch}
.night .step__body p{color:var(--muted-dark)}
.step__aside{font-size:.92rem;color:var(--text);border-left:2px solid var(--blue);padding-left:1.1rem}
.night .step__aside{color:#fff;border-left-color:var(--blue-2)}
@media (max-width:820px){
  .step{grid-template-columns:2.6rem 1fr}
  .step .step__aside{grid-column:1/-1;margin-left:0;border-left:0;border-top:1px solid var(--line);padding:.9rem 0 0}
  .night .step .step__aside{border-top-color:var(--line-dark)}
}

/* --------------------------------------------------------------- Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
.stat{background:var(--ink);padding:clamp(1.6rem,4vw,2.6rem) 1.2rem;text-align:center}
.stat__n{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5vw,3.1rem);color:#fff;line-height:1}
.stat__l{margin-top:.6rem;font-size:.78rem;letter-spacing:.05em;color:var(--muted-dark)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------- Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.pullquote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1rem + 1.8vw,2.1rem);
  line-height:1.3;border-left:3px solid var(--blue);padding-left:1.4rem}
.pullquote cite{display:block;font-family:var(--font-text);font-weight:700;font-size:.95rem;font-style:normal;
  color:var(--muted);margin-top:1rem}
.night .pullquote cite{color:var(--muted-dark)}

/* --------------------------------------------------------------- Reviews */
.reviews{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:1.4rem}
@media (max-width:980px){.reviews{grid-template-columns:1fr;}}
.review-card{background:var(--white);border:1px solid var(--line);border-radius:1.5rem;overflow:hidden;
  display:flex;flex-direction:column}
.review-card--photo{grid-row:span 1}
.review-card__img{aspect-ratio:4/3;overflow:hidden}
.review-card__img img{width:100%;height:100%;object-fit:cover}
.review-card__body{padding:clamp(1.4rem,2.5vw,1.9rem);display:flex;flex-direction:column;gap:.9rem;flex:1}
.review-card__stars{display:flex;gap:.2rem;color:var(--blue)}
.review-card__stars svg{width:1rem;height:1rem}
.review-card__quote{color:var(--text);font-size:.98rem;line-height:1.55}
.review-card__who{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:.6rem}
.review-card__avatar{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.9rem;flex-shrink:0}
.review-card__who strong{display:block;font-size:.92rem}
.review-card__who span{display:block;font-size:.8rem;color:var(--muted)}

/* --------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.night .faq{border-top-color:var(--line-dark)}
.faq details{border-bottom:1px solid var(--line)}
.night .faq details{border-bottom-color:var(--line-dark)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.35rem 0;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.02rem,1.2vw,1.22rem);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:1.3rem;height:1.3rem;flex-shrink:0}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;inset:0;margin:auto;background:var(--blue)}
.night .faq summary .pm::before,.night .faq summary .pm::after{background:var(--blue-2)}
.faq summary .pm::before{width:100%;height:2px}
.faq summary .pm::after{width:2px;height:100%;transition:transform .28s var(--ease-out)}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details>div{padding:0 0 1.4rem;max-width:68ch;color:var(--muted)}
.night .faq details>div{color:var(--muted-dark)}

/* --------------------------------------------------------------- Form */
.form{display:grid;gap:1.3rem}
.field{display:grid;gap:.45rem}
.field label{font-weight:700;font-size:.92rem}
.field label .req{color:var(--blue-ink)}
.night .field label .req{color:var(--blue-2)}
.field input,.field select,.field textarea{
  width:100%;padding:.95rem 1.1rem;background:var(--white);border:1.5px solid var(--line);border-radius:.85rem;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.night .field input,.night .field select,.night .field textarea{background:rgba(255,255,255,.05);
  border-color:var(--line-dark);color:#fff}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
.field .hint{font-size:.82rem;color:var(--muted)}
.night .field .hint{color:var(--muted-dark)}
.field .err-msg{font-size:.85rem;color:var(--err);font-weight:700;display:none}
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{border-color:var(--err)}
.field[data-invalid] .err-msg{display:block}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.svc-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:560px){.svc-toggle{grid-template-columns:1fr}}
.svc-toggle label{position:relative;display:flex;align-items:center;gap:.7rem;border:1.5px solid var(--line);
  border-radius:.9rem;padding:.9rem 1rem;cursor:pointer;font-weight:700;font-size:.92rem;transition:border-color .2s,background .2s}
.night .svc-toggle label{border-color:var(--line-dark)}
.svc-toggle input{accent-color:var(--blue)}
.svc-toggle label:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,transparent)}

.form-note{font-size:.86rem;color:var(--muted)}
.night .form-note{color:var(--muted-dark)}
.form-status{padding:1.1rem 1.3rem;border-radius:.9rem;border:1.5px solid var(--line);font-weight:700;display:none}
.form-status[data-state="success"]{display:block;border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--white))}
.form-status[data-state="error"]{display:block;border-color:var(--err);background:color-mix(in srgb,var(--err) 12%,var(--white))}

/* --------------------------------------------------------------- CTA band */
.cta-band{position:relative;background:linear-gradient(135deg,var(--ink) 0%,#002d78 100%);color:#fff;overflow:hidden;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at 85% 30%,rgba(76,147,255,.35),transparent 65%);z-index:-1}
.cta-band .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center;padding-block:clamp(3rem,6vw,5rem)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85)}
@media (max-width:800px){.cta-band .wrap{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Footer */
.site-footer{background:var(--ink-2);color:#fff;padding-block:clamp(3rem,6vw,5rem)}
.site-footer a:hover{color:var(--blue-2)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.footer-grid h4{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:1.1rem}
.footer-grid li+li{margin-top:.6rem}
.footer-grid p{color:rgba(255,255,255,.7);font-size:.95rem}
.footer-brand img{height:1.6rem;margin-bottom:1rem}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.5)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Reveal */
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.js [data-reveal-stagger]>*{opacity:0;transform:translateY(24px)}
.js [data-hero-rise]{opacity:0}
.js [data-scale-in]{opacity:0;transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal-stagger]>*,.js [data-hero-rise],.js [data-scale-in]{
    opacity:1!important;transform:none!important}
}

/* --------------------------------------------------------------- Page head */
.page-head{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;
  padding-block:clamp(3.5rem,8vw,6.5rem)}
.page-head::before{content:"";position:absolute;inset:0;background:radial-gradient(560px circle at 12% 20%,rgba(76,147,255,.32),transparent 60%);z-index:-1}
.page-head h1{margin-block:1.2rem}
.breadcrumb{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-dark)}
.breadcrumb a:hover{color:var(--blue-2)}

/* contact detail list */
.contact-list{border-top:1px solid var(--line)}
.night .contact-list{border-top-color:var(--line-dark)}
.contact-list div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.night .contact-list div{border-bottom-color:var(--line-dark)}
.contact-list dt{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.night .contact-list dt{color:var(--muted-dark)}
.contact-list dd{font-weight:700;font-size:1.05rem}
.contact-list dd a{color:var(--blue-ink)}
.night .contact-list dd a{color:var(--blue-2)}
@media (max-width:560px){.contact-list div{grid-template-columns:1fr;gap:.3rem}}

/* --------------------------------------------------------------- Feature grid (included-in-service lists) */
.features{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:1.25rem;overflow:hidden}
.night .features{background:var(--line-dark);border-color:var(--line-dark)}
.feature{background:var(--white);padding:clamp(1.5rem,3vw,2.1rem);grid-column:span 3;display:flex;flex-direction:column;gap:.6rem}
.night .feature{background:var(--ink)}
.feature:nth-child(1),.feature:nth-child(2){grid-column:span 6}
.feature h3{font-size:1.15rem}
.feature p{color:var(--muted);font-size:.95rem}
.night .feature p{color:var(--muted-dark)}
@media (max-width:1000px){.feature,.feature:nth-child(1),.feature:nth-child(2){grid-column:span 6}}
@media (max-width:560px){.feature,.feature:nth-child(1),.feature:nth-child(2){grid-column:span 12}}