/*
 * Yellow IOT — site styles.
 * Propshaft serves this file as-is; every file in app/assets/stylesheets is linked via
 * `stylesheet_link_tag :app` in the layout.
 */

/* Self-hosted variable fonts (SIL OFL, see vendor/fonts). No third-party requests. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url("/assets/archivo-latin-ext-f1d50082.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url("/assets/archivo-latin-2348e0b4.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-display:swap;
  font-weight:100 900;
  src:url("/assets/inter-latin-ext-65edaaef.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-display:swap;
  font-weight:100 900;
  src:url("/assets/inter-latin-1f021a24.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#090909;
  --card:#111111;
  --card-2:#151515;
  --accent:#F99D1D;                /* logo orange (brand/logo-*.svg) */
  --accent-rgb:249 157 29;
  --accent-dim:#8a5a12;
  --accent-cold:#8a5a12;          /* the accent "unpowered", before the hero switches on (3.4:1, still legible) */
  --text:#ffffff;
  --text-soft:#a7a7a7;
  --text-faint:#8a8a8a;           /* ≥5.3:1 on every surface below */
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.14);
  --radius:20px;
  --red:#FF4433;                  /* large type on dark */
  --red-solid:#D92F1D;            /* fills carrying white text (4.8:1) */
  --red-soft:#ff8f85;
  --lox-green:#74C365;
  --header-h:82px;

  /* Type: Archivo carries headings and the wordmark, Inter carries reading. */
  --font-display:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.55rem, 1.4rem + 3.4vw, 4.25rem);
  --fs-section:clamp(2rem, 1.45rem + 2.3vw, 3.1rem);
  --fs-title:1.3rem;
  --fs-lead:1.125rem;
  --fs-body:1rem;
  --fs-card:.9375rem;
  --fs-small:.875rem;
  --fs-meta:.8125rem;

  /* Motion */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:400ms;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{
  scroll-behavior:smooth; color-scheme:dark; scroll-padding-top:var(--header-h);
  scrollbar-color:#2c2c2c var(--bg);
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.scroll-locked{overflow:hidden;}
img{display:block; max-width:100%;}
button{font-family:inherit; color:inherit;}
a{color:inherit; text-underline-offset:.2em;}
h1, h2, h3, h4{font-family:var(--font-display); line-height:1.15; text-wrap:balance;}
p{text-wrap:pretty;}
::selection{background:var(--accent); color:#0a0a0a;}
input, textarea{caret-color:var(--accent);}
a[href^="tel:"]{font-variant-numeric:tabular-nums; white-space:nowrap;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
[hidden]{display:none !important;}

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:500;
  background:var(--accent); color:#0a0a0a; padding:10px 16px; border-radius:10px;
  font-weight:600; font-size:14px; text-decoration:none; transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:12px;}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Utility bar ---------- */
.utility-bar{
  background:#000;
  border-bottom:1px solid var(--border);
  font-size:var(--fs-meta);
  color:var(--text-soft);
  letter-spacing:.02em;
}
.utility-bar .inner{
  max-width:1360px; margin:0 auto; padding:0 32px; min-height:44px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.emergency-strip{display:flex; align-items:center; gap:8px; color:#ffb3b3;}
.emergency-strip svg{width:13px; height:13px; flex-shrink:0;}
.emergency-strip a{color:#ffb3b3; text-decoration:none; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px;}
.emergency-strip a:hover{color:#fff;}

.locale-switch{display:flex; gap:2px;}
.locale-switch a{
  color:var(--text-faint); text-decoration:none; transition:color var(--dur-fast);
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
}
.locale-switch a.active{color:var(--text);}
.locale-switch a:hover{color:var(--text);}

@media(max-width:520px){
  .utility-bar .inner{padding:0 8px 0 16px;}
  .emergency-strip .label-long{display:none;}
}

/* ---------- Navbar ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
}
/* The scrolled backdrop lives on its own layer and only fades, so scrolling
   past the top never re-runs the blur or moves the page under the header. */
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(9,9,9,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
  opacity:0; transition:opacity var(--dur-base) ease;
}
/* Keep the header (and its close button) above the open overlay menu */
.site-header:has(.menu-toggle.open){z-index:250;}
.site-header.scrolled::before{opacity:1;}
.site-header nav{
  padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1360px; margin:0 auto;
}
/* The lockup is two lines (YELLOW / IOT), so it is sized by height. */
.logo{display:flex; align-items:center; min-height:44px; text-decoration:none; flex-shrink:0;}
.logo img{display:block; height:40px; width:auto; transform-origin:left center; transition:transform var(--dur-base) var(--ease-out);}
.site-header.scrolled .logo img{transform:scale(.85);}

.nav-cta{display:flex; align-items:center; gap:16px;}
.menu-toggle{
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; z-index:210;
  transition:border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.menu-toggle:hover{border-color:var(--border-strong);}
.menu-toggle:active{transform:scale(.97);}
.menu-toggle .bars{width:16px; display:flex; flex-direction:column; gap:4px;}
.menu-toggle .bars span{height:1.5px; background:var(--text); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease;}
.menu-toggle .bars span:nth-child(2){width:70%; align-self:flex-end;}
.menu-toggle.open .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg); width:100%;}
.menu-toggle.open .bars span:nth-child(2){opacity:0;}
.menu-toggle.open .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg); width:100%;}

.nav-cta{gap:12px;}
.nav-cta .btn-primary, .nav-cta .btn-ghost{min-height:44px;}
.nav-call svg{width:16px; height:16px;}
@media(max-width:760px){ .nav-cta .nav-book{display:none;} }
@media(max-width:520px){
  .site-header nav{padding-left:16px; padding-right:16px;}
  .nav-cta{gap:10px;}
  .nav-cta .btn-primary{padding:11px 16px;}
  .nav-call .label-long{display:none;}
}
@media(min-width:521px){ .nav-call .label-short{display:none;} }

/* ---------- Fullscreen overlay nav ---------- */
.overlay-nav{
  position:fixed; inset:0; z-index:200;
  background:rgba(9,9,9,0.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-fast) ease, visibility var(--dur-fast);
}
.overlay-nav.open{opacity:1; visibility:visible; transition:opacity 200ms ease, visibility 0s;}
.overlay-nav ul{list-style:none; text-align:center;}
.overlay-nav li{margin:4px 0; overflow:hidden;}
.overlay-nav ul a{
  display:inline-block;
  color:var(--text-soft); text-decoration:none;
  font-family:var(--font-display); font-size:clamp(2rem, 5vw, 3.2rem); font-weight:700; font-stretch:95%; letter-spacing:-0.015em;
  transition:color var(--dur-base) ease, transform 300ms var(--ease-out);
  transform:translateY(105%);
}
.overlay-nav.open ul a{transform:translateY(0);}
.overlay-nav ul a:hover{color:var(--accent);}
.overlay-nav li:nth-child(2) a{transition-delay:0s, 30ms;}
.overlay-nav li:nth-child(3) a{transition-delay:0s, 60ms;}
.overlay-nav li:nth-child(4) a{transition-delay:0s, 90ms;}
.overlay-nav li:nth-child(5) a{transition-delay:0s, 120ms;}
.overlay-nav li:nth-child(6) a{transition-delay:0s, 150ms;}
.overlay-nav li:nth-child(7) a{transition-delay:0s, 180ms;}
.overlay-nav .locale-switch{font-size:14px; letter-spacing:.04em;}

/* ---------- Section rail ---------- */
.section-rail{
  position:fixed; right:28px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) ease;
}
.section-rail.visible{opacity:1; pointer-events:auto;}
.section-rail a{display:flex; align-items:center; justify-content:center; width:24px; height:24px;}
.section-rail .dot{
  width:7px; height:7px; border-radius:50%; background:var(--border-strong);
  transition:background var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.section-rail a:hover .dot{background:var(--text-soft);}
.section-rail a.active .dot{background:var(--accent); transform:scale(1.3);}
@media(max-width:900px){ .section-rail{display:none;} }

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--accent); color:#0a0a0a; border:none; text-decoration:none;
  padding:12px 22px; border-radius:12px; font-weight:600; font-size:var(--fs-small);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) ease, opacity var(--dur-base) ease, background var(--dur-base) ease;
}
@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,0,0,.9);}
  .btn-primary:hover svg{transform:translateX(3px);}
}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-primary svg{transition:transform var(--dur-base) var(--ease-out); flex-shrink:0;}
.btn-primary:disabled{opacity:.6; cursor:progress; transform:none; box-shadow:none;}
.btn-primary svg{width:16px; height:16px;}
.btn-ghost{
  background:transparent; color:var(--text); text-decoration:none;
  border:1px solid var(--border-strong); border-radius:12px;
  padding:11px 20px; font-weight:600; font-size:var(--fs-small);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.03);}
