/* ==========================================================================
   BG GROUP · PREMIUM DESIGN SYSTEM  v2.0
   One token set drives every page. To retune the brand, edit :root only.
   ========================================================================== */
:root{
  /* Brand tokens — keep aligned with the BG Group logo palette */
  --ink:        #0A111F;   /* carbon navy — steel at night */
  --ink-2:      #101A2E;   /* raised dark surface */
  --ink-3:      #16233C;   /* card on dark */
  --mist:       #F4F6FA;   /* light section background */
  --paper:      #FFFFFF;
  --accent:     #F7941E;   /* BG amber — molten coating */
  --accent-2:   #FFC24B;   /* highlight amber */
  --accent-deep:#D96F00;
  --cyan:       #37B7E8;   /* digital / inspection blue */
  --txt-hi:     #EDF2FA;   /* text on dark */
  --txt-lo:     #9AA7BD;   /* muted on dark */
  --txt-ink:    #16202F;   /* text on light */
  --txt-mut:    #5B6779;   /* muted on light */
  --line:       rgba(255,255,255,.09);
  --line-lt:    rgba(13,25,48,.10);

  --grad-accent: linear-gradient(120deg,#F7941E 0%, #FFC24B 55%, #F7941E 100%);
  --grad-hero:   radial-gradient(1200px 700px at 78% 18%, rgba(55,183,232,.14), transparent 60%),
                 radial-gradient(900px 600px at 12% 85%, rgba(247,148,30,.12), transparent 55%);
  --grad-hero-light: radial-gradient(1200px 700px at 78% 18%, rgba(46,111,176,.06), transparent 60%),
                 radial-gradient(900px 600px at 12% 85%, rgba(247,148,29,.07), transparent 55%);
  --glow-accent: 0 0 24px rgba(247,148,30,.45), 0 8px 30px rgba(247,148,30,.28);
  --shadow-1:    0 10px 30px rgba(6,12,24,.10);
  --shadow-2:    0 24px 60px rgba(6,12,24,.16);

  --font-display:'Sora', sans-serif;
  --font-body:  'IBM Plex Sans', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1240px;
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--font-body);
  background:#FFFFFF;
  color:var(--txt-hi);
  line-height:1.65;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit }

::selection{ background:var(--accent); color:#0A111F }

/* ---------- type scale ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; letter-spacing:-.015em; font-weight:700 }
.h-display{ font-size:clamp(2.5rem, 5.4vw, 4.4rem); font-weight:800 }
.h-section{ font-size:clamp(1.9rem, 3.4vw, 2.9rem) }
.eyebrow{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.75rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--grad-accent) }
.lead{ font-size:1.08rem; color:var(--txt-lo); max-width:62ch }
.section-head{ max-width:820px; margin-bottom:3.2rem }
.section-head .h-section{ margin:.9rem 0 1rem }

/* ---------- layout ---------- */
.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto }
section{ position:relative; padding:clamp(4.5rem,8vw,7.5rem) 0 }
.section-light{ background:var(--mist); color:var(--txt-ink) }
.section-light .lead{ color:var(--txt-mut) }
.section-light h2,.section-light h3{ color:#0E1726 }

/* blueprint grid backdrop */
.grid-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(148,178,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,178,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
}
.section-light.grid-bg::before{
  background-image:
    linear-gradient(rgba(13,35,80,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,35,80,.05) 1px, transparent 1px);
}

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:1rem 1.9rem; border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s;
  will-change:transform; overflow:hidden; white-space:nowrap;
}
.btn .arr{ transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.btn:hover .arr{ transform:translateX(5px) }
.btn-primary{
  background:var(--grad-accent); background-size:200% 100%;
  color:#12100A; box-shadow:0 0 0 rgba(247,148,30,0), 0 6px 18px rgba(247,148,30,.25);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:var(--glow-accent);
  background-position:100% 0;
}
.btn-ghost{
  color:var(--txt-hi);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 0 20px rgba(247,148,30,.25);
  color:var(--accent-2);
}
.section-light .btn-ghost{ color:var(--txt-ink); border-color:rgba(13,25,48,.25); background:rgba(255,255,255,.6) }
.section-light .btn-ghost:hover{ color:var(--accent-deep) }
.btn::after{ /* sheen sweep */
  content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn:hover::after{ left:130% }

/* ---------- cards ---------- */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
}
.card-lift{ transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s }
.card-lift:hover{ transform:translateY(-8px); border-color:rgba(247,148,30,.45); box-shadow:0 20px 50px rgba(4,10,22,.5), 0 0 0 1px rgba(247,148,30,.18) }

/* ---------- reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1) }
.rv.in{ opacity:1; transform:none }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s } .rv-d4{ transition-delay:.32s }

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{
  background:#2B303A; font-size:.8rem; color:var(--txt-lo);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; gap:1rem }
.topbar .mono{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em }
.topbar a:hover{ color:var(--accent-2) }
.topbar .socials{ display:flex; gap:.9rem; align-items:center }
.topbar .socials a{ opacity:.75; transition:.3s } .topbar .socials a:hover{ opacity:1; color:var(--accent-2) }

header.site{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  background:rgba(10,17,31,.72); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transition:background .4s, box-shadow .4s;
}
header.site.scrolled{ background:rgba(8,13,24,.92); box-shadow:0 10px 40px rgba(0,0,0,.4) }
.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:1.5rem }
.brand{ display:flex; align-items:center; gap:.9rem }
.brand img{ height:52px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.4)) }
.brand .brand-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.2 }
.brand .brand-name small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.62rem; letter-spacing:.22em; color:var(--accent); text-transform:uppercase }

.menu{ display:flex; align-items:center; gap:.4rem }
.menu > li{ position:relative }
.menu > li > a, .menu > li > button{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem 1rem; font-size:.92rem; font-weight:500; color:var(--txt-hi);
  border-radius:10px; transition:color .3s, background .3s; position:relative;
}
.menu > li > a::after, .menu > li > button::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.35rem; height:2px;
  background:var(--grad-accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.menu > li > a:hover, .menu > li > button:hover,
.menu > li > a.active{ color:var(--accent-2) }
.menu > li > a:hover::after, .menu > li > button:hover::after, .menu > li > a.active::after{ transform:scaleX(1) }
.menu .caret{ width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .3s }
.menu li:hover .caret{ transform:rotate(225deg) translateY(-2px) }

/* mega menu */
.mega, .drop{
  position:absolute; top:calc(100% + 14px); opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s;
  background:rgba(13,21,38,.97); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.55); backdrop-filter:blur(20px);
  padding:1.4rem; z-index:60;
}
.mega{ left:50%; translate:-50% 0; width:min(880px, 92vw); display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1.4rem }
.drop{ left:0; min-width:280px; display:grid; gap:.2rem }
.menu li:hover .mega, .menu li:hover .drop, .menu li:focus-within .mega, .menu li:focus-within .drop{
  opacity:1; visibility:visible; transform:translateY(0);
}
.mega a, .drop a{
  display:flex; gap:.8rem; align-items:flex-start; padding:.65rem .8rem; border-radius:10px;
  font-size:.86rem; color:var(--txt-lo); transition:.3s; line-height:1.4;
}
.mega a:hover, .drop a:hover{ background:rgba(247,148,30,.08); color:var(--txt-hi); translate:4px 0 }
.mega a b, .drop a b{ color:var(--txt-hi); font-weight:600; display:block; font-size:.88rem }
.mega a:hover b{ color:var(--accent-2) }
.mega .dot{ flex:0 0 6px; width:6px; height:6px; margin-top:.55rem; border-radius:50%; background:var(--grad-accent); box-shadow:0 0 8px rgba(247,148,30,.8) }
.tag-new{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; color:#12100A;
  background:var(--grad-accent); border-radius:4px; padding:.1rem .35rem; margin-left:.4rem; vertical-align:middle;
}

.nav-cta{ display:flex; align-items:center; gap:.9rem; flex-shrink:0 }
.btn-text-short{ display:none }
.btn-text-full{ display:inline }

/* Burger button */
.burger{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  width:42px; height:42px; gap:5px; padding:8px; border-radius:10px;
  cursor:pointer; background:transparent; border:1px solid transparent;
  transition:background .25s, border-color .25s; z-index:105;
}
.burger:hover{ background:rgba(247,148,29,.08); border-color:rgba(247,148,29,.2) }
.burger span{
  display:block; width:22px; height:2px; background:#222222;
  transition:transform .3s ease, opacity .25s ease, background .3s ease; border-radius:2px;
}
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--accent,#F7941D) }
.burger.open span:nth-child(2){ opacity:0; transform:translateX(6px) }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--accent,#F7941D) }

/* Mobile drawer backdrop */
.drawer-backdrop{
  position:fixed !important; inset:0 !important; z-index:99998 !important;
  background:rgba(10,17,31,.55) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important;
  opacity:0 !important; pointer-events:none !important; transition:opacity .35s ease !important;
}
.drawer-backdrop.show{ opacity:1 !important; pointer-events:auto !important }

