/* ============================================================
   VOLTTERRA — shared stylesheet
   ============================================================ */
:root{
  --cream:#F6F1E7;
  --cream-warm:#FFF4DC;
  /* Background family — deep slate blues sampled from the Home turbine
     footage (#66A9FB sky, #38609A deep sky), darkened for the dark theme. */
  --ink:#4E83C0;
  --ink-2:#5A90CC;
  --ink-3:#699BD4;
  --sky:#66A9FB;
  --sky-soft:#A0CAFC;
  --sky-deep:#38609A;
  /* Former sage accents — re-pointed to a warm sand-gold that reads as
     sunlight against the new sky-blue theme (all shine gradients, the
     Home headline, ANRE codes, wind widget etc. inherit automatically). */
  --sage:#E5CFA3;
  --sage-deep:#C2A36B;
  --emerald:#0E5C44;
  --coral:#E66A4A;
  --coral-soft:#F2A88C;
  --sand:#D9C5A0;
  --sea:#1F6F7A;
  --line-light:rgba(255,255,255,0.14);
  --line-lighter:rgba(255,255,255,0.08);
  --line-stronger:rgba(255,255,255,0.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Always reserve scrollbar space so the nav and centered content stay
   in the exact same horizontal position regardless of whether the page
   has overflow. Home is 100vh and would otherwise have no scrollbar,
   making centered content shift ~8px vs. inner pages with scrollbars. */
html{scroll-behavior:smooth;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}

/* ============================================================
   FONTS — SYSTEM-ONLY
   Zero web fonts. The entire site renders with fonts that exist on
   every Windows/Mac/Linux out of the box, so there's no download
   delay, no swap, no FOUT, no different appearance between pages.
   "serif" = Georgia / Times New Roman (used for headlines + logo).
   "sans"  = system-ui / Segoe UI / Arial (everything else).
   ============================================================ */
body{
  background:var(--ink);color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:400}
.caps{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--coral-soft)}
.container{max-width:1280px;margin:0 auto;padding:0 28px}
@media (max-width:780px){.container{padding:0 18px}}
a{color:inherit;text-decoration:none}

/* ============================================================
   HERO (home only)
   The hero is a flex column so the in-flow header takes its natural
   height at the top and .hero-content fills the remaining space.
   This matches the inner-page layout exactly, so the "Constanța"
   intro line lands at the same Y position on every page. The video
   and overlays stay position:absolute and span the whole .hero.
   ============================================================ */
.hero{position:relative;width:100%;height:100vh;min-height:680px;overflow:hidden;background:var(--ink);display:flex;flex-direction:column}

/* Home hero video — the wind turbine footage stays mostly natural; a coral
   wash on the left/right edges ties it to the site's coral accents while the
   center (where the turbines read) stays clear. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  /* scale up slightly so the clip's own dark edge columns crop off-screen;
     saturate + dim deepens the sky toward the site's deep-blue theme. */
  transform:scale(1.04);
  filter:saturate(1.18) brightness(0.95) contrast(1.03);
}
/* Layer 1 — light blue theme wash so the video reads in the site's blue
   mood without going dark (gentle multiply, stronger only at top/bottom). */
.hero::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(34,64,99,0.4) 0%, rgba(46,90,146,0.12) 32%, rgba(46,90,146,0.12) 68%, rgba(34,64,99,0.42) 100%);
  mix-blend-mode:multiply;
}
/* Layer 2 — coral wash on the left/right edges, kept on top of the blue. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(60% 110% at -10% 50%, rgba(230,106,74,0.6) 0%, transparent 72%),
    radial-gradient(60% 110% at 110% 50%, rgba(230,106,74,0.6) 0%, transparent 72%);
  mix-blend-mode:overlay;
}

/* ----- TIME-DRIVEN SKY OVERLAY -----
   CSS variables driven by script.js based on the current Bucharest hour.
   The .sky-overlay paints a top→bottom sky gradient over the video using
   soft-light blend so the eolian video still reads through but takes the
   sky color of the moment (deep ink at night, coral at sunset, etc.).
   The .sky-glow is an optional warm radial that warms one corner during
   golden-hour and sunset windows. */
:root{
  --sky-top:#0F1A18;
  --sky-bot:#1B3A33;
  --sky-glow:rgba(58,107,168,0.3);
  --sky-strength:0.7;
}
/* Sky overlay + glow disabled — eolian video shows in its natural colors. */
.hero .sky-overlay,
.hero .sky-glow{display:none}

/* Light scrim — preserves text legibility against bright sky frames.
   Top fades to transparent so the eolian shows; bottom darkens slightly. */
/* Scrim tinted with the site's deep-sage ink (not black) so the bottom of
   the Home hero melts into the same base color the inner pages start from. */
.hero-scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(58,107,168,0.45) 0%, transparent 28%, transparent 60%, rgba(58,107,168,0.82) 100%);
}
.hero-content{position:relative;z-index:10;display:flex;flex-direction:column;flex:1;width:100%;max-width:1280px;margin:0 auto;padding:0 28px 32px}

/* ============================================================
   PAGE-HERO — used on inner pages instead of the video hero
   ============================================================ */
.page-hero{
  position:relative;padding:0 0 18px;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(230,106,74,0.15) 0%, transparent 55%),
    radial-gradient(100% 80% at 0% 0%, rgba(102,169,251,0.12) 0%, transparent 50%),
    linear-gradient(180deg,#000 0%,var(--ink) 100%);
  border-bottom:1px solid var(--line-lighter);
  overflow:hidden;
}

