/* CarvteX design system — Swiss/minimalist, generated via ui-ux-pro-max and
   corrected to the client's own navy + blue brand. See design-system/carvtex/MASTER.md */

/* ---------- Breakpoint reference ----------
   Plain CSS can't read custom properties inside @media conditions, so this
   is a documented scale rather than enforced variables — every max-width/
   min-width value used below should match one of these. Existing values
   were deliberately chosen per component and are NOT renumbered here (that
   would shift behavior in the 700-900px tablet band); this table just
   gives future edits one place to check before introducing a new number.

   480  — small-phone-only rules (1-column fallbacks: testimonial-grid, footer-grid)
   520  — (legacy, same intent as 480 — testimonial-grid/footer-grid still use this exact value)
   640  — phone/tablet boundary (hero, ski-story, contact-fab sizing)
   760  — (legacy, same intent as 768 — about-grid still uses this exact value)
   768  — phone/tablet boundary (generic section padding)
   820  — (legacy, same intent as 860 — footer-grid 2-col still uses this exact value)
   860  — small-desktop/tablet boundary (hero-content, ski-step, service-grid)
   900  — small-desktop/tablet boundary (contact-grid)
   920  — nav collapse boundary (mobile menu, mobile CTA)
   ------------------------------------------- */

:root{
  --color-primary:#0B1C2C;
  --color-secondary:#13283D;
  --color-background:#FFFFFF;
  --color-card:#F4F8FB;
  --color-accent:#1E9BE0;
  --color-accent-dark:#136FA8;
  --color-text:#0B1C2C;
  --color-text-muted:#55687C;
  --color-border:#E4EAF2;
  --color-on-primary:#FFFFFF;
  --color-on-accent:#FFFFFF;

  --font-display:'Bebas Neue', sans-serif;
  --font-body:'Source Sans 3', sans-serif;

  --space-xs:4px;
  --space-sm:8px;
  --space-md:24px;
  --space-lg:32px;
  --space-xl:48px;
  --space-2xl:64px;
  --space-3xl:96px;

  --radius-sm:4px;
  --radius-md:8px;

  --shadow-sm:0 1px 2px rgba(11,28,44,0.05);
  --shadow-md:0 4px 6px rgba(11,28,44,0.10);
  --shadow-lg:0 10px 15px rgba(11,28,44,0.10);
  --shadow-xl:0 20px 25px rgba(11,28,44,0.15);

  --container:1180px;
  --nav-h:76px;
  --ease:cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-background);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Set by main.js while the mobile fullscreen nav is open, so the page
   behind it can't be scrolled with it still showing. nav-toggle (the only
   control that can add this class) is display:none above the 920px nav
   breakpoint, so this never engages on desktop. */
body.nav-open{overflow:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);letter-spacing:0.01em;line-height:1.02;text-transform:uppercase;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--color-accent);color:#fff;
  padding:12px 20px;z-index:1000;font-weight:600;
}
.skip-link:focus{left:0;}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  font-size:12px;color:var(--color-accent);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--color-accent);}

.section-head{max-width:620px;margin:0 0 var(--space-xl);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(28px,4.4vw,46px);color:var(--color-primary);}
.section-head p{margin-top:16px;color:var(--color-text-muted);font-size:16px;line-height:1.65;}

section{padding:var(--space-3xl) 0;border-top:1px solid var(--color-border);}
section:first-of-type{border-top:none;}
@media (max-width:768px){ section{padding:var(--space-2xl) 0;} }
@media (max-width:480px){
  .container{padding:0 16px;}
  section{padding:48px 0;}
  .section-head{margin-bottom:24px;}
  .section-head h2{font-size:clamp(25px,7vw,34px);}
  .section-head p{font-size:14.5px;margin-top:10px;}
  .eyebrow{font-size:11px;}
  .btn{padding:12px 20px;font-size:14px;min-height:44px;}
}

/* ---------- Buttons (Swiss: rectangular, 8px radius, no glow/shine) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-md);font-weight:600;font-size:15px;
  border:1.5px solid transparent;min-height:44px;white-space:nowrap;
  transition:transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--color-accent-dark);box-shadow:var(--shadow-md);}
.btn-outline{border-color:rgba(255,255,255,0.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,0.08);border-color:#fff;}
.btn-outline-dark{border-color:var(--color-border);color:var(--color-primary);}
.btn-outline-dark:hover{border-color:var(--color-primary);}

.icon{width:20px;height:20px;flex-shrink:0;}

/* ---------- PAGE INTRO (sub-page top band, no photo) ---------- */
.page-intro{background:var(--color-primary);color:#fff;padding:var(--space-2xl) 0;border-top:none;}
.page-intro h1{
  font-family:var(--font-display);font-size:clamp(32px,5vw,52px);letter-spacing:0.02em;
  text-transform:uppercase;margin-top:12px;color:#fff;
}
.page-intro p{margin-top:14px;max-width:640px;color:rgba(255,255,255,0.75);font-size:16px;line-height:1.65;}
@media (max-width:640px){
  .page-intro{padding:36px 0 28px;}
  .page-intro h1{font-size:clamp(28px,7.5vw,40px);margin-top:8px;}
  .page-intro p{font-size:14.5px;margin-top:10px;}
}

/* Services hero visual: one shared workbench-photo background spanning
   both the page-intro band AND the 3D ski-story section below it, so the
   photo reads as continuous across the whole top of the Services tab
   instead of stopping at the intro. Desaturated to true grey (the source
   photo's red backdrop would otherwise tint everything) via a pseudo-
   element with filter: grayscale(), since filter on a background-image
   layer isn't possible directly. background-attachment:fixed sizes the
   cover crop against the viewport rather than this tall wrapper's own
   box, which keeps the whole desk in frame (a viewport is close to the
   photo's own aspect ratio; the wrapper itself is much taller/narrower
   and would crop far more aggressively if sized against its own bounds).
   Both child sections drop their own background so this shows through. */
.services-visual-hero{position:relative;isolation:isolate;}
.services-visual-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('/assets/services-hero-bg.webp') center 42%/cover fixed no-repeat;
  filter:grayscale(1) brightness(0.62) contrast(1.05);
}
.services-visual-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  /* Raised across the board vs. the first pass - the photo read as too
     heavy/present behind the 3D ski and the step copy, so it now sits
     further back as a faint textural backdrop instead of competing for
     attention. */
  background:linear-gradient(100deg, rgba(12,13,15,0.9) 0%, rgba(20,21,24,0.78) 40%, rgba(28,29,32,0.68) 100%);
}
.services-visual-hero > section{position:relative;z-index:1;background:transparent;}
.page-intro-services{border-top:none;}

