/* ==========================================================================
   COLOUR DIRECTIONS (Morfey). Red #D82014 is the only accent; reading sections
   are white; one dark colour carries headers, dark bands and the footer. Only
   the dark family differs between the three directions (data-look on <html>,
   set by inc/look.php; the site default is in inc/brand.php, now navy):
     A  charcoal  :root
     B  navy      :root[data-look="navy"]
     C  sea       :root[data-look="sea"]
   The brand red and black also come from inc/brand.php (--red, --black).
   ========================================================================== */
:root{
  --white:#FFFFFF;
  --red:#D82014;          /* brand red */
  --red-deep:#B81B10;     /* hover (derived: red, darker) */
  --red-press:#9C170D;    /* active (derived) */
  --red-on-dark:#FF5C4D;  /* red for small text / numbers on the dark colours */
  --red-rgb:216,32,20;

  /* A: charcoal */
  --ink:#1E2124;          /* headings, strong text */
  --dark:#1E2124;         /* dark bands */
  --darker:#141618;       /* header over hero, footer */
  --soft:#F4F3F1;         /* light grey band */
  --rule:#E2E0DC;         /* lines on white */
  --rule-2:#C9C6C0;       /* stronger line, form fields (derived) */
  --text:#45484C;         /* body text */
  --muted:#6B6E72;        /* muted text */
  --text-on-dark:#C9CCCF;
  --muted-on-dark:#9A9EA3;
  --rule-on-dark:#33373B;
  --ink-rgb:30,33,36;
  --darker-rgb:20,22,24;
  /* Hero overlay: strong across the text column, fading to the right (the prompt's .88 → .30, with a
     hold so the lead stays at 4.5:1 over bright frames); one even wash where text spans the width. */
  --hero-overlay:linear-gradient(90deg,rgba(20,22,24,.88) 0%,rgba(20,22,24,.80) 45%,rgba(20,22,24,.30) 100%);
  --hero-overlay-sm:linear-gradient(180deg,rgba(20,22,24,.70) 0%,rgba(20,22,24,.80) 35%,rgba(20,22,24,.82) 100%);
  /* corridor map (home): sea a shade darker than the band, land lighter, faint borders */
  --map-sea:#0B0C0E; --map-land:#42474F; --map-border:rgba(255,255,255,.14);

  /* Engine names kept as aliases, so every existing page follows the direction. */
  --primary:var(--red); --primary-deep:var(--red-deep); --primary-press:var(--red-press); --primary-soft:var(--soft);
  --accent:var(--red); --accent-deep:var(--red-deep);
  --ink-2:var(--text); --mute:var(--muted); --on-primary:var(--white);
  --canvas:var(--white); --cream:var(--soft); --line:var(--rule); --line-2:var(--rule-2);
  --dark-2:var(--darker); --espresso:var(--dark); --espresso-2:var(--darker);

  /* Shape: one soft radius scale. xs tags, badges, checkboxes; sm fields, the file box, FAQ
     items; md cards, tiles, panels, photos; lg large blocks (map frame, form panel, facts grid);
     pill every button and the small switches. --r-xl (starter templates) is the large radius. */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:var(--r-lg); --pill:999px;
  /* cards on light sections: a very soft shadow, a little stronger when lifted on hover */
  --shadow-card:0 1px 2px rgba(var(--ink-rgb),.04),0 8px 24px -12px rgba(var(--ink-rgb),.12);
  --shadow-card-hover:0 2px 4px rgba(var(--ink-rgb),.06),0 16px 32px -14px rgba(var(--ink-rgb),.20);
  --e1:none;
  --e2:0 1px 2px rgba(var(--ink-rgb),.06);
  --e3:0 18px 44px -26px rgba(var(--ink-rgb),.40);
  --ts-font-body:"Sofia Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ts-font-display:"Sofia Sans Semi Condensed","Sofia Sans",system-ui,sans-serif;
  --ts-font-mono:var(--ts-font-body);
  --container:1200px;
}
:root[data-look="navy"]{
  /* B: navy */
  --ink:#0F1E33;
  --dark:#0F1E33;
  --darker:#0A1526;
  --soft:#F1F4F8;
  --rule:#DCE3EC;
  --rule-2:#C3CDD9;
  --text:#3B4A5E;
  --muted:#5E6B7D;
  --text-on-dark:#C8D2DE;
  --muted-on-dark:#93A3B8;
  --rule-on-dark:#23344D;
  --ink-rgb:15,30,51;
  --darker-rgb:10,21,38;
  --hero-overlay:linear-gradient(90deg,rgba(10,21,38,.90) 0%,rgba(10,21,38,.82) 45%,rgba(10,21,38,.30) 100%);
  --hero-overlay-sm:linear-gradient(180deg,rgba(10,21,38,.72) 0%,rgba(10,21,38,.82) 35%,rgba(10,21,38,.84) 100%);
  --map-sea:#050C17; --map-land:#33496B; --map-border:rgba(255,255,255,.14);
}
:root[data-look="sea"]{
  /* C: sea (deep teal). The given values, plus the derived ones: rule-2 (form fields), the rgb
     triplets, the overlays (rgba(7,29,34) with the navy stops) and the corridor map. */
  --ink:#0C2A30;
  --dark:#0C2A30;
  --darker:#071D22;
  --soft:#EFF5F5;
  --rule:#D7E4E5;
  --rule-2:#BECED2;
  --text:#3A5157;
  --muted:#5B7176;
  --text-on-dark:#C3D6D8;
  --muted-on-dark:#8FAAAE;
  --rule-on-dark:#1E4048;
  --red-on-dark:#FF5C4D;
  --ink-rgb:12,42,48;
  --darker-rgb:7,29,34;
  --hero-overlay:linear-gradient(90deg,rgba(7,29,34,.90) 0%,rgba(7,29,34,.82) 45%,rgba(7,29,34,.30) 100%);
  --hero-overlay-sm:linear-gradient(180deg,rgba(7,29,34,.72) 0%,rgba(7,29,34,.82) 35%,rgba(7,29,34,.84) 100%);
  --map-sea:#030E11; --map-land:#2D5558; --map-border:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--ts-font-body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;letter-spacing:normal}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* an email address never breaks at its hyphen (ts_esc_text() wraps the ones in running text) */
a[href^="mailto:"],.ts-nowrap{white-space:nowrap}
button{font-family:inherit;cursor:pointer}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{margin:0;font-family:var(--ts-font-display);font-weight:700;letter-spacing:0}
/* Mono eyebrow / kicker — the dispatch-label system. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ts-font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.85}
.d-xxl{font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.01em;font-weight:700;text-transform:uppercase}
.d-xl{font-size:clamp(32px,4.2vw,52px);line-height:1.02;letter-spacing:-.005em;font-weight:700}
.d-lg{font-size:clamp(24px,2.5vw,32px);line-height:1.12;letter-spacing:0;font-weight:600}
.lead{font-size:18px;line-height:1.6;color:var(--ink-2)}
.mute{color:var(--mute)}
.sec{padding:82px 0}
.center{text-align:center}

/* reveal on scroll */
/* hidden only when JavaScript runs (html.js, set in the head): without it everything shows */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].in{opacity:1;transform:none}
/* Reduced-motion / no-JS safety: never keep content hidden. */
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}}
[data-reveal][data-d="1"]{transition-delay:.08s}[data-reveal][data-d="2"]{transition-delay:.16s}[data-reveal][data-d="3"]{transition-delay:.24s}
/* Hero reveal runs on page LOAD via CSS (immune to NitroPack's deferred/delayed JS).
   Higher specificity => hero elements compute as VISIBLE by default, so critical-CSS
   snapshots them visible and they're never left blank. Below-the-fold still uses JS .in */
@keyframes ts-hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
[class*="hero"] [data-reveal]{opacity:1;transform:none;animation:ts-hero-in .7s cubic-bezier(.22,.61,.36,1) both}
[class*="hero"] [data-reveal][data-d="1"]{animation-delay:.08s}
[class*="hero"] [data-reveal][data-d="2"]{animation-delay:.16s}
[class*="hero"] [data-reveal][data-d="3"]{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){[class*="hero"] [data-reveal]{animation:none}}

/* buttons: pills, solid or ghost (invert on hover). Body font, sentence case. */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:var(--pill);
  font-family:var(--ts-font-body);font-weight:600;font-size:15px;letter-spacing:.005em;
  padding:14px 26px;transition:.18s ease;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--canvas)}
.btn-primary:hover{background:var(--primary);color:var(--on-primary)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:14px 25px}
.btn-outline:hover{background:var(--ink);color:var(--canvas)}
.btn-light{background:var(--canvas);color:var(--ink)}.btn-light:hover{background:#fff}
.btn-arrow{display:inline-flex;transition:transform .2s}.btn:hover .btn-arrow{transform:translateX(3px)}
.alink{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-weight:600;font-size:14px}
.alink .a{transition:transform .2s}.alink:hover{text-decoration:underline;text-underline-offset:3px}.alink:hover .a{transform:translateX(3px)}
.tag{display:inline-flex;align-items:center;font-family:var(--ts-font-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  padding:6px 11px;border-radius:var(--r-xs);background:transparent;border:1px solid var(--line-2)}

/* ============ NAV (transparent over hero → solid on scroll) ============ */
.nav{position:absolute;top:0;left:0;right:0;z-index:60;transition:.28s ease}
@keyframes navDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.nav-in{display:flex;align-items:center;gap:28px;height:84px}
.brand img{height:56px;width:auto;transition:.28s}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{font-size:15px;padding:8px 13px;border-radius:8px;color:rgba(255,255,255,.85);transition:.15s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{font-size:13px;color:rgba(255,255,255,.75)}.lang b{color:#fff;font-weight:600}
.lang a,.mm-lang a{color:inherit;text-decoration:none;transition:color .2s}
.lang a:hover{color:#fff}
.nav.scrolled .lang a:hover,.nav.nav-onlight .lang a:hover,.nav.nav-solid .lang a:hover,.mm-lang a:hover{color:var(--ink)}
.nav.scrolled{position:fixed;animation:navDrop .32s ease;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);box-shadow:0 6px 24px -16px rgba(var(--ink-rgb),.3)}
/* slide the sticky bar out of view once the footer reaches it (JS toggles .nav--hide) */
.nav.scrolled.nav--hide{transform:translateY(-100%);opacity:0;pointer-events:none;animation:none}
.nav.scrolled .nav-in{height:70px}
.nav.scrolled .brand img{height:46px}
.nav.scrolled .nav-links a{color:var(--ink-2)}.nav.scrolled .nav-links a:hover{color:var(--ink);background:rgba(var(--ink-rgb),.05)}
.nav.scrolled .lang{color:var(--mute)}.nav.scrolled .lang b{color:var(--ink)}
/* transparent nav over a LIGHT hero (destinations): no bar, but dark links so they read */
.nav.nav-onlight .nav-links a{color:var(--ink-2)}
.nav.nav-onlight .nav-links a:hover{color:var(--ink);background:rgba(var(--ink-rgb),.05)}
.nav.nav-onlight .lang{color:var(--mute)}.nav.nav-onlight .lang b{color:var(--ink)}
.nav.nav-onlight .nav-burger{color:var(--ink)}

/* ============ HERO (full-bleed) ============ */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;background:var(--dark)}
.hero-bg{position:absolute;inset:0;z-index:0;transform-origin:70% 50%;transform:scale(1.18);animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1.1)}}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(102deg,rgba(var(--darker-rgb),.92) 0%,rgba(var(--darker-rgb),.55) 48%,rgba(var(--darker-rgb),.18) 100%),
  linear-gradient(0deg,rgba(var(--darker-rgb),.78),transparent 46%)}
.hero-in{position:relative;z-index:1;text-align:left;padding:120px 0 40px;padding-left:clamp(10px,2vw,34px);flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.hero-in>*{max-width:620px}
.hero-in .lead{max-width:48ch}
.hero h1{margin:22px 0 22px;max-width:15ch;text-shadow:0 2px 34px rgba(0,0,0,.45)}
.hero h1 .em{color:var(--red-on-dark)}
.hero .lead{color:rgba(255,255,255,.92);max-width:48ch;margin-bottom:30px;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero .eyebrow{color:var(--primary)}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-tags{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:26px}
.hero-tags .t{font-size:13px;color:rgba(255,255,255,.8);padding:6px 0;position:relative}
.hero-meta{position:relative;z-index:1;flex:0 0 auto;border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(0deg,rgba(var(--darker-rgb),.55),transparent)}
.hero-meta-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-left:clamp(10px,2vw,34px)}
.hero-meta .m{padding:22px 26px 26px;border-right:1px solid rgba(255,255,255,.12)}
.hero-meta .m:last-child{border-right:0}
.hero-meta .m b{display:block;color:#fff;font-weight:500;font-size:15px;margin-bottom:3px}
.hero-meta .m span{font-size:13px;color:rgba(255,255,255,.7);line-height:1.45}

/* ============ SERVICES ============ */
.services{position:relative;background:var(--soft);overflow:hidden}
.services::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:1000px;height:420px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.16),transparent 70%);filter:blur(8px);pointer-events:none}
.sec-head{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:52px}
.sec-head h2{margin-top:16px}
.sec-head .r{color:var(--mute);font-size:16px;max-width:42ch;justify-self:end}
.cards{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-right:0}
.card{position:relative;background:transparent;border:0;border-right:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-md);padding:32px 28px 30px;
  box-shadow:none;transition:.2s ease;overflow:hidden}
.card:nth-child(-n+3){border-top:0}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.card:hover{box-shadow:none;transform:none;background:var(--soft)}
.card:hover::before{transform:scaleX(1)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.card .ico{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.card .ico svg{width:22px;height:22px}
.card .idx{font-family:var(--ts-font-mono);font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.card h3{font-size:21px;font-weight:600;letter-spacing:0;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--mute);margin:0 0 14px;line-height:1.6}
.card .alink{opacity:0;transform:translateX(-4px);transition:.22s;font-size:14px}
.card:hover .alink{opacity:1;transform:none}

/* ============ PROCESS ============ */
.proc-head{max-width:640px;margin:0 auto 56px;text-align:center}
.proc-head h2{margin-top:14px}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.steps::before{content:"";position:absolute;top:21px;left:11%;right:11%;height:1px;background:linear-gradient(90deg,var(--line),var(--line-2),var(--line));z-index:0}
.step{position:relative;text-align:center}
.step .node{width:44px;height:44px;border-radius:50%;background:var(--canvas);border:1px solid var(--ink);color:var(--ink);
  display:grid;place-items:center;font-family:var(--ts-font-mono);font-weight:500;margin:0 auto 20px;box-shadow:none;position:relative;z-index:1;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.step h4{font-size:18px;font-weight:600;letter-spacing:0;margin-bottom:7px}
.step p{font-size:14px;color:var(--mute);margin:0;line-height:1.5;max-width:24ch;margin-inline:auto}

/* ============ WHY US ============ */
.why-in{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.why-list{margin-top:28px;display:flex;flex-direction:column}
.why-item{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.why-item:first-child{border-top:0}
.why-item .n{color:var(--primary-deep);font-size:14px;width:26px;flex:none;padding-top:2px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.why-item h4{font-size:18px;font-weight:500;letter-spacing:-.2px;margin-bottom:4px}
.why-item p{margin:0;color:var(--mute);font-size:15px;line-height:1.55}
.why-media{position:relative}
.why-pic{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3);aspect-ratio:4/4.3}
.why-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.why-media:hover .why-pic img{transform:scale(1.05)}
.why-float{position:absolute;right:-18px;bottom:32px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:18px 20px;max-width:230px}
.why-float .q{font-size:14.5px;color:var(--ink);line-height:1.5;font-style:italic}
.why-float .c{margin-top:10px;font-size:12px;color:var(--mute)}

/* ============ DESTINATIONS (dark) ============ */
.dest{position:relative;color:#fff;overflow:hidden;background:var(--dark)}
.dest-bg{position:absolute;inset:0;z-index:0}
.dest-bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.dest-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--ink-rgb),.96),rgba(var(--ink-rgb),.7) 60%,rgba(var(--ink-rgb),.55)),
  radial-gradient(50% 60% at 85% 30%,rgba(var(--red-rgb),.2),transparent 60%)}
.dest-in{position:relative;z-index:1;max-width:680px}
.dest h2{color:#fff;margin:14px 0 18px}
.dest .lead{color:rgba(255,255,255,.82)}
.dest-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.dest-pills .p{font-size:14px;padding:9px 15px;border-radius:var(--pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--soft);transition:.16s}
.dest-pills .p:hover{background:rgba(var(--red-rgb),.16);border-color:rgba(var(--red-rgb),.4);color:#fff}
.dest-note{margin-top:18px;color:rgba(255,255,255,.6);font-size:14px}

/* ============ TRUST ============ */
.trust{text-align:center;background:var(--cream)}
.trust .w{max-width:820px;margin:0 auto}
.trust .mark{font-size:54px;line-height:0;color:var(--primary);font-weight:600}
.trust blockquote{margin:8px 0 0;font-size:clamp(23px,2.7vw,34px);line-height:1.32;letter-spacing:-.4px;font-weight:300;color:var(--ink)}
.trust .who{margin-top:26px;color:var(--muted);font-size:14px}

/* ============ FINAL CTA (dark photo) ============ */
.final{position:relative;overflow:hidden;color:#fff}
.final-bg{position:absolute;inset:0;z-index:0}
.final-bg img,.final-bg video{width:100%;height:100%;object-fit:cover;display:block}
.final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(var(--darker-rgb),.95),rgba(var(--darker-rgb),.62) 60%,rgba(var(--darker-rgb),.42))}
.final-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center;padding:104px 24px}
.final h2{color:#fff;margin:14px 0 18px;font-size:clamp(29px,3.6vw,43px)}
.final .lead{color:rgba(255,255,255,.85);max-width:42ch}
.final-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);
  border-radius:var(--r-xl);padding:30px;display:flex;flex-direction:column;gap:11px}
.final-card input,.final-card textarea{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm);padding:14px 15px;color:#fff;font-family:inherit;font-size:15px;font-weight:300}
.final-card input::placeholder,.final-card textarea::placeholder{color:rgba(255,255,255,.6)}
.final-card input:focus,.final-card textarea:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,.1)}
.final-card .row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.final-card textarea{resize:vertical;min-height:64px}
.final-card .btn{justify-content:center;margin-top:6px}
.final-card .fine{display:flex;align-items:flex-start;justify-content:center;gap:7px;font-size:12px;color:rgba(255,255,255,.6);margin-top:4px;line-height:1.5}
.final-card .fine svg{flex:none;width:15px;height:15px;color:var(--primary);margin-top:1px}

/* ============ FOOTER ============ */
.footer{background:#fff;border-top:1px solid var(--line);padding:64px 0 28px;color:var(--mute)}
.fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:46px}
.foot-brand img{height:52px;margin-bottom:16px}
.foot-brand p{font-size:14px;line-height:1.6;max-width:30ch}
.footer h5{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 16px}
.footer h5 a{color:inherit;transition:color .15s}.footer h5 a:hover{color:var(--primary-deep)}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer ul a,.footer ul li{font-size:14px;color:var(--mute)}.footer ul a:hover{color:var(--primary-deep)}
.foot-contacts a{display:inline-flex;align-items:center;gap:10px}
.foot-contacts a svg{flex:none;width:17px;height:17px;color:var(--primary);transition:transform .18s}
.foot-contacts a:hover svg{transform:translateY(-1px)}
.fb{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px}
.fb .line{font-style:italic;color:var(--mute)}

/* responsive */
@media (max-width:980px){
  .sec-head,.why-in,.final-in{grid-template-columns:1fr;gap:40px}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:36px 24px}.steps::before{display:none}
  .sec-head .r{justify-self:start}
  .why-media{order:-1}.why-pic{aspect-ratio:16/10}
  .hero-meta-in{grid-template-columns:1fr 1fr}.hero-meta .m:nth-child(2){border-right:0}
  .fg{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .sec{padding:76px 0}
  .nav-links,.lang{display:none}
  .hero{min-height:auto}.hero-in{padding:130px 0 48px}
  .hero-bg::after{background:linear-gradient(102deg,rgba(var(--darker-rgb),.9) 0%,rgba(var(--darker-rgb),.62) 52%,rgba(var(--darker-rgb),.42) 100%),linear-gradient(0deg,rgba(var(--darker-rgb),.72),transparent 52%),linear-gradient(rgba(var(--darker-rgb),.12),rgba(var(--darker-rgb),.12))}
  .cards{grid-template-columns:1fr}.steps{grid-template-columns:1fr}
  .hero-meta-in{grid-template-columns:1fr 1fr}
  .final-card .row{grid-template-columns:1fr}
  .why-float{right:12px;left:12px;max-width:none}
  .fg{grid-template-columns:1fr}
}

/* ============ services dropdown in nav ============ */
.has-drop{position:relative;display:flex;align-items:center}
.has-drop>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.65}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e2);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;z-index:70}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-size:14.5px;color:var(--ink-2) !important;background:transparent !important}
.drop a:hover{background:var(--soft) !important;color:var(--ink) !important}
@media (max-width:680px){.has-drop{display:none}}


/* ============ nav solid on inner pages (no dark hero behind) ============ */
.nav.nav-solid{background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);box-shadow:0 6px 24px -16px rgba(var(--ink-rgb),.3)}
.nav.nav-solid .nav-in{height:70px}
.nav.nav-solid .brand img{height:46px}
.nav.nav-solid .nav-links a{color:var(--ink-2)}
.nav.nav-solid .nav-links a:hover{color:var(--ink);background:rgba(var(--ink-rgb),.05)}
.nav.nav-solid .lang{color:var(--mute)}.nav.nav-solid .lang b{color:var(--ink)}


/* ==================================================================
   DESTINATIONS - 3 comparison variants (temporary; one will win)
   ================================================================== */
.dest-variant{position:relative;overflow:hidden}
.vlabel{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:40;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(var(--red-rgb),.95);padding:7px 16px;border-radius:var(--pill);box-shadow:0 10px 26px -8px rgba(0,0,0,.55);white-space:nowrap}

/* shared copy */
.dest-copy .eyebrow{color:var(--primary)}
.dest-copy h2{color:#fff;margin:14px 0 16px}
.dest-copy .lead{color:rgba(255,255,255,.78);max-width:46ch}
.dest-tagline{margin-top:26px;font-size:21px;font-weight:600;letter-spacing:-.3px;color:#fff;line-height:1.3}
.dest-tagline .hl{color:var(--primary)}

/* shared routes card */
.routes-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-xl);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:24px 24px 20px;box-shadow:0 34px 80px -34px rgba(0,0,0,.75)}
.routes-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.routes-head .t{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.routes-head .hub{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--primary);background:rgba(var(--red-rgb),.12);border:1px solid rgba(var(--red-rgb),.3);padding:5px 11px;border-radius:var(--pill)}
.routes-head .hub::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(var(--red-rgb),.22)}
.routes-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.route{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--r-md);transition:.18s ease;border:1px solid transparent}
.route:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.route .flag{width:27px;height:20px;border-radius:var(--r-xs);object-fit:cover;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.route .cc{font-size:14.5px;color:#fff;font-weight:500;line-height:1.25;white-space:nowrap}
.route .code{font-size:11.5px;letter-spacing:.09em;color:rgba(255,255,255,.5);margin-top:2px;font-feature-settings:"tnum";transition:.18s ease}
.route:hover .code{color:var(--primary);transform:translateX(2px)}
.routes-foot{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.62);line-height:1.5}
.routes-foot .plus{color:var(--primary);font-weight:700;font-size:17px;line-height:1.1;flex:none}

/* V1 - data card + ambient arcs map */
.destv1{background:var(--dark);color:#fff}
.destv1 .bg{position:absolute;inset:0;z-index:0}
.destv1 .bg img{width:100%;height:100%;object-fit:cover;opacity:.72}
.destv1 .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--darker-rgb),.8),rgba(var(--darker-rgb),.5) 52%,rgba(var(--darker-rgb),.34)),radial-gradient(60% 75% at 84% 28%,rgba(var(--red-rgb),.16),transparent 62%)}
.destv1 .dest-copy h2,.destv1 .dest-copy .lead,.destv1 .dest-tagline{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.destv1 .inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}

/* V2 - card + cinematic branded-map showpiece */
.destv2{background:var(--darker);color:#fff}
.destv2 .top{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-bottom:46px}
.destv2 .showpiece{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 90px -40px rgba(0,0,0,.8)}
.destv2 .showpiece>img{width:100%;height:auto;display:block;transition:transform 1.4s ease}
.destv2 .showpiece:hover>img{transform:scale(1.045)}
.destv2 .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:48px 22px 18px;background:linear-gradient(0deg,rgba(var(--darker-rgb),.9),transparent)}
.destv2 .cap .t{font-size:15px;font-weight:600;color:#fff}
.destv2 .cap .s{font-size:13px;color:rgba(255,255,255,.62);margin-top:3px;max-width:46ch}
.destv2 .cap .hub{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--primary);background:rgba(var(--red-rgb),.14);border:1px solid rgba(var(--red-rgb),.3);padding:6px 12px;border-radius:var(--pill);white-space:nowrap}

/* V3 - immersive branded-map backdrop + flag tablets */
.destv3{background:var(--darker);color:#fff}
.destv3 .bg{position:absolute;inset:0;z-index:0}
.destv3 .bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.destv3 .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--darker-rgb),.88),rgba(var(--darker-rgb),.6) 42%,rgba(var(--darker-rgb),.92)),radial-gradient(55% 55% at 50% 36%,rgba(var(--red-rgb),.16),transparent 62%)}
.destv3 .inner{position:relative;z-index:1;text-align:center;max-width:900px;margin:0 auto}
.destv3 .eyebrow{color:var(--primary)}
.destv3 h2{color:#fff;margin:14px auto 16px;max-width:18ch}
.destv3 .lead{color:rgba(255,255,255,.82);max-width:54ch;margin:0 auto}
.tablets{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:38px 0 28px}
.tablet{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.18s ease;text-align:left}
.tablet:hover{background:rgba(var(--red-rgb),.13);border-color:rgba(var(--red-rgb),.42);transform:translateY(-3px)}
.tablet img{width:30px;height:21px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.tablet .c{font-size:14px;font-weight:500;color:#fff;line-height:1.2}
.tablet .k{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.07em;margin-top:2px}

@media (max-width:980px){
  .destv1 .inner,.destv2 .top{grid-template-columns:1fr;gap:38px}
  .tablets{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .routes-grid{grid-template-columns:1fr}
  .tablets{grid-template-columns:1fr 1fr}
  .destv2 .cap{flex-direction:column;align-items:flex-start}
  .vlabel{font-size:10px;padding:6px 12px}
}

/* routes-foot clickable → contact */
.routes-foot{cursor:pointer}
.routes-foot .plus{transition:transform .2s ease}
.routes-foot:hover{color:rgba(255,255,255,.95)}
.routes-foot:hover .plus{transform:rotate(90deg)}

/* ============ INTRO / ABOUT (under hero, before services) ============ */
.intro{background:var(--canvas)}
.intro-head{max-width:780px;margin-bottom:52px}
.intro-head h2{margin:16px 0 18px}
.intro-head h2 .hl{color:var(--primary-deep)}
.intro-head .lead{color:var(--ink-2);max-width:68ch}
.intro-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:center}
.intro-pic{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3);aspect-ratio:4/3.2}
.intro-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.intro-pic:hover img{transform:scale(1.05)}
.intro-badge{position:absolute;left:22px;bottom:22px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:15px 19px;display:flex;align-items:baseline;gap:11px}
.intro-badge .n{font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--primary-deep);line-height:1}
.intro-badge .l{font-size:13px;color:var(--mute);max-width:15ch;line-height:1.3}
.intro-body h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.5px;line-height:1.2;margin-bottom:16px}
.intro-body .lead{color:var(--mute);margin-bottom:26px;max-width:48ch}
.intro-checks{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:16px}
.intro-checks li{display:flex;gap:14px;align-items:flex-start}
.intro-checks .ck{width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;flex:none;margin-top:1px}
.intro-checks .ck svg{width:14px;height:14px}
.intro-checks .tx{font-size:15px;color:var(--ink-2);line-height:1.5}
.intro-checks .tx b{color:var(--ink);font-weight:600}
@media (max-width:980px){.intro-grid{grid-template-columns:1fr;gap:34px}.intro-pic{aspect-ratio:16/10}.intro-media{order:-1}}