/* ============================================================
   WAVE BACKGROUND (About + Process pages)
   The DesignPro CloudFront video, recolored to Voltterra deep sage
   with a coral mix-blend overlay. Lives on a .wave-frame wrapper that
   spans BOTH the page-hero and the first content block — so the wave
   reads as one continuous background under both sections.
   .wave-left mirrors the wave horizontally (Process page).
   ============================================================ */
.wave-frame{
  position:relative;
  overflow:hidden;
  background:var(--ink);
}
.wave-frame .wave-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  /* The wave keeps its natural blues — same family as the Home turbine
     clip. Saturation/brightness pulled down for the dark-theme mood. */
  /* warm the wave toward coral: sepia injects warmth, hue-rotate aims it
     at coral-orange, saturate brings the tint up. */
  filter:saturate(1) brightness(0.85) contrast(1.05) sepia(0.7) hue-rotate(-28deg);
  opacity:0.9;
  pointer-events:none;
}
.wave-frame.wave-left .wave-video{transform:scaleX(-1)}

/* Coral wash — sits ABOVE the video so mix-blend-mode has the wave to
   blend WITH. overlay mode is stronger than soft-light and pushes warm
   highlights into the sage crests of the wave. */
.wave-frame::before{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(75% 55% at 75% 18%, rgba(230,106,74,0.95) 0%, transparent 65%),
    radial-gradient(60% 40% at 20% 55%, rgba(242,168,140,0.75) 0%, transparent 70%),
    radial-gradient(65% 45% at 80% 80%, rgba(230,106,74,0.7) 0%, transparent 68%),
    linear-gradient(135deg, rgba(230,106,74,0.45) 0%, transparent 48%, rgba(230,106,74,0.55) 100%);
  mix-blend-mode:overlay;
}
.wave-frame.wave-left::before{
  background:
    radial-gradient(70% 50% at 25% 18%, rgba(230,106,74,0.7) 0%, transparent 60%),
    radial-gradient(55% 35% at 80% 55%, rgba(242,168,140,0.45) 0%, transparent 65%),
    radial-gradient(60% 40% at 20% 80%, rgba(230,106,74,0.4) 0%, transparent 65%),
    linear-gradient(225deg, rgba(230,106,74,0.22) 0%, transparent 45%, rgba(230,106,74,0.28) 100%);
}

/* Scrim — sits ON TOP of the video + coral wash, darkening overall so
   the white heading and lead text stay legible across the whole width.
   Slightly stronger at the very top (header area) and at the bottom
   border to ease the transition to the next-page strip. */
.wave-frame .wave-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(58,107,168,0.72) 0%,
      rgba(58,107,168,0.42) 18%,
      rgba(58,107,168,0.42) 80%,
      rgba(58,107,168,0.85) 100%
    ),
    radial-gradient(80% 60% at 50% 40%, rgba(102,169,251,0.05) 0%, transparent 70%);
}

/* Inside the wave frame, the page-hero and the first content block
   become TRANSPARENT so the wave shows through both. */
.wave-frame > .page-hero,
.wave-frame > section.block{
  position:relative;z-index:3;
  background:transparent;
  border-bottom:none;
}
.wave-frame > section.block.alt{background:transparent}

/* ============================================================
   SHINE BACKGROUND (Servicii / Proiecte / Contact)
   Same atmospheric vibe as .wave-frame but ZERO video — just two
   layers of large blurred radial gradients that drift slowly across
   the ink base. The sage layer is the base; the coral layer sits on
   top with mix-blend-mode:screen so it warms the highlights without
   muddying the sage. A subtle scrim above keeps text legible.
   .shine-left mirrors the drift direction for visual variety.
   ============================================================ */
.shine-frame{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* Darker than var(--ink) so the sky + coral gradients above
     pop with the same moodiness as the wave video on About/Process. */
  background:#4276B4;
}
.shine-frame::before,
.shine-frame::after{
  content:"";
  position:absolute;
  inset:-15%;
  pointer-events:none;
  will-change:transform;
  filter:blur(32px);
}
/* Sky drift — the turbine clip's blues drifting across the dark base */
.shine-frame::before{
  z-index:0;
  background:
    radial-gradient(38% 34% at 28% 30%, rgba(160,202,252,0.6), transparent 65%),
    radial-gradient(32% 28% at 78% 62%, rgba(160,202,252,0.45), transparent 70%),
    radial-gradient(26% 23% at 50% 88%, rgba(102,169,251,0.5), transparent 65%);
  animation:shine-drift-sage 18s ease-in-out infinite alternate;
}
/* Coral accent — warm highlights, screen blend lights up the sage where
   they overlap, giving that "sun on water" wave-like sparkle */
.shine-frame::after{
  z-index:1;
  mix-blend-mode:screen;
  background:
    radial-gradient(30% 28% at 70% 22%, rgba(230,106,74,0.65), transparent 65%),
    radial-gradient(26% 23% at 22% 68%, rgba(242,168,140,0.5), transparent 70%),
    radial-gradient(20% 18% at 85% 78%, rgba(230,106,74,0.45), transparent 65%);
  animation:shine-drift-coral 22s ease-in-out infinite alternate;
}
/* Mirrored variant (Proiecte) — reverse the drift direction */
.shine-frame.shine-left::before{animation-name:shine-drift-sage-mirror}
.shine-frame.shine-left::after{animation-name:shine-drift-coral-mirror}

