/* ===================================================================
   Alatalot — design system
   Navy / gold industrial theme, big imagery, scroll reveals
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --navy:      #071328;   /* brand dark blue, matched to footer tone */
  --navy-2:    #0C1E3A;   /* panel navy, lighter tint */
  --navy-3:    #132944;   /* lightest navy accent */
  --paper:     #F6F4EF;   /* warm off-white */
  --white:     #FFFFFF;
  --gold:      #D6C2A6;   /* brand: Hiekka — lämpö, kestävyys, luonnonläheisyys */
  --gold-2:    #E5D6C0;   /* light sand */
  --grey-blue: #A6B4C9;
  --ink:       #1B2630;
  --line:      #0C2038;
  --line-light:#E4DFD3;

  --wrap: 1160px;
  --radius: 4px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Poppins',sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
::selection{background:var(--gold);color:var(--navy)}

h1,h2,h3,h4{font-weight:800;line-height:1.08;letter-spacing:-0.01em}
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:inline-block;
}
.eyebrow.on-light{color:#8A6F4E}

/* ---------- wallpaper texture (subtle diagonal steel weave) ---------- */
.texture-navy{
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 34px);
}
.texture-paper{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(7,19,40,.05) 1px, transparent 1px);
  background-size:22px 22px;
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(7,19,40,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
.topbar .inner{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.logo{
  font-weight:800;font-size:22px;letter-spacing:.02em;color:var(--white);
  display:flex;align-items:center;gap:10px;line-height:1;
}
.logo svg{flex-shrink:0}
nav.main{display:flex;align-items:center;gap:34px}
nav.main a{
  font-size:14.5px;font-weight:600;color:var(--grey-blue);
  position:relative;padding:6px 0;
  transition:color .2s;
}
nav.main a:hover, nav.main a.active{color:var(--white)}
nav.main a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
}
.burger{display:none;width:26px;height:20px;position:relative;cursor:pointer;background:none;border:0}
.burger span{position:absolute;left:0;right:0;height:2px;background:var(--white);transition:.25s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:9px}
.burger span:nth-child(3){top:18px}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 30px;
  font-weight:700;font-size:14.5px;letter-spacing:.02em;
  border-radius:3px;border:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s;
}
.btn::after{content:"";width:16px;height:10px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 4.5 21 12l-7.5 7.5-1.4-1.4 5-5H3v-2h14.1l-5-5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 4.5 21 12l-7.5 7.5-1.4-1.4 5-5H3v-2h14.1l-5-5z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s;flex:none;
}
.btn:hover::after{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 16px 32px -12px rgba(244,180,0,.6)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-3px);box-shadow:0 20px 38px -10px rgba(244,180,0,.75)}
.btn-outline{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.32);color:var(--white);backdrop-filter:blur(6px)}
.btn-bare{background:none;border:none;padding:0;backdrop-filter:none}
.btn-bare::after{width:40px;height:25px}
.btn-bare:hover{transform:translateX(4px)}
.about-copy .btn-bare{display:flex;justify-content:center;max-width:52ch}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.btn-outline.on-light{background:transparent;border-color:rgba(7,19,40,.25);color:var(--navy)}
.btn-outline.on-light:hover{border-color:var(--navy);background:var(--navy);color:var(--white)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:flex-end;
  color:var(--white);
  background-size:cover;background-position:center;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,18,28,.35) 0%, rgba(8,22,33,.3) 30%, rgba(6,17,26,.97) 96%),
    linear-gradient(90deg, rgba(6,17,26,.85) 0%, rgba(6,17,26,.15) 55%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,.55);
}
.hero-video{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-video video{width:100%;height:100%;object-fit:cover}
.hero-inner{max-width:var(--wrap);margin:0 auto;padding:0 28px 100px;width:100%;position:relative}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 14px;background:rgba(244,180,0,.12);
  border:1px solid rgba(244,180,0,.45);color:var(--gold-2);
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:28px;border-radius:30px;
}
.hero-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,180,0,.25)}
.hero h1{font-size:clamp(40px,6.4vw,80px);max-width:15.5ch;margin-bottom:24px;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .word-inner{display:inline-block;transform:translateY(115%);transition:transform .85s cubic-bezier(.16,.85,.24,1)}
.hero h1.kinetic-in .word-inner{transform:translateY(0)}

/* ---------- pillar scroll-progress rail ---------- */
.pbig-rail{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:16px;z-index:40;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.pbig-rail.visible{opacity:1;pointer-events:auto}
.pbig-rail button{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(5,13,20,.4);backdrop-filter:blur(6px);color:var(--grey-blue);
  font-size:12px;font-weight:700;cursor:pointer;transition:all .25s;
}
.pbig-rail button.active{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:scale(1.15)}
@media (max-width:900px){.pbig-rail{display:none}}
.hero p.lead{font-size:19px;max-width:44ch;color:var(--grey-blue);margin-bottom:38px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}

/* floating stat card on hero */
.hero-float{
  position:absolute;right:28px;bottom:150px;z-index:3;
  width:270px;padding:26px 26px 24px;
  background:rgba(7,19,40,.7);
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.hero-float .n{font-size:38px;font-weight:800;color:var(--gold);line-height:1}
.hero-float .l{font-size:13.5px;color:var(--grey-blue);margin-top:10px;line-height:1.5}
@media (max-width:1100px){.hero-float{display:none}}

.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue .line{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:pulse-line 1.8s ease-in-out infinite}
@keyframes pulse-line{0%,100%{opacity:.3}50%{opacity:1}}

/* diagonal cut at hero bottom, bleeding into next section */
.hero-cut{
  position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:2;
  background:var(--navy);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
@media (max-width:760px){.hero-cut{height:60px}}

/* ---------- marquee ticker ---------- */
.marquee{
  background:var(--gold);color:var(--navy);overflow:hidden;
  white-space:nowrap;padding:16px 0;position:relative;
}
.marquee .track{display:inline-flex;animation:marquee 26s linear infinite}
.marquee span{
  display:inline-flex;align-items:center;font-weight:800;font-size:20px;
  letter-spacing:.02em;padding:0 28px;text-transform:uppercase;
}
.marquee span::after{content:"◆";margin-left:28px;font-size:12px;opacity:.6}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- video embed (16:9, responsive) ---------- */
.video-embed{
  position:relative;width:100%;max-width:920px;margin:44px auto 0;
  aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.video-embed.video-embed-wide{max-width:var(--wrap)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- big alternating pillar panels ---------- */
.pillars-big{display:flex;flex-direction:column}
.pbig{
  position:relative;display:grid;grid-template-columns:1.05fr 1fr;
  min-height:78vh;overflow:hidden;isolation:isolate;
}
.pbig.rev{grid-template-columns:1fr 1.05fr}
.pbig.rev .pbig-copy{order:2}
.pbig.rev .pbig-media{order:1}
.pbig-media{position:relative;background:var(--navy-2);background-size:cover;background-position:center;overflow:hidden}
.pbig-media img, .pbig-media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.pbig:hover .pbig-media .ph{transform:scale(1.14)}
.pbig-media .ph{background-size:cover;background-position:center;filter:grayscale(.35) brightness(.8) contrast(1.05)}
.pbig-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--navy) -2%, transparent 22%)}
.pbig.rev .pbig-media::after{background:linear-gradient(270deg, var(--navy) -2%, transparent 22%)}
.pbig-copy{
  background:var(--navy);color:var(--white);
  display:flex;flex-direction:column;justify-content:center;
  padding:70px 8vw;position:relative;
}
.pbig-ghost{
  position:absolute;top:50%;right:2%;transform:translateY(-50%);
  font-size:min(34vw,420px);font-weight:800;
  color:rgba(201,168,118,.07);line-height:1;pointer-events:none;letter-spacing:-.05em;
  z-index:0;
}
.pbig.rev .pbig-ghost{right:auto;left:2%}
.pbig-copy .tag, .pbig-copy h3, .pbig-copy p, .pbig-copy .btn{position:relative;z-index:1}
.pbig-copy .tag{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.pbig-copy h3{font-size:clamp(30px,3.4vw,48px);margin-bottom:18px;position:relative}
.pbig-copy p{font-size:16.5px;color:var(--grey-blue);max-width:38ch;margin-bottom:26px;position:relative}
.pbig-copy .btn{align-self:flex-start;position:relative}
@media (max-width:900px){
  .pbig, .pbig.rev{grid-template-columns:1fr;min-height:auto}
  .pbig-media{min-height:44vh}
  .pbig.rev .pbig-copy, .pbig.rev .pbig-media{order:initial}
  .pbig-copy{padding:56px 28px}
  .pbig-media::after, .pbig.rev .pbig-media::after{background:linear-gradient(180deg, transparent 60%, var(--navy) 100%)}
}

/* ---------- pull quote ---------- */
.pullquote{background:var(--paper);padding:140px 0;text-align:center}
.pullquote .mark{font-size:120px;color:var(--gold);line-height:0;display:block;margin-bottom:10px;font-family:Georgia,serif}
.pullquote blockquote{font-size:clamp(24px,3.2vw,40px);font-weight:700;max-width:22ch;margin:0 auto 26px;color:var(--navy);letter-spacing:-.01em;line-height:1.25}
.pullquote cite{font-style:normal;font-size:14.5px;color:#5A6B76;font-weight:600}

/* cut-corner industrial button variant */
.btn-cut{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}

/* ---------- section shells ---------- */
section{padding:120px 0;position:relative}
.section-navy{background:var(--navy);color:var(--white)}
.section-navy-2{background:var(--navy-2);color:var(--white)}
.section-paper{background:var(--paper);color:var(--ink)}
.section-white{background:var(--white);color:var(--ink)}
.section-head{max-width:640px;margin-bottom:64px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(30px,3.6vw,46px)}
.section-head p{font-size:17px;color:var(--grey-blue);margin-top:16px}
.plan-image{width:100%;height:auto;display:block;border-radius:6px;margin-top:44px}
.section-paper .section-head p, .section-white .section-head p{color:#5A6B76}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1.is-visible{transition-delay:.08s}
.reveal-delay-2.is-visible{transition-delay:.16s}
.reveal-delay-3.is-visible{transition-delay:.24s}
.reveal-delay-4.is-visible{transition-delay:.32s}

/* ---------- pillar cards (business lines) ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.pillar{
  background:var(--navy-2);padding:40px 30px 34px;min-height:380px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.pillar::before{
  content:"";position:absolute;inset:0;background-size:cover;background-position:center;
  z-index:-2;transition:transform .6s cubic-bezier(.2,.8,.3,1);transform:scale(1.08);
  filter:grayscale(.25) brightness(.65);
}
.pillar::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(7,19,40,.35) 0%, rgba(7,20,45,.55) 45%, rgba(5,14,32,.96) 100%);
  transition:background .4s;
}
.pillar:hover{transform:translateY(-6px)}
.pillar:hover::before{transform:scale(1.16)}
.pillar:hover::after{background:linear-gradient(180deg, rgba(15,42,90,.25) 0%, rgba(7,20,45,.45) 45%, rgba(5,14,32,.94) 100%)}
.pillar .icon{
  width:46px;height:46px;border-radius:3px;
  background:rgba(244,180,0,.14);border:1px solid rgba(244,180,0,.35);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;
}
.pillar .icon svg{width:22px;height:22px;stroke:var(--gold-2);fill:none;stroke-width:1.8}
.pillar .num{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.14em;position:absolute;top:28px;right:30px}
.pillar h3{font-size:24px;color:var(--white)}
.pillar p{font-size:14.5px;color:var(--grey-blue);max-width:26ch}
.pillar .go{
  margin-top:6px;font-size:13.5px;font-weight:700;
  color:var(--gold-2);display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(6px);transition:opacity .3s, transform .3s;
}
.pillar:hover .go{opacity:1;transform:translateY(0)}

@media (max-width:980px){
  .pillars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .pillars{grid-template-columns:1fr}
}

/* ---------- big split feature (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split.reverse{direction:rtl}
.split.reverse > *{direction:ltr}
.split .media{min-height:520px;background-size:cover;background-position:center;position:relative;filter:grayscale(.25) brightness(.92) contrast(1.03)}
.split .copy{
  padding:80px 64px;display:flex;flex-direction:column;justify-content:center;
}
.split .copy h2{font-size:clamp(28px,3vw,40px);margin-bottom:20px}
.split .copy p{font-size:16.5px;margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tags span{
  font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--line-light);
  border-radius:2px;color:#4A5B66;
}
.split .copy p.first-project{
  margin-top:26px;
  font-size:15px;color:var(--navy);font-weight:500;
}
.split .copy p.first-project strong{color:var(--navy);font-weight:800}
@media (max-width:860px){
  .split, .split.reverse{grid-template-columns:1fr;direction:ltr}
  .split .media{min-height:340px}
  .split .copy{padding:56px 28px}
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.stat{background:var(--navy);padding:44px 30px;text-align:center}
.stat .n{font-size:clamp(34px,4vw,52px);font-weight:800;color:var(--gold)}
.stat .l{font-size:14px;color:var(--grey-blue);margin-top:8px}
.stat-feature{display:flex;flex-direction:column;align-items:center}
.stat-feature .stat-icon{width:40px;height:40px;color:var(--gold);margin-bottom:16px}
.stat-feature .stat-icon svg{width:100%;height:100%}
.stat-feature .stat-title{font-size:19px;font-weight:800;color:var(--gold);margin-bottom:6px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- project cards ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.proj-card{
  position:relative;border-radius:8px;overflow:hidden;min-height:460px;
  display:flex;align-items:flex-end;background-size:cover;background-position:center;
  isolation:isolate;box-shadow:0 30px 50px -24px rgba(0,0,0,.6);
}
.proj-card::before{
  content:"";position:absolute;inset:0;z-index:-2;background:inherit;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.2,.8,.3,1);transform:scale(1.04);
  filter:grayscale(.35) brightness(.8) contrast(1.05);
}
.proj-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(7,19,42,.05) 20%, rgba(7,19,42,.55) 60%, rgba(5,14,32,.97) 100%);
}
.proj-card:hover::before{transform:scale(1.1)}
.proj-card .content{position:relative;padding:38px;color:var(--white)}
.proj-card .eyebrow{margin-bottom:10px}
.proj-card h3{font-size:28px;margin-bottom:12px}
.proj-card p{font-size:15px;color:var(--grey-blue);max-width:40ch;margin-bottom:18px}
@media (max-width:760px){.proj-grid{grid-template-columns:1fr}}

/* ---------- logos / trust strip ---------- */
.trust-strip{
  display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:center;
  padding:36px 0;opacity:.75;
}
.trust-strip span{font-weight:700;letter-spacing:.06em;font-size:15px;color:#5A6B76}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
  color:var(--white);padding:100px 0;text-align:center;
}
.cta-band h2{font-size:clamp(30px,4vw,46px);max-width:22ch;margin:0 auto 20px}
.cta-band p{color:var(--grey-blue);max-width:48ch;margin:0 auto 36px;font-size:17px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- billing ---------- */
.billing-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;text-align:center;margin:0 auto 68px;max-width:760px}
.billing-col h3{color:var(--white);font-size:18px;margin-bottom:16px}
.billing-info{list-style:none;margin-bottom:20px}
.billing-info li{font-size:14.5px;color:var(--grey-blue)}
.billing-info li span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:#5A7386;margin-top:12px;margin-bottom:2px}
.billing-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.billing-badges .badge{background:var(--white);border-radius:6px;padding:8px 14px;height:38px;display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.02em}
.billing-badges .badge img{height:100%;width:auto;display:block}
.billing-ncage{font-size:14.5px;color:var(--grey-blue);margin-top:14px}
.standards-note{font-size:13.5px;color:#8A9AA5;margin-top:10px}
@media (max-width:640px){.billing-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.team-card{text-align:center}
.team-photo{width:120px;height:120px;border-radius:50%;margin:0 auto 20px;background:linear-gradient(135deg,var(--navy-3),var(--navy-2));border:1px solid rgba(255,255,255,.08)}
.team-card h4{color:var(--white);font-size:17px;margin-bottom:6px}
.team-role{display:block;color:var(--grey-blue);font-size:14px;margin-bottom:8px}
.team-card a{color:var(--gold);font-size:14px;transition:color .2s}
.team-card a:hover{color:var(--gold-2)}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);row-gap:44px}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--navy);color:var(--grey-blue);padding:36px 0 24px}
.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.foot-grid a,.foot-grid span{font-size:14.5px;color:var(--grey-blue);transition:color .2s}
.foot-grid a:hover{color:var(--gold)}
@media (max-width:620px){.foot-grid{flex-direction:column;text-align:center}}
.foot-certs{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
.foot-certs .l{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5A7386}
.foot-certs .badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.foot-certs .badge{background:var(--white);border-radius:6px;padding:8px 14px;display:flex;align-items:center;height:44px}
.foot-certs .badge img{height:100%;width:auto;display:block}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:26px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:13.5px;color:#5A7386;
}
.foot-bottom a{color:#5A7386;transition:color .2s}
.foot-bottom a:hover{color:var(--gold)}

/* ---------- mobile nav ---------- */
/* raised from 900px: 8 nav items no longer fit comfortably above that width */
@media (max-width:1180px){
  /* backdrop-filter on .topbar creates a containing block for position:fixed
     descendants, trapping nav.main inside the 76px topbar instead of the
     viewport — disable it on mobile so the fixed nav positions correctly. */
  .topbar{backdrop-filter:none}
  nav.main{
    position:fixed;top:76px;left:0;right:0;bottom:0;
    background:var(--navy);flex-direction:column;align-items:flex-start;
    padding:34px 28px;gap:22px;z-index:99;
    transform:translateX(100%);transition:transform .3s;
  }
  nav.main.open{transform:translateX(0)}
  .burger{display:block}
}

/* ---------- page hero (subpages, shorter) ---------- */
.page-hero{min-height:60vh}
.page-hero .hero-inner{padding-bottom:70px}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13px;color:var(--grey-blue);margin-bottom:18px;letter-spacing:.04em}
.crumb a{color:var(--gold-2)}

/* ---------- utility ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
.mt-0{margin-top:0}
.center{text-align:center}

/* ---------- Alatalot Oy about panel (big, bold, image + manifesto) ---------- */
.about-panel{
  position:relative;display:grid;grid-template-columns:1fr 1.15fr;
  min-height:92vh;overflow:hidden;isolation:isolate;background:var(--navy);
}
.about-media{position:relative;background:var(--navy-2);overflow:hidden}
.about-media .ph{
  position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;
  transform:scale(1.06);filter:grayscale(.35) brightness(.8) contrast(1.05);
}
.about-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--navy) -2%, transparent 26%)}
.about-copy{
  color:var(--white);padding:100px 7vw;position:relative;
  display:flex;flex-direction:column;justify-content:center;
}
.about-ghost{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  font-size:min(24vw,300px);font-weight:800;color:rgba(214,194,166,.06);
  line-height:1;pointer-events:none;letter-spacing:-.04em;z-index:0;
}
.about-copy .tag,.about-copy h2,.about-copy p,.about-stats,.about-co-tagline{position:relative;z-index:1}
.about-copy .tag{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px;display:inline-block}
.about-copy h2{font-size:clamp(32px,3.6vw,50px);max-width:14ch;margin-bottom:26px}
.about-copy p{font-size:16.5px;color:var(--grey-blue);max-width:52ch;margin-bottom:34px}
.about-stats{display:flex;flex-wrap:wrap;gap:0;margin-bottom:36px}
.about-stat{padding:0 28px;border-left:1px solid rgba(255,255,255,.14)}
.about-stat:first-child{padding-left:0;border-left:none}
.about-stat strong{display:block;font-size:30px;font-weight:800;line-height:1.1;color:var(--gold-2);margin-bottom:6px}
.about-stat span{display:block;font-size:13.5px;color:var(--grey-blue);max-width:15ch}
@media (max-width:900px){
  .about-stats{flex-direction:column;align-items:flex-start;gap:18px}
  .about-stat{width:auto;padding:0 0 0 20px;border-left:2px solid rgba(255,255,255,.16)!important}
}
p.about-co-tagline{
  margin-top:8px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);
  font-size:clamp(19px,2vw,24px);font-weight:700;color:var(--white);
  max-width:30ch;letter-spacing:-.01em;
}
@media (max-width:900px){
  .about-panel{grid-template-columns:1fr;min-height:auto}
  .about-media{min-height:42vh}
  .about-media::after{background:linear-gradient(180deg, transparent 55%, var(--navy) 100%)}
  .about-copy{padding:56px 28px}
}