/* ============ INTRO - 3 premium variants to compare (temporary) ============ */
.introv1,.introv2,.introv3{background:var(--canvas)}

/* V1 - editorial + KPI band */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:56px;background:var(--soft)}
.kpi .k{padding:26px 28px;border-right:1px solid var(--line)}
.kpi .k:last-child{border-right:0}
.kpi .n{font-size:36px;font-weight:800;letter-spacing:-1.5px;color:var(--ink);line-height:1;font-feature-settings:"tnum"}
.kpi .k:first-child .n{color:var(--primary-deep)}
.kpi .l{font-size:13.5px;color:var(--mute);margin-top:9px;line-height:1.4;max-width:22ch}

/* V2 - dark premium panel */
.darkpanel{position:relative;background:linear-gradient(160deg,var(--dark),var(--darker));border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:64px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(var(--darker-rgb),.55)}
.darkpanel::before{content:"";position:absolute;top:-130px;right:-80px;width:560px;height:440px;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.22),transparent 70%);pointer-events:none}
.dp-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.dp-text .eyebrow{color:var(--primary)}
.dp-text h2{color:#fff;margin:16px 0 18px}
.introv2 .hl{color:var(--primary)}
.dp-text .lead{color:rgba(255,255,255,.78);margin-bottom:26px;max-width:48ch}
.dp-text .intro-checks{margin-bottom:30px}
.introv2 .intro-checks .ck{background:rgba(var(--red-rgb),.16);color:var(--primary)}
.introv2 .intro-checks .tx{color:rgba(255,255,255,.78)}
.introv2 .intro-checks .tx b{color:#fff}
.dp-media .intro-pic{aspect-ratio:4/3.4;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}

/* V3 - big visual + floating glass stat cards */
.v3-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.v3-media{position:relative}
.v3-media .intro-pic{aspect-ratio:4/3.3;box-shadow:var(--e3)}
.float-card{position:absolute;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:15px 19px;display:flex;align-items:baseline;gap:10px}
.float-card .n{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--primary-deep);line-height:1}
.float-card .l{font-size:12.5px;color:var(--mute);max-width:13ch;line-height:1.3}
.float-card.fc1{right:-24px;top:40px}
.float-card.fc2{right:-24px;bottom:48px}
.v3-body .eyebrow{color:var(--primary-deep)}
.v3-body h2{margin:16px 0 18px}
.v3-body .lead{color:var(--ink-2);margin-bottom:26px;max-width:46ch}

@media (max-width:980px){
  .kpi{grid-template-columns:1fr 1fr}
  .kpi .k:nth-child(2){border-right:0}
  .kpi .k:nth-child(1),.kpi .k:nth-child(2){border-bottom:1px solid var(--line)}
  .dp-grid{grid-template-columns:1fr;gap:38px}.darkpanel{padding:42px}.dp-media{order:-1}
  .v3-grid{grid-template-columns:1fr;gap:40px}.v3-media{order:-1}
  .float-card.fc1{right:14px;top:14px}.float-card.fc2{right:14px;bottom:14px}
}
@media (max-width:680px){
  .kpi{grid-template-columns:1fr}.kpi .k{border-right:0;border-bottom:1px solid var(--line)}.kpi .k:last-child{border-bottom:0}
  .darkpanel{padding:28px;border-radius:22px}
  .float-card{position:static;margin-top:10px}
}

/* ============ INTRO - premium GRAPHIC variants (round 2: A/B/C) ============ */
.introa{background:linear-gradient(180deg,#ffffff,var(--white))}
.introb{background:var(--soft)}
.introc{background:#fff}

/* shared decorative graphics */
.dotgrid{position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(var(--ink-rgb),.06) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.orb.o-orange{background:radial-gradient(circle,rgba(var(--red-rgb),.30),transparent 70%)}
.rings{position:absolute;z-index:0;width:560px;height:560px;left:-180px;top:-130px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 38px,rgba(var(--red-rgb),.11) 38px 39px);-webkit-mask-image:radial-gradient(circle,#000,transparent 68%);mask-image:radial-gradient(circle,#000,transparent 68%);pointer-events:none}

/* ---- Variant A: dashboard card + dot grid ---- */
.introa .inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.04fr;gap:60px;align-items:center}
.introa .eyebrow{color:var(--primary-deep)}
.introa h2{margin:16px 0 18px}
.introa .lead{color:var(--ink-2);max-width:46ch;margin-bottom:22px}
.dashcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e3);overflow:hidden}
.dashcard .dc-top{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
.dashcard .live{display:inline-flex;align-items:center;gap:7px;color:var(--primary-deep)}
.dashcard .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);animation:mlpulse 2s infinite}
@keyframes mlpulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--red-rgb),.22)}50%{box-shadow:0 0 0 8px rgba(var(--red-rgb),0)}}
.dashcard .dc-pic{height:236px}.dashcard .dc-pic img{width:100%;height:100%;object-fit:cover}
.dashcard .dc-stats{display:grid;grid-template-columns:repeat(3,1fr)}
.dashcard .dc-stats .s{padding:22px 20px;border-right:1px solid var(--line)}
.dashcard .dc-stats .s:last-child{border-right:0}
.dashcard .dc-stats .n{font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--ink);line-height:1;font-feature-settings:"tnum"}
.dashcard .dc-stats .s:first-child .n{color:var(--primary-deep)}
.dashcard .dc-stats .l{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.35}

/* ---- Variant B: bento grid ---- */
.introb .container{position:relative;z-index:1}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
.bento>div{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;padding:26px;position:relative;overflow:hidden;box-shadow:var(--e1)}
.b-hero{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,#fff,var(--soft))}
.b-hero .eyebrow{color:var(--primary-deep)}
.b-hero h2{margin:14px 0 16px}
.b-hero .lead{color:var(--ink-2);font-size:15.5px;margin-bottom:22px;max-width:42ch}
.b-img{grid-column:span 2;grid-row:span 2;padding:0}
.b-img img{width:100%;height:100%;object-fit:cover}
.b-stat{display:flex;flex-direction:column;justify-content:center}
.b-stat .n{font-size:42px;font-weight:800;letter-spacing:-1.5px;line-height:1;font-feature-settings:"tnum"}
.b-stat .l{font-size:13px;color:var(--mute);margin-top:9px;line-height:1.4}
.b-accent{background:linear-gradient(145deg,var(--primary),var(--primary-deep));border:0;color:#fff;box-shadow:0 18px 40px -18px rgba(var(--red-rgb),.6)}
.b-accent .n{color:#fff}.b-accent .l{color:rgba(255,255,255,.92)}
.b-wide{grid-column:span 2;display:flex;align-items:center;gap:16px}
.b-icon .ic{width:44px;height:44px;border-radius:var(--r-sm);background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;flex:none}
.b-icon .ic svg{width:21px;height:21px}
.b-icon h4{font-size:16px;margin-bottom:5px;letter-spacing:-.2px}
.b-icon p{font-size:13.5px;color:var(--mute);margin:0;line-height:1.5}

/* ---- Variant C: editorial + rings + icon feature cards ---- */
.introc .inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.introc .eyebrow{color:var(--primary-deep)}
.introc h2{margin:16px 0 18px}
.introc .lead{color:var(--ink-2);max-width:46ch;margin-bottom:24px}
.cfeatures{display:grid;gap:12px}
.cfeature{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--e1);transition:.2s ease}
.cfeature:hover{box-shadow:var(--e2);transform:translateY(-2px);border-color:var(--line-2)}
.cfeature .ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;flex:none}
.cfeature .ic svg{width:20px;height:20px}
.cfeature h4{font-size:15.5px;margin-bottom:3px;letter-spacing:-.2px}
.cfeature p{font-size:13.5px;color:var(--mute);margin:0;line-height:1.45}
.c-media{position:relative}
.c-media .intro-pic{aspect-ratio:4/4.2;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3)}
.c-media .intro-pic img{width:100%;height:100%;object-fit:cover}
.c-chip{position:absolute;left:-22px;bottom:34px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:16px 20px;display:flex;align-items:baseline;gap:10px}
.c-chip .n{font-size:30px;font-weight:800;color:var(--primary-deep);letter-spacing:-1px;line-height:1}
.c-chip .l{font-size:12.5px;color:var(--mute);max-width:13ch;line-height:1.3}

@media (max-width:980px){
  .introa .inner,.introc .inner{grid-template-columns:1fr;gap:40px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-hero,.b-img,.b-wide{grid-column:span 2}
}
@media (max-width:680px){
  .bento{grid-template-columns:1fr}.b-hero,.b-img,.b-wide{grid-column:span 1}
  .dashcard .dc-stats{grid-template-columns:1fr}.dashcard .dc-stats .s{border-right:0;border-bottom:1px solid var(--line)}
  .c-chip{position:static;margin-top:12px}.rings{display:none}
}

/* ============ Stripe-style utility backgrounds (reusable) ============ */
.bg-mesh{background:
  radial-gradient(38% 50% at 10% 12%,rgba(var(--red-rgb),.13),transparent 60%),
  radial-gradient(42% 55% at 92% 20%,rgba(var(--red-rgb),.08),transparent 62%),
  radial-gradient(50% 55% at 72% 102%,rgba(var(--red-rgb),.11),transparent 60%),
  var(--canvas)}
.bg-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}

/* ============ INTRO - elevated premium (Variant C +) ============ */
.introx{position:relative;overflow:hidden}
.introx .tiltgrid{position:absolute;z-index:0;width:780px;height:700px;right:-150px;top:-200px;pointer-events:none;
  background-image:linear-gradient(rgba(var(--ink-rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.06) 1px,transparent 1px);
  background-size:42px 42px;transform:perspective(900px) rotateX(34deg) rotate(14deg);
  -webkit-mask-image:radial-gradient(circle at 58% 28%,#000,transparent 62%);mask-image:radial-gradient(circle at 58% 28%,#000,transparent 62%)}
.introx .inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.introx .eyebrow{color:var(--primary-deep)}
.introx h2{margin:16px 0 18px}
.introx .lead{color:var(--ink-2);max-width:46ch;margin-bottom:26px}
.feats{display:grid;gap:12px}
.feat{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid var(--line);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:var(--e1);overflow:hidden;transition:.22s ease}
.feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);transform:scaleY(0);transform-origin:top;transition:.25s ease}
.feat:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--line-2)}
.feat:hover::before{transform:scaleY(1)}
.feat .ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;flex:none}
.feat .ic svg{width:20px;height:20px}
.feat h4{font-size:15.5px;margin-bottom:3px;letter-spacing:-.2px}
.feat p{font-size:13.5px;color:var(--mute);margin:0;line-height:1.45}
.introx .c-media{position:relative}
.introx .c-frame{position:relative;border-radius:26px;padding:1.5px;background:linear-gradient(150deg,rgba(var(--red-rgb),.65),rgba(255,255,255,.12) 48%,rgba(var(--red-rgb),.3));box-shadow:var(--e3)}
.introx .c-frame .intro-pic{border-radius:24px;overflow:hidden;aspect-ratio:4/4.15}
.introx .c-frame .intro-pic img{width:100%;height:100%;object-fit:cover}
.introx .c-media::after{content:"";position:absolute;inset:-28px -28px 4px;z-index:-1;background:radial-gradient(50% 46% at 62% 42%,rgba(var(--red-rgb),.4),transparent 70%);filter:blur(36px)}
.introx .c-chip{position:absolute;left:-22px;bottom:30px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:16px 20px;display:flex;align-items:baseline;gap:10px}
.introx .c-chip .n{font-size:32px;font-weight:800;color:var(--primary-deep);letter-spacing:-1px;line-height:1}
.introx .c-chip .l{font-size:12.5px;color:var(--mute);max-width:13ch;line-height:1.3}
.introx .c-pill{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(var(--ink-rgb),.66);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);padding:8px 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.introx .c-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);animation:mlpulse 2s infinite}
@media (max-width:980px){.introx .inner{grid-template-columns:1fr;gap:42px}.introx .c-media{order:-1}.introx .tiltgrid{opacity:.55}}
@media (max-width:680px){.introx .c-chip{position:static;margin-top:14px}.introx .tiltgrid{display:none}}

/* ============ generic premium media (used by D/E/F) ============ */
.gmedia{position:relative;z-index:1}
.gframe{position:relative;border-radius:26px;padding:1.5px;background:linear-gradient(150deg,rgba(var(--red-rgb),.65),rgba(255,255,255,.12) 48%,rgba(var(--red-rgb),.3));box-shadow:var(--e3)}
.gframe .intro-pic{border-radius:24px;overflow:hidden;aspect-ratio:4/4.15}
.gframe .intro-pic img{width:100%;height:100%;object-fit:cover}
.gmedia::after{content:"";position:absolute;inset:-28px -28px 4px;z-index:-1;background:radial-gradient(50% 46% at 62% 42%,rgba(var(--red-rgb),.4),transparent 70%);filter:blur(36px)}
.gchip{position:absolute;left:-22px;bottom:30px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:16px 20px;display:flex;align-items:baseline;gap:10px}
.gchip .n{font-size:32px;font-weight:800;color:var(--primary-deep);letter-spacing:-1px;line-height:1}
.gchip .l{font-size:12.5px;color:var(--mute);max-width:13ch;line-height:1.3}
.gpill{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(var(--ink-rgb),.62);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);padding:8px 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.gpill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);animation:mlpulse 2s infinite}