@keyframes shine-drift-sage{
  0%   {transform:translate(-7%,-5%) scale(1)    rotate(0deg);}
  50%  {transform:translate(5%, 7%)  scale(1.12) rotate(60deg);}
  100% {transform:translate(-3%,9%)  scale(0.96) rotate(120deg);}
}
@keyframes shine-drift-coral{
  0%   {transform:translate(6%, 7%)  scale(1)    rotate(0deg);}
  50%  {transform:translate(-7%,-3%) scale(1.1)  rotate(-50deg);}
  100% {transform:translate(8%,-5%)  scale(0.92) rotate(-100deg);}
}
@keyframes shine-drift-sage-mirror{
  0%   {transform:translate(7%, -5%) scale(1)    rotate(0deg);}
  50%  {transform:translate(-5%,7%)  scale(1.12) rotate(-60deg);}
  100% {transform:translate(3%, 9%)  scale(0.96) rotate(-120deg);}
}
@keyframes shine-drift-coral-mirror{
  0%   {transform:translate(-6%,7%)  scale(1)    rotate(0deg);}
  50%  {transform:translate(7%, -3%) scale(1.1)  rotate(50deg);}
  100% {transform:translate(-8%,-5%) scale(0.92) rotate(100deg);}
}

/* Scrim — light in the middle so the drifting gradients stay vivid,
   slightly heavier at the top and bottom edges for clean transitions
   into the header and the .next-page strip. */
.shine-frame .shine-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(28,55,92,0.5) 0%,
      rgba(28,55,92,0.12) 22%,
      rgba(28,55,92,0.12) 78%,
      rgba(28,55,92,0.55)  100%
    );
}
/* Inside the shine frame, the page-hero and the first content block
   go transparent so the animated background shows through. */
.shine-frame > .page-hero,
.shine-frame > section.block{
  position:relative;z-index:3;
  background:transparent;
  border-bottom:none;
}
.shine-frame > section.block.alt{background:transparent}

@media (max-width:780px){
  .shine-frame::before,
  .shine-frame::after{filter:blur(24px)}
}

@media (max-width:980px){
  .wave-frame .wave-video{opacity:0.7}
  .wave-frame .wave-scrim{
    background:linear-gradient(180deg,
      rgba(58,107,168,0.78) 0%,
      rgba(58,107,168,0.65) 50%,
      rgba(58,107,168,0.85) 100%
    );
  }
}
.page-hero .page-intro{padding:18px 0 8px;text-align:left}
.page-hero .page-intro p{margin:0;color:rgba(255,255,255,0.82);font-size:14px;line-height:1.55}
.page-hero h1.page-title{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:400;
  font-size:clamp(40px,6.4vw,78px);
  line-height:1;letter-spacing:-0.035em;color:#fff;
  margin:12px 0 16px;max-width:1040px;
  /* allow tall italic descenders/ascenders to render without clipping */
  overflow-wrap:break-word;word-break:normal;
  padding-right:6px;
}
/* Reusable shine treatment for INNER PAGES — sage italic accents on
   About / Services / Process / Projects / Contact. Same continuous shine
   sweep as before, themed in sage (matches the home page line-shine). */
.shine-text,
.page-hero h1.page-title .accent,
h2.h2 .accent{
  font-style:italic;
  color:var(--sage);
  background-image:linear-gradient(
    100deg,
    var(--sage) 0%,
    var(--sage) 38%,
    var(--cream-warm) 50%,
    var(--sage) 62%,
    var(--sage) 100%
  );
  background-size:300% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shine 3.2s linear infinite;
  padding:0.02em 0.22em 0.06em 0.02em;
  margin-right:-0.18em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.page-hero p.page-lead{font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,0.82);max-width:820px}

/* ============================================================
   NAV — Brand (left) | NavPill (center) | Tools (right)
   ============================================================ */
.site-header{
  position:relative;z-index:20;
  max-width:1280px;margin:0 auto;padding:18px 28px 0;
}
/* Home header is in-flow inside the flex column hero — same as inner pages.
   z-index sits it above the absolute video/scrim layers. */
.hero .site-header{position:relative;z-index:20}
@media (max-width:780px){.site-header{padding:14px 18px 0}}

.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff;justify-self:start;cursor:default;user-select:none}
.brand-mark{width:42px;height:42px;display:block;flex-shrink:0;background:transparent;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4))}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
/* Nav + logo use ONLY system fonts (no web font) so they never swap or
   resize between page loads — these elements are common to every page and
   must look identical at all times. Georgia is on every Windows/Mac so the
   serif logo renders the same everywhere; system-ui covers the brand-tag. */
.brand-name{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:600;font-size:22px;letter-spacing:-0.02em;color:#fff}
.brand-tag{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--coral-soft);margin-top:2px}

