/* =================================================================
   Businesstilat — fluid-glass redesign
   Design system + layout
   ================================================================= */

:root{
  /* palette */
  --ink:        #0b0b0c;
  --ink-soft:   #17171a;
  --paper:      #f3f1ec;
  --paper-2:    #eae6df;
  --line:       #dcd8d0;
  --muted:      #6b6862;
  --muted-dark: rgba(255,255,255,.62);
  --white:      #ffffff;

  /* brand accent (refined from the current site's orange) */
  --accent:     #f0592a;
  --accent-2:   #ff7a3d;
  --accent-ink: #2a0f05;

  /* glass */
  --glass-bg:        rgba(255,255,255,.07);
  --glass-brd:       rgba(255,255,255,.16);
  --glass-hi:        rgba(255,255,255,.40);
  --glass-blur:      20px;

  --glass-l-bg:      rgba(255,255,255,.55);
  --glass-l-brd:     rgba(20,18,15,.08);

  /* type */
  --font-body:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-disp:  "Inter Tight", "Inter", system-ui, sans-serif;

  /* layout */
  --wrap: 1340px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 20px;
  --radius-lg: 30px;

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

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

/* Universal keyboard focus ring — legible on light, dark, image & orange surfaces */
:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(10,10,11,.6);
  border-radius:6px;
}
body.cursor-on :focus-visible{ cursor:auto }

/* keep smooth scroll driven by Lenis */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }

/* ---------- shared type ---------- */
.h-display{
  font-family:var(--font-disp);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.0;
  font-size:clamp(2.3rem, 5.4vw, 4.7rem);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow i{ color:var(--accent); font-style:normal; font-weight:600 }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:clamp(72px, 11vw, 160px) }

/* =================================================================
   GLASS
   ================================================================= */
.glass{
  position:relative;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 24px 60px -20px rgba(0,0,0,.5);
  border-radius:var(--radius);
}
.glass::after{ /* specular sheen */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0) 34%);
  opacity:.9;
}
.glass-light{
  position:relative;
  background:var(--glass-l-bg);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-l-brd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 20px 50px -28px rgba(20,18,15,.45);
  border-radius:var(--radius);
}
/* Fallback where backdrop-filter is unsupported: keep panels opaque enough to read */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{ background:rgba(18,17,15,.74) }
  .glass-light{ background:rgba(255,255,255,.92) }
  .chip{ background:rgba(18,17,15,.55) }
  .btn--ghost{ background:rgba(18,17,15,.55) }
  .nav.is-light .nav__inner{ background:rgba(255,255,255,.94) }
  .cta__form input{ background:rgba(255,255,255,.2) }
}

/* =================================================================
   BUTTONS / LINKS
   ================================================================= */
.btn{
  --bg:#fff; --fg:#0b0b0c;
  display:inline-flex; align-items:center; gap:.55em;
  padding:.95em 1.55em; border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-weight:500; font-size:.95rem; letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn svg{ transition:transform .45s var(--ease) }
.btn:hover{ box-shadow:0 14px 34px -12px rgba(0,0,0,.4) }
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:.68em 1.15em; font-size:.86rem }
.btn--accent{ --bg:var(--accent); --fg:#fff }
.btn--accent:hover{ --bg:var(--accent-2) }
.btn--ghost{
  --bg:rgba(255,255,255,.06); --fg:#fff;
  border-color:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn--ghost:hover{ --bg:rgba(255,255,255,.14) }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:500; letter-spacing:-.01em;
  padding-bottom:2px; position:relative; width:fit-content;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(1); transform-origin:right; transition:transform .5s var(--ease);
}
.link-arrow:hover::after{ transform:scaleX(0); transform-origin:left }
.link-arrow svg{ transition:transform .45s var(--ease) }
.link-arrow:hover svg{ transform:translateX(4px) }

.chip{
  display:inline-flex; align-items:center;
  padding:.5em 1em; border-radius:100px;
  font-size:.76rem; font-weight:500; letter-spacing:.02em;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.chip--accent{ background:rgba(240,89,42,.16); border-color:rgba(240,89,42,.5); color:#ffd9c8 }

/* =================================================================
   LOADER
   ================================================================= */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--gutter);
}
.loader__inner{
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--font-disp);
}
.loader__word{ font-size:clamp(2rem,7vw,5rem); font-weight:600; letter-spacing:-.04em; overflow:hidden }
.loader__count{ font-size:clamp(1rem,3vw,1.6rem); font-weight:500; opacity:.7 }
.loader__count em{ font-style:normal }
.loader__bar{ margin-top:1.4rem; height:2px; width:100%; background:rgba(255,255,255,.15); overflow:hidden }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--accent) }
body.is-loaded .loader{ pointer-events:none }