/* ============ E - dark tech-grid (perspective floor + glow horizon) ============ */
.introy{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 50% -10%,var(--dark),var(--darker) 62%)}
.introy .techfloor{position:absolute;left:-10%;right:-10%;bottom:0;height:58%;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(var(--red-rgb),.18) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--red-rgb),.10) 1px,transparent 1px);background-size:48px 48px;transform:perspective(520px) rotateX(60deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000);opacity:.6}
.introy .glowline{position:absolute;left:0;right:0;top:44%;height:1px;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--red-rgb),.7),transparent);box-shadow:0 0 34px 7px rgba(var(--red-rgb),.28)}
.introy .inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.introy .eyebrow{color:var(--primary)}
.introy h2{color:#fff;margin:16px 0 18px}
.introy .hl{color:var(--primary)}
.introy .lead{color:rgba(255,255,255,.78);max-width:46ch;margin-bottom:24px}
.introy .feat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.introy .feat h4{color:#fff}
.introy .feat p{color:rgba(255,255,255,.66)}
.introy .feat .ic{background:rgba(var(--red-rgb),.16);color:var(--primary)}

/* ============ F - diagonal band + halftone dots ============ */
.introz{position:relative;overflow:hidden;background:var(--canvas)}
.introz .diagband{position:absolute;inset:-12% -22%;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 40%,rgba(var(--red-rgb),.10) 40% 60%,transparent 60%)}
.introz .halftone{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;background-image:radial-gradient(rgba(var(--red-rgb),.55) 1.4px,transparent 1.5px);background-size:18px 18px;-webkit-mask-image:linear-gradient(118deg,transparent 26%,#000 50%,transparent 76%);mask-image:linear-gradient(118deg,transparent 26%,#000 50%,transparent 76%)}
.introz .inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.introz .eyebrow{color:var(--primary-deep)}
.introz h2{margin:16px 0 18px}
.introz .lead{color:var(--ink-2);max-width:46ch;margin-bottom:26px}

@media (max-width:980px){
  .introy .inner,.introz .inner{grid-template-columns:1fr;gap:42px}
  .introx .gmedia,.introy .gmedia{order:-1}
  /* introz: on mobile keep DOM order — heading + text first, image below */
}

/* F - "сложни казуси" highlighted like a marker stroke */
.introz .hl{position:relative;color:var(--ink);white-space:nowrap}
.introz .hl::before{content:"";position:absolute;z-index:-1;left:-7px;right:-9px;top:34%;bottom:6%;
  background:linear-gradient(102deg,rgba(255,92,77,.82),rgba(255,92,77,.92));
  transform:rotate(-1.7deg);border-radius:7px 11px 6px 10px}

/* ============ INTRO round-3 - bolder graphic variants G/H/I ============ */
.introlight{position:relative;overflow:hidden}
.introlight .vsplit{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.introlight .eyebrow{color:var(--primary-deep)}
.introlight h2{margin:16px 0 18px}
.introlight .lead{color:var(--ink-2);max-width:46ch;margin-bottom:26px}
.introlight .hl{position:relative;color:var(--ink);white-space:nowrap}
.introlight .hl::before{content:"";position:absolute;z-index:-1;left:-7px;right:-9px;top:34%;bottom:6%;background:linear-gradient(102deg,rgba(255,92,77,.82),rgba(255,92,77,.92));transform:rotate(-1.7deg);border-radius:7px 11px 6px 10px}

/* G - conic aurora beam (animated) */
.introg{background:var(--white)}
.introg .aurora{position:absolute;inset:-30%;z-index:0;pointer-events:none;background:radial-gradient(35% 45% at 24% 30%,rgba(var(--red-rgb),.22),transparent 60%),radial-gradient(30% 40% at 80% 26%,rgba(var(--red-rgb),.13),transparent 60%),radial-gradient(42% 50% at 60% 82%,rgba(255,92,77,.16),transparent 62%);filter:blur(46px)}
.introg .beam{position:absolute;width:170%;height:200%;left:-35%;top:-70%;z-index:0;pointer-events:none;opacity:.45;background:conic-gradient(from 200deg at 50% 50%,transparent 0 40%,rgba(var(--red-rgb),.2) 48%,transparent 56% 100%);-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);animation:mlspin 30s linear infinite}
@keyframes mlspin{to{transform:rotate(360deg)}}

/* H - node network + iso dot-plane (animated routes) */
.introh{background:linear-gradient(180deg,#fff,var(--soft))}
.introh .isoplane{position:absolute;right:-14%;top:-34%;width:920px;height:780px;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(var(--ink-rgb),.10) 1.4px,transparent 1.5px);background-size:30px 30px;transform:perspective(800px) rotateX(52deg) rotate(26deg);-webkit-mask-image:radial-gradient(circle at 55% 40%,#000,transparent 60%);mask-image:radial-gradient(circle at 55% 40%,#000,transparent 60%)}
.introh .netsvg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7}
.introh .netsvg path{stroke:rgba(var(--red-rgb),.55);stroke-width:1.4;fill:none;stroke-dasharray:5 7;filter:drop-shadow(0 0 5px rgba(var(--red-rgb),.5));animation:mldash 16s linear infinite}
.introh .netsvg circle{fill:var(--red);filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.75))}
@keyframes mldash{to{stroke-dashoffset:-240}}

/* I - topographic contours + route path */
.introi{background:#fff}
.introi .topo{position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;opacity:.55;background:repeating-radial-gradient(130% 95% at 28% 42%,transparent 0 25px,rgba(var(--red-rgb),.15) 25px 27px);-webkit-mask-image:radial-gradient(150% 120% at 28% 42%,#000,transparent 72%);mask-image:radial-gradient(150% 120% at 28% 42%,#000,transparent 72%)}
.introi .topo2{position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;opacity:.4;background:repeating-radial-gradient(120% 90% at 80% 70%,transparent 0 30px,rgba(var(--red-rgb),.10) 30px 32px);-webkit-mask-image:radial-gradient(130% 110% at 80% 70%,#000,transparent 70%);mask-image:radial-gradient(130% 110% at 80% 70%,#000,transparent 70%)}
.introi .routesvg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}
.introi .routesvg path{stroke:rgba(var(--red-rgb),.6);stroke-width:1.6;fill:none;stroke-dasharray:6 7;filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.5));animation:mldash 18s linear infinite}
.introi .routesvg circle{fill:#fff;stroke:var(--red);stroke-width:2.4;filter:drop-shadow(0 0 5px rgba(var(--red-rgb),.6))}

@media (max-width:980px){
  .introlight .vsplit{grid-template-columns:1fr;gap:42px}
  .introlight .gmedia{order:-1}
}

/* ============ H polish - animated route network + driving truck ============ */
.introh .netsvg{opacity:1}
.introh .netsvg .route{fill:none;stroke:url(#mlroute);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 9;filter:drop-shadow(0 0 5px rgba(var(--red-rgb),.5));animation:mlflow 1.7s linear infinite}
.introh .netsvg .route.r2{stroke-width:1.6;opacity:.5;animation-duration:2.6s}
.introh .netsvg .route.r3{stroke-width:1.6;opacity:.4;animation-duration:3.2s}
@keyframes mlflow{to{stroke-dashoffset:-44}}
.introh .netsvg .node{fill:var(--red);filter:drop-shadow(0 0 7px rgba(var(--red-rgb),.85))}
.introh .netsvg .node.sm{opacity:.7}
.introh .netsvg .halo{fill:rgba(var(--red-rgb),.16);transform-box:fill-box;transform-origin:center;animation:mlhalo 2.8s ease-in-out infinite}
@keyframes mlhalo{0%,100%{opacity:.55;transform:scale(.65)}50%{opacity:.12;transform:scale(1.3)}}
.introh .truck{filter:drop-shadow(0 3px 5px rgba(var(--ink-rgb),.28))}
.introh .truck .tbody{fill:var(--red)}
.introh .truck .tcab{fill:var(--red-deep)}
.introh .truck .twheel{fill:var(--dark)}
.introh .truck .twin{fill:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){
  .introh .netsvg .route,.introh .netsvg .halo,.introh .truck animateMotion,.introg .beam{animation:none}
}

/* H - richer network: web, labels, flowing shipments, left fade */
.introh .netsvg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.introh .netsvg .web path{stroke:rgba(var(--ink-rgb),.11);stroke-width:1;fill:none}
.introh .netsvg .nlabel{fill:rgba(var(--ink-rgb),.4);font-size:11px;font-weight:700;letter-spacing:.1em;font-family:Manrope,system-ui,sans-serif}
.introh .netsvg .pulse{fill:#fff;stroke:var(--red);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.85))}

/* ============ J - combo: advanced network/truck (.netflow) on F-style bg ============ */
.introj{background:var(--canvas)}
.introj .diagband{position:absolute;inset:-12% -22%;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 40%,rgba(var(--red-rgb),.10) 40% 60%,transparent 60%)}
.introj .halftone{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(var(--red-rgb),.5) 1.4px,transparent 1.5px);background-size:18px 18px;-webkit-mask-image:linear-gradient(118deg,transparent 26%,#000 50%,transparent 82%);mask-image:linear-gradient(118deg,transparent 26%,#000 50%,transparent 82%)}

/* reusable advanced network */
.netflow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.netflow .web path{stroke:rgba(var(--ink-rgb),.11);stroke-width:1;fill:none}
.netflow .route{fill:none;stroke:url(#mlroute);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 9;filter:drop-shadow(0 0 5px rgba(var(--red-rgb),.5));animation:mlflow 1.7s linear infinite}
.netflow .route.r2{stroke-width:1.6;opacity:.5;animation-duration:2.6s}
.netflow .route.r3{stroke-width:1.6;opacity:.4;animation-duration:3.2s}
.netflow .node{fill:var(--red);filter:drop-shadow(0 0 7px rgba(var(--red-rgb),.85))}
.netflow .node.sm{opacity:.7}
.netflow .halo{fill:rgba(var(--red-rgb),.16);transform-box:fill-box;transform-origin:center;animation:mlhalo 2.8s ease-in-out infinite}
.netflow .nlabel{fill:rgba(var(--ink-rgb),.4);font-size:11px;font-weight:700;letter-spacing:.1em;font-family:Manrope,system-ui,sans-serif}
.netflow .pulse{fill:#fff;stroke:var(--red);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.85))}
.netflow .truck{filter:drop-shadow(0 3px 5px rgba(var(--ink-rgb),.28))}
.netflow .truck .tbody{fill:var(--red)}
.netflow .truck .tcab{fill:var(--red-deep)}
.netflow .truck .twheel{fill:var(--dark)}
.netflow .truck .twin{fill:rgba(255,255,255,.85)}

/* ============ netflow REFINED - clean route, comet, proper semi truck ============ */
.netflow{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.usrtruck path{fill:var(--red)}
.usrtruck{filter:drop-shadow(0 5px 7px rgba(var(--ink-rgb),.30))}
/* route-map scene: dashed routes (origin → destination), pins, moving shipments */
.usrtruck{display:none}
.netflow .mltruck{filter:drop-shadow(0 4px 5px rgba(var(--ink-rgb),.3))}
.netflow .mltruck .t-trailer{fill:var(--red)}
.netflow .mltruck .t-cab{fill:var(--red-deep)}
.netflow .mltruck .t-glass{fill:rgba(255,255,255,.92)}
.netflow .mltruck .t-skirt{fill:var(--dark)}
.netflow .mltruck .t-wheel{fill:var(--dark)}
.netflow .mltruck .t-hub{fill:var(--muted-on-dark)}
.netflow .rt{fill:none;stroke:var(--red);stroke-linecap:round;stroke-dasharray:13 11;stroke-width:2.3;animation:mlmove 2.8s linear infinite}
.netflow .rt.r1{opacity:.82}
.netflow .rt.r2{stroke-width:2;opacity:.6;animation-duration:3.6s}
.netflow .rt.r3{stroke-width:2.1;opacity:.74;animation-duration:3.1s}
@keyframes mlmove{to{stroke-dashoffset:-24}}
.netflow .ship{fill:#fff;stroke:var(--red);stroke-width:2.2;filter:drop-shadow(0 0 7px rgba(var(--red-rgb),.9))}
.netflow .orig{fill:var(--red);filter:drop-shadow(0 0 7px rgba(var(--red-rgb),.85))}
.netflow .orig-ring{fill:none;stroke:rgba(var(--red-rgb),.65);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:mlhalo 2.6s ease-in-out infinite}
.netflow .pin{filter:drop-shadow(0 5px 7px rgba(184,27,16,.4))}
.netflow .pin path{fill:var(--red)}
.netflow .pin .pin-dot{fill:#fff}
.netflow .rt-base{fill:none;stroke:rgba(var(--red-rgb),.30);stroke-width:1.6;stroke-linecap:round}
.netflow .rt-live{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:36 1200;filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.85));animation:mlcomet 5.5s linear infinite}
@keyframes mlcomet{to{stroke-dashoffset:-1236}}
.netflow .dot{fill:#fff;stroke:var(--red);stroke-width:2.6;filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.6))}
.netflow .dot-core{fill:var(--red);filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.7))}
.netflow .dot-glow{fill:rgba(var(--red-rgb),.15);transform-box:fill-box;transform-origin:center;animation:mlhalo 3s ease-in-out infinite}
.netflow .truck{filter:drop-shadow(0 4px 5px rgba(var(--ink-rgb),.32))}
.netflow .t-trailer{fill:var(--red)}
.netflow .t-cab{fill:var(--red-deep)}
.netflow .t-glass{fill:rgba(255,255,255,.92)}
.netflow .t-skirt{fill:var(--dark)}
.netflow .t-wheel{fill:var(--dark)}
.netflow .t-hub{fill:var(--muted-on-dark)}
.introj .halftone{opacity:.4}
.introj .diagband{background:linear-gradient(118deg,transparent 42%,rgba(var(--red-rgb),.08) 42% 60%,transparent 60%)}

/* J - use professional animated Europe-map SVG as backdrop; hide hand-built scene */
.introj .netflow{display:none}
.introj .mapbg{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:.2;-webkit-mask-image:radial-gradient(78% 78% at 52% 50%,#000,transparent);mask-image:radial-gradient(78% 78% at 52% 50%,#000,transparent)}
.introj .mapbg img{height:150%;width:auto;max-width:none;display:block}

/* J final: dotted background restored + truck animation on the right (Europe map removed → saved for Дестинации) */
.introj .mapbg{display:none}
.introj .truckanim{position:relative;z-index:1}
.introj .truckanim img{width:100%;height:auto;display:block}

/* J rearranged: header → full-width truck band → 3 feature cards row → CTA */
.introj .jhead{position:relative;z-index:1;max-width:700px}
.introj .jhead h2{margin:16px 0 16px}
.introj .jhead .lead{color:var(--ink-2);max-width:62ch}
.introj .truckband{position:relative;z-index:1;margin:36px 0 40px;border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(120% 140% at 50% 0%,var(--soft),var(--soft) 60%);border:1px solid var(--line);box-shadow:var(--e2);aspect-ratio:1180/440}
.introj .truckband img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}
.introj .jfeats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.introj .jcta{position:relative;z-index:1;margin-top:30px}
@media (max-width:900px){.introj .jfeats{grid-template-columns:1fr}.introj .truckband{aspect-ratio:16/11}}

/* ============ SERVICES - dark variants (alternating dark/light) ============ */
.svdark{position:relative;overflow:hidden;background:radial-gradient(130% 115% at 50% -25%,var(--dark),var(--darker) 60%);color:#fff}
.svdark .sv-glow{position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:1100px;height:480px;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.16),transparent 70%);pointer-events:none;z-index:0}
.svdark .sv-head{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:50px}
.svdark .sv-head .eyebrow{color:var(--primary)}
.svdark .sv-head h2{color:#fff;margin-top:16px}
.svdark .sv-head .r{color:rgba(255,255,255,.6);font-size:16px;max-width:42ch;justify-self:end}

/* SV1 - glass grid */
.sv1-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sv1-card{position:relative;display:block;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:26px;overflow:hidden;transition:.22s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sv1-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.sv1-card:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.4);background:rgba(255,255,255,.06);box-shadow:0 34px 70px -34px rgba(0,0,0,.7)}
.sv1-card:hover::before{transform:scaleX(1)}
.sv1-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.sv1-card .ico{width:46px;height:46px;border-radius:12px;background:rgba(var(--red-rgb),.14);color:var(--primary);display:grid;place-items:center}
.sv1-card .ico svg{width:22px;height:22px}
.sv1-card .idx{font-size:13px;color:rgba(255,255,255,.4);font-feature-settings:"tnum"}
.sv1-card h3{font-size:20px;color:#fff;letter-spacing:-.3px;margin-bottom:8px}
.sv1-card p{font-size:14.5px;color:rgba(255,255,255,.6);margin:0 0 14px;line-height:1.55}
.sv1-card .more{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:14px;opacity:0;transform:translateX(-4px);transition:.22s}
.sv1-card:hover .more{opacity:1;transform:none}

/* SV2 - numbered list */
.sv2-list{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.sv2-row{display:flex;gap:18px;align-items:center;padding:22px 14px;border-top:1px solid rgba(255,255,255,.1);transition:.2s ease;position:relative}
.sv2-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--primary);transform:scaleY(0);transition:.22s}
.sv2-row:hover{background:rgba(255,255,255,.03)}
.sv2-row:hover::before{transform:scaleY(1)}
.sv2-row .n{font-size:15px;color:var(--primary);font-weight:600;width:28px;flex:none;font-feature-settings:"tnum"}
.sv2-row .ic{width:38px;height:38px;border-radius:var(--r-sm);background:rgba(var(--red-rgb),.12);color:var(--primary);display:grid;place-items:center;flex:none}
.sv2-row .ic svg{width:19px;height:19px}
.sv2-row .tx{min-width:0}
.sv2-row .tx h4{color:#fff;font-size:17px;font-weight:600;letter-spacing:-.2px;margin:0 0 3px}
.sv2-row .tx p{color:rgba(255,255,255,.56);font-size:13.5px;margin:0;line-height:1.45}
.sv2-row .arr{margin-left:auto;color:var(--primary);opacity:0;transition:.2s;flex:none;font-size:18px}
.sv2-row:hover .arr{opacity:1;transform:translateX(3px)}

/* SV3 - bento (featured first) */
.sv3-bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(168px,1fr);gap:16px}
.sv3-card{position:relative;display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:24px;overflow:hidden;transition:.22s ease}
.sv3-card:hover{border-color:rgba(var(--red-rgb),.4);background:rgba(255,255,255,.06);transform:translateY(-3px)}
.sv3-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.sv3-card .ico{width:44px;height:44px;border-radius:11px;background:rgba(var(--red-rgb),.14);color:var(--primary);display:grid;place-items:center}
.sv3-card .ico svg{width:21px;height:21px}
.sv3-card .idx{font-size:13px;color:rgba(255,255,255,.4)}
.sv3-card h3{font-size:18px;color:#fff;margin-bottom:6px;letter-spacing:-.2px}
.sv3-card p{font-size:13.5px;color:rgba(255,255,255,.58);margin:0;line-height:1.5}
.sv3-card.feat{grid-column:span 2;grid-row:span 2;background:linear-gradient(155deg,rgba(var(--red-rgb),.18),rgba(255,255,255,.03));border-color:rgba(var(--red-rgb),.3)}
.sv3-card.feat .ico{width:54px;height:54px;background:rgba(var(--red-rgb),.2)}
.sv3-card.feat .ico svg{width:26px;height:26px}
.sv3-card.feat h3{font-size:28px;margin-top:auto}
.sv3-card.feat p{font-size:15.5px;color:rgba(255,255,255,.72);max-width:44ch}
.sv3-card .more{display:inline-flex;gap:6px;color:var(--primary);font-size:14.5px;margin-top:14px}

/* SV4 - gradient-border glow */
.sv4-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sv4-card{position:relative;display:block;border-radius:var(--r-lg);padding:1px;background:linear-gradient(160deg,rgba(var(--red-rgb),.5),rgba(255,255,255,.07) 55%);transition:.25s ease}
.sv4-card:hover{background:linear-gradient(160deg,rgba(var(--red-rgb),1),rgba(var(--red-rgb),.25));box-shadow:0 0 44px -12px rgba(var(--red-rgb),.5);transform:translateY(-3px)}
.sv4-card .in{background:var(--dark);border-radius:calc(var(--r-lg) - 1px);padding:26px;height:100%}
.sv4-card:hover .in{background:var(--dark)}
.sv4-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.sv4-card .ico{width:46px;height:46px;border-radius:12px;background:rgba(var(--red-rgb),.16);color:var(--primary);display:grid;place-items:center}
.sv4-card .ico svg{width:22px;height:22px}
.sv4-card .idx{font-size:13px;color:rgba(255,255,255,.4)}
.sv4-card h3{font-size:20px;color:#fff;margin-bottom:8px;letter-spacing:-.3px}
.sv4-card p{font-size:14.5px;color:rgba(255,255,255,.6);margin:0;line-height:1.55}

@media (max-width:980px){
  .svdark .sv-head{grid-template-columns:1fr;gap:18px}.svdark .sv-head .r{justify-self:start}
  .sv1-cards,.sv3-bento,.sv4-cards{grid-template-columns:1fr 1fr}
  .sv2-list{grid-template-columns:1fr}
  .sv3-card.feat{grid-column:span 2}
}
@media (max-width:680px){
  .sv1-cards,.sv3-bento,.sv4-cards{grid-template-columns:1fr}
  .sv3-card.feat{grid-column:span 1;grid-row:span 1}
}

/* ============ SERVICES dark - alt background versions (SV5-8) ============ */
/* SV5 - charcoal + grain */
.svbg5{background:var(--darker)}
.svbg5 .sv-glow{opacity:.45}
.svbg5::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}
/* SV6 - navy + dot grid */
.svbg6{background:radial-gradient(130% 115% at 50% -25%,var(--dark),var(--darker) 62%)}
.svbg6 .sv-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(85% 75% at 50% 28%,#000,transparent);mask-image:radial-gradient(85% 75% at 50% 28%,#000,transparent)}
/* SV7 - dark mesh aurora */
.svbg7{background:var(--darker)}
.svbg7 .sv-glow{display:none}
.svbg7 .sv-mesh{position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(34% 40% at 22% 24%,rgba(var(--red-rgb),.24),transparent 60%),radial-gradient(30% 40% at 82% 18%,rgba(var(--red-rgb),.18),transparent 60%),radial-gradient(40% 45% at 66% 92%,rgba(var(--red-rgb),.15),transparent 62%);filter:blur(54px)}
/* SV8 - warm dark + brand glow */
.svbg8{background:radial-gradient(120% 110% at 50% -20%,var(--dark),var(--darker) 60%)}
.svbg8 .sv-glow{background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.32),transparent 70%);width:1200px;height:560px}
.svbg8::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}

/* SV9 - warm dark (8) + dot grid (6) + glow */
.svbg9{background:radial-gradient(135% 120% at 50% -25%,var(--muted),var(--rule-on-dark) 64%)}
.svbg9 .sv-glow{background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.2),transparent 70%);width:1200px;height:520px}
.svbg9 .sv-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(85% 75% at 50% 28%,#000,transparent);mask-image:radial-gradient(85% 75% at 50% 28%,#000,transparent)}
.svbg9::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}

/* ============ SERVICES dark - photo card variants (SV10-12) ============ */
.sv10-cards,.sv11-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* SV10 - image-top */
.sv10-card{display:block;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden;transition:.22s ease}
.sv10-card:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.4);box-shadow:0 34px 70px -34px rgba(0,0,0,.7)}
.sv10-pic{position:relative;aspect-ratio:16/10;overflow:hidden}
.sv10-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sv10-card:hover .sv10-pic img{transform:scale(1.06)}
.sv10-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--darker-rgb),.6),transparent 55%)}
.sv10-pic .idx{position:absolute;top:12px;right:13px;z-index:1;color:#fff;background:rgba(var(--darker-rgb),.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:4px 10px;border-radius:var(--pill);font-size:12px;font-feature-settings:"tnum"}
.sv10-body{position:relative;padding:20px 22px 24px}
.sv10-body .ico{position:absolute;top:-26px;left:20px;width:46px;height:46px;border-radius:12px;background:var(--primary);color:var(--darker);display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(var(--red-rgb),.6)}
.sv10-body .ico svg{width:22px;height:22px}
.sv10-body h3{color:#fff;font-size:19px;letter-spacing:-.3px;margin:14px 0 7px}
.sv10-body p{color:rgba(255,255,255,.6);font-size:14px;margin:0;line-height:1.55}
/* SV11 - full-image overlay */
.sv11-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/3.5;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);padding:24px}
.sv11-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .7s ease}
.sv11-card:hover img{transform:scale(1.07)}
.sv11-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(var(--darker-rgb),.94),rgba(var(--darker-rgb),.4) 55%,rgba(var(--darker-rgb),.12))}
.sv11-card>*{position:relative;z-index:2}
.sv11-card .ico{position:absolute;top:18px;left:18px;width:44px;height:44px;border-radius:11px;background:rgba(var(--red-rgb),.95);color:var(--darker);display:grid;place-items:center}
.sv11-card .ico svg{width:21px;height:21px}
.sv11-card .idx{position:absolute;top:24px;right:20px;color:rgba(255,255,255,.8);font-size:13px;font-feature-settings:"tnum"}
.sv11-card h3{color:#fff;font-size:20px;letter-spacing:-.3px;margin-bottom:6px}
.sv11-card p{color:rgba(255,255,255,.78);font-size:14px;margin:0;line-height:1.5}
/* SV12 - bento with photos */
.sv12-bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(210px,1fr);gap:16px}
.sv12-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);padding:22px}
.sv12-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .7s ease}
.sv12-card:hover img{transform:scale(1.06)}
.sv12-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(var(--darker-rgb),.92),rgba(var(--darker-rgb),.35) 60%,rgba(var(--darker-rgb),.1))}
.sv12-card>*{position:relative;z-index:2}
.sv12-card .ico{position:absolute;top:16px;left:16px;width:42px;height:42px;border-radius:11px;background:rgba(var(--red-rgb),.95);color:var(--darker);display:grid;place-items:center}
.sv12-card .ico svg{width:20px;height:20px}
.sv12-card .idx{position:absolute;top:20px;right:18px;color:rgba(255,255,255,.8);font-size:13px}
.sv12-card h3{color:#fff;font-size:18px;margin-bottom:5px;letter-spacing:-.2px}
.sv12-card p{color:rgba(255,255,255,.72);font-size:13.5px;margin:0;line-height:1.5}
.sv12-card.feat{grid-column:span 2;grid-row:span 2;padding:30px}
.sv12-card.feat h3{font-size:28px}
.sv12-card.feat p{font-size:15.5px;max-width:44ch}
@media (max-width:980px){.sv10-cards,.sv11-cards,.sv12-bento{grid-template-columns:1fr 1fr}.sv12-card.feat{grid-column:span 2}}
@media (max-width:680px){.sv10-cards,.sv11-cards,.sv12-bento{grid-template-columns:1fr}.sv12-card.feat{grid-column:span 1;grid-row:span 1}}

/* ============ SERVICES - light photo cards (original look + photos) ============ */
.svc-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e1);transition:.22s ease}
.svc-pcard:hover{box-shadow:var(--e2);transform:translateY(-4px);border-color:var(--line-2)}
.svc-pic{position:relative;aspect-ratio:16/10;overflow:hidden}
.svc-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc-pcard:hover .svc-pic img{transform:scale(1.06)}
.svc-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--ink-rgb),.28),transparent 55%)}
.svc-pic .idx{position:absolute;top:12px;right:13px;z-index:1;color:#fff;background:rgba(var(--ink-rgb),.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:4px 10px;border-radius:var(--pill);font-size:12px;font-feature-settings:"tnum"}
.svc-body{position:relative;padding:20px 24px 26px}
.svc-body .ico{position:absolute;top:-26px;left:22px;width:46px;height:46px;border-radius:12px;background:var(--primary);color:var(--darker);display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(var(--red-rgb),.6)}
.svc-body .ico svg{width:22px;height:22px}
.svc-body h3{color:var(--ink);font-size:19px;letter-spacing:-.3px;margin:16px 0 7px}
.svc-body p{color:var(--mute);font-size:14px;margin:0;line-height:1.55}
@media (max-width:980px){.svc-cards{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.svc-cards{grid-template-columns:1fr}}

/* ============ SERVICES - light background variants ============ */
.services .container{position:relative;z-index:1}
.svcbgA{background:var(--soft)}
.svcbgB{background:linear-gradient(180deg,var(--soft),var(--soft))}
.svcbgB::before{opacity:.5}
.svcbgC{background:var(--canvas)}
.svcbgC .svc-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(var(--ink-rgb),.055) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(92% 82% at 50% 32%,#000,transparent);mask-image:radial-gradient(92% 82% at 50% 32%,#000,transparent)}
.svcbgD{background:#fff}
.svcbgD .svc-mesh{position:absolute;inset:-15%;z-index:0;pointer-events:none;background:radial-gradient(34% 40% at 14% 12%,rgba(var(--red-rgb),.12),transparent 60%),radial-gradient(30% 38% at 88% 16%,rgba(var(--red-rgb),.08),transparent 60%),radial-gradient(40% 45% at 70% 100%,rgba(var(--red-rgb),.08),transparent 62%);filter:blur(42px)}

/* ============ SERVICES light bg variants - BOLD / visible ============ */
.svcbgA::before,.svcbgB::before,.svcbgC::before,.svcbgD::before{display:none}
/* A - orange dot grid (clearly visible) */
.svcbgA{background:#fff}
.svcbgA .svc-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(var(--red-rgb),.30) 1.7px,transparent 1.8px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,#000 30%,transparent 78%);mask-image:linear-gradient(180deg,#000,#000 30%,transparent 78%)}
/* B - blueprint line grid */
.svcbgB{background:var(--white)}
.svcbgB .svc-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(var(--ink-rgb),.08) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.08) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(98% 82% at 50% 22%,#000,transparent);mask-image:radial-gradient(98% 82% at 50% 22%,#000,transparent)}
/* C - diagonal orange band + halftone dots */
.svcbgC{background:#fff}
.svcbgC .svc-diag{position:absolute;inset:-12% -22%;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 42%,rgba(var(--red-rgb),.13) 42% 60%,transparent 60%)}
.svcbgC .svc-halftone{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(var(--red-rgb),.55) 1.6px,transparent 1.7px);background-size:18px 18px;-webkit-mask-image:linear-gradient(118deg,transparent 28%,#000 52%,transparent 80%);mask-image:linear-gradient(118deg,transparent 28%,#000 52%,transparent 80%)}
/* D - mesh aurora (saturated, colorful) */
.svcbgD{background:#fff}
.svcbgD .svc-mesh{position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(32% 40% at 16% 14%,rgba(var(--red-rgb),.32),transparent 60%),radial-gradient(28% 36% at 86% 16%,rgba(var(--red-rgb),.22),transparent 60%),radial-gradient(38% 44% at 70% 98%,rgba(var(--red-rgb),.24),transparent 62%);filter:blur(46px)}

/* ============ SERVICES - dark mesh-aurora version (matches dark sections) ============ */
.svcdark{position:relative;overflow:hidden;background:radial-gradient(130% 115% at 50% -22%,var(--dark),var(--darker) 62%);color:#fff}
.svcdark .svc-mesh{position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(32% 40% at 16% 14%,rgba(var(--red-rgb),.30),transparent 60%),radial-gradient(28% 36% at 86% 16%,rgba(var(--red-rgb),.20),transparent 60%),radial-gradient(38% 44% at 70% 100%,rgba(var(--red-rgb),.22),transparent 62%);filter:blur(54px)}
.svcdark .sec-head .eyebrow{color:var(--primary)}
.svcdark .sec-head h2{color:#fff}
.svcdark .sec-head .r{color:rgba(255,255,255,.6)}
.svcdark .svc-pcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.svcdark .svc-pcard:hover{background:rgba(255,255,255,.06);border-color:rgba(var(--red-rgb),.4);box-shadow:0 34px 70px -34px rgba(0,0,0,.7)}
.svcdark .svc-body h3{color:#fff}
.svcdark .svc-body p{color:rgba(255,255,255,.6)}

/* SERVICES dark - more orange accents */
.svcdark .svc-mesh{background:radial-gradient(34% 42% at 14% 12%,rgba(var(--red-rgb),.46),transparent 60%),radial-gradient(28% 36% at 88% 14%,rgba(var(--red-rgb),.18),transparent 60%),radial-gradient(42% 48% at 72% 102%,rgba(var(--red-rgb),.40),transparent 62%);filter:blur(52px)}
.svcdark .svc-glow{position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:1100px;height:480px;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.22),transparent 70%)}
.svcdark .sec-head .r{color:rgba(255,255,255,.66)}
.svcdark .svc-pic .idx{background:rgba(var(--red-rgb),.92);color:var(--darker)}
.svcdark .svc-body .ico{background:var(--primary);color:var(--darker);box-shadow:0 10px 24px -8px rgba(var(--red-rgb),.7)}
.svcdark .svc-pcard{position:relative}
.svcdark .svc-pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.svcdark .svc-pcard:hover::before{transform:scaleX(1)}
.svcdark .svc-pcard:hover{border-color:rgba(var(--red-rgb),.55);box-shadow:0 34px 70px -30px rgba(var(--red-rgb),.28)}
.svcdark .svc-body h3{transition:color .2s ease}
.svcdark .svc-pcard:hover .svc-body h3{color:var(--primary)}
.svcdark .svc-pic::after{background:linear-gradient(0deg,rgba(var(--darker-rgb),.78),rgba(var(--red-rgb),.06) 40%,transparent 62%)}

/* SERVICES dark - smooth transition from light section + warmer brand tone */
.svcdark{background:linear-gradient(180deg,var(--dark),var(--darker) 60%)}
.svcdark::after{content:"";position:absolute;top:0;left:0;right:0;height:160px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.svcdark .svc-glow{background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.3),transparent 70%);top:-130px}
.svcdark .svc-mesh{background:radial-gradient(36% 44% at 14% 10%,rgba(var(--red-rgb),.5),transparent 60%),radial-gradient(28% 36% at 88% 16%,rgba(var(--red-rgb),.2),transparent 60%),radial-gradient(44% 50% at 74% 104%,rgba(var(--red-rgb),.44),transparent 62%);filter:blur(54px)}

/* SERVICES - light warm orange background */
.svclight{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--soft),var(--soft))}
.svclight .svc-mesh{position:absolute;inset:-18%;z-index:0;pointer-events:none;background:radial-gradient(34% 42% at 12% 10%,rgba(var(--red-rgb),.35),transparent 60%),radial-gradient(30% 38% at 90% 14%,rgba(var(--red-rgb),.22),transparent 60%),radial-gradient(42% 48% at 72% 104%,rgba(184,27,16,.2),transparent 62%);filter:blur(50px)}
.svclight .sec-head .eyebrow{color:var(--primary-deep)}
.svclight .sec-head h2{color:var(--ink)}
.svclight .sec-head .r{color:var(--ink-2)}
.svclight .svc-pcard{background:#fff;border-color:rgba(184,27,16,.16);box-shadow:0 10px 30px -16px rgba(184,27,16,.28)}
.svclight .svc-pcard:hover{box-shadow:0 24px 50px -20px rgba(184,27,16,.4);border-color:rgba(var(--red-rgb),.5);transform:translateY(-4px)}
.svclight .svc-pcard:hover .svc-body h3{color:var(--primary-deep)}

/* ============ SERVICES - 5 backgrounds (seamless top transition) ============ */
.svcv{position:relative;overflow:hidden}
.svcv .container{position:relative;z-index:2}
.svcv .svc-fade{position:absolute;top:0;left:0;right:0;height:200px;z-index:1;pointer-events:none}
/* 1 - clean white, soft cream fade-in from top (seamless) */
.svc1{background:#fff}
.svc1 .svc-fade{background:linear-gradient(180deg,var(--soft),transparent)}
/* 2 - soft grey + radial orange spotlight behind heading */
.svc2{background:var(--soft)}
.svc2 .svc-spot{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:1100px;height:520px;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.16),transparent 70%);filter:blur(10px)}
/* 3 - warm cream + faint dot grid */
.svc3{background:var(--soft)}
.svc3 .svc-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(184,27,16,.14) 1.4px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
/* 4 - vertical gradient white->soft, blueprint grid */
.svc4{background:linear-gradient(180deg,#ffffff,var(--soft))}
.svc4 .svc-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(var(--ink-rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.06) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(100% 80% at 50% 26%,#000,transparent);mask-image:radial-gradient(100% 80% at 50% 26%,#000,transparent)}
/* 5 - light mesh aurora, seamless white edges */
.svc5{background:#fff}
.svc5 .svc-mesh{position:absolute;inset:-12%;z-index:0;pointer-events:none;background:radial-gradient(30% 36% at 18% 22%,rgba(var(--red-rgb),.22),transparent 60%),radial-gradient(26% 32% at 84% 24%,rgba(var(--red-rgb),.12),transparent 60%),radial-gradient(36% 42% at 70% 92%,rgba(var(--red-rgb),.16),transparent 62%);filter:blur(46px)}

/* ============ SERVICES - warm DARK variants ============ */
.svcwd{position:relative;overflow:hidden;color:#fff}
.svcwd .container{position:relative;z-index:2}
.svcwd .svc-fade{position:absolute;top:0;left:0;right:0;height:170px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent)}
.svcwd .sec-head .eyebrow{color:var(--primary)}
.svcwd .sec-head h2{color:#fff}
.svcwd .sec-head .r{color:rgba(255,255,255,.62)}
.svcwd .svc-pcard{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);position:relative}
.svcwd .svc-pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.svcwd .svc-pcard:hover::before{transform:scaleX(1)}
.svcwd .svc-pcard:hover{background:rgba(255,255,255,.06);border-color:rgba(var(--red-rgb),.5);box-shadow:0 34px 70px -30px rgba(var(--red-rgb),.3)}
.svcwd .svc-body h3{color:#fff;transition:color .2s}
.svcwd .svc-pcard:hover .svc-body h3{color:var(--primary)}
.svcwd .svc-body p{color:rgba(255,255,255,.62)}
.svcwd .svc-pic .idx{background:rgba(var(--red-rgb),.92);color:var(--darker)}
.svcwd .svc-body .ico{background:var(--primary);color:var(--darker);box-shadow:0 10px 24px -8px rgba(var(--red-rgb),.7)}
/* WD1 - deep warm charcoal + orange glow */
.swd1{background:linear-gradient(180deg,var(--dark),var(--darker) 62%)}
.swd1 .svc-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:1100px;height:480px;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.26),transparent 70%)}
/* WD2 - amber mesh aurora */
.swd2{background:var(--darker)}
.swd2 .svc-mesh{position:absolute;inset:-18%;z-index:0;pointer-events:none;background:radial-gradient(34% 42% at 14% 12%,rgba(var(--red-rgb),.5),transparent 60%),radial-gradient(30% 36% at 88% 16%,rgba(184,27,16,.34),transparent 60%),radial-gradient(42% 48% at 74% 104%,rgba(var(--red-rgb),.4),transparent 62%);filter:blur(54px)}
/* WD3 - espresso + warm dot grid */
.swd3{background:radial-gradient(130% 115% at 50% -20%,var(--dark),var(--darker) 64%)}
.swd3 .svc-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(var(--red-rgb),.2) 1.5px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
/* WD4 - warm dark + diagonal orange band */
.swd4{background:linear-gradient(180deg,var(--dark),var(--darker) 62%)}
.swd4 .svc-diag{position:absolute;inset:-12% -22%;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 40%,rgba(var(--red-rgb),.16) 40% 60%,transparent 60%)}
.swd4 .svc-glow{position:absolute;top:-100px;right:-60px;width:760px;height:460px;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.22),transparent 70%)}

/* ============ PROCESS - shipment tracker (themed) ============ */
.track{position:relative;margin-top:64px}
.track-line{position:absolute;top:34px;left:8%;right:8%;height:3px;z-index:0;border-radius:var(--pill);background:repeating-linear-gradient(90deg,var(--line-2) 0 10px,transparent 10px 18px)}
.track-fill{position:absolute;top:34px;left:8%;height:3px;z-index:1;border-radius:var(--pill);background:linear-gradient(90deg,var(--primary),var(--primary-deep));width:0;box-shadow:0 0 12px rgba(var(--red-rgb),.55);transition:width 1.6s cubic-bezier(.22,.61,.36,1)}
.track.in .track-fill{width:84%}
.track-truck{position:absolute;top:14px;left:8%;z-index:3;color:var(--primary-deep);transform:translateX(-50%);transition:left 1.6s cubic-bezier(.22,.61,.36,1);filter:drop-shadow(0 4px 6px rgba(184,27,16,.4))}
.track.in .track-truck{left:92%}
.track-truck svg{width:38px;height:38px;display:block}
.track-steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tstep{text-align:center;padding:0 8px}
.tstep .pin{width:70px;height:70px;margin:0 auto 22px;border-radius:50%;background:#fff;border:1px solid var(--line-2);box-shadow:var(--e2);display:grid;place-items:center;position:relative;transition:.3s ease}
.tstep .pin svg{width:30px;height:30px;color:var(--mute);transition:.3s ease}
.tstep .pin .num{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;font-feature-settings:"tnum";transition:.3s ease}
.track.in .tstep.done .pin{border-color:var(--primary);background:var(--primary-soft)}
.track.in .tstep.done .pin svg{color:var(--primary-deep)}
.track.in .tstep.done .pin .num{background:var(--primary);color:var(--darker)}
.tstep h4{font-size:18px;font-weight:600;letter-spacing:-.3px;margin-bottom:8px;color:var(--ink)}
.tstep p{font-size:14px;color:var(--mute);margin:0;line-height:1.55;max-width:24ch;margin-inline:auto}
.tstep .eta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-deep);background:var(--primary-soft);padding:5px 11px;border-radius:var(--pill)}
@media (max-width:860px){
  .track-line,.track-fill,.track-truck{display:none}
  .track-steps{grid-template-columns:1fr;gap:30px;max-width:480px;margin:0 auto}
  .tstep{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:6px;text-align:left;align-items:start;padding:0}
  .tstep .pin{grid-column:1;grid-row:1 / span 2;width:54px;height:54px;margin:0;align-self:start}
  .tstep .pin svg{width:24px;height:24px}
  .tstep .pin .num{width:22px;height:22px;top:-7px;right:-7px;font-size:11px}
  .tstep h4{grid-column:2;align-self:center;margin:0 0 2px}
  .tstep p{grid-column:2;margin:0;max-width:none}
  .tstep .eta{grid-column:2;margin-top:6px}
}

/* PROCESS - dark version */
.procdark{position:relative;overflow:hidden;background:radial-gradient(130% 115% at 50% -22%,var(--dark),var(--darker) 62%);color:#fff}
.procdark .proc-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:1100px;height:460px;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.18),transparent 70%)}
.procdark .container{position:relative;z-index:1}
.procdark .proc-head .eyebrow{color:var(--primary)}
.procdark .proc-head h2{color:#fff}
.procdark .track-line{background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 10px,transparent 10px 18px)}
.procdark .tstep .pin{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.procdark .tstep .pin svg{color:rgba(255,255,255,.5)}
.procdark .tstep .pin .num{background:#fff;color:var(--ink)}
.procdark .track.in .tstep.done .pin{background:rgba(var(--red-rgb),.16);border-color:var(--primary)}
.procdark .track.in .tstep.done .pin svg{color:var(--primary)}
.procdark .track.in .tstep.done .pin .num{background:var(--primary);color:var(--darker)}
.procdark .tstep h4{color:#fff}
.procdark .tstep p{color:rgba(255,255,255,.6)}

/* services masked icons (recolorable) */
/* generic base so every .micon maps its mask correctly (size/repeat/position) - fixes related-service icons */
.micon{display:block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.svc-body .ico .micon{display:block;width:24px;height:24px;background:var(--darker);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* process: real truck icon moving + decorative bg truck */
.track-truck .micon-truck{display:block;width:42px;height:42px;background:var(--primary-deep);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.procdark .track-truck .micon-truck{background:var(--primary)}
.procv1,.procdark{position:relative}
.proc-bgtruck{position:absolute;right:-40px;bottom:-30px;width:340px;height:340px;z-index:0;pointer-events:none;background:rgba(var(--ink-rgb),.05);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transform:scaleX(-1)}
.procdark .proc-bgtruck{background:rgba(var(--red-rgb),.07)}
@media (max-width:680px){.proc-bgtruck{display:none}}

/* process bg route graphic (override truck silhouette) */
.proc-bgtruck{right:-60px;bottom:-50px;width:460px;height:460px;transform:none;opacity:.9}

/* process bg decorations: truck bottom-right + route top-left */
.proc-bgtruck{position:absolute;right:-40px;bottom:-30px;width:300px;height:300px;z-index:0;pointer-events:none;background:rgba(var(--ink-rgb),.05);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transform:scaleX(-1);opacity:1}
.procdark .proc-bgtruck{background:rgba(var(--red-rgb),.08)}
.proc-bgroute{position:absolute;left:30px;top:30px;width:230px;height:230px;z-index:0;pointer-events:none;background:rgba(var(--ink-rgb),.05);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.procdark .proc-bgroute{background:rgba(var(--red-rgb),.08)}
@media (max-width:680px){.proc-bgroute{display:none}}
/* dark process: opaque pins so the track line stays behind them */
.procdark .tstep .pin{background:var(--dark)}
.procdark .track.in .tstep.done .pin{background:var(--dark)}


/* nudge bg truck slightly left */
.proc-bgtruck{right:10px}

/* ============ PROCESS - premium tracking card (soft bg + elevated white panel) ============ */
.procnice{background:var(--soft);position:relative}
.track-panel{position:relative;max-width:1080px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--e3);padding:28px 48px 50px;overflow:hidden}
.track-panel::before{content:"";position:absolute;top:-130px;right:-90px;width:420px;height:320px;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.13),transparent 70%)}
.tp-route{position:absolute;left:-30px;bottom:-30px;width:210px;height:210px;z-index:0;pointer-events:none;background:rgba(var(--ink-rgb),.045);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.tp-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.tp-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tp-live{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep);background:var(--primary-soft);padding:6px 13px;border-radius:var(--pill)}
.tp-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(var(--red-rgb),.22);animation:mlpulse 2s infinite}
.track-panel .track{position:relative;z-index:1;margin-top:14px}
@media (max-width:680px){.track-panel{padding:24px 22px 30px}.tp-route{display:none}}

/* process panel without tracking header */
.track-panel{padding:48px 48px 50px}
.track-panel .track{margin-top:6px}
@media (max-width:680px){.track-panel{padding:30px 22px}}

/* ============ PROCESS - variant 3: LIGHT warm (premium, subtle) ============ */
.procwarm{position:relative;overflow:hidden;padding:96px 0;color:var(--ink);
  background:linear-gradient(180deg,var(--soft),var(--soft) 60%,var(--soft))}
.procwarm .pw-glow{display:none}
.procwarm .pw-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(var(--red-rgb),.12) 1.2px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(95% 78% at 50% 30%,#000,transparent);mask-image:radial-gradient(95% 78% at 50% 30%,#000,transparent)}
.procwarm .container{position:relative;z-index:1}
.procwarm .proc-head{max-width:640px;margin:0 auto 0;text-align:center}
.procwarm .proc-head .eyebrow{color:var(--primary-deep)}
.procwarm .proc-head h2{color:var(--ink);margin-top:14px}
.pw-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.pw-line{position:absolute;top:34px;left:12%;right:12%;height:2px;z-index:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--red-rgb),.5) 12%,rgba(var(--red-rgb),.5) 88%,transparent)}
.pw-step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.pw-node{width:68px;height:68px;border-radius:50%;background:#fff;border:1px solid rgba(var(--red-rgb),.4);
  display:grid;place-items:center;position:relative;margin-bottom:20px;box-shadow:0 10px 26px -12px rgba(var(--red-rgb),.5)}
.pw-node svg{width:28px;height:28px;color:var(--red)}
.pw-node .num{position:absolute;top:-6px;right:-6px;width:25px;height:25px;border-radius:50%;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;display:grid;place-items:center;font-feature-settings:"tnum";box-shadow:0 4px 12px -4px rgba(var(--red-rgb),.6)}
.pw-card{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px -18px rgba(184,27,16,.3);padding:18px 18px 20px;transition:.22s ease}
.pw-card:hover{border-color:rgba(var(--red-rgb),.45);box-shadow:0 20px 40px -20px rgba(184,27,16,.4);transform:translateY(-3px)}
.pw-card h4{color:var(--ink);font-size:16.5px;font-weight:600;letter-spacing:-.2px;margin:0 0 6px}
.pw-card p{color:var(--mute);font-size:14px;line-height:1.55;margin:0}
@media (max-width:860px){.pw-steps{grid-template-columns:1fr 1fr;gap:34px 20px}.pw-line{display:none}}
@media (max-width:560px){.pw-steps{grid-template-columns:1fr}}

/* process variant 1 - same warm bg as variant 3 */
.procv1{background:linear-gradient(180deg,var(--soft),var(--soft) 60%,var(--soft))}

/* enlarge process bg decorations (route top-left bigger) */
.proc-bgroute{width:330px;height:330px;left:0;top:10px}
.proc-bgtruck{width:380px;height:380px;bottom:-50px}

/* spacing tweaks for process bg decorations */
.proc-bgroute{left:34px;top:34px;width:310px;height:310px}
.proc-bgtruck{width:350px;height:350px;right:30px;bottom:-40px}

/* align track line/fill/truck to pin centers (no left/right overhang) + reach step 4 */
.track-line{left:12%;right:12%}
.track-fill{left:12%}
.track.in .track-fill{width:76%}
.track-truck{left:12%}
.track.in .track-truck{left:88%}

/* truck stops a bit past step 4 (clears the pin) */
.track.in .track-truck{left:94%}

/* truck back slightly + fill follows close behind, line extends under truck */
.track-line{right:8%}
.track.in .track-fill{width:79%}
.track.in .track-truck{left:91%}

/* truck nudge right a touch */
.track.in .track-fill{width:80.5%}
.track.in .track-truck{left:92.5%}

/* truck a bit more right */
.track.in .track-fill{width:82%}
.track.in .track-truck{left:94%}

/* truck final position */
.track.in .track-fill{width:81.5%}
.track.in .track-truck{left:93.5%}

/* ============ HERO meta - variant A: glass icon cards ============ */
.heroA-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:26px}
.hmc{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:15px 16px;transition:.2s ease}
.hmc:hover{background:rgba(255,255,255,.12);border-color:rgba(var(--red-rgb),.45);transform:translateY(-3px)}
.hmc-ic{width:38px;height:38px;border-radius:10px;background:rgba(var(--red-rgb),.9);color:var(--darker);display:grid;place-items:center;flex:none}
.hmc-ic svg{width:20px;height:20px}
.hmc b{display:block;color:#fff;font-weight:600;font-size:14.5px;line-height:1.25;margin-bottom:3px}
.hmc span{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.4}

/* ============ HERO meta - variant B: airy pills, no dividers ============ */
.heroB-row{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:30px}
.hmp{display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--pill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:9px 18px 9px 10px;transition:.2s ease}
.hmp:hover{background:rgba(var(--red-rgb),.14);border-color:rgba(var(--red-rgb),.4)}
.hmp-ic{width:30px;height:30px;border-radius:50%;background:rgba(var(--red-rgb),.18);color:var(--primary);display:grid;place-items:center;flex:none}
.hmp-ic svg{width:16px;height:16px}
.hmp b{color:#fff;font-weight:600;font-size:13.5px;line-height:1;display:block}
.hmp span{font-size:11.5px;color:rgba(255,255,255,.65);line-height:1.2}
.hmp .hmp-tx{display:flex;flex-direction:column;gap:2px}
@media (max-width:860px){.heroA-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.heroA-grid{grid-template-columns:1fr}}

/* hero tags as chips (variant heroes only) */
.hero.dest-variant .hero-tags{gap:9px;margin-top:24px}
.hero.dest-variant .hero-tags .t{padding:7px 15px;border-radius:var(--pill);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-size:12.5px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.18s ease}
.hero.dest-variant .hero-tags .t:hover{background:rgba(var(--red-rgb),.18);border-color:rgba(var(--red-rgb),.45)}
.hero.dest-variant .hero-tags .t::after{display:none}

/* ============ HERO meta - variant C: unified glass bar ============ */
.heroC-bar{display:flex;align-items:stretch;margin-bottom:26px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);border-radius:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 20px 50px -28px rgba(0,0,0,.6);overflow:hidden}
.heroC-bar .hcc{flex:1;display:flex;align-items:center;gap:12px;padding:18px 22px;border-left:1px solid rgba(255,255,255,.1);transition:.2s ease}
.heroC-bar .hcc:first-child{border-left:0}
.heroC-bar .hcc:hover{background:rgba(var(--red-rgb),.08)}
.heroC-bar .hcc-ic{color:var(--primary);flex:none}
.heroC-bar .hcc-ic svg{width:22px;height:22px;display:block}
.heroC-bar .hcc-tx b{display:block;color:#fff;font-weight:600;font-size:14px;line-height:1.2;margin-bottom:3px}
.heroC-bar .hcc-tx span{font-size:12px;color:rgba(255,255,255,.65);line-height:1.35}

/* ============ HERO meta - variant D: editorial, vertical orange accent ============ */
.heroD-row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:30px}
.heroD-row .hdd{padding-left:16px;position:relative}
.heroD-row .hdd::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--primary),rgba(var(--red-rgb),.2))}
.heroD-row .hdd b{display:block;color:#fff;font-weight:600;font-size:15px;letter-spacing:-.2px;line-height:1.25;margin-bottom:5px}
.heroD-row .hdd span{font-size:13px;color:rgba(255,255,255,.62);line-height:1.45}
@media (max-width:860px){.heroC-bar{flex-wrap:wrap}.heroC-bar .hcc{flex:1 1 50%}.heroD-row{grid-template-columns:1fr 1fr;gap:22px}}
@media (max-width:560px){.heroC-bar .hcc{flex:1 1 100%}.heroD-row{grid-template-columns:1fr}}

/* wider header nav (not boxed) */
header.nav .nav-in{max-width:1480px;padding-left:48px;padding-right:48px}
@media (max-width:560px){header.nav .nav-in{padding-left:20px;padding-right:20px}}

/* nav a touch wider */
header.nav .nav-in{max-width:1600px;padding-left:56px;padding-right:56px}

/* nav full-width: logo & CTA at the edges */
header.nav .nav-in{max-width:none;padding-left:44px;padding-right:44px}
@media (max-width:560px){header.nav .nav-in{padding-left:20px;padding-right:20px}}

/* align hero content with the full-width nav (logo above headline, meta to edges) */
.hero .container{max-width:none;padding-left:44px;padding-right:44px}
@media (max-width:560px){.hero .container{padding-left:20px;padding-right:20px}}

/* hero: very slight enlargement */
.hero .lead{max-width:50ch}
@media (min-width:1280px){
  .hero .d-xxl{font-size:clamp(46px,3.5vw,66px)}
  .hero .lead{font-size:19px}
  .hero-in>*{max-width:660px}
}

/* hero: a bit more */
@media (min-width:1280px){
  .hero .d-xxl{font-size:clamp(52px,4vw,72px)}
  .hero .lead{font-size:20px}
  .hero-in>*{max-width:710px}
}

/* hero: tiny reduction */
@media (min-width:1280px){
  .hero .d-xxl{font-size:clamp(50px,3.85vw,69px)}
  .hero .lead{font-size:19.5px}
  .hero-in>*{max-width:700px}
}

/* stat chip: center text vertically + tabular counter */
.gchip{align-items:center}
.gchip .n{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.gchip .l{align-self:center}

/* why-us float card: nudge down & right so it doesn't cover the photo */
.why-float{right:-40px;bottom:-24px}

/* ============ FOOTER variants (compare) ============ */
.ftr-label{text-align:center;padding:14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--primary-deep)}

/* FV1 - dark premium */
.ftrA{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 80% -10%,var(--dark),var(--darker) 60%);color:#fff;padding:72px 0 30px;border-top:3px solid var(--primary)}
.ftrA::before{content:"";position:absolute;top:-140px;right:-100px;width:480px;height:360px;background:radial-gradient(50% 50% at 50% 50%,rgba(var(--red-rgb),.16),transparent 70%);pointer-events:none}
.ftrA .fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px;position:relative;z-index:1}
.ftrA .foot-brand img{height:46px;margin-bottom:16px}
.ftrA .foot-brand p{font-size:14px;line-height:1.6;max-width:30ch;color:rgba(255,255,255,.6)}
.ftrA h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-weight:600;margin:0 0 16px}
.ftrA ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftrA ul a,.ftrA ul li{font-size:14px;color:rgba(255,255,255,.6)}
.ftrA ul a:hover{color:var(--primary)}
.ftrA .fb{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.55)}
.ftrA .fb .line{font-style:italic}