.nav-pill{
  justify-self:center;
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--line-light);border-radius:999px;padding:4px;
  background:rgba(58,107,168,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav-pill a{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:rgba(255,255,255,0.82);font-size:13px;font-weight:500;padding:8px 14px;border-radius:999px;transition:all .2s}
.nav-pill a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.nav-pill a.is-active{background:rgba(255,255,255,0.1);color:#fff}
.nav-pill a.contact{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;font-weight:600;padding:8px 16px;margin-left:4px}
.nav-pill a.contact:hover{background:#d75a3c;color:#fff}
.nav-pill a.contact.is-active{background:#d75a3c;color:#fff}
.nav-pill .arrow{display:inline-block;transition:transform .2s;width:13px;height:13px}
.nav-pill a.contact:hover .arrow{transform:translate(2px,-2px)}

.nav-tools{justify-self:end;display:flex;align-items:center;gap:8px}

/* WEATHER WIDGET */
.weather{
  display:flex;align-items:center;gap:11px;padding:6px 14px;
  border:1px solid var(--line-light);border-radius:999px;
  background:rgba(58,107,168,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.88);white-space:nowrap;
}
.weather .w-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FFE3A0,#FF9D6B);font-size:14px;color:#fff}
.weather .w-icon.night{background:linear-gradient(135deg,#3A4670,#1F2A52)}
.weather .w-icon.cloudy{background:linear-gradient(135deg,#B8C5D1,#7A8DA0)}
.weather .w-icon.rain{background:linear-gradient(135deg,#7BABCC,#4A6F8C)}
.weather .w-temp{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:600;font-size:15px;color:#fff;letter-spacing:-0.01em;min-width:34px;display:inline-block;text-align:left}
.weather .w-sep{width:1px;height:18px;background:rgba(255,255,255,0.18);margin:0 1px}
.weather .w-wind{display:flex;align-items:center;gap:5px;color:var(--sage);font-weight:600}
.weather .w-wind svg{width:14px;height:14px;animation:slow-spin 4s linear infinite}
@keyframes slow-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.weather .w-time{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:600;color:var(--coral-soft);font-size:15px;font-variant-numeric:tabular-nums;min-width:48px;display:inline-block;text-align:left}
.weather #w-wind{min-width:54px;display:inline-block;text-align:left;font-variant-numeric:tabular-nums}
.weather.loading{opacity:0.45}

.live-indicator{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,0.7);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase}
.live-indicator .dot{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 10px var(--coral);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.45;transform:scale(0.85)}}

.lang{display:flex;border:1px solid var(--line-light);border-radius:999px;padding:3px;background:rgba(58,107,168,0.55);backdrop-filter:blur(14px)}
.lang button{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.7);padding:7px 14px;font:inherit;font-size:11px;font-weight:700;letter-spacing:0.1em;border-radius:999px;transition:all .2s}
.lang button:hover{color:#fff}
.lang button.active{background:var(--cream);color:var(--ink)}

.hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line-light);border-radius:999px;background:rgba(58,107,168,0.55);color:#fff;cursor:pointer;backdrop-filter:blur(14px)}

@media (max-width:1180px){.weather .w-wind,.weather .w-sep{display:none}}
@media (max-width:980px){
  .nav{grid-template-columns:1fr auto}
  .nav-pill{display:none}
  .weather{display:none}
  .live-indicator{display:none}
  .hamburger{display:inline-flex}
}

/* ============================================================
   HERO INTRO + HEADLINE (home)
   ============================================================ */
.intro{padding:18px 0 8px}
.intro p{margin:0;color:rgba(255,255,255,0.82);font-size:14px;line-height:1.55;text-align:left}

.center{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px 0}
.center-inner{max-width:1180px;padding:0 0.15em}
.headline{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(48px,9vw,124px);line-height:0.96;letter-spacing:-0.035em;color:#fff}
.headline .line-static{
  display:block;
  /* generous bottom padding so the descender of "g" in "Engineering"
     stays inside the background paint area; otherwise background-clip:text
     drops it because the gradient doesn't extend that far below. */
  padding:0.04em 0.08em 0.22em 0.02em;
  line-height:1.05;
  color:var(--sage);
  background-image:linear-gradient(
    100deg,
    var(--sage) 0%,
    var(--sage) 38%,
    var(--cream-warm) 50%,
    var(--sage) 62%,
    var(--sage) 100%
  );
  background-size:300% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shine 3.2s linear infinite;
}
/* Home headline second line — smaller than "Proiectăm" so the longer
   phrase "energia care conectează viitorul" fits on one line. Same font
   family + italic style, left-aligned. The cycle is:
     1. Type letter-by-letter (clip-path reveal with steps)
     2. Run ONE complete shine pass left→right across all the letters
     3. Quick clear (text disappears)
     4. Pause, then loop */
.headline .line-shine{
  display:block;
  margin-top:14px;
  font-style:italic;
  text-align:left;
  font-size:clamp(28px, 5.4vw, 68px);
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--sage);
  background-image:linear-gradient(
    100deg,
    var(--sage) 0%,
    var(--sage) 38%,
    var(--cream-warm) 50%,
    var(--sage) 62%,
    var(--sage) 100%
  );
  background-size:300% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Typewriter mechanics */
  overflow:hidden;
  white-space:nowrap;
  clip-path:inset(0 100% 0 0);
  background-position:100% 0%;
  animation:
    type-reveal 9s linear infinite,
    shine-once 9s linear infinite;
  /* Generous padding: italic glyph + descender ("g") + right-side
     overshoot all need room since overflow:hidden would otherwise clip. */
  padding:0.1em 0.24em 0.22em 0.04em;
}

@media (max-width:640px){
  .headline .line-shine{font-size:clamp(16px, 5.6vw, 30px)}
}

/* TYPEWRITER reveal — clip-path inset animates from 100% to 0% using
   steps() during the typing phase, holds at 0% while the shine passes,
   then snaps back to 100% (cleared) for the pause. */
@keyframes type-reveal{
  /* 0–35% (3.15s): type letter by letter — steps(34) ≈ ~93ms/char */
  0%   {clip-path:inset(0 100% 0 0); animation-timing-function:steps(34, end);}
  /* 35%: fully typed */
  35%  {clip-path:inset(0 0 0 0); animation-timing-function:linear;}
  /* 35–72%: hold fully visible while shine sweeps */
  72%  {clip-path:inset(0 0 0 0);}
  /* 72–76% (0.36s): quick clear */
  76%  {clip-path:inset(0 100% 0 0);}
  /* 76–100% (2.16s): pause before next cycle */
  100% {clip-path:inset(0 100% 0 0);}
}

/* SHINE-ONCE — background-position sweeps once across the visible text
   right after typing completes, then resets. During typing the highlight
   is parked off-left so the text reads as plain sage as it appears. */
@keyframes shine-once{
  /* 0–35% (typing phase): shine parked off-left, text is plain sage */
  0%   {background-position:100% 0%}
  35%  {background-position:100% 0%}
  /* 35–72% (~3.3s): ONE full sweep left → right across all letters */
  72%  {background-position:0% 0%}
  /* 72–76% (clear phase): keep position; text is being hidden */
  76%  {background-position:0% 0%}
  /* 76–100% (pause): reset for next cycle */
  100% {background-position:100% 0%}
}
/* With background-size:300%, bg-position in [0%, 100%] always keeps the
   text fully inside the gradient — so no flicker. The cream-warm peak
   (at gradient's 50%) starts off-left (bg-pos 100%) and sweeps right to
   off-right (bg-pos 0%) — left-to-right shine direction. */
@keyframes shine{
  0%{background-position:100% 0%}
  100%{background-position:0% 0%}
}
.subhead{margin:26px auto 0;max-width:620px;font-size:clamp(14px,1.6vw,17px);line-height:1.55;color:rgba(255,255,255,0.85);font-weight:400}

.cta-row{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:transform .2s, background .2s, box-shadow .2s}
.cta-primary{background:var(--coral);color:#fff;box-shadow:0 8px 24px -8px rgba(230,106,74,0.5)}
.cta-primary:hover{background:#d75a3c;transform:translateY(-1px);box-shadow:0 12px 32px -8px rgba(230,106,74,0.6)}
.cta-secondary{background:rgba(255,255,255,0.08);color:#fff;border:1px solid var(--line-light);backdrop-filter:blur(8px)}
.cta-secondary:hover{background:rgba(255,255,255,0.15)}
.cta .arrow{display:inline-block;transition:transform .2s;width:16px;height:16px}
.cta:hover .arrow{transform:translateX(4px)}

/* ============================================================
   SECTIONS
   ============================================================ */
section.block{position:relative;padding:36px 0;background:var(--ink)}
section.block.alt{background:var(--ink-2)}
@media (max-width:780px){section.block{padding:28px 0}}

h2.h2{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-0.025em;color:#fff;max-width:1000px}
.section-head{margin-bottom:22px}
.section-head .caps{margin-bottom:10px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
@media (max-width:980px){.about-grid{grid-template-columns:1fr;gap:40px}}
.about-grid p{font-size:16px;line-height:1.7;color:rgba(255,255,255,0.78);margin-bottom:18px;max-width:62ch}
.about-grid p:last-of-type{margin-bottom:0}
.about-cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:12px 22px;border-radius:999px;background:var(--coral);color:#fff;font-size:13px;font-weight:600;transition:all .2s}
.about-cta:hover{background:#d75a3c;transform:translateY(-1px)}

.about-cards{display:grid;grid-template-columns:1fr;gap:14px}
.about-card{padding:24px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid var(--line-light);backdrop-filter:blur(8px)}
.about-card .num{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;color:var(--coral);margin-bottom:8px}
.about-card h4{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:20px;color:#fff;margin-bottom:6px;letter-spacing:-0.01em}
.about-card p{font-size:14px;color:rgba(255,255,255,0.72);margin:0;line-height:1.55}

/* EXPERTISE */
.expertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
@media (max-width:780px){.expertise-grid{grid-template-columns:1fr}}
.expertise-card{padding:36px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid var(--line-light);position:relative;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
.expertise-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--coral),var(--coral-soft));z-index:3}
.expertise-card:nth-child(2)::before{background:linear-gradient(90deg,var(--sage),var(--cream-warm))}
.expertise-card .tag{margin-bottom:16px}
.expertise-card h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:28px;color:#fff;margin-bottom:14px;letter-spacing:-0.02em}
.expertise-card p{font-size:15px;line-height:1.65;color:rgba(255,255,255,0.85)}

/* Video-backed variant of expertise card */
.expertise-card.has-video{padding:0;background:#4E83C0;border:1px solid var(--line-light)}
.expertise-card .card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.expertise-card .card-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(58,107,168,0.18) 0%,rgba(58,107,168,0.4) 45%,rgba(58,107,168,0.94) 100%)}
.expertise-card .card-content{position:relative;z-index:2;padding:36px}
.expertise-card.has-video p{color:rgba(255,255,255,0.92)}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
@media (max-width:980px){.services-grid{grid-template-columns:1fr}}
.service-card{padding:32px;border-radius:20px;background:rgba(255,255,255,0.03);border:1px solid var(--line-light);transition:all .25s}
.service-card:hover{border-color:var(--coral-soft);transform:translateY(-4px);background:rgba(255,255,255,0.05)}
.service-card .icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(230,106,74,0.18),rgba(230,106,74,0.06));border:1px solid rgba(230,106,74,0.3);margin-bottom:20px}
.service-card .icon svg{width:22px;height:22px;color:var(--coral-soft)}
.service-card h4{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:22px;color:#fff;margin-bottom:10px;letter-spacing:-0.015em}
.service-card p{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.72)}

/* PROCESS */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:980px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.process-grid{grid-template-columns:1fr}}
.process-step{padding:28px;border-radius:18px;background:rgba(255,255,255,0.03);border:1px solid var(--line-light);position:relative}
.process-step .step-num{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:38px;font-weight:300;color:var(--coral);line-height:1;display:block;margin-bottom:14px;letter-spacing:-0.04em}
.process-step h4{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:20px;color:#fff;margin-bottom:8px;letter-spacing:-0.01em}
.process-step p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,0.72)}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:48px 32px;border-radius:24px;background:linear-gradient(180deg,rgba(230,106,74,0.08),rgba(102,169,251,0.06));border:1px solid var(--line-light)}
@media (max-width:780px){.stats-grid{grid-template-columns:1fr;padding:32px 24px;gap:28px}}
.stat .num{display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(54px,8vw,84px);color:var(--cream-warm);line-height:1;letter-spacing:-0.04em;margin-bottom:10px}
.stat .num .unit{font-size:0.55em;color:var(--coral-soft);font-style:italic;margin-left:6px}
.stat .label{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;color:#fff;margin-bottom:4px;font-weight:500}
.stat .sub{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.5}

/* PROJECTS */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px}
@media (max-width:980px){.projects-grid{grid-template-columns:1fr}}
.project-card{position:relative;border-radius:22px;overflow:hidden;background:rgba(255,255,255,0.04);border:1px solid var(--line-light);display:flex;flex-direction:column;transition:all .25s}
.project-card:hover{transform:translateY(-4px);border-color:var(--coral-soft)}
/* 3D tilt: while the cursor steers the card, transform follows instantly */
.project-card.tilting{transition:border-color .25s,box-shadow .25s;box-shadow:0 22px 48px rgba(0,0,0,0.4)}
/* light glare that follows the cursor */
.project-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(440px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,0.12),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:3}
.project-card:hover::after{opacity:1}
.project-image{height:240px;width:100%;background:#3D6CA8 center/cover no-repeat;position:relative}
.project-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(58,107,168,0.6))}
.project-body{padding:24px;flex:1;display:flex;flex-direction:column}
.project-meta{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--coral-soft);margin-bottom:12px}
.project-card h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:20px;color:#fff;margin-bottom:10px;letter-spacing:-0.015em;line-height:1.25}
.project-card p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,0.72);flex:1}

/* EMPTY MIDDLE SLOT — landing zone for deck cards */
.slot-ghost{border-radius:22px;border:1.5px dashed rgba(255,255,255,0.18);background:rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;min-height:300px;transition:border-color .4s,background .4s}
.slot-ghost span{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.35);font-weight:600}
.slot-ghost.filled{border-color:transparent;background:transparent}
.slot-ghost.filled span{opacity:0}

/* DECK — ongoing projects fanned like a hand of cards */
.deck-wrap{margin-top:-6px;display:flex;align-items:center;gap:8px}
.deck-side{flex:1;min-width:0}
.deck-side .h2{font-size:clamp(22px,2.4vw,32px);line-height:1.15}
.deck-side-left{text-align:left}
.deck-side-right{text-align:right}
.deck{display:flex;justify-content:center;align-items:flex-end;padding:14px 0 22px;position:relative;flex:0 0 auto}
.deck-slot{width:206px;height:300px;position:relative;margin:0 -62px;z-index:1}
.deck-slot:hover{z-index:60}
.deck-card{position:absolute;inset:0;border-radius:18px;background:linear-gradient(165deg,#74A4DA 0%,#4E83C0 100%);border:1px solid var(--line-stronger);padding:20px 18px;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,0.45);transform:rotate(var(--r,0deg)) translateY(var(--y,0px));transform-origin:50% 50%;transition:transform .55s cubic-bezier(.22,.9,.3,1),box-shadow .35s,border-color .35s;will-change:transform}
.deck-slot:nth-child(1) .deck-card{--r:-13deg;--y:26px}
.deck-slot:nth-child(2) .deck-card{--r:-8deg;--y:11px}
.deck-slot:nth-child(3) .deck-card{--r:-2.5deg;--y:2px}
.deck-slot:nth-child(4) .deck-card{--r:2.5deg;--y:2px}
.deck-slot:nth-child(5) .deck-card{--r:8deg;--y:11px}
.deck-slot:nth-child(6) .deck-card{--r:13deg;--y:26px}
.deck-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sky),var(--coral-soft))}
.deck-card .project-meta{margin-bottom:10px;font-size:9px}
.deck-card h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:19px;color:#fff;margin-bottom:9px;letter-spacing:-0.015em;line-height:1.2}
.deck-card p{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,0.7)}
.deck-card.flying{box-shadow:0 26px 60px rgba(0,0,0,0.6);border-color:var(--coral-soft)}