/* Mobile drawer panel */
.drawer{
  position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important;
  width:min(340px, 86vw) !important; max-width:100vw !important; z-index:99999 !important;
  background:#FFFFFF !important; color:#1A202C !important;
  box-shadow:-12px 0 45px rgba(10,17,31,.25) !important; border-left:1px solid var(--line,#E6E8EC) !important;
  transform:translateX(100%) !important; transition:transform .38s cubic-bezier(.22,1,.36,1) !important;
  display:flex !important; flex-direction:column !important; padding:0 !important; overflow:hidden !important;
}
.drawer.open{ transform:translateX(0) !important }

.drawer-header{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:1rem 1.25rem !important; border-bottom:1px solid var(--line,#E6E8EC) !important; background:#F8FAFC !important;
  flex-shrink:0 !important;
}
.drawer-brand{ display:flex !important; align-items:center !important; gap:.65rem !important }
.drawer-brand img{ height:38px !important; max-height:38px !important; width:auto !important; max-width:120px !important; object-fit:contain !important; display:block !important }
.drawer-brand-name{
  font-family:var(--font-display,'Sora',sans-serif) !important; font-weight:700 !important;
  font-size:.92rem !important; line-height:1.2 !important; color:#1A202C !important;
}
.drawer-brand-name small{
  display:block !important; font-family:var(--font-mono,monospace) !important; font-size:.58rem !important;
  letter-spacing:.15em !important; color:var(--accent,#F7941D) !important; text-transform:uppercase !important;
}
.drawer-close{
  display:grid !important; place-items:center !important; width:36px !important; height:36px !important; border-radius:8px !important;
  font-size:1.5rem !important; line-height:1 !important; color:#5F6672 !important; background:transparent !important;
  border:1px solid transparent !important; cursor:pointer !important; transition:color .2s, background .2s, border-color .2s !important;
}
.drawer-close:hover{ color:#1A202C !important; background:rgba(247,148,29,.12) !important; border-color:rgba(247,148,29,.25) !important }

.drawer-body{
  flex:1 !important; overflow-y:auto !important; overscroll-behavior:contain !important;
  padding:1.1rem 1.25rem 2.2rem !important; display:flex !important; flex-direction:column !important; gap:.3rem !important;
  background:#FFFFFF !important;
}
.drawer-grp{
  font-family:var(--font-mono,monospace) !important; font-size:.64rem !important; letter-spacing:.22em !important;
  text-transform:uppercase !important; color:var(--accent-deep,#D97706) !important; font-weight:700 !important; margin:.8rem 0 .4rem !important;
}
.drawer-grp:first-of-type{ margin-top:0 !important }
.drawer-nav{ display:flex !important; flex-direction:column !important; gap:.25rem !important }
.drawer-link{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:.72rem .9rem !important; border-radius:10px !important;
  font-family:var(--font-display,'Sora',sans-serif) !important; font-weight:600 !important;
  font-size:.94rem !important; color:#1E2430 !important; border-bottom:none !important;
  text-decoration:none !important; transition:all .2s ease !important; background:transparent !important;
}
.drawer-link:hover{ background:rgba(247,148,29,.08) !important; color:var(--accent-deep,#D97706) !important; transform:translateX(3px) !important }
.drawer-link.active{ background:var(--accent-soft,#FFF4E3) !important; color:var(--accent-deep,#D97706) !important }
.drawer-link .darr{ color:#9AA7BD !important; font-size:.9rem !important; transition:transform .2s ease, color .2s ease !important }
.drawer-link:hover .darr, .drawer-link.active .darr{ color:var(--accent-deep,#D97706); transform:translateX(2px) !important }
.drawer-cta{ margin-top:1.2rem !important; padding-top:.8rem !important; border-top:1px solid var(--line,#E6E8EC) !important }
.drawer-contact{ margin-top:1.2rem !important; display:flex !important; flex-direction:column !important; gap:.4rem !important }
.drawer-contact-item{
  display:flex !important; align-items:center !important; gap:.6rem !important;
  padding:.55rem .7rem !important; border-radius:8px !important;
  font-family:var(--font-body,sans-serif) !important; font-size:.82rem !important;
  color:#4B5563 !important; text-decoration:none !important; border-bottom:none !important;
  transition:background .2s, color .2s !important;
}
.drawer-contact-item:hover{ background:#F3F4F6 !important; color:#111827 !important }
.drawer-contact-item .dci-icon{ font-size:.95rem !important }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:0;
  display:flex; align-items:flex-start; padding:32px 0 56px; overflow:hidden;
}
.hero::before{ content:""; position:absolute; inset:0; background:var(--grad-hero-light); pointer-events:none }
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:4rem; align-items:start }
.hero h1 .amber{
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:shift 6s ease-in-out infinite;
}
@keyframes shift{ 0%,100%{background-position:0 0} 50%{background-position:100% 0} }
.hero .lead{ margin:1.6rem 0 2.4rem }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap }
.hero-trust{
  margin-top:3rem; display:flex; gap:2.4rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--txt-lo);
}
.hero-trust span{ display:flex; align-items:center; gap:.55rem }
.hero-trust i{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(247,148,30,.9); display:inline-block }

/* signature: coating stack cross-section */
.stack-visual{ position:relative }
.stack-frame{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.stack-frame img{ width:100%; height:420px; object-fit:cover; transform:scale(1.02); transition:transform 6s ease }
.stack-frame:hover img{ transform:scale(1.1) }
.stack-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(7,12,22,.85));
}
.stack-layers{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.3rem; z-index:2;
  display:grid; gap:7px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em;
}
.layer{
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem .9rem; border-radius:9px; color:#0D1524; font-weight:500;
  transform-origin:left; animation:layerIn 1s cubic-bezier(.2,.7,.2,1) both;
}
.layer small{ opacity:.75; font-size:.62rem }
.layer.l1{ background:linear-gradient(90deg,#FFC24B,#F7941E); animation-delay:.25s }
.layer.l2{ background:linear-gradient(90deg,#BFD2E8,#8FA9C7); animation-delay:.45s }
.layer.l3{ background:linear-gradient(90deg,#7D8CA3,#57667E); color:#EDF2FA; animation-delay:.65s }
.layer.l4{ background:repeating-linear-gradient(135deg,#39455B 0 6px,#2C3850 6px 12px); color:#C9D4E6; animation-delay:.85s }
@keyframes layerIn{ from{ opacity:0; transform:scaleX(.55) } to{ opacity:1; transform:none } }

.float-chip{
  position:absolute; z-index:3; padding:.9rem 1.1rem; border-radius:14px;
  background:rgba(13,21,38,.85); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.5); animation:floaty 7s ease-in-out infinite;
}
.float-chip .num{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.float-chip .lbl{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; color:var(--txt-lo); text-transform:uppercase }
.chip-a{ top:-26px; left:-30px } .chip-b{ bottom:96px; right:-26px; animation-delay:2.5s }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

.scroll-hint{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:3;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.3em; color:var(--txt-lo); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.scroll-hint::after{ content:""; width:1px; height:44px; background:linear-gradient(180deg, var(--accent), transparent); animation:drop 2s ease-in-out infinite }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:top } 56%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ---------- standards marquee ---------- */
.standards{ padding:1.4rem 0; border-block:1px solid var(--line); background:#F3F5F8; overflow:hidden }
.marquee{ display:flex; gap:4rem; width:max-content; animation:marq 34s linear infinite }
.standards:hover .marquee{ animation-play-state:paused }
.marquee span{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.3em; color:var(--txt-lo);
  display:flex; align-items:center; gap:1.1rem; text-transform:uppercase; white-space:nowrap;
}
.marquee span::after{ content:"◆"; color:var(--accent); font-size:.6rem }
@keyframes marq{ to{ transform:translateX(-50%) } }


/* ==========================================================================
   ABOUT · STATS
   ========================================================================== */
.about .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center }
.about-media{ position:relative }
.about-media .main{
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow-2);
  border:1px solid rgba(13,25,48,.08);
}
.about-media .main img{ width:100%; height:480px; object-fit:cover; transition:transform 5s ease }
.about-media:hover .main img{ transform:scale(1.07) }
.exp-badge{
  position:absolute; right:-22px; bottom:-26px; width:172px; aspect-ratio:1; border-radius:26px;
  background:#FFFFFF; color:#1E2634;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.15rem;
  border:1px solid rgba(247,148,30,.45); box-shadow:0 24px 50px rgba(20,24,32,.16), 0 0 30px rgba(247,148,30,.14);
}
.exp-badge b{ font-family:var(--font-display); font-size:2.7rem; font-weight:800; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.exp-badge small{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:#5B6779; max-width:110px; line-height:1.5 }
.about-points{ margin:1.8rem 0 2.2rem; display:grid; gap:.9rem }
.about-points li{ display:flex; gap:.9rem; align-items:flex-start; color:var(--txt-mut); font-size:.98rem }
.about-points .tick{
  flex:0 0 22px; height:22px; margin-top:.15rem; border-radius:7px; background:var(--grad-accent);
  display:grid; place-items:center; color:#12100A; font-size:.7rem; font-weight:700;
  box-shadow:0 4px 12px rgba(247,148,30,.35);
}
.about-points b{ color:var(--txt-ink) }

.stats{ background:#F3F5F8 }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem }
.stat{
  padding:2.2rem 1.8rem; text-align:left; position:relative; overflow:hidden;
}
.stat::before{
  content:""; position:absolute; top:0; left:0; width:44px; height:3px; border-radius:3px;
  background:var(--grad-accent); box-shadow:0 0 14px rgba(247,148,30,.7);
}
.stat .n{
  font-family:var(--font-display); font-size:clamp(2.2rem,3.4vw,3rem); font-weight:800; line-height:1;
  display:flex; align-items:baseline; gap:.15rem;
}
.stat .n em{ font-style:normal; color:var(--accent) }
.stat .l{ margin-top:.7rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-lo) }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.svc{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line-lt); box-shadow:var(--shadow-1);
  display:flex; flex-direction:column;
}
.svc-media{ position:relative; height:210px; overflow:hidden }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.2,1) }
.svc:hover .svc-media img{ transform:scale(1.12) }
.svc-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(10,17,31,.65));
  opacity:.85; transition:.5s;
}
.svc-icon{
  position:absolute; left:1.4rem; bottom:-26px; z-index:2; width:58px; height:58px; border-radius:16px;
  background:linear-gradient(150deg,#101A2E,#0A111F); border:1px solid rgba(247,148,30,.5);
  display:grid; place-items:center; box-shadow:0 12px 28px rgba(6,12,24,.4), 0 0 18px rgba(247,148,30,.25);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.svc:hover .svc-icon{ transform:translateY(-6px) rotate(-6deg) }
.svc-icon img{ width:32px; height:32px; object-fit:contain; filter:brightness(1.15) }
.svc-body{ padding:2.6rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1 }
.svc-kicker{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.5rem }
.svc h3{ font-size:1.06rem; line-height:1.4; color:#0E1726; margin-bottom:.7rem }
.svc p{ font-size:.9rem; color:var(--txt-mut); flex:1 }
.svc-link{
  margin-top:1.2rem; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.85rem; color:#0E1726;
}
.svc-link .arr{ transition:transform .35s; color:var(--accent-deep) }
.svc:hover .svc-link{ color:var(--accent-deep) }
.svc:hover .svc-link .arr{ transform:translateX(6px) }
.svc.card-lift:hover{ box-shadow:0 26px 60px rgba(10,20,40,.18), 0 0 0 1px rgba(247,148,30,.35) }

/* ==========================================================================
   DIGITAL PLATFORM + CALCULATORS
   ========================================================================== */
.digital{ overflow:hidden }
.digital .wrap{ display:grid; grid-template-columns:.95fr 1.05fr; gap:4.5rem; align-items:center }
.term{
  border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.13);
  background:#0D1526; box-shadow:0 34px 80px rgba(0,0,0,.55);
  font-family:var(--font-mono); font-size:.8rem;
}
.term-bar{ display:flex; align-items:center; gap:.45rem; padding:.8rem 1.1rem; background:#111C33; border-bottom:1px solid var(--line) }
.term-bar i{ width:11px; height:11px; border-radius:50% } 
.term-bar i:nth-child(1){ background:#FF5F57 } .term-bar i:nth-child(2){ background:#FEBC2E } .term-bar i:nth-child(3){ background:#28C840 }
.term-bar span{ margin-left:auto; font-size:.66rem; letter-spacing:.18em; color:var(--txt-lo) }
.term-body{ padding:1.4rem 1.3rem; display:grid; gap:.75rem }
.trow{ display:flex; justify-content:space-between; gap:1rem; padding:.65rem .9rem; border-radius:9px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05) }
.trow b{ color:var(--cyan); font-weight:500 }
.trow em{ font-style:normal; color:var(--accent-2) }
.tbar{ height:7px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden }
.tbar i{ display:block; height:100%; border-radius:5px; background:var(--grad-accent); width:0; transition:width 1.6s cubic-bezier(.2,.7,.2,1); box-shadow:0 0 12px rgba(247,148,30,.6) }
.calc-list{ display:grid; gap:.85rem; margin-top:2.2rem }
.calc-list a{
  display:flex; align-items:center; gap:1.1rem; padding:1.05rem 1.3rem; border-radius:14px;
  transition:.35s;
}
.calc-list a:hover{ transform:translateX(8px); border-color:rgba(247,148,30,.5); background:rgba(247,148,30,.06) }
.calc-list .cnum{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.1em }
.calc-list b{ font-family:var(--font-display); font-weight:600; font-size:.95rem }
.calc-list .go{ margin-left:auto; color:var(--accent); transition:transform .35s }
.calc-list a:hover .go{ transform:translateX(4px) }

/* ==========================================================================
   GALLERY · TESTIMONIALS · BLOG
   ========================================================================== */
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem }
.gal{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; cursor:pointer;
  border:1px solid var(--line-lt); box-shadow:var(--shadow-1);
}
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1) }
.gal:hover img{ transform:scale(1.1) }
.gal::after{
  content:""; position:absolute; inset:0; opacity:0; transition:.5s;
  background:linear-gradient(180deg, transparent 30%, rgba(10,17,31,.82));
}
.gal:hover::after{ opacity:1 }
.gal figcaption{
  position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:2; color:#fff;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(12px); transition:.5s .05s;
}
.gal:hover figcaption{ opacity:1; transform:none }
.center-cta{ text-align:center; margin-top:3rem }

.testi{ background:#F3F5F8 }
.testi-viewport{ overflow:hidden; margin-top:1rem }
.testi-track{ display:flex; gap:1.5rem; transition:transform .7s cubic-bezier(.2,.7,.2,1) }
.tcard{
  flex:0 0 calc((100% - 3rem)/3); padding:2rem; display:flex; flex-direction:column; gap:1.2rem;
}
.tcard .quote{ font-size:.95rem; color:var(--txt-lo); line-height:1.75; flex:1 }
.tcard .quote::before{ content:"“"; display:block; font-family:var(--font-display); font-size:2.6rem; line-height:.6; color:var(--accent); margin-bottom:.8rem }
.tcard .who{ display:flex; align-items:center; gap:1rem; border-top:1px solid var(--line); padding-top:1.2rem }
.tcard .who img{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid rgba(247,148,30,.55) }
.tcard .who b{ font-family:var(--font-display); font-size:.92rem; display:block }
.tcard .who small{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--txt-lo); text-transform:uppercase }
.tcard .stars{ color:var(--accent-2); letter-spacing:.2em; font-size:.8rem }
.testi-nav{ display:flex; gap:.8rem; justify-content:center; margin-top:2.4rem }
.tbtn{
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center; color:var(--txt-hi); font-size:1.1rem; transition:.35s;
  background:rgba(255,255,255,.03);
}
.tbtn:hover{ background:var(--grad-accent); color:#12100A; border-color:transparent; box-shadow:var(--glow-accent); transform:translateY(-3px) }

.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem }
.post{
  display:grid; grid-template-columns:240px 1fr; overflow:hidden; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line-lt); box-shadow:var(--shadow-1);
}
.post .pm{ overflow:hidden } .post .pm img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease }
.post:hover .pm img{ transform:scale(1.1) }
.post .pb{ padding:1.6rem; display:flex; flex-direction:column; gap:.8rem }
.post .meta{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep); display:flex; gap:1.4rem }
.post h3{ font-size:1.02rem; line-height:1.45; color:#0E1726 }
.post:hover h3{ color:var(--accent-deep) }
.post .svc-link{ margin-top:auto }

/* ==========================================================================
   CTA BAND · FOOTER
   ========================================================================== */
.cta-band{ padding:0 }
.cta-inner{
  position:relative; overflow:hidden; border-radius:26px; padding:clamp(2.8rem,6vw,4.5rem);
  background:linear-gradient(130deg,#132036 0%, #0A111F 60%), var(--ink-2);
  border:1px solid rgba(247,148,30,.3);
  display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:center;
  box-shadow:0 40px 90px rgba(0,0,0,.45), inset 0 0 80px rgba(247,148,30,.05);
}
.cta-inner::before{
  content:""; position:absolute; inset:-40%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 70%, rgba(247,148,30,.16), transparent 85%);
  animation:spin 14s linear infinite;
}
@keyframes spin{ to{ rotate:360deg } }
.cta-inner > *{ position:relative }
.cta-actions{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; justify-self:end }
.cta-phone{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; display:flex; align-items:center; gap:.8rem }
.cta-phone svg{ color:var(--accent) }

footer{ background:#070C16; border-top:1px solid var(--line); margin-top:6rem }
.foot-main{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:3rem; padding:4.5rem 0 3rem }
.foot-main h4{ font-size:.95rem; margin-bottom:1.3rem; display:flex; align-items:center; gap:.7rem }
.foot-main h4::before{ content:""; width:20px; height:2px; background:var(--grad-accent); border-radius:2px }
.foot-main p, .foot-main a, .foot-main li{ font-size:.88rem; color:var(--txt-lo) }
.foot-main a:hover{ color:var(--accent-2) }
.foot-brand img{ height:56px; margin-bottom:1.2rem }
.foot-list{ display:grid; gap:.65rem }
.foot-list a{ display:inline-flex; gap:.55rem; align-items:baseline; transition:.3s }
.foot-list a:hover{ translate:5px 0 }
.foot-list a::before{ content:"›"; color:var(--accent) }
.foot-contact li{ display:flex; gap:.8rem; margin-bottom:1rem; line-height:1.55 }
.foot-contact svg{ flex:0 0 18px; margin-top:.2rem; color:var(--accent) }
.news{ display:flex; margin-top:1.2rem; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.03) }
.news input{ flex:1; background:none; border:none; padding:.85rem 1.2rem; color:var(--txt-hi); font:inherit; font-size:.85rem; outline:none; min-width:0 }
.news button{ background:var(--grad-accent); color:#12100A; font-family:var(--font-display); font-weight:600; font-size:.8rem; padding:0 1.4rem; transition:.3s }
.news button:hover{ filter:brightness(1.1) }
.foot-social{ display:flex; gap:.7rem; margin-top:1.4rem }
.foot-social a{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line); display:grid; place-items:center;
  transition:.35s; background:rgba(255,255,255,.03);
}
.foot-social a:hover{ background:var(--grad-accent); color:#12100A; border-color:transparent; transform:translateY(-4px); box-shadow:0 8px 20px rgba(247,148,30,.35) }
.foot-bottom{
  border-top:1px solid var(--line); padding:1.4rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--txt-lo);
}
.foot-bottom nav{ display:flex; gap:1.6rem; flex-wrap:wrap }
.foot-bottom a:hover{ color:var(--accent-2) }

.to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:80; width:50px; height:50px; border-radius:14px;
  background:var(--grad-accent); color:#12100A; display:grid; place-items:center; font-size:1.1rem;
  box-shadow:var(--glow-accent); opacity:0; visibility:hidden; transform:translateY(16px); transition:.4s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none }
.to-top:hover{ transform:translateY(-4px) }

/* ==========================================================================
   DOMAIN GRAPHICS · before/after · process flow · DFT gauge · dividers
   ========================================================================== */
/* surface-profile (Rz) section divider */
.rz-divider{ display:block; width:100%; height:26px; color:rgba(247,148,30,.4) }
.section-light .rz-divider{ color:rgba(13,25,48,.18) }

/* hexagonal molecular backdrop accent */
.hex-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16zM28 60l24 14v21M28 60 4 74v21' fill='none' stroke='rgba(148,178,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 100%);
}

/* -------- before / after surface transformation slider -------- */
.transform-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center }
.ba{
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:16/9; user-select:none;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 34px 80px rgba(0,0,0,.55);
  --pos:50%; touch-action:pan-y; cursor:ew-resize; background:#1B222E;
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none; user-drag:none }
.ba-before{ z-index:1 }
.ba-after{ z-index:2; clip-path:inset(0 0 0 var(--pos)) }
/* subtle reflective sheen travelling with the reveal edge */
.ba-sheen{ position:absolute; top:0; bottom:0; left:var(--pos); z-index:3; width:120px; translate:-60% 0;
  pointer-events:none; opacity:.5; transition:opacity .3s;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14) 45%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.14) 55%, transparent) }
.ba.dragging .ba-sheen{ opacity:.9 }
/* divider line + premium industrial handle */
.ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:3px; z-index:4; translate:-50% 0;
  background:linear-gradient(180deg, rgba(247,148,30,0), var(--accent), rgba(247,148,30,0));
  box-shadow:0 0 20px rgba(247,148,30,.75); pointer-events:none }
.ba-handle{
  position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:5; pointer-events:auto;
  width:58px; height:58px; border-radius:50%; border:3px solid #fff; cursor:grab;
  background:radial-gradient(circle at 35% 30%, #FFD37A, #F7941E 55%, #C96B08);
  color:#12100A; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 6px rgba(247,148,30,.18), inset 0 2px 5px rgba(255,255,255,.5);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.ba-handle:hover{ transform:scale(1.1); box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 9px rgba(247,148,30,.24), inset 0 2px 5px rgba(255,255,255,.5) }
.ba-handle:active{ cursor:grabbing; transform:scale(1.04) }
.ba-handle:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(55,183,232,.7), 0 8px 22px rgba(0,0,0,.5) }
@media (prefers-reduced-motion:reduce){ .ba-handle{ transition:none } }

/* -------- process flow -------- */
.flow{ counter-reset:step; display:grid; gap:0; position:relative; margin-top:.6rem }
.flow li{
  position:relative; display:grid; grid-template-columns:64px 1fr; gap:1.3rem; padding:1.25rem 0;
  align-items:flex-start;
}
.flow li:not(:last-child)::before{
  content:""; position:absolute; left:31px; top:76px; bottom:-12px; width:2px;
  background:repeating-linear-gradient(180deg, rgba(247,148,30,.55) 0 6px, transparent 6px 12px);
}
.flow-icon{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center; position:relative; z-index:1;
  background:linear-gradient(150deg,#131E34,#0B1322); border:1px solid rgba(247,148,30,.4);
  box-shadow:0 12px 30px rgba(4,10,22,.5); color:var(--accent-2);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.flow li:hover .flow-icon{ transform:translateY(-4px) scale(1.05); box-shadow:0 16px 36px rgba(4,10,22,.6), 0 0 22px rgba(247,148,30,.35) }
.flow h3{ font-size:1.05rem; display:flex; align-items:baseline; gap:.7rem }
.flow h3::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; color:var(--accent); font-weight:400;
}
.flow p{ font-size:.9rem; color:var(--txt-lo); margin-top:.35rem; max-width:52ch }
/* holiday-detector pulse on the inspection step */
.pulse{ position:relative }
.pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:22px; border:1px solid rgba(247,148,30,.6);
  animation:pulseRing 2.4s ease-out infinite; pointer-events:none;
}
@keyframes pulseRing{ 0%{ opacity:.9; transform:scale(.85) } 100%{ opacity:0; transform:scale(1.25) } }

/* -------- DFT gauge -------- */
.gauge-card{ margin-top:1.5rem; padding:1.5rem; display:flex; gap:1.6rem; align-items:center }
.gauge{ width:150px; flex:0 0 150px }
.gauge .needle{ transform-origin:100px 92px; transform:rotate(-118deg); transition:transform 1.8s cubic-bezier(.2,.9,.25,1.1) }
.gauge-card.in .needle{ transform:rotate(26deg) }
.gauge-read b{ font-family:var(--font-display); font-size:1.7rem; font-weight:800 }
.gauge-read b em{ font-style:normal; font-size:.85rem; color:var(--accent); font-family:var(--font-mono); font-weight:400 }
.gauge-read small{ display:block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em; color:var(--txt-lo); text-transform:uppercase; margin-top:.3rem }
.gauge-read .ok{ color:#4ADE80 }

@media (max-width:1100px){
  .transform-wrap{ grid-template-columns:1fr; gap:3rem }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .menu{ display:none !important }
  .burger{ display:flex !important }
  .nav-cta{ gap:.6rem }
  .nav-cta .btn{ display:inline-flex !important; padding:.55rem 1.15rem; font-size:.85rem }
  .hero .wrap{ grid-template-columns:1fr; gap:3.5rem }
  .stack-frame img{ height:340px }
  .about .wrap, .digital .wrap{ grid-template-columns:1fr; gap:3rem }
  .services-grid, .gal-grid{ grid-template-columns:repeat(2,1fr) }
  .stats-grid{ grid-template-columns:repeat(2,1fr) }
  .tcard{ flex-basis:calc((100% - 1.5rem)/2) }
  .blog-grid{ grid-template-columns:1fr }
  .foot-main{ grid-template-columns:1fr 1fr }
  .cta-inner{ grid-template-columns:1fr }
  .cta-actions{ justify-self:start }
}
@media (max-width:640px){
  .topbar .socials{ display:none }
  .services-grid, .gal-grid, .stats-grid{ grid-template-columns:1fr }
  .tcard{ flex-basis:100% }
  .post{ grid-template-columns:1fr } .post .pm{ height:200px }
  .foot-main{ grid-template-columns:1fr }
  .chip-a{ left:8px; top:-18px } .chip-b{ right:8px }
  .exp-badge{ right:10px; bottom:-24px; width:140px }
  .brand .brand-name{ display:none }
  .nav-cta .btn{ padding:.48rem .9rem; font-size:.8rem }
}
@media (max-width:440px){
  .btn-text-full{ display:none !important }
  .btn-text-short{ display:inline !important }
  .nav-cta .btn{ padding:.44rem .78rem; font-size:.76rem; gap:.3rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .rv{ opacity:1; transform:none }
}
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

/* == home == */
/* ===== Hero figure: clean photo + animated coating-system overlay ===== */
.hero-figure{ position:relative; width:100%; max-width:600px; margin:0 auto; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 70px rgba(0,0,0,.55); background:#FFFFFF; aspect-ratio:1200/960 }
.hero-photo{ width:100%; height:100%; object-fit:cover; display:block }

/* coating-system animation — bottom ~22% */
.coat-anim{ position:absolute; left:0; right:0; bottom:0; height:24%; padding:.5rem .7rem .7rem;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  background:linear-gradient(to top, rgba(10,17,31,.94) 55%, rgba(10,17,31,.55) 80%, rgba(10,17,31,0));
  overflow:hidden }
.coat-layer{ position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:.34rem .7rem; border-radius:7px; font-family:var(--font-mono,'IBM Plex Mono',monospace);
  font-size:.6rem; letter-spacing:.08em; color:#fff; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); opacity:0; transform:translateY(14px);
  animation:coatIn .55s cubic-bezier(.2,.7,.2,1) forwards }
.coat-layer span{ position:relative; z-index:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.coat-layer b{ position:relative; z-index:2; font-weight:500; color:rgba(255,255,255,.7); white-space:nowrap; padding-left:.5rem }
.cl-top{ background:linear-gradient(90deg,#F7941E,#FFC24B); color:#12100A; border-color:rgba(247,148,30,.5); animation-delay:.55s }
.cl-top b{ color:rgba(18,16,10,.7) }
.cl-int{ background:linear-gradient(90deg,rgba(120,150,190,.5),rgba(120,150,190,.28)); animation-delay:.4s }
.cl-pri{ background:linear-gradient(90deg,rgba(90,115,150,.45),rgba(90,115,150,.24)); animation-delay:.25s }
.cl-sub{ background:repeating-linear-gradient(135deg,rgba(120,130,145,.32) 0 7px,rgba(120,130,145,.16) 7px 14px); animation-delay:.1s }
@keyframes coatIn{ to{ opacity:1; transform:none } }

/* soft glowing pulse on the topcoat */
.cl-top::after{ content:""; position:absolute; inset:0; border-radius:7px; z-index:1;
  box-shadow:0 0 0 0 rgba(247,148,30,.55); animation:coatPulse 3s ease-in-out infinite 1.2s }
@keyframes coatPulse{ 0%,100%{ box-shadow:0 0 14px 0 rgba(247,148,30,.25) } 50%{ box-shadow:0 0 22px 3px rgba(247,148,30,.5) } }

/* light sweep moving across all layers */
.coat-sweep{ position:absolute; left:0; right:0; bottom:0; height:24%; z-index:3; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  background-size:220% 100%; animation:coatSweep 4.5s ease-in-out infinite 1.6s }
@keyframes coatSweep{ 0%{ background-position:180% 0 } 60%,100%{ background-position:-80% 0 } }

@media (prefers-reduced-motion:reduce){
  .coat-layer{ opacity:1; transform:none; animation:none }
  .cl-top::after,.coat-sweep{ animation:none }
}
@media (max-width:560px){ .coat-layer{ font-size:.54rem; padding:.28rem .55rem } .coat-layer b{ display:none } }

/* == about == */


/* ==========================================================================
   ABOUT US v3 · page-specific components (same token family)
   ========================================================================== */
.page-hero{ padding:32px 0 56px; overflow:hidden; min-height:0 }
.page-hero::before{ content:""; position:absolute; inset:0; background:var(--grad-hero-light); pointer-events:none }
.page-hero .wrap{ position:relative }
.crumbs{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-lo); margin-bottom:1.6rem; display:flex; gap:.8rem; align-items:center;
}
.crumbs a:hover{ color:var(--accent-2) } .crumbs i{ color:var(--accent); font-style:normal }

/* -------- journey timeline -------- */
.timeline{ position:relative; max-width:860px; margin:1rem auto 0; padding-left:52px }
.timeline::before{
  content:""; position:absolute; left:14px; top:6px; bottom:6px; width:2px;
  background:rgba(255,255,255,.09); border-radius:2px;
}
.tl-progress{
  position:absolute; left:14px; top:6px; width:2px; height:0; border-radius:2px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 0 14px rgba(247,148,30,.7); transition:height .2s linear;
}
.tl-item{ position:relative; padding:0 0 2.8rem }
.tl-item::before{
  content:""; position:absolute; left:-45px; top:6px; width:16px; height:16px; border-radius:50%;
  background:#F3F5F8; border:2px solid rgba(255,255,255,.25); transition:.5s;
}
.tl-item.in::before{ border-color:var(--accent); box-shadow:0 0 16px rgba(247,148,30,.8); background:var(--accent) }
.tl-year{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.26em; color:var(--accent);
  text-transform:uppercase; margin-bottom:.5rem; display:block;
}
.tl-item h3{ font-size:1.15rem; margin-bottom:.5rem }
.tl-item p{ font-size:.92rem; color:var(--txt-lo); max-width:60ch }

/* -------- expertise chain -------- */
.chain{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; counter-reset:es }
.estep{
  position:relative; padding:1.5rem 1.4rem 1.4rem; border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line); opacity:.35; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color .6s, box-shadow .6s;
}
.estep.lit{ opacity:1; transform:none; border-color:rgba(247,148,30,.45); box-shadow:0 0 22px rgba(247,148,30,.12), 0 14px 34px rgba(4,10,22,.4) }
.estep::before{
  counter-increment:es; content:"0" counter(es);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; color:var(--accent);
}
.estep h3{ font-size:.98rem; margin:.5rem 0 .35rem }
.estep p{ font-size:.82rem; color:var(--txt-lo) }
.estep .e-arrow{
  position:absolute; right:-17px; top:50%; translate:0 -50%; z-index:2; color:var(--accent);
  font-size:1rem; opacity:0; transition:opacity .6s .3s;
}
.estep.lit .e-arrow{ opacity:.9 }
.chain .estep:nth-child(3n) .e-arrow{ display:none }

/* -------- sector cards -------- */
.sectors{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem }
.sector{
  padding:1.8rem 1.5rem; border-radius:var(--radius); background:#fff; border:1px solid var(--line-lt);
  box-shadow:var(--shadow-1); text-align:left;
}
.sector .s-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:linear-gradient(150deg,#131E34,#0B1322); border:1px solid rgba(247,148,30,.45);
  color:var(--accent-2); box-shadow:0 8px 22px rgba(6,12,24,.25); transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.sector:hover .s-icon{ transform:translateY(-4px) rotate(-5deg) }
.sector h3{ font-size:.98rem; color:#0E1726; margin-bottom:.4rem }
.sector p{ font-size:.82rem; color:var(--txt-mut) }

/* -------- core values hexagons -------- */
.hexes{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; max-width:980px; margin-inline:auto }
.hex{
  --hs:150px; width:var(--hs); aspect-ratio:1/1.12; display:grid; place-items:center; text-align:center;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line); position:relative; padding:1rem;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), background .45s;
}
.hex::before{
  content:""; position:absolute; inset:1px;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:#0D1526; z-index:0;
}
.hex:hover{ transform:translateY(-8px); background:var(--grad-accent) }
.hex > div{ position:relative; z-index:1 }
.hex svg{ color:var(--accent-2); margin-bottom:.45rem }
.hex b{ font-family:var(--font-display); font-size:.8rem; display:block; line-height:1.3 }

/* -------- standards wall -------- */
.badges{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center }
.badge{
  width:130px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center;
  position:relative; background:#fff; border:1px solid var(--line-lt); box-shadow:var(--shadow-1);
}
.badge::before{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px dashed rgba(247,148,30,.55); animation:spinSlow 22s linear infinite;
}
.badge:hover::before{ animation-duration:5s }
@keyframes spinSlow{ to{ rotate:360deg } }
.badge b{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:#0E1726; display:block }
.badge small{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; color:var(--txt-mut); text-transform:uppercase }

/* -------- leadership -------- */
.lead-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:center }
.lead-media{ position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 34px 80px rgba(0,0,0,.55) }
.lead-media img{ width:100%; height:520px; object-fit:cover; transition:transform 6s ease }
.lead-media:hover img{ transform:scale(1.07) }
.lead-media figcaption{
  position:absolute; left:1.2rem; right:1.2rem; bottom:1.2rem; padding:1rem 1.3rem; border-radius:14px;
  background:rgba(13,21,38,.85); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; color:var(--txt-lo); text-transform:uppercase;
}
.hl-list{ display:grid; gap:.9rem; margin:1.8rem 0 2.2rem }
.hl-list li{ display:flex; gap:.9rem; align-items:flex-start; color:var(--txt-lo); font-size:.95rem }
.hl-list b{ color:var(--txt-hi) }

@media (max-width:1100px){
  .chain{ grid-template-columns:repeat(2,1fr) } .chain .estep .e-arrow{ display:none }
  .sectors{ grid-template-columns:repeat(2,1fr) }
  .lead-grid{ grid-template-columns:1fr } .lead-media img{ height:380px }
}
@media (max-width:640px){
  .chain{ grid-template-columns:1fr }
  .sectors{ grid-template-columns:1fr }
  .hex{ --hs:128px }
  .timeline{ padding-left:42px } .tl-item::before{ left:-35px }
}


@media (max-width:1100px){
  #mission-vision .wrap, #digital-training .wrap{ grid-template-columns:1fr !important }
}

/* ==========================================================================
   CANVA IMAGE INTEGRATION · parallax band · floating badges · media frames
   ========================================================================== */
/* full-width cinematic image break */
.imgbreak{
  position:relative; height:clamp(340px,52vw,560px); overflow:hidden;
  display:flex; align-items:center;
}
.imgbreak .bg{
  position:absolute; inset:-12% 0; z-index:0;
  background-size:cover; background-position:center; will-change:transform;
}
.imgbreak::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,17,31,.94) 0%, rgba(10,17,31,.72) 42%, rgba(10,17,31,.35) 100%),
             radial-gradient(900px 500px at 85% 60%, rgba(247,148,30,.14), transparent 60%);
}
.imgbreak .wrap{ position:relative; z-index:2 }
.imgbreak .eyebrow{ color:var(--accent) }
.imgbreak h2{ font-size:clamp(1.9rem,3.6vw,3rem); max-width:16ch; margin:1rem 0 1.1rem }
.imgbreak p{ max-width:52ch }
/* blueprint grid overlay accent */
.imgbreak .grid-ov{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(148,178,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(148,178,255,.10) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent,#000 60%);
}

/* floating stat badges that overlap image edges */
.float-badge{
  position:absolute; z-index:3; padding:.9rem 1.2rem; border-radius:15px;
  background:rgba(13,21,38,.86); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.5); animation:floaty 7s ease-in-out infinite;
}
.float-badge .num{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.float-badge .lbl{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em; color:var(--txt-lo); text-transform:uppercase; margin-top:.2rem }

/* glass image frame w/ shimmer + tilt for split sections */
.media-glass{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(247,148,30,.06);
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.media-glass::before{ /* light shimmer sweep on hover */
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg); transition:left .8s ease; pointer-events:none;
}
.media-glass:hover::before{ left:130% }
.media-glass:hover{ box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 40px rgba(247,148,30,.14) }
.media-glass img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 6s ease }
.media-glass:hover img{ transform:scale(1.06) }
.media-glass .frame-ov{ /* blueprint corner ticks */
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/22px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 0/2px 22px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/22px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/2px 22px no-repeat;
  opacity:.0; transition:opacity .5s;
}
.media-glass:hover .frame-ov{ opacity:.7 }

/* industries: image + sector grid split */
.ind-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:center }
.ind-media{ height:520px }
.ind-media .anno{ /* animated label pointing at image */
  position:absolute; z-index:3; left:1.2rem; bottom:1.2rem; display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-hi);
  background:rgba(10,17,31,.7); border:1px solid rgba(255,255,255,.14); padding:.5rem .85rem; border-radius:999px; backdrop-filter:blur(10px);
}
.ind-media .anno i{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(247,148,30,.9); animation:pulseIcon 1.8s ease-in-out infinite }

/* standards: circular inspector highlight */
.circ-media{
  width:min(360px,80%); aspect-ratio:1; border-radius:50%; margin-inline:auto; position:relative; overflow:hidden;
  border:2px solid rgba(247,148,30,.4); box-shadow:0 30px 70px rgba(0,0,0,.4), 0 0 40px rgba(247,148,30,.12);
}
.circ-media img{ width:100%; height:100%; object-fit:cover; transition:transform 6s ease }
.circ-media:hover img{ transform:scale(1.08) }
.circ-ring{ position:absolute; inset:-10px; border-radius:50%; border:1.5px dashed rgba(247,148,30,.5); animation:spinSlow 20s linear infinite; pointer-events:none }

@media (max-width:1100px){
  .ind-split{ grid-template-columns:1fr; gap:2.2rem } .ind-media{ height:360px }
}
@media (max-width:640px){
  .float-badge{ transform:scale(.85) }
  .imgbreak{ min-height:340px }
}

/* ==========================================================================
   WHY BG GROUP · premium interactive bento reason cards
   ========================================================================== */
#why-bg{ overflow:hidden }
#why-bg .section-head{ max-width:900px }
.reasons{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem;
  perspective:1200px;
}
/* when a card is hovered, dim the rest to guide attention */
.reasons.focusing .reason:not(.active){ opacity:.5; filter:saturate(.6) }

.reason{
  --mx:50%; --my:50%; /* mouse position for spotlight */
  position:relative; padding:2.2rem 2.1rem 2rem; border-radius:20px; overflow:hidden;
  background:linear-gradient(158deg, rgba(255,255,255,.92), rgba(244,246,250,.82));
  border:1px solid rgba(13,25,48,.10);
  box-shadow:0 10px 30px rgba(10,20,40,.08);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s, opacity .5s, filter .5s;
  transform-style:preserve-3d; will-change:transform;
  cursor:default; isolation:isolate;
}
/* ghost number */
.reason .rnum{
  position:absolute; top:.4rem; right:1.1rem; z-index:0;
  font-family:var(--font-display); font-weight:800; font-size:6.5rem; line-height:1;
  color:rgba(13,25,48,.05); letter-spacing:-.04em; transition:color .5s, transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.reason.active .rnum{ color:rgba(247,148,30,.16); transform:translateY(-4px) }
/* animated left light beam */
.reason .beam{
  position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2; border-radius:4px;
  background:linear-gradient(180deg, transparent, rgba(247,148,30,.25), transparent);
  transition:width .5s, background .5s;
}
.reason.active .beam{
  width:5px;
  background:linear-gradient(180deg, transparent, #FFC24B, #F7941E, transparent);
  background-size:100% 220%; animation:beamRun 1.6s linear infinite;
  box-shadow:0 0 16px rgba(247,148,30,.7);
}
@keyframes beamRun{ 0%{ background-position:0 -120% } 100%{ background-position:0 120% } }
/* spotlight that follows cursor */
.reason .spot{
  position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .5s; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx) var(--my), rgba(247,148,30,.12), transparent 60%);
}
.reason.active .spot{ opacity:1 }
/* top hairline shimmer */
.reason::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(247,148,30,.9), transparent);
  transform:translateX(-100%); transition:transform .7s ease;
}
.reason.active::after{ transform:translateX(100%) }

.reason.active{
  transform:translateY(-8px);
  border-color:rgba(247,148,30,.5);
  box-shadow:0 26px 60px rgba(10,20,40,.16), 0 0 0 1px rgba(247,148,30,.28), 0 0 40px rgba(247,148,30,.14);
}

.reason-inner{ position:relative; z-index:2 }
.reason .r-icon{
  width:62px; height:62px; border-radius:17px; display:grid; place-items:center; margin-bottom:1.3rem;
  background:linear-gradient(150deg,#131E34,#0A111F); border:1px solid rgba(247,148,30,.4);
  color:var(--accent-2); box-shadow:0 12px 28px rgba(6,12,24,.4);
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s;
}
.reason.active .r-icon{ transform:translateY(-4px) scale(1.06); box-shadow:0 16px 34px rgba(6,12,24,.5), 0 0 22px rgba(247,148,30,.4) }
.reason .r-icon svg{ width:30px; height:30px }
/* icon stroke draw + motion */
.reason .r-icon svg [data-draw]{ stroke-dasharray:var(--len,120); stroke-dashoffset:0; transition:stroke-dashoffset .05s }
.reason.active .r-icon svg [data-draw]{ animation:drawIcon 1.1s cubic-bezier(.6,0,.2,1) forwards }
@keyframes drawIcon{ from{ stroke-dashoffset:var(--len,120) } to{ stroke-dashoffset:0 } }
.reason.active .r-icon svg [data-spin]{ transform-box:fill-box; transform-origin:center; animation:spinIcon 6s linear infinite }
@keyframes spinIcon{ to{ rotate:360deg } }
.reason.active .r-icon svg [data-pulse]{ transform-box:fill-box; transform-origin:center; animation:pulseIcon 1.6s ease-in-out infinite }
@keyframes pulseIcon{ 0%,100%{ opacity:1; scale:1 } 50%{ opacity:.5; scale:.82 } }
.reason.active .r-icon svg [data-float]{ animation:floatIcon 2.4s ease-in-out infinite }
@keyframes floatIcon{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }

.reason h3{
  font-size:1.28rem; color:#0E1726; margin-bottom:.55rem; letter-spacing:-.01em;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.reason.active h3{ transform:translateX(3px) }
.reason h3 em{ font-style:normal; color:var(--accent-deep) }
.reason p{ font-size:.96rem; color:var(--txt-mut); line-height:1.7; max-width:42ch; transition:transform .5s .03s, color .5s }
.reason.active p{ transform:translateY(-2px); color:#3C4658 }
.reason .r-go{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem;
  font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--accent-deep);
  opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s;
}
.reason.active .r-go{ opacity:1; transform:none }
.reason .r-go .arr{ transition:transform .4s } .reason.active .r-go .arr{ transform:translateX(5px) }

/* click ripple */
.reason .ripple{
  position:absolute; z-index:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(247,148,30,.35), transparent 70%);
  transform:translate(-50%,-50%) scale(0); animation:rip .6s ease-out forwards;
}
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }

/* staggered entrance */
.reason.enter{ opacity:0; transform:translateY(40px) scale(.97); filter:blur(6px) }
.reason.enter.shown{ opacity:1; transform:none; filter:blur(0);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease }

@media (hover:hover) and (min-width:900px){
  /* touch devices skip magnetic tilt; handled in JS */
}
@media (max-width:900px){
  .reasons{ grid-template-columns:1fr; gap:1.1rem }
  .reason{ padding:1.9rem 1.6rem }
  .reason .rnum{ font-size:5rem }
}

/* == services == */


/* ==========================================================================
   SERVICES v3 · page-specific components (same token family)
   ========================================================================== */
.page-hero{ padding:32px 0 56px; overflow:hidden; min-height:0 }
.page-hero::before{ content:""; position:absolute; inset:0; background:var(--grad-hero-light); pointer-events:none }
.page-hero .wrap{ position:relative }
.crumbs{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-lo); margin-bottom:1.6rem; display:flex; gap:.8rem; align-items:center }
.crumbs a:hover{ color:var(--accent-2) } .crumbs i{ color:var(--accent); font-style:normal }

/* hero with cinematic image */
.svc-hero{ position:relative; overflow:hidden }
.svc-hero .hero-bg{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.5;
  mask-image:linear-gradient(90deg,transparent,#000 55%);
}
.svc-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(900px 500px at 82% 40%, rgba(247,148,30,.16), transparent 60%) }
.svc-hero .wrap{ position:relative; z-index:2 }

/* sticky category chip-nav */
.cat-nav{ position:sticky; top:var(--header-h); z-index:40;
  background:rgba(8,13,24,.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--line) }
.cat-nav .track{ display:flex; gap:.5rem; overflow-x:auto; padding:.9rem 0; scrollbar-width:none }
.cat-nav .track::-webkit-scrollbar{ display:none }
.cat-nav a{
  flex:0 0 auto; padding:.55rem 1.1rem; border-radius:999px; font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-lo);
  border:1px solid var(--line); background:rgba(255,255,255,.03); transition:.3s; white-space:nowrap;
}
.cat-nav a:hover{ color:var(--txt-hi); border-color:rgba(247,148,30,.5) }
.cat-nav a.active{ background:var(--grad-accent); color:#12100A; border-color:transparent; box-shadow:0 0 16px rgba(247,148,30,.3) }

/* category band header */
.cat-head{ display:flex; align-items:center; gap:1.2rem; margin-bottom:2.6rem }
.cat-head .cno{ font-family:var(--font-mono); font-size:.9rem; color:var(--accent); letter-spacing:.2em }
.cat-head .line{ flex:1; height:1px; background:linear-gradient(90deg,rgba(247,148,30,.5),transparent) }

/* service landing row (alternating) */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; margin-bottom:2.5rem }
.svc-row:nth-child(even) .svc-visual{ order:2 }
.svc-copy .kicker{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.7rem }
.section-light .svc-copy .kicker{ color:var(--accent-deep) }
.svc-copy h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:1rem; letter-spacing:-.01em }
.svc-copy > p{ color:var(--txt-lo); margin-bottom:1.4rem; max-width:52ch }
.section-light .svc-copy > p{ color:var(--txt-mut) }
.svc-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem }
.svc-tags span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:999px; border:1px solid var(--line); color:var(--txt-lo); transition:.3s }
.section-light .svc-tags span{ border-color:var(--line-lt); color:var(--txt-mut); background:#fff }
.svc-row:hover .svc-tags span{ border-color:rgba(247,148,30,.4) }
.svc-deliver{ display:grid; gap:.7rem; margin-bottom:1.6rem }
.svc-deliver li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--txt-lo) }
.section-light .svc-deliver li{ color:var(--txt-mut) }
.svc-deliver .tick{ flex:0 0 20px; height:20px; margin-top:.1rem; border-radius:6px; background:var(--grad-accent);
  display:grid; place-items:center; color:#12100A; font-size:.62rem; font-weight:700 }

/* visual frame */
.svc-visual{ position:relative }
.svc-frame{ position:relative; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.45);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; transform-style:preserve-3d }
.section-light .svc-frame{ border-color:var(--line-lt) }
.svc-frame::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-18deg); transition:left .8s ease; pointer-events:none }
.svc-frame:hover::before{ left:130% }
.svc-frame:hover{ box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 36px rgba(247,148,30,.14) }
.svc-frame img{ width:100%; height:400px; object-fit:cover; display:block; transition:transform 6s ease }
.svc-frame:hover img{ transform:scale(1.06) }
.svc-badge{ position:absolute; z-index:4; padding:.8rem 1.05rem; border-radius:14px;
  background:rgba(13,21,38,.85); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px);
  box-shadow:0 16px 40px rgba(0,0,0,.45); animation:floaty 7s ease-in-out infinite }