/* =================================================================
   CUSTOM CURSOR
   ================================================================= */
.cursor{
  position:fixed; top:0; left:0; z-index:150; pointer-events:none;
  width:12px; height:12px; border-radius:50%;
  background:#fff; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
  display:none;
}
.cursor.is-active{ width:74px; height:74px; background:#fff }
.cursor.is-hidden{ opacity:0 }
.cursor__label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.7rem; font-weight:600; letter-spacing:.02em; color:#0b0b0c;
  mix-blend-mode:normal; opacity:0; transition:opacity .25s var(--ease); text-transform:lowercase;
}
.cursor.is-active .cursor__label{ opacity:1 }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block }
  body.cursor-on{ cursor:none }
  body.cursor-on a, body.cursor-on button{ cursor:none }
}

/* =================================================================
   NAV
   ================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:center;
  padding:16px var(--gutter);
  transition:padding .5s var(--ease);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  width:100%; max-width:var(--wrap);
  padding:12px 12px 12px 22px; border-radius:100px;
  color:#fff;
  transition:color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.nav__brand{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto }
.nav__logo{ display:block; height:32px; width:auto; transition:opacity .4s var(--ease) }
.nav__logo--color{ position:relative; opacity:0 }          /* shown over pale sections */
.nav__logo--white{ position:absolute; top:0; left:0; height:100%; opacity:1 } /* shown over the dark hero */
.nav.is-light .nav__logo--color{ opacity:1 }
.nav.is-light .nav__logo--white{ opacity:0 }
.nav__links{ display:flex; gap:2rem; margin-inline:auto }
.nav__links a{ font-size:.95rem; font-weight:450; position:relative; opacity:.9; transition:opacity .3s }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:currentColor; transition:width .4s var(--ease) }
.nav__links a:hover{ opacity:1 }
.nav__links a:hover::after{ width:100% }
.nav__actions{ display:flex; align-items:center; gap:.9rem }
.nav__phone{ font-size:.92rem; font-weight:450; opacity:.85; white-space:nowrap }
.nav__phone:hover{ opacity:1 }
.nav .btn{ --bg:#fff; --fg:#0b0b0c }
.nav__burger{ display:none; width:44px; height:44px; border-radius:50%; border:1px solid currentColor; position:relative }
.nav__burger span{ position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:currentColor; transform:translate(-50%,-50%); transition:transform .4s var(--ease), opacity .3s }
.nav__burger span:nth-child(1){ transform:translate(-50%,-4px) }
.nav__burger span:nth-child(2){ transform:translate(-50%,4px) }

/* scrolled (over light sections) */
.nav.is-light .nav__inner{ color:var(--ink); background:rgba(255,255,255,.6); border-color:rgba(20,18,15,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 16px 40px -24px rgba(20,18,15,.5) }
.nav.is-light .nav__inner::after{ opacity:0 }

/* hidden on scroll down */
.nav.is-hidden{ transform:translateY(-140%); transition:transform .5s var(--ease) }

/* menu open state */
body.menu-open .nav__burger span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg) }
body.menu-open .nav__burger span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg) }

/* =================================================================
   MOBILE MENU
   ================================================================= */