/* ---------- business area cards (Acorex) ---------- */
.biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.biz-grid.trio{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.biz-grid.trio{grid-template-columns:1fr}}
.biz-card{
  background:var(--navy-2);padding:44px 40px;position:relative;
  transition:background .3s;
}
.biz-card:hover{background:var(--navy-3)}
.biz-num{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.14em;display:block;margin-bottom:16px}
.biz-card h3{font-size:26px;color:var(--white);margin-bottom:8px}
.biz-sub{display:block;font-size:14px;color:var(--gold-2);font-weight:600;margin-bottom:18px}
.biz-card p{font-size:15px;color:var(--grey-blue);margin-bottom:14px;line-height:1.6}
.biz-note{font-size:13px;color:#7A8B98;font-style:italic;margin-top:10px}
@media (max-width:820px){.biz-grid{grid-template-columns:1fr}}

/* ---------- technical spec sheet (Acorex approval data) ---------- */
.spec-sheet{
  background:var(--paper);border:1px solid var(--line-light);border-radius:4px;
  padding:36px 40px;font-family:'IBM Plex Mono','Courier New',monospace;
}
.spec-head{
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);padding-bottom:18px;margin-bottom:20px;
  border-bottom:2px solid var(--navy);
}
.spec-row{
  display:flex;justify-content:space-between;gap:24px;padding:14px 0;
  border-bottom:1px solid var(--line-light);
}
.spec-row:last-child{border-bottom:none}
.spec-label{font-size:11.5px;color:#8A9AA5;letter-spacing:.04em;text-transform:uppercase;flex:0 0 38%}
.spec-value{font-size:14.5px;color:var(--navy);font-weight:600;text-align:right;flex:1}
@media (max-width:600px){
  .spec-sheet{padding:26px 22px}
  .spec-row{flex-direction:column;gap:4px}
  .spec-value{text-align:left}
}

/* ---------- bento photo gallery ---------- */
.bento-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:10px}
.bento-item{
  position:relative;overflow:hidden;border-radius:6px;background:var(--navy-2);
  isolation:isolate;box-shadow:0 20px 40px -20px rgba(0,0,0,.4);
}
.bento-item .bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);transform:scale(1.02);
}
.bento-item:hover .bg{transform:scale(1.1)}
.bento-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(5,13,20,.85) 100%);
}
.bento-item .cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:1;
  color:var(--white);font-size:14px;font-weight:700;
  transform:translateY(6px);opacity:.9;transition:transform .3s;
}
.bento-item .cap span{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);margin-bottom:4px}
.bento-item:hover .cap{transform:translateY(0)}
.bento-item.big{grid-column:span 2;grid-row:span 2}
.bento-item.wide{grid-column:span 4;grid-row:span 1}
@media (max-width:860px){
  .bento-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .bento-item.big{grid-column:span 2;grid-row:span 2}
  .bento-item.wide{grid-column:span 2}
}