.svc-badge .n{ font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1 }
.svc-badge .l{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; color:var(--txt-lo); text-transform:uppercase; margin-top:.2rem }

/* animated multi-layer coating SVG visual */
.layer-visual{ background:linear-gradient(160deg,#0D1526,#0A111F); padding:1.6rem }
.layer-visual svg{ width:100%; height:auto; display:block }
.lyr{ transform:scaleX(0); transform-origin:left; opacity:0 }
.svc-frame.in .lyr{ animation:lyrGrow .8s cubic-bezier(.2,.7,.2,1) forwards }
.svc-frame.in .lyr.l1{ animation-delay:.15s } .svc-frame.in .lyr.l2{ animation-delay:.35s }
.svc-frame.in .lyr.l3{ animation-delay:.55s } .svc-frame.in .lyr.l4{ animation-delay:.75s }
@keyframes lyrGrow{ to{ transform:scaleX(1); opacity:1 } }

/* process flow (reused pattern) */
.pflow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; counter-reset:pf }
.pf{ position:relative; padding:1.5rem 1.3rem; border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line);
  opacity:.4; transform:translateY(14px); transition:opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1), border-color .6s, box-shadow .6s }
.pf.lit{ opacity:1; transform:none; border-color:rgba(247,148,30,.4); box-shadow:0 0 20px rgba(247,148,30,.1) }
.pf::before{ counter-increment:pf; content:"0" counter(pf); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em; color:var(--accent) }
.pf h4{ font-size:.95rem; margin:.5rem 0 .3rem } .pf p{ font-size:.8rem; color:var(--txt-lo) }
.pf .pf-arrow{ position:absolute; right:-14px; top:50%; translate:0 -50%; color:var(--accent); opacity:0; transition:opacity .5s .3s; z-index:2 }
.pf.lit .pf-arrow{ opacity:.9 } .pflow .pf:nth-child(4n) .pf-arrow, .pflow .pf:last-child .pf-arrow{ display:none }

