/* ============================================================
   VARATEK v2 stylesheet
   Neutral grey + deep navy. Archivo / JetBrains Mono.
   ============================================================ */

:root{
  /* surfaces */
  --bone:#F3F4F6;
  --bone-2:#E6E8EC;
  --paper:#FFFFFF;
  /* ink */
  --ink:#12181E;
  --ink-2:#59636F;
  --ink-3:#8A929C;
  /* brand */
  --navy:#15293E;
  --navy-2:#1E3A57;
  --navy-deep:#0B1621;
  /* accent */
  /* gold retired: solid actions are navy on light, white on dark */
  --accent:#15293E;
  --accent-2:#1E3A57;
  --accent-soft:rgba(21,41,62,.09);
  /* lines */
  --line:rgba(18,24,30,.10);
  --line-2:rgba(18,24,30,.18);
  --line-dark:rgba(255,255,255,.14);

  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-lg:32px;
  --r-md:22px;
  --r-sm:14px;
  --pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.4,0,.2,1);

  --pad:clamp(20px,4vw,40px);
  --gap:clamp(14px,1.6vw,22px);
  --sec:clamp(72px,9vw,132px);

  /* z-scale */
  --z-nav:50; --z-modal:70; --z-toast:80;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--navy);color:#fff}

:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.band :focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;z-index:var(--z-toast)}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.033em;line-height:1.02;margin:0;color:var(--ink)}
h1{font-size:clamp(2.3rem,4.5vw,3.85rem)}
h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.05}
h3{font-size:clamp(1.12rem,1.6vw,1.42rem);letter-spacing:-.02em;line-height:1.18}
p{margin:0}
.lead{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--ink-2);line-height:1.62;max-width:60ch}
.muted{color:var(--ink-2)}
.kicker{
  display:inline-block;font-family:var(--body);
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}
.on-dark .kicker,.form-card .kicker{color:rgba(255,255,255,.55)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
/* a full-bleed band (stats, partner works) or the CTA card must not run straight
   into the next section - keep the normal top padding there */
.band + .section,.pw + .section{padding-top:var(--sec)}
/* the CTA card sits in a plain .wrap with no padding of its own, so give it real
   space below - otherwise the next full-bleed band overlaps it */
.cta-band{padding-bottom:var(--sec)}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:clamp(34px,4vw,58px)}
.sec-head .top{width:100%}
.sec-head .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px}
.sec-head h2{max-width:19ch}
.sec-head .lead{max-width:52ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--pill);
  font-weight:600;font-size:.97rem;letter-spacing:-.01em;cursor:pointer;
  transition:background .25s var(--ease-2),color .25s var(--ease-2),border-color .25s var(--ease-2),box-shadow .25s var(--ease-2);
  will-change:background,color;
}
.btn svg{flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn--nav{min-height:44px;padding:0 20px;font-size:.9rem}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover{background:var(--ink)}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-2)}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ghost.on-dark,.on-dark .btn--ghost{border-color:var(--line-dark);color:#fff}
.on-dark .btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
/* with gold gone, a solid navy button would vanish on the dark surfaces.
   There it inverts: white plate, navy label. */
.on-dark .btn--solid,.on-dark .btn--dark,.form-card .btn--solid,.form-card .btn--dark{background:#fff;color:var(--navy)}
.on-dark .btn--solid:hover,.on-dark .btn--dark:hover,
.form-card .btn--solid:hover,.form-card .btn--dark:hover{background:var(--bone-2);color:var(--navy)}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:var(--bone-2)}


/* ---------- nav ---------- */
.nav{position:fixed;inset:14px 14px auto;z-index:var(--z-nav);pointer-events:none}
.nav-inner{
  pointer-events:auto;max-width:1320px;margin-inline:auto;
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--pill);
  padding:9px 9px 9px 20px;
  box-shadow:0 1px 2px rgba(18,24,30,.05),0 10px 34px -18px rgba(18,24,30,.35);
  transition:box-shadow .35s var(--ease),background .35s var(--ease),transform .4s var(--ease);
}
.nav.scrolled .nav-inner{background:rgba(255,255,255,.95);box-shadow:0 1px 2px rgba(18,24,30,.06),0 16px 44px -20px rgba(18,24,30,.5)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-logo{height:30px;width:auto;display:block}
.footer .brand-logo{height:34px}
.brand-mark{width:32px;height:26px;flex:none;color:var(--navy)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.06rem}
.brand-sub{font-family:var(--mono);font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav-links a{
  padding:10px 15px;border-radius:var(--pill);font-size:.92rem;font-weight:500;color:var(--ink-2);
  transition:color .2s var(--ease-2),background .2s var(--ease-2);
}
.nav-links a:hover{color:var(--ink);background:rgba(18,24,30,.05)}
.nav-right{display:flex;align-items:center;gap:9px;margin-left:auto}
.nav-tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--ink-2);padding:0 6px;transition:color .2s}
.nav-tel:hover{color:var(--navy)}
.lang{display:flex;background:rgba(18,24,30,.055);border-radius:var(--pill);padding:3px}
.lang button{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;
  padding:6px 10px;border-radius:var(--pill);color:var(--ink-3);transition:.22s var(--ease-2);
}
.lang button:hover{color:var(--ink)}
.lang button.active{background:var(--navy);color:#fff}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);flex-direction:column;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:4.6px}
.nav.open .burger span:nth-child(1){transform:translateY(6.1px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)}

.mobile-menu{
  pointer-events:auto;position:absolute;inset:calc(100% + 10px) 0 auto;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border:1px solid var(--line);
  border-radius:26px;padding:14px;max-width:1320px;margin-inline:auto;
  box-shadow:0 24px 60px -24px rgba(18,24,30,.5);
  opacity:0;transform:translateY(-10px) scale(.98);visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav.open .mobile-menu{opacity:1;transform:none;visibility:visible}
.mobile-menu a{display:block;padding:14px 16px;border-radius:16px;font-size:1.05rem;font-weight:600}
.mobile-menu a:hover{background:rgba(18,24,30,.05)}
.mobile-menu .btn{width:100%;margin-top:8px}

/* ---------- hero: intro badges (reused under the video hero) ---------- */

/* ---------- video hero (scroll-scrubbed) ---------- */
@media (orientation:portrait){
  .vhero-video,.vhero-poster img{object-position:50% 50%}
}
.vhero{position:relative;height:320vh;background:var(--navy-deep)}
.vhero-stage{
  position:sticky;top:0;height:100vh;height:100svh;min-height:520px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;isolation:isolate;
}
.vhero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  z-index:1;background:transparent;pointer-events:none;
  /* a <video> with no decoded frame paints an opaque black box over the poster,
     so keep it hidden until it actually has one */
  visibility:hidden;opacity:0;transition:opacity .5s var(--ease-2);
}
.vhero-video.ready{visibility:visible;opacity:1}
.vhero-poster{position:absolute;inset:0;z-index:0}
.vhero-poster img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.vhero-content{position:relative;z-index:2;padding:0 var(--pad);text-align:center;width:100%}
.vhero-title{
  color:#fff;font-weight:900;font-size:clamp(1rem,6vw,4.3rem);
  line-height:1.05;letter-spacing:-.04em;white-space:nowrap;
  text-shadow:
    0 1px 2px rgba(8,15,22,.52),
    0 3px 10px rgba(8,15,22,.4),
    0 12px 38px rgba(8,15,22,.32);
}
.vhero-scroll{
  position:absolute;left:50%;bottom:clamp(26px,4.5vh,52px);transform:translateX(-50%);
  z-index:3;display:inline-flex;flex-direction:column;align-items:center;gap:12px;color:#fff;
  padding:10px 14px;border-radius:var(--pill);
  opacity:0;transition:opacity .9s var(--ease) .55s;
}
.loaded .vhero-scroll{opacity:1}
.vhero-scroll .lbl{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(8,15,22,.62),0 2px 10px rgba(8,15,22,.42);
  transition:color .25s var(--ease-2);
}
.vhero-scroll .arrow{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.6);background:rgba(10,18,26,.3);
  box-shadow:0 2px 14px rgba(8,15,22,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:nudge 2.4s var(--ease) infinite;
  transition:background .25s var(--ease-2),border-color .25s var(--ease-2),color .25s var(--ease-2);
}
.vhero-scroll:hover .arrow{background:#fff;border-color:#fff;color:var(--ink);animation-play-state:paused}
.vhero-scroll:hover .lbl{color:#fff}
@keyframes nudge{0%,68%,100%{transform:translateY(0)}80%{transform:translateY(6px)}}

/* ---------- intro strip ---------- */
.intro{padding-block:clamp(52px,7vw,96px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.intro-lead{font-size:clamp(1.24rem,2.3vw,1.92rem);line-height:1.35;letter-spacing:-.025em;font-weight:500;max-width:22ch}
.intro-side{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.intro-cta{display:flex;flex-wrap:wrap;gap:12px}

/* the 30+ badge and the EN 1090 chip live here now, as cards */
.intro-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
  margin-top:clamp(34px,4vw,56px)}
.i-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(28px,3vw,44px) clamp(18px,2vw,28px);min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:11px;
  transition:transform .45s var(--ease),border-color .3s var(--ease-2),box-shadow .45s var(--ease)}
.i-stat:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 24px 50px -34px rgba(18,24,30,.5)}
.i-stat .n{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(2.5rem,4.8vw,3.7rem);color:var(--ink)}
.i-stat .n.sm{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.i-stat .t{font-size:.95rem;line-height:1.45;color:var(--ink-2);max-width:22ch}

/* ---------- client logos ---------- */
.clients{padding-block:clamp(30px,3.6vw,52px);border-block:1px solid var(--line)}
.clients-lbl{margin:0 0 clamp(22px,2.4vw,32px);text-align:center;font-family:var(--mono);
  font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.clients-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,4.2vw,62px)}
.cl{display:inline-flex;align-items:center;flex:none;opacity:.42;
  transition:opacity .4s var(--ease)}
.cl:hover{opacity:.72}
.cl-img{display:block;width:auto;max-width:100%}
/* per-logo heights: optical, not mathematical - a one-line wordmark reads
   bigger than the same ink height stacked with a mark or a strapline */
.cl-grauline{height:22px}
.cl-grahn{height:33px}
.cl-murtoviiva{height:36px}
.cl-mirlux{height:44px}
.cl-text{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1;
  letter-spacing:-.005em;color:var(--ink);white-space:nowrap}

/* ---------- intro region line ---------- */
.intro-copy{min-width:0}
.intro-regions{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.98rem;color:var(--ink-2)}
.intro-regions .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- band + services CTA ---------- */
.band-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,48px)}

/* ---------- works rail is portrait now ---------- */

/* ---------- product modal ---------- */
.pmodal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,36px)}
.pmodal[hidden]{display:none}
.pmodal-backdrop{position:absolute;inset:0;background:rgba(8,15,22,.62);backdrop-filter:blur(4px);
  animation:pmFade .3s var(--ease-2)}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