/* ---------- full-width auto-rotating reference carousel ---------- */
.ref-section{overflow-x:clip}
.carousel{
  position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  height:78vh;min-height:440px;max-height:720px;overflow:hidden;margin-top:48px;
}
.carousel-track{position:relative;width:100%;height:100%}
.carousel-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.3s ease-in-out;
}
.carousel-slide.active{opacity:1}
.carousel-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(5,13,20,.88) 100%);
}
#puusaunaCarousel .carousel-slide::after{background:none}
.carousel-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:44px 64px;color:var(--white);
}
.carousel-cap span{
  display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:10px;
}
.carousel-cap{font-size:clamp(22px,3vw,34px);font-weight:800}
.carousel-dots{position:absolute;bottom:36px;right:48px;display:flex;gap:10px;z-index:2}
.carousel-dots button{
  width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  background:transparent;cursor:pointer;padding:0;transition:all .3s;
}
.carousel-dots button.active{background:var(--gold);border-color:var(--gold);width:30px;border-radius:6px}
@media (max-width:760px){
  .carousel{height:56vh;min-height:340px;margin-top:34px}
  .carousel-cap{padding:28px 24px}
  .carousel-dots{right:24px;bottom:20px}
}

/* ---------- tabbed reference gallery (Rakentaminen: Oma tuotanto / Urakointi / Projektinjohto) ---------- */
.ref-tab-layout{display:grid;grid-template-columns:360px 1fr;gap:60px;align-items:center}
.ref-tab-panel h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:12px;color:var(--navy)}
.ref-tab-panel p{font-size:16.5px;color:#5A6B76;margin-bottom:28px}
.ref-tabs{display:flex;flex-direction:column;gap:10px}
.ref-tab{
  text-align:left;padding:16px 20px;border-radius:8px;
  border:1.5px solid var(--line);background:var(--white);
  font-size:15.5px;font-weight:700;color:var(--navy);cursor:pointer;
  transition:all .2s;
}
.ref-tab:hover{border-color:var(--gold)}
.ref-tab.active{border-color:var(--gold);background:var(--navy);color:var(--white)}
.ref-list{display:none;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.ref-list.active{display:block}
.ref-list li{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ref-list li:last-child{border-bottom:none}
.ref-list strong{color:var(--navy);font-weight:700}
.ref-list span{color:#8A9AA5;text-align:right}
.ref-gallery{position:relative}
.ref-gallery-frame{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--navy)}
.ref-gallery-group{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s}
.ref-gallery-group.active{opacity:1;visibility:visible}
.ref-gallery-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s}
.ref-gallery-slide.active{opacity:1}
.ref-gallery-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(5,13,20,.85) 100%);
}
.ref-gallery-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px 32px;color:var(--white)}
.ref-gallery-cap span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:8px}
.ref-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;
  background:rgba(5,13,20,.55);border:1px solid rgba(255,255,255,.3);color:var(--white);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:background .2s;
}
.ref-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.ref-arrow-prev{left:16px}
.ref-arrow-next{right:16px}
@media (max-width:900px){
  .ref-tab-layout{grid-template-columns:1fr;gap:32px}
  .ref-tabs{flex-direction:row;flex-wrap:wrap}
}