/* why-cards */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem }
.why{ padding:1.9rem 1.6rem; border-radius:16px; background:#fff; border:1px solid var(--line-lt); box-shadow:var(--shadow-1); text-align:left }
.why .w-icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:linear-gradient(150deg,#131E34,#0A111F); border:1px solid rgba(247,148,30,.4); color:var(--accent-2);
  box-shadow:0 10px 24px rgba(6,12,24,.25); transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.why:hover .w-icon{ transform:translateY(-4px) rotate(-6deg) }
.why h4{ font-size:1rem; color:#0E1726; margin-bottom:.4rem } .why p{ font-size:.85rem; color:var(--txt-mut) }
.why .wc-num{ font-family:var(--font-display); font-weight:800; font-size:1.9rem;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }

@media (max-width:1100px){
  .svc-row{ grid-template-columns:1fr; gap:2rem; margin-bottom:2rem }
  .svc-row:nth-child(even) .svc-visual{ order:0 }
  .svc-frame img{ height:300px }
  .pflow{ grid-template-columns:repeat(2,1fr) } .pf .pf-arrow{ display:none }
  .why-grid{ grid-template-columns:1fr }
}


/* == gallery == */


/* ==========================================================================
   GALLERY v3 · page-specific components (same token family)
   ========================================================================== */
.page-hero{ padding:32px 0 56px; overflow:hidden; min-height:0; position:relative }
.page-hero::before{ content:""; position:absolute; inset:0; background:var(--grad-hero-light); pointer-events:none }
.crumbs{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-lo); margin-bottom:1.6rem; display:flex; gap:.8rem; align-items:center }
.crumbs a:hover{ color:var(--accent-2) } .crumbs i{ color:var(--accent); font-style:normal }
.gal-hero .hero-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  opacity:.95; -webkit-mask-image:linear-gradient(90deg,transparent 3%,#000 46%); mask-image:linear-gradient(90deg,transparent 3%,#000 46%) }
.gal-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(900px 500px at 82% 40%, rgba(247,148,30,.16), transparent 60%) }
.gal-hero .wrap{ position:relative; z-index:2 }

/* ---- premium filter bar ---- */
.filter-bar{ position:sticky; top:var(--header-h); z-index:40;
  background:rgba(8,13,24,.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--line) }
.filter-track{ display:flex; gap:.5rem; overflow-x:auto; padding:.9rem 0; scrollbar-width:none }
.filter-track::-webkit-scrollbar{ display:none }
.fbtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.15rem; border-radius:999px; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-lo);
  border:1px solid var(--line); background:rgba(255,255,255,.03); transition:.3s; white-space:nowrap; cursor:pointer }
.fbtn:hover{ color:var(--txt-hi); border-color:rgba(247,148,30,.5) }
.fbtn.active{ background:var(--grad-accent); color:#12100A; border-color:transparent; box-shadow:0 0 16px rgba(247,148,30,.3) }
.fbtn svg{ width:14px; height:14px }
.fbtn .cnt{ font-size:.62rem; opacity:.7 }

/* ---- masonry grid ---- */
.gal-masonry{ columns:3; column-gap:1.3rem }
.pcard{ break-inside:avoid; margin-bottom:1.3rem; position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line-lt); background:#0D1526; box-shadow:var(--shadow-1); cursor:pointer;
  opacity:0; transform:translateY(26px) scale(.98); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s }
.pcard.shown{ opacity:1; transform:none }
.pcard.hide{ display:none }
.pcard:hover{ box-shadow:0 26px 60px rgba(4,10,22,.5), 0 0 0 1px rgba(247,148,30,.35); border-color:rgba(247,148,30,.4) }
.pcard img{ width:100%; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1) }
.pcard:hover img{ transform:scale(1.08) }
.pcard .ov{ position:absolute; inset:0; z-index:2; opacity:0; transition:.5s;
  background:linear-gradient(180deg, rgba(10,17,31,.1) 0%, rgba(10,17,31,.55) 55%, rgba(8,13,24,.95) 100%) }
.pcard:hover .ov{ opacity:1 }
.pcard .cat-tag{ position:absolute; top:1rem; left:1rem; z-index:3;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:999px; color:#12100A; background:var(--grad-accent);
  opacity:0; transform:translateY(-8px); transition:.45s }
.pcard:hover .cat-tag{ opacity:1; transform:none }
.pcard .meta{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:3;
  opacity:0; transform:translateY(14px); transition:.5s .05s }
.pcard:hover .meta{ opacity:1; transform:none }
.pcard .meta h3{ font-size:1rem; margin-bottom:.35rem; color:#fff }
.pcard .meta .sub{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-lo); display:flex; gap:.9rem; flex-wrap:wrap }
.pcard .meta .sub i{ color:var(--accent); font-style:normal }
.pcard .zoom{ position:absolute; top:1rem; right:1rem; z-index:3; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; background:rgba(13,21,38,.7); border:1px solid rgba(255,255,255,.16);
  color:var(--txt-hi); opacity:0; transform:scale(.8); transition:.45s }
.pcard:hover .zoom{ opacity:1; transform:none }

/* ---- lightbox ---- */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(6,10,20,.92); backdrop-filter:blur(14px); padding:4vw }
.lightbox.open{ display:flex; animation:lbFade .35s ease }
@keyframes lbFade{ from{ opacity:0 } to{ opacity:1 } }
.lb-inner{ position:relative; max-width:1000px; width:100%; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 100px rgba(0,0,0,.6); background:#0D1526 }
.lb-inner img{ width:100%; max-height:64vh; object-fit:cover; display:block }
.lb-cap{ padding:1.4rem 1.6rem }
.lb-cap .cat-tag{ display:inline-block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; color:#12100A; background:var(--grad-accent); margin-bottom:.7rem }
.lb-cap h3{ font-size:1.3rem; margin-bottom:.5rem }
.lb-cap p{ font-size:.92rem; color:var(--txt-lo); max-width:70ch }
.lb-cap .sub{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-lo); margin-top:.8rem; display:flex; gap:1.4rem; flex-wrap:wrap }
.lb-cap .sub i{ color:var(--accent); font-style:normal }
.lb-close{ position:absolute; top:.8rem; right:.8rem; z-index:4; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; background:rgba(13,21,38,.8); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:1.2rem; transition:.3s }
.lb-close:hover{ background:var(--grad-accent); color:#12100A; border-color:transparent }
.lb-nav{ position:absolute; top:50%; translate:0 -50%; z-index:4; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:rgba(13,21,38,.75); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:1.3rem; transition:.3s }
.lb-nav:hover{ background:var(--grad-accent); color:#12100A; border-color:transparent }
.lb-prev{ left:.8rem } .lb-next{ right:.8rem }

/* ---- before/after slider ---- */
.ba-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center }
.ba{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/10; user-select:none;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px rgba(0,0,0,.5); --pos:50% }
.ba-layer{ position:absolute; inset:0 } .ba-layer svg{ width:100%; height:100%; display:block }
.ba-split{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; z-index:4; translate:-50% 0;
  background:linear-gradient(180deg,transparent,var(--accent),transparent); box-shadow:0 0 18px rgba(247,148,30,.8); pointer-events:none }
.ba-knob{ position:absolute; top:50%; left:var(--pos); z-index:5; translate:-50% -50%; width:48px; height:48px; border-radius:50%;
  background:var(--grad-accent); color:#12100A; display:grid; place-items:center; font-family:var(--font-mono); font-size:.75rem; box-shadow:var(--glow-accent); pointer-events:none }
.ba-range{ position:absolute; inset:0; z-index:6; width:100%; height:100%; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; margin:0 }
.ba-tag{ position:absolute; top:1rem; z-index:3; padding:.4rem .85rem; border-radius:999px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em;
  background:rgba(10,17,31,.75); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px) }
.ba-tag{ position:absolute; top:1rem; z-index:6; padding:.42rem .9rem; border-radius:999px; font-family:var(--font-mono,'IBM Plex Mono',monospace); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; background:rgba(10,17,31,.72); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); pointer-events:none; white-space:nowrap }
.ba-tag.b{ left:1rem; color:#FF9A7B } .ba-tag.a{ right:1rem; color:var(--accent-2) }
.ba-steps{ display:grid; gap:.7rem; margin-top:1.5rem }
.ba-steps li{ display:flex; gap:.8rem; align-items:center; font-size:.9rem; color:var(--txt-lo); font-family:var(--font-mono); letter-spacing:.04em }
.ba-steps .dot{ flex:0 0 26px; height:26px; border-radius:8px; background:var(--grad-accent); color:#12100A; display:grid; place-items:center; font-size:.7rem; font-weight:700 }

@media (max-width:1000px){ .gal-masonry{ columns:2 } .ba-wrap{ grid-template-columns:1fr; gap:2.2rem } }
@media (max-width:600px){ .gal-masonry{ columns:1 } }


/* == blog == */


/* ==========================================================================
   BLOG v3 · premium industrial knowledge hub (same token family)
   ========================================================================== */
.page-hero{ min-height:0; padding:32px 0 56px; overflow:hidden; position:relative }
.page-hero::before{ content:""; position:absolute; inset:0; background:var(--grad-hero-light); pointer-events:none }
.crumbs{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-lo); margin-bottom:1.6rem; display:flex; gap:.8rem; align-items:center }
.crumbs a:hover{ color:var(--accent-2) } .crumbs i{ color:var(--accent); font-style:normal }

/* ---- search ---- */
.blog-search{ margin-top:2.2rem; max-width:560px; position:relative }
.blog-search input{ width:100%; padding:1.05rem 3.2rem 1.05rem 1.3rem; border-radius:999px; font:inherit; font-size:.98rem;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--txt-hi); outline:none; transition:.3s }
.blog-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(247,148,30,.18) }
.blog-search .si{ position:absolute; right:1.1rem; top:50%; translate:0 -50%; color:var(--accent); pointer-events:none }
.search-empty{ display:none; margin-top:1.5rem; font-family:var(--font-mono); font-size:.8rem; color:var(--txt-lo); letter-spacing:.06em }

/* ---- featured article ---- */
.featured{ position:relative; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 80px rgba(0,0,0,.5); display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch;
  background:linear-gradient(160deg,#101A2E,#0A111F) }
.featured .fmedia{ position:relative; overflow:hidden; min-height:340px }
.featured .fmedia svg, .featured .fmedia img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 6s ease }
.featured:hover .fmedia svg, .featured:hover .fmedia img{ transform:scale(1.05) }
.featured .fmedia::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%, rgba(10,17,31,.9)) }
.featured .fbody{ padding:clamp(2rem,3.5vw,3rem); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2 }
.featured .ftag{ display:inline-flex; gap:.6rem; align-items:center; font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem }
.featured .ftag .pill{ padding:.3rem .7rem; border-radius:999px; background:var(--grad-accent); color:#12100A }
.featured h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.2; margin-bottom:1rem }
.featured p{ color:var(--txt-lo); margin-bottom:1.5rem; max-width:52ch }
.featured .fmeta{ display:flex; gap:1.4rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-lo); margin-bottom:1.6rem }
.featured .fmeta i{ color:var(--accent); font-style:normal }

/* ---- category filter ---- */
.blog-filter{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2.6rem }
.bfbtn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.15rem; border-radius:999px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-lo);
  border:1px solid var(--line); background:rgba(255,255,255,.03); transition:.3s; cursor:pointer }
.bfbtn:hover{ color:var(--txt-hi); border-color:rgba(247,148,30,.5) }
.bfbtn.active{ background:var(--grad-accent); color:#12100A; border-color:transparent; box-shadow:0 0 16px rgba(247,148,30,.3) }
.bfbtn .cnt{ font-size:.62rem; opacity:.7 }

/* ---- article grid ---- */
.blog-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem }
.bcard{ display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#fff;
  border:1px solid var(--line-lt); box-shadow:var(--shadow-1); position:relative;
  opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s }
