/* ============================================================
   IRF — Maintenance of Industrial Furnace · shared stylesheet
   Brand palette (graphic charter):
   Primary  #DF211F (RED — dominant)
   Secondary #7F756F · Accent #282423 · #3E3938
   Spark    #FF4800 (orange — used sparingly)
   ============================================================ */
:root{
  --red:#DF211F;
  --red-1:#ff4234;
  --red-2:#b4191a;
  --red-3:#8f1413;
  --spark:#FF4800;      /* orange — minimal use */
  --gray:#7F756F;
  --ink:#282423;
  --ink-2:#3E3938;

  /* Dark theme = neutral charcoal gray (matches the IRF take-away deck) */
  --bg:#1c1c1f;
  --bg-2:#232327;
  --panel:#27272c;
  --glass:rgba(255,255,255,0.055);
  --glass-2:rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.13);
  --text:#f3f3f5;
  --muted:#a7a7ae;
  --muted-2:#76767e;

  /* surfaces (themeable) */
  --nav-bg:rgba(26,26,30,.5);
  --nav-bg-2:rgba(24,24,28,.82);
  --footer-bg:rgba(20,20,23,.7);
  --float-bg:rgba(36,36,41,.78);
  --popup-bg:rgba(32,32,37,.97);
  --drop-bg:rgba(30,30,35,.96);

  --accent:var(--red);
  --accent-soft:rgba(223,33,31,.16);
  --glow:0 0 60px rgba(223,33,31,.34);
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --grad:linear-gradient(120deg,var(--red-1),var(--red) 45%,var(--red-3));
  --grad-text:linear-gradient(110deg,#ff7a5f,var(--red-1) 45%,var(--red));

  /* Apple-style typography — Inter / Inter Tight as the SF look-alike,
     with the real Apple system stack as the first native fallback. */
  --font-d:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --font-b:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --maxw:1440px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"]{
  --bg:#f3efeb;
  --bg-2:#e9e3dd;
  --panel:#ffffff;
  --glass:rgba(40,36,35,0.045);
  --glass-2:rgba(40,36,35,0.08);
  --glass-border:rgba(40,36,35,0.14);
  --text:#221b18;
  --muted:#5f554f;
  --muted-2:#8a807a;
  --nav-bg:rgba(255,255,255,.62);
  --nav-bg-2:rgba(255,255,255,.92);
  --footer-bg:rgba(255,255,255,.72);
  --float-bg:rgba(255,255,255,.85);
  --popup-bg:rgba(255,255,255,.98);
  --drop-bg:rgba(255,255,255,.98);
  --shadow:0 24px 60px rgba(90,50,40,.16);
  --glow:0 0 60px rgba(223,33,31,.22);
}
[data-theme="light"] .grid-overlay{opacity:.5;background-image:linear-gradient(rgba(40,36,35,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(40,36,35,.03) 1px,transparent 1px)}
[data-theme="light"] .noise{opacity:.02}
[data-theme="light"] .orb{opacity:.35}
/* logo is now an inline SVG using currentColor — no image swap needed */
[data-theme="light"] .hero-card::after,[data-theme="light"] .offer::after{background:linear-gradient(180deg,transparent 45%,rgba(20,16,15,.45))}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01","kern";transition:background .4s,color .4s}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--font-d);font-weight:600;line-height:1.06;letter-spacing:-.022em;font-feature-settings:"ss01","cv11","kern"}
h1{letter-spacing:-.035em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.section{padding:120px 0;position:relative;z-index:2}
.center{text-align:center}
.molten{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.red{color:var(--red)}
.eyebrow{font-family:var(--font-d);font-size:.76rem;letter-spacing:.32em;text-transform:uppercase;color:var(--red-1);font-weight:600;margin-bottom:18px;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--red)}
.eyebrow.c{justify-content:center}
[data-theme="light"] .eyebrow{color:var(--red-2)}

/* ===== Ambient background ===== */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;will-change:transform}
.orb.a{width:560px;height:560px;background:radial-gradient(circle,rgba(223,33,31,.5),transparent 65%);top:-140px;right:-90px}
.orb.b{width:640px;height:640px;background:radial-gradient(circle,rgba(143,20,19,.4),transparent 65%);bottom:-240px;left:-180px}
.orb.c{width:460px;height:460px;background:radial-gradient(circle,rgba(255,72,0,.16),transparent 65%);top:46%;left:54%}
.grid-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:66px 66px;mask-image:radial-gradient(circle at 50% 0,#000,transparent 78%)}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== Header / Nav ===== */
header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.4s}
.nav{width:100%;position:relative;z-index:45;background:var(--nav-bg);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border-bottom:1px solid var(--glass-border);box-shadow:0 4px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);transition:background .4s,box-shadow .4s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:var(--maxw);margin:0 auto;padding:10px 36px}
header.scrolled .nav{background:var(--nav-bg-2);box-shadow:0 8px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.nav-left{display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;margin-left:-4px;min-height:44px;flex-shrink:0}
.brand-logo{display:block;height:44px;width:auto}
/* quick-jump icon buttons (left) */
.quicknav{display:flex;align-items:center;gap:4px;padding-left:14px;margin-left:4px;border-left:1px solid var(--glass-border)}
.qbtn{position:relative;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--muted);transition:.22s var(--ease)}
.qbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qbtn:hover{color:var(--text);background:var(--glass);transform:translateY(-2px)}
.qbtn.on{color:var(--red-1);background:var(--accent-soft)}
.qbtn .qtip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--drop-bg);border:1px solid var(--glass-border);color:var(--text);font-size:.72rem;font-family:var(--font-d);font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s;box-shadow:var(--shadow);pointer-events:none;z-index:20}
.qbtn:hover .qtip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-links{display:flex;gap:6px;align-items:center;margin-left:auto;margin-right:8px}
.nav-links a{font-size:.92rem;color:var(--muted);padding:10px 16px;border-radius:11px;transition:.25s;font-weight:500;position:relative;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--glass)}
.nav-links a.active{color:var(--red-1)}
.has-drop{position:relative}
.dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);min-width:230px;background:var(--drop-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px;padding:8px;opacity:0;visibility:hidden;transition:.28s;box-shadow:var(--shadow)}
.has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-size:.88rem;color:var(--muted);width:100%}
.dropdown a:hover{background:var(--glass);color:var(--text)}
.dropdown a b{color:var(--text);font-family:var(--font-d);font-weight:500}
.dropdown .dico{width:8px;height:8px;border-radius:2px;background:var(--red);flex-shrink:0}
.nav-cta{background:var(--grad)!important;color:#fff!important;font-weight:600;box-shadow:0 6px 22px rgba(223,33,31,.4)}
.nav-cta:hover{filter:brightness(1.07)}
.nav-cta.active{color:#fff!important}

/* theme toggle + lang */
.icon-btn{width:44px;height:44px;border-radius:11px;background:var(--glass);border:1px solid var(--glass-border);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:.25s;flex-shrink:0}
.icon-btn:hover{background:var(--glass-2);border-color:var(--red)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.icon-btn .moon{display:none}
[data-theme="light"] .icon-btn .sun{display:none}
[data-theme="light"] .icon-btn .moon{display:block}
.lang{position:relative;flex-shrink:0}
.lang-btn{height:44px;padding:0 13px;flex-shrink:0;white-space:nowrap;border-radius:11px;background:var(--glass);border:1px solid var(--glass-border);color:var(--text);cursor:pointer;font-family:var(--font-d);font-weight:600;font-size:.82rem;display:flex;align-items:center;gap:7px;transition:.25s;letter-spacing:.04em}
.lang-btn:hover{background:var(--glass-2);border-color:var(--red)}
.lang-btn .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:.25s}
.lang.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:var(--drop-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:14px;padding:7px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;box-shadow:var(--shadow);z-index:50}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:12px;min-height:44px;border-radius:9px;background:none;border:0;color:var(--muted);font-family:var(--font-b);font-size:.88rem;cursor:pointer;transition:.2s;text-align:left}
.lang-menu button:hover{background:var(--glass);color:var(--text)}
.lang-menu button.sel{color:var(--red-1)}
.lang-menu .flag{font-size:1.05rem;line-height:1}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:9px;min-width:44px;min-height:44px;flex-shrink:0;
  -webkit-tap-highlight-color:transparent}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:14px;font-weight:600;font-family:var(--font-d);font-size:.95rem;cursor:pointer;transition:.3s;border:1px solid transparent}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 34px rgba(223,33,31,.4)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 46px rgba(223,33,31,.55)}