/* ---------- static two-up image grid (Acorex finished containers) ---------- */
.finished-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);margin-top:40px}
.finished-item{
  position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;
  overflow:hidden;
}
.finished-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(5,13,20,.88) 100%);
}
.finished-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:28px 32px;color:var(--white);
  font-size:clamp(18px,2vw,24px);font-weight:800;
}
.finished-cap span{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:8px;
}

/* ---------- placeholder image grid (awaiting real photos) ---------- */
.machine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.machine-slot{
  aspect-ratio:4/3;border:1.5px dashed var(--line-light);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:#8A9AA5;font-size:13px;font-weight:600;
}
@media (max-width:760px){.machine-grid{grid-template-columns:1fr}}
@media (max-width:760px){.finished-grid{grid-template-columns:1fr}}

/* ---------- product variety grid (Kiviaines) ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-card{
  background:var(--white);border:1px solid var(--line-light);border-radius:8px;
  overflow:hidden;text-align:center;transition:transform .3s, box-shadow .3s;
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -20px rgba(10,31,68,.25)}
.product-photo{
  aspect-ratio:1/1;background-size:76%;background-position:center;background-repeat:no-repeat;
  background-color:#fff;
}
.product-card h3{font-size:15.5px;padding:16px 14px;color:var(--navy)}
@media (max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.product-grid{grid-template-columns:1fr}}

/* ---------- quote request form ---------- */
.quote-form{max-width:760px;margin:0 auto}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:30px}
.quote-grid label{
  display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--grey-blue);
}
.quote-grid label.full{grid-column:1 / -1}
.quote-grid input, .quote-grid select, .quote-grid textarea{
  font-family:'Poppins',sans-serif;font-size:15px;color:var(--white);
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.2);
  border-radius:4px;padding:13px 14px;outline:none;transition:border-color .2s;
}
.quote-grid input:focus, .quote-grid select:focus, .quote-grid textarea:focus{border-color:var(--gold)}
.quote-grid select option{color:var(--ink)}
.quote-form .btn{display:block;margin:0 auto}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-notice{max-width:760px;margin:0 auto 20px;padding:14px 18px;border-radius:6px;font-size:14.5px;text-align:center;display:none}
.form-notice.show{display:block}
.form-notice-ok{background:rgba(60,180,100,.12);border:1px solid rgba(60,180,100,.4);color:#8fe3ac}
.form-notice-error{background:rgba(220,80,80,.12);border:1px solid rgba(220,80,80,.4);color:#f0a3a3}
@media (max-width:640px){.quote-grid{grid-template-columns:1fr}}