.pmodal-card{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  width:min(1240px,100%);max-height:min(88vh,800px);overflow:hidden;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:0 40px 90px -30px rgba(8,15,22,.6);
  animation:pmIn .38s var(--ease);
}
@keyframes pmIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.pmodal-close{
  position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);color:var(--ink);
  box-shadow:0 4px 16px rgba(8,15,22,.2);transition:background .2s var(--ease-2)
}
.pmodal-close:hover{background:var(--bone-2)}
.pmodal-media{position:relative;background:var(--bone-2);min-height:0;overflow:hidden}
.pmodal-gallery{display:flex;height:100%;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.pmodal-gallery::-webkit-scrollbar{display:none}
.pmodal-gallery img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.pmodal-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:7px}
.pmodal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .25s,width .25s}
.pmodal-dots i.on{background:#fff;width:20px;border-radius:4px}
.pmodal-body{padding:clamp(24px,2.6vw,40px);overflow-y:auto;min-height:0;max-height:min(88vh,800px);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pmodal-body .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.pmodal-body h3{margin-top:10px;font-size:clamp(1.4rem,2.2vw,1.95rem)}
.pmodal-lead{margin-top:14px;color:var(--ink-2);line-height:1.6}
.pmodal-specs{margin-top:20px;display:grid;gap:9px}
.pmodal-specs li{position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-2);line-height:1.5}
.pmodal-specs li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pmodal-price{margin-top:20px;padding:14px 18px;border-radius:14px;background:var(--bone);
  font-family:var(--mono);font-size:.78rem;color:var(--ink);line-height:1.5}
.pmodal-form{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.pmodal-form-title{font-weight:600;margin-bottom:16px}
.pm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pmodal-form .field label{color:var(--ink-3)}
.pmodal-form .field input,.pmodal-form .field textarea{
  background:var(--bone);border-color:var(--line-2);color:var(--ink);min-height:48px}
.pmodal-form .field textarea{min-height:78px}
.pmodal-form .field input::placeholder,.pmodal-form .field textarea::placeholder{color:var(--ink-3)}
.pmodal-form .field input:focus,.pmodal-form .field textarea:focus{border-color:var(--navy);background:#fff}
.pmodal-form .consent{color:var(--ink-2);margin-top:14px}
.pmodal-form .consent a{color:var(--navy)}
.pmodal-form .form-msg.ok{background:rgba(21,41,62,.06);border:1px solid var(--line-2);color:var(--navy)}
.pmodal-form .form-msg.err{background:rgba(190,60,50,.08);border:1px solid rgba(190,60,50,.3);color:#8E2B22}
.pmodal-form .btn{margin-top:16px}
body.pm-open{overflow:hidden}

/* ---------- about ---------- */
/* the crew photo used to fill the left column; the copy runs full width now */
.about{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,3.4vw,56px);
  align-items:center;margin-bottom:clamp(30px,4vw,54px)}
.crew-col{min-width:0}
.about-stats{grid-column:1 / -1}
.about-copy h3{font-size:clamp(1.35rem,2.3vw,2rem);letter-spacing:-.03em;max-width:26ch}
.about-copy p{margin-top:16px;color:var(--ink-2);font-size:1rem;line-height:1.62;max-width:58ch}
/* the six "Miksi VARATEK" advantages, condensed to one line each */
.about-points{list-style:none;margin:20px 0 0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:10px clamp(18px,2vw,30px)}
.about-points li{position:relative;padding-left:23px;min-width:0;
  font-size:.895rem;line-height:1.45;color:var(--ink-2)}
.about-points li::before{content:"";position:absolute;left:2px;top:.32em;
  width:10px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}

/* --- crew gallery inside the about block --- */
.crew{position:relative}
.crew-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;border-radius:var(--r-md);background:var(--bone-2)}
.crew-track::-webkit-scrollbar{display:none}
.crew-slide{flex:0 0 100%;margin:0;scroll-snap-align:center}
.crew-slide img{display:block;width:100%;height:auto;aspect-ratio:2200/940;object-fit:cover}
.crew-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.88);color:var(--navy);box-shadow:0 6px 20px rgba(11,22,33,.18);
  transition:background .22s var(--ease),opacity .22s var(--ease)}
