/* ============================================================
   HITACHI Cooling & Heating — Proximus Engineering Bulgaria
   Brand-accurate premium stylesheet
   Colors (official brand guidelines):
     RED      #C3002F  (Pantone 200C)   — primary
     GRAPHITE #333333  (Pantone Black 7C)
     WHITE    #FFFFFF
     CRAFT    #EEE6DB  · BLUE #DCEBEC · SAND #F0D9C5  (secondary, editorial)
   Rule respected: RED and GRAPHITE are never combined as main color
   fields on the same surface — red stays an accent on light/dark.
   Font: Source Sans 3 (the typeface used in Hitachi catalogues).
   ============================================================ */

:root{
  --red:        #C3002F;
  --red-deep:   #9E0026;
  --graphite:   #333333;
  --graphite-d: #262626;
  --ink:        #1c1c1c;
  --white:      #FFFFFF;
  --craft:      #EEE6DB;
  --blue:       #DCEBEC;
  --sand:       #F0D9C5;
  --paper:      #FBFAF8;
  --muted:      #6E6E72;
  --line:       rgba(51,51,51,.12);

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 72px);
  --r: 14px;
  --ease: cubic-bezier(.16,1,.3,1);
  --font: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font); color:var(--ink); background:var(--white);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-size:.8rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--graphite); margin-bottom:1.1rem; display:block;
}
.eyebrow--red{ color:var(--red); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.7rem; border-radius:999px; font-weight:600; font-size:.95rem;
  letter-spacing:.01em; transition:all .4s var(--ease); border:1.5px solid transparent; cursor:pointer;
}
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow:0 16px 34px rgba(195,0,47,.30); }
.btn--lineLight{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--lineLight:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn--line{ border-color:rgba(51,51,51,.3); color:var(--graphite); }
.btn--line:hover{ border-color:var(--red); color:var(--red); transform:translateY(-2px); }
.btn--lg{ padding:1.15rem 2.5rem; font-size:1.05rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; transition:all .5s var(--ease); }
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:1.5rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav.is-scrolled{
  background:rgba(24,24,27,.82);
  backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav.is-scrolled .nav__inner{ padding-block:.85rem; }

.brand{ display:block; line-height:0; }
.brand__logo{ height:42px; width:auto; transition:height .4s var(--ease); }
.nav.is-scrolled .brand__logo{ height:32px; }

.nav__links{ display:flex; gap:2.3rem; }
.nav__links a{ font-size:.92rem; font-weight:500; color:rgba(255,255,255,.88); position:relative; transition:color .3s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--red); transition:width .35s var(--ease); }
.nav__links a:hover{ color:#fff; } .nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:1.1rem; }
.lang{ background:none; border:1.5px solid rgba(255,255,255,.4); color:#fff; border-radius:999px; padding:.42rem .8rem; font-size:.8rem; font-weight:600; letter-spacing:.05em; cursor:pointer; display:flex; gap:.4rem; transition:all .3s; }
.lang__opt{ opacity:.55; transition:opacity .3s; } .lang__opt.is-active{ opacity:1; color:var(--red); } .lang__sep{ opacity:.4; }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; }
.burger span{ width:24px; height:2px; background:#fff; transition:.3s; }

/* ============================================================
   HERO  (graphite-dominant; red only as small accent)
   ============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  color:#fff; padding:0 var(--pad); overflow:hidden;
  background:radial-gradient(120% 120% at 75% 10%, #3c3c40 0%, #2b2b2e 45%, #1c1c1f 100%);
}
.hero__kv{ position:absolute; right:-6%; bottom:-12%; width:min(70vw,920px); opacity:.05; pointer-events:none; transition:opacity .8s var(--ease); }
.hero__kv img{ width:100%; }
/* --- Hero background video (progressive enhancement; hidden until it plays) --- */
.hero__video{ position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0; transition:opacity 1.1s ease; pointer-events:none; }
.hero__video video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; transition:opacity 1.1s ease;
  background:linear-gradient(90deg, rgba(20,20,22,.88) 0%, rgba(20,20,22,.66) 44%, rgba(20,20,22,.40) 100%),
             linear-gradient(0deg, rgba(20,20,22,.9) 0%, rgba(20,20,22,0) 46%); }
.hero.is-video-playing .hero__video,
.hero.is-video-playing .hero__scrim{ opacity:1; }
.hero.is-video-playing .hero__kv{ opacity:0; }
.hero.is-video-playing .hero__product{ opacity:0; transition:opacity .9s ease; }
.hero.is-video-playing .hero__aurora{ opacity:.4; }
.hero__product{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(58vw,760px); pointer-events:none;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.5));
  animation:floaty 9s ease-in-out infinite alternate;
}
@keyframes floaty{ to{ transform:translateY(calc(-50% - 18px)); } }
.hero__product--unit{ top:50%; width:min(70vw,900px); right:-30%; animation:none; }
.hero__content{ position:relative; max-width:680px; z-index:2; }
.hero__prox{ height:34px; width:auto; margin-bottom:1.4rem; opacity:.95; }
.hero__title{
  font-weight:300; line-height:1.02; letter-spacing:-.02em;
  font-size:clamp(2.7rem,7vw,5.6rem); margin:.4rem 0 1.6rem;
}
.hero__title .strong{ font-weight:700; }
.hero__lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:rgba(255,255,255,.82); max-width:540px; margin-bottom:2.4rem; font-weight:300; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.55); z-index:2; }
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{ opacity:.3; transform:scaleY(.6);} 50%{ opacity:1; transform:scaleY(1);} }