.btn-ghost:active{transform:scale(.98);}
.btn-ghost svg{width:15px; height:15px; transition:transform var(--dur-base) var(--ease-out);}
@media (hover: hover) and (pointer: fine){ .btn-ghost:hover svg{transform:translateX(3px);} }
.btn-lg{min-height:54px; padding:15px 26px; font-size:var(--fs-body); border-radius:14px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:calc(88vh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:72px 32px 88px;
  text-align:center;
  overflow:hidden;
}
/* The grid is the circuit board the power-on trace is routed on. */
.grid-bg{
  position:absolute; inset:-40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:56px 56px;
  z-index:0;
}
.grid-fade{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% 40%, transparent 0%, var(--bg) 78%);
}
.circuit{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.circuit .trace-base{fill:none; stroke:rgb(var(--accent-rgb) / .32); stroke-width:1.5;}
.circuit .trace-head{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; opacity:0;}
.circuit .node{fill:var(--bg); stroke:rgb(var(--accent-rgb) / .45); stroke-width:1.5; transition:fill .3s ease, stroke .3s ease;}
.circuit .node.lit{fill:var(--accent); stroke:var(--accent);}

.hero h1{
  position:relative; z-index:1;
  font-size:var(--fs-display);
  font-weight:800; font-stretch:92%; line-height:1.02; letter-spacing:-0.025em;
  max-width:19em;
}
.hero h1 .accent{color:var(--accent);}
/* Power-on: the accent starts cold and filaments up when the trace arrives. */
.power-boot .hero h1 .accent{color:var(--accent-cold);}
.hero h1 .accent.powered{animation:filament .5s linear both;}
@keyframes filament{
  0%{color:var(--accent-cold);}
  25%{color:#c97d18;}
  40%{color:#925f13;}
  65%{color:var(--accent);}
  80%{color:#de8c1b;}
  100%{color:var(--accent);}
}
.hero p.sub{
  position:relative; z-index:1;
  margin-top:24px; max-width:34em;
  color:var(--text-soft); font-size:var(--fs-lead); line-height:1.6;
}
/* Hero actions: the power-on trace ends on these two buttons. */
.hero-actions{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
  margin-top:48px;
}
.hero-actions .energized{animation:energize 1.1s var(--ease-out);}
@keyframes energize{
  0%{outline:2px solid var(--accent); outline-offset:8px;}
  100%{outline:2px solid transparent; outline-offset:2px;}
}
.hero-promise{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-size:var(--fs-small); color:var(--text-soft);
}
.hero-promise svg{width:16px; height:16px; stroke:var(--accent); flex-shrink:0;}
.hero-business{
  position:relative; z-index:1;
  display:inline-block; margin-top:6px; padding:12px 0; text-wrap:balance;
  font-size:var(--fs-small); color:var(--text-faint); text-decoration:none;
  transition:color var(--dur-fast) ease;
}
.hero-business:hover{color:var(--text);}
.hero-business svg{width:14px; height:14px; display:inline; vertical-align:-2px; margin-left:4px;}
@media(max-width:560px){
  .hero-actions{flex-direction:column; align-self:stretch; gap:12px; margin-top:36px;}
  .hero-actions .btn-lg{width:100%;}
  .hero-promise{text-align:left;}
}
@media(max-width:520px){
  .hero{padding:52px 16px 56px;}
  .hero h1 br{display:none;}
  /* Narrower Archivo width keeps long place names (Gyergyószentmiklóson) on one line */
  .hero h1{font-size:clamp(2.1rem, 1.3rem + 4vw, 2.6rem); font-stretch:78%; overflow-wrap:break-word;}
  .hero p.sub{font-size:var(--fs-body);}
}

/* Icon sits beside the title, not boxed above it */
.card-title{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.card-title svg{width:22px; height:22px; stroke:var(--accent); flex-shrink:0;}
.card-title h3{font-size:var(--fs-title); font-weight:700; font-stretch:96%; line-height:1.2; letter-spacing:-0.01em;}

/* ---------- Staggered entrance for card groups (opt-in by JS, never hides content without it) ---------- */
.reveal-pending > *{opacity:0; transform:translateY(14px);}
.reveal-pending.reveal-in > *{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:calc(min(var(--i, 0), 4) * 70ms);
}

/* ---------- Section heads ---------- */
.res-head{max-width:640px; margin-bottom:56px;}
.res-head h2{font-size:var(--fs-section); font-weight:750; font-stretch:94%; line-height:1.06; letter-spacing:-0.02em;}
.res-head p{color:var(--text-soft); margin-top:18px; line-height:1.65; font-size:var(--fs-body); max-width:36em;}

/* ---------- Residential / Industrial feature grid ---------- */
.residential, .industrial, .how{max-width:1200px; margin:0 auto; padding:140px 32px;}
.industrial{padding-top:0; padding-bottom:160px;}
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.feature-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  transition:border-color var(--dur-base) ease, background var(--dur-base) ease;
}
.feature-card:hover{border-color:rgb(var(--accent-rgb) / .55); background:var(--card-2);}
.feature-visual{height:260px; position:relative; overflow:hidden;}
.feature-visual img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 300ms var(--ease-out);
  filter:brightness(0.94);
}

/* Placeholder visual, used until a real photo exists in app/assets/images */
.visual-placeholder{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transition:transform 300ms var(--ease-out);
}
.visual-placeholder::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.visual-placeholder svg{position:relative; z-index:1; width:44px; height:44px; stroke:rgba(255,255,255,.35);}
@media (hover: hover) and (pointer: fine){
  .feature-card:hover .feature-visual img, .feature-card:hover .visual-placeholder{transform:scale(1.03);}
}
.visual-res{background:radial-gradient(120% 130% at var(--gx, 30%) 20%, #3a2f0d 0%, #17130a 60%, #0c0c0c 100%);}
.visual-ind{background:radial-gradient(120% 130% at var(--gx, 70%) 20%, #1c2226 0%, #14171a 60%, #0c0c0c 100%);}

.feature-body{padding:28px 32px 32px;}
.feature-body p{font-size:var(--fs-card); color:var(--text-soft); line-height:1.65; max-width:34em;}
.feature-tags{margin-top:20px; display:flex; gap:8px; flex-wrap:wrap;}
.feature-grid.compact{gap:16px;}
.feature-grid.compact .feature-card{border-radius:var(--radius);}
.feature-grid.compact .feature-body{padding:24px 26px 26px;}
.section-cta{margin-top:32px; min-height:48px;}

/* ---------- How a call-out works ---------- */
.how-steps{list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; counter-reset:none;}
.how-steps li{position:relative; border-top:1px solid var(--border-strong); padding-top:22px;}
/* The current reaches each step in turn: its rule draws, then its number lights. */
.how-steps li::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:rgb(var(--accent-rgb) / .6); transform-origin:left center;
}
.how-steps.reveal-pending li::before{transform:scaleX(0);}
.how-steps.reveal-pending .how-num{color:var(--accent-cold);}
.how-steps.reveal-in li::before{transform:none; transition:transform .45s var(--ease-out) calc(250ms + var(--i, 0) * 220ms);}
.how-steps.reveal-in .how-num{color:var(--accent); transition:color .3s ease calc(550ms + var(--i, 0) * 220ms);}
.how-num{
  display:block; font-family:var(--font-display); font-weight:800; font-stretch:110%;
  font-size:2.5rem; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; margin-bottom:18px;
}
.how-steps h3{font-size:var(--fs-title); font-weight:700; font-stretch:96%; letter-spacing:-0.01em;}
.how-steps p{margin-top:10px; color:var(--text-soft); font-size:var(--fs-card); line-height:1.65; max-width:30em;}
.inline-call{color:var(--text); font-weight:600; white-space:nowrap; text-decoration-color:var(--accent); text-decoration-thickness:1.5px;}
.inline-call:hover{color:var(--accent);}
@media(max-width:860px){ .how-steps{grid-template-columns:1fr; gap:28px;} }

@media(max-width:760px){
  .feature-grid{grid-template-columns:1fr;}
  .feature-visual{height:220px;}
}
@media(max-width:520px){
  .residential, .how{padding:100px 16px;}
  .industrial{padding:0 16px 110px;}
  .feature-body{padding:24px 22px 28px;}
}

.tag-chip{font-size:13px; padding:4px 10px; border-radius:100px; border:1px solid var(--border-strong); color:var(--text-faint); line-height:1.4;}

/* ---------- Emergency Intervention ---------- */
.emergency{
  position:relative;
  padding:150px 32px 130px;
  text-align:center;
  overflow:hidden;
  background:#050505;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.emergency-glow{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 55% 45% at 50% 38%, rgba(255,68,51,0.12) 0%, transparent 70%);
}
.emergency-inner{position:relative; z-index:1; max-width:760px; margin:0 auto;}
.emergency-big{
  font-family:var(--font-display);
  font-size:clamp(2.7rem, 1.4rem + 6.6vw, 6rem);
  font-weight:800; font-stretch:118%; letter-spacing:-0.02em; line-height:.95;
  color:var(--red);
}
.emergency h2{margin-top:26px; font-size:clamp(1.45rem, 1.1rem + 1.4vw, 2rem); font-weight:700; font-stretch:96%; letter-spacing:-0.01em;}
.emergency p.sub{margin:14px auto 0; color:var(--text-soft); font-size:var(--fs-body); line-height:1.65; max-width:32em;}
.emergency-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
  margin-top:40px;
}
.btn-call{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red-solid); color:#fff; text-decoration:none;
  padding:16px 28px; border-radius:14px; font-weight:700; font-size:var(--fs-body);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base) ease;
}
.btn-call:hover{background:#c42817;}
@media (hover: hover) and (pointer: fine){ .btn-call:hover{transform:translateY(-1px);} }
.btn-call:active{transform:scale(.98);}
.btn-call svg{width:18px; height:18px;}
.btn-callback{
  background:transparent; color:#fff;
  border:1px solid var(--border-strong);
  padding:16px 26px; border-radius:14px; font-weight:600; font-size:var(--fs-body);
  cursor:pointer; transition:border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.btn-callback:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.03);}
.btn-callback:active{transform:scale(.98);}
.emergency-stats{
  display:flex; justify-content:center; gap:44px;
  margin-top:64px; padding-top:36px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.emergency-stats .stat strong{display:block; font-family:var(--font-display); font-size:1.0625rem; font-weight:700; margin-bottom:4px;}
.emergency-stats .stat span{font-size:var(--fs-meta); color:var(--text-faint);}
@media(max-width:520px){
  .emergency{padding:110px 16px 100px;}
  .emergency-big{font-stretch:104%;}
  .btn-call, .btn-callback{width:100%; justify-content:center;}
  .emergency-stats{flex-direction:column; gap:0; padding-top:8px;}
  .emergency-stats .stat{padding:16px 0; border-bottom:1px solid var(--border);}
  .emergency-stats .stat:last-child{border-bottom:none;}
}

/* ---------- Loxone Partner ---------- */
.loxone{
  position:relative;
  padding:140px 32px;
  overflow:hidden;
  background:#070907;
  border-bottom:1px solid var(--border);
}
.loxone-glow{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 50% 55% at 15% 50%, rgba(116,195,101,0.12) 0%, transparent 70%);
}
.loxone-inner{
  position:relative; z-index:1; max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:center;
}
.loxone-badge{display:flex; align-items:center; justify-content:center;}
.badge-ring{
  position:relative;
  width:220px; height:220px; border-radius:50%;
  border:1px solid rgba(116,195,101,0.35);
  display:flex; align-items:center; justify-content:center;
}
.badge-ring::before{
  content:''; position:absolute; inset:14px; border-radius:50%;
  border:1px dashed rgba(116,195,101,0.3);
}
.badge-core{
  width:150px; height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center;
}
.badge-core svg{width:26px; height:26px; stroke:var(--lox-green);}
.badge-core .wordmark{font-family:var(--font-display); font-size:15px; font-weight:800; font-stretch:115%; letter-spacing:.04em; margin-top:4px;}
.badge-core .subtext{font-size:12px; letter-spacing:.08em; color:var(--lox-green); text-transform:uppercase; font-weight:600;}
.loxone-content h2{font-size:clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem); font-weight:750; font-stretch:94%; line-height:1.08; letter-spacing:-0.015em; max-width:16em;}
.loxone-content p.sub{margin-top:18px; color:var(--text-soft); font-size:var(--fs-body); line-height:1.7; max-width:34em;}
.loxone-points{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.loxone-points li{display:flex; align-items:flex-start; gap:12px; font-size:var(--fs-card); color:var(--text-soft); line-height:1.5;}
.loxone-points svg{width:16px; height:16px; stroke:var(--lox-green); flex-shrink:0; margin-top:3px;}
.btn-loxone{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:34px; padding:13px 24px; border-radius:12px;
  background:transparent; border:1px solid rgba(116,195,101,0.4); color:#fff;
  text-decoration:none; font-weight:600; font-size:var(--fs-small); font-family:inherit; cursor:pointer; min-height:48px;
  transition:border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.btn-loxone:hover{border-color:var(--lox-green); background:rgba(116,195,101,0.08);}
.btn-loxone:active{transform:scale(.98);}
.btn-loxone svg{width:15px; height:15px; transition:transform var(--dur-base) var(--ease-out);}
@media (hover: hover) and (pointer: fine){
  .btn-loxone:hover{transform:translateY(-1px);}
  .btn-loxone:hover svg{transform:translateX(3px);}
}
@media(max-width:760px){
  .loxone{padding:110px 16px;}
  .loxone-inner{grid-template-columns:1fr; text-align:center; gap:36px;}
  .loxone-content h2, .loxone-content p.sub{margin-left:auto; margin-right:auto;}
  .loxone-points{align-items:center;}
  .loxone-points li{text-align:left;}
}

/* ---------- Projects carousel ---------- */
.projects{max-width:1200px; margin:0 auto; padding:150px 32px 160px;}
.proj-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:44px; flex-wrap:wrap;
}
.proj-head .res-head{margin-bottom:0;}
.carousel-nav{display:flex; gap:10px;}
.carousel-nav button{
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color var(--dur-base) ease, background var(--dur-base) ease, opacity var(--dur-base) ease, transform var(--dur-fast) var(--ease-out);
}
.carousel-nav button:hover:not(:disabled){border-color:var(--border-strong); background:var(--card-2);}
.carousel-nav button:active:not(:disabled){transform:scale(.97);}
.carousel-nav button:disabled{opacity:.35; cursor:default;}
.carousel-nav svg{width:16px; height:16px; stroke:var(--text);}
.carousel{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 10px; margin:-6px -2px 0;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.carousel::-webkit-scrollbar{display:none;}
.project-card{
  flex:0 0 320px; scroll-snap-align:start; cursor:pointer;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--card);
  text-align:left; padding:0; font:inherit; color:inherit;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
  transition:border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.project-card:hover, .project-card:focus-visible{border-color:var(--accent);}
.project-card:focus-visible{transform:translateY(-3px);}
@media (hover: hover) and (pointer: fine){ .project-card:hover{transform:translateY(-3px);} }
.project-visual{height:210px; flex-shrink:0; position:relative; overflow:hidden;}
.project-visual img{width:100%; height:100%; object-fit:cover;}
.project-meta{padding:18px 20px 22px;}
.project-meta h3{font-size:1.0625rem; font-weight:700; font-stretch:96%; line-height:1.25; letter-spacing:-0.005em;}
.project-meta .loc, .modal-content .loc{font-size:var(--fs-meta); color:var(--text-soft); margin-top:6px;}
.loc .seg{color:var(--accent); font-weight:600;}
.project-meta .tags{margin-top:14px; display:flex; gap:6px; flex-wrap:wrap;}
@media(max-width:600px){
  .projects{padding:110px 16px 120px;}
  .project-card{flex-basis:270px;}
}

/* ---------- Modals (project + contact) ---------- */
.modal{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,5,5,0.9); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.modal.open{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s;}
.modal-inner{
  position:relative;
  max-width:880px; width:100%; max-height:88vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--border-strong); border-radius:24px;
  transform:translateY(10px) scale(.985); transition:transform .2s ease;
  overscroll-behavior:contain;
}
.modal.open .modal-inner{transform:none; transition:transform .4s var(--ease-out);}
.modal-close{
  position:absolute; top:20px; right:20px; z-index:3;
  width:40px; height:40px; border-radius:10px;
  background:rgba(9,9,9,0.6); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.modal-close:hover{border-color:rgba(255,255,255,.4);}
.modal-close:active{transform:scale(.97);}
.modal-close svg{width:16px; height:16px; stroke:#fff;}

.modal-gallery{position:relative; height:340px; overflow:hidden; background:#0c0c0c;}
.modal-slide{position:absolute; inset:0; opacity:0; transition:opacity .35s ease;}
.modal-slide.active{opacity:1;}
.modal-slide img{width:100%; height:100%; object-fit:cover;}
.modal-slide .visual-placeholder svg{width:60px; height:60px; stroke:rgba(255,255,255,.3);}
.modal-slide .visual-placeholder::before{background-size:34px 34px;}
.modal-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:2px; z-index:2;}
.modal-dots button{width:24px; height:24px; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal-dots button::after{content:''; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);}
.modal-dots button.active::after{background:var(--accent); transform:scale(1.25);}
.modal-arrows{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; z-index:2; pointer-events:none;}
.modal-arrows button{
  pointer-events:auto; width:40px; height:40px; border-radius:50%;
  background:rgba(9,9,9,0.55); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out);
}
.modal-arrows button:active{transform:scale(.97);}
.modal-arrows svg{width:16px; height:16px; stroke:#fff;}
.modal-content{padding:36px 40px 44px;}
.modal-content h2{font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight:750; font-stretch:95%; line-height:1.1; letter-spacing:-0.015em; padding-right:44px;}
.modal-content p.desc{margin-top:20px; color:var(--text-soft); font-size:var(--fs-body); line-height:1.7; max-width:38em;}
.modal-content .tags{margin-top:22px; display:flex; gap:8px; flex-wrap:wrap;}
.modal-content .modal-actions{margin-top:30px;}
.project-modal .modal-content h2{padding-right:0;}
@media(max-width:600px){
  .modal{padding:12px;}
  .modal-gallery{height:220px;}
  .modal-content{padding:28px 22px 34px;}
}

/* Contact form modal */
.contact-modal .modal-inner{max-width:560px;}
.contact-modal .modal-content{padding:40px;}
.contact-modal .lead{margin-top:12px; color:var(--text-soft); font-size:var(--fs-card); line-height:1.6;}
.contact-modal.is-callback .contact-form .btn-primary{background:var(--red-solid); color:#fff;}
.modal-call{width:100%; justify-content:center; margin-top:20px; text-align:center; gap:12px;}
.modal-call svg{width:20px; height:20px; flex-shrink:0;}
.form-alert .inline-call{display:inline-block; margin-top:4px; color:#fff;}
.form-success .fallback{margin-top:16px; font-size:var(--fs-small); color:var(--text-faint);}
.contact-form{margin-top:26px; display:flex; flex-direction:column; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:var(--fs-meta); font-weight:600; color:var(--text-soft); letter-spacing:.01em;}
.field label .optional{color:var(--text-faint); font-weight:400;}
.field input, .field textarea, .field select{
  width:100%; font:inherit; font-size:var(--fs-body); color:var(--text);
  background:var(--card-2); border:1px solid var(--border-strong); border-radius:12px;
  padding:12px 14px; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field input::placeholder, .field textarea::placeholder{color:var(--text-faint);}
.field textarea{resize:vertical; min-height:96px;}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .15);
}
.field.has-error input, .field.has-error textarea{border-color:var(--red);}
.field .error{font-size:var(--fs-meta); color:var(--red-soft); animation:error-in .2s var(--ease-out);}
@keyframes error-in{from{opacity:0; transform:translateY(-3px);}}
.segment-picker{border:none; min-width:0;}
.segment-picker legend{font-size:var(--fs-meta); font-weight:600; color:var(--text-soft); margin-bottom:7px; letter-spacing:.01em;}
.segment-picker .options{display:flex; flex-wrap:wrap; gap:10px;}
.segment-picker label{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:12px 8px; border:1px solid var(--border-strong); border-radius:12px;
  font-size:var(--fs-small); color:var(--text-soft); cursor:pointer;
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.segment-picker label:active{transform:scale(.97);}
.segment-picker input{position:absolute; opacity:0; pointer-events:none;}
.segment-picker input:checked + span{color:var(--text);}
.segment-picker label:has(input:checked){border-color:var(--accent); background:rgb(var(--accent-rgb) / .06); color:var(--text);}
.segment-picker label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
.contact-form .btn-primary{margin-top:6px; padding:15px 22px; font-size:var(--fs-body); position:relative; overflow:hidden;}
/* While sending, a short current runs along the button's bottom edge. */
.contact-form .btn-primary[aria-busy="true"]{opacity:1; cursor:progress;}
.contact-form .btn-primary[aria-busy="true"]::after{
  content:''; position:absolute; left:0; bottom:0; width:28%; height:2px;
  background:rgba(10,10,10,.55); animation:send-current 1s cubic-bezier(.45,0,.55,1) infinite;
}
.contact-modal.is-callback .contact-form .btn-primary[aria-busy="true"]::after{background:rgba(255,255,255,.75);}
@keyframes send-current{from{transform:translateX(-100%);} to{transform:translateX(360%);}}
.contact-form .fineprint{font-size:12.5px; color:var(--text-faint); line-height:1.6;}
.form-alert{
  margin-top:20px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,68,51,.35); background:rgba(255,68,51,.07);
  color:#ffb3b3; font-size:var(--fs-small);
}
.form-success{text-align:center; padding:12px 0 4px; animation:success-in .45s var(--ease-out) both;}
@keyframes success-in{from{opacity:0; transform:translateY(8px);}}
.form-success .check{
  width:56px; height:56px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--accent-dim); background:rgb(var(--accent-rgb) / .08);
}
.form-success .check svg{width:24px; height:24px; stroke:var(--accent);}
.form-success .check svg path{stroke-dasharray:24; animation:draw-check .5s .12s var(--ease-out) both;}
@keyframes draw-check{from{stroke-dashoffset:24;} to{stroke-dashoffset:0;}}
.form-success h2{padding-right:0;}
.form-success p{margin-top:12px; color:var(--text-soft); font-size:var(--fs-card); line-height:1.65;}
.form-success .btn-callback{margin-top:26px;}
@media(max-width:520px){
  .contact-modal .modal-content{padding:32px 22px 28px;}
  .form-row{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
footer{background:#050505; border-top:1px solid var(--border);}
.footer-inner{max-width:1200px; margin:0 auto; padding:0 32px;}

/* Tier 1: the closing call */
.footer-call{
  display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
  padding:64px 0 56px; border-bottom:1px solid var(--border);
}
.footer-phone{
  font-family:var(--font-display); font-weight:800; font-stretch:105%;
  font-size:clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height:1; letter-spacing:-0.02em;
  color:var(--accent); text-decoration:none; white-space:nowrap;
  transition:color var(--dur-fast) ease;
}
.footer-phone:hover{color:#fff;}
.footer-phone-note{margin-top:12px; font-size:var(--fs-small); color:var(--text-soft);}

/* Tier 2: who, how to reach, where to go */
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;
  padding:52px 0 56px;
}
.footer-brand .flogo img{display:block; height:52px; width:auto;}
.footer-brand p{color:var(--text-soft); font-size:var(--fs-small); line-height:1.7; margin-top:14px; max-width:32ch;}
.footer-certs{list-style:none; display:flex; gap:8px; margin-top:22px; flex-wrap:wrap;}
.cert-badge{
  display:flex; align-items:center; gap:7px;
  padding:7px 12px; border:1px solid var(--border-strong); border-radius:100px;
  font-size:13px; color:var(--text-soft);
}
.cert-badge svg{width:13px; height:13px; stroke:var(--accent);}
.footer-social{display:flex; gap:8px; margin-top:20px;}
.footer-social a{
  width:44px; height:44px; border-radius:10px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition:border-color var(--dur-fast) ease;
}
.footer-social a:hover{border-color:var(--accent);}
.footer-social svg{width:15px; height:15px; stroke:var(--text-soft);}
.footer-col .footer-title{
  font-size:var(--fs-small); font-weight:700; font-stretch:105%; letter-spacing:.01em;
  color:var(--text); margin-bottom:12px;
}
.footer-col ul{list-style:none; display:flex; flex-direction:column;}
.footer-col li a{
  display:inline-flex; align-items:center; min-height:36px;
  color:var(--text-soft); text-decoration:none; font-size:var(--fs-small); transition:color var(--dur-fast) ease;
}
.footer-col li a:hover{color:var(--accent);}
.footer-contact ul{gap:14px;}
.footer-contact li{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-small); color:var(--text-soft); line-height:1.55;}
.footer-contact li a{min-height:24px;}
.footer-contact svg{width:15px; height:15px; stroke:var(--accent); flex-shrink:0; margin-top:3px;}
.footer-contact address{font-style:normal;}
.footer-contact .address-note{color:var(--text-faint); font-size:var(--fs-meta);}

/* Tier 3: fine print */
.footer-bottom{
  border-top:1px solid var(--border);
  padding:12px 0 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 20px;
  font-size:var(--fs-meta); color:var(--text-faint);
}
.footer-bottom .legal-links{display:flex; gap:20px; flex-wrap:wrap; margin-right:auto;}
.footer-bottom .legal-links a{display:inline-flex; align-items:center; min-height:44px; color:var(--text-faint); text-decoration:none; transition:color var(--dur-fast) ease;}
.footer-bottom .legal-links a:hover{color:var(--text-soft);}
.footer-bottom .locale-switch{margin-right:-12px;}
.footer-bottom .locale-switch a.active{color:var(--text);}
@media(max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:40px 32px;}
  .footer-brand{grid-column:1/-1;}
}
@media(max-width:520px){
  .footer-inner{padding:0 16px;}
  .footer-call{padding:48px 0 40px;}
  .footer-call .btn-ghost{width:100%;}
  .footer-grid{grid-template-columns:1fr; padding:40px 0;}
}

/* Buttons that read as links (footer, legal pages) */
button.link{
  background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:.2em;
}
button.link:hover{color:var(--accent); text-decoration-color:currentColor;}
.footer-bottom button.link{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--text-faint);}
.footer-bottom button.link:hover{color:var(--text-soft);}

/* ---------- Legal pages (Read mode) ---------- */
.legal{padding:96px 32px 120px;}
.legal-doc{max-width:60ch; margin:0 auto;}
.legal-doc h1{font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3rem); font-weight:800; font-stretch:94%; letter-spacing:-0.02em; line-height:1.05;}
.legal-meta{margin-top:12px; font-size:var(--fs-meta); color:var(--text-faint);}
.legal-lead{margin-top:24px; font-size:var(--fs-lead); color:var(--text); line-height:1.6;}
.legal-doc h2{margin-top:52px; font-size:1.375rem; font-weight:700; font-stretch:96%; letter-spacing:-0.01em;}
.legal-doc h3{margin-top:28px; font-size:1.0625rem; font-weight:700;}
.legal-doc p{margin-top:12px; color:var(--text-soft); line-height:1.7;}
.legal-doc a{color:var(--text); text-decoration-color:var(--accent);}
.legal-doc a:hover{color:var(--accent);}
.legal-doc .btn-ghost{margin-top:18px;}
.legal-foot{margin-top:48px !important; padding-top:24px; border-top:1px solid var(--border);}
.legal-table{margin-top:18px; overflow-x:auto;}
.legal-table table{width:100%; border-collapse:collapse; font-size:var(--fs-small); min-width:560px;}
.legal-table th{text-align:left; font-weight:600; color:var(--text); padding:10px 14px 10px 0; border-bottom:1px solid var(--border-strong);}
.legal-table td{vertical-align:top; padding:12px 14px 12px 0; border-bottom:1px solid var(--border); color:var(--text-soft); line-height:1.5;}
.legal-table code{font-size:.92em; color:var(--text); white-space:nowrap;}
mark.to-complete{background:rgb(var(--accent-rgb) / .14); color:var(--accent); padding:0 4px; border-radius:4px;}
@media(max-width:520px){ .legal{padding:64px 16px 96px;} }

/* ---------- Page transitions (Turbo + View Transitions API) ---------- */
.utility-bar{view-transition-name:utility-bar;}
.site-header{view-transition-name:site-header;}
::view-transition-old(root){animation:vt-out .16s ease both;}
::view-transition-new(root){animation:vt-in .26s var(--ease-out) both;}
@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0; transform:translateY(6px);}}

/* ---------- Reduced motion: keep state changes, drop travel ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-delay:0s !important;}
  /* Fades and colour changes stay (they explain state); anything that travels or scales snaps. */
  *, *::before, *::after{transition-property:opacity, color, background-color, border-color, fill, stroke, visibility !important;}
  .reveal-pending > *{opacity:1; transform:none;}
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important;}
  .contact-form .btn-primary[aria-busy="true"]::after{animation:none; width:100%; opacity:.5;}
  .project-card:hover, .project-card:focus-visible, .btn-primary:hover, .site-header.scrolled .logo img{transform:none;}
}