/* ---------- NAV ---------- */
header.site-header{
  position:sticky;top:0;z-index:500;
  background:var(--color-primary);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;color:#fff;}
.brand-icon-img{height:32px;width:auto;flex-shrink:0;display:block;}
.footer-icon-img{height:24px;width:auto;flex-shrink:0;display:inline-block;vertical-align:middle;margin-right:8px;}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-name{font-family:var(--font-display);font-size:22px;letter-spacing:0.04em;text-transform:uppercase;color:#fff;}
.brand-sub{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);margin-top:2px;}

.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{
  color:rgba(255,255,255,0.75);font-weight:600;font-size:14px;letter-spacing:0.02em;text-transform:uppercase;
  padding:8px 2px;border-bottom:2px solid transparent;transition:color 180ms ease, border-color 180ms ease;
}
.nav-links a:hover{color:#fff;border-color:var(--color-accent);}
.nav-links a[aria-current="page"]{color:#fff;border-color:var(--color-accent);}

.nav-actions{display:flex;align-items:center;gap:16px;}
.nav-toggle{
  display:none;background:none;border:none;color:#fff;padding:8px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
@media (max-width:920px){
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    background:var(--color-primary);flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:var(--space-lg) 24px;gap:0;transform:translateX(100%);transition:transform 260ms ease;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  /* .nav-toggle is only visible under this same breakpoint, so body.nav-open
     can never be set from a desktop click — safe to leave unscoped by width. */
  .nav-links a{display:block;width:100%;padding:16px 2px;font-size:17px;border-bottom:1px solid rgba(255,255,255,0.1);}
  .nav-actions .btn-primary{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-links .mobile-cta{display:block;margin-top:var(--space-md);width:auto;border:none;}
}
.mobile-cta{display:none;}
@media (max-width:920px){ .mobile-cta{display:inline-flex;} }

.lang-switch{display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.25);padding:3px;border-radius:var(--radius-sm);}
.lang-switch button{
  border:none;background:transparent;padding:8px 13px;border-radius:2px;font-weight:700;font-size:12px;
  letter-spacing:0.03em;color:rgba(255,255,255,0.65);transition:background-color 180ms ease, color 180ms ease;
  min-width:44px;min-height:38px;
}
.lang-switch button[aria-pressed="true"]{background:var(--color-accent);color:#fff;}

/* ---------- Hero (static banner photo + 3D WebGL snowfall field) ---------- */
.hero{position:relative;padding:0;border-top:none;min-height:min(78vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--color-primary);}
/* dvh re-declared after the vh fallback: browsers that don't know the unit
   discard this line as invalid and keep the vh value above: no regression
   on older engines, and on modern mobile browsers it fixes the hero's
   height jumping when the address bar shows/hides (100vh locks to the
   tallest state, dvh tracks the actual visible viewport). */
.hero{min-height:min(78dvh,760px);}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 72%;display:block;will-change:transform;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(11,28,44,0.92) 0%, rgba(11,28,44,0.76) 36%, rgba(11,28,44,0.34) 66%, rgba(11,28,44,0.1) 100%),
    /* Fades all the way to fully opaque --color-primary by the very
       bottom edge, so the photo dissolves into flat navy before the
       section boundary instead of cutting from visible photo texture
       straight to a solid color - that hard seam was the "gagyi" jump
       into the 3D ski section below. */
    linear-gradient(0deg, rgba(11,28,44,1) 0%, rgba(11,28,44,0.55) 14%, rgba(11,28,44,0) 55%);
}
#heroSnowCanvas{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:block;
}

.hero-content{position:relative;z-index:2;max-width:620px;padding:64px 24px;}
@media (min-width:860px){ .hero-content{padding-left:8%;} }

/* Wordmark (mountain skyline + lettered "CarvteX" + sub-label) sits
   directly above the headline as one unified block, centered as a
   group so the skyline, the word and the sub-label read as one
   stacked mark rather than three independently-aligned pieces. */
.hero-brand{
  --bw-size:clamp(54px,8.5vw,104px);
  margin-bottom:var(--space-lg);text-align:center;
}
.hero-skyline{display:block;position:relative;overflow:hidden;width:100%;height:clamp(60px,8.5vw,118px);margin-bottom:10px;}
.hero-brand-icon{display:block;width:100%;height:100%;color:#fff;}
.hero-brand-word{
  position:relative;display:inline-block;font-family:var(--font-display);font-size:var(--bw-size);
  letter-spacing:0.03em;text-transform:uppercase;color:#fff;line-height:0.78;overflow:hidden;
}
.hero-brand-word .accent{color:var(--color-accent);}
.hero-brand-sub{
  display:block;margin-top:calc(var(--bw-size) * -0.04);
  font-family:var(--font-body);font-weight:700;font-size:clamp(13px,1.6vw,17px);
  letter-spacing:0.34em;text-transform:uppercase;color:var(--color-accent);
}
.mask-reveal{display:block;overflow:hidden;}
.hero-brand-word .mask-reveal{display:inline-block;overflow:hidden;}

.hero-content h1{font-size:clamp(30px,5.2vw,56px);color:#fff;}
.hero-content h1 span{color:var(--color-accent);}
.hero-content .hero-sub{max-width:460px;margin-top:18px;color:rgba(255,255,255,0.85);font-size:16.5px;line-height:1.65;}
.hero-content .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--space-lg);}
.hero-content .hero-badges{
  display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:var(--space-xl);
  padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,0.18);
}
.hero-content .hero-badges div{
  display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:0.03em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,0.85);
}
.hero-content .hero-badges div::before{content:"";width:8px;height:8px;background:var(--color-accent);flex-shrink:0;}
@media (max-width:640px){
  .hero{min-height:86vh;}
  .hero{min-height:86dvh;}
  .hero-content{padding:80px 18px 36px;}
  .hero-brand{--bw-size:clamp(44px,11vw,72px);margin-bottom:18px;}
  .hero-skyline{height:clamp(46px,10vw,76px);margin-bottom:6px;}
  .hero-brand-sub{font-size:clamp(11px,2.6vw,14px);letter-spacing:clamp(0.20em,2vw,0.28em);}
  .hero-content h1{font-size:clamp(28px,7vw,42px);}
  .hero-content .hero-sub{font-size:15px;margin-top:12px;line-height:1.55;}
}
@media (max-width:480px){
  .hero-ctas{flex-direction:column;width:100%;gap:10px;}
  .hero-ctas .btn{width:100%;}
  .hero-badges{flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;}
}

@media (prefers-reduced-motion: no-preference){
  .hero-skyline{clip-path:inset(0 100% 0 0);animation:heroSkylineWipe 1250ms cubic-bezier(0.19,1,0.22,1) 80ms forwards;}

  .mask-reveal > *{
    display:inline-block;transform:translateY(100%);animation:heroUnveil 900ms cubic-bezier(0.19,1,0.22,1) forwards;
  }
  .hero-brand-word .mask-reveal > *{animation-delay:calc(420ms + var(--i) * 95ms);}
  .hero-brand > .mask-reveal:last-child > *{animation-delay:1060ms;}

  .hero-brand-word{animation:heroLetterSpacing 1300ms cubic-bezier(0.19,1,0.22,1) 420ms forwards;}

  .hero-brand-word::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    transform:translateX(-130%);
    animation:heroShimmer 1000ms cubic-bezier(0.4,0,0.2,1) 1200ms forwards;
  }

  .hero-content > :not(.hero-brand){opacity:0;transform:translateY(16px);animation:heroRise 750ms var(--ease) forwards;}
  .hero-content h1{animation-delay:1500ms;}
  .hero-content .hero-sub{animation-delay:1660ms;}
  .hero-content .hero-ctas{animation-delay:1820ms;}
  .hero-content .hero-badges{animation-delay:1950ms;}
}
@keyframes heroRise{to{opacity:1;transform:none;}}
@keyframes heroUnveil{to{transform:translateY(0);}}
@keyframes heroSkylineWipe{to{clip-path:inset(0 0 0 0);}}
@keyframes heroLetterSpacing{from{letter-spacing:-0.015em;}to{letter-spacing:0.03em;}}
@keyframes heroShimmer{to{transform:translateX(130%);}}