.menu{
  position:fixed; inset:0; z-index:95; background:var(--ink); color:#fff;
  padding:120px var(--gutter) 48px;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease);
  visibility:hidden;
}
body.menu-open .menu{ clip-path:inset(0 0 0% 0); visibility:visible }
.menu__links{ display:flex; flex-direction:column }
.menu__links a{
  font-family:var(--font-disp); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(2.2rem,11vw,4rem); padding:.18em 0;
  display:flex; align-items:baseline; gap:.6rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.menu__i{ font-size:.85rem; font-weight:500; opacity:.5; font-family:var(--font-body) }
.menu__foot{ display:flex; flex-direction:column; gap:.4rem; font-size:1.05rem; opacity:.8 }

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(96px,14vh,140px) var(--gutter) clamp(28px,5vh,56px);
  overflow:hidden; color:#fff; isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.hero__img{
  position:absolute; inset:-8% 0; width:100%; height:116%;
  object-fit:cover; object-position:center;
  transform:scale(1.18); will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,0) 22%, rgba(8,8,10,0) 45%, rgba(8,8,10,.5) 78%, rgba(8,8,10,.82) 100%),
    linear-gradient(75deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.1) 48%, rgba(8,8,10,0) 72%);
}
.grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__content{ position:relative; max-width:1100px; padding-bottom:clamp(24px,4vh,44px) }
.hero__title{
  font-family:var(--font-disp); font-weight:600;
  font-size:clamp(3.2rem, 10.5vw, 10rem);
  line-height:.9; letter-spacing:-.045em;
  margin:.32em 0 .5em;
}
.hero__title .line{ display:block; overflow:hidden }
.hero__title .line > span{ display:block; will-change:transform }
.hero__sub{
  max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.28rem);
  color:rgba(255,255,255,.82); line-height:1.55;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem }

.hero__bar{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto }
.hero__scroll{ display:inline-flex; align-items:center; gap:.7rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8) }
.hero__scroll-line{ position:relative; display:block; width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.4) }
.hero__scroll-line i{ position:absolute; left:50%; top:50%; width:1px; height:9px; background:#fff; transform:translate(-50%,-70%); animation:scrolldot 1.8s var(--ease) infinite }
@keyframes scrolldot{ 0%{ opacity:0; transform:translate(-50%,-120%) } 40%{ opacity:1 } 80%{ opacity:0; transform:translate(-50%,10%) } 100%{ opacity:0 } }
.hero__meta{ display:inline-flex; align-items:center; gap:.85rem; padding:.7em 1.15em; font-size:.83rem; color:rgba(255,255,255,.9) }
.hero__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--accent) }

/* =================================================================
   MARQUEE
   ================================================================= */
.marquee{ background:var(--ink); color:#fff; overflow:hidden; padding-block:1.15rem; border-block:1px solid rgba(255,255,255,.08) }
.marquee__track{ display:flex; width:max-content; animation:marquee 32s linear infinite }
.marquee__track span{ display:inline-flex; align-items:center; font-family:var(--font-disp); font-weight:500; font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:-.01em; white-space:nowrap; padding-inline:0 }
.marquee__track i{ color:var(--accent); font-style:normal; margin-inline:1.1rem; font-size:.8em; transform:translateY(-1px) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* =================================================================
   KONSEPTI
   ================================================================= */
.konsepti{ background:var(--paper) }
.konsepti__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  grid-template-areas:"head media" "body media";
  column-gap:clamp(32px,6vw,90px); row-gap:2.4rem; align-items:start;
}
.konsepti__head{ grid-area:head }
.konsepti__head .h-display{ margin-top:1.1rem; max-width:12ch }
.konsepti__body{ grid-area:body; max-width:44ch; align-self:end }
.konsepti__body p{ color:var(--muted); font-size:1.08rem; margin-bottom:1.1rem }
.konsepti__body .link-arrow{ margin-top:.8rem }
.konsepti__media{
  grid-area:media; position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/5; box-shadow:0 40px 80px -40px rgba(20,18,15,.55);
}
.konsepti__media img{ width:100%; height:112%; object-fit:cover; will-change:transform }
.konsepti__tag{ position:absolute; left:16px; bottom:16px; padding:.6em 1em; font-size:.78rem; color:#fff; border-radius:100px }

/* =================================================================
   PILLARS
   ================================================================= */
.pillars{ background:var(--paper); padding-top:0 }
.pillars__intro{ display:flex; flex-direction:column; gap:1.1rem; max-width:760px; margin-bottom:clamp(2.4rem,5vw,4rem) }
.pillars__lead{ font-family:var(--font-disp); font-weight:500; font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.02em; line-height:1.15 }
.pillars__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,22px) }
.card{
  --pad:clamp(24px,2.4vw,34px);
  position:relative; overflow:hidden;
  padding:var(--pad); min-height:clamp(210px,22vw,270px);
  display:flex; flex-direction:column; align-items:flex-start;
  border-radius:var(--radius-lg);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card::after{ /* animated accent baseline — matches the link-underline vocabulary */
  content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) * .7);
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -32px rgba(20,18,15,.5) }
.card:hover::after{ transform:scaleX(1) }
.card__num{
  font-family:var(--font-disp); font-weight:600; line-height:1;
  font-size:clamp(2.4rem,3.4vw,3.4rem); letter-spacing:-.03em; color:var(--accent);
  transition:transform .55s var(--ease);
}
.card:hover .card__num{ transform:translateY(-3px) }
.card h3{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.15rem,1.5vw,1.45rem); letter-spacing:-.02em; line-height:1.15; margin-top:clamp(1.1rem,2vw,1.6rem) }
.card p{ color:var(--muted); font-size:.96rem; margin-top:.55rem }