.crew-nav:hover{background:#fff}
.crew-nav[disabled]{opacity:0;pointer-events:none}
.crew-nav--prev{left:14px}
.crew-nav--next{right:14px}
.crew-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:7px}
.crew-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;
  transition:background .25s,width .25s}
.crew-dots i.on{background:#fff;width:20px;border-radius:4px}
.crew-note{margin-top:12px;font-size:.85rem;color:var(--ink-3)}
@media (max-width:640px){
  /* full-bleed on phones: the group is inherently wide, so give it the whole screen */
  .crew{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .crew-track{border-radius:0}
  .crew-nav{width:36px;height:36px}
  .crew-nav--prev{left:8px}
  .crew-nav--next{right:8px}
}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--line)}
.about-stats .n{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.1vw,1.75rem);
  letter-spacing:-.035em;line-height:1}
.about-stats .l{display:block;margin-top:7px;font-size:.85rem;color:var(--ink-3);line-height:1.35}

/* ---------- SLC example cards ---------- */

/* ---------- quiz ---------- */
.quiz-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.quiz-step{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.quiz-progress{height:3px;border-radius:3px;background:rgba(255,255,255,.14);margin:20px 0 26px;overflow:hidden}
.quiz-progress i{display:block;height:100%;width:16.6%;border-radius:3px;background:#fff;
  transition:width .45s var(--ease)}
.quiz-body{position:relative}
.q-step{display:none}
.q-step.active{display:block;animation:qIn .38s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-step h3{color:#fff;font-size:clamp(1.12rem,1.7vw,1.4rem);letter-spacing:-.022em}
.q-hint{margin-top:10px;color:rgba(255,255,255,.6);font-size:.92rem}
.opts{display:grid;gap:10px;margin-top:22px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;
  padding:14px 18px;border-radius:16px;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.05);color:#fff;font-size:.98rem;font-weight:500;cursor:pointer;
  transition:background .22s var(--ease-2),border-color .22s var(--ease-2);
}
.opt:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.opt .ck{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);flex:none;
  position:relative;transition:background .22s var(--ease-2),border-color .22s var(--ease-2)}
.opt.sel{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.opt.sel .ck{background:#fff;border-color:#fff}
.opt.sel .ck::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
.q-fields{display:grid;gap:14px;margin-top:22px}
.q-done-step{text-align:center;padding:14px 0}
.q-check{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:#fff;color:var(--navy);margin-bottom:18px}
.q-done-step .q-hint a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.quiz-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line-dark)}
.quiz-foot .btn--ghost{border-color:var(--line-dark);color:#fff}
.quiz-foot .btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- jobs ---------- */
.jobs{background:var(--paper);border-radius:var(--r-lg);padding:clamp(26px,3vw,46px)}
.jobs-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:60ch}
.jobs-copy h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.jobs-copy p{color:var(--ink-2);line-height:1.6}
.jobs-panel{height:0;overflow:hidden;transition:height .45s var(--ease)}
.jobs-panel form{margin-top:30px;padding-top:28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.jobs-panel .field label{color:var(--ink-3)}
.jobs-panel .field input,.jobs-panel .field select,.jobs-panel .field textarea{
  background:var(--bone);border-color:var(--line-2);color:var(--ink)}
.jobs-panel .field input::placeholder,.jobs-panel .field textarea::placeholder{color:var(--ink-3)}
.jobs-panel .field input:focus,.jobs-panel .field select:focus,.jobs-panel .field textarea:focus{
  border-color:var(--navy);background:#fff}
.jobs-panel .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2312181E' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-color:var(--bone);
}
.jobs-panel .consent{color:var(--ink-2)}
.jobs-panel .consent a{color:var(--navy)}
.jobs-panel .form-msg.ok{background:rgba(21,41,62,.06);border:1px solid var(--line-2);color:var(--navy)}
.jobs-panel .form-msg.err{background:rgba(190,60,50,.08);border:1px solid rgba(190,60,50,.3);color:#8E2B22}
#jobToggle svg{transition:transform .35s var(--ease)}
#jobToggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------- footer sitemap ---------- */
.f-sitemap{margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid var(--line-dark)}
.f-sitemap h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);font-weight:500;margin:0 0 14px}
.f-sitemap ul{display:flex;flex-wrap:wrap;gap:10px}
.f-sitemap a{display:inline-block;padding:8px 15px;border-radius:var(--pill);
  border:1px solid var(--line-dark);color:rgba(255,255,255,.78);font-size:.88rem;
  transition:background .22s var(--ease-2),color .22s var(--ease-2),border-color .22s var(--ease-2)}
.f-sitemap a:hover{background:#fff;border-color:#fff;color:var(--navy)}

/* ---------- misc ---------- */

/* ---------- stats band ---------- */
.band{position:relative;color:#fff;overflow:hidden;isolation:isolate;padding-block:clamp(72px,8vw,120px)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,33,.9),rgba(11,22,33,.78));z-index:-1}
.band h2{color:#fff;max-width:none}
@media (min-width:760px){.band h2{white-space:nowrap;font-size:clamp(2rem,3.55vw,3.1rem)}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(38px,5vw,64px)}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);max-width:720px}
.stat{position:relative;padding-top:26px;border-top:1px solid var(--line-dark)}
.stat::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5)}
.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,4.6vw,3.7rem);letter-spacing:-.045em;line-height:1}
.stat .n sup{font-size:.42em;vertical-align:super;color:rgba(255,255,255,.6);margin-left:2px;font-weight:700}
.stat .t{margin-top:10px;font-size:.94rem;color:rgba(255,255,255,.66);max-width:16ch}