.btn-ghost{background:var(--glass);border:1px solid var(--glass-border);color:var(--text);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--glass-2);transform:translateY(-3px);border-color:var(--red)}

/* ===== Hero ===== */
.hero{min-height:100vh;display:flex;align-items:center;padding:160px 0 90px;position:relative}
.hero canvas#furnace,.page-hero canvas#furnace{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:3}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:100px;background:var(--glass);border:1px solid var(--glass-border);font-size:.8rem;color:var(--red-1);font-weight:500;margin-bottom:26px;backdrop-filter:blur(10px)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--spark);box-shadow:0 0 12px var(--spark);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.8rem);font-weight:700;margin-bottom:22px}
.hero .lead{font-size:1.16rem;color:var(--muted);max-width:600px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{position:relative;perspective:1500px}
.hero-card{border-radius:26px;overflow:hidden;border:1px solid var(--glass-border);box-shadow:var(--shadow),var(--glow);transform:rotateY(-13deg) rotateX(6deg);transition:.6s var(--ease);will-change:transform;position:relative}
.hero-card img{width:100%;height:580px;object-fit:cover;filter:saturate(1.06) contrast(1.03)}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,16,15,.7));pointer-events:none}
.hero-float{position:absolute;backdrop-filter:blur(16px);background:var(--float-bg);border:1px solid var(--glass-border);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow)}
.hero-float.top{top:26px;left:-30px;display:flex;align-items:center;gap:12px}
.hero-float.bot{bottom:30px;right:-24px}
.hero-float .num{font-family:var(--font-d);font-size:1.65rem;font-weight:700;color:var(--red-1);line-height:1}
.hero-float small{color:var(--muted);font-size:.76rem;display:block;margin-top:3px}
.flame-ico{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;font-size:1.15rem}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;color:var(--muted);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.scroll-hint .mouse{width:23px;height:37px;border:1px solid var(--glass-border);border-radius:13px;position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:7px;background:var(--red);border-radius:3px;animation:scrolldot 1.8s infinite}
@keyframes scrolldot{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:20px}}

/* ===== Page hero ===== */
.page-hero{padding:190px 0 70px;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:3}
.page-hero h1{font-size:clamp(2.4rem,4.8vw,4rem);margin-bottom:18px}
.page-hero p{color:var(--muted);font-size:1.14rem;max-width:680px}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted-2);margin-bottom:22px;font-family:var(--font-d)}
.breadcrumb a:hover{color:var(--red-1)}
.breadcrumb span{opacity:.5}

/* ===== Section head ===== */
.section-head{max-width:720px;margin-bottom:60px}
.section-head.c{margin:0 auto 60px}
.section-head h2{font-size:clamp(2rem,3.7vw,3.1rem);margin-bottom:16px}
.section-head p{color:var(--muted);font-size:1.08rem}

/* ===== Marquee ===== */
.marquee{border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);background:var(--glass);overflow:hidden;padding:20px 0;backdrop-filter:blur(10px)}
.marquee-track{display:flex;white-space:nowrap;animation:scroll-x 32s linear infinite;width:max-content}
.marquee-track span{font-family:var(--font-d);font-size:1.05rem;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:48px;padding-right:48px}
.marquee-track span::after{content:"▲";color:var(--red);font-size:.7rem}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ===== Offers ===== */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.offer{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--glass-border);min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;transition:transform .5s var(--ease),box-shadow .5s;background:var(--panel);color:var(--text)}
.offer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.7s;filter:brightness(.48) saturate(1.05)}
.offer:hover img{transform:scale(1.08);filter:brightness(.6) saturate(1.15)}
.offer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,15,.15),rgba(20,16,15,.6) 55%,rgba(20,16,15,.96))}
.offer>*{position:relative;z-index:2}
.offer .onum{position:absolute;top:26px;left:28px;font-family:var(--font-d);font-size:.82rem;color:var(--red-1);font-weight:600;letter-spacing:.1em;z-index:2}
.offer h3{font-size:1.45rem;margin-bottom:10px;color:#fff}
.offer p{color:rgba(244,239,234,.82);font-size:.92rem;max-height:0;opacity:0;overflow:hidden;transition:.5s}
.offer .more{margin-top:14px;font-size:.82rem;color:var(--red-1);font-weight:600;display:flex;align-items:center;gap:7px;opacity:0;transform:translateY(8px);transition:.4s;font-family:var(--font-d)}
.offer:hover p{max-height:220px;opacity:1}
.offer:hover .more{opacity:1;transform:translateY(0)}
.offer:hover{transform:translateY(-8px);box-shadow:var(--shadow)}

/* ===== Glass cards ===== */
.cards{display:grid;gap:22px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
/* c2 lived as an inline style on careers.html, which outranks every media
   query - so the two columns survived onto a 375px phone and the card text
   wrapped every two words. Declared here instead, so mobile can collapse it. */
.cards.c2{grid-template-columns:1fr 1fr}
.gcard{padding:34px 30px;border-radius:22px;background:linear-gradient(160deg,var(--glass),rgba(255,255,255,.01));border:1px solid var(--glass-border);backdrop-filter:blur(14px);transition:.45s var(--ease);position:relative;overflow:hidden}
.gcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.gcard:hover{transform:translateY(-8px);border-color:var(--red);box-shadow:var(--shadow)}
.gcard .vico{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);border:1px solid rgba(223,33,31,.35);display:grid;place-items:center;margin-bottom:20px}
.gcard .vico svg{width:28px;height:28px;stroke:var(--red-1);fill:none;stroke-width:1.7}
.gcard .gnum{font-family:var(--font-d);font-size:.8rem;color:var(--red-1);font-weight:600;letter-spacing:.12em;margin-bottom:14px}
.gcard h3{font-size:1.22rem;margin-bottom:12px}
.gcard h4{font-size:1.1rem;margin-bottom:10px}
.gcard p{color:var(--muted);font-size:.93rem}
.gcard ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.gcard ul li{color:var(--muted);font-size:.9rem;padding-left:20px;position:relative}
.gcard ul li::before{content:"▸";color:var(--red);position:absolute;left:0}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.stat{padding:32px 28px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);transition:.4s;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.stat:hover{transform:translateY(-6px);border-color:var(--red)}
.stat .num{font-family:var(--font-d);font-size:2.8rem;font-weight:700;line-height:1}
.stat .lbl{color:var(--muted);font-size:.9rem;margin-top:8px}

/* ===== Split ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .split-media{order:2}
.split-text p{color:var(--muted);margin-bottom:18px;font-size:1.05rem}
.split-text .split-list{color:var(--muted);margin-bottom:18px;font-size:1.05rem}
.split-list ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.split-list li{padding-left:20px;position:relative}
.split-list li::before{content:"▸";color:var(--red);position:absolute;left:0}
.split-text strong{color:var(--text)}
.split-media{border-radius:24px;overflow:hidden;border:1px solid var(--glass-border);box-shadow:var(--shadow);position:relative;perspective:1400px}
.split-media img{width:100%;height:480px;object-fit:cover;transition:.5s var(--ease)}
/* show the whole photo (e.g. so the lance is not cropped off), at its own proportions */
.split-media.whole img{height:auto}

/* ===== Process ===== */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:30px}
.process::before{content:"";position:absolute;top:34px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,var(--red-3),var(--red),var(--red-3))}
.pstep{text-align:center;padding:0 18px;position:relative;z-index:2}
.pstep .pnum{width:70px;height:70px;margin:0 auto 22px;border-radius:50%;background:var(--panel);border:2px solid var(--red);display:grid;place-items:center;font-family:var(--font-d);font-size:1.45rem;font-weight:700;color:var(--red-1);box-shadow:0 0 30px rgba(223,33,31,.3)}
.pstep h4{font-size:1.05rem;margin-bottom:8px}
.pstep p{color:var(--muted);font-size:.88rem}