/* =================================================================
   TOIMIVA / LAATU (dark band)
   ================================================================= */
.toimiva{ background:var(--ink); color:#fff }
.toimiva__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3.5vw,56px) clamp(20px,3vw,44px); align-items:start;
}
.toimiva__text{ grid-column:1 / 7 }
.toimiva__title{ margin-bottom:1.6rem; max-width:14ch }
.toimiva__text p{ color:var(--muted-dark); font-size:1.08rem; max-width:46ch }
.toimiva__media{ border-radius:var(--radius-lg); overflow:hidden }
.toimiva__media img{ width:100%; height:100%; object-fit:cover; will-change:transform }
.toimiva__media.m1{ grid-column:7 / 13; grid-row:1 / 3; aspect-ratio:4/3.4; box-shadow:0 40px 90px -50px rgba(0,0,0,.9) }
.toimiva__media.m2{ grid-column:1 / 6; aspect-ratio:4/3; margin-top:1rem }
.toimiva__quality{ grid-column:6 / 13; align-self:center }
.laatu__title{ font-family:var(--font-disp); font-weight:600; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.03em; margin-bottom:1rem }
.toimiva__quality p{ color:var(--muted-dark); font-size:1.05rem; max-width:52ch; margin-bottom:1.5rem }
.tags{ display:flex; flex-wrap:wrap; gap:.6rem }
.tags li{
  padding:.55em 1em; border-radius:100px; font-size:.86rem;
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85);
}

/* =================================================================
   GALLERIA
   ================================================================= */
.galleria{ background:var(--paper) }
.galleria__head{ display:flex; flex-direction:column; gap:1.1rem; margin-bottom:clamp(2.4rem,5vw,4rem) }
.galleria__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,28px) }
.project{ display:block; position:relative }
.project--wide{ grid-column:1 / -1 }
.project__media{ position:relative; overflow:hidden; border-radius:var(--radius-lg); aspect-ratio:16/11 }
.project--wide .project__media{ aspect-ratio:16/7 }
.project__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .9s var(--ease); will-change:transform }
.project:hover .project__media img{ transform:scale(1.07) }
.project__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,12,0) 55%,rgba(11,11,12,.4)); opacity:0; transition:opacity .5s var(--ease) }
.project:hover .project__media::after{ opacity:1 }
.project__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1.1rem .3rem 0 }
.project__name{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.15rem,1.7vw,1.6rem); letter-spacing:-.02em }
.project__type{ font-size:.85rem; color:var(--muted); text-align:right }

/* =================================================================
   CTA
   ================================================================= */