/* FV2 - warm gradient + CTA strip */
.ftrB{background:linear-gradient(180deg,var(--soft),var(--soft));color:var(--ink);padding:0 0 30px;border-top:1px solid var(--line)}
.ftrB .cta-strip{background:linear-gradient(120deg,var(--primary),var(--primary-deep));color:#fff;border-radius:0;padding:34px 0}
.ftrB .cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ftrB .cta-in h4{font-size:24px;font-weight:700;letter-spacing:-.4px;margin:0;color:#fff}
.ftrB .cta-in p{margin:4px 0 0;color:rgba(255,255,255,.9);font-size:15px}
.ftrB .cta-in .btn{background:#fff;color:var(--primary-deep)}
.ftrB .fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;margin:54px 0 44px}
.ftrB .foot-brand img{height:46px;margin-bottom:16px}
.ftrB .foot-brand p{font-size:14px;line-height:1.6;max-width:30ch;color:var(--mute)}
.ftrB h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 16px}
.ftrB ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftrB ul a,.ftrB ul li{font-size:14px;color:var(--mute)}.ftrB ul a:hover{color:var(--primary-deep)}
.ftrB .fb{border-top:1px solid var(--line-2);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.ftrB .fb .line{font-style:italic}

/* FV3 - dark with big brand watermark */
.ftrC{position:relative;overflow:hidden;background:var(--darker);color:#fff;padding:70px 0 28px}
.ftrC .wm{position:absolute;right:-30px;bottom:-60px;font-size:240px;font-weight:800;letter-spacing:-8px;color:rgba(255,255,255,.03);line-height:1;pointer-events:none;z-index:0}
.ftrC .fg{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px}
.ftrC .foot-brand img{height:46px;margin-bottom:16px}
.ftrC .foot-brand p{font-size:14px;line-height:1.6;max-width:30ch;color:rgba(255,255,255,.6)}
.ftrC h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-weight:600;margin:0 0 16px}
.ftrC ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftrC ul a,.ftrC ul li{font-size:14px;color:rgba(255,255,255,.6)}.ftrC ul a:hover{color:#fff}
.ftrC .fb{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5)}
.ftrC .fb .line{font-style:italic}
@media (max-width:880px){.ftrA .fg,.ftrB .fg,.ftrC .fg{grid-template-columns:1fr 1fr}.ftrC .wm{font-size:140px}}

/* FV4 - dark footer with animated truck + logo watermark */
.ftrD{position:relative;overflow:hidden;background:radial-gradient(120% 130% at 15% -10%,var(--dark),var(--darker) 62%);color:#fff;padding:70px 0 28px;border-top:3px solid var(--primary)}
.ftrD .ftrD-truck{position:absolute;right:-20px;bottom:0;width:420px;max-width:46%;z-index:0;pointer-events:none;opacity:.92;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.ftrD .ftrD-wm{position:absolute;left:24px;bottom:10px;height:150px;width:auto;z-index:0;opacity:.05;pointer-events:none;filter:grayscale(1) brightness(3)}
.ftrD .fg{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px}
.ftrD .foot-brand img{height:46px;margin-bottom:16px}
.ftrD .foot-brand p{font-size:14px;line-height:1.6;max-width:30ch;color:rgba(255,255,255,.6)}
.ftrD h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-weight:600;margin:0 0 16px}
.ftrD ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftrD ul a,.ftrD ul li{font-size:14px;color:rgba(255,255,255,.6)}.ftrD ul a:hover{color:#fff}
.ftrD .fb{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5)}
.ftrD .fb .line{font-style:italic}
@media (max-width:880px){.ftrD .fg{grid-template-columns:1fr 1fr}.ftrD .ftrD-truck{opacity:.3}}

/* footer: thin CTA strip + corner truck (single final footer) */
.footer{position:relative;overflow:hidden;padding-top:0}
.foot-cta{background:linear-gradient(120deg,var(--primary),var(--primary-deep));color:#fff;padding:20px 0;margin-bottom:56px}
.foot-cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-cta h4{font-size:20px;font-weight:700;letter-spacing:-.3px;margin:0;color:#fff}
.foot-cta p{margin:3px 0 0;font-size:14px;color:rgba(255,255,255,.92)}
.foot-cta .btn-light{background:#fff;color:var(--primary-deep)}
.foot-cta .btn-light:hover{background:#fff;box-shadow:0 8px 22px -8px rgba(0,0,0,.25)}
.footer .foot-main{position:relative;z-index:1}
/* No pre-footer CTA band (contact pages) → restore the top breathing room the band used to provide */
.footer--nocta .foot-main{padding-top:76px}
@media (max-width:880px){.footer--nocta .foot-main{padding-top:38px}}
.foot-truck{position:absolute;right:-10px;bottom:0;width:300px;max-width:36%;z-index:0;pointer-events:none;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}
@media (max-width:880px){.foot-truck{opacity:.28}}
@media (max-width:560px){.foot-cta-in{flex-direction:column;align-items:flex-start}.foot-truck{display:none}}

/* footer: align content edge-to-edge like nav/hero */
.footer .container{max-width:var(--container);padding-left:24px;padding-right:24px}
@media (max-width:560px){.footer .container{padding-left:20px;padding-right:20px}}

/* footer bottom bar centered + bigger corner truck with reserved space */
.footer .fb{flex-direction:column;align-items:center;text-align:center;gap:8px}
.foot-truck{width:440px;max-width:42%;right:-10px;bottom:-6px;opacity:.95}
@media (min-width:1100px){.footer .fg{padding-right:320px}}
@media (max-width:880px){.footer .fg{padding-right:0}.foot-truck{opacity:.28}}

/* footer logo bigger */
.footer .foot-brand img{height:58px;margin-bottom:18px}

/* limit contact textarea resize */
.final-card textarea{resize:vertical;min-height:64px;max-height:180px}

/* footer: keep the bottom hairline from crossing the truck */
.footer .foot-truck{z-index:2}

/* footer: bigger logo + motto, slimmer CTA strip */
.footer .foot-brand img{height:72px;margin-bottom:20px}
.footer .foot-brand p{font-size:16px;line-height:1.65;max-width:32ch}
.foot-cta{padding:13px 0;margin-bottom:56px}
@media (max-width:880px){.foot-cta{margin-bottom:38px}}
/* stacked column on mobile needs more vertical breathing room (button was cramped at the bottom) */
@media (max-width:560px){.foot-cta{padding:26px 0}}

/* footer: truck integrated between Компания & Контакти columns (experiment) */
@media (min-width:1100px){.footer .fg{padding-right:0}}
.footer .foot-truck{right:16%;bottom:78px;width:340px;max-width:32%;z-index:0;opacity:.92}

/* footer truck: bigger, up & left; nudge Контакти column right */
.footer .foot-truck{right:20%;bottom:112px;width:420px;max-width:38%;opacity:.94}
.footer .fg > div:last-child{transform:translateX(34px)}

/* footer truck: back to bottom-right corner (compare) */
@media (min-width:1100px){.footer .fg{padding-right:320px}}
.footer .fg > div:last-child{transform:none}
.footer .foot-truck{right:-10px;bottom:-6px;width:440px;max-width:42%;z-index:2;opacity:.95}

/* footer truck: lift up in corner */
.footer .foot-truck{bottom:64px}

/* ====================== MOBILE NAV / MENU ====================== */
.nav-burger{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;padding:0;margin-left:2px;color:#fff;-webkit-tap-highlight-color:transparent}
.nav-burger .i-close{display:none}
.nav.scrolled .nav-burger,.nav.nav-solid .nav-burger{color:var(--ink)}
body.menu-open .nav-burger{color:var(--ink)}
body.menu-open .nav-burger .i-open{display:none}
body.menu-open .nav-burger .i-close{display:block}
body.menu-open{overflow:hidden}

.mobile-menu{position:fixed;inset:0;z-index:55;background:rgba(255,255,255,.985);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  display:flex;flex-direction:column;padding:104px 26px 34px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .26s ease,transform .26s ease,visibility .26s;
  overflow-y:auto}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none}
/* decorative wave graphic (same as the footer deco) in the menu's bottom-right */
.mobile-menu::after{content:"";position:absolute;right:-185px;bottom:24px;width:min(150vw,560px);height:min(150vw,560px);z-index:0;pointer-events:none;opacity:.42;transform:rotate(-90deg);transform-origin:center center}
.mm-links,.mm-foot{position:relative;z-index:1}
.mm-links{display:flex;flex-direction:column}
.mm-links>a,.mm-acc{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-family:inherit;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding:16px 6px;border:0;border-bottom:1px solid var(--line);background:0;text-align:left;cursor:pointer}
.mm-links>a:active{color:var(--primary-deep)}
.mm-group{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.mm-acc{border-bottom:0}
.mm-caret{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:rotate(45deg);transition:transform .24s ease}
.mm-acc[aria-expanded="true"] .mm-caret{transform:rotate(-135deg)}
.mm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.mm-acc[aria-expanded="true"]+.mm-sub{grid-template-rows:1fr}
.mm-sub-in{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.mm-sub a{font-size:15.5px;color:var(--mute);padding:12px 6px 12px 16px;margin:0 0 0 4px;border-left:2px solid var(--line)}
.mm-sub a:first-child{margin-top:6px}.mm-sub a:last-child{margin-bottom:8px}
.mm-sub a:active{color:var(--primary-deep)}
.mm-sub a.mm-sub-all{color:var(--primary-deep);font-weight:600}
.mm-foot{margin-top:auto;padding-top:26px;display:flex;align-items:center;gap:18px}
.mm-lang{font-size:15px;color:var(--mute)}.mm-lang b{color:var(--ink);font-weight:600}
.mm-foot .btn{flex:1;justify-content:center}

@media (max-width:860px){
  .nav-links,.has-drop,.nav-right .lang,.nav-cta{display:none}
  .nav-burger{display:inline-flex}
  .nav{position:absolute}
  .nav.scrolled{position:absolute;animation:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:none}
  .nav.scrolled .nav-in{height:84px}
  .nav.scrolled .brand img{height:56px}
}

/* ====================== HERO - MOBILE ====================== */
@media (max-width:768px){
  .hero{display:block;min-height:auto}
  .hero-in{padding:140px 0 120px}
  .hero h1{margin:16px 0 18px;max-width:none}
  .hero .lead{margin-bottom:24px;max-width:none}
  .hero-cta{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-cta .btn{width:auto}
  .hero-tags{margin-top:22px}
  /* hide the redundant meta bar on mobile */
  .hero-meta{display:none}
}

/* hero tags as chips on mobile */
@media (max-width:768px){
  .hero-tags{gap:8px;margin-top:26px}
  .hero-tags .t{padding:7px 14px;border-radius:var(--pill);background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);font-size:12.5px;color:rgba(255,255,255,.92)}
  .hero-tags .t::after{display:none}
}

/* no hero zoom animation on mobile (static bg) */
@media (max-width:768px){
  .hero-bg{animation:none;transform:none}
}

/* process: show the two background watermark SVGs on mobile too */
.procv1 .container{position:relative;z-index:1}
@media (max-width:768px){
  .procv1 .proc-bgroute{display:block;left:-30px;top:26px;width:185px;height:185px}
  .procv1 .proc-bgtruck{display:block;right:-44px;bottom:10px;width:250px;height:250px}
}

/* why-us: quote card below the image on mobile (no overlap / overflow) */
@media (max-width:768px){
  .why-float{position:static;inset:auto;right:auto;left:auto;bottom:auto;max-width:none;margin-top:14px}
}

/* final CTA: tighter padding on mobile */
@media (max-width:768px){
  .final-in{padding:68px 20px}
  .final-card{padding:24px 18px}
}

/* footer CTA strip: center text + button on mobile */
@media (max-width:768px){
  .foot-cta-in{flex-direction:column;align-items:center;text-align:center;gap:16px}
}

/* keep Внос · Износ chip on one line */
.routes-head .hub{white-space:nowrap;flex:none}

/* footer social icons */
.foot-social{display:flex;gap:12px;margin-top:20px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:var(--mute);background:var(--soft);border:1px solid var(--line);transition:.2s ease}
.foot-social a:hover{color:#fff;background:var(--primary);border-color:var(--primary);transform:translateY(-2px);
  box-shadow:0 10px 22px -8px rgba(var(--red-rgb),.6)}
.foot-social svg{width:18px;height:18px;display:block}

/* ISO certification badges (footer) - white chips, work on light + dark footer */
.foot-certs{margin-top:24px}
.foot-certs-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink);margin-bottom:10px}
.footer--dark .foot-certs-label{color:rgba(255,255,255,.72)}
.foot-certs-badges{display:flex;gap:10px}
.foot-cert{display:inline-flex;background:#fff;border:1px solid rgba(var(--ink-rgb),.08);border-radius:9px;padding:5px 7px;
  box-shadow:0 2px 10px -5px rgba(var(--ink-rgb),.25);transition:transform .15s ease,box-shadow .15s ease}
.foot-cert:hover{transform:translateY(-2px);box-shadow:0 7px 18px -7px rgba(var(--ink-rgb),.32)}
.foot-cert img{display:block;height:34px;width:auto}
.foot-certs--mobile{display:none}
.foot-certs--desktop .foot-cert{padding:6px 8px}
.foot-certs--desktop .foot-cert img{height:40px}
.foot-certs--mobile .foot-certs-badges{gap:8px}
/* desktop: certs as a 4th "column" just right of Контакти (above the truck), absolute so footer height is unchanged */
@media (min-width:981px){.foot-certs--desktop{position:absolute;top:2px;margin-top:0;z-index:3;right:16px}}
@media (min-width:1100px){.foot-certs--desktop{right:230px}}
/* on nocta pages .foot-main has padding-top:76px which pushes the columns down; shift certs to match so they align with the column headings */
@media (min-width:981px){.footer--nocta .foot-certs--desktop{top:78px}}
@media (max-width:980px){.foot-certs--desktop{display:none}.foot-certs--mobile{display:block}}
/* mobile stacked order: Контакти before Компания; Компания (+certs inside it) goes last */
@media (max-width:680px){.footer .fg > div:nth-child(3){order:1}}

/* remove the thin light line above the footer CTA strip */
.footer{border-top:0}

/* footer decorative background pattern (flowing waves, bottom-left) */
.foot-deco{position:absolute;left:0;bottom:248px;width:560px;max-width:44%;height:auto;z-index:0;pointer-events:none;opacity:.33;transform:scaleX(-1)}
/* orange CTA strip above the deco so it masks the deco's top edge (guarantees no white gap) */
.foot-cta{position:relative;z-index:2}
@media (max-width:880px){.foot-deco{left:-30px;top:150px;bottom:auto;width:440px;max-width:100%;opacity:.5}}
/* On footers without the CTA strip (contact / get-a-quote) there's no bar pushing content down,
   so the top deco must start at the footer's top wall (desktop + mobile) like the homepage */
.footer--nocta .foot-deco{top:0;bottom:auto}

/* ---- Dark footer variant (contact + get-a-quote share it 1:1) ---- */
.footer--dark{background:var(--espresso);border-top:0;color:rgba(255,255,255,.7)}
.footer--dark h5{color:#fff}
.footer--dark ul a,.footer--dark ul li{color:rgba(255,255,255,.7)}
.footer--dark ul a:hover{color:var(--primary)}
/* higher specificity - base ".footer .foot-brand p{color:var(--ink-2)}" is defined later in this file */
.footer.footer--dark .foot-brand p{color:rgba(255,255,255,.78)}
.footer.footer--dark .foot-brand p .hl{color:var(--primary)}
.footer--dark .foot-social a{color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.footer--dark .fb{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
.footer--dark .fb .line{color:rgba(255,255,255,.5)}
/* line-art deco strips recolored to faint white so they read on the dark espresso footer
   (source PNGs are blue-grey - off-brand on warm espresso) */
.footer--dark .foot-deco,.footer--dark .foot-deco2{filter:brightness(0) invert(1)}
.footer--dark .foot-deco{opacity:.11}
.footer--dark .foot-deco2{opacity:.13}

/* footer brand: bigger logo, nudged right, clean description w/ accent tagline */
.footer .foot-brand{padding-left:12px}
.foot-logo{display:inline-block;line-height:0}
.footer .foot-brand img{height:94px;margin-bottom:12px}
@media (max-width:880px){.footer .foot-brand img{height:86px;margin-bottom:4px}}
.footer .foot-brand p{margin-top:0;font-style:normal;font-size:18.5px;line-height:1.6;max-width:26ch;color:var(--ink-2);font-weight:450;letter-spacing:-.01em;padding-left:0;border-left:0}
.footer .foot-brand p .hl{color:var(--primary-deep);font-weight:600}

/* footer brand: flush-left on mobile (match columns) */
@media (max-width:880px){.footer .foot-brand{padding-left:0}}

/* footer SECOND decorative pattern (arch) - bottom, slightly right of center */
.foot-deco2{display:block;position:absolute;left:55%;bottom:-24px;width:540px;max-width:44%;height:auto;z-index:0;pointer-events:none;opacity:.55}
@media (max-width:880px){
  .foot-deco2{left:auto;right:-172px;top:auto;bottom:120px;transform:rotate(-90deg);transform-origin:center center;width:560px;max-width:none;opacity:.5}
}

/* ============================================================
   SERVICE PAGES (sp-*) - reusable service-detail layout
   Reuses homepage primitives: .hero, .sec, .eyebrow, .d-xl,
   .btn*, .track*, .trust, .final*, card/feat tokens.
   ============================================================ */

/* hero sub-headline between H1 and lead */
.sp-hero .sp-lede{max-width:44ch;margin:0 0 18px;font-size:clamp(18px,2vw,22px);line-height:1.4;font-weight:600;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.sp-hero .sp-lede + .lead{margin-top:0}

/* two-column image + text split (intro / specs / docs) */
.sp-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sp-split .sp-text{order:1}
.sp-split .sp-media{order:2}
.sp-split.rev .sp-text{order:2}
.sp-split.rev .sp-media{order:1}
.sp-text .eyebrow{color:var(--primary-deep)}
.sp-text h2{margin:16px 0 18px}
.sp-text .sp-p{max-width:48ch;margin:0 0 15px}
.sp-text .sp-p:last-of-type{margin-bottom:22px}
.sp-media{position:relative}
.sp-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3);aspect-ratio:4/3.1}
.sp-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.sp-media:hover .sp-frame img{transform:scale(1.05)}

/* checklists (intro bullets / docs list) */
.sp-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sp-checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.sp-checks .ck{flex:none;width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin-top:1px}
.sp-checks .ck svg{width:13px;height:13px}

/* section header (reasons / faq) - matches .sec-head */
.sp-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:48px}
.sp-head h2{margin-top:16px}
.sp-head .eyebrow{color:var(--primary-deep)}
.sp-head .r{color:var(--mute);font-size:16px;max-width:42ch;justify-self:end}
.sp-head-center{grid-template-columns:1fr;justify-items:center;text-align:center;margin-bottom:40px}

/* reasons grid - feature cards */
.sp-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sp-reason{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--e1);transition:.22s ease;overflow:hidden}
.sp-reason::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.sp-reason:hover{box-shadow:var(--e2);transform:translateY(-4px);border-color:var(--line-2)}
.sp-reason:hover::before{transform:scaleX(1)}
.sp-reason .ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin-bottom:16px}
.sp-reason .ic svg{width:22px;height:22px}
.sp-reason h3{font-size:18px;letter-spacing:-.3px;margin:0 0 7px}
.sp-reason p{font-size:14.5px;color:var(--mute);margin:0;line-height:1.55}

/* specs table */
.sp-table-wrap{margin:2px 0 14px;overflow-x:auto}
.sp-specs{width:100%;border-collapse:collapse;font-size:14.5px}
.sp-specs th,.sp-specs td{text-align:left;padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sp-specs thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600;border-bottom:1px solid var(--line-2)}
.sp-specs tbody th{font-weight:600;color:var(--ink)}
.sp-specs td{color:var(--ink-2)}
.sp-specs td.cap{color:var(--primary-deep);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-specs tbody tr:last-child th,.sp-specs tbody tr:last-child td{border-bottom:0}
.sp-note{font-size:12.5px;color:var(--mute);line-height:1.5;margin:4px 0 0}

/* FAQ accordion (native details/summary - no JS) */
.sp-faq-sec{background:var(--soft)}
.sp-faq-wrap{max-width:840px;margin:0 auto}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 2px;position:relative;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.2px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:25px;width:10px;height:10px;border-right:2px solid var(--primary-deep);border-bottom:2px solid var(--primary-deep);transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--primary-deep)}
.faq .faq-a{padding:0 44px 24px 2px}
.faq .faq-a p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.62;max-width:72ch}

/* service pages - responsive */
@media (max-width:980px){
  .sp-split{grid-template-columns:1fr;gap:36px}
  .sp-split .sp-media,.sp-split.rev .sp-media{order:-1}
  .sp-frame{aspect-ratio:16/10}
  .sp-head{grid-template-columns:1fr;gap:16px}
  .sp-head .r{justify-self:start}
  .sp-reasons{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .sp-reasons{grid-template-columns:1fr}
  .faq summary{font-size:16px;padding-right:38px}
}
/* NOTE: the .sp-* block above is the deprecated first service attempt - kept
   harmless for reference. The live service pages use the .svc-* namespace below. */

/* ============================================================
   SERVICE DETAIL PAGES (svc-*) - dedicated, high-convert layout
   Distinct from the homepage. Reuses only tokens + .container,
   .eyebrow, .d-xl/.d-lg, .lead, .btn*, .faq, .ts-count, .alink.
   ============================================================ */
.svc{overflow-x:clip}
.svc .sec{position:relative}

/* shared small helpers */
.svc .svc-p{margin:0 0 15px}
.svc .svc-p:last-of-type{margin-bottom:0}
.svc-checks{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.svc-checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.svc-checks .ck{flex:none;width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin-top:1px}
.svc-checks .ck svg{width:13px;height:13px}
.svc-sec-head{margin-bottom:44px;max-width:60ch}
.svc-sec-head .eyebrow{color:var(--primary-deep)}
.svc-sec-head h2{margin-top:14px}
.svc-sec-head-center{margin-left:auto;margin-right:auto;text-align:center}
.svc-sec-head-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;max-width:none;margin-bottom:40px}
.svc-sec-head-split .r{color:var(--mute);font-size:16px;max-width:44ch;justify-self:end}
.svc-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3);aspect-ratio:4/3.1}
.svc-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease}
.svc-frame:hover img{transform:scale(1.04)}
.svc-note{font-size:12.5px;color:var(--mute);line-height:1.5;margin:14px 0 0}

/* ---- HERO (light, asymmetric split) ---- */
.svc-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);border-bottom:1px solid var(--line)}
.svc-hero-glow{position:absolute;top:-180px;right:-140px;width:660px;height:660px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--red-rgb),.22),transparent 72%);z-index:0;pointer-events:none}
.svc-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:124px;padding-bottom:84px}
.svc-hero-copy{max-width:600px}
.svc-crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin-bottom:22px}
.svc-crumbs a{color:var(--mute)}.svc-crumbs a:hover{color:var(--primary-deep)}
.svc-crumbs i{font-style:normal;color:var(--line-2)}
.svc-crumbs span[aria-current]{color:var(--ink-2);font-weight:500}
.svc-hero .eyebrow{color:var(--primary-deep)}
.svc-hero h1{margin:14px 0 18px}
.svc-hero h1 .em{color:var(--primary-deep)}
.svc-hero-value{font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:var(--ink-2);max-width:46ch;margin:0 0 26px}
.svc-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.svc-hero-media{position:relative}
.svc-hero-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3);aspect-ratio:4/3.15}
.svc-hero-frame img{width:100%;height:100%;object-fit:cover}
.svc-badge{position:absolute;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--e2);padding:12px 16px}
.svc-badge b{font-size:17px;color:var(--ink);letter-spacing:-.3px;font-weight:700}
.svc-badge span{font-size:12px;color:var(--mute)}
.svc-badge-0{top:24px;left:-22px}
.svc-badge-1{bottom:28px;right:-20px}