/* Deck on mobile — plain stacked cards, no fan / fly-out */
@media (max-width:980px){
  .slot-ghost{display:none}
  .deck-wrap{flex-direction:column;align-items:stretch;margin-top:24px;gap:0}
  .deck-side-right{text-align:left}
  .deck{flex-wrap:wrap;gap:16px;padding:20px 0;margin-top:0}
  .deck-slot{width:100%;height:auto;margin:0}
  .deck-card{position:relative;inset:auto;transform:none !important;height:auto}
}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:14px}
@media (max-width:980px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.why-grid{grid-template-columns:1fr}}
.why-item{padding:28px;border-radius:18px;background:rgba(255,255,255,0.03);border:1px solid var(--line-light)}
.why-item .why-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(102,169,251,0.14);border:1px solid rgba(102,169,251,0.4);margin-bottom:18px}
.why-item .why-icon svg{width:18px;height:18px;color:var(--sky)}
.why-item h5{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:18px;color:#fff;margin-bottom:8px;letter-spacing:-0.01em}
.why-item p{font-size:13px;line-height:1.55;color:rgba(255,255,255,0.7)}

/* CONTACT */
.contact-block{padding:64px 56px;border-radius:32px;background:linear-gradient(135deg,rgba(230,106,74,0.12),rgba(58,107,168,0.6));border:1px solid var(--line-stronger);display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
@media (max-width:980px){.contact-block{grid-template-columns:1fr;padding:40px 28px;gap:32px}}
.contact-block h2.h2{margin-bottom:18px}
.contact-block .lead{font-size:16px;color:rgba(255,255,255,0.82);line-height:1.65;max-width:54ch;margin-bottom:28px}
.contact-info{display:grid;gap:18px}
.contact-row .ck{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--coral-soft);font-weight:700;margin-bottom:5px}
.contact-row .cv{display:block;font-size:15px;color:#fff;font-weight:500;line-height:1.7}
.contact-row a.cv{transition:color .2s}
.contact-row a.cv:hover{color:var(--coral-soft)}

/* ANRE CERTIFICATIONS — About page */
.anre-head{max-width:780px;margin-bottom:36px}
.anre-head .h2{margin:12px 0 16px}
.anre-head .lead{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,0.78)}
.anre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.anre-grid{grid-template-columns:1fr}}
.anre-card{position:relative;border-radius:22px;padding:30px 26px;background:rgba(255,255,255,0.04);border:1px solid var(--line-light);overflow:hidden;transition:all .25s}
.anre-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sky),var(--coral-soft))}
.anre-card:hover{transform:translateY(-4px);border-color:var(--coral-soft)}
.anre-code{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:46px;font-weight:700;letter-spacing:-0.02em;color:var(--sage);line-height:1}
.anre-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--coral-soft);margin:10px 0 16px}
.anre-card h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:18px;color:#fff;margin-bottom:9px;letter-spacing:-0.01em}
.anre-card p{font-size:13px;line-height:1.6;color:rgba(255,255,255,0.72)}
.anre-note{margin-top:20px;font-size:12px;color:rgba(255,255,255,0.5)}