.bcard.shown{ opacity:1; transform:none }
.bcard.hide{ display:none }
.bcard:hover{ transform:translateY(-8px); box-shadow:0 26px 60px rgba(10,20,40,.16), 0 0 0 1px rgba(247,148,30,.3); border-color:rgba(247,148,30,.35) }
.bcard .bmedia{ position:relative; height:200px; overflow:hidden }
.bcard .bmedia svg, .bcard .bmedia img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1) }
.bcard:hover .bmedia svg, .bcard:hover .bmedia img{ transform:scale(1.09) }
.bcard .bmedia::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); transition:left .8s ease }
.bcard:hover .bmedia::before{ left:130% }
.bcard .bcat{ position:absolute; top:1rem; left:1rem; z-index:3; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.35rem .7rem; border-radius:999px; color:#12100A; background:var(--grad-accent) }
.bcard .bbody{ padding:1.5rem; display:flex; flex-direction:column; flex:1 }
.bcard .bmeta{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-deep); display:flex; gap:1rem; margin-bottom:.7rem; flex-wrap:wrap }
.bcard h3{ font-size:1.02rem; line-height:1.4; color:#0E1726; margin-bottom:.6rem }
.bcard:hover h3{ color:var(--accent-deep) }
.bcard p{ font-size:.86rem; color:var(--txt-mut); flex:1; margin-bottom:1rem }
.bcard .bread{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600;
  font-size:.82rem; color:#0E1726 }
.bcard .bread .arr{ color:var(--accent-deep); transition:transform .35s } .bcard:hover .bread .arr{ transform:translateX(6px) }
.bcard .bread:hover{ color:var(--accent-deep) }

/* ---- knowledge highlight cards ---- */
.kh-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem }
.kh{ padding:1.8rem 1.5rem; border-radius:16px; background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--line); text-align:left; transition:.4s }
.kh:hover{ transform:translateY(-6px); border-color:rgba(247,148,30,.4); box-shadow:0 18px 40px rgba(4,10,22,.4) }
.kh .khn{ font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.kh h4{ font-size:.95rem; margin:.7rem 0 .4rem } .kh p{ font-size:.82rem; color:var(--txt-lo) }

/* ---- standards badges ---- */
.badges{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center }
.badge{ width:120px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center; position:relative;
  background:#fff; border:1px solid var(--line-lt); box-shadow:var(--shadow-1) }
.badge::before{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1.5px dashed rgba(247,148,30,.55); animation:spinSlow 22s linear infinite }
.badge:hover::before{ animation-duration:5s }
@keyframes spinSlow{ to{ rotate:360deg } }
.badge b{ font-family:var(--font-display); font-weight:800; font-size:1rem; color:#0E1726; display:block }
.badge small{ font-family:var(--font-mono); font-size:.54rem; letter-spacing:.14em; color:var(--txt-mut); text-transform:uppercase }

@media (max-width:1000px){
  .featured{ grid-template-columns:1fr } .featured .fmedia{ min-height:240px }
  .featured .fmedia::after{ background:linear-gradient(180deg,transparent 55%, rgba(10,17,31,.9)) }
  .blog-grid3{ grid-template-columns:repeat(2,1fr) } .kh-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px){ .blog-grid3{ grid-template-columns:1fr } .kh-grid{ grid-template-columns:1fr } }

.bmedia-svg{ width:100%; height:100% } .bmedia-svg svg{ width:100%; height:100%; object-fit:cover }

/* == calculator == */


/* ==========================================================================
   CALCULATOR v3 · digital coating engineering platform (same token family)
   ========================================================================== */
.page-hero{ min-height:0; padding:32px 0 56px; overflow:hidden; position:relative }
.page-hero::before{ content:""; position:absolute; inset:0; background:var(--grad-hero-light); pointer-events:none }
.crumbs{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-lo); margin-bottom:1.6rem; display:flex; gap:.8rem; align-items:center }
.crumbs a:hover{ color:var(--accent-2) } .crumbs i{ color:var(--accent); font-style:normal }

/* platform stat strip */
.plat-stats{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2.4rem; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-lo) }
.plat-stats b{ font-family:var(--font-display); font-size:1.5rem; color:var(--accent-2); display:block; letter-spacing:normal }

/* ---- tool dashboard grid ---- */
.tool-dash{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem }
.tool{ position:relative; padding:1.7rem; border-radius:18px; overflow:hidden; cursor:pointer;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
  display:flex; flex-direction:column; gap:1rem }
.tool:hover{ transform:translateY(-8px); border-color:rgba(247,148,30,.45);
  box-shadow:0 24px 54px rgba(4,10,22,.5), 0 0 0 1px rgba(247,148,30,.2) }
.tool .tool-viz{ height:120px; border-radius:12px; overflow:hidden; background:#F3F5F8; border:1px solid var(--line); position:relative }
.tool .tool-viz svg{ width:100%; height:100%; display:block }
.tool .tool-cat{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent) }
.tool h3{ font-size:1.05rem; line-height:1.3 }
.tool p{ font-size:.85rem; color:var(--txt-lo); flex:1 }
.tool .tool-go{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display);
  font-weight:600; font-size:.82rem; color:var(--accent-2) }
.tool .tool-go .arr{ transition:transform .35s } .tool:hover .tool-go .arr{ transform:translateX(5px) }
.tool .badge-soon{ position:absolute; top:1rem; right:1rem; z-index:3; font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-lo); border:1px solid var(--line);
  padding:.25rem .55rem; border-radius:999px; background:rgba(13,21,38,.7) }

/* ---- workbench (active calculator) ---- */
.workbench{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:22px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.45); background:#0D1526 }
.wb-form{ padding:clamp(1.8rem,3vw,2.6rem); border-right:1px solid var(--line) }
.wb-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.8rem }
.wb-tab{ padding:.6rem 1rem; border-radius:999px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-lo); border:1px solid var(--line); background:rgba(255,255,255,.03); cursor:pointer; transition:.3s }
.wb-tab:hover{ color:var(--txt-hi); border-color:rgba(247,148,30,.5) }
.wb-tab.active{ background:var(--grad-accent); color:#12100A; border-color:transparent; box-shadow:0 0 14px rgba(247,148,30,.3) }
.wb-panel{ display:none } .wb-panel.active{ display:block; animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.wb-panel h3{ font-size:1.2rem; margin-bottom:.4rem }
.wb-panel .wb-sub{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.5rem }
.fld{ margin-bottom:1.1rem } .fld.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.fld label{ display:block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-lo); margin-bottom:.4rem }
.fld input, .fld select{ width:100%; padding:.8rem 1rem; border-radius:11px; font:inherit; font-size:.95rem;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--txt-hi); outline:none; transition:.3s }
.fld input:focus, .fld select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(247,148,30,.18) }
.fld select option{ background:#F7F8FA }

/* result side */
.wb-result{ padding:clamp(1.8rem,3vw,2.6rem); background:linear-gradient(160deg,#101A2E,#0A111F); position:relative }
.wb-viz{ height:150px; border-radius:14px; overflow:hidden; background:#F3F5F8; border:1px solid var(--line); margin-bottom:1.6rem; position:relative }
.wb-viz svg{ width:100%; height:100%; display:block }
.res-big{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,4vw,3rem); line-height:1;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.res-big small{ font-size:1rem; font-family:var(--font-mono); -webkit-text-fill-color:var(--txt-lo); letter-spacing:.08em }
.res-rows{ margin-top:1.4rem; display:grid; gap:.7rem }
.res-row{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem .95rem; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); font-family:var(--font-mono); font-size:.8rem }
.res-row span{ color:var(--txt-lo); letter-spacing:.08em; text-transform:uppercase; font-size:.66rem }
.res-row b{ color:var(--accent-2); font-weight:500 }
.res-bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:.4rem }
.res-bar i{ display:block; height:100%; border-radius:5px; background:var(--grad-accent); width:0; transition:width 1s cubic-bezier(.2,.7,.2,1); box-shadow:0 0 12px rgba(247,148,30,.6) }
.status-ok{ color:#4ADE80 } .status-warn{ color:#FFC24B } .status-bad{ color:#FF7A6B }

/* how-to accordion */
.howto{ margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.4rem }
.acc{ border:1px solid var(--line); border-radius:12px; margin-bottom:.7rem; overflow:hidden; background:rgba(255,255,255,.02) }
.acc summary{ padding:.9rem 1.1rem; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.9rem;
  display:flex; align-items:center; justify-content:space-between; list-style:none }
.acc summary::-webkit-details-marker{ display:none }
.acc summary::after{ content:"+"; color:var(--accent); font-size:1.2rem; transition:.3s }
.acc[open] summary::after{ transform:rotate(45deg) }
.acc .acc-body{ padding:0 1.1rem 1.1rem; font-size:.86rem; color:var(--txt-lo); line-height:1.7 }
.acc .acc-body code{ font-family:var(--font-mono); color:var(--accent-2); background:rgba(247,148,30,.1); padding:.1rem .4rem; border-radius:5px }
.acc .acc-body ul{ margin:.5rem 0 0; padding-left:1.1rem; list-style:disc } .acc .acc-body li{ margin:.3rem 0 }

@media (max-width:1000px){ .tool-dash{ grid-template-columns:repeat(2,1fr) } .workbench{ grid-template-columns:1fr }
  .wb-form{ border-right:none; border-bottom:1px solid var(--line) } }
@media (max-width:600px){ .tool-dash{ grid-template-columns:1fr } .fld.row2{ grid-template-columns:1fr } }

/* flagship hero split */
.calc-hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center }
.calc-hero .hero-art{ border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 34px 80px rgba(0,0,0,.5) }
.calc-hero .hero-art svg{ width:100%; height:100%; display:block; min-height:340px; object-fit:cover; transition:transform 6s ease }
.calc-hero .hero-art:hover svg{ transform:scale(1.05) }
@media (max-width:1000px){ .calc-hero .wrap{ grid-template-columns:1fr; gap:2.5rem } }

/* == contact == */


/* ==========================================================================
   CONTACT v3 · premium business engagement hub (same token family)
   ========================================================================== */
.page-hero{ min-height:0; padding:32px 0 56px; overflow:hidden; position:relative }
.page-hero::before{ content:""; position:absolute; inset:0; background:var(--grad-hero-light); pointer-events:none }
.crumbs{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-lo); margin-bottom:1.6rem; display:flex; gap:.8rem; align-items:center }
.crumbs a:hover{ color:var(--accent-2) } .crumbs i{ color:var(--accent); font-style:normal }

/* ---- contact quick cards ---- */
.cc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem }
.cc{ position:relative; padding:1.7rem 1.5rem; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s; display:flex; flex-direction:column; gap:.7rem }
.cc:hover{ transform:translateY(-8px); border-color:rgba(247,148,30,.45); box-shadow:0 22px 50px rgba(4,10,22,.5), 0 0 0 1px rgba(247,148,30,.2) }
.cc .cc-icon{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:.3rem;
  background:linear-gradient(150deg,#131E34,#0A111F); border:1px solid rgba(247,148,30,.4); color:var(--accent-2);
  box-shadow:0 10px 24px rgba(6,12,24,.35); transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.cc:hover .cc-icon{ transform:translateY(-4px) rotate(-6deg) }
.cc .cc-label{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-lo) }
.cc h3{ font-size:1rem; line-height:1.4; word-break:break-word }
.cc a.cc-act{ margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display);
  font-weight:600; font-size:.8rem; color:var(--accent-2) }
.cc a.cc-act .arr{ transition:transform .35s } .cc:hover a.cc-act .arr{ transform:translateX(5px) }

/* ---- form + info split ---- */
.contact-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:start }
.form-card{ padding:clamp(1.8rem,3vw,2.6rem); border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(160deg,#101A2E,#0A111F); box-shadow:0 30px 70px rgba(0,0,0,.45); position:relative; overflow:hidden }
.form-card h2{ font-size:1.4rem; margin-bottom:.4rem }
.form-card .fc-sub{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.8rem }
.ffield{ position:relative; margin-bottom:1.5rem }
.ffield.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem } .ffield.row2 .ffield{ margin-bottom:0 }
.ffield input, .ffield select, .ffield textarea{ width:100%; padding:1.05rem 1rem .55rem; border-radius:11px; font:inherit; font-size:.95rem;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--txt-hi); outline:none; transition:.3s }
.ffield textarea{ min-height:120px; resize:vertical; padding-top:1.4rem }
.ffield label{ position:absolute; left:1rem; top:.95rem; font-size:.95rem; color:var(--txt-lo); pointer-events:none;
  transition:.25s cubic-bezier(.2,.7,.2,1); font-family:var(--font-sans) }
.ffield input:focus, .ffield select:focus, .ffield textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(247,148,30,.18) }
.ffield input:focus + label, .ffield input:not(:placeholder-shown) + label,
.ffield textarea:focus + label, .ffield textarea:not(:placeholder-shown) + label,
.ffield select:focus + label, .ffield select.filled + label{
  top:.3rem; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); font-family:var(--font-mono) }
.ffield select{ padding-top:1.2rem } .ffield select option{ background:#F7F8FA }
.ffield .err{ position:absolute; right:.4rem; bottom:-1rem; font-family:var(--font-mono); font-size:.58rem; color:#FF7A6B; opacity:0; transition:.3s }
.ffield.invalid input, .ffield.invalid textarea{ border-color:#FF7A6B } .ffield.invalid .err{ opacity:1 }
.form-progress{ height:5px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:1.6rem }
.form-progress i{ display:block; height:100%; width:0; border-radius:4px; background:var(--grad-accent); transition:width .5s cubic-bezier(.2,.7,.2,1); box-shadow:0 0 12px rgba(247,148,30,.6) }
.form-success{ display:none; text-align:center; padding:2rem 1rem }
.form-success.show{ display:block; animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.form-success .tick{ width:70px; height:70px; border-radius:50%; margin:0 auto 1.2rem; display:grid; place-items:center;
  background:var(--grad-accent); color:#12100A; font-size:2rem; box-shadow:var(--glow-accent) }

/* info column */
.info-stack{ display:grid; gap:1.1rem }
.info-block{ padding:1.5rem; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.03) }
.info-block h3{ font-size:.95rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem }
.info-block h3 svg{ color:var(--accent) }
.hours-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.76rem; color:var(--txt-lo); padding:.35rem 0; border-bottom:1px solid var(--line) }
.hours-row:last-child{ border-bottom:0 } .hours-row b{ color:var(--accent-2); font-weight:500 }
.social-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.3rem }
.social-row a{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:var(--txt-hi);
  background:rgba(255,255,255,.05); border:1px solid var(--line); transition:.3s }
.social-row a:hover{ background:var(--grad-accent); color:#12100A; border-color:transparent; transform:translateY(-3px) }

/* ---- map ---- */
.map-wrap{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.4) }
.map-wrap iframe{ width:100%; height:460px; border:0; display:block; filter:grayscale(.15) contrast(.96) brightness(.94) }
.map-overlay{ position:absolute; top:1.3rem; left:1.3rem; z-index:2; max-width:300px; padding:1.4rem 1.5rem; border-radius:16px;
  background:rgba(13,21,38,.86); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px); box-shadow:0 18px 44px rgba(0,0,0,.5) }
.map-overlay h3{ font-size:1.05rem; margin-bottom:.5rem } .map-overlay p{ font-size:.82rem; color:var(--txt-lo); margin-bottom:1rem; line-height:1.6 }

/* ---- industries / trust ---- */
.ind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem }
.ind{ padding:1.4rem 1.2rem; border-radius:14px; background:#fff; border:1px solid var(--line-lt); box-shadow:var(--shadow-1); text-align:center; transition:.4s }
.ind:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(10,20,40,.14); border-color:rgba(247,148,30,.35) }
.ind .ind-ic{ width:46px; height:46px; margin:0 auto .8rem; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(150deg,#131E34,#0A111F); color:var(--accent-2); border:1px solid rgba(247,148,30,.3) }
.ind h4{ font-size:.86rem; color:#0E1726 }

.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem }
.trust{ padding:1.7rem 1.4rem; border-radius:16px; background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--line); transition:.4s }
.trust:hover{ transform:translateY(-6px); border-color:rgba(247,148,30,.4); box-shadow:0 18px 40px rgba(4,10,22,.4) }
.trust .tn{ font-family:var(--font-display); font-weight:800; font-size:1.9rem; line-height:1;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.trust h4{ font-size:.92rem; margin:.6rem 0 .3rem } .trust p{ font-size:.8rem; color:var(--txt-lo) }

/* ---- sticky whatsapp ---- */
.wa-float{ position:fixed; right:1.3rem; bottom:1.3rem; z-index:120; display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:999px; background:#25D366; color:#04310f; font-family:var(--font-display); font-weight:700; font-size:.9rem;
  box-shadow:0 14px 36px rgba(37,211,102,.4); transition:transform .35s, box-shadow .35s; text-decoration:none }
.wa-float:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 20px 46px rgba(37,211,102,.55) }
.wa-float svg{ width:22px; height:22px } .wa-float .wa-txt{ white-space:nowrap }
@keyframes waPulse{ 0%,100%{ box-shadow:0 14px 36px rgba(37,211,102,.4) } 50%{ box-shadow:0 14px 36px rgba(37,211,102,.4), 0 0 0 12px rgba(37,211,102,0) } }
.wa-float{ animation:waPulse 2.6s ease-in-out infinite }

@media (max-width:1000px){
  .cc-grid{ grid-template-columns:repeat(2,1fr) } .contact-split{ grid-template-columns:1fr }
  .ind-grid, .trust-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px){
  .cc-grid, .ind-grid, .trust-grid{ grid-template-columns:1fr } .ffield.row2{ grid-template-columns:1fr }
  .wa-float .wa-txt{ display:none } .wa-float{ padding:.9rem }
}


/* ===== nav uniformity ===== */
.menu > li > a{ white-space:nowrap; display:inline-flex; align-items:center; height:44px; padding:0 .9rem }
.menu .caret{ display:none !important } .menu .mega, .menu .drop{ display:none !important }
/* ===== KILL TOP GAP: hero starts right under header ===== */
.spa-page{ margin:0; padding:0 }
.page-hero{ min-height:0; padding:32px 0 56px }
/* ===== trust dashboard ===== */
.td-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem }
.td{ padding:1.7rem 1.4rem; border-radius:16px; text-align:left; position:relative; will-change:transform;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s }
.td:hover{ transform:translateY(-4px); border-color:rgba(247,148,30,.5);
  box-shadow:0 16px 38px rgba(4,10,22,.45), 0 0 22px rgba(247,148,30,.22) }