/* facts rail (overlaps the hero seam) */
.svc-facts-wrap{position:relative;z-index:5}
.svc-facts{margin-top:-42px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);overflow:hidden}
.svc-fact{padding:20px 24px;border-right:1px solid var(--line)}
.svc-fact:last-child{border-right:0}
.svc-fact b{display:block;font-size:16px;color:var(--ink);font-weight:700;letter-spacing:-.2px;margin-bottom:2px}
.svc-fact span{font-size:12.5px;color:var(--mute);line-height:1.4}

/* ---- STICKY SUB-NAV ---- */
.svc-subnav{position:sticky;top:70px;z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.svc-subnav-in{display:flex;align-items:center;gap:16px;height:58px}
.svc-subnav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.svc-subnav-links::-webkit-scrollbar{display:none}
.svc-subnav-link{white-space:nowrap;font-size:14px;color:var(--ink-2);padding:8px 14px;border-radius:var(--pill);transition:.16s;position:relative}
.svc-subnav-link:hover{background:var(--soft);color:var(--ink)}
.svc-subnav-link.is-active{color:var(--primary-deep);background:var(--primary-soft)}
.svc-subnav-cta{margin-left:auto;padding:9px 18px;font-size:14px;flex:none}
/* anchor offset under fixed nav + sticky subnav */
.svc [id]{scroll-margin-top:132px}

/* ---- OVERVIEW + TL;DR ---- */
.svc-overview{background:#fff}
.svc-overview-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.svc-overview-body .eyebrow{color:var(--primary-deep)}
.svc-overview-body h2{margin:14px 0 20px}
.svc-overview-body .svc-p{max-width:56ch}
.svc-tldr{background:linear-gradient(180deg,var(--cream),#fff);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e1);padding:26px 26px 10px;position:relative;top:6px}
.svc-tldr-head{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:14px}
.svc-tldr-head .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(var(--red-rgb),.18)}
.svc-tldr-def{font-size:15px;line-height:1.55;color:var(--ink);margin:0 0 16px;font-weight:500}
.svc-tldr-grid{margin:0;display:flex;flex-direction:column}
.svc-tldr-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.svc-tldr-row dt{font-size:13px;color:var(--mute);margin:0}
.svc-tldr-row dd{font-size:13.5px;color:var(--ink-2);margin:0;font-weight:500}

/* ---- FIT ---- */
.svc-fit{background:var(--soft)}
.svc-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.svc-fit-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e1);padding:30px 28px}
.svc-fit-panel h3{font-size:18px;letter-spacing:-.3px;margin:0 0 18px}
.svc-fit-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.svc-fit-panel.is-this{border-top:3px solid var(--primary)}
.svc-fit-panel.is-this li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.5}
.svc-fit-panel.is-this .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin-top:1px}
.svc-fit-panel.is-this .ck svg{width:12px;height:12px}
.svc-fit-panel.is-other{background:var(--white);border-top:3px solid var(--line-2)}
.svc-fit-links li{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.svc-fit-links li:first-child{border-top:0;padding-top:0}
.svc-fit-links .tx{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.svc-fit-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--primary-deep)}
.svc-fit-link:hover{color:var(--primary-press)}
.svc-fit-link .btn-arrow svg{width:13px;height:13px}

/* ---- SPECS ---- */
.svc-specs{background:#fff}
.svc-specs-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
.svc-specs-media .svc-frame{aspect-ratio:4/3.4}
/* FTL "Оборудване" image is a portrait top-view on orange - match its aspect so the full truck shows (no crop) */
.svc-specs-media .svc-frame:has(img[src*="ftl-specs"]){aspect-ratio:1054/1492;background:var(--red)}
.svc-specs-body .eyebrow{color:var(--primary-deep)}
.svc-specs-body h2{margin:14px 0 14px}
.svc-table-wrap{margin:20px 0 0;overflow-x:auto}
.svc-table{width:100%;border-collapse:collapse;font-size:14.5px}
.svc-table th,.svc-table td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.svc-table thead th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);font-weight:700;border-bottom:1px solid var(--line-2)}
.svc-table tbody th{font-weight:600;color:var(--ink)}
.svc-table td{color:var(--ink-2)}
.svc-table td.cap{color:var(--primary-deep);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-table tbody tr:last-child th,.svc-table tbody tr:last-child td{border-bottom:0}
/* mobile: stack the specs table into readable cards (no horizontal overflow) */
@media (max-width:560px){
  .svc-table-wrap{overflow-x:visible}
  .svc-table thead{display:none}
  .svc-table tbody tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .svc-table tbody th,.svc-table tbody td{display:block;padding:0;border:0}
  .svc-table tbody th{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .svc-table tbody td{margin-top:8px}
  .svc-table tbody td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:1px}
  .svc-table td.cap{white-space:normal}
}

/* ---- FLOW (vertical timeline) ---- */
.svc-flow{background:var(--soft)}
.svc-flow-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.svc-flow-head{position:sticky;top:150px}
.svc-flow-head .eyebrow{color:var(--primary-deep)}
.svc-flow-head h2{margin:14px 0 14px}
.svc-flow-head p{color:var(--mute);max-width:34ch}
.svc-flow-steps{list-style:none;margin:0;padding:0;position:relative}
.svc-flow-steps::before{content:"";position:absolute;left:22px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--primary),var(--primary-soft))}
.svc-flow-step{position:relative;display:grid;grid-template-columns:46px 1fr;gap:22px;padding:0 0 34px}
.svc-flow-step:last-child{padding-bottom:0}
.svc-flow-num{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--primary-deep);display:grid;place-items:center;font-weight:700;box-shadow:var(--e1);font-variant-numeric:tabular-nums}
.svc-flow-tx{padding-top:8px}
.svc-flow-tx h3{font-size:18px;letter-spacing:-.3px;margin:0 0 5px}
.svc-flow-tx p{margin:0;color:var(--mute);font-size:15px;line-height:1.55;max-width:52ch}

/* ---- PRICE ---- */
.svc-price{background:#fff}
.svc-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-price-factor{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;transition:.22s ease}
.svc-price-factor:hover{background:#fff;box-shadow:var(--e2);transform:translateY(-3px);border-color:var(--line-2)}
.svc-price-factor .ic{width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin-bottom:15px}
.svc-price-factor .ic svg{width:22px;height:22px}
.svc-price-factor h3{font-size:17px;letter-spacing:-.3px;margin:0 0 6px}
.svc-price-factor p{font-size:14px;color:var(--mute);margin:0;line-height:1.55}
.svc-price-cta{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(120deg,var(--primary-soft),#fff);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px}
.svc-price-cta span{font-size:17px;font-weight:600;color:var(--ink)}

/* ---- COVERAGE (dark band) ---- */
.svc-coverage{background:var(--dark);color:#fff;overflow:hidden}
.svc-coverage-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.svc-coverage .eyebrow{color:var(--primary)}
.svc-coverage h2{color:#fff;margin:14px 0 14px}
.svc-coverage-lead{color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.6;max-width:44ch;margin:0 0 18px}
.svc-coverage .alink{color:var(--primary)}
.svc-coverage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.svc-country{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:9px 15px;font-size:14px;color:var(--soft);transition:.16s}
.svc-country:hover{background:rgba(255,255,255,.1)}
.svc-country img{width:20px;height:14px;object-fit:cover;border-radius:2px;flex:none}

/* ---- PROOF ---- */
.svc-proof{background:var(--cream)}
.svc-proof-in{display:grid;grid-template-columns:.7fr 1.3fr;gap:52px;align-items:center}
.svc-proof-stat .n{display:flex;align-items:baseline;font-size:clamp(52px,7vw,84px);font-weight:800;letter-spacing:-2px;color:var(--primary-deep);line-height:1}
.svc-proof-stat .n em{font-style:normal;font-size:.5em}
.svc-proof-stat .l{display:block;margin-top:8px;font-size:15px;color:var(--muted);max-width:22ch}
.svc-proof-quote{margin:0;position:relative;font-size:clamp(20px,2.3vw,27px);line-height:1.4;letter-spacing:-.3px;font-weight:300;color:var(--ink);padding-left:30px}
.svc-proof-quote .qm{position:absolute;left:-2px;top:-6px;font-size:52px;line-height:1;color:var(--primary);font-weight:600}
.svc-proof-quote cite{display:block;margin-top:18px;font-size:14px;font-style:normal;color:var(--muted)}

/* ---- DOCS ---- */
.svc-docs{background:#fff}
.svc-docs-in{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.svc-docs-body .eyebrow{color:var(--primary-deep)}
.svc-docs-body h2{margin:14px 0 14px}
.svc-docs-media .svc-frame{aspect-ratio:4/3.2}

/* ---- FAQ ---- */
.svc-faq{background:var(--soft)}
.svc-faq-in{max-width:860px;margin:0 auto}

/* ---- RELATED ---- */
.svc-related{background:#fff}
.svc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-related-card{display:flex;align-items:center;gap:16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;transition:.22s ease}
.svc-related-card:hover{background:#fff;box-shadow:var(--e2);transform:translateY(-3px);border-color:var(--line-2)}
.svc-related-card .ic{flex:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--primary-soft);display:grid;place-items:center}
.svc-related-card .ic .micon{width:22px;height:22px;background:var(--primary-deep)}
.svc-related-card .tx{display:flex;flex-direction:column;gap:3px}
.svc-related-card .tx b{font-size:15.5px;color:var(--ink);letter-spacing:-.2px}
.svc-related-card .tx span{font-size:13px;color:var(--mute);line-height:1.4}
.svc-related-card .go{margin-left:auto;color:var(--primary-deep);opacity:0;transform:translateX(-4px);transition:.2s}
.svc-related-card:hover .go{opacity:1;transform:none}
.svc-related-card .go svg{width:16px;height:16px}

/* ---- CTA (light) ---- */
.svc-cta{background:linear-gradient(160deg,var(--primary-soft),var(--soft) 60%)}
.svc-cta-in{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center}
.svc-cta-copy .eyebrow{color:var(--primary-deep)}
.svc-cta-copy h2{margin:14px 0 16px}
.svc-cta-copy h2 .em{color:var(--primary-deep)}
.svc-cta-reassure{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.svc-cta-reassure li{display:flex;gap:11px;align-items:center;font-size:15px;color:var(--ink-2)}
.svc-cta-reassure .ck{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--primary-deep);display:grid;place-items:center;box-shadow:var(--e1)}
.svc-cta-reassure .ck svg{width:12px;height:12px}
.svc-cta-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e3);padding:30px;display:flex;flex-direction:column;gap:11px}
.svc-cta-form input,.svc-cta-form textarea{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;color:var(--ink);font-family:inherit;font-size:15px}
.svc-cta-form input::placeholder,.svc-cta-form textarea::placeholder{color:var(--mute)}
.svc-cta-form input:focus,.svc-cta-form textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}
.svc-cta-form .row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.svc-cta-form textarea{resize:vertical;min-height:70px}
.svc-cta-form .btn{justify-content:center;margin-top:6px}
.svc-cta-form .fine{display:flex;align-items:flex-start;justify-content:center;gap:7px;font-size:12px;color:var(--mute);margin:4px 0 0;line-height:1.5}
.svc-cta-form .fine svg{flex:none;width:15px;height:15px;color:var(--primary);margin-top:1px}

/* ---- SERVICE PAGES - RESPONSIVE ---- */
@media (max-width:980px){
  .svc-hero-in{grid-template-columns:1fr;gap:36px;padding-top:130px;padding-bottom:72px}
  .svc-hero-copy{max-width:none}
  .svc-hero-media{max-width:560px}
  .svc-facts{grid-template-columns:1fr 1fr}
  .svc-fact:nth-child(2){border-right:0}
  .svc-overview-in,.svc-specs-in,.svc-flow-in,.svc-coverage-in,.svc-proof-in,.svc-docs-in,.svc-cta-in{grid-template-columns:1fr;gap:36px}
  .svc-sec-head-split{grid-template-columns:1fr;gap:14px}.svc-sec-head-split .r{justify-self:start}
  .svc-fit-grid,.svc-price-grid,.svc-related-grid{grid-template-columns:1fr 1fr}
  .svc-specs-media,.svc-docs-media{order:-1}
  .svc-flow-head{position:static}
  .svc-tldr{top:0}
  .svc-related-card .go{opacity:1;transform:none}
}
@media (max-width:860px){
  .svc-subnav{top:0}                 /* mobile nav is absolute (scrolls away) */
  .svc [id]{scroll-margin-top:74px}
}
@media (max-width:680px){
  .svc-hero-in{padding-top:122px;padding-bottom:60px}
  .svc-badge{display:none}
  .svc-facts{grid-template-columns:1fr}
  .svc-fact{border-right:0;border-bottom:1px solid var(--line)}
  .svc-fact:last-child{border-bottom:0}
  .svc-fit-grid,.svc-price-grid,.svc-related-grid{grid-template-columns:1fr}
  .svc-tldr-row{grid-template-columns:1fr;gap:2px}
  .svc-price-cta{flex-direction:column;align-items:flex-start}
  .svc-subnav-cta{display:none}
  .svc-cta-form .row{grid-template-columns:1fr}
}

/* ============================================================
   SERVICE DETAIL PAGES - V3 (sv3-*) : warm, homepage-family, premium
   Reuses homepage components (.introz/.gframe/.gpill/.gchip/.feat/.dest/.trust/.final).
   ============================================================ */
.sv3{overflow-x:clip}
.sv3-p{margin:0 0 15px;max-width:56ch}
.sv3-p:last-of-type{margin-bottom:0}
.sv3-checks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sv3-checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.sv3-checks .ck{flex:none;width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin-top:1px}
.sv3-checks .ck svg{width:13px;height:13px}
.sv3-head{margin-bottom:44px;max-width:60ch}
.sv3-head .eyebrow{color:var(--primary-deep)}
.sv3-head h2{margin-top:14px}
.sv3-head-center{margin-left:auto;margin-right:auto;text-align:center}
.sv3-head-center .sv3-sub{color:var(--mute);margin-top:12px;font-size:16px}
.sv3-head-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;max-width:none;margin-bottom:40px}
.sv3-head-split .r{color:var(--mute);font-size:16px;max-width:44ch;justify-self:end}

/* HERO */
.sv3-hero.introz{background:linear-gradient(180deg,#fff 0%,var(--cream) 150%)}
.sv3-hero{position:relative;padding:150px 0 88px}
.sv3-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sv3-hero-copy{max-width:600px}
.sv3-crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin-bottom:22px}
.sv3-crumbs a{color:var(--mute)}.sv3-crumbs a:hover{color:var(--primary-deep)}
.sv3-crumbs i{font-style:normal;color:var(--line-2)}
.sv3-crumbs span[aria-current]{color:var(--ink-2);font-weight:500}
.sv3-hero h1{margin:14px 0 20px}
.sv3-hero h1 .em{color:var(--primary-deep)}
.sv3-hero .lead{color:var(--ink-2);max-width:46ch;margin-bottom:28px}
.sv3-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.sv3-hero-media{position:relative}
.sv3-hero-media .gframe .intro-pic{aspect-ratio:4/3.5}
.sv3-hbadge{position:absolute;left:-20px;top:24px;z-index:3;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--e2);padding:12px 16px;display:flex;flex-direction:column;gap:1px}
.sv3-hbadge b{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.sv3-hbadge span{font-size:12px;color:var(--mute)}

/* FACTS band (overlaps hero) */
.sv3-facts-wrap{position:relative;z-index:5}
.sv3-facts{margin-top:-40px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);overflow:hidden}
.sv3-fact{padding:20px 24px;border-right:1px solid var(--line)}
.sv3-fact:last-child{border-right:0}
.sv3-fact b{display:block;font-size:16px;color:var(--ink);font-weight:700;letter-spacing:-.2px;margin-bottom:2px}
.sv3-fact span{font-size:12.5px;color:var(--mute);line-height:1.4}

/* OVERVIEW + TL;DR */
.sv3-overview{background:#fff}
.sv3-overview-in{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.sv3-overview-body .eyebrow{color:var(--primary-deep)}
.sv3-overview-body h2{margin:14px 0 20px}
.sv3-tldr{background:linear-gradient(180deg,var(--cream),#fff);border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:var(--r-lg);box-shadow:var(--e1);padding:26px 28px 14px;margin-top:34px}
.sv3-tldr-head{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:14px}
.sv3-tldr-head .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(var(--red-rgb),.2)}
.sv3-tldr-def{font-size:15px;line-height:1.55;color:var(--ink);margin:0 0 16px;font-weight:500}
.sv3-tldr-grid{margin:0}
.sv3-tldr-row{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.sv3-tldr-row dt{font-size:13px;color:var(--mute);margin:0}
.sv3-tldr-row dd{font-size:13.5px;color:var(--ink-2);margin:0;font-weight:500}

/* FIT */
.sv3-fit{background:var(--soft)}
.sv3-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sv3-fit-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e1);padding:32px 30px}
.sv3-fit-panel h3{font-size:19px;letter-spacing:-.3px;margin:0 0 20px}
.sv3-fit-panel.is-this{border-top:3px solid var(--primary)}
.sv3-fit-panel.is-this ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sv3-fit-panel.is-this li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.5}
.sv3-fit-panel.is-this .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;margin-top:1px}
.sv3-fit-panel.is-this .ck svg{width:12px;height:12px}
.sv3-fit-panel.is-other{background:var(--white);border-top:3px solid var(--line-2)}
.sv3-fit-panel.is-other h3{margin-bottom:8px}
.sv3-fit-panel.is-other ul{list-style:none;margin:0;padding:0}
.sv3-fit-panel.is-other li{border-top:1px solid var(--line)}
.sv3-fit-panel.is-other li a{display:flex;flex-direction:column;gap:6px;padding:15px 0;transition:.16s}
.sv3-fit-panel.is-other li a:hover{padding-left:6px}
.sv3-fit-panel.is-other .tx{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.sv3-fit-panel.is-other .go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--primary-deep)}

/* EQUIPMENT carousel */
.sv3-specs{background:var(--cream);overflow:hidden}
.sv3-specs-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;margin-bottom:36px}
.sv3-specs-media .gframe .intro-pic{aspect-ratio:4/3.3}
.sv3-specs-copy .eyebrow{color:var(--primary-deep)}
.sv3-specs-copy h2{margin:14px 0 14px}
.sv3-rail-hint{margin-top:16px;font-size:13px;color:var(--primary-deep);font-weight:600}
.sv3-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(24px,calc((100vw - 1180px)/2)) 22px;scrollbar-width:none}
.sv3-rail::-webkit-scrollbar{display:none}
.sv3-rail-card{scroll-snap-align:start;flex:0 0 300px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 24px;box-shadow:var(--e1);transition:.22s}
.sv3-rail-card:hover{box-shadow:var(--e2);transform:translateY(-4px)}
.sv3-rail-card .idx{font-size:13px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums}
.sv3-rail-card h3{font-size:19px;margin:12px 0 8px;letter-spacing:-.3px}
.sv3-rail-card p{font-size:14px;color:var(--mute);margin:0 0 18px;line-height:1.5;min-height:42px}
.sv3-rail-card .cap{font-size:14px;font-weight:700;color:var(--primary-deep);border-top:1px solid var(--line);padding-top:14px}
.sv3-note{font-size:12.5px;color:var(--mute);line-height:1.5;margin:8px 0 0}

/* PROCESS - horizontal stepper */
.sv3-flow{background:var(--soft)}
.sv3-flow .sv3-head-center .eyebrow{color:var(--primary-deep)}
.sv3-flow-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.sv3-flow-steps::before{content:"";position:absolute;top:26px;left:9%;right:9%;height:2px;background:repeating-linear-gradient(90deg,var(--primary) 0 7px,transparent 7px 15px);opacity:.5;z-index:0}
.sv3-flow-step{position:relative;z-index:1;text-align:center;padding:0 6px}
.sv3-flow-node{width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--primary-deep);display:grid;place-items:center;font-weight:800;margin:0 auto 16px;box-shadow:var(--e1);font-variant-numeric:tabular-nums}
.sv3-flow-step h3{font-size:16px;margin:0 0 6px;letter-spacing:-.2px}
.sv3-flow-step p{font-size:13.5px;color:var(--mute);margin:0;line-height:1.5}

/* PRICE */
.sv3-price{background:#fff}
.sv3-price .sv3-head-split .eyebrow{color:var(--primary-deep)}
.sv3-price .sv3-head-split .r{color:var(--ink-2)}
.sv3-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sv3-price-factor{background:#fff}
.sv3-price-factor h4{font-size:16px;margin-bottom:4px}
.sv3-price-factor p{font-size:13.5px}
.sv3-price-cta{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(120deg,var(--primary-soft),#fff);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px}
.sv3-price-cta span{font-size:18px;font-weight:600;color:var(--ink)}

/* COVERAGE - dark band + infinity country loop */
.sv3-coverage .eyebrow{color:var(--primary)}
.sv3-coverage .alink{color:var(--primary)}
.sv3-cov-link{margin-top:20px}
.sv3-ticker{position:relative;z-index:1;overflow:hidden;margin-top:42px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sv3-ticker-track{display:flex;width:max-content;animation:sv3-marquee 44s linear infinite}
.sv3-country{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--pill);padding:10px 18px;margin-right:12px;font-size:14px;color:var(--soft);white-space:nowrap}
.sv3-country img{width:20px;height:14px;object-fit:cover;border-radius:2px}
@keyframes sv3-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sv3-ticker-track{animation:none}}

/* PROOF (trust) */
.sv3-proof{text-align:left}
.sv3-proof-in{display:grid;grid-template-columns:.66fr 1.34fr;gap:52px;align-items:center}
.sv3-proof-stat .n{display:flex;align-items:baseline;font-size:clamp(54px,7vw,88px);font-weight:800;letter-spacing:-2px;color:var(--primary-deep);line-height:1}
.sv3-proof-stat .n em{font-style:normal;font-size:.5em}
.sv3-proof-stat .l{display:block;margin-top:8px;font-size:15px;color:var(--muted);max-width:20ch}
.sv3-proof-quote{position:relative}
.sv3-proof-quote .mark{font-size:50px;line-height:0;color:var(--primary);font-weight:600;position:relative;top:18px}
.sv3-proof-quote blockquote{margin:0;font-size:clamp(20px,2.4vw,29px);line-height:1.38;letter-spacing:-.3px;font-weight:300;color:var(--ink)}
.sv3-proof-quote .who{margin-top:18px;color:var(--muted);font-size:14px}

/* DOCS */
.sv3-docs{background:#fff}
.sv3-docs-in{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.sv3-docs-body .eyebrow{color:var(--primary-deep)}
.sv3-docs-body h2{margin:14px 0 14px}
.sv3-docs-media .gframe .intro-pic{aspect-ratio:4/3.2}

/* FAQ */
.sv3-faq{background:var(--soft)}
.sv3-faq-in{max-width:860px;margin:0 auto}

/* RELATED */
.sv3-related{background:#fff}
.sv3-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sv3-related-card{display:flex;align-items:center;gap:16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;transition:.22s ease;position:relative;overflow:hidden}
.sv3-related-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:.28s}
.sv3-related-card:hover{background:#fff;box-shadow:var(--e2);transform:translateY(-3px);border-color:var(--line-2)}
.sv3-related-card:hover::before{transform:scaleX(1)}
.sv3-related-card .ic{flex:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--primary-soft);display:grid;place-items:center}
.sv3-related-card .ic .micon{width:22px;height:22px;background:var(--primary-deep)}
.sv3-related-card .tx{display:flex;flex-direction:column;gap:3px}
.sv3-related-card .tx b{font-size:15.5px;color:var(--ink);letter-spacing:-.2px}
.sv3-related-card .tx span{font-size:13px;color:var(--mute);line-height:1.4}
.sv3-related-card .go{margin-left:auto;color:var(--primary-deep);opacity:0;transform:translateX(-4px);transition:.2s}
.sv3-related-card:hover .go{opacity:1;transform:none}
.sv3-related-card .go svg{width:16px;height:16px}

/* FINAL reassurance (on the dark .final band) */
.sv3-cta-reassure{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sv3-cta-reassure li{display:flex;gap:11px;align-items:center;font-size:15px;color:rgba(255,255,255,.85)}
.sv3-cta-reassure .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center}
.sv3-cta-reassure .ck svg{width:12px;height:12px}

/* V3 - responsive */
@media (max-width:980px){
  .sv3-hero{padding:120px 0 64px}
  .sv3-hero-in{grid-template-columns:1fr;gap:36px}
  .sv3-hero-copy{max-width:none;order:1}
  .sv3-hero.introz .gmedia{max-width:520px;order:2;margin-top:8px}
  .sv3-facts{grid-template-columns:1fr 1fr}
  .sv3-fact:nth-child(2){border-right:0}
  .sv3-overview-in,.sv3-specs-in,.sv3-docs-in,.sv3-proof-in{grid-template-columns:1fr;gap:36px}
  .sv3-tldr{margin-top:6px}
  .sv3-fit-grid,.sv3-price-grid,.sv3-related-grid{grid-template-columns:1fr 1fr}
  .sv3-head-split{grid-template-columns:1fr;gap:14px}.sv3-head-split .r{justify-self:start}
  .sv3-specs-media,.sv3-docs-media{order:-1}
  .sv3-flow-steps{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .sv3-flow-steps::before{display:none}
  .sv3-related-card .go{opacity:1;transform:none}
}
@media (max-width:680px){
  .sv3-hbadge{left:0;top:12px}
  .sv3-facts{grid-template-columns:1fr}
  .sv3-fact{border-right:0;border-bottom:1px solid var(--line)}
  .sv3-fact:last-child{border-bottom:0}
  .sv3-fit-grid,.sv3-price-grid,.sv3-related-grid{grid-template-columns:1fr}
  .sv3-flow-steps{grid-template-columns:1fr;gap:26px}
  .sv3-tldr-row{grid-template-columns:1fr;gap:2px}
  .sv3-price-cta{flex-direction:column;align-items:flex-start}
  .sv3-rail-card{flex-basis:82%}
}

/* ============================================================
   SERVICE DETAIL - V4 "Editorial Ledger" (sv4-)
   Original system: indexed kickers, ghost numerals, arch imagery,
   hairline spec-ledgers. Reuses none of the homepage components.
   ============================================================ */
.sv4{--espresso:var(--darker);overflow-x:clip;background:var(--cream);color:var(--ink)}
.sv4 .sec{position:relative;padding:96px 0}
.sv4 .container{position:relative;z-index:1}

/* kicker */
.sv4-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep)}
.sv4-kicker::before{content:"";width:26px;height:1px;background:currentColor}
.sv4-kicker .k-n{font-variant-numeric:tabular-nums;opacity:.7}
.sv4-kicker .k-n{margin-right:10px}

/* ghost numerals */
.sv4-ghost{position:absolute;top:22px;left:14px;z-index:0;font-size:clamp(90px,13vw,190px);font-weight:800;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--line-2);letter-spacing:-4px;pointer-events:none}
.sv4-ghost-r{left:auto;right:14px}

/* section heads */
.sv4-head{max-width:64ch;margin-bottom:44px}
.sv4-head h2{margin:16px 0 0}
.sv4-lead{margin:16px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.sv4-head-split{display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:end;margin-bottom:40px}
.sv4-head-split h2{margin:16px 0 0}
.sv4-head-split .r{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:44ch;justify-self:end}

/* HERO */
.sv4-hero{position:relative;background:var(--cream);padding:132px 0 76px;border-bottom:1px solid var(--line)}
.sv4-crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mute);padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line-2)}
.sv4-crumbs a{color:var(--mute)}.sv4-crumbs a:hover{color:var(--primary-deep)}
.sv4-crumbs i{font-style:normal;color:var(--line-2)}
.sv4-crumbs span[aria-current]{color:var(--ink-2);font-weight:500}
.sv4-hero-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:40px}
.sv4-meta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.sv4-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.sv4-hero-copy{max-width:620px}
.sv4-display{font-size:clamp(38px,5.4vw,72px);line-height:1.02;letter-spacing:-2px;font-weight:800;max-width:16ch;margin:0 0 22px;text-wrap:balance}
.sv4-display .em{position:relative;color:var(--ink)}
.sv4-display .em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.13em;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .7s .45s cubic-bezier(.22,.61,.36,1)}
.sv4-hero-in.in .sv4-display .em::after{transform:scaleX(1)}
.sv4-hero-lead{color:var(--ink-2);max-width:46ch;margin:0 0 28px}
.sv4-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.sv4-arch{margin:0;height:clamp(360px,44vw,520px);overflow:hidden;border:1px solid var(--line);border-radius:clamp(120px,20vw,220px) clamp(120px,20vw,220px) var(--r-lg) var(--r-lg)/clamp(110px,17vw,190px) clamp(110px,17vw,190px) var(--r-lg) var(--r-lg)}
.sv4-arch img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;clip-path:inset(100% 0 0 0);transition:clip-path .9s .1s cubic-bezier(.22,.61,.36,1),transform 6s ease-out}
.sv4-hero-in.in .sv4-arch img{clip-path:inset(0);transform:scale(1.06)}
.sv4-ledger{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.sv4-ledger-row{padding:18px 22px 18px 0;border-right:1px solid var(--line)}
.sv4-ledger-row:last-child{border-right:0}
.sv4-ledger-row b{display:block;font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.sv4-ledger-row span{font-size:12.5px;color:var(--mute)}

/* FACTS */
.sv4-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sv4-fact{padding:22px 24px 22px 0;border-right:1px solid var(--line)}
.sv4-fact:last-child{border-right:0}
.sv4-fact .i{display:block;font-size:11px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-bottom:10px}
.sv4-fact b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.2px;color:var(--ink);margin-bottom:3px}
.sv4-fact .s{font-size:13px;color:var(--mute);line-height:1.4}

/* OVERVIEW + TL;DR */
.sv4-overview{background:#fff}
.sv4-overview-in{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start}
.sv4-overview-body h2{margin:16px 0 24px}
.sv4-drop{font-size:20px;line-height:1.55;color:var(--ink);margin:0 0 18px;font-weight:500}
.sv4-body{font-size:16px;line-height:1.68;color:var(--ink-2);margin:0 0 16px;max-width:58ch}
.sv4-keys{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.sv4-keys li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2);line-height:1.5}
.sv4-keys .ck{flex:none;width:20px;height:20px;color:var(--primary-deep);margin-top:1px}
.sv4-keys .ck svg{width:16px;height:16px}
.sv4-tldr{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 28px}
.sv4-tldr-head{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:14px}
.sv4-tldr-def{font-size:14.5px;line-height:1.5;color:var(--ink);margin:0 0 8px;font-weight:500}
.sv4-tldr-grid{margin:0}
.sv4-tldr-row{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-top:1px solid var(--line)}
.sv4-tldr-row dt{margin:0;font-size:13px;color:var(--mute);white-space:nowrap;flex:none}
.sv4-tldr-row i{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-3px)}
.sv4-tldr-row dd{margin:0;font-size:13px;color:var(--ink-2);font-weight:600;text-align:right;flex:none;max-width:56%}