/* ---------- Stats Bar (below Hero) ---------- */
.stats-section{
  background:var(--color-secondary);color:#fff;padding:var(--space-xl) 0;border-top:1px solid rgba(255,255,255,0.08);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);
}
.stat-item{
  display:flex;flex-direction:column;gap:4px;padding-left:var(--space-md);
  border-left:2px solid var(--color-accent);
}
.stat-number{
  font-family:var(--font-display);font-size:clamp(36px,4.5vw,52px);line-height:1;
  letter-spacing:0.02em;color:#fff;
}
.stat-label{
  font-size:14px;font-weight:600;color:rgba(255,255,255,0.75);letter-spacing:0.02em;
}
@media (max-width:768px){
  .stats-grid{grid-template-columns:1fr;gap:18px;}
  .stat-item{padding-left:16px;}
  .stat-number{font-size:clamp(32px,8vw,46px);}
  .stat-label{font-size:13.5px;}
}
@media (max-width:480px){
  .stats-section{padding:var(--space-md) 0;}
}

/* ---------- 3D SKI STORY — sticky canvas, scroll-driven steps ---------- */
.ski-story{position:relative;background:transparent;border-top:none;--ski-vh:min(68vh,640px);}
.ski-story{--ski-vh:min(68dvh,640px);} /* dvh fallback-pattern, see .hero above */

.ski-story-sticky{
  position:sticky;top:var(--nav-h);height:var(--ski-vh);
  overflow:hidden;z-index:1;pointer-events:none;
}
#skiCanvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:auto;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 24%, black 44%, black 100%);
  mask-image:linear-gradient(to right, transparent 0%, transparent 24%, black 44%, black 100%);
}
@media (max-width:859px){
  #skiCanvas{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  }
}

/* 3D Model Loading Progress HUD */
.ski-loader{
  position:absolute;right:18%;top:46%;transform:translate(50%,-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(11,28,44,0.86);border:1px solid rgba(30,155,224,0.35);
  padding:18px 26px;border-radius:var(--radius-md);backdrop-filter:blur(8px);
  color:#fff;pointer-events:none;transition:opacity 360ms ease, transform 360ms ease;
}
@media (max-width:859px){
  .ski-loader{right:50%;}
}
.ski-loader-spinner{
  width:28px;height:28px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.2);border-top-color:var(--color-accent);
  animation:skiSpin 0.85s linear infinite;
}
@keyframes skiSpin{to{transform:rotate(360deg);}}
.ski-loader-text{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.85);}
.ski-loader-pct{font-family:var(--font-display);font-size:20px;letter-spacing:0.04em;color:var(--color-accent);}
.ski-story[data-model-ready="true"] .ski-loader,
.ski-story.no-webgl .ski-loader{
  opacity:0;transform:translate(50%,-50%) scale(0.92);pointer-events:none;
}

.ski-story-fallback{display:none;}
.ski-story.no-webgl .ski-story-sticky{display:flex;align-items:center;justify-content:center;}
.ski-story.no-webgl #skiCanvas{display:none;}
.ski-story.no-webgl .ski-story-fallback{
  display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;color:rgba(255,255,255,0.45);
}
.ski-story.no-webgl .ski-story-fallback strong{font-family:var(--font-display);font-size:28px;letter-spacing:0.05em;color:rgba(255,255,255,0.7);}

/* Interactive 3-step quick-switcher HUD & drag hint */
.ski-hud-bottom{
  position:absolute;right:5%;bottom:22px;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:auto;
}
.ski-story.no-webgl .ski-hud-bottom{display:none;}
.ski-step-nav{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(11,28,44,0.85);border:1px solid rgba(255,255,255,0.16);
  padding:5px;border-radius:var(--radius-md);backdrop-filter:blur(8px);
}
.ski-step-btn{
  border:none;background:transparent;color:rgba(255,255,255,0.7);
  font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--radius-sm);min-height:38px;
  transition:background-color 180ms ease, color 180ms ease;
}
.ski-step-btn:hover{color:#fff;background:rgba(255,255,255,0.08);}
.ski-step-btn.active{background:var(--color-accent);color:#fff;}
.ski-drag-hint{
  font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
@media (max-width:640px){
  .ski-hud-bottom{right:50%;transform:translateX(50%);align-items:center;bottom:14px;width:calc(100% - 32px);}
  .ski-drag-hint{display:none;}
}

.ski-story-hint{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,0.55);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  animation:skiHintBob 1.8s ease-in-out infinite;
}
@media (max-width:640px){ .ski-story-hint{display:none;} }
@keyframes skiHintBob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);}}
@media (prefers-reduced-motion: reduce){ .ski-story-hint{animation:none;} }