.td-ic{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:.9rem; will-change:transform;
  background:linear-gradient(150deg,#131E34,#0A111F);border:1px solid rgba(247,148,30,.35);color:var(--accent-2);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s }
.td:hover .td-ic{ transform:scale(1.05); box-shadow:0 0 16px rgba(247,148,30,.35) }
.td-n{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.td-n em{ font-style:normal }
.td-l{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-lo); margin-top:.5rem }
@media (max-width:900px){ .td-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .td-grid{ grid-template-columns:1fr } }
/* ===== SPA transition ===== */
.spa-page.entering{ animation:spaIn .45s cubic-bezier(.2,.7,.2,1) }
@keyframes spaIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .spa-page.entering{ animation:none } }
#spaFade{ position:fixed; inset:0; z-index:9998; background:var(--ink,#0A111F); opacity:0; pointer-events:none; transition:opacity .28s ease }
#spaFade.show{ opacity:1 }

/* ================= GLOBAL FLOATING CONTACT (dock + whatsapp) ================= */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:9000; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem; border-radius:999px; background:#25D366; color:#04310f; text-decoration:none;
  font-family:var(--font-display,'Sora',sans-serif); font-weight:700; font-size:.88rem;
  box-shadow:0 14px 34px rgba(37,211,102,.42); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  animation:waPulse 2.8s ease-in-out infinite; will-change:transform }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 20px 44px rgba(37,211,102,.6) }
.wa-float svg{ width:24px; height:24px; flex:none }
@keyframes waPulse{ 0%,100%{ box-shadow:0 14px 34px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,.5) }
  50%{ box-shadow:0 14px 34px rgba(37,211,102,.42), 0 0 0 14px rgba(37,211,102,0) } }

@media (max-width:640px){
  .wa-float{ right:14px; bottom:14px; padding:.85rem }
  .wa-float .wa-txt{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .wa-float{ animation:none }
}


/* ==========================================================================
   AI-INSPIRED GLOBAL BACKGROUND  +  PREMIUM MICRO-INTERACTIONS
   easing: cubic-bezier(.22,1,.36,1) · hover 180-250ms · click 120-180ms
   ========================================================================== */
:root{ --ease-premium:cubic-bezier(.22,1,.36,1); --t-hover:220ms; --t-click:150ms; }

/* ---- BUTTONS: never static ---- */
.btn{ position:relative; overflow:hidden; isolation:isolate; will-change:transform;
  transition:transform var(--t-hover) var(--ease-premium), box-shadow var(--t-hover) var(--ease-premium), border-color var(--t-hover) }
.btn:hover{ transform:translateY(-2px) scale(1.03) }
.btn:active{ transform:translateY(0) scale(.985); transition-duration:var(--t-click) }
.btn-primary:hover{ box-shadow:0 14px 34px rgba(247,148,30,.45), 0 0 22px rgba(247,148,30,.35) }
.btn-ghost:hover{ border-color:rgba(247,148,30,.65); box-shadow:0 0 18px rgba(247,148,30,.22) }
/* light sweep / glass reflection */
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  background-size:250% 100%; background-position:180% 0; transition:background-position .55s var(--ease-premium) }
.btn:hover::before{ background-position:-60% 0 }
/* ripple */
.btn .rip{ position:absolute; z-index:-1; border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.42); pointer-events:none; animation:rip .55s var(--ease-premium) forwards }
.btn-primary .rip{ background:rgba(255,255,255,.5) }
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }
/* arrow nudge */
.btn .arr{ display:inline-block; transition:transform var(--t-hover) var(--ease-premium) }
.btn:hover .arr{ transform:translateX(4px) }
/* idle breathing on the primary CTA only (1-2px) */
@keyframes idleFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-1.5px) } }
.nav-cta .btn-primary{ animation:idleFloat 3.6s ease-in-out infinite }
.nav-cta .btn-primary:hover{ animation:none }
.btn:focus-visible{ outline:3px solid rgba(55,183,232,.75); outline-offset:3px }

/* ---- NAVIGATION ---- */
.menu > li > a{ transition:color var(--t-hover) var(--ease-premium) }
.menu > li > a::after{ transition:transform var(--t-hover) var(--ease-premium), box-shadow var(--t-hover) }
.menu > li > a:hover::after, .menu > li > a.active::after{ box-shadow:0 0 12px rgba(247,148,30,.75) }
.menu > li > a:hover{ text-shadow:0 0 18px rgba(255,194,75,.35) }

/* ---- CARDS: elevation + border glow + whisper of rotation ---- */
.cc, .trust, .td, .ind, .reason, .pcard, .bcard, .svc-card, .glass{
  transition:transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium), border-color 300ms; will-change:transform }
.cc:hover, .trust:hover, .ind:hover, .svc-card:hover{
  transform:translateY(-5px) rotate(.4deg); box-shadow:0 20px 44px rgba(4,10,22,.46), 0 0 20px rgba(247,148,30,.18) }

/* service / gallery imagery */
.svc-frame{ overflow:hidden }
.svc-frame img{ transition:transform 600ms var(--ease-premium) }
.svc-frame:hover img{ transform:scale(1.02) }
.pcard img{ transition:transform 500ms var(--ease-premium) }
.pcard:hover img{ transform:scale(1.04) }
.pcard:hover{ box-shadow:0 22px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(247,148,30,.35) }

/* ---- FORMS ---- */
.ffield input, .ffield select, .ffield textarea{
  transition:border-color var(--t-hover) var(--ease-premium), box-shadow var(--t-hover) var(--ease-premium), background var(--t-hover) }
.ffield input:focus, .ffield select:focus, .ffield textarea:focus{ box-shadow:0 0 0 3px rgba(247,148,30,.20), 0 0 18px rgba(247,148,30,.18) }
@keyframes shake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-5px) } 40%{ transform:translateX(5px) } 60%{ transform:translateX(-3px) } 80%{ transform:translateX(3px) } }
.ffield.invalid{ animation:shake 320ms var(--ease-premium) }
/* success check draw-on */
@keyframes pop{ 0%{ transform:scale(.6); opacity:0 } 60%{ transform:scale(1.08) } 100%{ transform:scale(1); opacity:1 } }
.form-success .tick{ animation:pop 460ms var(--ease-premium) }

/* ---- accordions / details ---- */
details summary{ transition:color var(--t-hover) }
details summary::marker{ color:var(--accent) }

/* ---- reduced motion: stop everything decorative ---- */
@media (prefers-reduced-motion:reduce){
  .btn, .btn:hover, .btn:active, .cc, .trust, .td, .ind, .svc-card, .pcard{ transition:none; transform:none }
  .nav-cta .btn-primary{ animation:none }
  .btn::before{ display:none } .btn .rip{ display:none }
  .ffield.invalid{ animation:none } .form-success .tick{ animation:none }
}


/* ==========================================================================
   FINAL LAYER · GLOBAL SPACING SYSTEM + FLOATING ACTIONS
   ========================================================================== */
:root{
  --space-xs:16px; --space-sm:24px; --space-md:32px;
  --space-lg:56px; --space-xl:80px; --space-2xl:104px;
  --fab-gap:14px;
}

/* ---- 1. KILL TOP GAP: hero begins right under the header ---- */
main#spaMain > section.spa-page{ padding:0 !important; margin:0 !important; min-height:0 !important }
/* the tall hero visual must not vertically centre (and stretch) the text column */
.stack-visual{ align-self:start !important }
.hero-figure, .stack-frame{ max-width:560px; margin-inline:auto }

/* ---- 2. one spacing scale everywhere ---- */
main#spaMain .spa-page > section{ padding:var(--space-xl) 0 !important; margin:0 !important; min-height:0 !important }
main#spaMain .spa-page > section.standards,
main#spaMain .spa-page > section.trust-dash,
main#spaMain .spa-page > section.marquee{ padding:var(--space-md) 0 !important }
main#spaMain .spa-page > section.cta{ padding:var(--space-lg) 0 !important }
/* section heading → content = 25-40px */
.section-head{ margin-bottom:var(--space-md) !important }
.section-head .eyebrow{ margin-bottom:12px !important }
.section-head .h-section{ margin:0 0 14px !important }
.h-display{ margin-top:14px !important }
/* content → footer */
footer{ padding:var(--space-xl) 0 var(--space-md) !important }

/* ---- 3. responsive compaction (proportional, not fixed) ---- */
@media (max-width:900px){
  main#spaMain .spa-page > section{ padding:var(--space-lg) 0 !important }
  
  .hero .wrap{ gap:2.2rem }
}
@media (max-width:560px){
  main#spaMain .spa-page > section{ padding:var(--space-md) 0 !important }
  
}

/* ---- 4. FLOATING ACTIONS: exactly two, same place on every page ---- */
.fab-stack{
  position:fixed; right:22px; bottom:22px; z-index:9000;
  display:flex; flex-direction:column; align-items:center; gap:var(--fab-gap);
  pointer-events:none;   /* children re-enable */
}
.fab{
  pointer-events:auto; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; text-decoration:none; will-change:transform;
  transition:transform var(--t-hover,220ms) var(--ease-premium,cubic-bezier(.22,1,.36,1)),
             box-shadow var(--t-hover,220ms) var(--ease-premium,cubic-bezier(.22,1,.36,1)),
             opacity 260ms ease, visibility 260ms ease;
}
.fab svg{ width:24px; height:24px }
.fab:focus-visible{ outline:3px solid rgba(55,183,232,.8); outline-offset:3px }

/* scroll-to-top — orange gradient, glass, glow; hidden until 300px */
.fab-top{
  color:#12100A; background:linear-gradient(135deg,#F7941E,#FFC24B);
  box-shadow:0 10px 26px rgba(247,148,30,.42), inset 0 1px 0 rgba(255,255,255,.45);
  backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.9);
}
.fab-top.show{ opacity:1; visibility:visible; transform:none }
.fab-top:hover{ transform:translateY(-3px) scale(1.07);
  box-shadow:0 16px 36px rgba(247,148,30,.58), 0 0 22px rgba(247,148,30,.45), inset 0 1px 0 rgba(255,255,255,.5) }
.fab-top:active{ transform:scale(.94); transition-duration:150ms }

/* WhatsApp — always visible, premium green */
.fab-wa{
  color:#04310f; background:#25D366; width:auto; min-width:56px; height:56px; padding:0 18px;
  border-radius:999px; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display,'Sora',sans-serif); font-weight:700; font-size:.88rem; white-space:nowrap;
  box-shadow:0 12px 30px rgba(37,211,102,.42);
  animation:waIdle 3.4s ease-in-out infinite;
}
.fab-wa:hover{ transform:translateY(-3px) scale(1.05); animation:none;
  box-shadow:0 18px 42px rgba(37,211,102,.62), 0 0 26px rgba(37,211,102,.5) }
.fab-wa:active{ transform:scale(.95); transition-duration:150ms }
/* idle: gentle float + soft pulse ring */
@keyframes waIdle{
  0%,100%{ transform:translateY(0);   box-shadow:0 12px 30px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,.42) }
  50%    { transform:translateY(-2px); box-shadow:0 14px 34px rgba(37,211,102,.5), 0 0 0 12px rgba(37,211,102,0) }
}
/* click ripple */
.fab .rip{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  transform:translate(-50%,-50%) scale(0); pointer-events:none; animation:rip .55s var(--ease-premium,cubic-bezier(.22,1,.36,1)) forwards }
.fab{ position:relative; overflow:hidden; isolation:isolate }

@media (max-width:640px){
  .fab-stack{ right:14px; bottom:14px; gap:12px }
  .fab-wa{ padding:0; width:56px; justify-content:center }
  .fab-wa .fab-label{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .fab, .fab:hover, .fab:active{ transition:none; transform:none }
  .fab-wa{ animation:none } .fab .rip{ display:none }
}


/* ==========================================================================
   FIX LAYER · contrast · hero compaction · before/after slider
   ========================================================================== */

/* ---- 1. TYPOGRAPHY CONTRAST: never dark ink on a dark section ---- */
main#spaMain section:not(.section-light) h1,
main#spaMain section:not(.section-light) h2,
main#spaMain section:not(.section-light) h3,
main#spaMain section:not(.section-light) h4,
main#spaMain section:not(.section-light) .h-display,
main#spaMain section:not(.section-light) .h-section{ color:#FFFFFF }
main#spaMain section:not(.section-light) p,
main#spaMain section:not(.section-light) .lead{ color:var(--txt-mut,#AEB9CC) }
main#spaMain section:not(.section-light) .eyebrow{ color:var(--accent,#F7941E) }
main#spaMain section:not(.section-light) a:not(.btn){ color:#fff }
main#spaMain section:not(.section-light) a:not(.btn):hover{ color:var(--accent-2,#FFC24B) }
/* light sections keep dark ink (correct there) */
main#spaMain section.section-light h1,
main#spaMain section.section-light h2,
main#spaMain section.section-light h3,
main#spaMain section.section-light .h-section{ color:#0E1726 }

/* ---- 2. HERO: content first, background never stands alone ---- */
.hero .wrap{ align-items:start !important }
.stack-visual{ align-self:start !important }
/* cap the hero visual so heading + CTAs + image all sit in the first fold */
.hero-figure, .stack-frame{ max-width:540px; max-height:400px; margin-inline:auto; overflow:hidden }
.hero-figure img, .stack-frame img, .hero-photo{ width:100%; height:100%; object-fit:cover; display:block }
@media (max-width:900px){
  
  .hero-figure, .stack-frame{ max-height:320px }
}

/* ---- 3. BEFORE / AFTER SLIDER ---- */
.ba{ --pos:50%; position:relative; overflow:hidden; border-radius:20px; touch-action:pan-y;
  cursor:ew-resize; user-select:none; -webkit-user-select:none; isolation:isolate }
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none; user-select:none }
.ba-before{ z-index:1 }                                   /* rusted steel, LEFT  */
.ba-after { z-index:2; clip-path:inset(0 0 0 var(--pos)) } /* coated steel, RIGHT */

/* permanent labels — always visible */
.ba-tag{ position:absolute; top:14px; z-index:6; padding:.42rem .9rem; border-radius:999px;
  font-family:var(--font-mono,'IBM Plex Mono',monospace); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap; pointer-events:none;
  background:rgba(10,17,31,.78); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px) }