/* ===== Certifications ===== */
.certs{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.cert{padding:26px 32px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);text-align:center;transition:.35s;min-width:180px}
.cert:hover{transform:translateY(-6px);border-color:var(--red)}
.cert .cnum{font-family:var(--font-d);font-size:1.3rem;font-weight:700;color:var(--red-1)}
.cert small{color:var(--muted);font-size:.82rem}

/* ===== CTA band ===== */
.cta-band{border-radius:30px;padding:70px;text-align:center;position:relative;overflow:hidden;border:1px solid var(--glass-border);background:linear-gradient(135deg,rgba(223,33,31,.2),rgba(143,20,19,.08))}
.cta-band h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:16px}
.cta-band p{color:var(--muted);max-width:600px;margin:0 auto 28px;font-size:1.08rem}
.cta-band .hero-cta{justify-content:center}

/* ===== Map / locations ===== */
.map-wide{max-width:1760px;margin:0 auto;padding:0 24px}
#map{height:600px;width:100%;border-radius:24px;border:1px solid var(--glass-border);box-shadow:var(--shadow);z-index:2}
.leaflet-popup-content-wrapper{background:var(--popup-bg)!important;color:var(--text)!important;border-radius:16px!important;border:1px solid var(--glass-border);box-shadow:var(--shadow)}
.leaflet-popup-tip{background:var(--popup-bg)!important}
.leaflet-popup-content{margin:16px 18px!important;font-family:var(--font-b)!important}
.leaflet-bar a{background:var(--panel)!important;color:var(--text)!important;border-color:var(--glass-border)!important}
.pop b{font-family:var(--font-d);font-size:1.05rem;color:var(--text);display:flex;align-items:center;gap:8px}
.pop .ptag{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-1);background:var(--accent-soft);border:1px solid rgba(223,33,31,.3);padding:3px 9px;border-radius:7px;margin:8px 0}
.pop p{color:var(--muted);font-size:.86rem;margin:4px 0}
.pop a{color:var(--red-1);font-size:.85rem}
.loc-list{display:flex;flex-direction:column;gap:12px;max-height:600px;overflow-y:auto;padding-right:6px}
.loc{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);transition:.3s;cursor:pointer}
.loc:hover,.loc.active{transform:translateX(6px);border-color:var(--red);background:var(--glass-2)}
.loc .pin{width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);flex-shrink:0}
.loc .pin.hq{background:var(--spark);box-shadow:0 0 14px var(--spark)}
.loc b{font-family:var(--font-d);font-size:.98rem}
.loc small{color:var(--muted);display:block;font-size:.82rem}
.map-note{display:none;margin-top:14px;padding:14px 18px;border-radius:12px;background:var(--accent-soft);border:1px solid rgba(223,33,31,.3);color:var(--muted);font-size:.88rem}

/* ===== Team ===== */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{padding:30px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);transition:.4s;text-align:center}
.tcard:hover{transform:translateY(-6px);border-color:var(--red)}
.tcard .avatar{width:72px;height:72px;border-radius:50%;margin:0 auto 16px;background:var(--grad);display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:1.5rem;color:#fff}
.tcard b{font-family:var(--font-d);font-size:1.05rem;display:block}
.tcard .role{color:var(--red-1);font-size:.85rem;margin:4px 0 10px;font-weight:500}
.tcard small{color:var(--muted);font-size:.84rem;display:block}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.contact-card{padding:44px;border-radius:26px;background:linear-gradient(160deg,var(--glass),rgba(255,255,255,.01));border:1px solid var(--glass-border);backdrop-filter:blur(16px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:7px;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--glass-border);color:var(--text);font-family:var(--font-b);font-size:.95rem;transition:.3s}
[data-theme="light"] .field input,[data-theme="light"] .field textarea,[data-theme="light"] .field select{background:rgba(0,0,0,.04)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(223,33,31,.15)}
.field textarea{resize:vertical;min-height:120px}
.info-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.info-row .iico{width:46px;height:46px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-border);display:grid;place-items:center;flex-shrink:0}
.info-row .iico svg{width:22px;height:22px;stroke:var(--red-1);fill:none;stroke-width:1.7}
.info-row b{font-family:var(--font-d);display:block;margin-bottom:3px}
.info-row span,.info-row a{color:var(--muted);font-size:.92rem}
.info-row a:hover{color:var(--red-1)}

/* ===== Footer ===== */
footer{border-top:1px solid var(--glass-border);padding:66px 0 34px;background:var(--footer-bg);backdrop-filter:blur(12px);position:relative;z-index:2}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;margin-bottom:46px}
.foot-logo{display:block;height:50px;width:auto}
.footer-grid .fdesc{color:var(--muted);font-size:.92rem;max-width:320px}
.footer-col h4{font-size:.95rem;margin-bottom:16px;color:var(--text)}
.footer-col a{display:block;color:var(--muted);font-size:.9rem;margin-bottom:10px;transition:.25s}
.footer-col a:hover{color:var(--red-1);transform:translateX(4px)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--glass-border);color:var(--muted-2);font-size:.84rem;flex-wrap:wrap;gap:12px}

/* ===== Reveal ===== */
/* Visible at rest: animate INTO place from a state that already reads.
   Nothing on the page should depend on an observer firing to become legible. */
.reveal{opacity:1;transform:translateY(14px);transition:.7s var(--ease)}
.reveal.in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation-duration:.001s!important}}