/* CARRY (new) */
.sv4-carry{background:var(--cream)}
.sv4-carry-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sv4-carry-item{padding:28px 28px 30px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.sv4-carry-item:nth-child(3n){border-right:0;padding-right:0}
.sv4-carry-item .i{font-size:12px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums}
.sv4-carry-item h3{font-size:18px;margin:12px 0 8px;letter-spacing:-.3px}
.sv4-carry-item p{font-size:14px;color:var(--mute);line-height:1.55;margin:0}

/* FIT */
.sv4-fit{background:#fff}
.sv4-fit-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.sv4-fit-this{padding:34px 40px 34px 0}
.sv4-fit-other{padding:34px 0 34px 40px;border-left:1px solid var(--line)}
.sv4-subhead{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.sv4-fit-this ul,.sv4-fit-other ul{list-style:none;margin:0;padding:0}
.sv4-fit-this li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;font-size:15.5px;color:var(--ink-2);line-height:1.5;border-bottom:1px solid var(--line)}
.sv4-fit-this li:last-child{border-bottom:0}
.sv4-fit-this .ck{flex:none;width:20px;height:20px;color:var(--primary-deep);margin-top:2px}
.sv4-fit-this .ck svg{width:16px;height:16px}
.sv4-linkrow{border-bottom:1px solid var(--line)}
.sv4-linkrow:last-child{border-bottom:0}
.sv4-linkrow a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;transition:.16s}
.sv4-linkrow .tx{font-size:14.5px;color:var(--ink-2);line-height:1.4;max-width:26ch}
.sv4-linkrow a:hover .tx{color:var(--ink)}
.sv4-linkrow .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--primary-deep);white-space:nowrap;flex:none}

/* SPECS */
.sv4-specs{background:var(--cream)}
.sv4-specs-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.sv4-arch-sm{height:clamp(320px,36vw,460px)}
.sv4-specs-copy h2{margin:16px 0 14px}
.sv4-spectable{width:100%;border-collapse:collapse;margin-top:20px;font-size:14.5px}
.sv4-spectable th,.sv4-spectable td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.sv4-spectable thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:700;border-bottom:1px solid var(--ink)}
.sv4-spectable td.i,.sv4-spectable th.i{width:34px;color:var(--primary-deep);font-weight:700;font-variant-numeric:tabular-nums;font-size:12px}
.sv4-spectable tbody th{font-weight:700;color:var(--ink)}
.sv4-spectable td{color:var(--ink-2)}
.sv4-spectable td.cap{text-align:right;font-variant-numeric:tabular-nums;color:var(--primary-deep);font-weight:600;white-space:nowrap}
.sv4-spectable tbody tr:last-child th,.sv4-spectable tbody tr:last-child td{border-bottom:0}
.sv4-note{margin-top:14px;font-size:12.5px;color:var(--mute);line-height:1.5}

/* FLOW */
.sv4-flow{background:#fff}
.sv4-flow-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)}
.sv4-step{position:relative;padding:26px 22px 32px 0;border-right:1px solid var(--line);overflow:hidden}
.sv4-step:last-child{border-right:0}
.sv4-step-n{position:absolute;top:12px;right:12px;z-index:0;font-size:56px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-2);font-variant-numeric:tabular-nums;pointer-events:none}
.sv4-step h3{position:relative;z-index:1;font-size:16px;margin:0 0 8px;letter-spacing:-.2px}
.sv4-step p{position:relative;z-index:1;font-size:13.5px;color:var(--mute);line-height:1.55;margin:0}

/* PRICE */
.sv4-price{background:var(--cream)}
.sv4-price-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.sv4-factor{display:grid;grid-template-columns:44px 44px 1fr;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.sv4-factor .i{font-size:13px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums}
.sv4-factor .ic{width:40px;height:40px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);color:var(--primary-deep);display:grid;place-items:center}
.sv4-factor .ic svg{width:20px;height:20px}
.sv4-factor .tx h3{font-size:17px;margin:0 0 3px;letter-spacing:-.2px}
.sv4-factor .tx p{font-size:14px;color:var(--mute);line-height:1.5;margin:0;max-width:62ch}
.sv4-price-cta{margin-top:28px;padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink)}
.sv4-price-cta span{font-size:18px;font-weight:600;color:var(--ink);max-width:32ch}

/* COVERAGE (espresso + loop) */
.sv4-cov.is-dark{background:var(--espresso);color:var(--soft);overflow:hidden}
.sv4-cov .sv4-kicker{color:var(--primary)}
.sv4-cov h2{color:#fff;margin:16px 0 16px}
.sv4-cov-head{max-width:620px}
.sv4-cov-lead{color:rgba(255,255,255,.66);font-size:16px;line-height:1.6;max-width:46ch;margin:0 0 18px}
.sv4-cov .alink{color:var(--primary)}
.sv4-marq{margin-top:46px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sv4-marq-track{display:flex;width:max-content;animation:sv4-marq 46s linear infinite}
.sv4-chip{display:inline-flex;align-items:center;gap:10px;margin-right:12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--pill);padding:11px 20px;font-size:14px;color:var(--soft);white-space:nowrap}
.sv4-chip img{width:20px;height:14px;object-fit:cover;border-radius:2px}
@keyframes sv4-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sv4-marq-track{animation:none}.sv4-arch img{clip-path:none;transition:none}}

/* COMMIT (new) */
.sv4-commit{background:#fff}
.sv4-commit-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sv4-commit-item{padding:28px 28px 30px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.sv4-commit-item:nth-child(3n){border-right:0;padding-right:0}
.sv4-commit-item:last-child{border-right:0}
.sv4-commit-item .i{font-size:12px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums}
.sv4-commit-item h3{font-size:18px;margin:12px 0 8px;letter-spacing:-.3px}
.sv4-commit-item p{font-size:14px;color:var(--mute);line-height:1.55;margin:0}

/* PROOF */
.sv4-proof{background:var(--cream)}
.sv4-proof-in{display:grid;grid-template-columns:.5fr 1.5fr;gap:56px;align-items:center;border-top:1px solid var(--ink);padding-top:48px}
.sv4-stat .n{display:flex;align-items:baseline;font-size:clamp(56px,8vw,96px);font-weight:800;letter-spacing:-3px;color:var(--primary-deep);line-height:.9}
.sv4-stat .n em{font-style:normal;font-size:.5em}
.sv4-stat .l{display:block;margin-top:10px;font-size:14px;color:var(--mute);max-width:16ch}
.sv4-quote p{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.4;letter-spacing:-.4px;font-weight:300;color:var(--ink)}
.sv4-quote cite{display:block;margin-top:20px;font-size:14px;font-style:normal;color:var(--mute)}

/* DOCS */
.sv4-docs{background:#fff}
.sv4-docs-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.sv4-docs-body h2{margin:16px 0 14px}
.sv4-doclist{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.sv4-doclist li{display:flex;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink);font-weight:500}
.sv4-doclist .i{flex:none;width:18px;height:18px;color:var(--primary-deep)}
.sv4-doclist .i svg{width:18px;height:18px}

/* FAQ */
.sv4-faq{background:var(--cream)}
.sv4-faq-in{max-width:900px;margin:0 auto}
.sv4-acc{border-top:1px solid var(--ink)}
.sv4-acc details{border-bottom:1px solid var(--line)}
.sv4-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 0}
.sv4-acc summary::-webkit-details-marker{display:none}
.sv4-acc .qn{font-size:13px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums;flex:none;width:28px}
.sv4-acc .qt{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.2px;flex:1}
.sv4-acc .mk{flex:none;width:16px;height:16px;position:relative}
.sv4-acc .mk::before,.sv4-acc .mk::after{content:"";position:absolute;background:var(--primary-deep);transition:.22s}
.sv4-acc .mk::before{left:0;right:0;top:7px;height:2px}
.sv4-acc .mk::after{top:0;bottom:0;left:7px;width:2px}
.sv4-acc details[open] .mk::after{transform:scaleY(0)}
.sv4-acc summary:hover .qt{color:var(--primary-deep)}
.sv4-acc .a{padding:0 0 24px 46px}
.sv4-acc .a p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:76ch}

/* RELATED */
.sv4-related{background:#fff}
.sv4-related-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.sv4-related-list li{border-bottom:1px solid var(--line)}
.sv4-svcrow{display:flex;align-items:center;gap:20px;padding:20px 0;transition:.18s}
.sv4-svcrow:hover{padding-left:8px}
.sv4-svcrow .rn{font-size:13px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums;flex:none;width:28px}
.sv4-svcrow .ic{flex:none;width:42px;height:42px;border-radius:var(--r-sm);background:var(--primary-soft);display:grid;place-items:center}
.sv4-svcrow .ic .micon{width:22px;height:22px;background:var(--primary-deep)}
.sv4-svcrow .tx{flex:1;display:flex;flex-direction:column;gap:2px}
.sv4-svcrow .tx b{font-size:16px;color:var(--ink);letter-spacing:-.2px}
.sv4-svcrow .tx span{font-size:13.5px;color:var(--mute)}
.sv4-svcrow .go{color:var(--primary-deep);flex:none;opacity:.5;transition:.18s}
.sv4-svcrow:hover .go{opacity:1;transform:translateX(3px)}
.sv4-svcrow .go svg{width:18px;height:18px}

/* CTA */
.sv4-cta{background:var(--cream);border-top:1px solid var(--line)}
.sv4-cta-in{display:grid;grid-template-columns:1fr .9fr;gap:56px;align-items:center}
.sv4-cta-copy h2{margin:16px 0 16px}
.sv4-cta-copy h2 .em{color:var(--primary-deep)}
.sv4-cta-lead{color:var(--ink-2);max-width:42ch;margin-bottom:0}
.sv4-cta-reassure{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sv4-cta-reassure li{display:flex;gap:11px;align-items:center;font-size:15px;color:var(--ink-2)}
.sv4-cta-reassure .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center}
.sv4-cta-reassure .ck svg{width:12px;height:12px}
.sv4-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:30px;display:flex;flex-direction:column;gap:11px}
.sv4-form input,.sv4-form textarea{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;color:var(--ink);font-family:inherit;font-size:15px}
.sv4-form input::placeholder,.sv4-form textarea::placeholder{color:var(--mute)}
.sv4-form input:focus,.sv4-form textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}
.sv4-form .row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.sv4-form textarea{resize:vertical;min-height:70px}
.sv4-form .btn{justify-content:center;margin-top:6px}
.sv4-form .fine{text-align:center;font-size:12px;color:var(--mute);margin:4px 0 0}