/* ---------- services ---------- */
.ico-betoni{--ico:url(img/ico-betoni.png)}
.ico-runko{--ico:url(img/ico-runko.png)}
.ico-levy{--ico:url(img/ico-levy.png)}
.ico-kirves{--ico:url(img/ico-kirves.png)}
.ico-purku{--ico:url(img/ico-purku.png)}
.ico-maa{--ico:url(img/ico-maa.png)}

/* ---------- why grid ---------- */

/* ---------- products ---------- */

/* ---------- product carousel ---------- */
.fcar{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.22fr);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.fcar-nav{background:var(--navy);padding:clamp(20px,2.2vw,34px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,.7vw,9px)}
.fcar-chip{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--body);font-size:clamp(.8rem,.92vw,.93rem);font-weight:600;letter-spacing:-.012em;
  padding:clamp(9px,1vw,13px) clamp(15px,1.5vw,20px);border-radius:var(--pill);
  background:transparent;border:1px solid var(--line-dark);color:rgba(255,255,255,.6);
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease);
}
.fcar-chip:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.fcar-chip.is-active{background:#fff;color:var(--navy);border-color:#fff}
.fcar-chip .ico{display:flex;flex:none;opacity:.55;transition:opacity .55s var(--ease)}
/* the six service chips reuse the service-card PNG masks, so they take the chip's
   currentColor and stay legible on navy and on the white active pill alike */
.fcar-chip .mico{width:19px;height:19px}
.fcar-chip .mico::before{content:"";display:block;width:19px;height:19px}
@supports ((-webkit-mask-image:url(x)) or (mask-image:url(x))){
  .fcar-chip .mico::before{background:currentColor;
    -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
}
.fcar-chip.is-active .ico{opacity:1}

.fcar-stage{position:relative;overflow:hidden;background:var(--bone-2);
  display:flex;align-items:center;justify-content:center;padding:clamp(26px,3vw,50px);
  min-height:clamp(330px,27vw,430px)}
.fcar-card{
  position:absolute;width:min(84%,470px);aspect-ratio:4/3;margin:0;
  border:8px solid var(--paper);border-radius:var(--r-md);overflow:hidden;background:var(--paper);
  box-shadow:0 26px 60px -32px rgba(18,24,30,.6);
  transform:scale(.72);opacity:0;pointer-events:none;z-index:0;
  transition:transform .7s var(--ease),opacity .7s var(--ease);
}
.fcar-card img{display:block;width:100%;height:100%;object-fit:cover;
  transition:filter .7s var(--ease)}
.fcar-card:not([data-state="active"]) img{filter:grayscale(.85) blur(1.5px) brightness(.82)}
.fcar-card[data-state="active"]{transform:none;opacity:1;pointer-events:auto;z-index:20}
.fcar-card[data-state="prev"]{transform:translateX(-26%) scale(.86) rotate(-3deg);opacity:.6;z-index:10}
.fcar-card[data-state="next"]{transform:translateX(26%) scale(.86) rotate(3deg);opacity:.6;z-index:10}

.fcar-meta{position:absolute;inset:auto 0 0 0;padding:56px 24px 24px;color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:linear-gradient(180deg,transparent,rgba(6,12,20,.55) 38%,rgba(6,12,20,.93));
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.fcar-card[data-state="active"] .fcar-meta{opacity:1;transform:none;transition-delay:.15s}
.fcar-meta .idx{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:#fff;border-radius:var(--pill);padding:6px 13px}
.fcar-meta p{margin:0;font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.45;letter-spacing:-.012em}
.fcar-meta .price{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.72)}
.fcar-more{display:inline-flex;align-items:center;gap:8px;margin-top:2px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.9rem;color:#fff;
  background:var(--accent);border:0;border-radius:var(--pill);padding:10px 18px;
  transition:background .3s var(--ease-2)}
.fcar-more:hover{background:var(--accent-2)}
.fcar-more svg{transition:transform .35s var(--ease)}
.fcar-more:hover svg{transform:translate(3px,-3px)}

@media (max-width:900px){
  .fcar{grid-template-columns:minmax(0,1fr)}
  /* ten chips wrapped into nine rows on a phone; one swipeable row keeps the
     module compact and is the familiar pattern for a filter strip */
  .fcar-nav{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;padding:16px;
    gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
  .fcar-nav::-webkit-scrollbar{display:none}
  .fcar-chip{width:auto;flex:none;white-space:nowrap;scroll-snap-align:center;
    font-size:.84rem;padding:10px 16px;gap:10px}
  .fcar-chip .ico svg{width:16px;height:16px}
  .fcar-stage{min-height:clamp(300px,70vw,370px)}
  .fcar-card{width:min(90%,420px);border-width:6px}
  .fcar-card[data-state="prev"]{transform:translateX(-20%) scale(.86) rotate(-3deg)}
  .fcar-card[data-state="next"]{transform:translateX(20%) scale(.86) rotate(3deg)}
  .fcar-meta{padding:44px 18px 18px;gap:8px}
}

/* ---------- testimonials ---------- */
.tst-head{text-align:center}
.tst-head h2{margin-top:16px}
.tst-sub{max-width:52ch;margin:14px auto 0;color:var(--ink-3);font-size:1rem;line-height:1.6}
.tst-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,4vw,52px)}
.tst-card{position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);
  padding:clamp(24px,2.6vw,36px);min-height:clamp(190px,16vw,240px);display:flex;flex-direction:column}
.tst-card--light{background:var(--paper);color:var(--ink)}
.tst-card--dark{background:var(--navy);color:#fff;border-color:transparent}
/* faint drafting grid, faded out towards the bottom */
.tst-mesh{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(21,41,62,.10) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(21,41,62,.10) 1px,transparent 1px);
  background-size:50px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 70%,transparent 110%);
  mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 70%,transparent 110%)}