/* ===== Responsive ===== */
@media(max-width:1180px){.wrap{padding:0 28px}}
@media(max-width:1024px){
  .nav-links{display:none}
  /* Opaque, not frosted. `.nav` already has a backdrop-filter, and a nested
     backdrop root cannot sample past its parent — so the blur did almost
     nothing and the hero text showed straight through the menu. */
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;
    background:var(--bg-2);border-bottom:1px solid var(--glass-border);
    border-radius:0;padding:10px 18px 16px;max-height:calc(100vh - 62px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:40}
  .nav-links.open a{padding:14px 13px;width:100%;min-height:48px;display:flex;align-items:center;
    border-radius:10px}
  .nav-links.open a+a{border-top:1px solid var(--glass-border)}
  .nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;
    transition:.25s;z-index:39;border:0}
  .nav-scrim.on{opacity:1;visibility:visible}
  .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;padding:2px 0 6px 14px;min-width:0;width:100%}
  .nav-links.open .has-drop{width:100%}
  .nav-links.open .has-drop>a{width:100%}
  .burger{display:flex}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:46px}
  .split.rev .split-media{order:0}
  .hero-visual{max-width:480px;margin:0 auto}
  .offers,.cards.c4,.stats{grid-template-columns:1fr 1fr}
  .cards.c3,.team-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr;gap:40px 0}.process::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:680px){
  .wrap{padding:0 18px}
  .section{padding:74px 0}
  .page-hero{padding:150px 0 50px}
  .hero{padding:130px 0 70px}
  .offers,.cards.c2,.cards.c3,.cards.c4,.stats,.team-grid{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .hero-float.top{left:-4px;top:14px}.hero-float.bot{right:-2px}
  .hero-float .num{font-size:1.4rem}
  .hero-card img{height:430px}
  .cta-band{padding:38px 22px}
  .contact-card{padding:26px}
  .footer-grid{grid-template-columns:1fr}
  #map{height:min(52vh,380px)}
  /* keep the language code visible: hiding it left a bare chevron that
     reads as a mystery control. There is spare room in the header. */
  .lang-btn{padding:0 10px;gap:5px}
  .lang-btn .lang-label{display:block;font-size:.8rem}
}

/* ============================================================
   ===============  2026 UPGRADE LAYER  =======================
   Apple-style typography · richer glassmorphism · motion
   ============================================================ */

/* ---- Scroll progress bar ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;background:var(--grad);box-shadow:0 0 14px rgba(255,72,0,.6);transition:width .1s linear;border-radius:0 3px 3px 0}

/* ---- Gallery lightbox (full-screen viewer) ---- */
.lightbox{position:fixed;inset:0;z-index:4000;background:rgba(10,10,12,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:90vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.65);object-fit:contain}
.lightbox button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:.2s;backdrop-filter:blur(6px);line-height:1}
.lightbox button:hover{background:var(--red);border-color:var(--red)}
.lb-close{top:20px;right:24px;width:46px;height:46px;font-size:1.7rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:2rem}
.lb-prev{left:24px}.lb-next{right:24px}
@media(max-width:680px){.lb-prev,.lb-next{width:44px;height:44px;font-size:1.6rem}.lb-prev{left:10px}.lb-next{right:10px}.lb-close{right:14px;top:14px}}

/* ---- Certification badge logos (Bureau Veritas / ISO) ---- */
.cert-logos{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cert-logos img{height:132px;width:auto;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);object-fit:contain}
@media(max-width:980px){.cert-logos img{height:104px;padding:12px 14px}}
@media(max-width:560px){.cert-logos img{height:84px;padding:10px 12px}}
/* The Bureau Veritas mark is a wide banner (about 2:1) while the other three
   are near-square. Matched on height its lettering reads smaller than their
   captions, so it gets its own larger height to balance the row. */
.cert-logos img.bv{height:164px}
@media(max-width:980px){.cert-logos img.bv{height:128px}}
@media(max-width:560px){.cert-logos img.bv{height:100px}}

/* ---- Offer cards as centered service icons (General/*.png) ---- */
.offer.icon-card{background:linear-gradient(165deg,var(--glass),rgba(255,255,255,.012));min-height:360px;
  justify-content:flex-start;align-items:center;text-align:center;padding:38px 26px 30px}
.offer.icon-card::after{display:none}
.offer.icon-card img{position:static;inset:auto;width:152px;height:152px;object-fit:contain;filter:none;margin:6px 0 18px;transition:transform .5s var(--ease)}
.offer.icon-card:hover img{transform:translateY(-4px) scale(1.05)}
.offer.icon-card .onum{position:static;margin:0 0 6px}
.offer.icon-card h3{color:var(--text)}
.offer.icon-card p{max-height:none;opacity:1;overflow:visible;color:var(--muted)}
.offer.icon-card .more{opacity:1;transform:none;justify-content:center;margin-top:16px}

/* ---- Image gallery (ceramic welding internal/external) ---- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gallery img{width:100%;height:210px;object-fit:cover;border-radius:16px;border:1px solid var(--glass-border);box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s;filter:saturate(1.04)}
.gallery img:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--shadow),var(--glow)}
@media(max-width:680px){.gallery{grid-template-columns:1fr 1fr;gap:10px}.gallery img{height:150px}}

/* ---- Big hero logo above the badge ---- */
.hero-logo{height:162px;width:auto;max-width:100%;display:block;margin-bottom:24px}
@media(max-width:680px){.hero-logo{height:104px;margin-bottom:16px}}

/* ---- Map reset-view button (bottom-right) ---- */
/* ---- Map credits: collapsed behind a small (i) ---- */
.map-credits{position:absolute;left:14px;bottom:14px;z-index:500;display:flex;align-items:center}
.map-credits-btn{width:26px;height:26px;flex-shrink:0;border-radius:50%;
  background:var(--float-bg);border:1px solid var(--glass-border);color:var(--muted);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:var(--font-d);font-size:.78rem;font-weight:700;font-style:italic;
  line-height:1;cursor:pointer;transition:.2s;display:grid;place-items:center;padding:0}
.map-credits-btn:hover{color:var(--text);border-color:var(--red)}
.map-credits-panel{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .28s var(--ease),opacity .2s,padding .28s;
  background:var(--float-bg);border:1px solid var(--glass-border);border-left:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:0 13px 13px 0;font-size:.7rem;color:var(--muted);padding:6px 0;margin-left:-13px}
.map-credits.open .map-credits-panel,.map-credits:hover .map-credits-panel{
  max-width:min(70vw,300px);opacity:1;padding:6px 12px 6px 20px}
.map-credits-panel a{color:var(--muted);text-decoration:underline}
.map-credits-panel a:hover{color:var(--red-1)}

.map-reset{position:absolute;right:14px;bottom:14px;z-index:500;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:10px;background:var(--float-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);font-family:var(--font-d);
  font-size:.76rem;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:.2s}
.map-reset:hover{border-color:var(--red);color:var(--red-1)}
.map-reset svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ---- Cursor spotlight (hero) ---- */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,40%),rgba(255,72,0,.10),transparent 70%)}
.hero:hover::before{opacity:1}