/* ============================================================
   STRIP
   ============================================================ */
.strip{ max-width:var(--maxw); margin:0 auto; padding:3.6rem var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; border-bottom:1px solid var(--line); }
.strip__item{ text-align:center; }
.strip__item b{ font-size:clamp(2.1rem,4vw,3.1rem); font-weight:300; display:block; color:var(--graphite); letter-spacing:-.02em; }
.strip__item b::first-letter{ color:inherit; }
.strip__item span{ font-size:.85rem; color:var(--muted); letter-spacing:.04em; }

/* ============================================================
   SECTION
   ============================================================ */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,9vw,8.5rem) var(--pad); }
.section--craft{ max-width:none; background:var(--craft); }
.section--craft > *{ max-width:var(--maxw); margin-inline:auto; }
.section--graphite{ max-width:none; background:var(--graphite); color:#fff; }
.section--graphite > *{ max-width:var(--maxw); margin-inline:auto; }
.section__head{ max-width:680px; margin-bottom:3.4rem; }
.section__title{ font-weight:300; letter-spacing:-.02em; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.06; margin-bottom:1rem; }
.section__lead{ font-size:1.12rem; color:var(--muted); font-weight:300; }
.section__lead--light{ color:rgba(255,255,255,.7); }

/* ---------- Product cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:all .5s var(--ease); cursor:pointer; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-7px); box-shadow:0 30px 60px rgba(51,51,51,.13); }
.card__img{ aspect-ratio:4/3; background:linear-gradient(160deg,#f4f3f1,#fbfaf8); display:flex; align-items:center; justify-content:center; padding:1.6rem; }
.card__img img{ max-height:100%; width:auto; object-fit:contain; transition:transform .6s var(--ease); }
.card:hover .card__img img{ transform:scale(1.06); }
.card__body{ padding:1.7rem; display:flex; flex-direction:column; flex:1; }
.card__tag{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:.5rem; }
.card__body h3{ font-size:1.25rem; font-weight:600; margin-bottom:.5rem; }
.card__body p{ font-size:.95rem; color:var(--muted); margin-bottom:1.1rem; flex:1; }
.card__link{ font-size:.88rem; font-weight:600; color:var(--red); }
.card--feature{ background:var(--graphite); color:#fff; justify-content:center; }
.card--feature .card__body h3{ color:#fff; } .card--feature .card__body p{ color:rgba(255,255,255,.7); }

/* ============================================================
   STATEMENT BAND  (red-dominant; white only)
   ============================================================ */
.band{ position:relative; background:var(--red); color:#fff; overflow:hidden; padding:clamp(4rem,8vw,7rem) var(--pad); }
.band__kv{ position:absolute; right:-4%; bottom:-30%; width:min(60vw,720px); opacity:.10; pointer-events:none; }
.band__inner{ position:relative; max-width:var(--maxw); margin:0 auto; }
.band__tag{ font-style:italic; font-weight:300; letter-spacing:.02em; opacity:.85; margin-bottom:.8rem; font-size:1.05rem; }
.band__title{ font-weight:300; font-size:clamp(2rem,4.5vw,3.4rem); letter-spacing:-.02em; max-width:760px; line-height:1.08; margin-bottom:1rem; }
.band__lead{ font-weight:300; font-size:1.15rem; max-width:560px; opacity:.92; }

/* ---------- Solutions ---------- */
.sol{ display:grid; gap:1.5rem; }
.sol__item{ display:grid; grid-template-columns:1.05fr 1fr; grid-template-areas:"img txt" "panel panel"; align-items:center; column-gap:3rem; row-gap:0; background:var(--white); border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.sol__item:nth-child(even){ grid-template-columns:1fr 1.05fr; grid-template-areas:"txt img" "panel panel"; }
.sol__img{ grid-area:img; aspect-ratio:16/11; background:linear-gradient(160deg,#f4f3f1,#fff); display:flex; align-items:center; justify-content:center; padding:2rem; }
.sol__img img{ max-height:100%; width:auto; object-fit:contain; }
.sol__txt{ grid-area:txt; padding:2.4rem 2.8rem; }
.sol__txt .num{ font-size:.85rem; font-weight:700; color:var(--red); letter-spacing:.1em; }
.sol__txt h3{ font-weight:400; font-size:1.9rem; margin:.4rem 0 .7rem; letter-spacing:-.01em; }
.sol__txt p{ color:var(--muted); }

/* ============================================================
   MAP
   ============================================================ */
.map-wrap{ display:grid; grid-template-columns:1fr 330px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 30px 70px rgba(51,51,51,.10); background:var(--white); }
.map{ height:560px; width:100%; }
.map-list{ height:560px; overflow-y:auto; border-left:1px solid var(--line); }
.dealer{ padding:1.1rem 1.3rem; cursor:pointer; transition:background .25s; border-bottom:1px solid var(--line); }
.dealer:hover{ background:var(--paper); }
.dealer .city{ color:var(--red); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:.3rem; }
.dealer h4{ font-size:1rem; font-weight:600; margin-bottom:.2rem; }
.dealer span.addr{ display:block; font-size:.85rem; color:var(--muted); }
.map-note{ text-align:center; font-size:.85rem; color:var(--muted); margin-top:1.2rem; }
.dealer-tools{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.dealer-search{ flex:1; max-width:420px; padding:.85rem 1.1rem; border:1px solid var(--line); border-radius:40px;
  font-family:inherit; font-size:.95rem; color:var(--graphite); background:var(--white); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.dealer-search:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(195,0,47,.1); }
.dealer-count{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.pin{ background:var(--red); width:18px; height:18px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.3); }

/* ============================================================
   DOWNLOADS
   ============================================================ */
.dl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }
.dl{ display:block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:1.7rem; transition:all .4s var(--ease); }
.dl:hover{ background:rgba(255,255,255,.1); transform:translateY(-5px); border-color:var(--red); }
.dl__ext{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; color:#fff; background:var(--red); padding:.25rem .6rem; border-radius:6px; margin-bottom:1.4rem; }
.dl h4{ font-size:1.08rem; font-weight:600; margin-bottom:.4rem; }
.dl__meta{ font-size:.82rem; color:rgba(255,255,255,.55); }
.dl-more{ text-align:center; margin-top:2.6rem; }
.dl-more .btn--lineLight{ border-color:rgba(255,255,255,.45); color:#fff; }

/* Downloads page (light) */
.page{ background:var(--white); }
.page__hero{ padding:9rem var(--pad) 3rem; max-width:var(--maxw); margin:0 auto; }
.page__hero h1{ font-weight:300; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.02em; margin-bottom:.8rem; }
.page__lead{ color:var(--muted); font-size:1.1rem; max-width:560px; }
.dl-cat{ font-weight:600; font-size:1.3rem; margin:2.5rem 0 1.3rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.dl-cat:first-child{ margin-top:0; }
.dl-grid--light{ grid-template-columns:repeat(4,1fr); }
.dl--light{ background:var(--paper); border:1px solid var(--line); }
.dl--light:hover{ background:#fff; border-color:var(--red); }
.dl--light h4{ color:var(--ink); }
.dl--light .dl__meta{ color:var(--muted); }
.dl-note{ margin-top:2.5rem; color:var(--muted); font-size:.95rem; }
.dl-note a{ color:var(--red); }
@media (max-width:980px){ .dl-grid--light{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .dl-grid--light{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT / ENDORSEMENT
   ============================================================ */
.about{ display:grid; grid-template-columns:1.1fr 1fr; gap:4.5rem; align-items:center; }
.about__txt p{ color:var(--muted); margin-top:1rem; }
.about__art{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:linear-gradient(160deg,#f4f3f1,#fff); display:flex; align-items:center; justify-content:center; padding:2rem; }
.about__art img{ max-height:100%; width:auto; object-fit:contain; }
.endorse{ display:flex; align-items:center; gap:1.1rem; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.endorse__logo{ height:38px; width:auto; }
.endorse__txt{ display:flex; flex-direction:column; font-size:.85rem; line-height:1.4; }
.endorse__txt b{ font-weight:700; }
.endorse__txt span{ color:var(--muted); }

/* ============================================================
   WHY HITACHI — features
   ============================================================ */
.feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.feat{ padding:2rem 1.6rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white); transition:all .5s var(--ease); }
.feat:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(51,51,51,.10); border-color:transparent; }
.feat__ic{ width:38px; height:38px; color:var(--red); margin-bottom:1.3rem; stroke-linecap:round; stroke-linejoin:round; }
.feat h3{ font-size:1.15rem; font-weight:600; margin-bottom:.5rem; }
.feat p{ font-size:.93rem; color:var(--muted); }

/* ============================================================
   TECHNOLOGIES / HEALTHY AIR
   ============================================================ */
.tech__head{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:end; margin-bottom:3.4rem; }
.tech__lead{ font-size:1.08rem; }
.tech__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.tech__item{ padding:2rem 1.5rem; border:1px solid rgba(255,255,255,.14); border-radius:var(--r); background:rgba(255,255,255,.04); transition:all .5s var(--ease); }
.tech__item:hover{ transform:translateY(-6px); background:rgba(255,255,255,.08); border-color:var(--red); }
.tech__ic{ width:46px; height:46px; object-fit:contain; margin-bottom:1.2rem; }
.tech__item h3{ font-size:1.15rem; font-weight:600; margin-bottom:.5rem; color:#fff; }
.tech__item p{ font-size:.9rem; color:rgba(255,255,255,.66); }

/* ============================================================
   CONTACT  (graphite; form)
   ============================================================ */
.contact{ background:var(--graphite-d); color:#fff; padding:clamp(4.5rem,9vw,7.5rem) var(--pad); }
.contact__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start; }
.contact__info h2{ font-weight:300; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; margin-bottom:1rem; }
.contact__lead{ color:rgba(255,255,255,.72); font-size:1.08rem; margin-bottom:2rem; max-width:440px; }
.offices{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-bottom:2.2rem; }
.office{ display:flex; flex-direction:column; gap:.25rem; }
.office__city{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:.35rem; }
.office a{ font-size:1rem; color:#fff; }
.office a:hover{ color:var(--red); }
.office__addr{ font-size:.88rem; color:rgba(255,255,255,.6); margin-top:.25rem; }
.contact__iso{ height:80px; width:auto; border-radius:8px; }

.contact__form{ display:flex; flex-direction:column; gap:1.2rem; }
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:1.3rem 1rem .6rem; color:#fff; font-family:var(--font); font-size:1rem; transition:border .3s, background .3s;
}
.field textarea{ resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--red); background:rgba(255,255,255,.09); }
.field label{ position:absolute; left:1rem; top:1rem; color:rgba(255,255,255,.5); font-size:1rem; pointer-events:none; transition:all .25s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:.45rem; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--red);
}
.contact__form .btn{ align-self:flex-start; margin-top:.4rem; }
.contact__note{ font-size:.82rem; color:rgba(255,255,255,.45); }
.contact__note.is-ok{ color:#7ddf9a; }
.contact__note.is-err{ color:#ff8a8a; }
/* honeypot — hidden from humans, bait for bots */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#1c1c1f; color:rgba(255,255,255,.65); padding:4.5rem var(--pad) 2rem; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 2fr; gap:3rem; }
.footer__logo{ height:24px; width:auto; }
.footer__tag{ font-style:italic; font-weight:300; color:rgba(255,255,255,.5); margin:.8rem 0 1.6rem; }
.footer__prox{ height:30px; width:auto; opacity:.85; }
.footer__iso{ height:64px; width:auto; border-radius:6px; margin-top:1.2rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer__cols h4{ color:#fff; font-size:.95rem; font-weight:600; margin-bottom:1rem; }
.footer__cols a{ display:block; font-size:.9rem; padding:.25rem 0; color:rgba(255,255,255,.58); transition:color .3s; }
.footer__cols a:hover{ color:var(--red); }
.footer__legal{ max-width:var(--maxw); margin:3rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:1rem; font-size:.78rem; color:rgba(255,255,255,.4); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .hero__product{ opacity:.35; right:-20%; }
  .strip{ grid-template-columns:repeat(2,1fr); gap:2rem; }
  .cards{ grid-template-columns:1fr 1fr; }
  .feats{ grid-template-columns:1fr 1fr; }
  .tech__head{ grid-template-columns:1fr; gap:1.2rem; }
  .tech__grid{ grid-template-columns:1fr 1fr; }
  .contact__inner{ grid-template-columns:1fr; gap:2.8rem; }
  .dl-grid{ grid-template-columns:1fr 1fr; }
  .about{ grid-template-columns:1fr; gap:2.5rem; }
  .map-wrap{ grid-template-columns:1fr; }
  .map-list{ height:auto; max-height:280px; border-left:0; border-top:1px solid var(--line); }
  .footer__inner{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .cards{ grid-template-columns:1fr; }
  .feats{ grid-template-columns:1fr; }
  .tech__grid{ grid-template-columns:1fr; }
  .offices{ grid-template-columns:1fr; }
  .dl-grid{ grid-template-columns:1fr; }
  .sol__item, .sol__item:nth-child(even){ grid-template-columns:1fr; grid-template-areas:"img" "txt" "panel"; }
  .sol__txt{ padding:1.8rem; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__legal{ flex-direction:column; }
  .hero__product{ display:none; }
}

/* ============================================================
   PRODUCT & CATEGORY PAGES
   ============================================================ */
.crumb{ font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:1.4rem; letter-spacing:.02em; }
.crumb a{ color:rgba(255,255,255,.6); }
.crumb a:hover{ color:#fff; }
.crumb span{ color:rgba(255,255,255,.4); margin:0 .5rem; }

.phero{ position:relative; color:#fff; overflow:hidden;
  background:radial-gradient(120% 120% at 78% 12%, #3c3c40 0%, #2b2b2e 45%, #1c1c1f 100%);
  padding:9.5rem var(--pad) 4.5rem; }
.phero__kv{ position:absolute; right:-6%; bottom:-18%; width:min(60vw,760px); opacity:.05; pointer-events:none; }
.phero__inner{ position:relative; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.phero__eyebrow{ color:var(--red); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; margin-bottom:1rem; }
.phero h1{ font-weight:300; font-size:clamp(2.4rem,5.5vw,4.4rem); letter-spacing:-.02em; line-height:1.02; margin-bottom:1.1rem; }
.phero h1 b{ font-weight:700; }
.phero__lead{ color:rgba(255,255,255,.8); font-size:1.12rem; font-weight:300; max-width:480px; }
.badges{ display:flex; gap:.6rem; flex-wrap:wrap; margin:1.8rem 0; }
.badge{ border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.45rem 1rem; font-size:.82rem; color:rgba(255,255,255,.92); }
.phero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.4rem; }
.phero__media{ display:flex; align-items:center; justify-content:center; }
.phero__media img{ max-height:440px; width:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }

.pspecs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1.1rem; }
.pspec{ text-align:center; padding:1.8rem 1rem; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.pspec b{ display:block; font-weight:300; font-size:clamp(1.8rem,3.2vw,2.6rem); color:var(--graphite); letter-spacing:-.02em; }
.pspec span{ font-size:.85rem; color:var(--muted); }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gallery figure{ border-radius:var(--r); overflow:hidden; background:linear-gradient(160deg,#f4f3f1,#fff); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:1rem; }
.gallery img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .5s var(--ease); }
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figure:first-child{ background:#0e0e10; padding:0; }
.gallery figure:first-child img{ object-fit:cover; }

.spectable{ width:100%; border-collapse:collapse; }
.spectable caption{ text-align:left; font-size:.78rem; color:var(--muted); margin-bottom:1rem; }
.spectable th, .spectable td{ text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.spectable thead th{ color:#fff; background:var(--graphite); font-weight:600; }
.spectable tbody th{ color:var(--muted); font-weight:600; width:34%; }
.spectable tbody tr:hover{ background:var(--paper); }

.pdl-band{ background:var(--graphite); color:#fff; border-radius:var(--r); padding:2.6rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.pdl-band h3{ font-weight:400; font-size:1.5rem; margin-bottom:.3rem; }
.pdl-band p{ color:rgba(255,255,255,.7); font-size:.95rem; }

@media (max-width:900px){
  .phero__inner{ grid-template-columns:1fr; gap:2rem; text-align:left; }
  .phero__media{ order:-1; } .phero__media img{ max-height:280px; }
  .pspecs{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .pspecs{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .pdl-band{ flex-direction:column; align-items:flex-start; }
}

/* airHome 800 — technologies grid (dense, dark cards) */
.feats--tech{ grid-template-columns:repeat(auto-fit,minmax(208px,1fr)); gap:1.2rem; }
.feats--tech .feat{ background:var(--graphite); border-color:transparent; }
.feats--tech .feat:hover{ background:var(--graphite-d); transform:translateY(-6px); }
.feats--tech .feat h3{ color:#fff; font-size:1.08rem; }
.feats--tech .feat p{ color:rgba(255,255,255,.65); font-size:.9rem; }
.feats--tech img.ticon{ width:40px; height:40px; object-fit:contain; margin-bottom:1.1rem; }
.feats--tech svg.ticon{ width:40px; height:40px; margin-bottom:1.1rem; stroke:#fff; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Spec table — highlighted retail price row */
.spectable tr.price td{ font-weight:700; color:var(--red); font-size:1.08rem; }
.spectable tr.price th{ color:var(--ink); font-weight:700; }
.spectable tr.price th small{ display:block; font-weight:400; color:var(--muted); font-size:.78rem; margin-top:.2rem; }
.spectable tr.price{ background:var(--paper); }

/* Multisplit ODU table — price column highlight */
.spectable td.pcell{ color:var(--red); font-weight:700; white-space:nowrap; }
.spectable th.modelcell{ color:var(--ink); font-weight:700; }

/* ============================================================
   SPEC TABLE — horizontal slider + sticky first column
   ============================================================ */
.spec-nav{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.spec-nav__hint{ font-size:.82rem; color:var(--muted); margin-right:auto; letter-spacing:.02em; }
.spec-nav__btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--graphite); font-size:1.4rem; line-height:0; cursor:pointer; transition:all .3s var(--ease); display:flex; align-items:center; justify-content:center; }
.spec-nav__btn:hover:not(:disabled){ background:var(--red); color:#fff; border-color:var(--red); transform:translateY(-1px); }
.spec-nav__btn:disabled{ opacity:.3; cursor:default; }
.spec-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
.spec-scroll .spectable{ min-width:max-content; }
.spec-scroll .spectable tbody th{ width:240px; min-width:240px; }
.spec-scroll .spectable td{ min-width:130px; white-space:nowrap; }
.spec-scroll .spectable thead th:first-child,
.spec-scroll .spectable tbody th{ position:sticky; left:0; z-index:2; box-shadow:1px 0 0 var(--line); }
.spec-scroll .spectable thead th:first-child{ background:var(--graphite); }
.spec-scroll .spectable tbody th{ background:#fff; }
.spec-scroll .spectable tbody tr:hover th{ background:var(--paper); }
.spec-scroll .spectable tr.price th{ background:var(--paper); }

/* ============================================================
   PREMIUM FX — hero animation, hover eye-candy, grain
   ============================================================ */

/* --- Film grain (global, very subtle) --- */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Hero layering --- */
.hero{ isolation:isolate; }
.hero__aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero__aurora span{ position:absolute; border-radius:50%; filter:blur(80px); mix-blend-mode:screen; will-change:transform; }
.hero__aurora .a1{ width:48vw; height:48vw; background:radial-gradient(circle, rgba(195,0,47,.50), transparent 62%); top:-12%; right:2%; opacity:.7; animation:aurora1 17s ease-in-out infinite alternate; }
.hero__aurora .a2{ width:42vw; height:42vw; background:radial-gradient(circle, rgba(120,130,150,.30), transparent 62%); bottom:-18%; left:-4%; opacity:.6; animation:aurora2 22s ease-in-out infinite alternate; }
.hero__aurora .a3{ width:30vw; height:30vw; background:radial-gradient(circle, rgba(160,40,60,.34), transparent 62%); top:34%; left:42%; opacity:.55; animation:aurora3 26s ease-in-out infinite alternate; }
@keyframes aurora1{ to{ transform:translate(-9%,13%) scale(1.16);} }
@keyframes aurora2{ to{ transform:translate(13%,-11%) scale(1.22);} }
@keyframes aurora3{ to{ transform:translate(-16%,-9%) scale(1.12);} }

.hero__kv{ z-index:1; }
.hero__product--unit{ z-index:2; }
.hero__content{ z-index:3; }
.hero__scroll{ z-index:3; }

/* technological engineering grid (faint, radial-masked, slow drift) */
.hero__grid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask:radial-gradient(125% 95% at 72% 28%, #000 28%, transparent 78%);
          mask:radial-gradient(125% 95% at 72% 28%, #000 28%, transparent 78%);
  animation:heroGrid 46s linear infinite; }
@keyframes heroGrid{ to{ background-position:56px 56px; } }

/* slow diagonal light sweep */
.hero__sweep{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero__sweep::before{ content:""; position:absolute; top:-25%; bottom:-25%; left:-30%; width:22%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.05), transparent);
  transform:skewX(-14deg); animation:heroSweep 12s ease-in-out infinite; }
@keyframes heroSweep{ 0%{ left:-30%; } 58%,100%{ left:132%; } }

/* --- Hero entrance (staggered) --- */
@media (prefers-reduced-motion: no-preference){
  .hero__content > *{ opacity:0; animation:heroIn 1s var(--ease) forwards; }
  .hero__content > *:nth-child(1){ animation-delay:.15s; }
  .hero__content > *:nth-child(2){ animation-delay:.28s; }
  .hero__content > *:nth-child(3){ animation-delay:.41s; }
  .hero__content > *:nth-child(4){ animation-delay:.54s; }
  .hero__content > *:nth-child(5){ animation-delay:.67s; }
}
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }

/* --- Button shine sweep --- */
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; top:0; bottom:0; left:-130%; width:55%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg); pointer-events:none; }
.btn:hover::after{ animation:btnShine .85s var(--ease); }
@keyframes btnShine{ to{ left:135%; } }

/* --- Premium card hover: subtle 3D tilt + delicate edge-light --- */
.card, .feat, .tech__item, .dl{ transform-style:preserve-3d; will-change:transform; }
.card > *, .feat > *, .tech__item > *, .dl > *{ position:relative; z-index:1; }
/* delicate 1px cursor-following edge glow (masked border, not a blob) */
.card::after, .feat::after, .tech__item::after, .dl::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:3;
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%), rgba(195,0,47,.55), transparent 62%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s var(--ease);
}
.is-tilt::after{ opacity:1; }
.is-tilt{ transition:transform .12s ease-out, box-shadow .4s var(--ease) !important; }
.card.is-tilt{ box-shadow:0 28px 56px rgba(11,11,13,.15); }
/* icon life on hover */
.feat__ic, .ticon{ transition:transform .45s var(--ease); }
.feat:hover .feat__ic, .tech__item:hover .ticon{ transform:scale(1.12); }

/* --- Staggered reveal cascade --- */
.reveal{ transform:translateY(28px) scale(.99); transition-delay:calc(var(--i,0) * 65ms); }
.reveal.is-in{ transform:none; }

/* --- Solutions: image zoom + number accent --- */
.sol__img img{ transition:transform .9s var(--ease); }
.sol__item:hover .sol__img img{ transform:scale(1.07); }
.sol__txt .num{ transition:letter-spacing .4s var(--ease), color .4s; display:inline-block; }
.sol__item:hover .num{ letter-spacing:.18em; }

/* --- About: image zoom --- */
.about__art img{ transition:transform 1.1s var(--ease); }
.about:hover .about__art img{ transform:scale(1.05); }

/* --- Inspire band: shimmer tagline + light sweep + watermark drift --- */
.band__tag{ background:linear-gradient(90deg, rgba(255,255,255,.55), #fff 50%, rgba(255,255,255,.55)); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 6s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.band__kv{ animation:bandKv 20s ease-in-out infinite alternate; }
@keyframes bandKv{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(-4%,-5%,0) scale(1.1);} }
.band::after{ content:""; position:absolute; top:0; bottom:0; width:35%; pointer-events:none; z-index:0;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.08), transparent); transform:skewX(-14deg);
  animation:bandSweep 9s ease-in-out infinite; }
@keyframes bandSweep{ 0%{ left:-45%; } 60%,100%{ left:135%; } }
.band__inner{ position:relative; z-index:1; }

/* --- Technologies: drifting dot-grid (technological texture) --- */
#tech{ position:relative; overflow:hidden; }
#tech::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:32px 32px;
  opacity:.6; animation:gridDrift 28s linear infinite; }
@keyframes gridDrift{ to{ background-position:32px 32px; } }
#tech > *{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .hero__aurora span, .hero__grid, .hero__sweep::before, .band__kv, .band::after, .band__tag, #tech::before{ animation:none; }
  .btn::after{ display:none; }
  .band__tag{ -webkit-text-fill-color:#fff; }
}

/* ============================================================
   JAPANESE / PRECISE REFRESH
   ============================================================ */
:root{ --mono:"IBM Plex Mono", ui-monospace, monospace; --ease-precise:cubic-bezier(.7,0,.18,1); }

/* --- Red-dash motif: surgical red, the Hitachi tick before every label --- */
.eyebrow{ display:inline-flex; align-items:center; color:var(--graphite); }
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--red); margin-right:.85rem; flex:none;
  transform-origin:left center; }
.eyebrow--red{ color:rgba(255,255,255,.6); }       /* on dark: text muted, red lives in the dash */
.section--craft .eyebrow{ color:var(--graphite); }

/* --- Sharper, mechanical reveal (shorter, faster, precise) --- */
.reveal{ transform:translateY(16px); opacity:0; transition:opacity .55s var(--ease-precise), transform .55s var(--ease-precise); transition-delay:calc(var(--i,0) * 55ms); }
.reveal.is-in{ transform:none; opacity:1; }

/* --- Hairline section divider accent --- */
.section__head{ position:relative; }

/* --- Hero precision details --- */
.hero__title .thin, .hero__title .strong{ display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .hero__content > *{ animation:heroIn .6s var(--ease-precise) forwards; }
  .hero__title{ animation:none; opacity:1; }
  .hero__title .thin, .hero__title .strong{ clip-path:inset(0 102% 0 0); animation:wipeIn .75s var(--ease-precise) forwards; }
  .hero__title .thin{ animation-delay:.34s; }
  .hero__title .strong{ animation-delay:.5s; }
  .hero__content > *:nth-child(6){ animation-delay:.8s; }
  .eyebrow::before{ transform:scaleX(0); animation:dashDraw .5s var(--ease-precise) forwards; }
}
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
@keyframes wipeIn{ to{ clip-path:inset(0 0 0 0); } }
@keyframes dashDraw{ to{ transform:scaleX(1); } }

/* mono spec readout under hero CTAs */
.hero__spec{ margin-top:2.2rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.12em;
  color:rgba(255,255,255,.45); text-transform:uppercase; }
.hero__spec b{ color:rgba(255,255,255,.8); font-weight:500; }

/* hero vertical hairline + rotated label (precision) */
.hero__vlabel{ position:absolute; left:var(--pad); top:0; bottom:0; width:1px; background:linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.02)); z-index:3; }
.hero__vlabel span{ position:absolute; bottom:8rem; left:14px; transform:rotate(90deg); transform-origin:left center; white-space:nowrap;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.hero__vlabel::after{ content:""; position:absolute; bottom:6.6rem; left:-3px; width:7px; height:7px; border:1px solid rgba(255,255,255,.4); border-radius:50%; }

/* hero corner index mark */
.hero__index{ position:absolute; top:7.5rem; right:var(--pad); font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:rgba(255,255,255,.32); z-index:3; text-align:right; }
.hero__index b{ color:var(--red); }

/* --- Card tags: mono technical labels --- */
.card__tag, .phero__eyebrow{ font-family:var(--mono); }

@media (max-width:900px){ .hero__vlabel, .hero__index{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .hero__title .thin, .hero__title .strong{ clip-path:none; }
  .eyebrow::before{ transform:none; }
}

/* ============================================================
   SPEC CARDS ACCENT + GALLERY CAROUSEL + LIGHTBOX
   ============================================================ */
/* Key-spec cards — accented, technical */
.pspec{ position:relative; text-align:left; padding:1.7rem 1.4rem 1.5rem; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(165deg,#fff, var(--paper)); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; overflow:hidden; }
.pspec::before{ content:""; position:absolute; top:0; left:0; width:26px; height:3px; background:var(--red); transition:width .4s var(--ease); }
.pspec:hover{ transform:translateY(-5px); border-color:transparent; box-shadow:0 20px 44px rgba(11,11,13,.11); }
.pspec:hover::before{ width:54px; }
.pspec b{ display:block; font-weight:300; font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--graphite); letter-spacing:-.02em; margin:.5rem 0 .3rem; }
.pspec span{ font-size:.74rem; color:var(--muted); font-family:var(--mono); letter-spacing:.04em; line-height:1.4; display:block; }

/* Gallery → horizontal carousel */
.gallery{ display:flex; grid-template-columns:none; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding-bottom:.5rem; }
.gallery::-webkit-scrollbar{ height:6px; }
.gallery::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.14); border-radius:6px; }
.gallery figure{ flex:0 0 calc((100% - 2.4rem)/3); scroll-snap-align:start; cursor:zoom-in; position:relative; }
.gallery figure::after{ content:"⤢"; position:absolute; top:.7rem; right:.7rem; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); border-radius:9px; font-size:1rem; color:var(--graphite); opacity:0; transform:translateY(-4px); transition:all .3s var(--ease); pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.gallery figure:hover::after{ opacity:1; transform:translateY(0); }
.gallery-nav{ display:flex; justify-content:flex-end; gap:.6rem; margin-bottom:1.1rem; }
@media (max-width:900px){ .gallery figure{ flex-basis:calc((100% - 1.2rem)/2); } }
@media (max-width:560px){ .gallery figure{ flex-basis:86%; } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:9500; background:rgba(12,12,14,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:88vw; max-height:86vh; width:auto; object-fit:contain; border-radius:8px; box-shadow:0 40px 90px rgba(0,0,0,.55);
  transform:scale(.96); transition:transform .35s var(--ease); }
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close, .lightbox__nav{ position:absolute; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease); line-height:0; }
.lightbox__close{ top:1.4rem; right:1.6rem; width:46px; height:46px; border-radius:50%; font-size:1.7rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; font-size:1.9rem; }
.lightbox__prev{ left:2.5%; } .lightbox__next{ right:2.5%; }
.lightbox__close:hover, .lightbox__nav:hover{ background:var(--red); border-color:var(--red); }
@media (max-width:560px){ .lightbox__nav{ width:44px; height:44px; } .lightbox__prev{ left:1%; } .lightbox__next{ right:1%; } }

/* ============================================================
   PRODUCTS MEGA MENU
   ============================================================ */
.nav__item--mega{ position:static; }
.mega{ position:absolute; top:100%; left:0; right:0; z-index:49;
  background:rgba(20,20,22,.97); -webkit-backdrop-filter:saturate(150%) blur(18px); backdrop-filter:saturate(150%) blur(18px);
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s; }
.nav__item--mega:hover > .mega, .mega:hover{ opacity:1; visibility:visible; transform:none; }
.mega::before{ content:""; position:absolute; left:0; right:0; top:-28px; height:28px; }
.mega__inner{ max-width:var(--maxw); margin:0 auto; padding:2.6rem var(--pad) 2.8rem; display:grid; grid-template-columns:repeat(5,1fr) 1.25fr; gap:2.2rem; }
.mega__col h4{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; font-weight:600; margin-bottom:1.1rem; display:flex; align-items:center; }
.mega__col h4::before{ content:""; width:18px; height:2px; background:var(--red); margin-right:.6rem; flex:none; }
.mega__col h4 a{ color:#fff; }
.mega__col a{ display:block; color:rgba(255,255,255,.62); padding:.34rem 0; font-size:.9rem; transition:color .25s var(--ease), padding-left .25s var(--ease); }
.mega__col > a:hover{ color:#fff; padding-left:.45rem; }
.mega__promo{ border-left:1px solid rgba(255,255,255,.1); padding-left:2rem; display:flex; flex-direction:column; justify-content:space-between; }
.mega__promo-img{ border-radius:10px; overflow:hidden; background:linear-gradient(160deg,#2a2a2e,#161618); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; padding:1rem; margin-bottom:1rem; }
.mega__promo-img img{ max-height:100%; width:auto; object-fit:contain; }
.mega__promo h5{ color:#fff; font-size:1rem; font-weight:600; margin-bottom:.3rem; }
.mega__promo p{ color:rgba(255,255,255,.55); font-size:.82rem; margin-bottom:.9rem; }
.mega__promo .btn{ align-self:flex-start; padding:.6rem 1.2rem; font-size:.82rem; }
@media (max-width:980px){ .mega{ display:none !important; } }

/* ============================================================
   CONTACT / DEALERS / ABOUT PAGES
   ============================================================ */
.offices-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:2.5rem; }
.office-card{ border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.8rem; background:linear-gradient(165deg,#fff,var(--paper)); position:relative; transition:transform .4s var(--ease), box-shadow .4s; }
.office-card::before{ content:""; position:absolute; top:0; left:0; width:26px; height:3px; background:var(--red); }
.office-card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(11,11,13,.10); }
.office-card__city{ display:block; font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); font-weight:500; margin-bottom:1.3rem; }
.office-card ul{ list-style:none; display:flex; flex-direction:column; gap:1rem; }
.office-card li{ display:flex; flex-direction:column; gap:.2rem; }
.office-card li > span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.office-card li a, .office-card li b{ font-size:1rem; color:var(--ink); font-weight:500; }
.office-card li a:hover{ color:var(--red); }
.office-map{ height:420px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:0 26px 60px rgba(11,11,13,.08); }
@media (max-width:900px){ .offices-grid{ grid-template-columns:1fr; } }

/* Become a dealer */
.dealer-cta{ background:var(--graphite); color:#fff; }
.benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:1rem; }
.benefit{ padding:1.8rem 1.5rem; border:1px solid rgba(255,255,255,.14); border-radius:var(--r); background:rgba(255,255,255,.04); }
.benefit svg{ width:34px; height:34px; stroke:var(--red); fill:none; stroke-width:1.6; margin-bottom:1rem; }
.benefit h3{ font-size:1.05rem; font-weight:600; margin-bottom:.4rem; }
.benefit p{ font-size:.9rem; color:rgba(255,255,255,.6); }
@media (max-width:900px){ .benefits{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .benefits{ grid-template-columns:1fr; } }

/* About */
.about-story{ display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; }
.about-story__img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:linear-gradient(160deg,#f4f3f1,#fff); display:flex; align-items:center; justify-content:center; padding:2rem; }
.about-story__img img{ max-height:100%; width:auto; object-fit:contain; }
.about-story p{ color:var(--muted); margin-top:1rem; }
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.tl{ padding:1.8rem 1.4rem; border-top:2px solid var(--red); background:var(--paper); border-radius:0 0 var(--r) var(--r); }
.tl b{ display:block; font-family:var(--mono); font-size:1.5rem; color:var(--graphite); font-weight:500; margin-bottom:.4rem; }
.tl span{ font-size:.9rem; color:var(--muted); }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:900px){ .about-story{ grid-template-columns:1fr; gap:2rem; } .timeline{ grid-template-columns:1fr 1fr; } .values{ grid-template-columns:1fr; } }

/* ===================== SOLUTIONS — EXPANDABLE SERIES ===================== */
.sol__toggle{ margin-top:1.4rem; display:inline-flex; align-items:center; gap:.55rem; background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red); transition:gap .35s var(--ease); }
.sol__toggle:hover{ gap:.85rem; }
.sol__chev{ transition:transform .45s var(--ease-precise); }
.sol__item.is-open .sol__chev{ transform:rotate(180deg); }
/* panel spans the full width of the 2-col row and animates open */
.sol__panel{ grid-area:panel; display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .55s var(--ease-precise), opacity .4s var(--ease); }
.sol__panel-in{ overflow:hidden; min-height:0; }
.sol__item.is-open .sol__panel{ grid-template-rows:1fr; opacity:1; }
.sol__chips{ display:grid; grid-template-columns:repeat(6,1fr); gap:.9rem; padding:1.6rem 0 0; border-top:1px solid var(--line); margin:0 2.8rem; }
.schip{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1.1rem .7rem;
  background:var(--white); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--graphite);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.schip:hover{ transform:translateY(-4px); border-color:rgba(195,0,47,.4); box-shadow:0 14px 30px -18px rgba(51,51,51,.4); }
.schip__ic{ height:54px; display:flex; align-items:center; justify-content:center; }
.schip__ic img{ max-height:54px; width:auto; object-fit:contain; }
.schip__t{ font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; line-height:1.3; color:var(--graphite); }
.sol__more{ display:inline-flex; align-items:center; gap:.4rem; margin:1.4rem 2.8rem 1.8rem; font-weight:600; font-size:.95rem;
  color:var(--red); text-decoration:none; transition:gap .35s var(--ease); }
.sol__more:hover{ gap:.8rem; }
@media (max-width:900px){
  .sol__chips{ grid-template-columns:repeat(3,1fr); margin:0 1.8rem; }
  .sol__more{ margin:1.2rem 1.8rem 1.6rem; }
}
@media (max-width:540px){ .sol__chips{ grid-template-columns:repeat(2,1fr); } }

/* ===================== COMING-SOON / IN-PREPARATION ===================== */
.card--soon{ cursor:default; }
.card--soon .card__img{ opacity:.9; }
.card--soon:hover{ transform:none; }
.card__status{ display:inline-block; margin-top:.7rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:30px; padding:.32rem .8rem; }
.card__status--soon{ color:var(--red); border-color:rgba(195,0,47,.32); }
.notice{ max-width:760px; margin:0 auto; text-align:center; }
.notice__badge{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:1.1rem; }
.notice__badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(195,0,47,.14); }