/* CROSS-LINK strip — appears at bottom of inner pages to suggest next page */
.next-page{padding:36px 0;background:var(--ink-2);border-top:1px solid var(--line-lighter);border-bottom:1px solid var(--line-lighter)}
.next-page .np-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.next-page .np-label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--coral-soft);font-weight:700;margin-bottom:6px}
.next-page .np-title{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:30px;color:#fff;font-weight:500;letter-spacing:-0.02em;line-height:1.1}

/* FOOTER */
.site-footer{padding:48px 0 36px;background:var(--ink);border-top:1px solid var(--line-light)}
.site-footer .foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.site-footer .foot-brand{display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px}
.site-footer .foot-meta{font-size:14px;color:rgba(255,255,255,0.72);letter-spacing:0.03em;line-height:1.7}
.site-footer .foot-mark{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3))}
.live-indicator{display:none}

/* ============================================================
   LANGUAGE TOGGLE (RO/EN) — attribute-driven, no-flash
   ============================================================ */
html[data-lang="ro"] [data-en]{display:none !important}
html[data-lang="en"] [data-ro]{display:none !important}
.is-hidden{display:none !important}

/* ============================================================
   QUOTE FORM + MAP (contact page)
   ============================================================ */
.quote-block{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start;padding:48px;border-radius:28px;background:linear-gradient(135deg,rgba(230,106,74,0.10),rgba(58,107,168,0.55));border:1px solid var(--line-stronger)}
@media (max-width:980px){.quote-block{grid-template-columns:1fr;padding:32px 24px;gap:32px}}
.quote-block h2.h2{margin-bottom:14px;font-size:clamp(30px,3.6vw,46px)}
.quote-block .lead{font-size:15px;color:rgba(255,255,255,0.82);line-height:1.65;margin-bottom:24px;max-width:54ch}
.quote-form{display:grid;gap:14px}
.quote-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:580px){.quote-form .row-2{grid-template-columns:1fr}}
.quote-form label{display:block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--coral-soft);font-weight:700;margin-bottom:6px}
.quote-form input,
.quote-form select,
.quote-form textarea{width:100%;font:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,0.04);border:1px solid var(--line-light);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .18s, background .18s}
.quote-form textarea{min-height:120px;resize:vertical;line-height:1.55}
.quote-form input::placeholder,
.quote-form textarea::placeholder{color:rgba(255,255,255,0.42)}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus{border-color:var(--coral-soft);background:rgba(255,255,255,0.07)}
.quote-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A88C' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.quote-form select option{background:#4E83C0;color:#fff}
.quote-form .submit-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;flex-wrap:wrap}
.quote-form .form-note{font-size:12px;color:rgba(255,255,255,0.55);line-height:1.5;max-width:36ch}
.quote-form button.cta{cursor:pointer;border:none}