/* ---- Refined glassmorphism: sheen + inner light ---- */
.gcard,.stat,.cert,.tcard,.contact-card,.hero-float,.offer{position:relative}
.gcard,.stat,.contact-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.2)}
[data-theme="light"] .gcard,[data-theme="light"] .stat,[data-theme="light"] .contact-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 30px rgba(90,50,40,.07)}
/* moving sheen that follows the pointer over glass cards */
.gcard::after,.stat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(220px circle at var(--cx,50%) var(--cy,50%),rgba(255,255,255,.10),transparent 60%)}
.gcard:hover::after,.stat:hover::after{opacity:1}
[data-theme="light"] .gcard::after,[data-theme="light"] .stat::after{background:radial-gradient(220px circle at var(--cx,50%) var(--cy,50%),rgba(255,72,0,.10),transparent 60%)}

/* One action leads. The alternative is a link, not a second button, so the
   page says what it wants instead of offering two equal choices. */
.btn-quiet{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  color:var(--muted);font-family:var(--font-d);font-weight:600;font-size:.94rem;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.btn-quiet:hover{color:var(--text);border-bottom-color:var(--red)}

/* One vertical rhythm for every section, instead of per-section padding.
   Consecutive sections collapse their shared gap, which is what the inline
   `padding-top:0` attributes used to do by hand on five separate elements. */
.section{padding-block:96px}
.section + .section{padding-top:0}
@media(max-width:760px){.section{padding-block:64px}}

/* The step the type scale was missing between 49.6px headings and 16px body. */
.lead{font-size:1.32rem;line-height:1.55;color:var(--text);max-width:62ch}
@media(max-width:760px){.lead{font-size:1.12rem}}

/* ---- Magnetic / springy buttons ---- */
.btn{will-change:transform;transition:transform .35s var(--ease-spring),box-shadow .35s,filter .3s,background .3s}
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35),transparent 80%);transform:translateX(-130%) skewX(-18deg);transition:transform .7s var(--ease)}
.btn-primary:hover::before{transform:translateX(130%) skewX(-18deg)}

/* ---- Richer reveal variants ---- */

.reveal.r-scale{transform:translateY(14px) scale(.985)}
.reveal.r-scale.in{transform:none}
.reveal.r-left{transform:translateX(-16px)}
.reveal.r-left.in{transform:none}
.reveal.r-right{transform:translateX(16px)}
.reveal.r-right.in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal{filter:none}.scroll-progress,.hero::before{display:none}}

/* ---- Animated gradient on .molten headline accents ---- */
.molten{background-size:200% auto;animation:molten-shift 7s ease-in-out infinite}
@keyframes molten-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- Offer card: glow ring on hover ---- */
.offer::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:3;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(135deg,var(--red-1),transparent 40%,transparent 60%,var(--spark));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.offer:hover::before{opacity:1}

/* ============================================================
   ===============  THREE.JS 3D SHOWCASE  =====================
   ============================================================ */
.viz3d{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--glass-border);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);min-height:560px;
  display:grid;grid-template-columns:1.55fr .95fr}
.viz3d-stage{position:relative;min-height:560px}
.viz3d-stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none;z-index:1}
.viz3d-stage canvas:active{cursor:grabbing}
.viz3d-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:28px 0 0 28px;
  box-shadow:inset 0 0 120px rgba(0,0,0,.45),inset 0 0 60px rgba(223,33,31,.08)}
.viz3d-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-family:var(--font-d);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;z-index:4;transition:opacity .5s}
.viz3d-loading.hide{opacity:0;pointer-events:none}
.viz3d-loading .ring{width:34px;height:34px;border-radius:50%;border:2px solid var(--glass-border);border-top-color:var(--red-1);animation:spin 1s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}