/* Part-callout arrows over the 3D canvas */
.ski-annotations{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity 360ms ease;
}
.ski-story[data-model-ready="true"] .ski-annotations{opacity:1;}
.ski-story.no-webgl .ski-annotations{display:none;}
.ski-annotation{
  position:absolute;left:var(--ax);top:var(--ay);transform:translate(-50%,-50%) scale(0.85);
  display:flex;align-items:center;gap:9px;opacity:0;
  transition:opacity 420ms ease, transform 420ms ease;
}
.ski-annotation-dot{
  position:relative;width:12px;height:12px;border-radius:50%;flex-shrink:0;
  background:var(--color-accent);box-shadow:0 0 0 3px rgba(30,155,224,0.3);
}
.ski-annotation-dot::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--color-accent);opacity:0.65;
}
@media (prefers-reduced-motion: no-preference){
  .ski-annotation-dot::before{animation:skiAnnotationPulse 2.1s ease-out infinite;}
}
@keyframes skiAnnotationPulse{0%{transform:scale(1);opacity:0.6;}100%{transform:scale(2.4);opacity:0;}}
.ski-annotation-label{
  background:rgba(11,28,44,0.88);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:0.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(255,255,255,0.16);box-shadow:var(--shadow-sm);
}
.ski-story[data-active-part="binding"] .ski-annotation[data-for="binding"],
.ski-story[data-active-part="steel_edges"] .ski-annotation[data-for="steel_edges"],
.ski-story[data-active-part="base,sidewall"] .ski-annotation[data-for="base,sidewall"]{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
@media (max-width:640px){
  .ski-annotations{display:none;}
}

.ski-story-steps{position:relative;z-index:2;margin-top:calc(-1 * var(--ski-vh));pointer-events:none;}
.ski-step{
  min-height:var(--ski-vh);display:flex;flex-direction:column;justify-content:center;
  max-width:490px;padding:0 24px;pointer-events:none;opacity:0;
  transform:translateY(10px);transition:opacity 350ms ease, transform 350ms ease;
}
.ski-step.active{opacity:1;transform:none;pointer-events:auto;}
@media (min-width:860px){ .ski-step{padding:0 0 0 6%;} }
.ski-step-card{
  background:rgba(11,28,44,0.88);
  border:1px solid rgba(255,255,255,0.14);
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius-md);
  padding:28px 30px;
  box-shadow:var(--shadow-xl);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.ski-step .eyebrow{color:var(--color-accent);}
.ski-step h2{font-size:clamp(30px,4.5vw,48px);color:#fff;margin-top:12px;text-wrap:balance;}
.ski-step .hero-sub,.ski-step p{max-width:430px;margin-top:14px;color:rgba(255,255,255,0.88);font-size:16px;line-height:1.65;}
.ski-step-specs{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.ski-spec-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(30,155,224,0.14);border:1px solid rgba(30,155,224,0.35);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:0.03em;
  padding:5px 11px;border-radius:var(--radius-sm);
}
.ski-spec-pill svg{width:14px;height:14px;color:var(--color-accent);flex-shrink:0;}
.ski-step .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}

@media (max-width:859px){
  .ski-story{--ski-vh:min(84vh,640px);--ski-vh:min(84dvh,640px);}
  .ski-step{
    justify-content:flex-end;
    padding:0 16px 74px;
    max-width:520px;
    margin:0 auto;
  }
  .ski-step-card{
    padding:16px 18px;
    background:rgba(11,28,44,0.92);
    box-shadow:0 12px 32px rgba(0,0,0,0.45);
  }
  .ski-step h2{
    font-size:clamp(21px,5vw,28px);
    margin-top:6px;
    line-height:1.15;
  }
  .ski-step .hero-sub,.ski-step p{
    font-size:14px;
    line-height:1.5;
    margin-top:8px;
    max-width:100%;
  }
  .ski-step-specs{
    margin-top:10px;
    padding-top:10px;
    gap:6px;
  }
  .ski-spec-pill{
    font-size:11px;
    padding:4px 8px;
  }
  .ski-step .hero-ctas{
    margin-top:12px;
  }
  .ski-step .btn{
    width:100%;
    min-height:42px;
    padding:10px 16px;
    font-size:14px;
  }
}
@media (max-width:640px){
  .ski-hud-bottom{
    right:50%;
    transform:translateX(50%);
    align-items:center;
    bottom:12px;
    width:calc(100% - 32px);
    max-width:400px;
  }
  .ski-step-nav{
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:4px;
    padding:4px;
  }
  .ski-step-btn{
    flex:1 1 0;
    text-align:center;
    padding:7px 4px;
    font-size:11px;
    min-height:36px;
    white-space:nowrap;
  }
}

/* ---------- 3D Card Tilt & Radial Spotlight ([data-tilt]) ---------- */
[data-tilt]{
  position:relative;
  transform-style:preserve-3d;
  transition:transform 360ms cubic-bezier(0.22,1,0.36,1), box-shadow 360ms ease, background-color 200ms ease, border-color 200ms ease;
  will-change:transform;
  overflow:hidden;
}
[data-tilt]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(30,155,224,0.11), transparent 70%);
  opacity:0;transition:opacity 250ms ease;
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  [data-tilt]:hover{box-shadow:var(--shadow-lg);z-index:2;}
  [data-tilt]:hover::after{opacity:1;}
}

/* ---------- Process ("Hogyan működik?") ---------- */
.process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);
}
.process-card{
  background:var(--color-card);border:1px solid var(--color-border);
  padding:var(--space-xl) var(--space-lg);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;gap:12px;
}
.process-step-num{
  font-family:var(--font-display);font-size:34px;line-height:1;
  color:var(--color-accent);letter-spacing:0.04em;
}
.process-card h3{
  font-family:var(--font-body);font-weight:700;font-size:19px;text-transform:none;
  letter-spacing:0;color:var(--color-primary);
}
.process-card p{
  color:var(--color-text-muted);font-size:15px;line-height:1.65;
}
@media (max-width:1060px) and (min-width:861px){
  .process-grid{gap:16px;}
  .process-card{padding:30px 18px;}
  .process-card h3{font-size:17.5px;}
}
@media (max-width:860px){
  .process-grid{grid-template-columns:1fr;gap:16px;}
  .process-card{padding:24px 20px;}
  .process-step-num{font-size:28px;}
}

/* ---------- Services (3D tilt cards, checklist, featured tier) ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);align-items:stretch;}
.service-card{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:var(--space-xl) var(--space-lg);display:flex;flex-direction:column;
}
.service-card:hover{background:var(--color-card);}
.service-card--featured{
  border:2px solid var(--color-accent);background:var(--color-card);
  box-shadow:var(--shadow-md);
}
.service-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.service-index{font-family:var(--font-display);font-size:18px;letter-spacing:0.08em;color:var(--color-accent);}
.service-badge{
  background:var(--color-accent);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-sm);
}
.service-meta-pill{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12px;font-weight:700;color:var(--color-text-muted);letter-spacing:0.02em;
}
.service-meta-pill svg{width:14px;height:14px;color:var(--color-accent);flex-shrink:0;}
.service-card h3{margin-top:10px;font-family:var(--font-body);font-weight:700;text-transform:none;letter-spacing:0;font-size:21px;color:var(--color-primary);}
.service-card p{margin-top:10px;color:var(--color-text-muted);font-size:15px;line-height:1.6;}
.service-features{
  margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:10px;flex-grow:1;
}
.service-features li{
  display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--color-text);font-weight:500;
}
.service-features li svg{
  width:17px;height:17px;color:var(--color-accent);flex-shrink:0;margin-top:2px;
}
.service-card .card-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-lg);
  font-weight:700;font-size:14px;color:var(--color-primary);min-height:44px;
}
.service-card--featured .card-link{color:var(--color-accent-dark);}
.service-card .card-link .icon{width:16px;height:16px;transition:transform 180ms ease;}
.service-card:hover .card-link .icon{transform:translateX(4px);}
.home-services-actions{
  margin-top:var(--space-xl);display:flex;justify-content:center;
}
@media (max-width:1060px) and (min-width:861px){
  .service-grid{gap:16px;}
  .service-card{padding:30px 18px;}
  .service-card h3{font-size:19px;}
  .service-meta-pill{font-size:11.5px;}
  .service-features li{font-size:13px;gap:8px;}
}
@media (max-width:860px){
  .service-grid{grid-template-columns:1fr;gap:20px;}
  .service-card{padding:26px 20px;}
  .home-services-actions{margin-top:28px;}
  .home-services-actions .btn{width:100%;text-align:center;}
}
@media (max-width:480px){
  .service-card{padding:20px 16px;}
  .service-card h3{font-size:18.5px;}
  .service-meta-pill{font-size:11px;}
  .service-features{gap:8px;margin-top:14px;padding-top:14px;}
  .service-features li{font-size:13px;}
  .service-card .card-link{margin-top:18px;}
}

/* ---------- Step #3: Interactive Before / After Ski Restoration Slider ---------- */
.ba-section{background:var(--color-card);}
.ba-header-bar{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  gap:var(--space-md);margin-bottom:var(--space-lg);
}
.ba-header-bar .section-head{margin-bottom:0;}
.ba-presets{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--color-border);padding:5px;border-radius:var(--radius-md);
}
.ba-preset-btn{
  border:none;background:transparent;color:var(--color-text-muted);
  font-weight:700;font-size:12.5px;letter-spacing:0.03em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--radius-sm);min-height:40px;
  transition:background-color 180ms ease, color 180ms ease;
}
.ba-preset-btn:hover{color:var(--color-primary);background:var(--color-card);}
.ba-preset-btn.active{background:var(--color-primary);color:#fff;}

.ba-stage{
  position:relative;--ba-pos:50%;
  border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--color-border);box-shadow:var(--shadow-lg);
  background:var(--color-primary);user-select:none;
}
.ba-viewport{
  position:relative;width:100%;height:380px;overflow:hidden;
}
.ba-layer{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.ba-layer-before{
  background:radial-gradient(circle at 30% 50%, #2a333d 0%, #161d24 100%);
}
.ba-layer-after{
  background:radial-gradient(circle at 70% 50%, #102a42 0%, #071320 100%);
  clip-path:inset(0 0 0 var(--ba-pos));
}
.ba-svg{
  width:100%;height:100%;display:block;
}
.ba-tag{
  position:absolute;top:18px;z-index:3;
  font-size:11.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:6px 13px;border-radius:var(--radius-sm);pointer-events:none;
}
.ba-tag-before{
  left:18px;background:rgba(245,30,38,0.9);color:#f59e0b;
  border:1px solid rgba(245,158,11,0.4);
}
.ba-tag-after{
  right:18px;background:rgba(11,28,44,0.92);color:var(--color-accent);
  border:1px solid rgba(30,155,224,0.45);
}

.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--ba-pos);z-index:4;
  width:2px;background:var(--color-accent);transform:translateX(-50%);
  box-shadow:0 0 14px rgba(30,155,224,0.8);pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:var(--color-accent);color:#fff;
  border:2px solid #fff;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;
  transition:transform 180ms ease, background-color 180ms ease;
}
.ba-stage:hover .ba-handle{transform:translate(-50%,-50%) scale(1.06);}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;z-index:5;
}
.ba-range:focus-visible ~ .ba-divider .ba-handle{
  outline:3px solid #fff;outline-offset:3px;
}