/* V4 responsive */
@media (max-width:980px){
  .sv4 .sec{padding:72px 0}
  .sv4-hero{padding:112px 0 60px}
  .sv4-hero-in{grid-template-columns:1fr;gap:32px;align-items:stretch}
  .sv4-arch{height:clamp(300px,60vw,420px);border-radius:clamp(90px,26vw,160px) clamp(90px,26vw,160px) var(--r-lg) var(--r-lg)/clamp(80px,20vw,140px) clamp(80px,20vw,140px) var(--r-lg) var(--r-lg)}
  .sv4-ledger,.sv4-facts{grid-template-columns:1fr 1fr}
  .sv4-ledger-row:nth-child(2),.sv4-fact:nth-child(2){border-right:0}
  .sv4-overview-in,.sv4-specs-in,.sv4-docs-in,.sv4-proof-in,.sv4-cta-in{grid-template-columns:1fr;gap:36px}
  .sv4-head-split{grid-template-columns:1fr;gap:14px}.sv4-head-split .r{justify-self:start}
  .sv4-carry-grid,.sv4-commit-grid{grid-template-columns:1fr 1fr}
  .sv4-carry-item:nth-child(3n),.sv4-commit-item:nth-child(3n){border-right:1px solid var(--line);padding-right:28px}
  .sv4-carry-item:nth-child(2n),.sv4-commit-item:nth-child(2n){border-right:0;padding-right:0}
  .sv4-fit-grid{grid-template-columns:1fr}
  .sv4-fit-this{padding:28px 0}
  .sv4-fit-other{border-left:0;border-top:1px solid var(--line);padding:28px 0}
  .sv4-flow-steps{grid-template-columns:1fr 1fr}
  .sv4-step:nth-child(2n){border-right:0}
  .sv4-specs-in .sv4-arch-sm,.sv4-docs-in .sv4-arch-sm{order:-1}
  .sv4-proof-in{align-items:start}
}
@media (max-width:680px){
  .sv4-display{font-size:clamp(32px,9vw,44px);letter-spacing:-1px}
  .sv4-arch{height:clamp(280px,72vw,380px);border-radius:clamp(60px,24vw,110px) clamp(60px,24vw,110px) var(--r-md) var(--r-md)/clamp(52px,18vw,92px) clamp(52px,18vw,92px) var(--r-md) var(--r-md)}
  .sv4-ledger,.sv4-facts,.sv4-carry-grid,.sv4-commit-grid,.sv4-flow-steps{grid-template-columns:1fr}
  .sv4-ledger-row,.sv4-fact{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .sv4-ledger-row:last-child,.sv4-fact:last-child{border-bottom:0}
  .sv4-carry-item,.sv4-commit-item,.sv4-step{border-right:0 !important;padding-right:0 !important}
  .sv4-hero-top{flex-direction:column;align-items:flex-start;gap:8px}
  .sv4-price-cta{flex-direction:column;align-items:flex-start}
  .sv4-factor{grid-template-columns:28px 1fr;gap:14px}
  .sv4-factor .ic{display:none}
  .sv4-tldr-row{flex-wrap:wrap}
  .sv4-tldr-row i{display:none}
  .sv4-tldr-row dd{text-align:left;max-width:none}
  .sv4-form .row{grid-template-columns:1fr}
}

/* ============================================================
   DESTINATIONS PAGE (dst-) - map-led premium
   ============================================================ */
.dst{overflow-x:clip}
.dst .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.dst .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* HERO - animated Europe map woven into a warm background */
.dst-hero{position:relative;overflow:hidden;color:var(--ink);background:linear-gradient(180deg,#fff 0%,var(--cream) 140%);border-bottom:1px solid var(--line)}
.dst-hero-map-bg{position:absolute;top:50%;right:-6%;transform:translateY(-50%);width:min(64%,800px);z-index:0;pointer-events:none;opacity:.3;-webkit-mask-image:radial-gradient(76% 70% at 62% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(76% 70% at 62% 50%,#000 50%,transparent 100%)}
.dst-hero-map-bg img{display:block;width:100%;height:auto}
.dst-hero-in{position:relative;z-index:1;padding-top:196px;padding-bottom:44px}
.dst-hero-copy{max-width:600px}
.dst-hero .eyebrow{color:var(--primary-deep)}
.dst-hero h1{margin:16px 0 20px;max-width:none;white-space:nowrap}
.dst-hero h1 .em{color:var(--primary-deep)}
.dst-hero .lead{color:var(--ink-2);max-width:46ch;margin-bottom:30px}
.dst-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
/* hero highlights - clean icon-led row (borderless; not a strip, not pills) */
.dst-hero-meta{position:relative;z-index:1;padding-bottom:84px}
.dst-hero-meta-in{display:flex;flex-wrap:wrap;gap:22px 46px}
.dst-hero-meta .m{display:flex;align-items:center;gap:13px}
.dst-hero-meta .m .ic{flex:none;width:26px;height:26px;color:var(--primary-deep);display:grid;place-items:center}
.dst-hero-meta .m .ic svg{width:24px;height:24px}
.dst-hero-meta .m .t b{display:block;color:var(--ink);font-weight:700;font-size:15px;letter-spacing:-.2px;line-height:1.2}
.dst-hero-meta .m .t span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}

/* shared head */
.dst-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:44px}
.dst-head .eyebrow{color:var(--primary-deep)}
.dst-head h2{margin-top:14px}
.dst-head .r{color:var(--mute);font-size:16px;max-width:42ch;justify-self:end;line-height:1.6}

/* INTRO */
.dst-intro{background:#fff}
.dst-intro-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.dst-intro-copy .eyebrow{color:var(--primary-deep)}
.dst-intro-copy h2{margin:14px 0 18px}
.dst-intro-copy .hl{color:var(--ink);background:linear-gradient(transparent 34%,rgba(255,92,77,.9) 34% 94%,transparent 94%);border-radius:var(--r-xs);padding:0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dst-feats{display:grid;gap:12px}
.dst-feat{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft);transition:.2s}
.dst-feat:hover{background:#fff;box-shadow:var(--e2);border-color:var(--line-2);transform:translateY(-2px)}
.dst-feat .ic{flex:none;width:42px;height:42px;border-radius:var(--r-sm);background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center}
.dst-feat .ic svg{width:20px;height:20px}
.dst-feat h4{font-size:15.5px;margin:0 0 3px;letter-spacing:-.2px}
.dst-feat p{font-size:13.5px;color:var(--mute);margin:0;line-height:1.45}

/* COUNTRIES */
.dst-countries{position:relative;background:var(--soft);overflow:hidden}
.dst-countries>.container{position:relative;z-index:1}
/* homepage-style backdrop: diagonal orange band + halftone dots (dots strong in the
   centre, fading to both left & right edges) */
.dst-countries-bg{position:absolute;inset:-12% -22%;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 42%,rgba(var(--red-rgb),.1) 42% 60%,transparent 60%);-webkit-mask-image:linear-gradient(180deg,transparent 3%,#000 20%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 3%,#000 20%,#000 90%,transparent 100%)}
.dst-countries-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(var(--red-rgb),.5) 1.4px,transparent 1.5px);background-size:20px 20px;opacity:.72;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)}
.dst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dst-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px 22px;box-shadow:var(--e1);transition:.22s ease;display:flex;flex-direction:column;overflow:hidden}
.dst-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:.28s}
.dst-card:hover{box-shadow:var(--e2);transform:translateY(-4px);border-color:var(--line-2)}
.dst-card:hover::before{transform:scaleX(1)}
.dst-card-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.dst-card .flag{width:34px;height:24px;border-radius:var(--r-xs);object-fit:cover;box-shadow:0 1px 4px rgba(var(--ink-rgb),.2);flex:none}
.dst-card .code{font-size:12px;letter-spacing:.08em;color:var(--mute);font-feature-settings:"tnum"}
.dst-badge{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-deep);background:var(--primary-soft);border-radius:var(--pill);padding:5px 11px}
.dst-card h3{font-size:20px;letter-spacing:-.3px;margin:0 0 5px}
.dst-region{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--primary-deep);font-weight:700;margin:0 0 12px}
.dst-card p{font-size:14px;color:var(--mute);line-height:1.55;margin:0 0 16px;flex:1}
.dst-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--primary-deep);opacity:0;transform:translateX(-4px);transition:.2s}
.dst-card:hover .dst-go{opacity:1;transform:none}
.dst-go svg{width:14px;height:14px}
.dst-card.is-feat{grid-column:span 2;background:linear-gradient(135deg,#fff,var(--cream));border-color:var(--line-2)}
.dst-card.is-feat h3{font-size:26px}
.dst-card.is-feat p{font-size:15px;max-width:48ch}
/* "не виждате вашето направление?" CTA card - fills the last (bottom-right) grid cell */
.dst-card-more{background:linear-gradient(150deg,var(--primary-soft),#fff);border:1.5px dashed var(--primary);justify-content:center}
.dst-card-more:hover{border-style:solid;box-shadow:var(--e2);transform:translateY(-4px)}
.dst-more-ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);display:grid;place-items:center;margin-bottom:16px;box-shadow:0 8px 20px -8px rgba(var(--red-rgb),.6)}
.dst-more-ic svg{width:24px;height:24px}
.dst-card-more h3{color:var(--ink);font-size:20px;margin-bottom:8px}
.dst-card-more p{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin-bottom:14px}
.dst-card-more .dst-go{color:var(--primary-deep)}

/* HOW WE WORK - dark statement band */
.dst-loop{position:relative;overflow:hidden;background:var(--espresso);color:#fff}
.dst-loop-bg{position:absolute;inset:0;z-index:0;opacity:.42}
.dst-loop-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.dst-loop::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(var(--darker-rgb),.9),rgba(var(--darker-rgb),.7) 55%,rgba(var(--darker-rgb),.5))}
.dst-loop-in{position:relative;z-index:1}
.dst-loop .eyebrow{color:var(--primary)}
.dst-loop-lead{max-width:680px}
.dst-loop-lead h2{color:#fff;margin:14px 0 14px}
.dst-loop-lead .lead{color:rgba(255,255,255,.8)}
.dst-loop-values{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid rgba(255,255,255,.14)}
.dst-val{display:flex;gap:14px;padding:26px 28px 4px 0}
.dst-val + .dst-val{border-left:1px solid rgba(255,255,255,.12);padding-left:28px}
.dst-val-ic{flex:none;width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--primary);background:rgba(var(--red-rgb),.14);border:1px solid rgba(var(--red-rgb),.32)}
.dst-val-ic svg{width:22px;height:22px}
.dst-val-tx b{display:block;color:#fff;font-size:16px;letter-spacing:-.2px;margin-bottom:5px}
.dst-val-tx span{display:block;color:rgba(255,255,255,.66);font-size:13.5px;line-height:1.5}
.dst-loop-cta{margin-top:34px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dst-loop-note{color:rgba(255,255,255,.6);font-size:13.5px;max-width:34ch}

/* SERVICES INDEX - links to each service */
.dst-services{background:#fff}
.dst-svc-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.dst-svc-rail{position:sticky;top:100px}
.dst-svc-rail .eyebrow{color:var(--primary-deep)}
.dst-svc-rail h2{margin:14px 0 0;font-size:clamp(27px,2.5vw,35px);line-height:1.16}
.dst-svc-rail .lead{margin-top:16px;max-width:34ch}
.dst-svc-list{display:flex;flex-direction:column}
.dst-svc{position:relative;display:grid;grid-template-columns:auto 46px 1fr auto;align-items:center;gap:18px;padding:22px 20px;border-top:1px solid var(--line);transition:background .2s ease,transform .2s ease}
.dst-svc:last-child{border-bottom:1px solid var(--line)}
.dst-svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);transform:scaleY(0);transform-origin:top;transition:transform .28s ease}
.dst-svc:hover{background:var(--soft)}
.dst-svc:hover::before{transform:scaleY(1)}
.dst-svc-num{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.dst-svc-ic{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--primary);box-shadow:0 8px 20px -8px rgba(var(--red-rgb),.55);transition:.22s ease}
.dst-svc-ic .micon{display:block;width:24px;height:24px;background:var(--on-primary);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.dst-svc:hover .dst-svc-ic{background:var(--primary-deep);box-shadow:0 10px 24px -8px rgba(184,27,16,.6)}
.dst-svc-tx b{display:block;font-size:17px;color:var(--ink);letter-spacing:-.3px;margin-bottom:3px;transition:color .2s}
.dst-svc:hover .dst-svc-tx b{color:var(--primary-deep)}
.dst-svc-tx span{display:block;font-size:13.5px;color:var(--mute);line-height:1.5;max-width:52ch}
.dst-svc-go{color:var(--primary-deep);opacity:0;transform:translateX(-6px);transition:.2s}
.dst-svc:hover .dst-svc-go{opacity:1;transform:none}
.dst-svc-go svg{width:16px;height:16px}

/* CTA - big image + overlapping card */
.dst-cta{background:var(--cream)}
.dst-cta-stage{position:relative;padding-bottom:70px}
.dst-cta-media{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3);height:clamp(360px,44vw,540px)}
.dst-cta-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.dst-cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--darker-rgb),.6),rgba(var(--darker-rgb),.15) 52%,transparent 72%)}
.dst-cta-tag{position:absolute;top:22px;left:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(var(--darker-rgb),.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);padding:8px 15px;border-radius:var(--pill)}
.dst-cta-card{position:absolute;left:40px;bottom:0;z-index:3;max-width:480px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e3);padding:34px 36px}
.dst-cta-card .eyebrow{color:var(--primary-deep)}
.dst-cta-card h2{margin:14px 0 14px}
.dst-cta-card .lead{margin-bottom:24px}

/* DESTINATIONS - responsive */
@media (max-width:980px){
  .dst-hero-in{padding-top:120px;padding-bottom:40px}
  .dst-hero-copy{max-width:none}
  .dst-hero h1{max-width:none;white-space:normal}
  .dst-hero-map-bg{width:150%;right:-42%;opacity:.2}
  .dst-intro-in{grid-template-columns:1fr;gap:34px}
  .dst-head{grid-template-columns:1fr;gap:14px}.dst-head .r{justify-self:start}
  .dst-grid{grid-template-columns:1fr 1fr}
  .dst-card.is-feat{grid-column:span 2}
  .dst-go{opacity:1;transform:none}
  .dst-loop-values{grid-template-columns:1fr 1fr}
  .dst-val:nth-child(odd){border-left:0;padding-left:0}
  .dst-svc-layout{grid-template-columns:1fr;gap:30px}
  .dst-svc-rail{position:static}
  .dst-svc-go{opacity:1;transform:none}
  .dst-cta-stage{padding-bottom:0}
  .dst-cta-media{height:clamp(300px,52vw,420px);border-radius:var(--r-lg) var(--r-lg) 0 0}
  .dst-cta-media::after{background:linear-gradient(180deg,transparent 42%,rgba(var(--darker-rgb),.35))}
  .dst-cta-card{position:static;max-width:none;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--e2);-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
}
@media (max-width:680px){
  .dst-hero-meta-in{flex-direction:column;gap:22px}
  .dst-grid{grid-template-columns:1fr}
  .dst-card.is-feat{grid-column:span 1}
  .dst-card.is-feat h3{font-size:22px}
  .dst-loop-values{grid-template-columns:1fr}
  .dst-val{border-left:0!important;padding:20px 0 4px}
  .dst-val + .dst-val{border-top:1px solid rgba(255,255,255,.1);padding-left:0}
  .dst-svc{grid-template-columns:auto 40px 1fr;gap:12px;padding:18px 4px}
  .dst-svc-go{display:none}
  .dst-svc-ic{width:40px;height:40px}.dst-svc-ic svg{width:20px;height:20px}
  .dst-svc-tx b{font-size:15.5px}
  .dst-cta-media{height:clamp(240px,60vw,340px)}
  .dst-cta-card{padding:26px 22px}
  .dst-cta-tag{top:14px;left:14px}
}

/* ============================================================
   DESTINATIONS v2 (dsx-) - centered map hero, region-grouped
   ============================================================ */
.dsx{overflow-x:clip}

/* hero - centered, faint map behind */
.dsx-hero{position:relative;overflow:hidden;text-align:center;background:linear-gradient(180deg,#fff,var(--cream) 155%);border-bottom:1px solid var(--line)}
.dsx-hero-map{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.09;-webkit-mask-image:radial-gradient(60% 62% at 50% 46%,#000 38%,transparent 100%);mask-image:radial-gradient(60% 62% at 50% 46%,#000 38%,transparent 100%)}
.dsx-hero-map img{width:min(880px,92%);height:auto}
.dsx-hero-in{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:160px 0 72px}
.dsx-hero .eyebrow{color:var(--primary-deep)}
.dsx-hero h1{margin:16px auto 20px;max-width:17ch}
.dsx-hero h1 .em{color:var(--primary-deep)}
.dsx-hero .lead{color:var(--ink-2);max-width:52ch;margin:0 auto 30px}
.dsx-hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.dsx-flags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:38px}
.dsx-flags img{width:32px;height:22px;border-radius:4px;object-fit:cover;box-shadow:0 1px 4px rgba(var(--ink-rgb),.18)}
.dsx-flags-n{margin-left:6px;font-size:13px;font-weight:600;color:var(--mute)}

/* stats band */
.dsx-stats{background:var(--cream);border-bottom:1px solid var(--line)}
.dsx-stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.dsx-stat{padding:6px 26px 6px 0;border-right:1px solid var(--line)}
.dsx-stat:last-child{border-right:0}
.dsx-stat .n{display:block;font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-1.5px;color:var(--primary-deep);line-height:1;font-variant-numeric:tabular-nums}
.dsx-stat .l{display:block;margin-top:9px;font-size:13.5px;color:var(--mute);line-height:1.4;max-width:22ch}

/* regions */
.dsx-regions{background:#fff}
.dsx-region{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}
.dsx-region + .dsx-region{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}
.dsx-region-head{position:sticky;top:100px}
.dsx-region-n{font-size:13px;font-weight:700;color:var(--primary-deep);font-variant-numeric:tabular-nums}
.dsx-region-head h2{margin:12px 0 14px}
.dsx-region-head p{font-size:15.5px;color:var(--mute);line-height:1.6;max-width:36ch}
.dsx-region-list{border-top:1px solid var(--ink)}
.dsx-row{position:relative;display:grid;grid-template-columns:40px 1.05fr 1.7fr auto 20px;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);transition:.16s}
.dsx-row:hover{padding-left:8px}
.dsx-row .flag{width:34px;height:24px;border-radius:var(--r-xs);object-fit:cover;box-shadow:0 1px 4px rgba(var(--ink-rgb),.18)}
.dsx-row .cc{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
.dsx-row .cc em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-deep);background:var(--primary-soft);border-radius:var(--pill);padding:3px 8px;margin-left:8px;white-space:nowrap}
.dsx-row .blurb{font-size:14px;color:var(--mute);line-height:1.45}
.dsx-row .code{font-size:12px;letter-spacing:.08em;color:var(--mute);font-feature-settings:"tnum";white-space:nowrap}
.dsx-row .go{color:var(--primary-deep);opacity:.45;transition:.18s}
.dsx-row:hover .go{opacity:1;transform:translateX(3px)}
.dsx-row .go svg{width:16px;height:16px}
.dsx-row.is-feat::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--primary)}