.map-block{margin-top:64px;display:grid;grid-template-columns:1fr;gap:18px}
.map-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.map-row .map-addr{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;color:#fff;font-weight:500;letter-spacing:-0.01em}
.map-row .map-addr small{display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:12px;color:rgba(255,255,255,0.6);font-weight:500;margin-top:4px;letter-spacing:0.04em}
.map-frame{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line-stronger);background:#3D6CA8;aspect-ratio:16/8;width:100%}
@media (max-width:780px){.map-frame{aspect-ratio:4/3}}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(0.25) contrast(1.02) brightness(0.95)}

/* ============================================================
   QUOTE SUCCESS MODAL (contact page)
   ============================================================ */
.quote-modal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:20px}
.quote-modal.is-open{display:flex}
.quote-modal-backdrop{position:absolute;inset:0;background:rgba(8,18,15,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.quote-modal-card{position:relative;max-width:480px;width:100%;padding:40px 32px 32px;background:linear-gradient(135deg,rgba(230,106,74,0.14),rgba(58,107,168,0.9));border:1px solid var(--line-stronger);border-radius:24px;text-align:center;box-shadow:0 24px 64px -16px rgba(0,0,0,0.6);animation:quote-modal-pop 0.35s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes quote-modal-pop{from{opacity:0;transform:translateY(20px) scale(0.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.quote-modal-check{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--sage), var(--sage-deep));color:#fff;font-size:34px;font-weight:700;box-shadow:0 8px 24px -8px rgba(229,207,163,0.5)}
.quote-modal-title{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:600;font-size:24px;line-height:1.2;color:#fff;margin-bottom:12px;letter-spacing:-0.01em}
.quote-modal-body{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.78);margin-bottom:24px}
.quote-modal-card .cta{margin:0 auto}
body.modal-open{overflow:hidden}

/* ============================================================
   GDPR consent checkbox + footer legal + cookie banner + privacy modal
   ============================================================ */
.quote-form .gdpr-consent{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,0.92);cursor:pointer;margin-top:2px;text-transform:none;letter-spacing:normal;font-weight:400}
.gdpr-consent input{width:15px;height:15px;flex-shrink:0;margin-top:3px;accent-color:var(--coral);cursor:pointer}
.gdpr-consent a{color:var(--coral-soft);text-decoration:underline;text-underline-offset:2px;text-transform:none;letter-spacing:normal;font-weight:600}
.gdpr-consent a:hover{color:#fff}

.foot-legal{display:block;margin-top:8px;font-size:13px;color:rgba(255,255,255,0.62);letter-spacing:0.02em}
.foot-legal-link{display:inline-block;margin-top:8px;margin-right:18px;font-size:13px;color:rgba(255,255,255,0.78);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.foot-legal-link:hover{color:var(--coral-soft)}

/* Cookie banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9997;max-width:760px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;padding:16px 20px;border-radius:16px;background:rgba(22,49,77,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-stronger);box-shadow:0 16px 48px -12px rgba(0,0,0,0.5);transform:translateY(140%);transition:transform .45s cubic-bezier(.22,.9,.3,1)}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,0.82);margin:0;flex:1;min-width:220px}
.cookie-banner p a{color:var(--coral-soft);text-decoration:underline;cursor:pointer}
.cookie-banner .cta{padding:10px 22px;font-size:13px}

/* Privacy modal reuses .quote-modal visuals; this just sizes the text body */
.privacy-modal .quote-modal-card{max-width:680px;text-align:left;max-height:82vh;overflow-y:auto;padding:36px 34px}
.privacy-modal h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:600;font-size:24px;color:#fff;margin-bottom:6px;letter-spacing:-0.01em}
.privacy-modal .pm-sub{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:18px}
.privacy-modal h4{font-size:14px;color:var(--coral-soft);font-weight:700;margin:18px 0 6px;letter-spacing:0.02em}
.privacy-modal p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,0.82);margin-bottom:8px}
.privacy-modal ul{margin:0 0 8px 18px}
.privacy-modal li{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,0.82);margin-bottom:4px}
.privacy-modal .pm-close{margin-top:22px}

/* ============================================================
   MOBILE MENU — full-screen overlay opened by the hamburger
   ============================================================ */
.mobile-menu{position:fixed;inset:0;z-index:9990;background:rgba(14,31,51,0.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu-close{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-light);background:rgba(255,255,255,0.06);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mobile-menu-inner{display:flex;flex-direction:column;gap:4px;text-align:center;width:100%;max-width:340px;padding:0 24px}
.mobile-menu-inner a{color:#fff;font-size:24px;font-weight:500;letter-spacing:-0.01em;padding:16px;border-radius:14px;transition:background .2s}
.mobile-menu-inner a:hover,.mobile-menu-inner a.is-active{background:rgba(255,255,255,0.08)}
.mobile-menu-inner a.contact{background:var(--coral);margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mobile-menu-inner a.contact .arrow{width:18px;height:18px}
body.menu-open{overflow:hidden}