.tst-body{position:relative;margin-top:auto}
.tst-card blockquote{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;letter-spacing:-.015em}
.tst-card .who{display:flex;align-items:center;gap:13px;margin-top:22px}
.tst-card .av{width:46px;height:46px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center}
.tst-card--light .av{background:var(--navy);color:#fff}
.tst-card--dark .av{background:rgba(255,255,255,.15);color:#fff}
.tst-card .who>span:last-child{min-width:0}
.tst-card .who b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.tst-card .who b+span{display:block;margin-top:2px;font-size:.86rem}
.tst-card--light .who b+span{color:var(--ink-3)}
.tst-card--dark .who b+span{color:rgba(255,255,255,.62)}
/* cards drift in slightly out of focus, one after another */
.tst-card.rv,.tst-rule.rv{filter:blur(10px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
  transition-delay:var(--d,0ms)}
.tst-card.rv.in,.tst-rule.rv.in{filter:none}
.tst-rule{position:relative;margin-top:clamp(26px,3vw,40px);border-bottom:2px solid var(--line-2,var(--line))}
.tst-rule i{position:absolute;left:0;right:0;bottom:-5px;display:block}
.tst-rule i::before,.tst-rule i::after{content:"";position:absolute;bottom:0;
  width:9px;height:9px;background:var(--bone);border:1px solid var(--line)}
.tst-rule i::before{left:-4px}
.tst-rule i::after{right:-4px}

.stat,.contact-info,.form-card{min-width:0}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;text-align:left;
  padding:24px 0;font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.4vw,1.18rem);
  letter-spacing:-.02em;transition:color .2s var(--ease-2);
}
.faq-q:hover{color:var(--navy-2)}
.faq-q .pm{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);flex:none;position:relative;transition:background .3s var(--ease-2),border-color .3s var(--ease-2)}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;inset:50% 11px auto;height:1.5px;background:currentColor;transform:translateY(-50%);transition:transform .35s var(--ease),opacity .25s}
.faq-q .pm::after{transform:translateY(-50%) rotate(90deg)}
.faq-item.open .pm{background:var(--accent);border-color:var(--accent);color:#fff}
.faq-item.open .pm::after{transform:translateY(-50%) rotate(0);opacity:0}
.faq-a{overflow:hidden;height:0;transition:height .42s var(--ease)}
.faq-a p{padding-bottom:26px;color:var(--ink-2);font-size:.99rem;line-height:1.62;max-width:62ch}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--gap)}
.contact-info{background:var(--paper);border-radius:var(--r-lg);padding:clamp(28px,3vw,46px);display:flex;flex-direction:column;gap:26px}
.contact-info .kicker{align-self:flex-start}
.info-row{display:flex;flex-direction:column;gap:5px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.info-row:last-of-type{border-bottom:0;padding-bottom:0}
.info-row .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.info-row .v{font-size:1.05rem;font-weight:600;letter-spacing:-.015em}
.info-row .v a:hover{color:var(--navy-2)}
.form-card{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,3vw,46px)}
.form-card h2{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem)}
.form-card>p{color:rgba(255,255,255,.72);margin-top:12px}
.pmodal-form{display:block}
.f-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.07);border:1px solid var(--line-dark);border-radius:14px;
  padding:14px 16px;color:#fff;font-family:var(--body);font-size:1rem;min-height:52px;
  transition:border-color .25s var(--ease-2),background .25s var(--ease-2);
}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.38)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field select option{color:#12181E}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:.84rem;color:rgba(255,255,255,.66);line-height:1.5}
.consent input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:#fff}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.form-actions .hint{font-size:.84rem;color:rgba(255,255,255,.5)}
.form-msg{grid-column:1/-1;font-size:.94rem;padding:14px 16px;border-radius:14px;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:#fff}
.form-msg.err{background:rgba(255,120,110,.14);border:1px solid rgba(255,120,110,.4);color:#FFC9C4}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- cta band ---------- */
.cta{background:var(--navy);border-radius:var(--r-lg);padding:clamp(34px,5vw,72px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.cta h2{max-width:17ch;color:#fff}
.cta .side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cta .side p{max-width:34ch;color:rgba(255,255,255,.72)}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep);color:#fff;padding-block:clamp(56px,7vw,88px) 0}
.f-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,48px)}
.footer .brand-name{color:#fff}
.footer .brand-mark{color:#fff}
.footer .brand-sub{color:rgba(255,255,255,.45)}
.f-about{color:rgba(255,255,255,.6);font-size:.95rem;line-height:1.6;max-width:34ch;margin-top:18px}
.f-col h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500;margin-bottom:16px}
.f-col a,.f-col li{display:block;padding:6px 0;color:rgba(255,255,255,.78);font-size:.95rem}
.f-col a{transition:color .2s var(--ease-2)}
.f-col a:hover{color:#fff}
.f-bottom{margin-top:clamp(40px,5vw,64px);padding-block:24px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.f-bottom a:hover{color:#fff}

/* ---------- reveal animations ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
/* hero headline: per-word blur reveal */
.vhero-title .br{display:inline}
.vhero-title .br-word{
  display:inline-block;
  opacity:0;filter:blur(14px);transform:translateY(.28em);
  transition:opacity .95s var(--ease),filter .95s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,filter,transform;
}
.vhero-title .br.is-in .br-word{opacity:1;filter:blur(0);transform:none}
.hero-fade{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s}
.loaded .hero-fade{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .intro-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .about{grid-template-columns:minmax(0,1fr);gap:28px}
  .about-points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pmodal-card{grid-template-columns:minmax(0,1fr);max-height:92vh;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .pmodal-media{max-height:none}
  .pmodal-gallery{height:auto;aspect-ratio:3/2}
  .pmodal-body{overflow:visible;max-height:none}
  .intro-lead{max-width:30ch}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px var(--gap)}
  .faq,.contact{grid-template-columns:minmax(0,1fr)}
  .nav-links,.nav-tel{display:none}
  .burger{display:flex}
}
@media (max-width:560px){
  .vhero-content{padding-inline:16px}
}
@media (max-width:720px){
  body{font-size:16px}
  .vhero{height:280vh}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  form{grid-template-columns:minmax(0,1fr)}
  .nav-right>.btn--nav{display:none}
  .about-stats{grid-template-columns:minmax(0,1fr);gap:16px}
  .tst-grid{grid-template-columns:minmax(0,1fr)}
  .pm-fields{grid-template-columns:minmax(0,1fr)}
  .opts.two{grid-template-columns:minmax(0,1fr)}
  .jobs-panel form{grid-template-columns:minmax(0,1fr)}
  .quiz-foot .btn{flex:1}
  .f-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta{padding:32px 24px}
}
@media (max-width:820px){
  /* three columns get cramped: go to one row per stat, number beside the label */
  .intro-stats{grid-template-columns:minmax(0,1fr);gap:12px}
  .i-stat{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;
    gap:18px;padding:20px clamp(20px,4vw,26px)}
  .i-stat .n{font-size:clamp(2rem,7vw,2.6rem);flex:none}
  .i-stat .n.sm{font-size:clamp(1.5rem,5.2vw,1.9rem)}
  .i-stat .t{max-width:none}
}
@media (max-width:760px){
  /* two 166px columns shredded these phrases into four lines each */
  .about-points{grid-template-columns:minmax(0,1fr);gap:9px}
}
@media (max-width:700px){
  /* two tidy columns beat ragged wrapping when six marks meet a phone */
  .clients-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(22px,5vw,30px) 16px;justify-items:center;align-items:center}
  /* an odd number of logos would leave the last one hanging in the left column */
  .clients-row > :last-child:nth-child(odd){grid-column:1 / -1}
  .cl-grauline{height:18px}
  .cl-grahn{height:26px}
  .cl-murtoviiva{height:27px}
  .cl-mirlux{height:34px}
  .cl-text{font-size:1.06rem}
}
@media (max-width:460px){
  .f-top{grid-template-columns:minmax(0,1fr)}
}

/* ---------- partner works · BRAVEX GROUP ---------- */
.pw{position:relative;color:#fff;overflow:hidden;isolation:isolate;padding-block:clamp(56px,6vw,88px)}
.pw::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(115% 78% at 10% 0%,rgba(232,199,126,.11),transparent 62%),
             linear-gradient(180deg,#0B1621 0%,#112134 100%)}

.pw-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,60px);align-items:end}
.pw-title{min-width:0}
.pw h2{color:#fff;margin-top:16px;font-size:clamp(2.6rem,6.4vw,5rem);letter-spacing:-.045em}
.pw-sub{margin:12px 0 0;font-family:var(--display);font-weight:700;color:rgba(255,255,255,.82);
  font-size:clamp(1.1rem,2.1vw,1.75rem);letter-spacing:-.025em;line-height:1.15}
.pw-intro{min-width:0}
.pw .lead{color:rgba(255,255,255,.68);max-width:52ch;margin:0}

.pw-tag{display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  border:1px solid var(--line-dark);border-radius:var(--pill);padding:8px 18px;
  background:rgba(255,255,255,.05)}
.pw-tag .l{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.pw-tag strong{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.02rem;color:#fff}

.pw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px clamp(24px,3vw,48px);margin-top:clamp(26px,3vw,40px)}
.pw-cta{display:flex;flex-wrap:wrap;gap:12px}
.pw-note{margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.8;color:rgba(255,255,255,.46);max-width:56ch}

/* ---- fanned photo stack ---- */
.pw-fan{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
  margin-top:clamp(32px,4vw,54px);
  --card:clamp(198px,23vw,330px);height:calc(var(--card) * 1.34)}
.pw-card{
  position:absolute;width:var(--card);aspect-ratio:1;margin:0;
  background:#fff;padding:10px;border-radius:20px;
  box-shadow:0 20px 46px -18px rgba(4,10,16,.78);
  transform-origin:bottom center;
  transition:transform .85s var(--ease),box-shadow .45s var(--ease);
  transition-delay:var(--sd,0ms);
}
.pw-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
/* cards sit stacked and square, then splay out when the block scrolls in.
   span = card * (1 + 2 * outer offset) = 3.24 * card, which fits the 1240px wrap at 330px */
.pw-card--1{z-index:40;--sd:0ms;   --tx:-112%;--ty:6%;--rot:-10deg}
.pw-card--2{z-index:30;--sd:90ms;  --tx:-38%; --ty:0; --rot:-3deg}
.pw-card--3{z-index:20;--sd:180ms; --tx:38%;  --ty:2%;--rot:5deg}
.pw-card--4{z-index:10;--sd:270ms; --tx:112%; --ty:8%;--rot:9deg}
.pw-fan.in .pw-card{transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}
.pw-fan.in .pw-card:hover{
  z-index:50;transition-delay:0ms;
  transform:translate(var(--tx),calc(var(--ty) - 5%)) rotate(calc(var(--rot) * .12)) scale(1.045);
  box-shadow:0 34px 70px -20px rgba(4,10,16,.85);
}

/* below ~720px four overlapping cards cannot fit: a 2x2 grid shows every photo
   whole and larger than any fan could at that width */
@media (max-width:720px){
  .pw-fan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
    height:auto;--card:auto}
  .pw-card{position:relative;width:auto;transition:transform .4s var(--ease)}
  .pw-fan.in .pw-card{transform:rotate(var(--mrot))}
  .pw-fan.in .pw-card:hover{transform:rotate(0deg) scale(1.03)}
  .pw-card--1{--mrot:-1.8deg}
  .pw-card--2{--mrot:1.6deg}
  .pw-card--3{--mrot:1.4deg}
  .pw-card--4{--mrot:-1.6deg}
}

@media (max-width:900px){
  .pw-top{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  .pw .lead{max-width:none}
  /* display:contents lifts the copy into the stack so the photos can follow the intro
     instead of sitting below the fine print */
  .pw .wrap{display:flex;flex-direction:column}
  .pw-fan{order:1;--card:clamp(132px,36vw,182px);margin:28px 0 0}
  .pw-foot{order:2;justify-content:flex-start}
  .pw-card--1{--tx:-96%;--rot:-9deg}
  .pw-card--2{--tx:-33%}
  .pw-card--3{--tx:33%}
  .pw-card--4{--tx:96%;--rot:8deg}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .vhero-title .br-word{opacity:1;filter:none;transform:none;transition:none}
  .hero-fade{opacity:1;transform:none}
  .vhero{height:auto}
  .vhero-stage{position:relative;height:88vh;height:88svh}
  .vhero-scroll .arrow{animation:none}
}