.ba-callouts{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-md);
}
.ba-callout-group{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.ba-callout-card{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;
}
.ba-callout-card--before{border-left:3px solid #d97706;}
.ba-callout-card--after{border-left:3px solid var(--color-accent);}
.ba-callout-card strong{
  font-size:14.5px;font-weight:700;color:var(--color-primary);
  display:flex;align-items:center;gap:8px;
}
.ba-callout-card--before strong svg{color:#d97706;width:16px;height:16px;flex-shrink:0;}
.ba-callout-card--after strong svg{color:var(--color-accent);width:16px;height:16px;flex-shrink:0;}
.ba-callout-card p{font-size:13.5px;color:var(--color-text-muted);line-height:1.55;}

@media (max-width:860px){
  .ba-header-bar{flex-direction:column;align-items:stretch;gap:16px;}
  .ba-presets{
    display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:4px;padding:4px;
  }
  .ba-preset-btn{
    padding:8px 6px;font-size:11.5px;text-align:center;justify-content:center;min-height:42px;white-space:normal;line-height:1.2;
  }
  .ba-viewport{height:290px;}
  .ba-callouts{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:520px){
  .ba-callout-group{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .ba-viewport{height:230px;}
  .ba-tag{font-size:10px;padding:4px 8px;top:10px;}
  .ba-tag-before{left:10px;}
  .ba-tag-after{right:10px;}
  .ba-handle{width:36px;height:36px;}
  .ba-handle svg{width:16px;height:16px;}
  .ba-preset-btn{font-size:10.5px;padding:6px 2px;}
  .ba-callout-card{padding:14px;}
  .ba-callout-card strong{font-size:13.5px;}
  .ba-callout-card p{font-size:12.5px;}
}

/* ---------- Step #4: 3-Click Service Diagnostic Finder ---------- */
.finder-grid{
  display:grid;grid-template-columns:1.25fr 0.95fr;gap:var(--space-xl);align-items:start;
}
@media (max-width:900px){
  .finder-grid{grid-template-columns:1fr;gap:24px;}
  .finder-rec-card{position:static;padding:28px 24px;}
}
@media (max-width:640px){
  .finder-q-group{padding:16px 16px;}
  .finder-q-title{font-size:15px;margin-bottom:10px;}
  .finder-opts{gap:8px;}
  .finder-opt{
    width:100%;padding:11px 13px;font-size:13.5px;min-height:46px;
  }
  .finder-q-group:nth-child(3) .finder-opts{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;
  }
  .finder-q-group:nth-child(3) .finder-opt{
    justify-content:center;text-align:center;padding:10px 4px;font-size:12.5px;
  }
  .finder-rec-card{padding:22px 18px;}
  .finder-rec-card h3{font-size:clamp(24px,6vw,32px);}
  .finder-rec-reason{font-size:14px;line-height:1.55;}
  .finder-rec-feats li{font-size:13px;}
}
.finder-questions{
  display:flex;flex-direction:column;gap:var(--space-md);
}
.finder-q-group{
  background:var(--color-card);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:20px 24px;
}
.finder-q-title{
  font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--color-primary);
  text-transform:none;letter-spacing:0;margin-bottom:12px;
}
.finder-opts{
  display:flex;flex-wrap:wrap;gap:10px;
}
.finder-opt{
  border:1.5px solid var(--color-border);background:#fff;color:var(--color-text);
  font-weight:600;font-size:14px;padding:10px 16px;border-radius:var(--radius-sm);
  min-height:44px;display:inline-flex;align-items:center;gap:8px;text-align:left;
  transition:border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.finder-opt:hover{border-color:var(--color-accent);}
.finder-opt[aria-pressed="true"]{
  border-color:var(--color-accent);background:var(--color-primary);color:#fff;
  box-shadow:var(--shadow-sm);
}
.finder-opt-dot{
  width:10px;height:10px;border-radius:50%;border:2px solid var(--color-text-muted);flex-shrink:0;
  transition:border-color 180ms ease, background-color 180ms ease;
}
.finder-opt[aria-pressed="true"] .finder-opt-dot{
  border-color:var(--color-accent);background:var(--color-accent);
}

.finder-rec-card{
  background:var(--color-primary);color:#fff;border-radius:var(--radius-md);
  padding:var(--space-xl) var(--space-lg);box-shadow:var(--shadow-xl);
  border-top:4px solid var(--color-accent);position:sticky;top:calc(var(--nav-h) + 24px);
  display:flex;flex-direction:column;gap:16px;
}
.finder-rec-badge{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(30,155,224,0.18);border:1px solid rgba(30,155,224,0.45);
  color:var(--color-accent);font-size:11.5px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-sm);
}
.finder-rec-card h3{
  font-size:clamp(28px,3.6vw,40px);color:#fff;margin:0;
}
.finder-rec-reason{
  color:rgba(255,255,255,0.82);font-size:15.5px;line-height:1.65;
}
.finder-rec-feats{
  display:flex;flex-direction:column;gap:9px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,0.14);
}
.finder-rec-feats li{
  display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,0.92);font-weight:600;
}
.finder-rec-feats li svg{
  width:16px;height:16px;color:var(--color-accent);flex-shrink:0;
}
.finder-rec-card .btn-primary{
  width:100%;margin-top:8px;
}

/* ---------- Step #5: Smart Booking Form Chips ---------- */
.form-pills{
  display:flex;flex-wrap:wrap;gap:8px;
}
.form-pill{
  border:1.5px solid var(--color-border);background:#fff;color:var(--color-primary);
  font-weight:600;font-size:13.5px;padding:9px 15px;border-radius:var(--radius-sm);
  min-height:44px;display:inline-flex;align-items:center;gap:6px;
  transition:border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.form-pill:hover{border-color:var(--color-accent);background:var(--color-card);}
.form-pill[aria-pressed="true"]{
  border-color:var(--color-accent);background:var(--color-primary);color:#fff;
}
@media (max-width:640px){
  .form-pills{gap:6px;}
  .form-pill{padding:9px 12px;font-size:13px;min-height:44px;}
  [data-pill-group="pairs"]{flex:1 1 calc(33.333% - 6px);justify-content:center;text-align:center;}
  [data-pill-group="urgency"]{flex:1 1 100%;justify-content:flex-start;}
  .contact-details{padding:18px 16px;}
}


/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:var(--space-2xl);align-items:start;}
.about-portrait-wrap{position:relative;perspective:1200px;}
.about-portrait{
  position:relative;z-index:1;border:1px solid var(--color-border);overflow:hidden;background:var(--color-background);
  transform-style:preserve-3d;box-shadow:var(--shadow-md);
  transition:transform 450ms cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
}
.about-portrait img{width:100%;height:auto;display:block;}
.about-portrait figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(0deg, rgba(11,28,44,0.9) 0%, rgba(11,28,44,0.55) 55%, rgba(11,28,44,0) 100%);
  color:#fff;
}
.about-portrait figcaption strong{display:block;font-family:var(--font-display);letter-spacing:0.02em;font-size:20px;text-transform:uppercase;}
.about-portrait figcaption span{display:block;margin-top:2px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent);font-weight:700;}