/* hint chip over the stage */
.viz3d-hint{position:absolute;left:22px;bottom:20px;z-index:3;display:flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:100px;background:var(--float-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);font-size:.76rem;color:var(--muted);font-family:var(--font-d);letter-spacing:.02em}
.viz3d-hint svg{width:15px;height:15px;stroke:var(--red-1);fill:none;stroke-width:1.8}
.viz3d-hint .drag-ico{animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

/* side panel */
.viz3d-panel{padding:38px 34px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--glass-border);position:relative;z-index:2}
.viz3d-panel .v3-eyebrow{font-family:var(--font-d);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--red-1);font-weight:600;margin-bottom:6px}
.viz3d-panel h3{font-size:1.55rem;margin-bottom:6px}
.viz3d-panel p{color:var(--muted);font-size:.95rem;margin-bottom:20px}
/* model switcher */
.viz3d-tabs{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.viz3d-tab{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:15px;background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text);font-family:var(--font-b);transition:.3s var(--ease)}
.viz3d-tab:hover{background:var(--glass-2);transform:translateX(4px)}
.viz3d-tab.active{border-color:var(--red);background:var(--accent-soft);box-shadow:0 0 26px rgba(223,33,31,.16)}
.viz3d-tab .tico{width:40px;height:40px;border-radius:12px;background:var(--panel);border:1px solid var(--glass-border);display:grid;place-items:center;flex-shrink:0}
.viz3d-tab.active .tico{background:var(--grad);border-color:transparent}
.viz3d-tab .tico svg{width:21px;height:21px;stroke:var(--red-1);fill:none;stroke-width:1.7}
.viz3d-tab.active .tico svg{stroke:#fff}
.viz3d-tab b{font-family:var(--font-d);font-size:.98rem;display:block}
.viz3d-tab small{color:var(--muted);font-size:.8rem}
.viz3d-tab.active small{color:rgba(244,239,234,.78)}
[data-theme="light"] .viz3d-tab.active small{color:var(--muted)}
/* spec list under panel */
.viz3d-specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.viz3d-specs span{font-family:var(--font-d);font-size:.74rem;letter-spacing:.04em;color:var(--muted);
  padding:6px 12px;border-radius:9px;background:var(--glass);border:1px solid var(--glass-border)}
.viz3d-specs span b{color:var(--red-1)}
/* toolbar buttons over the stage (top-right) */
.viz3d-tools{position:absolute;top:18px;right:18px;z-index:3;display:flex;gap:8px}
.viz3d-tools button{width:40px;height:40px;border-radius:11px;background:var(--float-bg);border:1px solid var(--glass-border);backdrop-filter:blur(12px);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:.25s}
.viz3d-tools button:hover{border-color:var(--red);color:var(--red-1)}
.viz3d-tools button.on{background:var(--accent-soft);border-color:var(--red);color:var(--red-1)}
.viz3d-tools button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

@media(max-width:980px){
  .viz3d{grid-template-columns:1fr}
  .viz3d-stage{min-height:440px;order:-1}
  .viz3d-stage::after{border-radius:28px 28px 0 0}
  .viz3d-panel{border-left:0;border-top:1px solid var(--glass-border)}
}
@media(max-width:680px){.viz3d-stage{min-height:360px}.viz3d-panel{padding:26px 22px}}

/* ---- FLIR thermal-view HUD (over the 3D stage) ---- */
.flir-hud{position:absolute;inset:0;z-index:2;pointer-events:none;display:none;font-family:var(--font-d);
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.07) 3px 4px)}
.viz3d-stage.flir .flir-hud{display:block}
.viz3d-stage.flir{background:#000}
.flir-hud .fh-tag{position:absolute;top:16px;left:20px;font-size:.7rem;letter-spacing:.22em;color:#e8ff9a;text-shadow:0 0 6px rgba(0,0,0,.8)}
.flir-hud .fh-temp{position:absolute;bottom:16px;right:20px;font-size:1.1rem;font-weight:700;color:#fff;text-shadow:0 0 8px rgba(255,120,0,.9)}
.flir-hud .fh-cross{position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%)}
.flir-hud .fh-cross::before,.flir-hud .fh-cross::after{content:"";position:absolute;background:#e8ff9a;opacity:.85}
.flir-hud .fh-cross::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.flir-hud .fh-cross::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}

/* ============================================================
   ===========  PER-SERVICE ACCENT THEMES (deck)  =============
   Each service page adopts its deck colour; logo stays red.
   ============================================================ */
body[data-svc="diagnosis"]{
  --red:#d97e22;--red-1:#f59b3c;--red-2:#bd6c1c;--red-3:#8f5014;--spark:#ffb24d;
  --accent:var(--red);--accent-soft:rgba(217,126,34,.16);--glow:0 0 60px rgba(217,126,34,.30);
  --grad:linear-gradient(120deg,#f59b3c,#d97e22 45%,#8f5014);
  --grad-text:linear-gradient(110deg,#ffce9a,#f59b3c 45%,#d97e22);
}
body[data-svc="cold"]{
  --red:#5d7f93;--red-1:#8fb1c4;--red-2:#4c6a7c;--red-3:#39505e;--spark:#9cc4d8;
  --accent:var(--red);--accent-soft:rgba(93,127,147,.20);--glow:0 0 60px rgba(93,127,147,.32);
  --grad:linear-gradient(120deg,#a8cadc,#5d7f93 45%,#39505e);
  --grad-text:linear-gradient(110deg,#d4e6ee,#a8cadc 45%,#7298ab);
}
body[data-svc="steel"]{
  --red:#1c8f8f;--red-1:#42bcb5;--red-2:#157372;--red-3:#0f5a59;--spark:#37c2b8;
  --accent:var(--red);--accent-soft:rgba(28,143,143,.18);--glow:0 0 60px rgba(28,143,143,.30);
  --grad:linear-gradient(120deg,#48cabf,#1c8f8f 45%,#0f5a59);
  --grad-text:linear-gradient(110deg,#9fe7e1,#48cabf 45%,#1c8f8f);
}
/* hot keeps the brand red (default) */

/* ============================================================
   ===========  HERO FLOAT CARDS + RESPONSIVE STATS  =========
   ============================================================ */
/* floating cards: diagonal placement so neither overlaps, both visible */
.hero-float{max-width:230px;z-index:6}
.hero-float.top{top:24px;left:auto;right:-20px;bottom:auto}
.hero-float.bot{bottom:28px;left:-20px;right:auto;top:auto}
@media(max-width:1100px){.hero-float.top{right:-6px}.hero-float.bot{left:-6px}}
@media(max-width:620px){
  .hero-visual{display:flex;flex-direction:column;gap:12px}
  .hero-float{position:static;max-width:none;width:100%}
  .hero-float.top,.hero-float.bot{inset:auto}
}

/* stat cards: wider 2x2 boxes, number never wraps */
.stat{min-width:0;padding:34px 32px}
.stat .num{font-size:clamp(2.4rem,3.2vw,3.2rem);white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
.stat .lbl{font-size:clamp(.85rem,1vw,.92rem);line-height:1.4}

/* ============================================================
   ===========  QUICK-NAV (mobile hide)  =====================
   ============================================================ */
@media(max-width:1024px){.quicknav{display:none}.nav-links{margin-left:0}}

/* ============================================================
   ===========  GDPR COOKIE CONSENT  =========================
   ============================================================ */
.cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:3000;max-width:560px;margin:0 auto;
  background:var(--popup-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);
  transform:translateY(160%);transition:transform .5s var(--ease-spring)}
.cookie.show{transform:none}
.cookie h4{font-size:1rem;margin-bottom:6px}
.cookie p{color:var(--muted);font-size:.86rem;margin-bottom:14px}
.cookie p a{color:var(--red-1);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{padding:11px 20px;font-size:.86rem}
@media(max-width:560px){.cookie-actions .btn{flex:1;justify-content:center}}

/* ============================================================
   ===========  LOCATIONS — list height + details panel  =====
   ============================================================ */
.loc-list{gap:8px}
.loc{padding:13px 16px}
.loc small{font-size:.78rem}
/* details panel under the map (people etc.) */
.loc-detail{margin-top:18px;border-radius:18px;border:1px solid var(--glass-border);background:linear-gradient(160deg,var(--glass),rgba(255,255,255,.01));backdrop-filter:blur(14px);padding:24px 26px;opacity:0;transform:translateY(14px);transition:.45s var(--ease)}
.loc-detail.in{opacity:1;transform:none}
.loc-detail .ld-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.loc-detail .ld-tag{font-family:var(--font-d);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-1);background:var(--accent-soft);border:1px solid var(--glass-border);padding:3px 10px;border-radius:7px}
.loc-detail h3{font-size:1.4rem}
.loc-detail .ld-addr{color:var(--muted);font-size:.92rem;margin:4px 0 14px;max-width:60ch}
.loc-detail .ld-contacts{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.loc-detail .ld-contacts a{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:.9rem}
.loc-detail .ld-contacts a:hover{color:var(--red-1)}
.loc-detail .ld-contacts svg{width:16px;height:16px;stroke:var(--red-1);fill:none;stroke-width:1.8}
.ld-people-h{font-family:var(--font-d);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.ld-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.person{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-border)}
.person .pavatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:var(--font-d);font-weight:700;font-size:1rem;overflow:hidden}
.person .pavatar img{width:100%;height:100%;object-fit:cover}
.person b{font-family:var(--font-d);font-size:.92rem;display:block}
.person small{color:var(--muted);font-size:.78rem}

/* ============================================================
   ===========  3D GLOBE (about page)  =======================
   ============================================================ */
.globe-wrap{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--glass-border);
  background:radial-gradient(circle at 50% 42%,rgba(223,33,31,.10),transparent 62%),linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
#globe-stage{position:relative;height:520px;width:100%}
#globe-stage canvas{display:block}
@media(max-width:680px){#globe-stage{height:400px}}

/* ============================================================
   ===========  LEFT SERVICES RAIL (hover)  ==================
   ============================================================ */
.svcrail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:950;display:flex;align-items:center}
.svcrail-btn{width:40px;height:58px;border:1px solid var(--glass-border);border-left:0;border-radius:0 14px 14px 0;background:var(--nav-bg-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;box-shadow:4px 0 20px rgba(0,0,0,.28)}
.svcrail-btn span{width:17px;height:2px;background:var(--text);border-radius:2px;transition:.3s var(--ease)}
.svcrail-menu{width:0;overflow:hidden;opacity:0;white-space:nowrap;background:var(--drop-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-border);border-left:0;border-radius:0 16px 16px 0;box-shadow:var(--shadow);transition:width .35s var(--ease),opacity .3s,padding .35s}
.svcrail:hover .svcrail-menu,.svcrail:focus-within .svcrail-menu{width:228px;opacity:1;padding:16px 18px}
.svcrail-menu .svcrail-h{display:block;font-family:var(--font-d);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-1);margin-bottom:12px}
.svcrail-menu a{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:9px;color:var(--muted);font-size:.93rem;transition:.2s}
.svcrail-menu a:hover{background:var(--glass);color:var(--text);transform:translateX(3px)}
.svcrail-menu a .dico{width:8px;height:8px;border-radius:2px;background:var(--red);flex-shrink:0}
.svcrail:hover .svcrail-btn span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.svcrail:hover .svcrail-btn span:nth-child(2){opacity:0}
.svcrail:hover .svcrail-btn span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ============================================================
   ===========  LOCATIONS — 2-column bento selector  ==============
   ============================================================ */
.loc-right{display:flex;flex-direction:column;gap:14px;height:600px}
/* 2 columns: 10 offices fill 5 even rows (3 across left the last one alone) */
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;flex:0 0 auto}
.bento{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:9px 14px;min-height:56px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;transition:.22s var(--ease);overflow:hidden;position:relative}
.bento::before{content:"";position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red)}
.bento.hq::before{content:"★";background:none;box-shadow:none;color:var(--red);font-size:.8rem;width:auto;height:auto;top:9px;right:11px}
.bento .bpin{display:none}
.bento:hover,.bento.active{border-color:var(--red);background:var(--glass-2);transform:translateY(-2px)}
.bento.active{box-shadow:0 0 22px var(--accent-soft)}
.bento b{font-family:var(--font-d);font-size:.86rem;line-height:1.1;padding-right:14px}
.bento small{color:var(--muted);font-size:.7rem;line-height:1.2}
/* detail sits under the bento grid and fills the rest of the map height */
.loc-detail{margin-top:0;flex:1 1 auto;overflow:auto}

/* ============================================================
   ===========  MOBILE RESPONSIVE PASS  ======================
   ============================================================ */
@media(max-width:768px){
  .svcrail{display:none}
  .nav-inner{padding:9px 14px;gap:10px}
  .brand-logo{height:34px}
  .stats{grid-template-columns:1fr 1fr}
  .map-layout{grid-template-columns:1fr!important}
  .loc-right{height:auto}
  /* Pick an office by tapping a tile, with the map still on screen above it.
     Two across at every width so the 10 offices always make even rows. */
  .loc-grid{height:auto;gap:8px}
  .bento{min-height:0;padding:10px 12px}
  .bento b{font-size:.82rem}
  .bento small{font-size:.66rem}
  .bento::before{top:9px;right:9px;width:7px;height:7px}
  .loc-detail .ld-people{grid-template-columns:1fr}
  .viz3d-panel h3{font-size:1.35rem}
  .cta-band{padding:40px 22px}
  .section-head{margin-bottom:42px}
}
@media(max-width:480px){
  .stats{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.2rem,9vw,3rem)}
  .nav-links.open{padding:12px 16px 16px}
  .foot-logo{height:44px}
  .cookie{left:12px;right:12px;bottom:12px}
}

/* ---- Scroll-scrubbed inspection scenes (endoscopy / thermography) ---- */
@media(max-width:768px){
}

/* ---------------------------------------------------------------------------
   Legal pages (privacy / cookie policy). The text was ported from the old
   WordPress site and brings two things a phone cannot handle: bare URLs like
   http://www.garanteprivacy.it/web/guest/home/docweb/-/docweb-display/... which
   have no break opportunity and rendered 486px wide, and a five-column cookie
   table that rendered 521px wide. Either one drags the whole DOCUMENT sideways,
   so the entire page scrolled horizontally on a 375px screen.
   Fix: let long words break, and give the table its own scroll box so the
   overflow stays inside the table instead of the page.
   --------------------------------------------------------------------------- */
.legal{overflow-wrap:anywhere}
.legal a{overflow-wrap:anywhere;word-break:break-word}
.legal table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-collapse:collapse;margin:18px 0;font-size:.86rem}
.legal table td,.legal table th{padding:8px 10px;border:1px solid var(--glass-border);
  vertical-align:top;min-width:88px}
.legal table th{text-align:left;font-family:var(--font-d);font-weight:600}
@media(max-width:760px){
  .legal table{font-size:.78rem}
  .legal table td,.legal table th{padding:6px 8px;min-width:76px}
}

/* ---------------------------------------------------------------------------
   Mobile tap targets. Footer links rendered 24px tall on every page — they are
   full-width rows, so only the height was short. Padding raises the touch box
   to 44px (WCAG 2.5.5) without moving the text or changing the desktop layout.
   The negative margin keeps the visual rhythm identical to before.
   --------------------------------------------------------------------------- */
@media(max-width:760px){
  .footer-col a{padding:10px 0;margin-bottom:0;min-height:44px;
    display:flex;align-items:center}
  .footer-col h4{margin-bottom:6px}
  .footer-bot{font-size:.8rem;gap:10px}
  .footer-bot a{padding:6px 0;display:inline-block}
}

/* ---------------------------------------------------------------------------
   About page — the About-us film and the Google panorama.
   The film is 1904x934, an unusual 2.04:1 ultrawide, NOT 16:9. The split slot
   is about 568x480 on desktop (roughly 1.18:1), so object-fit:cover would have
   cropped well over half the frame away. The box takes the film's own ratio
   instead, so the whole frame shows and the height follows the column width.
   --------------------------------------------------------------------------- */
.split-media.is-video{aspect-ratio:1904/934}
.split-media video{width:100%;height:100%;display:block;object-fit:cover;background:#0a0a0c}

/* Before / after pair ---------------------------------------------------
   Two square cross-sections side by side: the wear as it happens, then the
   same wall rebuilt. One unit rather than two loose pictures, because the
   point is the comparison. They stack on a narrow screen. */
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;border:0;box-shadow:none;
  border-radius:0;overflow:visible;perspective:none}
.media-pair figure{margin:0;padding:16px 16px 0;border-radius:18px;overflow:hidden;border:1px solid var(--glass-border);
  box-shadow:var(--shadow);background:#0a0a0c}
.media-pair video,.media-pair img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;background:#0a0a0c;transition:none;clip-path:circle(50%)}
.media-pair figcaption{padding:12px 14px 14px;font-size:.82rem;line-height:1.45;color:var(--muted)}
.media-pair figcaption b{display:block;color:var(--red);font-weight:700;margin-bottom:4px;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:700px){.media-pair{grid-template-columns:1fr}}

.gmap{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--glass-border);
  box-shadow:var(--shadow);background:var(--panel);aspect-ratio:16/9;max-height:480px}
.gmap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9)}
/* No invert here: this is a photographic panorama, not a map tile set —
   inverting it would turn the sky black and the building negative. */
[data-theme="dark"] .gmap iframe{filter:brightness(.93) saturate(.92)}
.gmap-ask{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;text-align:center;padding:28px;background:var(--glass)}
.gmap-ask svg{width:38px;height:38px;stroke:var(--red-1);fill:none;stroke-width:1.6}
.gmap-ask p{color:var(--muted);font-size:.92rem;max-width:420px;margin:0}
.gmap-alt{color:var(--muted-2);font-size:.84rem;text-decoration:underline}
.gmap-alt:hover{color:var(--red-1)}
@media(max-width:760px){
  .gmap{aspect-ratio:4/3;max-height:340px}
  .gmap-ask{padding:20px;gap:11px}
  .gmap-ask p{font-size:.85rem}
}

/* About page: the "Certified quality" heading is left-aligned, so the badge row
   under it follows. Scoped to this page — constructions.html keeps a centred
   heading with a centred row, which is internally consistent there. */
body[data-page="about"] .certs,
body[data-page="about"] .cert-logos{justify-content:flex-start}

/* Brochure opt-in on the contact form. A checkbox inside a label so the whole
   line is a 44px tap target, not just the 16px box. */
.cf-check{display:flex;align-items:flex-start;gap:10px;margin:6px 0 16px;cursor:pointer;
  min-height:44px;padding:8px 0;color:var(--muted);font-size:.92rem;line-height:1.4}
.cf-check input{width:19px;height:19px;flex:0 0 19px;margin-top:2px;accent-color:var(--red);cursor:pointer}
.cf-check:hover{color:var(--text)}

/* ---- Diagnosis: procedural thermal-camera viewport (js/thermal.js) ---- */
.thermo-cam,.inst-cam{position:relative;aspect-ratio:16/9;margin:-6px 0 20px;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(223,33,31,.35);
  font:600 .5rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.thermo-cam canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(1.5px) saturate(1.1);transform:scale(1.04)}
/* corner brackets like the camera HUD */
.thermo-cam::before,.inst-cam::before{content:"";position:absolute;inset:7px;pointer-events:none;z-index:1;
  background:linear-gradient(#fff9,#fff9) 0 0/9px 1px,linear-gradient(#fff9,#fff9) 0 0/1px 9px,
  linear-gradient(#fff9,#fff9) 100% 0/9px 1px,linear-gradient(#fff9,#fff9) 100% 0/1px 9px,
  linear-gradient(#fff9,#fff9) 0 100%/9px 1px,linear-gradient(#fff9,#fff9) 0 100%/1px 9px,
  linear-gradient(#fff9,#fff9) 100% 100%/9px 1px,linear-gradient(#fff9,#fff9) 100% 100%/1px 9px;background-repeat:no-repeat}
.tc-hud{position:absolute;top:12px;z-index:2;text-shadow:0 0 3px #000}
.inst-cam canvas{position:absolute;inset:0;width:100%;height:100%}
.tc-bl{position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;text-shadow:0 0 3px #000}
.tc-tl{left:14px}.tc-tr{right:14px;display:flex;align-items:center;gap:4px}
.tc-tr i{width:5px;height:5px;border-radius:50%;background:#ff2a2a;animation:tcRec 1.2s steps(1) infinite}
@keyframes tcRec{50%{opacity:0}}
.tc-scale{position:absolute;right:12px;top:26px;bottom:14px;width:3px;border-radius:2px;
  background:linear-gradient(#fffcdc,#ffd63c,#fc8014,#e0285a,#800096,#20005c,#000)}
.tc-scale b{position:absolute;right:7px;font-weight:600;white-space:nowrap}
.tc-scale b:first-child{top:-2px}.tc-scale b:last-child{bottom:-2px}
.tc-cross{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);border:1px solid #fffc;border-radius:50%;pointer-events:none}
.tc-cross::before,.tc-cross::after{content:"";position:absolute;background:#fffc}
.tc-cross::before{left:50%;top:-5px;bottom:-5px;width:1px}
.tc-cross::after{top:50%;left:-5px;right:-5px;height:1px}
.tc-read{position:absolute;left:24px;top:-8px;padding:2px 4px;background:rgba(0,0,0,.55);color:#fff;white-space:nowrap;font-size:.55rem}

/* ---- Icon motion -------------------------------------------------------
   Quiet and once: line icons draw their stroke the first time they scroll into
   view (main.js sets each stroke's real length), the service pictures drift a
   few pixels on a slow loop, and hover gives a small lift with a soft red glow.
   Only cheap properties move (stroke offset, translate, transform, shadow).
   Nothing moves for visitors who asked their device for less motion. */
.ico-draw *{transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.vico,.iico{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.vico svg,.iico svg{transition:transform .45s var(--ease)}
.gcard:hover .vico,.info-row:hover .iico{transform:translateY(-3px);border-color:rgba(223,33,31,.6);
  box-shadow:0 10px 24px -12px rgba(223,33,31,.65)}
.gcard:hover .vico svg,.info-row:hover .iico svg{transform:scale(1.08)}
@keyframes icoFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.offer.icon-card img{animation:icoFloat 6s ease-in-out infinite}
.offer.icon-card:nth-child(2) img{animation-delay:-1.5s}
.offer.icon-card:nth-child(3) img{animation-delay:-3s}
.offer.icon-card:nth-child(4) img{animation-delay:-4.5s}
.offer.icon-card:hover img{filter:drop-shadow(0 12px 22px rgba(223,33,31,.32))}
@media(prefers-reduced-motion:reduce){.offer.icon-card img{animation:none}.ico-draw *{transition:none}}

/* ---- Glass ----------------------------------------------------------------
   Frosted, not see-through: a tinted fill, a real blur of what is behind it
   (with the -webkit- prefix Safari needs) and a hairline of light on the top
   edge. The bar's own blur moves to a layer behind it: an element that blurs
   is a "backdrop root", and the dropdowns inside it could only blur the bar,
   so the page showed through them unblurred (which is why they had been made
   solid). Lighter blur on phones keeps scrolling smooth. */
:root{--gl-fill:rgba(34,34,40,.55);--gl-fill-2:rgba(28,28,34,.74);--gl-edge:rgba(255,255,255,.09);--gl-blur:blur(18px) saturate(150%)}
[data-theme="light"]{--gl-fill:rgba(255,255,255,.58);--gl-fill-2:rgba(255,255,255,.78);--gl-edge:rgba(255,255,255,.9)}
.nav{backdrop-filter:none;-webkit-backdrop-filter:none}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
.dropdown,.lang-menu,.svcrail-menu{background:var(--gl-fill-2);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--gl-edge)}
.gcard,.stat,.cert,.contact-card,.loc-detail,.loc,.tcard,.offer.icon-card{
  background:linear-gradient(160deg,var(--gl-fill),var(--gl-fill-2));
  backdrop-filter:var(--gl-blur);-webkit-backdrop-filter:var(--gl-blur);box-shadow:inset 0 1px 0 var(--gl-edge)}
@media(max-width:1024px){.nav-links.open{background:var(--gl-fill-2);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}}
@media(max-width:760px){:root{--gl-blur:blur(12px) saturate(140%)}}

/* ---- Icon hover movement: one small, fitting motion per icon --------------- */
.gcard .vico svg{stroke-linecap:round;stroke-linejoin:round}
@keyframes icoSpin{to{rotate:360deg}}
@keyframes icoSwing{0%,100%{rotate:0deg}30%{rotate:9deg}70%{rotate:-7deg}}
@keyframes icoBob{0%,100%{translate:0 0}50%{translate:0 2.5px}}
@keyframes icoGlow{0%,100%{opacity:1}50%{opacity:.45}}
.gcard:hover .vico .a-spin{animation:icoSpin 2.8s linear infinite}
.gcard:hover .vico .a-swing{transform-origin:50% 10%;animation:icoSwing 1.6s ease-in-out infinite}
.gcard:hover .vico .a-bob{animation:icoBob 1.2s ease-in-out infinite}
.gcard:hover .vico .a-glow .fx{animation:icoGlow 1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.gcard:hover .vico svg,.gcard:hover .vico .fx{animation:none}}