.cta{ position:relative; overflow:hidden; color:#fff; isolation:isolate }
.cta__media{ position:absolute; inset:0; z-index:-2 }
.cta__media img{ width:100%; height:120%; object-fit:cover; will-change:transform }
.cta__scrim{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(180,52,15,.72), rgba(11,11,12,.82)) }
.cta__inner{ display:flex; justify-content:center; padding-block:clamp(80px,12vw,180px) }
.cta__panel{ width:min(680px,100%); padding:clamp(30px,4.5vw,60px); border-radius:var(--radius-lg); text-align:center }
.cta__title{ font-family:var(--font-disp); font-weight:600; font-size:clamp(2rem,5vw,3.6rem); letter-spacing:-.03em; line-height:1; margin:1rem 0 .9rem }
.cta__panel > p{ color:rgba(255,255,255,.82); max-width:44ch; margin:0 auto 2rem }
.cta__form{ display:flex; gap:.6rem; max-width:460px; margin:0 auto; flex-wrap:wrap }
.cta__form input{
  flex:1 1 220px; min-width:0; padding:1em 1.3em; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:1rem; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .3s, background .3s;
}
.cta__form input::placeholder{ color:rgba(255,255,255,.6) }
.cta__form input:focus{ border-color:#fff; background:rgba(255,255,255,.16) }
.cta__form input:focus:not(:focus-visible){ outline:none; box-shadow:none }
.cta__form .btn{ flex:0 0 auto }
.cta__note{ flex-basis:100%; font-size:.9rem; min-height:1.2em; margin-top:.3rem; color:#ffe2d5 }
.cta__or{ margin-top:1.4rem; font-size:.92rem; color:rgba(255,255,255,.7) }
.cta__or a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:1px }

/* =================================================================
   FOOTER
   ================================================================= */
.footer{ background:var(--ink); color:#fff; padding-block:clamp(60px,8vw,110px) }
.footer__top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding-bottom:clamp(3rem,6vw,5rem); border-bottom:1px solid rgba(255,255,255,.12) }
.footer__brand{ display:inline-block; line-height:0 }
.footer__logo{ height:clamp(52px,7vw,84px); width:auto; display:block }
.footer__tag{ max-width:34ch; color:var(--muted-dark); font-size:1rem }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding-block:clamp(2.6rem,5vw,4rem) }
.footer__col{ display:flex; flex-direction:column; gap:.7rem }
.footer__label{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:.4rem }
.footer__col a{ color:rgba(255,255,255,.82); font-size:1rem; width:fit-content; transition:color .3s }
.footer__col a:hover{ color:#fff }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.12); font-size:.9rem; color:rgba(255,255,255,.6) }
.footer__partner strong{ color:#fff; font-weight:600 }

/* =================================================================
   REVEAL (JS-driven; safe fallback = visible)
   ================================================================= */
[data-reveal], [data-split] .line-in{ will-change:transform,opacity }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1080px){
  .toimiva__text{ grid-column:1 / 8 }
  .toimiva__media.m1{ grid-column:8 / 13; grid-row:1 / 2; aspect-ratio:3/4 }
  .toimiva__media.m2{ grid-column:1 / 7 }
  .toimiva__quality{ grid-column:7 / 13 }
}
@media (max-width:900px){
  .nav__links, .nav__phone{ display:none }
  .nav__burger{ display:block }
  .konsepti__grid{ grid-template-columns:1fr; grid-template-areas:"head" "media" "body"; }
  .konsepti__media{ aspect-ratio:16/12 }
  .konsepti__head .h-display{ max-width:none }
  .pillars__grid{ grid-template-columns:repeat(2,1fr) }
  .toimiva__grid{ grid-template-columns:1fr }
  .toimiva__text, .toimiva__quality, .toimiva__media.m1, .toimiva__media.m2{ grid-column:1 / -1 }
  .toimiva__media.m1{ aspect-ratio:16/10; grid-row:auto }
  .toimiva__media.m2{ display:none }
}
@media (max-width:620px){
  :root{ --radius-lg:22px }
  .nav{ padding:12px 14px }
  .nav__inner{ padding:10px 10px 10px 16px }
  .nav .btn--sm{ display:none }
  .hero__meta{ display:none }
  .hero__title{ letter-spacing:-.03em }
  .galleria__grid{ grid-template-columns:1fr }
  .pillars__grid{ grid-template-columns:1fr }
  .project--wide .project__media{ aspect-ratio:16/11 }
  .footer__cols{ grid-template-columns:1fr; gap:2.2rem }
  .cta__form .btn{ flex:1 1 100%; justify-content:center }
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  .hero__img{ transform:scale(1.05) !important }
  .marquee__track{ animation:none }
  .cursor{ display:none !important }
  body.cursor-on{ cursor:auto }
}