.about-copy{max-width:720px;color:var(--color-text-muted);font-size:17px;line-height:1.75;display:flex;flex-direction:column;gap:var(--space-md);}
.about-copy p strong{color:var(--color-primary);}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;}
  .about-portrait-wrap{max-width:360px;margin:0 auto;}
}
@media (hover:none), (prefers-reduced-motion: reduce){
  .about-portrait{transition:none;}
}

/* ---------- Testimonials ---------- */
.testimonial-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);max-width:760px;margin:0 auto;}
.testimonial-card{
  background:var(--color-card);border:1px solid var(--color-border);padding:var(--space-lg) var(--space-md);
  display:flex;flex-direction:column;gap:14px;position:relative;border-radius:var(--radius-sm);
}
.testimonial-stars{display:inline-flex;gap:3px;color:var(--color-accent);}
.testimonial-stars svg{width:16px;height:16px;}
.testimonial-card blockquote{margin:4px 0 0;font-size:17px;line-height:1.5;color:var(--color-primary);font-weight:600;}
.testimonial-card figcaption{font-size:13px;letter-spacing:0.03em;color:var(--color-text-muted);font-weight:600;}
@media (max-width:520px){ .testimonial-grid{grid-template-columns:1fr;} }

/* ---------- FAQ Accordion ---------- */
.faq-list{
  max-width:760px;display:flex;flex-direction:column;gap:12px;
}
.faq-item{
  border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;
  transition:border-color 180ms ease, background-color 180ms ease;
}
.faq-item[open]{border-color:var(--color-accent);background:var(--color-card);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:700;font-size:16.5px;color:var(--color-primary);min-height:56px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{
  width:20px;height:20px;color:var(--color-accent);flex-shrink:0;
  transition:transform 220ms var(--ease);
}
.faq-item[open] .faq-icon{transform:rotate(180deg);}
.faq-answer{
  padding:0 22px 20px;color:var(--color-text-muted);font-size:15.5px;line-height:1.65;
}
@media (max-width:480px){
  .faq-item summary{padding:14px 16px;font-size:15px;min-height:50px;}
  .faq-answer{padding:0 16px 16px;font-size:14px;}
}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--color-primary);color:#fff;padding:var(--space-2xl) 0;}
.cta-banner-inner{max-width:640px;margin:0 auto;text-align:center;}
.cta-banner h2{font-size:clamp(28px,4vw,42px);color:#fff;}
.cta-banner p{margin-top:16px;color:rgba(255,255,255,0.78);font-size:16px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:var(--space-lg);}
@media (max-width:480px){
  .cta-banner{padding:40px 0;}
  .cta-banner h2{font-size:clamp(24px,6vw,34px);}
  .cta-actions{flex-direction:column;width:100%;gap:10px;}
  .cta-actions .btn{width:100%;}
  .footer-grid{gap:20px;padding:32px 0 20px;}
}

/* ---------- Contact & Location Hub ---------- */
.contact-grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:var(--space-2xl);align-items:start;}
.contact-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--nav-h) + var(--space-lg));}
.contact-map{border:1px solid var(--color-border);overflow:hidden;background:var(--color-card);border-radius:var(--radius-sm);}
.contact-map iframe{display:block;width:100%;height:260px;border:0;}
.contact-address{
  display:flex;flex-direction:column;gap:4px;padding:var(--space-md);
  background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);
}
.contact-address-label{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent);}
.contact-address strong{font-size:16px;color:var(--color-primary);}

.contact-details{
  display:flex;flex-direction:column;gap:14px;padding:var(--space-md);
  background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);
}
.contact-details-row{display:flex;flex-direction:column;gap:3px;}
.contact-details-row strong,.contact-details-row a{font-size:16px;color:var(--color-primary);font-weight:700;}
.contact-details-row a{text-decoration:none;}
.contact-details-row a:hover{color:var(--color-accent-dark);}