.ba-tag.b{ left:14px; color:#FF9A7B }
.ba-tag.a{ right:14px; color:var(--accent-2,#FFC24B) }

/* metallic, glowing orange divider */
.ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:3px; z-index:4;
  transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(180deg, rgba(247,148,30,0), #FFC24B 12%, #F7941E 50%, #FFC24B 88%, rgba(247,148,30,0));
  box-shadow:0 0 10px rgba(247,148,30,.85), 0 0 26px rgba(247,148,30,.45) }
/* handle */
.ba-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  pointer-events:auto; width:56px; height:56px; border-radius:50%; border:3px solid #fff; cursor:grab;
  display:grid; place-items:center; color:#12100A;
  background:radial-gradient(circle at 34% 30%, #FFD37A, #F7941E 56%, #C96B08);
  box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 6px rgba(247,148,30,.18), inset 0 2px 5px rgba(255,255,255,.5);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s }
.ba-handle:hover{ transform:translate(-50%,-50%) scale(1.09) }
.ba-handle:active{ cursor:grabbing; transform:translate(-50%,-50%) scale(1.02) }
.ba-handle:focus-visible{ outline:3px solid rgba(55,183,232,.8); outline-offset:3px }
/* soft reflection travelling with the reveal edge */
.ba-sheen{ position:absolute; top:0; bottom:0; left:var(--pos); width:120px; z-index:3;
  transform:translateX(-60%); pointer-events:none; opacity:.45; transition:opacity .25s;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 46%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.14) 54%,transparent) }
.ba.dragging .ba-sheen{ opacity:.85 }
@media (prefers-reduced-motion:reduce){ .ba-handle{ transition:none } }


/* ---- hero rhythm (single source of truth; base rules already set 32px/56px) ---- */
main#spaMain > section.spa-page{ padding:0; margin:0; min-height:0 }
.stack-visual{ align-self:start }
.hero-figure, .stack-frame{ max-width:540px; max-height:400px; margin-inline:auto; overflow:hidden }
.hero-figure img, .stack-frame img, .hero-photo{ width:100%; height:100%; object-fit:cover; display:block }
@media (max-width:900px){
  .hero, .page-hero{ padding:22px 0 40px !important }
  .hero-figure, .stack-frame{ max-height:320px }
}
@media (max-width:560px){
  .hero, .page-hero{ padding:16px 0 32px !important }
}

/* ---- anchor safety: any in-page jump clears the sticky header ---- */
main#spaMain section[id]{ scroll-margin-top:calc(var(--header-h, 84px) + 24px) }

/* =====================================================================
   BG GROUP — LIGHT ENTERPRISE THEME  (aligned with BG CoatingOS™)
   Final layer: remaps palette to white/light, keeps content & structure.
   ===================================================================== */
:root{
  /* Surfaces — CoatingOS light system */
  --ink:#FFFFFF; --ink-2:#F7F8FA; --ink-3:#FFFFFF;
  --paper:#FFFFFF; --mist:#F3F5F8; --card:#FFFFFF; --card-2:#F7F8FA;
  /* Brand (unchanged orange, CoatingOS values) */
  --accent:#F7941D; --accent-2:#FFB347; --accent-deep:#D97706; --accent-soft:#FFF4E3;
  --cyan:#2E6FB0;
  /* Text — dark ink on light */
  --txt-hi:#222222; --txt-lo:#5F6672; --txt-mut:#8A9099;
  --txt-ink:#222222;
  /* charcoal-blue premium accent (nav / dark rails) */
  --charcoal:#2B303A; --charcoal-2:#343A45;
  /* Lines */
  --line:#E6E8EC; --line-lt:#E6E8EC; --line-strong:#D5DAE2;
  /* Gradients & elevation — soft only */
  --grad-accent:linear-gradient(120deg,#F7941D 0%,#FFB347 60%,#F7941D 100%);
  --glow-accent:0 6px 18px rgba(247,148,29,.28);
  --shadow-1:0 2px 8px rgba(20,24,32,.06);
  --shadow-2:0 10px 30px rgba(20,24,32,.12);
  --shadow-card:0 2px 8px rgba(20,24,32,.06);
  --shadow-raise:0 6px 18px rgba(20,24,32,.08);
  --shadow-btn:0 4px 12px rgba(247,148,29,.28);
  --radius:16px; --radius-sm:12px;
}

/* ---- base surfaces ---- */
html{ background:var(--mist) }
body{ background:var(--paper) !important; color:var(--txt-hi) !important }

/* ---- top utility bar → charcoal-blue premium rail ---- */
.topbar{ background:var(--charcoal) !important; color:rgba(255,255,255,.82) !important; border-bottom:1px solid rgba(255,255,255,.08) !important }
.topbar a{ color:rgba(255,255,255,.82) !important } .topbar a:hover{ color:var(--accent-2) !important }
.topbar .tb-msg{ color:rgba(255,255,255,.9) !important }

/* ---- header → clean white, subtle shadow on scroll ---- */
header.site{ background:rgba(255,255,255,.86) !important; backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line) !important }
header.site.scrolled{ box-shadow:0 6px 22px rgba(20,24,32,.08) !important; background:rgba(255,255,255,.94) !important }
.brand, .brand *{ color:var(--txt-hi) !important }
.brand .sub, .brand small{ color:var(--txt-mut) !important }
.menu > li > a{ color:#3A414D !important; font-weight:600 }
.menu > li > a:hover, .menu > li > a.active{ color:var(--accent-deep) !important }
.menu > li > a::after{ background:var(--accent) !important }

/* ---- every dark section → light; keep alternating rhythm ---- */
main#spaMain section{ background:var(--paper) !important; color:var(--txt-hi) !important }
main#spaMain section.section-light{ background:var(--mist) !important }
.stats, .testi, .standards{ background:var(--mist) !important }
/* blueprint grid: switch to faint charcoal on light */
.grid-bg::before{ background-image:
  linear-gradient(rgba(43,48,58,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(43,48,58,.05) 1px, transparent 1px) !important; opacity:1 !important }
.hex-bg::after{ opacity:.06 !important }

/* ---- typography contrast on light ---- */
main#spaMain h1, main#spaMain h2, main#spaMain h3, main#spaMain h4,
main#spaMain .h-display, main#spaMain .h-section,
footer h1, footer h2, footer h3, footer h4{ color:#1B1F27 !important }
main#spaMain p, main#spaMain .lead, main#spaMain li{ color:var(--txt-lo) !important }
main#spaMain .eyebrow{ color:var(--accent-deep) !important }
main#spaMain section a:not(.btn):not(.menu-link){ color:var(--accent-deep) }
main#spaMain section a:not(.btn):hover{ color:var(--accent) }
/* accent word inside hero heading stays orange */
.h-display .accent, .h-section .accent, .txt-accent{ color:var(--accent) !important }

/* ---- CARDS → white enterprise cards ---- */
.cc, .trust, .td, .ind, .reason, .pcard, .bcard, .svc-card, .glass, .card,
.stat-card, .val-card, .price-card, .feature, .tcard{
  background:var(--card) !important; border:1px solid var(--line) !important;
  box-shadow:var(--shadow-card) !important; color:var(--txt-hi) !important; border-radius:var(--radius) !important;
}
.cc:hover, .trust:hover, .ind:hover, .svc-card:hover, .pcard:hover, .card:hover, .td:hover{
  box-shadow:var(--shadow-raise) !important; border-color:rgba(247,148,29,.4) !important;
  transform:translateY(-4px) !important;
}
.cc h3, .cc h4, .card h3, .svc-card h3, .ind h3, .trust h3, .td .td-n{ color:#1B1F27 !important }
.cc p, .card p, .svc-card p, .ind p{ color:var(--txt-lo) !important }
/* card icon chips */
.cc-ic, .td-ic, .ind-ic, .reason-ic, .svc-ic{
  background:var(--accent-soft) !important; border:1px solid rgba(247,148,29,.28) !important; color:var(--accent-deep) !important }

/* stat/counter numbers stay orange, labels muted */
.td-n, .stat-n, [data-count]{ color:var(--accent-deep) !important }
.td-l, .stat-l{ color:var(--txt-mut) !important }

/* ---- BUTTONS → CoatingOS pill style ---- */
.btn{ border-radius:999px !important; font-weight:600 }
.btn-primary{ background:var(--grad-accent) !important; background-size:200% 100% !important;
  color:#FFFFFF !important; box-shadow:var(--shadow-btn) !important; border:0 !important }
.btn-primary:hover{ background-position:100% 0 !important; box-shadow:0 8px 22px rgba(247,148,29,.4) !important }
.btn-ghost{ background:#FFFFFF !important; color:#2B303A !important; border:1px solid var(--line-strong) !important; box-shadow:var(--shadow-card) !important }
.btn-ghost:hover{ border-color:var(--accent) !important; color:var(--accent-deep) !important; background:var(--accent-soft) !important }
.nav-cta .btn-primary{ color:#fff !important }

/* ---- marquee / standards strip ---- */
.standards, .marquee{ background:var(--mist) !important; border-block:1px solid var(--line) !important }
.standards *, .marquee *{ color:var(--txt-lo) !important }

/* ---- footer → charcoal-blue premium (like CoatingOS sidebar) ---- */
footer{ background:var(--charcoal) !important; color:rgba(255,255,255,.78) !important; border-top:1px solid rgba(255,255,255,.08) !important }
footer h1, footer h2, footer h3, footer h4, footer .h-section{ color:#FFFFFF !important }
footer p, footer li, footer a{ color:rgba(255,255,255,.72) !important }
footer a:hover{ color:var(--accent-2) !important }
footer .eyebrow{ color:var(--accent-2) !important }
footer input{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.16) !important; color:#fff !important }
footer input::placeholder{ color:rgba(255,255,255,.5) !important }

/* ---- forms on light ---- */
.ffield input, .ffield select, .ffield textarea{
  background:#FFFFFF !important; border:1px solid var(--line-strong) !important; color:var(--txt-hi) !important }
.ffield label{ color:var(--txt-lo) !important }
.ffield input:focus, .ffield textarea:focus, .ffield select:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(247,148,29,.16) !important }

/* ---- misc dark chips / pills on light ---- */
.chip, .tag, .pill, .badge{ background:var(--accent-soft) !important; color:var(--accent-deep) !important; border:1px solid rgba(247,148,29,.25) !important }

/* scroll-to-top keeps orange; whatsapp keeps green (already on-brand) */


/* floating hero chips → light glass to match enterprise theme */
.float-chip{ background:rgba(255,255,255,.92) !important; border:1px solid var(--line) !important;
  box-shadow:var(--shadow-raise) !important; color:var(--txt-hi) !important }
.float-chip .num, .float-chip b{ color:var(--accent-deep) !important }
.float-chip .lbl, .float-chip small{ color:var(--txt-mut) !important }
/* hero visual frame → soft light border */
.stack-frame, .hero-figure{ border:1px solid var(--line) !important;
  box-shadow:0 24px 60px rgba(20,24,32,.14) !important }
/* the coating-system overlay bars keep their designed look (over the photo) */

/* remaining dark components → light enterprise surfaces */
.hex, .hex::before{ background:#FFFFFF !important }
.hex{ border:1px solid var(--line) !important; box-shadow:var(--shadow-card) !important }
.hex h3, .hex h4{ color:#1B1F27 !important } .hex p{ color:var(--txt-lo) !important }
.term, .terminal, .code-card, .console{ background:#2B303A !important; border:1px solid var(--line-strong) !important; color:#E8ECF2 !important }
.term *, .terminal *{ color:#E8ECF2 !important }
/* any glass pill that was dark-on-dark → readable */
.mono-pill, .kpill, .spec-pill{ background:var(--mist) !important; color:var(--txt-hi) !important; border:1px solid var(--line) !important }

/* =====================================================================
   CONTRAST FIX · genuinely-dark sections keep LIGHT text
   (overrides the global light-theme text rules for these blocks only)
   ===================================================================== */

/* --- .imgbreak : dark photo band (About "Where Corrosion Ends") --- */
.imgbreak::after{ background:linear-gradient(90deg, rgba(8,13,24,.92) 0%, rgba(8,13,24,.80) 46%, rgba(8,13,24,.55) 100%) !important }
.imgbreak, .imgbreak *{ position:relative; z-index:2 }
main#spaMain .imgbreak h1, main#spaMain .imgbreak h2, main#spaMain .imgbreak h3, main#spaMain .imgbreak .h-section, main#spaMain .imgbreak .h-display{ color:#FFFFFF !important; text-shadow:0 2px 18px rgba(0,0,0,.45) }
.imgbreak p, .imgbreak .lead, .imgbreak li{ color:rgba(255,255,255,.88) !important }
.imgbreak .eyebrow{ color:var(--accent-2) !important }

/* --- .cta-band : dark CTA ("Expert Protection") --- */
.cta-band{ background:linear-gradient(135deg,#0E1522,#161F30) !important; border-radius:22px }
main#spaMain .cta-band h1, main#spaMain .cta-band h2, main#spaMain .cta-band h3, main#spaMain .cta-band .h-section{ color:#FFFFFF !important }
.cta-band p, .cta-band .lead{ color:rgba(255,255,255,.86) !important }
.cta-band .eyebrow{ color:var(--accent-2) !important }
.cta-band a:not(.btn){ color:var(--accent-2) !important }
.cta-band .btn-ghost{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.5) !important }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.1) !important; border-color:#fff !important; color:#fff !important }

/* --- page hero photo overlays: reduce bleed on light theme --- */
.svc-hero .hero-bg{ opacity:.14 !important }
.gal-hero .hero-bg{ opacity:.9 !important }
.gal-hero::after{ background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 34%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.45) 56%, rgba(255,255,255,0) 66%), radial-gradient(900px 500px at 82% 40%, rgba(247,148,30,.10), transparent 60%) !important }
.svc-hero::after{ background:radial-gradient(900px 500px at 82% 40%, rgba(247,148,30,.10), transparent 60%) !important }

/* --- any remaining dark card/panel keeps light text (safety net) --- */
.dark-panel, .panel-dark, [data-theme="dark"]{ color:#fff !important }
.dark-panel h1,.dark-panel h2,.dark-panel h3{ color:#fff !important }


/* =====================================================================
   NAV HOVER (premium underline + micro-scale) · SERVICE CARD IMAGE FIT
   ===================================================================== */

/* --- item 7: premium animated underline --- */
.menu > li > a{ position:relative; transition:color var(--t-hover) var(--ease-premium), transform var(--t-hover) var(--ease-premium) !important }
.menu > li > a::after{
  content:"" !important; position:absolute !important; left:.9rem; right:.9rem; bottom:8px;
  height:2px; border-radius:2px; background:var(--grad-accent) !important;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .28s var(--ease-premium) !important; box-shadow:none !important;
}
.menu > li > a:hover{ color:var(--accent-deep) !important; transform:translateY(-1px) }
.menu > li > a:hover::after{ transform:scaleX(1) }
.menu > li > a.active{ color:var(--accent-deep) !important }
.menu > li > a.active::after{ transform:scaleX(1); box-shadow:0 0 10px rgba(247,148,29,.5) !important }
.menu > li > a:hover{ text-shadow:none !important }

/* --- item 10: show full service image (no crop) --- */
.svc-media{ height:auto !important; aspect-ratio:16/10; background:#0E1522 }
.svc-media img{ height:100% !important; object-fit:cover !important; transform:none !important }
.svc:hover .svc-media img{ transform:scale(1.03) !important }
/* the What-We-Offer montage graphics read better fully visible */
.svc-media.contain img, .svc-media img.contain{ object-fit:contain !important; background:#0B1220 }


/* --- blog thumbnails: no permanent zoom-crop, zoom only on hover --- */
.bmedia img{ transform:none !important }
.bcard:hover .bmedia img{ transform:scale(1.04) !important }
.bmedia{ background:#0E1A2E }
.pcard .pmedia img, .pcard img{ transform:none !important }
.pcard:hover img{ transform:scale(1.04) !important }

/* --- Home About photo: real engineer image, no distortion / no permanent zoom --- */
.about-media .main{ height:480px; object-fit:cover; object-position:center 32%; transform:none !important }
.about-media:hover .main{ transform:scale(1.03) !important }
@media (max-width:900px){ .about-media .main{ height:400px } }
@media (max-width:560px){ .about-media .main{ height:320px } }

/* --- SOP service card: uniform with the other service cards --- */
.sop-media{ width:100%; height:100% !important; object-fit:cover !important; object-position:center; transform:none !important; display:block; background:#0E1A2E }
.svc:hover .sop-media{ transform:scale(1.03) !important }

/* dark-section text overrides — higher specificity than main#spaMain h2 base */
main#spaMain .cta-band p, main#spaMain .cta-band .lead{ color:rgba(255,255,255,.86) !important }
main#spaMain .cta-band .eyebrow{ color:var(--accent-2) !important }
main#spaMain .imgbreak p, main#spaMain .imgbreak .lead{ color:rgba(255,255,255,.88) !important }
main#spaMain .imgbreak .eyebrow{ color:var(--accent-2) !important }

/* ---- GLOBAL dark-section safety net (beats main#spaMain h2 base) ---- */
main#spaMain .cta-band, main#spaMain .imgbreak,
main#spaMain [data-dark], main#spaMain .dark-panel{ }
main#spaMain .cta-band h1, main#spaMain .cta-band h2, main#spaMain .cta-band h3, main#spaMain .cta-band h4,
main#spaMain .imgbreak h1, main#spaMain .imgbreak h2, main#spaMain .imgbreak h3, main#spaMain .imgbreak h4,
main#spaMain [data-dark] h1, main#spaMain [data-dark] h2, main#spaMain [data-dark] h3,
main#spaMain .dark-panel h1, main#spaMain .dark-panel h2, main#spaMain .dark-panel h3{ color:#FFFFFF !important }

/* ===== "Where Corrosion Ends" — full-width premium refinery banner ===== */
.imgbreak{
  position:relative;
  width:100%;
  height:clamp(420px,46vw,560px) !important;
  min-height:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:hidden;
  display:flex; align-items:center;
}
.imgbreak .bg{
  position:absolute; inset:0 !important;
  background-size:cover !important;
  background-position:center right !important;
  will-change:transform;
}
/* readable gradient — dark on the left where the text sits, clear on the right */
.imgbreak::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(9,14,24,.92) 0%, rgba(9,14,24,.78) 38%, rgba(9,14,24,.34) 68%, rgba(9,14,24,.12) 100%) !important;
}
.imgbreak .wrap{ position:relative; z-index:2; width:min(var(--wrap,1280px), 92vw); margin-inline:auto; padding-block:clamp(2rem,4vw,3.5rem) }
.imgbreak .rv{ max-width:560px }
.imgbreak h2{ font-size:clamp(2rem,3.6vw,3rem); line-height:1.08; margin:.6rem 0 1rem }
main#spaMain .imgbreak h2, main#spaMain .imgbreak .h-section{ color:#FFFFFF !important; text-shadow:0 2px 20px rgba(0,0,0,.4) }
main#spaMain .imgbreak .lead{ color:rgba(255,255,255,.9) !important }
main#spaMain .imgbreak .eyebrow{ color:var(--accent-2,#FFC24B) !important }
.imgbreak .grid-ov{ opacity:.22 !important }
@media (max-width:900px){
  .imgbreak{ height:clamp(360px,70vw,460px) !important }
  .imgbreak::after{ background:linear-gradient(90deg, rgba(9,14,24,.94) 0%, rgba(9,14,24,.82) 62%, rgba(9,14,24,.55) 100%) !important }
}

/* --- About "Culture of Coating Innovation" — real dashboard photo, no distortion --- */
.media-glass .main{ width:100%; height:480px; object-fit:cover; object-position:center; transform:none !important; display:block }
.media-glass:hover .main{ transform:scale(1.03) !important }
@media (max-width:900px){ .media-glass .main{ height:400px } }
@media (max-width:560px){ .media-glass .main{ height:300px } }

/* Sectors collage framing */
.ind-media.media-glass .sectors-media{ width:100% !important; height:480px !important; object-fit:cover !important; object-position:center !important; transform:none !important; display:block }
@media (max-width:900px){ .ind-media.media-glass .sectors-media{ height:400px !important } }
@media (max-width:560px){ .ind-media.media-glass .sectors-media{ height:320px !important } }

/* ===== "Atomized To Spec" (craft-break) — right-aligned text, mirrored gradient ===== */
#craft-break{ position:relative; width:100%; height:clamp(420px,46vw,560px) !important; min-height:0 !important; margin:0 !important; border-radius:0 !important; overflow:hidden; display:flex; align-items:center }
#craft-break .bg{ position:absolute; inset:0 !important; background-size:cover !important; background-position:center left !important }
/* gradient dark on the RIGHT (where this banner's text sits), clear on the left */
#craft-break::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(270deg, rgba(9,14,24,.92) 0%, rgba(9,14,24,.78) 38%, rgba(9,14,24,.34) 68%, rgba(9,14,24,.12) 100%) !important;
}
#craft-break .wrap{ position:relative; z-index:2; width:min(var(--wrap,1280px), 92vw); margin-inline:auto; padding-block:clamp(2rem,4vw,3.5rem) }
#craft-break .rv{ margin-left:auto; text-align:right; max-width:560px }
#craft-break h2{ font-size:clamp(2rem,3.6vw,3rem); line-height:1.08; margin:.6rem 0 1rem; margin-left:auto }
main#spaMain #craft-break h2, main#spaMain #craft-break .h-section{ color:#FFFFFF !important; text-shadow:0 2px 20px rgba(0,0,0,.4) }
main#spaMain #craft-break .lead{ color:rgba(255,255,255,.9) !important; margin-left:auto }
main#spaMain #craft-break .eyebrow{ color:var(--accent-2,#FFC24B) !important; justify-content:flex-end }
#craft-break .grid-ov{ opacity:.22 !important }
@media (max-width:900px){
  #craft-break{ height:clamp(360px,70vw,460px) !important }
  #craft-break::after{ background:linear-gradient(270deg, rgba(9,14,24,.94) 0%, rgba(9,14,24,.82) 62%, rgba(9,14,24,.55) 100%) !important }
}
@media (max-width:560px){
  #craft-break .rv{ text-align:left; margin-left:0 } 
  #craft-break .eyebrow{ justify-content:flex-start }
  #craft-break::after{ background:linear-gradient(90deg, rgba(9,14,24,.94) 0%, rgba(9,14,24,.82) 62%, rgba(9,14,24,.55) 100%) !important }
}

/* --- About "Led From The Field" leadership photo — no distortion --- */
.lead-media img{ transform:none !important }
.lead-media:hover img{ transform:scale(1.03) !important }

/* ===== Services hero — real collage as right-side visual within the gradient ===== */
.svc-hero{ position:relative; overflow:hidden }
.svc-hero .hero-bg.svc-hero-photo{
  position:absolute; top:0; right:0; bottom:0; left:auto;
  width:56%; height:100%; z-index:0;
  background-size:cover !important; background-position:center right !important;
  opacity:1 !important;
  /* fade the left edge of the image into the hero gradient so text stays clean */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 14%, #000 42%) !important;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 14%, #000 42%) !important;
  border-top-left-radius:0;
}
/* soft brand tint over the photo for cohesion with the light hero */
.svc-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--mist,#F3F5F8) 0%, rgba(243,245,248,.72) 30%, rgba(243,245,248,.10) 52%, transparent 68%) !important;
}
.svc-hero .wrap{ position:relative; z-index:2 }
.svc-hero .rv{ max-width:640px }
@media (max-width:900px){
  .svc-hero .hero-bg.svc-hero-photo{ width:100%; opacity:.5 !important;
    -webkit-mask-image:none !important; mask-image:none !important }
  .svc-hero::after{ background:linear-gradient(180deg, rgba(243,245,248,.86) 0%, rgba(243,245,248,.7) 60%, rgba(243,245,248,.5) 100%) !important }
}

/* ===== Services "Surface Treatment" — real infographic replaces the SVG spec card ===== */
.svc-frame.layer-visual{ background:#FFFFFF !important; padding:0 !important; border:1px solid var(--line,#E6E8EC) !important; box-shadow:0 24px 60px rgba(20,24,32,.16) !important; border-radius:20px }
.layer-photo{ display:block; width:100%; height:auto; object-fit:contain; border-radius:20px }
.svc-frame.layer-visual:hover .layer-photo{ transform:none }

/* ===== Dark-card readability — light text on dark boxes placed over light/white sections ===== */
main#spaMain .map-overlay, .map-overlay,
main#spaMain .form-card, .form-card,
main#spaMain .svc-badge, .svc-badge,
main#spaMain .wb-result, .wb-result,
main#spaMain .featured, .featured,
.term-bar{
  --txt-lo:#B6C1D2;   /* light muted for text inside dark cards */
  --txt-mut:#B6C1D2;
}
main#spaMain .map-overlay h3, .map-overlay h3,
main#spaMain .form-card h2, .form-card h2,
main#spaMain .form-card h3, .form-card h3,
main#spaMain .featured h2, .featured h2{ color:#F3F7FD !important; }
.featured p{ color:#C6D0DF !important; }
.featured .fmeta{ color:#B6C1D2 !important; }
.featured .fmeta i{ color:var(--accent,#F7941E) !important; }
/* Social buttons — keep icon visible in default and hover states everywhere */
footer .foot-social a{ color:#E7ECF3 !important; }
footer .foot-social a:hover{ background:var(--grad-accent) !important; color:#12100A !important; border-color:transparent !important; }
footer .foot-social a:hover svg{ color:#12100A !important; fill:#12100A; }
.social-row a:hover{ color:#12100A !important; }
/* ===== Category tabs & filter bars — readable in inactive / hover / active states ===== */
.cat-nav a, .fbtn, .bfbtn{ color:#C7D1E0 !important; }               /* inactive: light on dark bar */
.cat-nav a .cnt, .fbtn .cnt, .bfbtn .cnt{ opacity:.7; }
.cat-nav a:hover, .fbtn:hover, .bfbtn:hover{ color:#FFFFFF !important; border-color:rgba(247,148,30,.55) !important; }
.cat-nav a.active, .fbtn.active, .bfbtn.active{ background:var(--grad-accent) !important; color:#12100A !important; border-color:transparent !important; }
.cat-nav a.active .cnt, .fbtn.active .cnt, .bfbtn.active .cnt{ color:#12100A !important; opacity:.78; }
main#spaMain .map-overlay p, .map-overlay p{ color:#CBD5E3 !important; }
main#spaMain .map-overlay .hours-row, .map-overlay .hours-row,
main#spaMain .map-overlay .hours-row span, .map-overlay .hours-row span{ color:#CBD5E3 !important; }
.map-overlay .hours-row b{ color:var(--accent-2,#FFC24B) !important; }
.svc-badge .l{ color:#CBD5E3 !important; }
.wb-result .res-row span{ color:#B6C1D2 !important; }
.wb-result .res-big small{ -webkit-text-fill-color:#B6C1D2 !important; }
.term-bar span{ color:#B6C1D2 !important; }

/* ===================================================================
   Unified Glassmorphism — every floating image-overlay card
   (experience counters, ISO·NACE badges, stat chips, info panels,
   feature labels, map card). One premium smoked-glass language.
   =================================================================== */
.exp-badge,
.float-badge,
.float-chip,
.svc-badge,
.map-overlay,
.ba-tag{
  background: rgba(15, 21, 34, 0.48) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 46px rgba(6, 12, 24, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s cubic-bezier(.22,1,.36,1) !important;
}
/* consistent rounding by card type */
.exp-badge{ border-radius: 24px !important; }
.float-badge, .float-chip, .svc-badge{ border-radius: 16px !important; }
.map-overlay{ border-radius: 18px !important; }
.ba-tag{ border-radius: 999px !important; }

/* stat numbers stay premium amber-gradient on the smoked glass */
.float-chip .num, .float-chip b{
  background: var(--grad-accent) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* labels & body text: light, high-contrast against any image behind */
.exp-badge small,
.float-badge .lbl,
.float-chip .lbl, .float-chip small,
.svc-badge .l{ color: #D6DFEA !important; }
.map-overlay h3{ color: #F3F7FD !important; }

/* premium floating hover — gentle lift + slight scale + deeper shadow
   (idle float animation pauses so the lift reads cleanly) */
.exp-badge:hover,
.float-badge:hover,
.float-chip:hover,
.svc-badge:hover,
.map-overlay:hover{
  transform: translateY(-6px) scale(1.035) !important;
  box-shadow: 0 32px 66px rgba(6, 12, 24, 0.52),
              0 0 0 1px rgba(247, 148, 30, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  animation-play-state: paused !important;
}

/* ===================================================================
   CINEMATIC LAYER — depth, parallax & particle scaffolding
   (motion itself is driven by GSAP; these are GPU/stacking helpers)
   =================================================================== */
.fx-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0 }
.hero{ position:relative } .hero .wrap{ position:relative; z-index:1 }
#digital{ position:relative } #digital .wrap{ position:relative; z-index:1 }
.hero-figure img, .svc-media img, .bmedia img, .sop-media img{ will-change:transform; transform:translateZ(0) }
.float-chip, .exp-badge, .float-badge, .svc-frame, .glass, .svc-card{ transform-style:preserve-3d }
.tilt-live{ will-change:transform }
/* premium button micro-interaction: soft glow lift (transform-only) */
.btn-primary{ transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1) }
.btn-primary:hover{ transform:translateY(-2px) }
@media (prefers-reduced-motion: reduce){ .fx-canvas{ display:none !important } }

/* ===================================================================
   DOCS SIDEBAR NAVIGATION v2 — compact floating glass rail
   Pixel-aligned backbone · position-based scrollspy · micro-motion
   =================================================================== */
:root{ --rail-w:176px; --rail-top:76px }

/* launcher (visible when rail is closed) */
.rail-launcher{
  position:fixed; left:14px; top:calc(var(--rail-top) + 16px); z-index:88;
  display:flex; align-items:center; gap:.45rem; padding:.55rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(13px) saturate(150%); backdrop-filter:blur(13px) saturate(150%);
  border:1px solid rgba(255,255,255,.65); box-shadow:0 12px 30px rgba(20,24,32,.14);
  color:#3A4353; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, color .3s, border-color .3s;
}
.rail-launcher:hover{ transform:translateX(3px); color:#12100A; border-color:rgba(247,148,30,.5); box-shadow:0 16px 36px rgba(20,24,32,.18) }
.rail-launcher:focus-visible{ outline:2px solid var(--accent,#F7941E); outline-offset:2px }
body.rail-open .rail-launcher{ opacity:0; pointer-events:none; transform:translateX(-10px) }

.rail-backdrop{ position:fixed; inset:0; z-index:86; background:rgba(10,17,31,.30);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .35s }
.rail-backdrop.show{ opacity:1 }

/* floating glass panel */
.doc-rail{
  position:fixed; left:10px; top:calc(var(--rail-top) + 10px); bottom:12px; width:var(--rail-w); z-index:87;
  display:flex; flex-direction:column; border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.13) 55%, rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(18px) saturate(168%); backdrop-filter:blur(18px) saturate(168%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 40px rgba(20,24,32,.10),
             inset 0 1px 0 rgba(255,255,255,.78),
             inset 1px 0 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(255,255,255,.26);
  transform:translateX(calc(-100% - 14px)); transition:transform .5s cubic-bezier(.22,1,.36,1);
}
body.rail-open .doc-rail{ transform:translateX(0) }
.doc-rail::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(130% 55% at 12% 0%, rgba(255,255,255,.50), transparent 62%) }
.doc-rail > *{ position:relative; z-index:1 }

.rail-head{ display:flex; align-items:center; justify-content:space-between; padding:.58rem .52rem .32rem .78rem }
.rail-title{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:#8A93A3 }
.rail-close{ display:grid; place-items:center; width:26px; height:26px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:#8A93A3; cursor:pointer; transition:color .25s, background .25s, border-color .25s }
.rail-close:hover{ color:#12100A; background:rgba(247,148,30,.10); border-color:rgba(247,148,30,.3) }
.rail-close:focus-visible{ outline:2px solid var(--accent,#F7941E); outline-offset:2px }

.rail-scroll{ overflow-y:auto; overscroll-behavior:contain; padding:.05rem .48rem 1.2rem .38rem; scrollbar-width:thin; scrollbar-color:#D5DAE2 transparent }
.rail-scroll::-webkit-scrollbar{ width:4px } .rail-scroll::-webkit-scrollbar-thumb{ background:#D5DAE2; border-radius:99px }

/* backbone: all dots share one axis at 14px column centre */
.rail-nav{ list-style:none; margin:0; padding:0; position:relative }
.rail-nav::before{ content:""; position:absolute; left:12.5px; top:12px; bottom:12px; width:1px;
  background:linear-gradient(180deg, transparent, #D8DEE7 5%, #D8DEE7 95%, transparent) }
.grp{ position:relative; margin:.34rem 0 }
.grp-row{ display:grid; grid-template-columns:1fr 24px; align-items:center; gap:.05rem }
.grp-row:has(> .grp-link:only-child){ grid-template-columns:1fr }

/* level 1 — grid keeps dot centred at 14px */
.grp-link{
  position:relative; overflow:hidden; display:grid; grid-template-columns:26px 1fr; align-items:center;
  padding:.36rem .26rem .36rem 0; border-radius:8px;
  font-family:var(--font-display,'Sora',sans-serif); font-weight:700; font-size:.78rem; color:#1C2433;
  text-decoration:none; transition:color .25s, background .25s, transform .25s cubic-bezier(.22,1,.36,1);
}
.grp-link .dot{
  position:relative; z-index:1; justify-self:center; width:8px; height:8px; border-radius:50%;
  background:#C3CAD6; border:2px solid #fff; box-shadow:0 0 0 1px #D8DDE5;
  transition:background .3s, box-shadow .3s, transform .3s;
}
.grp-link:hover{ color:#12100A; background:rgba(255,194,75,.13); transform:translateX(2px) }
.grp-link:hover .dot{ background:#9AA4B4; transform:scale(1.12) }
.grp-link:focus-visible{ outline:2px solid var(--accent,#F7941E); outline-offset:2px }
.grp.active > .grp-row .grp-link{ color:#12100A }
.grp.active > .grp-row .grp-link .dot{
  background:var(--accent,#F7941E); transform:scale(1.3);
  box-shadow:0 0 0 1px rgba(247,148,30,.55), 0 0 12px rgba(247,148,30,.55);
}
.grp-link .ext{ justify-self:start; margin-left:.3rem; opacity:.45 }

.grp-toggle{ display:grid; place-items:center; width:24px; height:24px; border-radius:7px; border:none;
  background:transparent; color:#98A1B0; cursor:pointer; transition:transform .4s cubic-bezier(.22,1,.36,1), color .25s, background .25s }
.grp-toggle:hover{ color:#12100A; background:rgba(247,148,30,.10) }
.grp-toggle:focus-visible{ outline:2px solid var(--accent,#F7941E); outline-offset:2px }
.grp.open > .grp-row .grp-toggle{ transform:rotate(180deg); color:var(--accent-deep,#D97706) }

/* level 2 — timeline branch: glowing amber bullets threaded on the connector line */
.grp-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1) }
.grp.open > .grp-sub{ grid-template-rows:1fr }
.grp-sub-in{
  overflow:hidden; min-height:0; display:flex; flex-direction:column;
  margin-left:20px; padding:.12rem 0 .28rem 0;
  border-left:1px solid rgba(255,183,71,.40);
}
.grp-sub-in a{
  position:relative; overflow:hidden; display:flex; align-items:center;
  margin-left:-4px; padding:.26rem .34rem .26rem 20px; border-radius:8px;
  font-size:.64rem; font-weight:500; color:#67738A; text-decoration:none;
  opacity:0; transform:translateX(-6px);
  transition:color .24s, background .24s, opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.grp.open > .grp-sub .grp-sub-in a{ opacity:1; transform:translateX(0) }
.grp.open > .grp-sub .grp-sub-in a:nth-child(1){ transition-delay:.05s } .grp.open > .grp-sub .grp-sub-in a:nth-child(2){ transition-delay:.09s }
.grp.open > .grp-sub .grp-sub-in a:nth-child(3){ transition-delay:.13s } .grp.open > .grp-sub .grp-sub-in a:nth-child(4){ transition-delay:.17s }
.grp.open > .grp-sub .grp-sub-in a:nth-child(5){ transition-delay:.21s } .grp.open > .grp-sub .grp-sub-in a:nth-child(6){ transition-delay:.25s }
.grp.open > .grp-sub .grp-sub-in a:nth-child(7){ transition-delay:.29s } .grp.open > .grp-sub .grp-sub-in a:nth-child(8){ transition-delay:.33s }
/* bullet sits exactly on the connector line; the light ring masks the line behind it */
.grp-sub-in a .sdot{
  position:absolute; left:0; top:50%; margin-top:-3.5px;
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #FFEEC4, #FFD27A 58%, #EFB45C);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.62), 0 0 6px rgba(255,194,75,.50);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s;
}
.grp-sub-in a .slbl{ padding-left:0 }
.grp-sub-in a:hover{ color:#1A222E; background:rgba(255,194,75,.11) }
.grp-sub-in a:hover .sdot{
  transform:scale(1.2);
  background:radial-gradient(circle at 35% 32%, #FFF4D6, #FFC24B 58%, #F2A93B);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.66), 0 0 10px rgba(255,194,75,.85);
}
.grp-sub-in a:focus-visible{ outline:2px solid var(--accent,#F7941E); outline-offset:1px }
.grp-sub-in a.active{ color:#A65E04; font-weight:600; background:rgba(255,194,75,.14) }
.grp-sub-in a.active .sdot{
  transform:scale(1.34);
  background:radial-gradient(circle at 35% 32%, #FFF6DC, #FFB347 55%, #F7941E);
  animation:sdotPulse 2.1s ease-in-out infinite;
}
@keyframes sdotPulse{
  0%,100%{ box-shadow:0 0 0 2.5px rgba(255,255,255,.66), 0 0 8px rgba(255,179,71,.72), 0 0 16px rgba(247,148,30,.34) }
  50%    { box-shadow:0 0 0 2.5px rgba(255,255,255,.66), 0 0 14px rgba(255,179,71,1), 0 0 26px rgba(247,148,30,.60) }
}

/* click ripple */
.rail-ripple{ position:absolute; border-radius:50%; pointer-events:none; background:rgba(247,148,30,.22);
  transform:scale(0); animation:railRipple .55s ease-out forwards }
@keyframes railRipple{ to{ transform:scale(3.2); opacity:0 } }

/* push mode — wide screens */
@media (min-width:1400px){
  body.rail-open.rail-push #spaMain, body.rail-open.rail-push footer{ padding-left:calc(var(--rail-w) + 14px) }
  #spaMain, footer{ transition:padding-left .5s cubic-bezier(.22,1,.36,1) }
  body.rail-open .rail-backdrop{ display:none }
}
@media (max-width:1399px){
  .doc-rail{ width:min(80vw, 222px); box-shadow:0 22px 60px rgba(10,17,31,.22) }
}
@media (prefers-reduced-motion: reduce){
  .doc-rail, .grp-sub, .grp-toggle, .grp-link, .rail-launcher, .grp-sub-in a{ transition:none !important }
  .rail-ripple{ display:none }
}

/* ---------- SVG & Icon Sizing Utilities (Prevents oversized inline SVGs) ---------- */
svg { display: inline-block; vertical-align: middle; max-width: 100%; }
svg.w-3, .w-3 { width: 0.75rem !important; height: 0.75rem !important; min-width: 0.75rem !important; max-width: 0.75rem !important; }
svg.w-3\.5, .w-3\.5 { width: 0.875rem !important; height: 0.875rem !important; min-width: 0.875rem !important; max-width: 0.875rem !important; }
svg.w-4, .w-4 { width: 1rem !important; height: 1rem !important; min-width: 1rem !important; max-width: 1rem !important; }
svg.w-5, .w-5 { width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem !important; max-width: 1.25rem !important; }
svg.w-6, .w-6 { width: 1.5rem !important; height: 1.5rem !important; min-width: 1.5rem !important; max-width: 1.5rem !important; }
svg.w-8, .w-8 { width: 2rem !important; height: 2rem !important; min-width: 2rem !important; max-width: 2rem !important; }
svg.w-12, .w-12 { width: 3rem !important; height: 3rem !important; min-width: 3rem !important; max-width: 3rem !important; }
svg.w-16, .w-16 { width: 4rem !important; height: 4rem !important; min-width: 4rem !important; max-width: 4rem !important; }