@media (max-width:980px){
  .dsx-hero-in{padding:120px 0 56px}
  .dsx-stats-in{grid-template-columns:1fr 1fr}
  .dsx-stat:nth-child(2){border-right:0}
  .dsx-stat{padding-bottom:22px}
  .dsx-region{grid-template-columns:1fr;gap:24px}
  .dsx-region-head{position:static}
  .dsx-row{grid-template-columns:34px 1fr auto;gap:14px}
  .dsx-row .blurb{display:none}
}
@media (max-width:680px){
  .dsx-stats-in{grid-template-columns:1fr}
  .dsx-stat{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
  .dsx-stat:last-child{border-bottom:0}
  .dsx-row .code{display:none}
  .dsx-row{grid-template-columns:34px 1fr 20px}
  .dsx-flags img{width:26px;height:18px}
}

/* ============================================================
   COVERAGE - background treatments (covbg1/2/3) · same layout
   ============================================================ */
.covbg{position:relative;overflow:hidden;background:#fff}
.covbg .container{position:relative;z-index:1}
.covbg .dst-feat{background:#fff;box-shadow:var(--e1)}
.covbg .dst-feat:hover{box-shadow:var(--e2)}

/* V1 - диагонална оранжева лента + halftone точки */
.covbg1{background:linear-gradient(180deg,#fff,var(--cream) 340%)}
.covbg1 .covbg-band{position:absolute;inset:-14% -22%;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 40%,rgba(var(--red-rgb),.13) 40% 60%,transparent 60%)}
.covbg1 .covbg-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(var(--red-rgb),.5) 1.4px,transparent 1.5px);background-size:18px 18px;-webkit-mask-image:linear-gradient(118deg,transparent 30%,#000 52%,transparent 78%);mask-image:linear-gradient(118deg,transparent 30%,#000 52%,transparent 78%)}

/* V2 - меки оранжеви акценти (base matches .dst-countries below) */
.covbg2{background:var(--soft)}
.covbg2 .covbg-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(38% 60% at 92% 6%,rgba(var(--red-rgb),.2),transparent 66%),radial-gradient(40% 58% at 4% 98%,rgba(var(--red-rgb),.16),transparent 66%),radial-gradient(30% 42% at 62% 44%,rgba(255,255,255,.5),transparent 70%)}

/* V3 - наклонен двуцветен панел зад картите */
.covbg3{background:#fff}
.covbg3 .covbg-panel{position:absolute;top:0;bottom:0;right:0;width:54%;z-index:0;pointer-events:none;background:linear-gradient(160deg,var(--primary-soft),var(--cream));clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
.covbg3 .covbg-dots{position:absolute;top:0;bottom:0;right:0;width:54%;z-index:0;pointer-events:none;opacity:.45;background-image:radial-gradient(rgba(184,27,16,.4) 1.3px,transparent 1.4px);background-size:16px 16px;-webkit-mask-image:linear-gradient(160deg,transparent 24%,#000 62%);mask-image:linear-gradient(160deg,transparent 24%,#000 62%)}

@media (max-width:980px){
  .covbg3 .covbg-panel,.covbg3 .covbg-dots{width:100%;clip-path:polygon(0 20%,100% 8%,100% 100%,0 100%)}
}

/* ============ Contact Form 7 compatibility (forms render explicit custom markup) ============ */
.wpcf7-form-control-wrap{display:block;width:100%;min-width:0}
.wpcf7-form-control{width:100%;min-width:0}
.wpcf7-form-control-wrap[data-name="ts_form"],.wpcf7-form-control-wrap[data-name="ts_lang"],.wpcf7-form-control-wrap[data-name="service"]{display:none}
.ts-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.wpcf7-not-valid-tip{color:var(--red-on-dark);font-size:12px;font-weight:600;margin-top:5px}
.wpcf7-form-control.wpcf7-not-valid{border-color:var(--red-on-dark)!important}
.wpcf7-spinner{margin:6px auto 0;display:block}
.wpcf7-response-output{margin:10px 0 0!important;padding:11px 15px;border-radius:12px;font-size:13.5px;border:1px solid rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.06)}
.svc-cta-form .wpcf7-response-output{border-color:var(--line);color:var(--ink);background:var(--soft)}

/* Inline contextual links inside prose sections (brand orange, clearly a link) */
.rv3-p a,
.svc-p a,
.ab-story-copy p a,
.ab-team-copy p a{
  color:var(--primary-deep);
  font-weight:600;
  text-decoration:none;
  transition:color .15s ease;
}
.rv3-p a:hover,
.svc-p a:hover,
.ab-story-copy p a:hover,
.ab-team-copy p a:hover{
  color:var(--primary-press);
}

/* Form submit: sending state (button disabled during send) + spinner */
.btn.is-sending{opacity:.82;cursor:wait;pointer-events:none}
.btn.is-sending .btn-arrow{display:none}
.btn.is-sending::after{
  content:"";width:15px;height:15px;margin-left:8px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  display:inline-block;vertical-align:-2px;animation:ts-btn-spin .6s linear infinite;
}
@keyframes ts-btn-spin{to{transform:rotate(360deg)}}

/* ============================================================================
   EDITORIAL COMPONENTS (shared across the redesigned templates)
   Section header, framed media + placeholder, directory rows, spec rows,
   light process ledger, FAQ, flat CTA. Pairs with the home.css patterns.
   ========================================================================== */
.ed-split{display:grid;grid-template-columns:1.04fr .96fr;gap:0;align-items:stretch}
.ed-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:46px}
.ed-head .lead{color:var(--mute);max-width:44ch;justify-self:end}
.ed-head h2{margin-top:16px}

/* framed media + placeholder (used until photography is wired in) */
.ed-frame{position:relative;overflow:hidden;background:var(--dark);border:1px solid var(--ink);aspect-ratio:4/3}
.ed-frame img{width:100%;height:100%;object-fit:cover;display:block}
.ed-ph{position:relative;background:var(--dark);color:var(--on-primary);overflow:hidden}
.ed-ph::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px}
.ed-ph-mono{position:absolute;right:18px;top:15px;z-index:1;font-family:var(--ts-font-display);font-weight:700;font-size:28px;letter-spacing:.04em;color:var(--accent);text-transform:uppercase}
.ed-ph-tag{position:absolute;left:16px;bottom:14px;z-index:1;font-family:var(--ts-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* numbered directory rows */
.ed-dir{border-top:1px solid var(--ink)}
.ed-dir-row{display:grid;grid-template-columns:76px 1fr auto;gap:28px;align-items:center;
  padding:30px 10px;border-bottom:1px solid var(--line);color:var(--ink);transition:background .18s ease,padding .18s ease}
.ed-dir-row:hover{background:var(--soft);padding-left:22px;padding-right:22px}
.ed-dir-row .idx{font-family:var(--ts-font-mono);font-size:13px;color:var(--accent-deep)}
.ed-dir-main h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:0;margin:0}
.ed-dir-main p{margin:7px 0 0;color:var(--mute);font-size:15px;line-height:1.6;max-width:66ch}
.ed-dir-go{font-family:var(--ts-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--primary);display:inline-flex;gap:9px;align-items:center;white-space:nowrap}
.ed-dir-row:hover .ed-dir-go .btn-arrow{transform:translateX(4px)}

/* spec rows (label / value) */
.ed-spec{border-top:1px solid var(--ink)}
.ed-spec-row{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}
.ed-spec-row .n{font-family:var(--ts-font-mono);color:var(--accent-deep);font-size:13px;padding-top:3px;display:grid;place-items:start center}
.ed-spec-row .n svg{width:22px;height:22px;color:var(--primary)}
.ed-spec-row h4{font-size:19px;font-weight:600;margin:0 0 6px}
.ed-spec-row p{margin:0;color:var(--mute);font-size:15px;line-height:1.6}

/* light process ledger */
.ed-ledger{border-top:1px solid var(--ink)}
.ed-step{display:grid;grid-template-columns:90px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ed-step .n{font-family:var(--ts-font-display);font-weight:700;font-size:clamp(32px,3.6vw,46px);line-height:.8;color:var(--accent)}
.ed-step h4{font-size:21px;font-weight:600;margin:0 0 7px}
.ed-step p{margin:0;color:var(--mute);font-size:15px;line-height:1.6;max-width:72ch}

/* FAQ */
.ed-faq{border-top:1px solid var(--ink)}
.ed-faq details{border-bottom:1px solid var(--line)}
.ed-faq summary{list-style:none;cursor:pointer;padding:22px 2px;display:flex;align-items:center;gap:16px;font-size:18px;font-weight:600;color:var(--ink)}
.ed-faq summary::-webkit-details-marker{display:none}
.ed-faq summary .q{font-family:var(--ts-font-mono);font-size:13px;color:var(--accent-deep)}
.ed-faq summary .pm{margin-left:auto;font-family:var(--ts-font-mono);font-size:20px;color:var(--mute);transition:transform .2s}
.ed-faq details[open] summary .pm{transform:rotate(45deg)}
.ed-faq .a{padding:0 2px 24px 44px;color:var(--mute);font-size:15px;line-height:1.65;max-width:80ch}

/* flat CTA band */
.ed-cta{background:var(--dark);color:var(--on-primary)}
.ed-cta .eyebrow{color:var(--accent)}
.ed-cta h2{color:var(--on-primary)}
.ed-cta-in{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.ed-cta .lead{color:rgba(255,255,255,.78);margin-top:16px;max-width:52ch}
.ed-cta-act{display:flex;gap:12px;flex-wrap:wrap}
.ed-cta .btn-primary{background:var(--canvas);color:var(--ink)}
.ed-cta .btn-primary:hover{background:var(--accent);color:var(--ink)}
.ed-cta .btn-outline{color:var(--canvas);border-color:rgba(255,255,255,.5)}
.ed-cta .btn-outline:hover{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}

@media (max-width:980px){
  .ed-split{grid-template-columns:1fr}
  .ed-head{grid-template-columns:1fr;gap:14px}
  .ed-head .lead{justify-self:start}
  .ed-cta-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  .ed-dir-row{grid-template-columns:40px 1fr;gap:16px}
  .ed-dir-go{display:none}
  .ed-step{grid-template-columns:56px 1fr;gap:18px}
  .ed-faq .a{padding-left:2px}
}

/* ============================================================================
   SERVICE DETAIL - Editorial-Industrial retune (overrides the active .svc-*
   components; legacy svcbg / svcdark / svc-pcard variants are unused post-redesign).
   ========================================================================== */
.svc-hero-glow{display:none !important}
.svc-hero{background:var(--canvas)}
.svc-hero-frame,.svc-frame,.svc-specs-media .svc-frame,.svc-docs-media .svc-frame{border-radius:var(--r-lg);border:1px solid var(--ink);box-shadow:none}
.svc-badge{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--ink);border-radius:var(--r-md);box-shadow:none}
.svc-badge b{font-family:var(--ts-font-display);font-weight:700}
.svc-badge span{font-family:var(--ts-font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
/* facts strip — crisp bordered row with display numerals + mono labels */
.svc-facts{border-radius:var(--r-lg);box-shadow:none;background:var(--canvas);border-color:var(--ink)}
.svc-fact b{font-family:var(--ts-font-display);font-weight:700;font-size:26px;line-height:1;color:var(--ink)}
.svc-fact span{font-family:var(--ts-font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
/* in-brief card + fit panels + related cards → flat bordered */
.svc-tldr{background:var(--soft);border-radius:var(--r-md);box-shadow:none;border-color:var(--line)}
.svc-tldr-head{font-family:var(--ts-font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.svc-fit-panel{border-radius:var(--r-md);box-shadow:none;background:var(--canvas)}
.svc-fit-panel.is-this{border-top:2px solid var(--primary)}
.svc-fit-panel.is-other{border-top:2px solid var(--accent)}
.svc-related-card{border-radius:var(--r-md);box-shadow:none;background:var(--canvas);border-color:var(--line)}
.svc-related-card:hover{background:var(--soft);transform:none;border-color:var(--ink);box-shadow:none}
/* flow timeline: round mono nodes */
.svc-flow-num{border-radius:50%;background:var(--canvas);border:1px solid var(--ink);color:var(--ink);box-shadow:none;font-family:var(--ts-font-mono);font-weight:500}
/* price factors → flat bordered tiles */
.svc-price-factor{border-radius:var(--r-md) !important;box-shadow:none !important;border:1px solid var(--line);background:var(--canvas);padding:26px 24px}
.svc-price-factor .ic{border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--primary-soft);color:var(--primary);box-shadow:none}
.svc-price-cta{border-radius:var(--r-md);border:1px solid var(--ink);background:var(--soft);box-shadow:none}
/* specs table → hairline */
.svc-table th,.svc-table td{border-color:var(--line)}
.svc-table thead th{font-family:var(--ts-font-mono);text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--mute)}
/* coverage dark band — pine, flat chips */
.svc-coverage{background:var(--dark)}
.svc-country{border-radius:var(--pill);border:1px solid rgba(255,255,255,.2);background:transparent}
/* CF7 controls inside the service CTA */
.svc-cta input:not([type=submit]),.svc-cta textarea,.svc-cta select{width:100%;background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 14px;font-family:inherit;font-size:15px;color:var(--ink)}
.svc-cta input:focus,.svc-cta textarea:focus{outline:none;border-color:var(--ink)}
.svc-cta input[type=submit],.svc-cta .wpcf7-submit{background:var(--ink);color:var(--canvas);border:0;border-radius:var(--pill);font-family:var(--ts-font-body);font-weight:600;font-size:15px;padding:14px 28px;cursor:pointer}
.svc-cta input[type=submit]:hover,.svc-cta .wpcf7-submit:hover{background:var(--primary)}

/* ==========================================================================
   Colour direction switch (inc/look.php). Temporary: shown only while
   inc/brand.php has 'look_switch' => true.
   ========================================================================== */
/* bottom right; the back-to-top button rides above it (--totop-lift) */
:root:has(.ts-look){--totop-lift:60px}
.ts-look{position:fixed;right:24px;bottom:24px;z-index:9990;display:flex;align-items:center;gap:4px;
  background:var(--darker);color:var(--text-on-dark);border:1px solid var(--rule-on-dark);border-radius:var(--pill);
  font:600 14px/1 var(--ts-font-body);padding:6px;box-shadow:0 8px 24px -12px rgba(0,0,0,.55)}
.ts-look a{color:var(--text-on-dark);padding:8px 14px;border-radius:var(--pill)}
.ts-look a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.ts-look a[aria-current]{color:var(--white);background:var(--red)}
.ts-look a:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:3px}
.ts-look span{display:none}
@media print{.ts-look{display:none}}
body.menu-open .ts-look{display:none}
.ts-look.is-tucked{visibility:hidden;opacity:0}
@media (max-width:767px){
  .ts-look{right:16px;bottom:16px}
  :root:has(.ts-look){--totop-lift:56px}
}

/* ==========================================================================
   Background videos (inc/media.php): the poster is the visible frame until the
   video plays; the pause/play button is visually hidden until it has focus.
   ========================================================================== */
.ts-video,.ts-video-poster{display:block;width:100%;height:100%;object-fit:cover}
/* no background on the video: until its first frame it stays transparent and the poster image shows */
.ts-video-toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ts-video-toggle:focus,.ts-video-toggle:focus-visible{z-index:6;right:24px;bottom:24px;width:auto;height:auto;margin:0;padding:14px 22px;border-radius:var(--pill);clip:auto;clip-path:none;
  background:var(--darker);color:var(--white);font:700 16px/1 var(--ts-font-body);border:2px solid var(--red-on-dark);outline:none}
@media (prefers-reduced-motion: reduce){.ts-video-toggle{display:none}}

/* ==========================================================================
   MORFEY DESIGN SYSTEM. Global rules for the rebuilt home page that override the
   starter base styles above: type scale, container, buttons, eyebrows, focus,
   section rhythm, reveal, header (.mh), mobile menu (.mh-mobile), footer (.mf).
   ========================================================================== */
:root{--container:1280px;--gutter:32px;--mh-h:116px;--focus:var(--red)}
@media (max-width:1099px){:root{--mh-h:72px}}
@media (max-width:767px){:root{--gutter:16px}}
/* wide screens: 1320 px of content (the gutters outside it), so sections use the width */
@media (min-width:1600px){:root{--container:calc(1320px + 2 * var(--gutter))}}

/* ---- type scale and section rhythm: the one place the sizes are set ----
   A component reads the role it plays: --fs-h1-home (home hero), --fs-h1 (inner hero), --fs-h2
   (section heading, display text), --fs-h3 (card and column titles), --fs-lead, --fs-body,
   --fs-card (text in cards, lists, FAQ answers), --fs-small (steps, card footnotes, article
   cards), --fs-eyebrow. Desktop values are the maximums: fluid sizes grow with the viewport up to
   1440 px and no further (the clamp maximum is reached at 1440). Phones use the same text sizes
   (body, card, small, H3); the 767 px block sets only the phone H1s, the eyebrow and the padding.
   --sec-pad is a section's top and bottom padding; the bands derive theirs from it. */
:root{
  --fs-h1-home:clamp(40px,calc(40px + 20 * (100vw - 900px) / 540),60px);
  --fs-h1:clamp(36px,calc(36px + 12 * (100vw - 1000px) / 440),48px);
  --fs-h2:clamp(36px,calc(36px + 8 * (100vw - 900px) / 540),44px);
  --fs-h3:22px;
  --fs-lead:18px;
  --fs-body:17px;
  --fs-card:16px;
  --fs-small:15px;
  --fs-eyebrow:13px;
  --sec-pad:82px;
}
/* short screens: a smaller home H1, so the hero and the facts strip fit */
@media (min-width:768px) and (max-height:700px){:root{--fs-h1-home:clamp(36px,calc(36px + 16 * (100vw - 900px) / 540),52px)}}
@media (max-width:767px){
  :root{
    /* an H1's longest word («представителство», about 9 em wide) must fit the phone column */
    --fs-h1-home:clamp(30px,calc((100vw - 2 * var(--gutter)) / 9.4),46px);
    --fs-h1:clamp(30px,calc((100vw - 2 * var(--gutter)) / 9.4),44px);
    --fs-eyebrow:14px;
    --sec-pad:64px;
  }
}
/* narrow phones (320-379 px): section headings, card and column titles, form headings and FAQ
   questions a step smaller, so no heading is wider than its column and none ends on one word
   (the H2 scales with the column: 29 px at 320, 33 px at 360). 380 px and wider are unchanged. */
@media (max-width:379px){
  :root{
    --fs-h2:clamp(26px,calc((100vw - 2 * var(--gutter)) / 10),36px);
    --fs-h3:18px;
  }
  /* the components below are styled later in this file and in blocks.css / form.css: "html"
     makes these narrow-phone values win whatever the order */
  html .ip-point-title,html .hp-step-title,html .ip-pstep-title,html .ip-band-list-title{font-size:18px}
  html .ts-form-panel{padding-left:16px;padding-right:16px}
  html .ts-form-panel .hp-h2{font-size:21px}
  html .ip-faq-item summary{font-size:16px}
  /* the header fits 320 px (logo, enquiry button and menu button), and a long button label
     ("Запитване за този маршрут") wraps instead of running past the column */
  html .mh-logo img,html .mh.is-compact .mh-logo img{height:30px}
  html .mh-actions{gap:6px}
  html .mh-actions .mh-enquiry{padding:0 14px;font-size:15px}
  html .mh-burger{width:46px;height:46px}
  html .btn{padding-left:20px;padding-right:20px;white-space:normal;text-align:center}
}
body{font-size:var(--fs-body);line-height:1.55}
.container{max-width:var(--container);padding:0 var(--gutter)}
.sec{padding:var(--sec-pad) 0}

.d-xxl{font-size:clamp(46px,6.4vw,88px);font-weight:800;line-height:.98;letter-spacing:-.01em;text-transform:none}
.d-xl{font-size:clamp(36px,4vw,54px);font-weight:800;line-height:1.04;letter-spacing:-.005em}
/* no heading or card title ends on a single word: lines of a heading are balanced; running text
   avoids a short last line (inc/typography.php also keeps the last two words together) */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,summary{text-wrap:pretty}
/* card titles in a row take the same room, so the text under them starts at one height
   (two lines; three for the narrow article cards) where cards sit side by side */
@media (min-width:981px){
  .hp-tile-title,.hp-card-title,.hp-step-title,.ip-pstep-title,.ip-glass-title{min-height:2lh}
  .hp-article-title{min-height:3lh}
}
.lead{font-size:20px;line-height:1.55}

/* the bar sits on the middle of the first line, so an eyebrow that wraps on a phone keeps it
   beside its first line instead of between the lines (one line: the same as centring) */
.eyebrow{display:inline-flex;align-items:flex-start;gap:12px;margin:0;font-family:var(--ts-font-body);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:inherit}
.eyebrow::before{content:"";flex:none;width:36px;height:3px;margin-top:calc(.5lh - 1.5px);background:var(--red);opacity:1}

/* buttons: pills at least 52 px tall; the focus ring follows the pill (outline with offset) */
.btn{justify-content:center;min-height:54px;padding:0 30px;border:2px solid transparent;border-radius:var(--pill);font-family:var(--ts-font-body);font-size:17px;font-weight:700;line-height:1.2;letter-spacing:0;gap:10px;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.btn-primary,.btn-red{background:var(--red);border-color:var(--red);color:var(--white)}
.btn-primary:hover,.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--white)}
.btn-primary:active,.btn-red:active{background:var(--red-press);border-color:var(--red-press)}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:0 30px}
.btn-outline:hover{background:var(--ink);color:var(--white)}
.btn-outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.85)}
.btn-outline-light:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn-light{background:var(--white);border-color:var(--white);color:var(--ink)}
.hp-arrow{flex:none;transition:transform .2s ease}
.btn:hover .hp-arrow{transform:translateX(3px)}
/* a button that scrolls down the page points down; one that goes back points left, before the text */
.btn:hover .hp-arrow--down{transform:translateY(3px)}
.btn:hover .hp-arrow--back{transform:translateX(-3px)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* elements focused from script or a skip link (tabindex -1: the home form's heading, #main) show no
   ring; real controls keep theirs. The form's error and success panels set their own (form.css). */
[tabindex="-1"]:focus{outline:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-140px;z-index:300;background:var(--red);color:var(--white);padding:14px 22px;border-radius:var(--pill);font-size:16px;font-weight:700}
.skip-link:focus{top:16px}
#main{display:block;outline:none}

/* reveal: subtle, and off under reduced motion */
.js [data-reveal]{transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[class*="hero"] [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .hp-arrow,.btn:hover .hp-arrow{transition:none;transform:none}
}

/* ---- Header (.mh): a 36 px contact strip and one 80 px row (logo, menu, buttons). Over a hero it
   is transparent at the very top, with a soft scrim so the menu reads over any frame; as soon as
   the page moves (theme.js .is-compact) it turns solid (92 %, blurred), the strip folds away and
   the row shrinks to 68 px. Pages without a hero have the solid header from the start. Without
   JavaScript it stays solid. Below 1100 px (where the row no longer fits in every language): logo,
   enquiry button and the menu button. ---- */
/* --mh-h: the full header (heroes clear it); --mh-compact: the compact one (links to a spot
   further down arrive with it) */
:root{--mh-compact:68px}
@media (max-width:1099px){:root{--mh-compact:72px}}
.mh{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--white);--focus:var(--red-on-dark);
  background-color:rgba(var(--darker-rgb),.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background-color .2s ease,box-shadow .2s ease,-webkit-backdrop-filter .2s ease,backdrop-filter .2s ease}
.mh.is-compact{box-shadow:0 10px 30px -18px rgba(0,0,0,.65)}
.mh--over::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-48px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--darker-rgb),.62) 0%,rgba(var(--darker-rgb),.30) 62%,rgba(var(--darker-rgb),0) 100%);opacity:0;transition:opacity .2s ease}
.js .mh--over:not(.is-compact){background-color:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.js .mh--over:not(.is-compact)::before{opacity:1}
.mh a{color:inherit}
.mh-top{max-height:36px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.12);transition:max-height .2s ease,opacity .2s ease,border-color .2s ease}
.mh-top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:36px;font-size:14px;line-height:1.2;color:var(--text-on-dark)}
.mh-contacts{display:flex;align-items:center;gap:24px;margin:0;padding:0;list-style:none}
.mh-contacts li{display:inline-flex;align-items:center;gap:8px}
.mh-contacts svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.mh-contacts a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.mh-lang{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em}
.mh-lang a{color:var(--text-on-dark);padding:3px 6px;border-radius:var(--pill)}
.mh-lang a:hover{color:var(--white)}
.mh-lang b{color:var(--white);padding:3px 9px;border-radius:var(--pill);background:var(--red)}
.mh-main{display:flex;align-items:center;gap:24px;height:80px;transition:height .2s ease}
.mh-logo{display:inline-flex;align-items:center;flex:none;border-radius:var(--r-sm)}
.mh-logo:focus-visible{outline-offset:5px}
/* every plain link in the header, its menus and the mobile menu takes a rounded focus ring */
:where(.mh,.mh-mobile,.ip-crumbs) a{border-radius:var(--r-xs)}
.mh-logo img{display:block;width:auto;height:48px;transition:height .2s ease}
.mh-nav{flex:1;display:flex;justify-content:center;min-width:0}
.mh-menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.mh-menu > li{position:relative}
.mh-menu > li > a,.mh-menu > li > .is-off,.mh-dd-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0 14px;
  border:0;border-radius:var(--pill);background:transparent;color:var(--white);font-family:var(--ts-font-display);font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap;
  transition:background-color .18s ease}
.mh-menu > li > .is-off{color:var(--text-on-dark)}
.mh-menu > li > a:hover,.mh-dd-btn:hover,.mh-dd.is-open .mh-dd-btn{background:rgba(255,255,255,.1)}
/* the current page (or a service page, on the "Услуги" trigger): a short red bar under the label */
.mh-menu > li > a[aria-current]::after,.mh-dd-btn.is-current::after{content:"";position:absolute;left:50%;bottom:5px;width:18px;height:3px;margin-left:-9px;border-radius:var(--pill);background:var(--red)}
.mh-caret{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.mh-dd.is-open .mh-caret{transform:rotate(180deg)}
/* the services dropdown: a white rounded panel under the trigger (opens on hover and click, theme.js;
   without JavaScript on hover and keyboard focus) */
.mh-dd-panel{position:absolute;left:50%;top:calc(100% + 14px);z-index:5;width:460px;margin-left:-230px;padding:10px;
  background:var(--white);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md);--focus:var(--red);
  box-shadow:0 24px 48px -20px rgba(var(--darker-rgb),.5),0 2px 8px rgba(var(--darker-rgb),.08);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.mh-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.mh-dd.is-open .mh-dd-panel,html:not(.js) .mh-dd:hover .mh-dd-panel,html:not(.js) .mh-dd:focus-within .mh-dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
/* the info centre dropdown: lists under small labels (articles; tools once they exist) */
.mh-dd-panel--info{width:380px;margin-left:-190px;padding:16px 10px 12px}
.mh-dd-group + .mh-dd-group{margin-top:10px;padding-top:12px;border-top:1px solid var(--rule)}
.mh-dd-group .mh-mega-label{padding:0 12px}
.mh-dd-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mh .mh-dd-link{display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.mh .mh-dd-link:hover{background:var(--soft);color:var(--red-deep)}
.mh .mh-dd-link[aria-current]{background:rgba(var(--red-rgb),.07);color:var(--red-deep)}

/* the services mega menu: a panel the width of the page's content under the header, its bottom
   corners rounded; three columns (a small label, the hub as a heading, its pages) and the
   corridor card. The same open, close and keyboard behaviour as the dropdowns (theme.js). */
.mh-menu > li.mh-dd--mega{position:static}
.mh-dd-panel.mh-mega{left:0;right:0;top:100%;width:min(calc(100% - 2 * var(--gutter)),calc(var(--container) - 2 * var(--gutter)));margin:0 auto;padding:0;
  border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);transform:translateY(-4px)}
.mh-dd-panel.mh-mega::before{top:-28px;height:28px}
.mh-mega-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);gap:0 40px;padding:30px 36px 34px}
.mh-mega-label{margin:0 0 8px;font-family:var(--ts-font-body);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
.mh .mh-mega-h{display:block;padding:4px 0 6px;font-family:var(--ts-font-display);font-size:18px;font-weight:800;line-height:1.25;color:var(--ink)}
.mh .mh-mega-h:hover,.mh .mh-mega-h[aria-current]{color:var(--red-deep)}
.mh .mh-mega-h--next{margin-top:14px;padding-top:16px;border-top:1px solid var(--rule)}
.mh-mega-list{margin:4px 0 0;padding:0;list-style:none}
.mh .mh-mega-a{display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 0;font-size:16px;font-weight:500;line-height:1.3;color:var(--text)}
.mh .mh-mega-a:hover,.mh .mh-mega-a[aria-current]{color:var(--red-deep)}
.mh .mh-mega-all{font-weight:700;color:var(--ink)}
.mh-arrow{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
a:hover > .mh-arrow{transform:translateX(3px)}
.mh .mh-mega-feature{display:flex;flex-direction:column;align-self:start;overflow:hidden;border-radius:var(--r-md);background:var(--darker);color:var(--white)}
.mh-mega-map{display:block;aspect-ratio:2/1;overflow:hidden}
.mh-mega-map img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mh-mega-feature:hover .mh-mega-map img{transform:scale(1.04)}
.mh-mega-ft{display:flex;align-items:flex-start;gap:8px;padding:14px 18px 16px;font-family:var(--ts-font-display);font-size:16px;font-weight:700;line-height:1.3}
.mh-mega-ft .mh-arrow{margin-top:2px}
.mh-mega-feature:focus-visible{outline-offset:3px}
.mh-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.mh-actions .btn{min-height:52px;padding:0 24px;font-size:16px}
/* One enquiry button on screen at a time: where the hero has its own (.mh--hero-cta: home,
   service pages) the header's stays hidden until theme.js sees the hero's leave the view
   (.mh--cta-on), then fades in. Hidden is visibility:hidden, out of the tab order. It keeps its
   space, so the centred menu and the logo never move; on desktop the ОДВ button stands in that
   space instead, flush right (moved by --mh-cta-shift, the distance between the two buttons'
   right edges, set in header.php before the first paint and kept up to date by theme.js), and
   slides back left as the enquiry button fades in over it. Transitions start only once the page
   is set up (.mh--cta-ready), so it never opens with a slide; none under reduced motion. Without
   JavaScript (no .js) the enquiry button always shows, in place. */
.mh .mh-enquiry{position:relative;z-index:1}
.js .mh--hero-cta:not(.mh--cta-on) .mh-enquiry{opacity:0;visibility:hidden}
.mh--cta-ready .mh-enquiry{transition:background-color .18s ease,border-color .18s ease,color .18s ease,opacity .2s ease,visibility 0s linear 0s}
.mh--cta-ready:not(.mh--cta-on) .mh-enquiry{transition:background-color .18s ease,border-color .18s ease,color .18s ease,opacity .2s ease,visibility 0s linear .2s}
@media (min-width:1100px){
  .js .mh--hero-cta:not(.mh--cta-on) .mh-odv{transform:translateX(var(--mh-cta-shift,0px))}
  .mh--cta-ready .mh-odv{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .22s ease-out}
}
@media (prefers-reduced-motion:reduce){
  .mh--cta-ready .mh-enquiry,.mh--cta-ready:not(.mh--cta-on) .mh-enquiry,.mh--cta-ready .mh-odv{transition:none}
}
.mh.is-compact .mh-top{max-height:0;opacity:0;border-bottom-width:0}
.mh.is-compact .mh-main{height:68px}
.mh.is-compact .mh-logo img{height:40px}
.mh-burger,.mh-close{display:none;align-items:center;justify-content:center;flex:none;width:52px;height:52px;padding:0;background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.55);border-radius:50%}
.mh-burger svg,.mh-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Old inner templates: the header is fixed; they still clear about 120px for the starter
   header, so the spacer adds only the difference (remove when they are redesigned). */
.mh-spacer{height:max(0px,calc(var(--mh-h) - 120px))}
@media (max-width:1099px){
  .mh-top,.mh-nav,.mh-odv{display:none}
  .mh-burger{display:inline-flex}
  .mh-main,.mh.is-compact .mh-main{height:72px}
  .mh-logo img,.mh.is-compact .mh-logo img{height:44px}
}
@media (max-width:440px){
  .mh-actions{gap:8px}
  .mh-logo img,.mh.is-compact .mh-logo img{height:34px}
  .mh-actions .mh-enquiry{padding:0 18px}
}

/* ---- Mobile full-screen menu ---- */
.mh-mobile{position:fixed;inset:0;z-index:150;overflow-y:auto;background:var(--darker);color:var(--white);--focus:var(--red-on-dark);visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
.menu-open .mh-mobile{visibility:visible;opacity:1;transition:opacity .2s ease}
body.menu-open{overflow:hidden}
.mh-mobile a{color:inherit}
.mh-mobile-head{display:flex;align-items:center;justify-content:space-between;height:72px}
.mh-mobile .mh-close{display:inline-flex}
.mh-mobile-body{padding-bottom:40px}
.mh-mobile-menu{margin:8px 0 28px;padding:0;list-style:none;border-top:1px solid var(--rule-on-dark)}
.mh-mobile-menu > li > a,.mh-mobile-menu > li > .is-off,.mh-mobile-group > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule-on-dark);font-family:var(--ts-font-display);font-size:24px;font-weight:700;line-height:1.2}
.mh-mobile-menu .is-off{color:var(--text-on-dark)}
/* the services: a group that opens in place */
.mh-mobile-group summary{cursor:pointer;list-style:none}
.mh-mobile-group summary::-webkit-details-marker{display:none}
.mh-mobile-group summary .mh-caret{width:24px;height:24px}
.mh-mobile-group[open] > summary .mh-caret,.mh-mobile-sub-group[open] > summary .mh-caret{transform:rotate(180deg)}
/* the services' groups inside "Услуги", and the info centre's lists */
.mh-mobile-subgroups{margin:0;padding:2px 0 8px 16px;list-style:none;border-bottom:1px solid var(--rule-on-dark)}
.mh-mobile-sub-group > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;cursor:pointer;list-style:none;
  font-family:var(--ts-font-display);font-size:20px;font-weight:700;line-height:1.25}
.mh-mobile-sub-group > summary::-webkit-details-marker{display:none}
.mh-mobile-sub-group > summary .mh-caret{width:20px;height:20px}
.mh-mobile-sub-group > summary:focus-visible{outline-offset:2px;border-radius:var(--r-xs)}
.mh-mobile-subgroups .mh-mobile-sub,.mh-mobile-info .mh-mobile-sub{padding:0 0 8px 14px;border-bottom:0}
.mh-mobile-info{padding:0 0 10px 16px;border-bottom:1px solid var(--rule-on-dark)}
.mh-mobile-label{margin:14px 0 2px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark)}
.mh-mobile-group summary:focus-visible{outline-offset:2px;border-radius:var(--r-xs)}
.mh-mobile-sub{margin:0;padding:6px 0 12px 18px;list-style:none;border-bottom:1px solid var(--rule-on-dark)}
/* the body face at 600 (already loaded for the page), not another weight of the display face */
.mh-mobile-sub a,.mh-mobile-sub .is-off{display:flex;align-items:center;gap:6px;min-height:44px;padding:8px 0;font-family:var(--ts-font-body);font-size:19px;font-weight:600;line-height:1.3}
.mh-mobile-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.mh-mobile-actions .btn{flex:1 1 220px}
.mh-mobile-contacts{display:grid;gap:0;margin:0 0 22px;padding:0;list-style:none;color:var(--text-on-dark)}
/* touch targets in the menu are at least 44 px tall: the phone, the e-mail and the languages */
.mh-mobile-contacts a{display:inline-flex;align-items:center;min-height:44px}
.mh-mobile .mh-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.mh-mobile-head .mh-logo{min-height:44px}
/* the page you are on, in the menu */
.mh-mobile-menu a[aria-current],.mh-mobile-sub a[aria-current]{color:var(--red-on-dark)}
@media (min-width:1100px){.mh-mobile{display:none}}
@media (prefers-reduced-motion:reduce){.mh,.mh::before,.mh-top,.mh-main,.mh-logo img,.mh-mobile,.mh-dd-panel,.mh-caret,.mh-menu > li > a,.mh-dd-btn,.mh-arrow,.mh-mega-map img{transition:none}}

/* ---- Background artwork (assets/img/bg/*.svg) --------------------------------------------
   Line motifs are black strokes on transparent, used as CSS masks so they take a token colour
   in both looks. The second mask layer (--deco-fade) shapes each motif. The third
   (--deco-guard) is drawn by theme.js from the line boxes of the body text: the motif runs at
   full strength in empty space and around headings, and drops to --deco-under (half) directly
   behind paragraphs and list text. One line motif per section, at most one glow; no
   animation. The colour is painted as an image: contrast checkers ignore masks and would read
   a flat colour as a tint over the whole section. Each section switches its artwork on
   (.deco-on, theme.js) once the page has loaded and the section comes near the viewport, so
   the images never compete with the hero. */
.has-deco{position:relative;overflow:hidden;--deco-under:.5}
.has-deco > .container{position:relative;z-index:1}
.deco{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--deco-color,currentColor),var(--deco-color,currentColor));opacity:calc(var(--deco-opacity,.06) * var(--deco-k,1));
  -webkit-mask-image:var(--deco-img),var(--deco-fade,linear-gradient(#000,#000)),var(--deco-guard,linear-gradient(#000,#000));
          mask-image:var(--deco-img),var(--deco-fade,linear-gradient(#000,#000)),var(--deco-guard,linear-gradient(#000,#000));
  -webkit-mask-position:var(--deco-pos,center),0 0,0 0;
          mask-position:var(--deco-pos,center),0 0,0 0;
  -webkit-mask-size:var(--deco-size,cover),100% 100%,100% 100%;
          mask-size:var(--deco-size,cover),100% 100%,100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the red glow is coloured already: a plain background, not a mask */
.has-deco:not(.deco-on) > .deco,.has-deco:not(.deco-on) > .deco-glow,.has-deco:not(.deco-on) .cm-glow{display:none}
[data-look="navy"] .deco-glow,[data-look="sea"] .deco-glow{--glow-opacity:.32!important}
[data-look="navy"] .cm-glow,[data-look="sea"] .cm-glow{opacity:.45}
.deco-glow{position:absolute;z-index:0;pointer-events:none;background:url(../img/bg/bg-glow-red.svg) center/100% 100% no-repeat;opacity:var(--glow-opacity,.5)}
/* footer: sea-depth contours from the bottom-right corner */
.mf > .deco{--deco-img:url(../img/bg/bg-contours-b.svg);--deco-color:var(--white);--deco-opacity:.22;--deco-size:1400px auto;--deco-pos:right bottom;
  --deco-fade:radial-gradient(ellipse 75% 120% at 100% 100%,#000 0,#000 30%,transparent 90%)}

/* ---- Footer (.mf) ---- */
.mf{background:var(--darker);color:var(--text-on-dark);--focus:var(--red-on-dark);padding:60px 0 0;font-size:16px;line-height:1.55}
.mf a{color:var(--text-on-dark)}
.mf a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
/* the logo and the contacts in one row, the link columns under them */
.mf-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px 48px;padding-bottom:32px}
.mf-contacts{display:grid;grid-template-columns:repeat(4,auto);gap:12px 40px;margin:0;padding:0;list-style:none}
.mf-contacts li{min-width:0}
/* the office's three lines kept narrow, so the contacts stay in one row beside the logo */
.mf-v{display:block;max-width:250px}
/* the office hours: under the phone and the mailboxes, beside the office's four lines; on phones
   straight under the office */
.mf-hours .mf-v{max-width:none}
.mf-contacts .mf-office{grid-row:1 / span 2}
.mf-contacts .mf-hours{grid-row:2;grid-column:2 / -1}
/* the link columns: Транспорт, Пристанище, Митници (the mega menu's order), Информационен център, Компания */
.mf-in{display:grid;grid-template-columns:1.15fr 1fr 1.1fr 1.35fr .75fr;gap:40px;padding-top:36px;padding-bottom:44px;position:relative}
.mf-in::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--rule-on-dark)}
.mf-list a{display:inline-block;padding:2px 0}
.mf-list a[aria-current]{color:var(--white)}
.mf-logo{display:inline-block}
.mf-logo img{display:block;width:auto;height:52px}
.mf-member{margin:18px 0 0;font-size:15px;color:var(--muted-on-dark)}
.mf-h{margin:0 0 16px;font-family:var(--ts-font-body);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.mf-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
/* "Всички статии →" closes the Информационен център column */
.mf-more{display:inline-flex;align-items:center;gap:6px}
.mf-more .mh-arrow{width:15px;height:15px}
.mf-list .is-off{color:var(--muted-on-dark)}
.mf-k{display:block;margin-bottom:4px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-dark)}
.mf-bottom{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 22px;padding-top:20px;padding-bottom:24px;position:relative;font-size:14px;color:var(--muted-on-dark)}
.mf-bottom::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--rule-on-dark)}
.mf-bottom p{margin:0}
.mf-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none}
/* the legal pages wrap as one group, never one of them alone at a line's end */
.mf-legal ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none}
@media (max-width:1199px){.mf-contacts{grid-template-columns:repeat(2,auto)}}
@media (max-width:980px){.mf-in{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  .mf-top{flex-direction:column}
  .mf-contacts{grid-template-columns:1fr;gap:14px}
  .mf-contacts .mf-office,.mf-contacts .mf-hours{grid-row:auto;grid-column:auto}
  .mf-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  /* Транспорт beside Пристанище, Митници beside Компания, the long info centre list across the bottom */
  .mf-col--info{grid-column:1/-1;order:5}
}
/* the last footer row keeps clear of the back-to-top button where the page margin is too narrow */
@media (max-width:1400px){.mf-bottom{padding-right:96px}}
@media (max-width:767px){.mf-bottom{padding-right:78px}}

/* ---- Back to top (footer.php, assets/js/theme.js) ----
   Fixed bottom right, opposite the colour pill. The red ring shows how far the page has
   scrolled. A cookie banner or any other bottom bar sets --totop-lift on :root to its own
   height, and the button rides above it. Above the content, below the header (100) and the
   mobile menu (150). */
.to-top{--totop-size:52px;--totop-gap:24px;position:fixed;z-index:90;
  right:calc(var(--totop-gap) + env(safe-area-inset-right,0px));
  bottom:calc(var(--totop-gap) + var(--totop-lift,0px) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;width:var(--totop-size);height:var(--totop-size);
  margin:0;padding:0;border:0;border-radius:50%;background:var(--darker);color:var(--white);cursor:pointer;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6);-webkit-tap-highlight-color:transparent;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,background-color .18s ease,visibility 0s linear .2s}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .2s ease,background-color .18s ease,visibility 0s}
.to-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:2;pointer-events:none}
.to-top-track{stroke:rgba(255,255,255,.15)}
.to-top-bar{stroke:var(--red);stroke-dasharray:100;stroke-dashoffset:100}
.to-top-bar.is-full{stroke-dasharray:none}
.to-top-arrow{position:relative;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
@media (hover:hover){
  .to-top:hover{background:var(--red)}
  .to-top:hover .to-top-bar{stroke:var(--white)}
  .to-top:hover .to-top-arrow{transform:translateY(-2px)}
}
.to-top:focus{outline:none}
.to-top:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--red)}
body.menu-open .to-top{visibility:hidden}
@media (max-width:767px){
  .to-top{--totop-size:46px;--totop-gap:16px}
  .to-top-ring{stroke-width:2.26} /* 2 px at the smaller size */
}
@media (prefers-reduced-motion:reduce){
  .to-top{transform:none;transition:opacity .2s ease,visibility 0s linear .2s}
  .to-top.is-shown{transition:opacity .2s ease,visibility 0s}
  .to-top-arrow{transition:none}
}
@media print{.to-top{display:none}}