/* Navigation & Map Action Buttons */
.nav-actions-bar,
.loc-actions{
  display:flex;gap:10px;flex-wrap:wrap;
}
.nav-actions-bar .btn,
.loc-actions .btn{
  flex:1 1 160px;min-height:46px;font-size:14px;font-weight:700;
}
.nav-btn-google{
  background:#fff;border-color:var(--color-border);color:var(--color-primary);
}
.nav-btn-google:hover{
  border-color:var(--color-accent);color:var(--color-accent-dark);background:var(--color-card);
}
.nav-btn-waze{
  background:#fff;border-color:var(--color-border);color:var(--color-primary);
}
.nav-btn-waze:hover{
  border-color:#33CCFF;color:#053852;background:rgba(51,204,255,0.08);
}
.nav-btn-waze .icon{color:#33CCFF;}

/* Drive Times & Surrounding Towns Card */
.drive-times-card{
  background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:18px 20px;
}
.drive-times-header{
  display:flex;align-items:center;gap:9px;margin-bottom:12px;
}
.drive-times-header .icon{width:18px;height:18px;color:var(--color-accent);flex-shrink:0;}
.drive-times-header h4{
  font-family:var(--font-body);font-weight:700;font-size:13.5px;
  text-transform:uppercase;letter-spacing:0.04em;color:var(--color-primary);margin:0;
}
.drive-times-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.drive-pill{
  background:#fff;border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent);border-radius:var(--radius-sm);
  padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.drive-pill strong{font-size:12.5px;color:var(--color-primary);font-weight:600;}
.drive-pill span{
  font-family:var(--font-display);font-size:14px;letter-spacing:0.03em;
  color:var(--color-accent);flex-shrink:0;white-space:nowrap;
}

/* Drop-off Info Card */
.dropoff-info-card{
  background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:18px 20px;
}
.dropoff-info-card h4{
  font-family:var(--font-body);font-weight:700;font-size:13.5px;
  letter-spacing:0.04em;text-transform:uppercase;color:var(--color-primary);
  margin-bottom:12px;
}
.dropoff-list{
  display:flex;flex-direction:column;gap:10px;
}
.dropoff-list li{
  display:flex;align-items:flex-start;gap:10px;font-size:13px;
  color:var(--color-text);line-height:1.5;
}
.dropoff-list li svg{
  width:16px;height:16px;color:var(--color-accent);flex-shrink:0;margin-top:2px;
}

/* Homepage Location & Accessibility Section */
.location-section{background:var(--color-card);}
.location-grid{
  display:grid;grid-template-columns:1.12fr 0.88fr;gap:var(--space-2xl);align-items:start;
}
.location-content .eyebrow{margin-bottom:12px;}
.location-content h2{font-size:clamp(28px,4.2vw,44px);color:var(--color-primary);}
.location-content p{margin-top:14px;color:var(--color-text-muted);font-size:16px;line-height:1.65;}
.loc-badges{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;
}
.loc-badge-item{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:14px 12px;display:flex;align-items:flex-start;gap:10px;
}
.loc-badge-item .icon{width:20px;height:20px;color:var(--color-accent);flex-shrink:0;margin-top:2px;}
.loc-badge-item strong{display:block;font-size:13.5px;color:var(--color-primary);line-height:1.2;}
.loc-badge-item span{display:block;font-size:12px;color:var(--color-text-muted);margin-top:3px;}
.location-content .drive-times-card{margin-top:20px;background:#fff;}
.location-content .drive-pill{background:var(--color-card);}
.location-map-wrap{
  display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--nav-h) + 24px);
}
.location-map{
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  overflow:hidden;background:#fff;box-shadow:var(--shadow-md);
}
.location-map iframe{
  display:block;width:100%;height:330px;border:0;
}
.location-map-hint{
  display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--color-text-muted);padding:4px 6px;
}
.location-map-hint .icon{width:16px;height:16px;color:var(--color-accent);flex-shrink:0;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:28px;}
  .contact-side{position:static;}
  .location-grid{grid-template-columns:1fr;gap:28px;}
  .location-map-wrap{position:static;}
  .loc-badges{grid-template-columns:1fr;gap:10px;}
}
@media (max-width:640px){
  .drive-times-grid{grid-template-columns:1fr;}
  .nav-actions-bar .btn,
  .loc-actions .btn{flex:1 1 100%;}
  .location-map iframe{height:250px;}
}

/* ---------- Contact form ---------- */
.form-field{margin-bottom:var(--space-md);}
.form-field label{display:block;font-weight:700;font-size:13px;letter-spacing:0.02em;text-transform:uppercase;color:var(--color-primary);margin-bottom:8px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  font:inherit;background:#fff;transition:border-color 180ms ease;min-height:44px;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px rgba(30,155,224,0.15);}
.form-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--color-text-muted);margin-bottom:var(--space-lg);}
.form-consent input{margin-top:3px;flex-shrink:0;width:18px;height:18px;}
.contact-status{font-size:13px;margin-top:10px;min-height:16px;}
.contact-status.is-success{color:#0F766E;}
.contact-status.is-error{color:#B91C1C;}

/* ---------- Footer ---------- */
footer{background:var(--color-primary);color:rgba(255,255,255,0.85);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-xl);padding:var(--space-2xl) 0 var(--space-xl);}
.footer-brand p{margin-top:var(--space-sm);font-size:14px;color:rgba(255,255,255,0.6);max-width:280px;}
.footer-social{display:flex;gap:10px;margin-top:var(--space-md);}
.footer-social-link{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm);border-radius:var(--radius-sm);
  transition:background-color 180ms ease, transform 180ms ease;
}
.footer-social-link:hover{background:var(--color-accent-dark);transform:translateY(-2px);}
.footer-col h4{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;font-size:12.5px;color:rgba(255,255,255,0.5);margin-bottom:var(--space-md);}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col .footer-social{margin-top:var(--space-md);}
.footer-col a{font-size:14px;color:rgba(255,255,255,0.78);transition:color 180ms ease;}
.footer-col a:hover{color:var(--color-accent);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:var(--space-md) 0;border-top:1px solid rgba(255,255,255,0.12);font-size:13px;color:rgba(255,255,255,0.5);
}
.credit-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,0.5);text-decoration:none;}
.credit-badge:hover{color:#fff;}
.credit-badge-icon{height:22px;width:auto;display:block;}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- Scroll reveal (subtle — matches MOTION 3/10) ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity 350ms var(--ease) var(--reveal-delay, 0ms), transform 350ms var(--ease) var(--reveal-delay, 0ms);}
.reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;background:var(--color-accent);
  transform:scaleX(0);transform-origin:left;z-index:600;transition:transform 80ms linear;
}

/* ---------- Floating contact button (call / WhatsApp speed-dial) ---------- */
.contact-fab{
  position:fixed;right:22px;bottom:26px;z-index:500;
  display:flex;flex-direction:column;align-items:flex-end;
}
.contact-fab-actions{
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  margin-bottom:14px;
}
.contact-fab-action{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  opacity:0;transform:translateY(10px) scale(0.85);pointer-events:none;
  transition:opacity 200ms ease, transform 200ms ease;
}
.contact-fab.open .contact-fab-action{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.contact-fab.open .contact-fab-whatsapp{transition-delay:120ms;}
.contact-fab.open .contact-fab-call{transition-delay:40ms;}
.contact-fab-label{
  background:var(--color-primary);color:#fff;font-family:var(--font-body);
  font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;
  white-space:nowrap;box-shadow:var(--shadow-md);
}
.contact-fab-icon{
  width:48px;height:48px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:var(--shadow-lg);transition:transform 160ms ease;
}
.contact-fab-action:hover .contact-fab-icon{transform:scale(1.08);}
.contact-fab-call .contact-fab-icon{background:var(--color-accent);}
.contact-fab-call:hover .contact-fab-icon{background:var(--color-accent-dark);}
.contact-fab-whatsapp .contact-fab-icon{background:#25D366;}
.contact-fab-whatsapp:hover .contact-fab-icon{background:#1DA851;}
.contact-fab-toggle{
  position:relative;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--color-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  transition:background-color 180ms ease, transform 180ms ease;
}
.contact-fab-toggle:hover{background:var(--color-accent-dark);transform:scale(1.06);}
.contact-fab-toggle::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--color-accent);z-index:-1;
}
.contact-fab.open .contact-fab-toggle::before{animation:none;opacity:0;}
@media (prefers-reduced-motion: no-preference){
  .contact-fab-toggle::before{animation:phoneFabPulse 2.2s ease-out infinite;}
}
@keyframes phoneFabPulse{
  0%{transform:scale(1);opacity:0.55;}
  100%{transform:scale(1.9);opacity:0;}
}
.contact-fab-toggle .icon-phone,
.contact-fab-toggle .icon-close{
  position:absolute;transition:opacity 180ms ease, transform 180ms ease;
}
.contact-fab-toggle .icon-close{opacity:0;transform:rotate(-45deg) scale(0.6);}
.contact-fab.open .contact-fab-toggle .icon-phone{opacity:0;transform:rotate(45deg) scale(0.6);}
.contact-fab.open .contact-fab-toggle .icon-close{opacity:1;transform:rotate(0) scale(1);}
@media (max-width:640px){
  .contact-fab{right:16px;bottom:16px;}
  .contact-fab-toggle{width:50px;height:50px;}
  .contact-fab-icon{width:44px;height:44px;}
  .contact-fab-label{display:none;}
}

/* ---------- Multi-Pair Volume Discount & Free Door-to-Door Pickup ---------- */
.multi-pair-section{
  margin-top:var(--space-2xl);
}
.multi-pair-banner{
  background:linear-gradient(135deg, #0B1C2C 0%, #13283D 100%);
  border:1px solid rgba(30,155,224,0.35);
  box-shadow:var(--shadow-xl);
  border-radius:var(--radius-lg);
  padding:var(--space-2xl) var(--space-xl);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.multi-pair-banner::before{
  content:"";
  position:absolute;
  top:-120px;right:-120px;width:340px;height:340px;
  background:radial-gradient(circle, rgba(30,155,224,0.22) 0%, rgba(30,155,224,0) 70%);
  border-radius:50%;
  pointer-events:none;
}
.mp-header{
  max-width:760px;
  margin-bottom:var(--space-xl);
}
.mp-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(30,155,224,0.2);
  border:1px solid rgba(30,155,224,0.5);
  color:var(--color-accent);
  font-size:12px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--radius-sm);
  margin-bottom:var(--space-sm);
}
.mp-header h2, .mp-header h3{
  color:#fff;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.15;
  margin:0 0 var(--space-sm);
}
.mp-header p{
  color:rgba(255,255,255,0.85);
  font-size:16px;
  line-height:1.65;
  margin:0;
}

.mp-perks-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-md);
  margin-bottom:var(--space-xl);
}
.mp-perk-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-md);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  transition:transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.mp-perk-card:hover{
  background:rgba(255,255,255,0.07);
  transform:translateY(-3px);
}
.mp-perk-card--featured{
  background:linear-gradient(180deg, rgba(30,155,224,0.16) 0%, rgba(30,155,224,0.05) 100%);
  border:2px solid var(--color-accent);
  box-shadow:0 8px 24px rgba(30,155,224,0.2);
}
.mp-perk-top-tag{
  position:absolute;top:-12px;right:18px;
  background:var(--color-accent);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.mp-perk-title{
  font-family:var(--font-display);
  font-size:24px;
  letter-spacing:0.04em;
  color:var(--color-accent);
  text-transform:uppercase;
  margin:0;
}
.mp-perk-card--featured .mp-perk-title{
  color:#fff;
}
.mp-perk-desc{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,0.85);
  margin:0;
}

.mp-coverage-bar{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-sm);
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:var(--space-xl);
}
.mp-coverage-label{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:13px;color:var(--color-accent);
  white-space:nowrap;text-transform:uppercase;letter-spacing:0.05em;
}
.mp-coverage-label svg{
  width:16px;height:16px;flex-shrink:0;
}
.mp-coverage-towns{
  font-size:14px;color:rgba(255,255,255,0.9);
  line-height:1.5;
}

.mp-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-md);
  padding-top:var(--space-md);
  border-top:1px solid rgba(255,255,255,0.12);
}
.mp-footer-hint{
  font-size:13.5px;color:rgba(255,255,255,0.65);
  display:inline-flex;align-items:center;gap:8px;
}
.mp-footer-hint svg{
  width:16px;height:16px;color:var(--color-accent);flex-shrink:0;
}

@media (max-width:860px){
  .mp-perks-grid{grid-template-columns:1fr;gap:14px;}
  .multi-pair-banner{padding:var(--space-xl) var(--space-md);}
  .mp-coverage-bar{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ---------- Finder Recommendation Promo Alert ---------- */
.finder-rec-promo{
  display:none;
  background:rgba(30,155,224,0.16);
  border:1.5px solid var(--color-accent);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-size:13.5px;
  line-height:1.5;
  color:#fff;
  animation:finderPromoFadeIn 220ms ease;
}
.finder-rec-promo.is-visible{
  display:block;
}
.finder-rec-promo strong{
  color:#7dd3fc;
}
@keyframes finderPromoFadeIn{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}

/* ---------- Form Multi-Pair Notice & Pickup Option Box ---------- */
.form-pair-notice{
  background:rgba(30,155,224,0.12);
  border:1px solid rgba(30,155,224,0.35);
  color:var(--color-primary);
  border-radius:var(--radius-sm);
  padding:11px 15px;
  font-size:13.5px;
  line-height:1.5;
  margin-top:10px;
  animation:finderPromoFadeIn 200ms ease;
}
.form-pair-notice strong{
  color:var(--color-accent);
  font-weight:700;
}

.pickup-box{
  background:#fff;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.pickup-box.is-active{
  border-color:var(--color-accent);
  background:rgba(30,155,224,0.03);
  box-shadow:var(--shadow-sm);
}
.pickup-check-label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  margin:0;
  user-select:none;
}
.pickup-check-label input[type="checkbox"]{
  margin-top:3px;
  width:18px;height:18px;
  accent-color:var(--color-accent);
  cursor:pointer;
  flex-shrink:0;
}
.pickup-check-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pickup-check-title{
  font-size:14.5px;
  font-weight:600;
  color:var(--color-primary);
  line-height:1.4;
}
.pickup-badge-free{
  display:inline-flex;
  align-self:flex-start;
  background:#16a34a;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:4px;
}
.pickup-address-wrap{
  display:none;
  padding-top:10px;
  border-top:1px solid var(--color-border);
  flex-direction:column;
  gap:6px;
  animation:finderPromoFadeIn 200ms ease;
}
.pickup-address-wrap.is-open{
  display:flex;
}
.pickup-address-wrap label{
  font-size:13px;
  font-weight:600;
  color:var(--color-primary);
}
.pickup-address-wrap input{
  width:100%;
  padding:10px 14px;
  font-size:14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--color-primary);
  transition:border-color 180ms ease;
}
.pickup-address-wrap input:focus{
  outline:none;
  border-color:var(--color-accent);
}