/* ============================================================
   ALMIC™ — DESIGN TOKENS
   Signature system: the page is treated as a set of engineering
   drawing sheets, echoing the brochure's own
   catalogue-page structure. Radial "Why ALMIC" diagram echoes the
   brochure's original circular value-prop layout.
   ============================================================ */
:root{
  /* "Alt-section" tokens — light, clean silver bands used to break up the
     main silver content sections. Every section keeps its original
     structural rhythm; the whole palette is now silver-family, per the
     approved SILVER + BLACK + GREEN colour update. */
  --void:#e7e7e4;
  --void-2:#dcdcd8;
  --charcoal:#e1e1dd;
  --charcoal-2:#d4d4cf;
  --steel-line: rgba(20,20,20,0.10);
  --steel-line-2: rgba(20,20,20,0.18);

  /* Green — tertiary/accent colour, replaces the old crimson+gold accent
     pair. Kept as two token families so every existing rule that
     referenced --crimson* or --gold* still resolves correctly. Used only
     for CTAs, active states and restrained highlights. */
  --crimson:#1e8a4c;
  --crimson-2:#166339;
  --crimson-dark:#0f4a29;

  --gold:#1e8a4c;
  --gold-2:#166339;
  --gold-dim: rgba(30,138,76,0.35);
  --gold-dim-2: rgba(30,138,76,0.18);

  /* Clean, premium, neutral silver — dominant primary colour. Not
     blue-grey, not metallic. */
  --ivory:#f4f4f2;
  --stone:#ececea;
  --stone-2:#e2e2de;

  /* CTA / action colour — green, used only for primary buttons and
     important actions. */
  --green:#1e8a4c;
  --green-2:#166339;

  /* Black — typography, navigation, structure and contrast. */
  --ink:#141414;
  --ink-soft:#4a4a4a;
  --ink-faint:#78787a;

  --radius:2px;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-2:cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
figure{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  margin:0;
  font-weight:600;
  letter-spacing:0.008em;
  line-height:1.05;
  text-transform:uppercase;
}
p{margin:0; line-height:1.7;}
.mono{font-family:'IBM Plex Mono',monospace;}
::selection{background:var(--gold); color:var(--ink);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 22px;} }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--crimson), var(--gold));
  z-index:2000; transition:width .1s linear;
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--crimson);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}
.eyebrow.on-dark{color:var(--gold-2);}

.btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:16px 32px;
  font-family:'Oswald',sans-serif;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.09em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;
  position:relative;
}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 0 0 0 rgba(47,111,79,0.4);}
.btn-primary:hover{background:var(--green-2); transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(47,111,79,0.55);}
.btn-primary:active{transform:translateY(-1px);}
.btn-outline{border-color:var(--green); color:var(--green); background:transparent;}
.btn-outline:hover{border-color:var(--green-2); background:rgba(47,111,79,0.08); color:var(--green-2); transform:translateY(-3px);}
.btn-outline.on-light{color:var(--green); border-color:var(--green);}
.btn-outline.on-light:hover{border-color:var(--green-2); background:rgba(47,111,79,0.08); color:var(--green-2);}
.btn-arrow{transition:transform .4s var(--ease); display:inline-block;}
.btn:hover .btn-arrow{transform:translateX(5px);}
.btn-sm{padding:12px 22px; font-size:12px;}

/* ============ THERMAL FLOW DIVIDER (signature motif) ============ */
.flow-divider{ width:100%; height:56px; overflow:hidden; position:relative; }
.flow-divider svg{width:100%; height:100%; display:block;}
.flow-path{ fill:none; stroke:var(--gold-dim); stroke-width:1; stroke-dasharray:1 7; stroke-linecap:round; }
.flow-pulse{ fill:var(--gold-2); filter:drop-shadow(0 0 5px var(--gold)); }
@keyframes travel{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
.flow-pulse{ offset-path: path('M0,28 Q 320,-6 640,28 T 1280,28'); animation: travel 8s linear infinite; }
.flow-divider.alt .flow-pulse{ offset-path: path('M0,28 Q 320,62 640,28 T 1280,28'); animation-duration:9s; animation-direction:reverse;}
.flow-pulse-hp{
  offset-path: path('M0,28 Q 320,-6 640,28 T 1280,28');
  offset-rotate: 0deg;
  animation: travel 8s linear infinite;
}

/* ============ NAV ============ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(20,20,20,0.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:background .4s ease, border-color .4s ease, padding .3s ease;
}
.site-nav.scrolled{ background:rgba(15,15,15,0.97); border-bottom-color:rgba(255,255,255,0.1); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 32px; max-width:var(--maxw); margin:0 auto;
  transition:padding .3s ease;
}
.site-nav.scrolled .nav-inner{ padding:7px 32px; }
.nav-brand{display:flex; align-items:center; gap:12px; transition:opacity .3s ease;}
.nav-brand:hover{opacity:.85;}
.nav-brand img{height:104px; width:auto; transition:height .3s ease; display:block;}
.site-nav.scrolled .nav-brand img{height:80px;}
@media (max-width:640px){
  .nav-brand img{height:72px;}
  .site-nav.scrolled .nav-brand img{height:60px;}
}
.nav-links{
  display:flex; align-items:center; gap:38px;
  font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:0.07em; text-transform:uppercase; color:rgba(255,255,255,0.72);
}
.nav-links a{position:relative; padding:8px 0; transition:color .3s ease; display:flex; align-items:center; gap:7px;}
.nav-links a::before{
  content:""; width:0; height:4px; border-radius:50%; background:var(--gold);
  transition:width .3s var(--ease); flex:none;
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::before{width:4px;}
.nav-cta{display:flex; align-items:center; gap:20px;}
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.nav-toggle span{width:24px; height:2px; background:var(--ivory); display:block; transition:transform .3s ease, opacity .3s ease;}
.mobile-menu{
  display:none;
  position:fixed; top:0; right:0; bottom:0; width:min(340px,86vw);
  background:var(--ink); z-index:1100;
  padding:30px 28px; flex-direction:column; gap:4px;
  transform:translateX(100%); transition:transform .45s var(--ease);
  box-shadow:-24px 0 60px rgba(0,0,0,0.45);
  border-left:1px solid rgba(255,255,255,0.1);
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
  color:rgba(255,255,255,0.92); font-size:16px; padding:15px 4px; border-bottom:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center;
}
.mobile-menu .btn{margin-top:20px; justify-content:center;}
.menu-close{align-self:flex-end; background:none; border:none; color:rgba(255,255,255,0.92); font-size:26px; padding:6px 10px;}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1050; opacity:0; pointer-events:none; transition:opacity .4s ease;}
.scrim.show{opacity:1; pointer-events:auto;}
@media (max-width:940px){
  .nav-links{display:none;}
  .nav-cta .btn-outline{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{display:flex;}
}

/* ---- Nav dropdowns (desktop) ---- */
.nav-dropdown{position:relative;}
.nav-top-link{position:relative; padding:8px 0; transition:color .3s ease; display:flex; align-items:center; gap:7px;}
.nav-top-link::before{
  content:""; width:0; height:4px; border-radius:50%; background:var(--gold);
  transition:width .3s var(--ease); flex:none;
}
.nav-top-link:hover, .nav-top-link.active{color:#fff;}
.nav-top-link:hover::before, .nav-top-link.active::before{width:4px;}
.nav-caret{transition:transform .25s ease; flex:none; opacity:.8;}
.nav-dropdown:hover .nav-caret, .nav-dropdown.force-open .nav-caret{transform:rotate(180deg);}
.nav-dropdown-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:248px; background:var(--void-2); border:1px solid var(--steel-line-2);
  box-shadow:0 24px 50px -16px rgba(0,0,0,0.55);
  padding:10px; opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  display:flex; flex-direction:column; z-index:1200;
}
.nav-dropdown-panel::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:11px; height:11px; background:var(--void-2); border-left:1px solid var(--steel-line-2); border-top:1px solid var(--steel-line-2);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown.force-open .nav-dropdown-panel{
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-panel a{
  font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-weight:500;
  font-size:13.5px; color:var(--ink-soft); padding:11px 14px; border-radius:2px; transition:background .2s ease, color .2s ease;
}
.nav-dropdown-panel a:hover, .nav-dropdown-panel a.active{background:rgba(30,138,76,0.1); color:var(--gold-2);}

/* ---- Mobile accordion ---- */
.mobile-accordion{display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,0.1);}
.mobile-accordion-trigger{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
  color:rgba(255,255,255,0.92); font-size:16px; padding:15px 4px; background:none; border:none;
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
}
.mobile-accordion-trigger .nav-caret{transition:transform .25s ease;}
.mobile-accordion.open .mobile-accordion-trigger .nav-caret{transform:rotate(180deg);}
.mobile-accordion-panel{max-height:0; overflow:hidden; transition:max-height .3s ease; display:flex; flex-direction:column;}
.mobile-accordion.open .mobile-accordion-panel{max-height:400px;}
.mobile-accordion-panel a{
  font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-weight:500;
  color:rgba(255,255,255,0.65); font-size:14.5px; padding:12px 4px 12px 16px; border:none; display:block;
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:158px 0 70px;
  overflow:hidden;
  background:var(--charcoal); /* fallback shown only before the video paints */
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}
/* Left-to-right gradient rather than a flat overlay across the whole
   frame: keeps the video clearly visible on the right (where the
   product/scene reads best) while giving the text column on the left
   enough contrast to stay readable, regardless of which moment of the
   12s loop is showing. Deliberately subtle, not a dark wash. */
.hero-video-overlay{
  position:absolute; inset:0; z-index:1;
  /* Gradient re-centred to follow the hero content's new position
     (roughly 40-95% across the hero) rather than the left edge, so
     the text stays readable at its new location without darkening
     the video unnecessarily where there's no text over it. */
  background:linear-gradient(100deg,
    rgba(10,12,12,0.18) 0%,
    rgba(10,12,12,0.28) 24%,
    rgba(10,12,12,0.6) 40%,
    rgba(10,12,12,0.66) 75%,
    rgba(10,12,12,0.52) 100%);
}
.hero-bp{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--steel-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image: radial-gradient(ellipse 78% 60% at 26% 38%, black 5%, transparent 72%);
  pointer-events:none;
}
.hero-corner-mark{
  position:absolute; width:120px; height:120px; pointer-events:none; opacity:.5;
}
.hero-corner-mark.tl{top:150px; left:32px; border-top:1px solid var(--gold-dim); border-left:1px solid var(--gold-dim);}
.hero-corner-mark.br{bottom:40px; right:32px; border-bottom:1px solid var(--gold-dim); border-right:1px solid var(--gold-dim);}
.hero-grid{
  position:relative; z-index:2; width:100%;
}
/* One unified content group — heading, paragraph and buttons all sit
   inside this single element, sharing one left edge by definition
   (no separate positioning per element). Sized and positioned as a
   whole, using the hero's normal wrap/max-width system rather than
   arbitrary absolute coordinates. */
.hero-content{ max-width:620px; }
.hero-kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold-2); display:flex; align-items:center; gap:12px; margin-bottom:30px;
}
.hero-kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--crimson-2); flex:none;
  box-shadow:0 0 0 0 rgba(30,138,76,0.6); animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(30,138,76,0.55);}
  70%{box-shadow:0 0 0 8px rgba(30,138,76,0);}
  100%{box-shadow:0 0 0 0 rgba(30,138,76,0);}
}
.hero h1{
  font-size:clamp(28px,3.6vw,48px);
  color:#fff;
  margin-bottom:26px;
  letter-spacing:-0.005em;
  text-shadow:0 2px 24px rgba(0,0,0,0.25);
}
.hero h1 em{
  font-style:normal;
  color:var(--gold);
}
.hero-sub{
  font-size:14px; color:rgba(255,255,255,0.85); max-width:540px; margin-bottom:42px; line-height:1.75; font-weight:400;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:60px;}
/* Button text scoped to the hero only — the global .btn size, padding,
   colours and shape used everywhere else on the site are untouched. */
.hero .btn{ font-size:11px; }
/* Outline button, scoped to this hero only: the video content varies
   significantly across its 12s loop, so a plain transparent button
   can't guarantee contrast at every moment. A translucent dark glass
   backdrop keeps it legible regardless of what's playing behind it. */
.hero .btn-outline{
  background:rgba(8,10,10,0.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,0.55); color:#fff;
}
.hero .btn-outline:hover{ background:rgba(8,10,10,0.55); border-color:#fff; }
.hero-stats{
  display:grid; grid-template-columns:repeat(4,auto); gap:0; border-top:1px solid var(--steel-line);
  padding-top:30px;
}
.hero-stat{padding-right:28px; border-right:1px solid var(--steel-line); transition:opacity .3s ease;}
.hero-stat:last-child{border-right:none; padding-right:0;}
.hero-stat .num{
  font-family:'Oswald',sans-serif; font-size:clamp(19px,2.4vw,28px); font-weight:600; color:var(--ink);
  display:block; letter-spacing:0.01em;
}
.hero-stat .num span{color:var(--gold-2);}
.hero-stat .lbl{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; color:var(--ink-soft); text-transform:uppercase;
  margin-top:6px; display:block;
}
.hero-media{position:relative;}
.hero-media-inner{ transition:transform .25s var(--ease-2); will-change:transform; }
.hero-media-frame{
  position:relative; border:1px solid var(--gold-dim); padding:0;
  background:linear-gradient(155deg, rgba(30,138,76,0.05), transparent 60%);
  overflow:hidden; width:fit-content; margin:0 auto;
}
/* object-fit:contain equivalent, applied directly here rather than
   relying on a height constraint cascading through several ancestor
   wrappers (fragile with nested flex/grid — flex items' implicit
   min-height:auto keeps fighting a stretched parent height at each
   level). Capping max-height directly on this innermost box, tied to
   the hero's own available vertical budget, means the image always
   scales DOWN to fit here regardless of viewport height, instead of
   rendering at its natural proportional height and being clipped by
   the hero's overflow:hidden. Full machine visible at any viewport
   size; empty space around it is acceptable, cropping is not. */
.hero-media-frame .img-crop{
  overflow:hidden; max-height:calc(100vh - 168px);
  display:flex; align-items:center; justify-content:center;
}
.hero-media-frame img{
  max-width:100%; max-height:calc(100vh - 168px); width:auto; height:auto; min-width:0; min-height:0; object-fit:contain;
  display:block; filter:saturate(1.05) contrast(1.05); transition:transform .8s var(--ease-2);
}
.hero-media-frame:hover img{transform:scale(1.045);}
.hero-media-tag{
  position:relative;
  background:rgba(244,244,242,0.97); backdrop-filter:blur(6px);
  border-top:1px solid var(--gold-dim);
  padding:14px 18px; display:flex; justify-content:space-between; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.05em; color:var(--ink-soft);
}
.hero-media-tag b{color:var(--gold-2); font-weight:600;}
.corner{position:absolute; width:24px; height:24px; z-index:3;}
.corner.tl{top:-1px; left:-1px; border-top:2px solid var(--gold); border-left:2px solid var(--gold);}
.corner.br{bottom:-1px; right:-1px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold);}
.hero-scrollcue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.18em; color:var(--ink-soft); text-transform:uppercase;
}
.hero-scrollcue .line{width:1px; height:34px; background:linear-gradient(var(--gold-dim), transparent); position:relative; overflow:hidden;}
.hero-scrollcue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold-2);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr; gap:56px;}
  .hero{padding-top:128px;}
  .hero-stats{grid-template-columns:repeat(2,1fr); row-gap:24px;}
  .hero-stat:nth-child(2){border-right:none;}
  .hero-scrollcue{display:none;}
  .hero-corner-mark{display:none;}
}
@media (max-width:480px){
  .hero-ctas .btn{width:100%; justify-content:center;}
}
</style>
/* ============ SECTION SCAFFOLD ============ */
section{position:relative;}
.section-pad{padding:130px 0;}
@media (max-width:900px){ .section-pad{padding:88px 0;} }
@media (max-width:600px){ .section-pad{padding:72px 0;} }
/* About page intro: this section sits directly under the fixed nav with
   no hero banner above it, so its own top padding needs extra clearance
   to create real breathing room below the nav (scoped to this page only). */
#about.section-pad{ padding-top:210px; }
@media (max-width:900px){ #about.section-pad{ padding-top:150px; } }
@media (max-width:600px){ #about.section-pad{ padding-top:130px; } }
/* Why ALMIC intro: same reasoning — sits directly under the fixed nav
   with no hero banner, and lost its eyebrow label's vertical space when
   that label was removed, so extra top clearance is added here too. */
#why.section-pad{ padding-top:210px; }
@media (max-width:900px){ #why.section-pad{ padding-top:150px; } }
@media (max-width:600px){ #why.section-pad{ padding-top:130px; } }
/* ALFEN's Valued Customers intro: same reasoning as About/Why ALMIC above
   — sits directly under the fixed nav with no hero banner. */
#customers.section-pad{ padding-top:210px; }
@media (max-width:900px){ #customers.section-pad{ padding-top:150px; } }
@media (max-width:600px){ #customers.section-pad{ padding-top:130px; } }
/* Customized Solutions intro: same reasoning as the pages above — sits
   directly under the fixed nav with no hero banner. Scoped via a unique
   class (not the shared #solutions id, which the Products page also
   uses on a different section) so this cannot affect Products. */
.customized-solutions-intro.section-pad{ padding-top:210px; padding-bottom:40px; }
@media (max-width:900px){ .customized-solutions-intro.section-pad{ padding-top:150px; padding-bottom:36px; } }
@media (max-width:600px){ .customized-solutions-intro.section-pad{ padding-top:130px; padding-bottom:32px; } }
/* Product Series intro: same reasoning as the pages above — sits
   directly under the fixed nav with no hero banner. Scoped via a unique
   class (not the shared #solutions id, which the Customized Solutions
   page also uses) so this cannot affect that page. */
.product-series-intro.section-pad{ padding-top:210px; }
@media (max-width:900px){ .product-series-intro.section-pad{ padding-top:150px; } }
@media (max-width:600px){ .product-series-intro.section-pad{ padding-top:130px; } }
/* Applications intro: same reasoning as the pages above — sits directly
   under the fixed nav with no hero banner. */
.applications-intro.section-pad{ padding-top:210px; }
@media (max-width:900px){ .applications-intro.section-pad{ padding-top:150px; } }
@media (max-width:600px){ .applications-intro.section-pad{ padding-top:130px; } }
/* Contact Us intro: same reasoning as the pages above — sits directly
   under the fixed nav with no hero banner. */
.contact-intro.section-pad{ padding-top:210px; }
@media (max-width:900px){ .contact-intro.section-pad{ padding-top:150px; } }
@media (max-width:600px){ .contact-intro.section-pad{ padding-top:130px; } }

/* Legal pages (Privacy Policy, Terms & Conditions, Disclaimer): same
   top-padding reasoning as the pages above — no hero banner, sits
   directly under the fixed nav. */
.legal-intro.section-pad{ padding-top:210px; padding-bottom:0; }
@media (max-width:900px){ .legal-intro.section-pad{ padding-top:150px; } }
@media (max-width:600px){ .legal-intro.section-pad{ padding-top:130px; } }
.legal-updated{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:14px; }

/* Comfortable reading column — clear hierarchy, generous whitespace,
   restrained (no cards/decoration), matching the site's existing
   typography and colour variables rather than a generic template. */
.legal-content{ max-width:760px; margin:0 auto; padding:56px 0 120px; }
.legal-content h2{
  font-size:22px; color:var(--ink); text-transform:none; letter-spacing:0;
  margin:52px 0 16px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:16.5px; color:var(--ink);
  text-transform:none; letter-spacing:0; margin:28px 0 10px;
}
.legal-content p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:16px; }
.legal-content p:last-child{ margin-bottom:0; }
.legal-content strong{ color:var(--ink); font-weight:700; }
.legal-content ul, .legal-content ol{ margin:0 0 16px; padding-left:0; list-style:none; }
.legal-content ul li, .legal-content ol li{
  position:relative; padding-left:24px; font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:10px;
}
.legal-content ul li::before{
  content:""; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.legal-content ol{ counter-reset:legal-ol; }
.legal-content ol li{ counter-increment:legal-ol; }
.legal-content ol li::before{
  content:counter(legal-ol) "."; position:absolute; left:0; top:0; color:var(--gold-2); font-weight:600; font-size:14.5px;
}
.legal-content a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover{ color:var(--gold); }
.legal-content hr{ border:none; border-top:1px solid var(--steel-line); margin:44px 0; }
/* Projects & Case Studies intro: same reasoning as the pages above for
   the top gap. Bottom padding is intentionally much smaller than the
   default 130px — this section no longer has a description paragraph
   beneath the heading, and the project cards follow immediately after,
   so the excess bottom padding read as a large dead gap. */
.projects-intro.section-pad{ padding-top:210px; padding-bottom:36px; }
@media (max-width:900px){ .projects-intro.section-pad{ padding-top:150px; padding-bottom:30px; } }
@media (max-width:600px){ .projects-intro.section-pad{ padding-top:130px; padding-bottom:26px; } }
.section-head{max-width:700px; margin-bottom:64px;}
.section-head h2{font-size:clamp(30px,4.2vw,46px); color:var(--ink); letter-spacing:-0.01em;}
.section-head p{margin-top:20px; font-size:16.5px; color:var(--ink-soft); max-width:610px;}
.on-dark .section-head h2{color:var(--ink);}
.on-dark .section-head p{color:var(--ink-soft);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ============ GENERAL WORKING ARRANGEMENT — standalone diagram section,
   sits above "Find Your Machine" as its own distinct section. Clean
   white technical panel with generous whitespace around the diagram,
   matching the premium technical presentation used elsewhere on the
   site (e.g. the orbital diagram on Why ALMIC). */
/* Compact, intentional section — the diagram itself is very wide and
   short, so generous section-level padding (like the site's standard
   130px section-pad) would dominate the section's height and make it
   read as a large empty strip. Moderate padding only, diagram fills
   close to the full available width. */
/* ============ ALFEN'S VALUED CUSTOMERS — homepage logo marquee ============
   Sits directly where the curved/dotted divider used to be, between the
   hero and the General Working Arrangement section. Matched directly
   against a reference screenshot of a comparable logo-marquee section:
   very compact overall height, small heading with modest top padding,
   a fairly tight gap before the logo row, smaller/monochrome logos with
   generous horizontal spacing between them, plain light background,
   no cards/borders/shadows. */
.customer-strip-section{ padding:22px 0 24px; overflow:hidden; }
.customer-strip-head{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:600; color:var(--gold); text-align:center; margin-bottom:22px;
}
.logo-marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.logo-marquee-track{
  display:flex; align-items:center; gap:96px; width:max-content;
  animation:logoMarquee 38s linear infinite;
}
.lm-logo{ flex:none; display:flex; align-items:center; justify-content:center; height:60px; }
.lm-logo img{
  height:100%; width:auto; max-width:230px; object-fit:contain; display:block;
}
@keyframes logoMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:900px){
  .lm-logo{ height:48px; }
  .lm-logo img{ max-width:179px; }
  .logo-marquee-track{ gap:62px; animation-duration:28s; }
}
@media (max-width:560px){
  .lm-logo{ height:40px; }
  .lm-logo img{ max-width:143px; }
  .logo-marquee-track{ gap:42px; animation-duration:22s; }
}
@media (prefers-reduced-motion:reduce){
  .logo-marquee-track{ animation:none; }
}

.ga-section{ padding:48px 0; }
.ga-diagram-frame{
  margin-top:0; display:flex; align-items:center; justify-content:center; padding:0;
}
/* Explicit object-fit:contain treatment: the complete diagram is always
   shown at its correct aspect ratio, however tall or wide the frame
   ends up being — nothing is ever cropped to fill the box. */
.ga-diagram-frame img{
  max-width:100%; max-height:80vh; width:auto; height:auto; min-width:0; min-height:0;
  object-fit:contain; display:block;
}
@media (max-width:700px){
  .ga-section{ padding:32px 0; }
}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center p{margin-left:auto; margin-right:auto;}

.bg-void{background:var(--void); color:var(--ink);}
.bg-charcoal{background:var(--charcoal); color:var(--ink);}
.bg-ivory{background:var(--ivory); color:var(--ink);}
.bg-stone{background:var(--stone); color:var(--ink);}

/* ============ ABOUT ============ */

/* Opening statement — larger, lighter lede treatment, standing alone
   before the supporting detail below rather than blending into it. */
.about-lede{ max-width:900px; margin-bottom:44px; }
.about-lede p{
  font-size:23px; line-height:1.5; color:var(--ink); font-weight:400; letter-spacing:-0.005em;
}
.about-lede strong{ font-weight:700; }

/* Key figures pulled forward from the text below as a scannable strip —
   same numbers already stated in the paragraphs, just given visual
   prominence up front, as premium engineering credentials rather than
   ordinary body copy. */
.about-stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--steel-line); border:1px solid var(--steel-line); border-radius:var(--radius);
  overflow:hidden;
}
.about-stat{ background:#fff; padding:32px 28px; }
.about-stat-num{
  display:block; font-family:'Oswald',sans-serif; font-weight:600; font-size:clamp(26px,2.8vw,36px);
  color:var(--gold-2); letter-spacing:-0.01em; line-height:1.1; margin-bottom:10px;
}
.about-stat-label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.5;
}
@media (max-width:700px){
  .about-stats{ grid-template-columns:1fr; }
}

.about-hero-section{ padding-bottom:20px; }

/* ---- Three core points — large editorial rows, not stacked cards.
   Numeral, heading and supporting text sit in one wide horizontal
   row per point, separated by a single hairline rule, so the heading
   reads as the dominant element and the paragraph as clearly
   secondary, with generous air around each. ---- */
.about-points-section{ padding:28px 0 96px; }
.about-points{ display:flex; flex-direction:column; }
.about-point{
  display:grid; grid-template-columns:170px 1fr; column-gap:56px;
  padding:52px 0; border-top:1px solid var(--steel-line);
}
.about-point:last-child{ border-bottom:1px solid var(--steel-line); }
.about-point-num{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(46px,5.6vw,68px);
  color:var(--gold-dim); line-height:1; letter-spacing:-0.02em;
}
.about-point-body h3{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(21px,2.1vw,27px); color:var(--ink);
  text-transform:none; letter-spacing:0; margin-bottom:16px; max-width:520px;
}
.about-point-body p{
  font-size:16px; line-height:1.75; color:var(--ink-soft); max-width:640px;
}
.about-point-body strong{ color:var(--ink); font-weight:700; }
@media (max-width:700px){
  .about-points-section{ padding:72px 0 64px; }
  .about-point{ grid-template-columns:1fr; row-gap:14px; padding:40px 0; }
  .about-point-num{ font-size:38px; }
}

/* ---- Zero-D Philosophy — full-width dark showcase, the visual
   centrepiece of the page. Centred intro, then the five principles as
   a clean numbered sequence (hairline rules, not boxes/cards), closing
   with a large proof statement. ---- */
.about-zerod-section{ position:relative; overflow:hidden; background:var(--ink); color:#fff; }
.about-zerod-section::before{
  content:""; position:absolute; top:-120px; right:-120px; width:480px; height:480px;
  background:radial-gradient(circle, rgba(30,138,76,0.16), transparent 70%); pointer-events:none;
}
.zerod-head{ max-width:760px; margin:0 auto 76px; text-align:center; position:relative; }
.zerod-head .panel-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:16px;
}
.zerod-title{
  font-size:clamp(32px,4.4vw,50px); color:#fff; margin:0 0 26px; text-transform:none; letter-spacing:-0.01em;
}
.zerod-intro{ font-size:17px; line-height:1.75; color:rgba(255,255,255,0.72); margin:0 auto; max-width:640px; }

.zerod-sequence{ position:relative; max-width:980px; margin:0 auto; }
.zerod-item{
  display:grid; grid-template-columns:90px 300px 1fr; column-gap:32px; align-items:start;
  padding:30px 0; border-top:1px solid rgba(255,255,255,0.14);
}
.zerod-item:last-child{ border-bottom:1px solid rgba(255,255,255,0.14); }
.zerod-item-num{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px; color:var(--gold);
  letter-spacing:0.05em; padding-top:2px;
}
.zerod-item h4{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:16px; color:#fff;
  text-transform:uppercase; letter-spacing:0.03em; margin:0;
}
.zerod-item p{ font-size:14.5px; line-height:1.65; color:rgba(255,255,255,0.65); margin:0; }
@media (max-width:700px){
  .zerod-item{ grid-template-columns:1fr; row-gap:8px; padding:22px 0; }
  .zerod-item-num{ padding-top:0; }
}

/* Standalone proof statement — its own full-width green section,
   positioned immediately after the fifth Zero-D principle. Same font
   family and a closely-matched large scale to how the closing
   statistic was previously styled, so it still reads as a premium,
   deliberate closing statement. Dark text on the green background. */
.about-proof-section{ background:var(--gold); padding:88px 0; }
.about-proof-statement{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,44px);
  color:var(--ink); text-align:center; letter-spacing:-0.01em; line-height:1.35;
  max-width:920px; margin:0 auto;
}
@media (max-width:700px){
  .about-proof-section{ padding:64px 0; }
}

/* Visible breathing room between the green proof section and the
   footer, so they don't feel stuck together. */
.about-zerod-spacer{ background:var(--ivory); height:64px; }
@media (max-width:700px){
  .about-zerod-spacer{ height:40px; }
}

/* ============ ENGINEERING STRIP — "Engineered Differently" verified counters ============ */
.eng-strip{background:var(--charcoal); border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line);}
.eng-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.eng-item{
  position:relative; padding:54px 32px 46px; border-right:1px solid var(--steel-line);
  transition:background .35s ease; display:flex; flex-direction:column;
}
.eng-item:hover{background:rgba(255,255,255,0.02);}
.eng-item:last-child{border-right:none;}
.eng-tick{
  display:block; width:0; height:2px; background:var(--gold); margin-bottom:22px;
  transition:width .6s var(--ease-2); transition-delay:calc(var(--i,0) * 100ms);
}
.eng-item.reveal.in .eng-tick{ width:30px; }
.eng-num{
  display:block; line-height:1;
  transform:translateY(10px); opacity:0;
  transition:transform .6s var(--ease-2), opacity .6s var(--ease-2); transition-delay:calc(var(--i,0) * 100ms + .12s);
}
.eng-item.reveal.in .eng-num{ transform:translateY(0); opacity:1; }
.eng-num-val{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(46px,5.4vw,68px);
  color:var(--gold-2); letter-spacing:-0.01em; font-variant-numeric:tabular-nums;
}
.eng-num-prefix{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(18px,2vw,22px);
  color:var(--ink); letter-spacing:0.01em;
}
.eng-label{
  display:block; margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:13.5px;
  letter-spacing:0.04em; color:var(--ink-soft); text-transform:uppercase; line-height:1.6; max-width:19ch;
}
@media (max-width:900px){
  .eng-grid{grid-template-columns:repeat(2,1fr);}
  .eng-item{border-bottom:1px solid var(--steel-line);}
  .eng-item:nth-child(2n){border-right:none;}
}
@media (max-width:560px){ .eng-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){
  .eng-tick{width:30px;}
  .eng-num{transform:none; opacity:1;}
}

/* ============ SOLUTIONS INTRO / IMAGE MOMENT ============
   Composition fix: the product photo is a tall portrait shot. Centering a
   short text block against it (the old approach) created ~270px of dead
   space above/below the copy, then compounding margins added far more
   before the next content even started. We top-align the columns, cap the
   image so it stops dominating the row, and give the text column real
   density (a compact facts row pulled straight from the intro copy) so
   both columns read as one balanced, intentional composition. */
.solutions-intro{display:grid; grid-template-columns:1.08fr 0.86fr; gap:60px; align-items:start; margin-bottom:56px;}
.solutions-facts{display:flex; flex-wrap:wrap; gap:0; margin-top:34px; padding-top:28px; border-top:1px solid var(--steel-line-2);}
.solutions-facts .sf-item{padding-right:36px; margin-right:36px; border-right:1px solid var(--steel-line-2); max-width:220px;}
.solutions-facts .sf-item:last-child{border-right:none; margin-right:0; padding-right:0;}
.solutions-facts .sf-num{
  display:flex; align-items:baseline; gap:2px; font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(42px,4.8vw,56px); color:var(--gold-2); letter-spacing:-0.01em; line-height:1;
}
.solutions-facts .sf-num-prefix{ color:var(--ink); font-size:0.62em; font-weight:600; }
.solutions-facts .sf-lbl{
  display:block; margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.03em;
  color:var(--ink-faint); text-transform:uppercase; line-height:1.6; max-width:19ch;
}
.solutions-media{position:relative; max-width:430px; margin-left:auto;}
@media (max-width:900px){ .solutions-media{max-width:100%; margin-left:0;} }
@media (max-width:480px){
  .solutions-facts .sf-item{border-right:none; margin-right:0; padding-right:0; flex:0 0 100%; margin-bottom:16px;}
  .solutions-facts .sf-item:last-child{margin-bottom:0;}
}
.solutions-media-frame{
  position:relative; overflow:hidden;
}
.solutions-media-frame .img-crop{overflow:hidden;}
.solutions-media-frame img{width:100%; transition:transform .8s var(--ease-2);}
.solutions-media-frame:hover img{transform:scale(1.04);}
.callout{
  position:absolute; display:flex; align-items:center; gap:10px; z-index:4;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink); letter-spacing:0.02em;
}
.callout .dot{
  width:9px; height:9px; border-radius:50%; background:var(--crimson); flex:none; position:relative;
  box-shadow:0 0 0 4px rgba(30,138,76,0.15);
}
.callout .tag{
  background:rgba(244,244,242,0.96); border:1px solid rgba(18,20,28,0.14); padding:6px 11px; white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(18,20,28,0.3);
}
.callout.c1{top:8%; left:6%;}
.callout.c2{top:38%; right:5%;}
.callout.c3{top:70%; right:5%; flex-direction:row-reverse;}
@media (max-width:640px){ .callout{display:none;} }
/* ============ SOLUTIONS & PRODUCTS — CHAPTER / SUBSECTION SYSTEM ============
   "Solutions & Products" is the umbrella chapter; "Custom Systems" (01) and
   "Product Series" (02) are its two major subsections. Each subsection opens
   with a full-width chapter-divider rule and a numbered title block, using
   the same engineering-document numbering language (bordered mono index,
   spec-sheet style) so both halves read as siblings under one chapter —
   never as separate, unrelated page sections. Spacing between every beat
   here is tuned as one coordinated rhythm rather than the default section
   spacing, so the chapter reads as continuous.
*/
.chapter-divider{
  position:relative; height:1px; background:var(--steel-line-2); margin:0 0 36px;
}
.subsection-head{
  display:flex; align-items:flex-start; gap:24px; margin-bottom:36px;
}
.subsection-num{
  flex:none; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:17px; letter-spacing:0.02em;
  color:var(--crimson); border:1.5px solid var(--crimson); background:var(--ivory);
}
.subsection-head-text{max-width:680px; padding-top:1px;}
.subsection-head-text .eyebrow{margin-bottom:10px;}
.subsection-head-text .csi-title{
  font-family:'Oswald',sans-serif; font-size:clamp(21px,2.4vw,27px); letter-spacing:-0.01em;
  text-transform:none; color:var(--ink); margin:0 0 10px; line-height:1.2;
}
.subsection-head-text .csi-copy{font-size:15px; color:var(--ink-soft); line-height:1.7; max-width:640px;}
@media (max-width:640px){
  .subsection-head{gap:16px;}
  .subsection-num{width:44px; height:44px; font-size:14px;}
}

/* ---- Temperature Selector Section ---- */
.temp-selector-section{padding:88px 0 96px; background:var(--gold); position:relative; overflow:hidden;}
/* The shared .eyebrow.on-dark colour (a dark green, tuned for black
   backgrounds elsewhere on the site) is unreadable against this
   section's own green background — override just here. */
.temp-selector-section .eyebrow.on-dark{color:#fff;}
.temp-selector-section::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(30,138,76,0.08), transparent 70%);
  pointer-events:none;
}
.temp-selector-head{position:relative; z-index:2; margin-bottom:56px; text-align:center;}
.temp-selector-head h2{color:var(--ink); font-size:clamp(24px,3.2vw,34px); letter-spacing:-0.01em; max-width:760px; margin:14px auto 0;}
.temp-selector-head p{color:var(--ink); font-size:16px; margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto;}
.temp-sliders-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1180px; margin:0 auto;}
@media (max-width:900px){ .temp-sliders-grid{grid-template-columns:1fr; gap:22px;} }

.temp-slider-card{
  background:var(--ink);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:7px;
  padding:42px 38px 40px;
  position:relative;
  box-shadow:0 24px 48px -30px rgba(0,0,0,0.5);
}
.temp-slider-card .tsc-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;}
.temp-slider-card h3{color:#fff; font-size:19px; line-height:1.4; margin-bottom:32px; text-transform:none; letter-spacing:0; font-weight:600;}

.tsc-readout{display:flex; align-items:baseline; gap:12px; margin-bottom:26px;}
.tsc-readout .tsc-val{font-family:'Oswald',sans-serif; font-size:44px; font-weight:600; color:var(--gold); line-height:1; letter-spacing:-0.01em;}
.tsc-readout .tsc-label{font-size:13.5px; color:rgba(255,255,255,0.65); font-weight:500;}

.temp-slider-track-wrap{position:relative; padding:0 4px; margin-bottom:14px;}
.temp-slider-input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px;
  background:linear-gradient(to right, var(--gold) 0%, var(--gold) var(--fill,0%), rgba(255,255,255,0.14) var(--fill,0%), rgba(255,255,255,0.14) 100%);
  outline:none; cursor:pointer; margin:22px 0 12px; display:block;
}
.temp-slider-input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--gold); border:3px solid var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,0.45);
  cursor:pointer; transition:transform .15s ease;
}
.temp-slider-input::-webkit-slider-thumb:hover{transform:scale(1.12);}
.temp-slider-input::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--gold); border:3px solid var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,0.45);
  cursor:pointer;
}
.temp-slider-input::-moz-range-track{height:4px; border-radius:2px; background:rgba(255,255,255,0.14);}
.temp-slider-input::-moz-range-progress{height:4px; border-radius:2px; background:var(--gold);}

.temp-slider-ticks{display:flex; justify-content:space-between; padding:0 2px; margin-top:2px;}
.temp-slider-ticks > *{flex:1 1 0; min-width:0;}
.temp-slider-ticks .tsc-tick-spacer{visibility:hidden; pointer-events:none;}
.temp-slider-ticks button{
  background:none; border:none; padding:6px 4px; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:rgba(255,255,255,0.5);
  transition:color .2s ease; text-align:center; line-height:1.4;
}
.temp-slider-ticks button .tsc-tick-app{display:block; font-family:'Inter',sans-serif; font-size:12px; color:rgba(255,255,255,0.38); margin-top:2px; max-width:76px;}
.temp-slider-ticks button.active{color:var(--gold);}
.temp-slider-ticks button.active .tsc-tick-app{color:rgba(255,255,255,0.6);}
.temp-slider-ticks button:hover{color:var(--gold);}

.tsc-destination{
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1);
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(255,255,255,0.55); letter-spacing:0.04em;
}
.tsc-destination b{color:var(--gold); font-weight:600;}

/* Highlight pulse for destination targets */
@keyframes tempHighlightPulse{
  0%{box-shadow:0 0 0 0 rgba(30,138,76,0.55);}
  70%{box-shadow:0 0 0 14px rgba(30,138,76,0);}
  100%{box-shadow:0 0 0 0 rgba(30,138,76,0);}
}
.temp-highlight-active{
  animation:tempHighlightPulse 1.4s ease-out 2;
  outline:2px solid var(--gold);
  outline-offset:4px;
  transition:outline-color .3s ease;
}
@media (max-width:520px){
  .temp-slider-card{padding:28px 20px 30px;}
  .tsc-readout .tsc-val{font-size:32px;}
  .temp-slider-ticks button{font-size:10.5px;}
  .tsc-tick-app{max-width:58px !important; font-size:11px !important;}
}
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:64px;}
.cat-card{
  background:var(--ivory); padding:0; position:relative; overflow:hidden;
  border:1px solid rgba(18,20,28,0.12);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.cat-card:hover{transform:translateY(-6px); box-shadow:0 30px 58px -32px rgba(18,20,28,0.38); border-color:var(--gold-dim); z-index:2;}
.cat-card-top{ padding:32px 30px 0; position:relative; }
.cat-icon{
  width:48px; height:48px; border:1px solid rgba(18,20,28,0.16); display:flex; align-items:center; justify-content:center;
  color:var(--crimson); margin-bottom:24px; position:relative; background:var(--ivory);
  transition:border-color .35s ease, background .35s ease, transform .35s var(--ease);
}
.cat-icon svg{width:22px; height:22px;}
.cat-card:hover .cat-icon{border-color:var(--gold); background:var(--stone); transform:translateY(-2px);}
.cat-card .cat-num{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--crimson); letter-spacing:0.14em; position:relative;}
.cat-card h3{font-size:19.5px; margin:14px 0 15px; color:var(--ink); text-transform:none; line-height:1.28; letter-spacing:0; position:relative;}
.cat-card p{font-size:14px; color:var(--ink-soft); margin-bottom:0; position:relative;}
.cat-card-body{ padding:0 30px 32px; }
.cat-chips{display:flex; flex-direction:column; gap:10px; margin-top:24px; padding-top:22px; border-top:1px solid rgba(18,20,28,0.1);}
.cat-chip{
  display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.02em;
  color:var(--ink-soft); text-transform:uppercase;
}
.cat-chip::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none;}
@media (max-width:900px){ .cat-grid{grid-template-columns:1fr;} .solutions-intro{grid-template-columns:1fr;} }

/* Customized Solutions — three consistent compact cards: heading, then
   the complete ALMIC catalogue visual (contained, never cropped), then
   description. Grid + align-items:stretch guarantees all three cards
   share exactly the same height regardless of differing text length. */
.solution-blocks{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:stretch; }
.solution-block{
  display:flex; flex-direction:column;
  border:1px solid var(--steel-line); border-radius:10px; background:#fff;
  padding:22px; box-shadow:0 14px 32px -22px rgba(18,20,28,0.28);
}
.solution-block h3{
  font-family:'Oswald',sans-serif; font-size:16.5px; color:var(--ink);
  text-transform:none; letter-spacing:0; margin:0 0 14px; line-height:1.3;
}
.solution-block-media{
  height:190px; flex:none;
  background:var(--stone); border:1px solid var(--steel-line-2); border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:12px; margin-bottom:16px;
  overflow:hidden;
}
.solution-block-media img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.solution-block p{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
.solution-block .cat-chips{ flex-direction:column; gap:7px; margin-top:auto; padding-top:16px; }
.solution-block .cat-chip{ font-size:9.5px; }
@media (max-width:900px){
  .solution-blocks{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .solution-block{ padding:20px; }
  .solution-block-media{ height:200px; padding:12px; margin-bottom:16px; }
}

/* ============ EXPLORE ALMIC — HOME (three consistent premium panels) ============
   Solutions, Products and Applications now share ONE container system: a
   light silver card (border, radius, padding, shadow), a framed visual
   area, and identical typography/CTA treatment in the body below it.
   Only the content inside the visual area differs — complete catalogue
   diagrams for Solutions, the product photo for Products, colour-blocked
   category cards for Applications (see note below). */
.explore-section .section-head{margin-bottom:0;}

.ex-panels{
  display:flex; align-items:stretch; gap:22px; margin-top:48px;
}
.ex-panels.reveal{ opacity:1; transform:none; }
/* Large landscape panels: the photograph is now the full-bleed
   background of the entire block (no separate padded image box), with
   the title/description overlaid directly on top via a scrim. This is
   what makes the image feel like "part of the block" rather than a
   picture placed inside a container next to some text. */
.ex-panel{
  position:relative; flex:1 1 0; min-width:0; height:340px; display:block;
  background:var(--ink); border:1px solid var(--steel-line); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; opacity:0; transform:translateY(24px);
  transition:
    flex-grow .65s var(--ease-2),
    box-shadow .5s ease, border-color .5s ease, background .5s ease,
    opacity .7s var(--ease-2) calc(var(--i,0) * 140ms),
    transform .7s var(--ease-2) calc(var(--i,0) * 140ms);
}
.ex-panels.reveal.in .ex-panel{ opacity:1; transform:none; }
/* One shared component for all three: identical width (flex-grow:1 each),
   identical fixed height (320px, never content-driven), identical border/
   radius. Height never changes, on hover/open or otherwise — only the
   width (flex-grow) does, so the three boxes always stay perfectly
   aligned top and bottom, and always stay landscape-shaped even as they
   widen on hover. */
.ex-panel[data-key="solutions"],
.ex-panel[data-key="products"],
.ex-panel[data-key="applications"]{ flex-grow:1; }

.ex-panels:hover .ex-panel:not(:hover){ background:var(--stone); }
.ex-panel:hover, .ex-panel.is-open, .ex-panel:focus-visible{
  flex-grow:2.3; z-index:3; border-color:var(--gold-dim);
  box-shadow:0 40px 74px -32px rgba(20,20,20,0.28);
}

/* Full-bleed visual area — now the ENTIRE panel (inset:0), not a boxed
   region within it. object-fit:cover fills the complete rectangle
   edge-to-edge; object-position is tuned per image so the important
   subject stays in frame rather than being centred blindly. */
.ex-visual-frame{
  position:absolute; inset:0; margin:0; background:var(--stone); overflow:hidden;
}
.ex-visual-frame > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%;
  transition:transform 1s var(--ease-2);
}
.ex-panel:hover .ex-visual-frame > img, .ex-panel.is-open .ex-visual-frame > img, .ex-panel:focus-visible .ex-visual-frame > img{
  transform:scale(1.05);
}
.ex-panel[data-key="solutions"] .ex-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}

/* Mini-carousel controls — compact dot strip overlaid at the top-right
   of the full-bleed image. */
.ex-carousel-head{
  position:absolute; left:0; right:0; top:0; z-index:3; padding:14px 18px; display:flex; align-items:center;
  justify-content:flex-end; gap:14px; flex-wrap:wrap; min-height:20px;
  background:linear-gradient(to bottom, rgba(10,10,10,0.5) 0%, transparent 100%);
}
.ex-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; display:flex; align-items:center; justify-content:center; }
.ex-slide.is-active{ opacity:1; z-index:1; }
.ex-slide img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; transition:transform 1s var(--ease-2); }
/* Products carousel — full-bleed cover like the other two panels, but
   with a per-image object-position tuned individually rather than one
   blind default: these three source photos have very different shapes
   and framing (portrait outdoor shot / landscape outdoor shot / tall
   studio shot), so a single crop point would leave one of them looking
   cramped or cut through the nameplate. */
.ex-panel[data-key="products"] [data-slide="1"] img{ object-position:center 38%; }
/* HT and LT specifically: neither photo's own aspect ratio is close to
   the card's shape, so object-fit:cover (used for ULT above, which
   already fits well) would crop into the unit, and object-fit:contain
   alone would leave a visible solid-colour matte around it — both
   explicitly ruled out. The standard fix for exactly this conflict: a
   heavily blurred, zoomed copy of the SAME photograph fills the card
   as an ambient backdrop (so there's no artificial flat colour — the
   "background" is the photo's own content, just softened), with the
   complete, unmodified photograph layered on top via object-fit:contain
   so the entire unit is always fully visible with zero cropping. */
.ex-slide-fitted{ overflow:hidden; }
.ex-slide img.ex-slide-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:blur(30px) brightness(0.55) saturate(1.15); transform:scale(1.3); z-index:0;
}
.ex-slide img.ex-slide-fg{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center;
  filter:none; transform:none;
}
.ex-panel:hover .ex-slide img.ex-slide-fg, .ex-panel.is-open .ex-slide img.ex-slide-fg, .ex-panel:focus-visible .ex-slide img.ex-slide-fg{ transform:scale(1.05); }
/* Guard: the generic hover-zoom rule below also matches .ex-slide-bg
   (it's still an <img> inside .ex-slide) and would shrink it from its
   required 1.3x over-scale down to 1.05x, exposing the blur's hard
   edge at the card boundary. Re-assert the larger scale on hover too. */
.ex-panel:hover .ex-slide img.ex-slide-bg, .ex-panel.is-open .ex-slide img.ex-slide-bg, .ex-panel:focus-visible .ex-slide img.ex-slide-bg{ transform:scale(1.3); }
.ex-panel:hover .ex-slide img, .ex-panel.is-open .ex-slide img, .ex-panel:focus-visible .ex-slide img{ transform:scale(1.05); }
/* The fuller-text label row is redundant with the compact dot labels
   below now that both sit overlaid on the photo with limited space —
   hidden here rather than removed from the markup, so nothing breaks. */
.ex-carousel-label{ display:none; }
.ex-carousel-dots{ display:flex; align-items:center; gap:12px; }
.ex-carousel-dot{
  display:flex; align-items:center; gap:6px; padding:0; cursor:pointer; background:none; border:none;
}
.ex-carousel-dot::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  border:1.5px solid rgba(255,255,255,0.55); background:rgba(255,255,255,0.25);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.ex-carousel-dot.is-active::before{ background:var(--gold); border-color:var(--gold); transform:scale(1.3); }
.ex-carousel-dot:hover::before{ border-color:var(--gold); }
.ex-carousel-dot-txt{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:rgba(255,255,255,0.7); text-shadow:0 1px 4px rgba(0,0,0,0.4);
  transition:color .3s ease;
}
.ex-carousel-dot.is-active .ex-carousel-dot-txt{ color:#fff; font-weight:600; }

/* Corner brackets — technical "viewfinder" accent, only on activation */
.ex-corner{
  position:absolute; width:24px; height:24px; z-index:2; opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .4s var(--ease);
}
.ex-corner-tl{ top:12px; left:12px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); transform:translate(6px,6px); }
.ex-corner-br{ bottom:12px; right:12px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); transform:translate(-6px,-6px); }
.ex-panel:hover .ex-corner, .ex-panel.is-open .ex-corner, .ex-panel:focus-visible .ex-corner{ opacity:1; transform:translate(0,0); }

/* Text overlay — sits on top of the full-bleed photo, anchored to the
   bottom, with its own scrim gradient for contrast so it stays readable
   over any photograph without needing a separate background panel. */
.ex-panel-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 22px 20px;
  background:linear-gradient(to top, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.45) 55%, transparent 100%);
}
.ex-panel-tag{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;
}
.ex-panel-body h3{
  color:#fff; font-size:21px; text-transform:none; letter-spacing:0; margin-bottom:0;
  text-shadow:0 2px 10px rgba(0,0,0,0.35);
  transition:font-size .5s var(--ease-2);
}
.ex-panel:hover .ex-panel-body h3, .ex-panel.is-open .ex-panel-body h3, .ex-panel:focus-visible .ex-panel-body h3{ font-size:24px; }
.ex-panel-desc{
  display:block; color:rgba(255,255,255,0.82); font-size:13.5px; line-height:1.45;
  text-shadow:0 1px 6px rgba(0,0,0,0.35);
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  transition:max-height .5s var(--ease-2), opacity .4s ease, margin-top .5s var(--ease-2);
}
.ex-panel:hover .ex-panel-desc, .ex-panel.is-open .ex-panel-desc, .ex-panel:focus-visible .ex-panel-desc{
  max-height:50px; opacity:1; margin-top:8px;
}
.ex-panel-cta{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,0.7); padding:8px 13px; border-radius:1px;
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  transition:max-height .5s var(--ease-2), opacity .4s ease .1s, margin-top .5s var(--ease-2), background .3s ease, color .3s ease, border-color .3s ease;
}
.ex-panel:hover .ex-panel-cta, .ex-panel.is-open .ex-panel-cta, .ex-panel:focus-visible .ex-panel-cta{
  max-height:40px; opacity:1; margin-top:12px;
}
.ex-panel-cta:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.ex-panel-cta .arrow{ display:inline-block; transition:transform .4s var(--ease); }
.ex-panel-cta:hover .arrow{ transform:translateX(4px); }

@media (max-width:900px){
  .ex-panels{ flex-direction:column; gap:14px; }
  .ex-panel{
    flex:none !important; height:110px !important;
    transition:height .5s var(--ease-2), opacity .7s var(--ease-2), transform .7s var(--ease-2);
  }
  /* Same fixed height for all three when expanded too — identical
     container dimensions on mobile as well, just stacked. Shorter than
     before since image + text now share one space (overlay) rather
     than needing separate stacked room. */
  .ex-panel.is-open{ height:230px !important; box-shadow:none; }
  /* Collapsed (not open): on desktop the photo, carousel dots and title
     scrim stay visible for every panel at all times — only the text
     detail (description/CTA) and panel width react to hover/open.
     Mobile now matches that: the image, dots and title overlay always
     show for all three panels; tapping to open only reveals the
     description/CTA and grows the panel's height. */
  .ex-panel-body h3{ font-size:19px; }
  .ex-panel.is-open .ex-panel-body h3{ font-size:22px; }
  .ex-corner{ width:18px; height:18px; }
  /* The desktop-only "dim inactive siblings on hover" rule sets a light
     background — wrong for these now-dark full-bleed panels, and some
     touch interactions can still trigger a synthetic :hover. Force the
     dark background back explicitly at this breakpoint regardless. */
  .ex-panel{ background:var(--ink) !important; }
}
@media (prefers-reduced-motion: reduce){
  .ex-panel, .ex-visual-frame > img, .ex-panel-body h3, .ex-panel-desc, .ex-panel-cta, .ex-corner, .ex-slide{ transition-duration:.01ms; }
}

/* ---- Technical spec console (dark engineering panel) ---- */
.spec-console{
  background:linear-gradient(180deg, #1c1c1c, var(--ink) 100%);
  border:1px solid rgba(255,255,255,0.12);
  padding:56px 50px;
  position:relative; overflow:hidden;
}
.spec-console-bg{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 65% 55% at 82% 15%, black 5%, transparent 72%);
  pointer-events:none;
}
.spec-console .sc-corner{position:absolute; width:26px; height:26px; z-index:2; pointer-events:none;}
.spec-console .sc-corner.tl{top:20px; left:20px; border-top:1px solid var(--gold-dim); border-left:1px solid var(--gold-dim);}
.spec-console .sc-corner.br{bottom:20px; right:20px; border-bottom:1px solid var(--gold-dim); border-right:1px solid var(--gold-dim);}
.spec-console-head{position:relative; z-index:2; margin-bottom:44px;}
.spec-console-head h2{color:#fff; font-size:clamp(24px,3.4vw,36px); letter-spacing:-0.01em;}
.spec-console-head p{color:rgba(255,255,255,0.62); font-size:14.5px; margin-top:14px; max-width:560px;}
.spec-console > .series-tabs, .spec-console > .series-panel{position:relative; z-index:2;}

/* ---- Series tabs (segmented control, on dark console) ---- */
.series-tabs{
  display:inline-flex; gap:2px; margin-bottom:0; padding:4px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
}
.series-tab{
  padding:13px 26px; font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.55); background:transparent;
  border:none; transition:color .3s ease, background .3s ease;
}
.series-tab.active{color:#fff; background:var(--crimson);}
.series-tab:hover:not(.active){color:#fff; background:rgba(255,255,255,0.08);}
.series-panel{display:none; padding-top:48px;}
.series-panel.active{display:block; animation:fadein .5s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.series-head{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:40px;}
.series-head h3{font-size:clamp(22px,2.8vw,32px); color:#fff; margin-bottom:16px; text-transform:uppercase;}
.series-head .accent{color:var(--gold);}
.series-head p{color:rgba(255,255,255,0.6); font-size:14.5px;}
.series-highlights{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.1);}
.hl-item{background:#1a1a1a; padding:22px 20px; transition:background .3s ease, transform .3s var(--ease);}
.hl-item:hover{background:#242424; transform:translateY(-2px);}
.hl-item .hl-ic{width:20px; height:20px; color:var(--gold); margin-bottom:12px;}
.hl-item .hl-t{font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.04em; color:rgba(255,255,255,0.55); text-transform:uppercase;}
.hl-item .hl-v{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--gold); margin-top:7px; font-weight:600;}
@media (max-width:900px){ .series-head{grid-template-columns:1fr;} .series-highlights{grid-template-columns:repeat(2,1fr);} .spec-console{padding:44px 26px;} }
@media (max-width:520px){ .series-highlights{grid-template-columns:1fr;} .series-tabs{display:flex; width:100%;} .series-tab{flex:1; padding:13px 8px; font-size:11px;} }

.spec-scroll{
  overflow-x:auto; border-top:1px solid rgba(255,255,255,0.12); border-bottom:1px solid rgba(255,255,255,0.12);
  -webkit-overflow-scrolling:touch; position:relative;
  background:var(--ink);
  margin-left:-50px; margin-right:-50px; width:calc(100% + 100px);
}
@media (max-width:900px){
  .spec-scroll{ margin-left:-26px; margin-right:-26px; width:calc(100% + 52px); }
}
table.spec-table{border-collapse:collapse; width:100%; min-width:680px; font-size:13px;}
table.spec-table th, table.spec-table td{
  padding:14px 18px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.1); white-space:nowrap;
}
table.spec-table thead th{
  background:#000; color:#fff; font-family:'Oswald',sans-serif; font-weight:500;
  letter-spacing:0.05em; text-transform:uppercase; font-size:11.5px; position:sticky; top:0; z-index:3;
  border-bottom:1px solid var(--gold-dim);
}
table.spec-table thead th:first-child{color:var(--gold); position:sticky; left:0; z-index:4; background:#000;}
table.spec-table thead th:not(:first-child){color:rgba(255,255,255,0.65);}
table.spec-table tbody tr{background:var(--ink); transition:background .3s ease;}
table.spec-table tbody tr:nth-child(even){background:#1a1a1a;}
table.spec-table tbody tr:hover{background:var(--gold);}
table.spec-table tbody tr.row-key{background:rgba(30,138,76,0.18);}
table.spec-table tbody tr.row-key:hover{background:var(--gold);}
table.spec-table td:first-child{
  font-family:'IBM Plex Mono',monospace; color:rgba(255,255,255,0.72); font-size:12px;
  position:sticky; left:0; background:var(--ink); z-index:2; border-right:1px solid rgba(255,255,255,0.1);
  transition:background .3s ease, color .3s ease;
}
table.spec-table tbody tr:nth-child(even) td:first-child{background:#1a1a1a;}
table.spec-table tbody tr.row-key td:first-child{background:rgba(30,138,76,0.22); color:var(--gold); font-weight:600; box-shadow:inset 3px 0 0 var(--gold);}
table.spec-table tbody tr:hover td:first-child{background:var(--gold); color:#fff;}
table.spec-table td.mono-val{font-family:'IBM Plex Mono',monospace; color:#fff; font-size:13px; transition:color .3s ease;}
table.spec-table tbody tr.row-key td.mono-val{color:var(--gold); font-weight:600; font-size:13.5px;}
table.spec-table tbody tr:hover td.mono-val{color:#fff;}
table.spec-table td:nth-child(2){color:rgba(255,255,255,0.55); font-size:10.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.03em; transition:color .3s ease;}
table.spec-table tbody tr:hover td:nth-child(2){color:rgba(255,255,255,0.85);}
.spec-mobile-hint{
  display:none; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); padding:9px 4px; align-items:center; gap:8px; position:relative; z-index:2;
}
@media (max-width:680px){ .spec-mobile-hint{display:flex;} }
.spec-note{
  display:flex; gap:11px; align-items:flex-start; margin-top:20px; padding:16px 20px;
  background:rgba(255,255,255,0.04); border-left:2px solid var(--gold); font-size:12.5px; color:rgba(255,255,255,0.68); line-height:1.6;
  position:relative; z-index:2;
}

/* ============ PRODUCT SERIES — three premium cards ============
   Replaces the old tabbed technical-specification console. Each card
   gives a visitor a clear overview (image, name, description, key
   features, a handful of headline specs) with the complete engineering
   datasheet available as a download rather than exposed on the page. */
.product-series-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:48px; align-items:stretch;
}
.product-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--steel-line); border-radius:8px; overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(18,20,28,0.32);
}
.product-card-image{
  position:relative; aspect-ratio:4/3; overflow:hidden; flex:none; background:var(--stone);
}
/* Equal-sized box for all three cards (fixed aspect-ratio, identical
   across HT/ULT/LT) — but the three source photos have very different
   native shapes, so simply filling that box would mean cropping at
   least two of them, and simply containing them would leave a flat
   colour visible around at least two of them. Both are ruled out.
   Standard fix: a heavily blurred, zoomed copy of the SAME photograph
   fills the entire box as an ambient backdrop (built from the photo's
   own colours, not an added flat colour), with the complete,
   unmodified photograph layered on top via object-fit:contain so the
   whole unit is always fully visible with zero cropping. */
.product-card-image img.pci-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:blur(26px) brightness(0.72) saturate(1.1); transform:scale(1.25);
}
.product-card-image img.pci-fg{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center;
  display:block;
}
.product-card-image-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:rgba(255,255,255,0.3);
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.product-card-image-placeholder svg{ width:34px; height:34px; }
.product-card-image-placeholder span{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
}
.product-card-body{ padding:28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.product-card-code{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-2); display:block; margin-bottom:8px;
}
.product-card-body h3{ font-size:21px; color:var(--ink); line-height:1.3; margin-bottom:14px; text-transform:none; letter-spacing:0; }
.product-card-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:26px; }

.pcf-title, .pcc-title{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--steel-line);
}
.product-card-features{ margin-bottom:26px; }
.product-card-features ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.product-card-features li{
  display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); line-height:1.55;
}
.product-card-features li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:5px; border-radius:50%; background:var(--gold);
}
.product-card-features li strong{ color:var(--ink); font-weight:600; }

.product-card-chips{ margin-bottom:28px; }
.pcc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--steel-line); border:1px solid var(--steel-line);
}
.pcc-item{ background:var(--void); padding:12px 8px; text-align:center; }
.pcc-label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:5px; line-height:1.3;
}
.pcc-value{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11.5px; color:var(--ink); line-height:1.3; }

.product-card-download{
  margin-top:auto; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  white-space:normal; line-height:1.3; font-size:12px; padding:15px 20px;
}
@media (max-width:900px){
  .product-series-grid{ grid-template-columns:1fr; }
}

/* ============ WHY ALMIC — RADIAL DIAGRAM ============ */
.why-section{position:relative;}
.why-orbit-wrap{ display:flex; justify-content:center; margin-top:20px; }
.why-orbit{
  position:relative; width:100%; max-width:1000px; aspect-ratio:1/1; margin:0 auto;
}
.orbit-ring{
  position:absolute; inset:0; border-radius:50%; border:1px dashed var(--steel-line-2); pointer-events:none;
}
.orbit-ring.inner{ inset:16%; border-color: rgba(30,138,76,0.22); }
.orbit-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:30%; aspect-ratio:1/1; border-radius:50%;
  background:var(--ink);
  border:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px;
  text-align:center; padding:10px; z-index:3;
}
/* Sun — the fixed centre the planets orbit. Logo and label enlarged but
   kept well clear of the circle's edge. */
.orbit-center .oc-logo{ width:90%; max-width:225px; height:auto; object-fit:contain; }
.orbit-center .oc-t2{font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--gold-2); letter-spacing:0.12em; text-transform:uppercase;}

/* Planets — .orbit-item is the rotating pivot (animated), .orbit-card is
   the counter-rotating content (animated in the opposite direction at
   the same speed) so the card's position sweeps around the centre while
   its own text stays upright and readable throughout. Both fall back to
   their static from-keyframe transform (the original fixed layout) the
   moment their animation is removed, e.g. for reduced-motion users. */
.orbit-item{
  position:absolute; top:50%; left:50%; width:198px; margin-left:-99px; margin-top:-76px;
  text-align:center; z-index:2;
  transform: rotate(var(--start));
  animation: why-orbit-spin var(--dur) linear infinite;
  animation-direction: var(--dir, normal);
}
.orbit-card{
  background:var(--void); border:1px solid var(--steel-line); padding:19px 17px;
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease;
  transform: translate(min(395px,43vw), 0) rotate(calc(-1 * var(--start)));
  animation: why-orbit-counter-spin var(--dur) linear infinite;
  animation-direction: var(--dir, normal);
}
.orbit-card:hover{ border-color:var(--gold-dim); background:#d6d6d1; box-shadow:0 18px 34px -20px rgba(18,20,28,0.35); }
.orbit-card .why-num{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--crimson-2); letter-spacing:0.1em;}
.orbit-card .why-ic{width:24px; height:24px; color:var(--gold); margin:11px auto 11px;}
.orbit-card h4{font-size:17px; color:var(--ink); text-transform:none; letter-spacing:0; margin-bottom:8px; line-height:1.3;}
.orbit-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.55;}

@keyframes why-orbit-spin{
  from{ transform: rotate(var(--start)); }
  to{ transform: rotate(calc(var(--start) + 360deg)); }
}
@keyframes why-orbit-counter-spin{
  from{ transform: translate(min(395px,43vw), 0) rotate(calc(-1 * var(--start))); }
  to{ transform: translate(min(395px,43vw), 0) rotate(calc(-1 * var(--start) - 360deg)); }
}
@media (prefers-reduced-motion: reduce){
  .orbit-item, .orbit-card{ animation:none; }
}

/* fallback grid — only for genuinely small/mobile widths. The orbital
   diagram itself scales down (see the 680–1179px tier below) rather
   than disappearing on ordinary laptop/desktop browser widths. */
.why-grid-fallback{ display:none; }
@media (max-width:679px){
  .why-orbit-wrap{ display:none; }
  .why-grid-fallback{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(20,20,20,0.08); }
  .why-grid-fallback .orbit-card{ background:var(--void); padding:34px 26px; border:none; border-right:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line); }
  .why-grid-fallback .orbit-card:hover{ background:#d6d6d1; transform:none; }
  .why-grid-fallback .why-ic{ margin:14px 0 16px; }
  .why-grid-fallback h4{ font-size:14.5px; }
  .why-grid-fallback p{ font-size:12.5px; }
}
@media (max-width:900px){ .why-grid-fallback{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .why-grid-fallback{grid-template-columns:1fr;} }

/* Narrower laptop/tablet tier (680px–1179px): the full orbital diagram
   stays visible here too, just scaled down — smaller radius and cards
   so nothing overlaps or overflows at these widths. */
@media (max-width:1179px) and (min-width:680px){
  .why-orbit{ max-width:720px; }
  .orbit-item{ width:150px; margin-left:-75px; margin-top:-58px; }
  .orbit-card{
    padding:13px 11px;
    transform: translate(min(270px,36vw), 0) rotate(calc(-1 * var(--start)));
  }
  .orbit-card .why-num{ font-size:9.5px; }
  .orbit-card .why-ic{ width:19px; height:19px; margin:7px auto 7px; }
  .orbit-card h4{ font-size:11.5px; margin-bottom:5px; }
  .orbit-card p{ font-size:10px; line-height:1.4; }
  @keyframes why-orbit-counter-spin{
    from{ transform: translate(min(270px,36vw), 0) rotate(calc(-1 * var(--start))); }
    to{ transform: translate(min(270px,36vw), 0) rotate(calc(-1 * var(--start) - 360deg)); }
  }
}

/* Orbit positions — 8 items at 45deg increments around the centre.
   --start sets each planet's initial angle (unchanged from the original
   static layout); --dur gives each one its own orbital period so the
   motion feels organic rather than mechanical, all orbiting the same
   direction like a real planetary system. */
/* Orbit positions — 8 items at 45deg increments around the centre.
   --start sets each planet's initial angle (unchanged from the original
   static layout). All 8 share the SAME orbital period (--dur): with 8
   cards on one shared circular track, giving them genuinely different
   speeds makes their relative spacing drift continuously — verified
   this causes real collisions (up to 5 overlapping pairs at once)
   within under a minute, since even a small speed difference erodes
   the safety margin between neighbours over time and there is no
   duration spread small enough to both feel "different" and stay safe
   for more than a couple of minutes. A single shared period keeps every
   pair permanently at its original safe 45° spacing — zero collision,
   guaranteed for as long as the animation runs — while still producing
   continuous, smooth, genuine orbital motion. */
.why-orbit .oi-1{ --start:-90deg;  --dur:38s; }
.why-orbit .oi-2{ --start:-45deg;  --dur:38s; }
.why-orbit .oi-3{ --start:0deg;    --dur:38s; }
.why-orbit .oi-4{ --start:45deg;   --dur:38s; }
.why-orbit .oi-5{ --start:90deg;   --dur:38s; }
.why-orbit .oi-6{ --start:135deg;  --dur:38s; }
.why-orbit .oi-7{ --start:180deg;  --dur:38s; }
.why-orbit .oi-8{ --start:225deg;  --dur:38s; }

/* ============ APPLICATIONS ============ */
.apps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.app-card{
  border:1px solid rgba(18,20,28,0.12); padding:32px 26px; background:var(--ivory); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s ease, box-shadow .4s ease;
}
.app-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.app-card:hover{transform:translateY(-6px); border-color:rgba(18,20,28,0.06); box-shadow:0 22px 46px -24px rgba(18,20,28,0.28);}
.app-card:hover::before{transform:scaleX(1);}
.app-card .app-ic{width:32px; height:32px; color:var(--crimson); margin-bottom:20px; transition:transform .4s var(--ease);}
.app-card:hover .app-ic{transform:scale(1.1);}
.app-card h4{font-size:15.5px; color:var(--ink); text-transform:none; letter-spacing:0; margin-bottom:9px;}
.app-card p{font-size:13.5px; color:var(--ink-soft);}
@media (max-width:980px){ .apps-grid{grid-template-columns:repeat(2,1fr);} }

@media (max-width:560px){ .apps-grid{grid-template-columns:1fr;} }

/* ============ CUSTOMERS — PREMIUM LOGO WALL ============ */
.cust-note{max-width:740px; font-size:15.5px; color:var(--ink-soft); margin-bottom:58px; line-height:1.75;}
.cust-groups{display:flex; flex-direction:column; gap:56px;}
.cust-group-label{
  display:flex; align-items:center; gap:14px; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--steel-line);
}
.cust-group-label .cgl-ic{
  width:34px; height:34px; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center;
  color:var(--gold-2); flex:none;
}
.cust-group-label .cgl-ic svg{width:16px; height:16px;}
.cust-group-label .cgl-name{
  font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink);
}
.logo-wall{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.logo-card{
  border:1px solid var(--steel-line); background:rgba(255,255,255,0.015);
  min-height:148px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:20px 16px;
  transition:border-color .3s ease, background .3s ease, transform .3s var(--ease);
}
.logo-card:hover{ border-color:var(--gold-dim); background:rgba(30,138,76,0.06); transform:translateY(-3px); }
.logo-card .lc-mark{
  width:100%; height:68px; display:flex; align-items:center; justify-content:center;
  background:var(--ivory); border-radius:3px; padding:8px 14px;
}
.logo-card .lc-mark img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.logo-card .lc-name{
  font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.02em; color:var(--ink-soft);
  line-height:1.3; transition:color .3s ease;
}
.logo-card:hover .lc-name{ color:var(--ink); }
.logo-card--placeholder{ border-style:dashed; opacity:0.7; }
.logo-card--placeholder:hover{ transform:none; border-color:var(--steel-line); background:rgba(255,255,255,0.015); }
.logo-card .lc-mark--placeholder{ background:rgba(255,255,255,0.04); color:var(--ink-soft); }
.logo-card .lc-mark--placeholder svg{ width:26px; height:26px; }
.logo-card .lc-placeholder-note{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.04em; color:var(--ink-soft); text-transform:uppercase;
}
@media (max-width:900px){ .logo-wall{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .logo-wall{grid-template-columns:repeat(2,1fr); gap:10px;} .logo-card{min-height:128px; padding:16px 12px;} .logo-card .lc-mark{height:58px;} }
@media (max-width:420px){ .logo-wall{grid-template-columns:1fr;} }

/* ============ FEATURED PROJECT — THIKSEY, LADAKH ============
   Flagship project story, not a content block. Flow: image -> context ->
   challenge -> image -> response -> technical snapshot -> image -> result.
   Photography carries the section; text is short and restrained throughout.
   No 50/50 rows, no card grids — full-width photography and short centred
   narrative beats on one consistent rhythm. */
.project-section{position:relative; background:var(--void); color:var(--ink); overflow:hidden; padding:130px 0;}
/* Listing page only (not the Home teaser or the Thiksey case study,
   which also share .project-section) — reduced top padding, since the
   intro heading directly above already provides its own spacing. */
.project-section.projects-listing-section{ padding-top:40px; }
@media (max-width:900px){ .project-section.projects-listing-section{ padding-top:32px; } }
/* Thiksey case study page only (not the Home teaser or the listing page,
   which also share .project-section) — this section sits directly under
   the fixed nav with no hero banner, so needs its own top clearance. */
.project-section.thiksey-case-study{ padding-top:210px; }
@media (max-width:900px){ .project-section.thiksey-case-study{ padding-top:150px; } }
@media (max-width:600px){ .project-section.thiksey-case-study{ padding-top:130px; } }
.contour-lines{position:absolute; inset:0; opacity:0.3; pointer-events:none;}

/* ---- Projects & Case Studies — scalable project-card gallery ----
   A reusable .project-card component inside .projects-grid. Currently
   holds one card (Thiksey, Ladakh); more can be added as plain
   siblings later and the grid will reflow automatically. */
.projects-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 420px)); gap:36px;
}
.project-card{
  display:flex; flex-direction:column; text-decoration:none;
  background:#fff; border:1px solid var(--steel-line); border-radius:10px; overflow:hidden;
  box-shadow:0 16px 36px -24px rgba(18,20,28,0.3);
  transition:transform .4s var(--ease-2), box-shadow .4s ease, border-color .4s ease;
}
.project-card:hover, .project-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 30px 56px -22px rgba(18,20,28,0.38);
  border-color:var(--gold-dim);
}
.project-card-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--stone); }
.project-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease-2);
}
.project-card:hover .project-card-media img{ transform:scale(1.06); }
.project-card-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:#fff; background:rgba(20,20,20,0.65); border:1px solid rgba(255,255,255,0.25);
  padding:6px 12px;
}
.project-card-body{ padding:28px 30px 32px; position:relative; }
.project-card-index{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:12px;
}
.project-card-body h3{ font-size:24px; color:var(--ink); letter-spacing:-0.01em; margin-bottom:8px; }
.project-card-meta{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:16px;
}
.project-card-desc{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:26px; }
.project-card-cta{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--gold-2);
  border:1px solid var(--gold); padding:11px 18px; border-radius:1px;
  transition:background .3s ease, color .3s ease;
}
.project-card:hover .project-card-cta{ background:var(--gold); color:#fff; }
.project-card-cta .arrow{ display:inline-block; transition:transform .3s var(--ease); }
.project-card:hover .project-card-cta .arrow{ transform:translateX(4px); }
@media (max-width:520px){
  .project-card-body{ padding:24px 22px 28px; }
}

.tp-wrap{position:relative; z-index:2;}
.tp-wrap > * + *{margin-top:88px;}

/* ---- 1. Featured Project intro — short ---- */
.tp-intro{max-width:640px;}
.tp-kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:22px;
}
.tp-intro h2{font-size:clamp(36px,4.8vw,56px); color:var(--ink); letter-spacing:-0.015em; line-height:1.04; margin-bottom:14px;}
.tp-intro .tp-loc{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); letter-spacing:0.03em; margin-bottom:26px;}
.tp-intro p{font-family:'Oswald',sans-serif; font-weight:400; font-size:clamp(18px,2vw,22px); color:var(--ink-soft); line-height:1.5;}

/* ---- 2. Full-width hero photo ---- */
.tp-hero-photo{width:100%;}
.tp-hero-photo img{width:100%; aspect-ratio:16/8; object-fit:cover; display:block;}

/* ---- Home-page-only Thiksey teaser image: sized to make full use of
   the section's available width. Scoped via .tp-home-media — the
   case-study page and Projects listing page use the base .tp-hero-photo
   class unmodified. ----
   The photograph itself (the scale-model diorama) has its own natural
   ~4:3 shape, different from the base class's fixed 16:8 crop, so the
   image's own aspect-ratio/object-fit are overridden here too — for
   this Home instance only — to show the complete photo uncropped rather
   than force it into the wider ratio used elsewhere. Height is not
   fixed: aspect-ratio lets the container grow proportionally with width. */
.tp-hero-photo.tp-home-media{max-width:680px; width:100%; margin-left:auto; margin-right:auto;}
.tp-hero-photo.tp-home-media img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background:var(--stone);
}

/* ---- Display-size reduction for the Thiksey case-study photography only.
   Scoped via .tp-media-sm so the shared .tp-hero-photo/.tp-photo/.tp-pair-grid
   classes used elsewhere (Home & Projects teasers) are unaffected. Aspect
   ratios, cropping and arrangement are untouched — only the rendered width. ---- */
@media (min-width:641px){
  .tp-hero-photo.tp-media-sm{max-width:920px; margin-left:auto; margin-right:auto;}
  .tp-photo.tp-media-sm{max-width:820px; margin-left:auto; margin-right:auto;}
  .tp-pair-grid.tp-media-sm{max-width:760px; margin-left:auto; margin-right:auto;}
}

/* ---- 3. Compact info strip ---- */
.tp-strip{display:flex; flex-wrap:wrap; border-top:1px solid var(--steel-line-2); border-bottom:1px solid var(--steel-line-2);}
.tp-strip-item{flex:1 1 22%; padding:26px 28px; border-right:1px solid var(--steel-line-2);}
.tp-strip-item:last-child{border-right:none;}
.tp-strip-item .lbl{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}
.tp-strip-item .val{font-family:'Oswald',sans-serif; font-weight:500; font-size:16px; color:var(--ink); margin-top:8px;}

/* ---- Narrative beats: Challenge / Response / Result — short, centred ---- */
.tp-beat{max-width:700px; margin-left:auto; margin-right:auto; text-align:center;}
.tp-beat .tp-kicker{justify-content:center; display:flex;}
.tp-beat p{font-size:17px; color:var(--ink-soft); line-height:1.75;}

/* Home page's Thiksey teaser only (not the full case-study page, which
   shares these same tp-* classes) — body/supporting text sized up
   slightly as part of the sitewide Home-page-only text increase. */
.tp-wrap-home .tp-intro .tp-loc{ font-size:14px; }
.tp-wrap-home .tp-intro p{ font-size:clamp(19.5px,2vw,23.5px); }
.tp-wrap-home .tp-strip-item .lbl{ font-size:11.5px; }
.tp-wrap-home .tp-beat p{ font-size:18.5px; }

/* ---- Large photo moments — full width, not 50/50 ---- */
.tp-photo{width:100%;}
.tp-photo img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.tp-photo-captioned figcaption{
  margin-top:22px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); line-height:1.9;
}
.tp-photo-captioned figcaption em{color:var(--gold-2); font-style:normal;}

/* System-at-a-Glance photo pair — same non-cropping, equal-HEIGHT
   approach as the Response gallery below: these two source photos have
   different native aspect ratios (one 16:9, one 4:3), so matching
   height with natural width keeps both complete with zero cropping.
   align-items:flex-start (not stretch) so the images themselves stay
   equal height and top-aligned even though only the first has a
   caption extending below it. */
.tp-glance-gallery{
  display:flex; gap:16px; justify-content:center; align-items:stretch;
  max-width:100%; margin:44px auto 0;
}
.tp-gg-frame{
  width:420px; height:280px; max-width:100%; overflow:hidden; display:flex;
  align-items:center; justify-content:center; background:var(--void);
}
.tp-gg-frame img{ width:100%; height:100%; object-fit:contain; display:block; }
/* Caption for the WHOLE two-image block above — a sibling after the
   grid, not nested in either column, so it spans and centers across
   the full block (and the page's content width) rather than just one
   photo's column. */
.tp-glance-caption{
  margin-top:26px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); line-height:1.9;
}
.tp-glance-caption em{color:var(--gold-2); font-style:normal;}
@media (max-width:1150px){ .tp-gg-frame{ width:330px; height:220px; } }
@media (max-width:900px){ .tp-gg-frame{ width:255px; height:170px; } }
@media (max-width:680px){
  .tp-glance-gallery{ flex-direction:column; align-items:center; }
  .tp-gg-frame{ width:100%; max-width:420px; height:auto; aspect-ratio:4/3; }
}

/* ---- Paired photograph block — one cohesive documentation moment ---- */
.tp-pair-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.tp-pair-grid img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.tp-pair figcaption{
  margin-top:22px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); line-height:1.9;
}
.tp-pair figcaption em{color:var(--gold-2); font-style:normal;}

/* Hero photo (1st image) forced to the exact same box as the Challenge
   photo (2nd image) below it: same max-width, same aspect ratio. Uses
   object-fit:contain (not the shared class's cover) so the complete
   original photograph is always visible — a neutral background fills
   any letterboxed space rather than cropping the image to fit. */
.tp-hero-photo.tp-media-sm.tp-first-matched{ max-width:820px; }
.tp-hero-photo.tp-first-matched img{
  aspect-ratio:16/9; object-fit:contain; background:var(--stone);
}
@media (max-width:900px){
  .tp-hero-photo.tp-first-matched img{ aspect-ratio:4/3.2; }
}

/* Response photographs — paired, but unlike the result-photo pair above,
   these must show the COMPLETE original images (different native aspect
   ratios), so each sits in its own framed, contained box rather than
   being cropped to fill a shared aspect ratio. */
.tp-pair-grid.tp-pair-contain{ align-items:stretch; }
.tp-pair-frame{
  display:flex; align-items:center; justify-content:center; background:var(--stone);
  aspect-ratio:4/3; overflow:hidden;
}
.tp-pair-grid.tp-pair-contain img{
  width:100%; height:100%; aspect-ratio:auto; object-fit:contain; display:block;
}
@media (max-width:680px){
  .tp-pair-grid.tp-pair-contain{ grid-template-columns:1fr; }
  .tp-pair-frame{ aspect-ratio:4/3.2; }
}

/* Response photograph gallery (3 images) — these three source photos
   have genuinely different native aspect ratios (one 4:3, two ~16:9).
   Forcing them into a shared fixed-ratio box (like the pair-frame above)
   either crops them or leaves visible letterboxed background around the
   narrower one. Instead this uses a real photo-contact-sheet approach:
   every image is scaled to the SAME HEIGHT with NATURAL width, so they
   align perfectly top and bottom with zero cropping and no background
   ever visible behind any of them. */
.tp-response-gallery{
  display:flex; gap:16px; justify-content:center; align-items:stretch;
  height:230px; max-width:100%; margin:44px auto 0;
}
.tp-rg-frame{ height:100%; overflow:hidden; }
.tp-rg-frame img{ height:100%; width:auto; max-width:100%; object-fit:contain; display:block; }
@media (max-width:1150px){ .tp-response-gallery{ height:190px; } }
@media (max-width:900px){ .tp-response-gallery{ height:150px; } }
@media (max-width:680px){
  .tp-response-gallery{ flex-direction:column; height:auto; align-items:center; }
  .tp-rg-frame{ height:auto; width:100%; }
  .tp-rg-frame img{ height:auto; width:100%; max-width:420px; }
}

/* ---- Result photographs — plaque + LG/media pair, full-width like other case-study photos ---- */
.tp-result-pair{width:100%;}
.tp-result-pair img{aspect-ratio:4/3.2;}

/* ---- 7. System at a glance — compact technical panel ---- */
.tp-glance{border:1px solid var(--steel-line-2); background:#dcdcd8; padding:44px;}
.tp-glance-head{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:32px; text-align:center;
}
.tp-glance-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 24px;}
.tp-glance-item .lbl{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);}
.tp-glance-item .val{font-family:'Oswald',sans-serif; font-weight:500; font-size:16.5px; color:var(--ink); margin-top:7px; line-height:1.3;}

/* ---- Video — large, cinematic, full-width validation moment ---- */
.tp-video{width:100%; max-width:760px; margin:0 auto;}
.tp-video-info{max-width:640px; margin:0 auto; text-align:center;}
.tp-video-name{font-family:'Oswald',sans-serif; font-weight:500; font-size:19px; color:var(--ink); margin-top:4px;}
.tp-video-role{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--ink-soft); margin-top:5px;}
.tp-video-info p{color:var(--ink-soft); font-size:14.5px; margin-top:14px;}
.tp-video-frame{width:100%; margin-top:36px; box-shadow:0 50px 110px -30px rgba(0,0,0,0.65);}
.tp-video-frame video{width:100%; aspect-ratio:16/9; display:block; background:#000;}

@media (max-width:900px){
  .project-section{padding:88px 0;}
  .tp-wrap > * + *{margin-top:64px;}
  .tp-hero-photo img{aspect-ratio:4/3.4;}
  .tp-photo img{aspect-ratio:4/3.2;}
  .tp-pair-grid{gap:10px;}
  .tp-strip-item{flex:1 1 50%; border-bottom:1px solid var(--steel-line-2);}
  .tp-strip-item:nth-child(2n){border-right:none;}
  .tp-glance-grid{grid-template-columns:repeat(2,1fr);}
  .tp-glance{padding:32px 24px;}
}
@media (max-width:640px){
  .project-section{padding:72px 0;}
  .tp-wrap > * + *{margin-top:48px;}
  .tp-glance-grid{grid-template-columns:1fr 1fr; gap:22px 16px;}
}

/* ============ CTA BAND ============ */
.cta-band{
  background:var(--ivory);
  position:relative; overflow:hidden; border-top:1px solid rgba(18,20,28,0.12); border-bottom:1px solid rgba(18,20,28,0.12);
}
.cta-band::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--crimson), var(--gold));
}
.cta-band::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(18,20,28,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(18,20,28,0.08) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 60% 100% at 85% 50%, black, transparent 80%);
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:44px; flex-wrap:wrap;
  position:relative; z-index:2; padding:88px 0 88px 40px;
}
.cta-inner .eyebrow{ margin-bottom:18px; }
.cta-inner h2{font-size:clamp(26px,3.6vw,40px); color:var(--ink); max-width:600px;}
.cta-inner p{color:var(--ink-soft); margin-top:14px; font-size:17px; max-width:490px;}

/* ============ CONTACT ============ */
.contact-grid{display:grid; grid-template-columns:0.82fr 1.18fr; gap:76px;}
.contact-info-panel{
  background:var(--void); color:var(--ink); padding:40px 36px; border:1px solid rgba(255,255,255,0.06); position:relative; overflow:hidden;
}
.contact-info-panel::before{
  content:""; position:absolute; bottom:-50px; left:-50px; width:220px; height:220px;
  background:radial-gradient(circle, rgba(30,138,76,0.12), transparent 70%);
}
.contact-info-panel h3{font-size:19px; color:var(--gold-2); margin-bottom:28px; text-transform:none; letter-spacing:0; position:relative;}
.contact-item{display:flex; gap:16px; margin-bottom:26px; align-items:flex-start; position:relative;}
.contact-item:last-child{margin-bottom:0;}
.contact-item .ci-ic{
  flex:none; width:40px; height:40px; border:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; color:var(--gold);
}
.contact-item .ci-ic svg{width:18px; height:18px;}
.contact-item .ci-t{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px;}
.contact-item .ci-v{font-size:14.5px; color:var(--ink-soft); line-height:1.55;}
.contact-item a.ci-v{transition:color .3s ease;}
.contact-item a.ci-v:hover{color:var(--gold-2);}
.contact-form{
  background:#fff; border:1px solid rgba(18,20,28,0.1); padding:46px; box-shadow:0 34px 70px -44px rgba(18,20,28,0.3);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px;}
.field{display:flex; flex-direction:column; gap:9px;}
.field label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft);
}
.field input, .field select, .field textarea{
  border:1px solid rgba(18,20,28,0.18); background:var(--ivory); padding:14px 15px; font-family:'Inter',sans-serif;
  font-size:14.5px; color:var(--ink); border-radius:1px; transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--crimson); background:#fff; box-shadow:0 0 0 3px rgba(30,138,76,0.08);
}
.field textarea{resize:vertical; min-height:116px;}
.form-submit{width:100%; justify-content:center; margin-top:10px;}
.form-note{font-size:12px; color:var(--ink-soft); margin-top:16px; text-align:center;}
.form-note.form-error{ color:#b3261e; }
.form-success{ display:none; text-align:center; padding:50px 20px; }
.form-success.show{display:block; animation:fadein .5s ease;}
.form-success .fs-ic{width:48px; height:48px; color:var(--crimson); margin:0 auto 20px;}
.form-success h3{font-size:20px; margin-bottom:12px; text-transform:none; letter-spacing:0;}
.form-success p{color:var(--ink-soft); font-size:14.5px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} .contact-form{padding:30px 22px;} }

/* ============ FOOTER ============ */
.site-footer{background:var(--ink); color:rgba(255,255,255,0.55); padding-top:88px; position:relative;}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:56px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,0.08);}
/* Logo — same position/alignment, proportionally scaled (height set,
   width auto), noticeably larger than the original but not oversized. */
.footer-brand img{height:150px; width:auto; margin-bottom:22px; display:block;}
.footer-brand p{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:400; line-height:1.8;
  max-width:280px; color:rgba(255,255,255,0.5); letter-spacing:0.005em;
}

/* ---- Footer headings — clean, modern, understated. Green (on-brand)
   but no decorative underline/bar, no heavy weight or wide tracking —
   just a simple, refined label. ---- */
.footer-col h5{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px;
}

/* ---- Links — clean, simple, no boxes, no underline decoration.
   Refined size/weight/spacing, plain colour shift on hover. ---- */
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.footer-col a{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:400; line-height:1.5; letter-spacing:0.005em;
  color:rgba(255,255,255,0.58); transition:color .25s ease;
}
.footer-col a:hover{ color:#fff; }

/* ---- Contact info — plain stacked links, clearly separated, no
   labels, no icons, same simple hover as the links above. ---- */
.footer-contact-list{ display:flex; flex-direction:column; gap:14px; }
.footer-contact-list .footer-contact-row{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact-ic{ flex:none; width:15px; height:15px; margin-top:1px; color:var(--green); }
.footer-contact-ic svg{ width:100%; height:100%; display:block; }
.footer-contact-list .footer-contact-item{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:400; letter-spacing:0.005em;
  color:rgba(255,255,255,0.58); text-decoration:none; transition:color .25s ease;
}
.footer-contact-list .footer-contact-item:hover{ color:#fff; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding:30px 0; flex-wrap:wrap; gap:12px;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:400; letter-spacing:0.01em; color:rgba(255,255,255,0.42);
}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:48px;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }

/* ============ REVEAL ON SCROLL ============ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.stagger.in > *{transition-delay:calc(var(--i,0) * 70ms);}

/* ============ MOBILE RESPONSIVENESS AUDIT — targeted fixes ============
   Scoped to narrow viewports only; desktop layout is untouched. */
@media (max-width:900px){
  /* CTA band had a hardcoded extra 40px left padding baked in for the
     desktop layout — on mobile this made the heading/button sit visibly
     off-centre versus every other section's standard edge margin. */
  .cta-inner{padding:64px 0;}
}
@media (max-width:640px){
  /* Slightly larger slider thumbs for easier touch dragging. */
  .temp-slider-input::-webkit-slider-thumb{width:28px; height:28px;}
  .temp-slider-input::-moz-range-thumb{width:28px; height:28px;}
  /* Comfortable minimum tap size on any bare icon-only buttons. */
  .menu-close{min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;}
}

/* ============ TECHNICAL SPECIFICATIONS REQUEST MODAL ============
   Email-gated download flow for the three Product Series cards. The
   PDF is never linked directly; this modal collects an email address
   and the form posts to a server-side endpoint (see js/main.js) which
   is responsible for emailing the correct document and recording the
   request — see /api/README.md for what needs real deployment/
   credentials before this is live. */
.specs-modal-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(10,10,10,0.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; transition:opacity .25s ease;
}
.specs-modal-overlay.is-open{ opacity:1; }
.specs-modal-overlay[hidden]{ display:none; }

.specs-modal{
  position:relative; width:100%; max-width:440px; background:#fff;
  border-radius:8px; border:1px solid var(--steel-line); box-shadow:0 40px 80px -20px rgba(0,0,0,0.4);
  padding:40px 36px 34px; transform:translateY(16px) scale(0.98); transition:transform .25s ease;
  max-height:90vh; overflow-y:auto;
}
.specs-modal-overlay.is-open .specs-modal{ transform:translateY(0) scale(1); }

.specs-modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--ink-soft); cursor:pointer; border-radius:50%; transition:background .2s ease, color .2s ease;
}
.specs-modal-close:hover{ background:var(--void); color:var(--ink); }
.specs-modal-close svg{ width:18px; height:18px; }

.specs-modal-eyebrow{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:10px;
}
.specs-modal h3{ font-size:22px; color:var(--ink); margin-bottom:12px; line-height:1.3; text-transform:none; letter-spacing:0; }
.specs-modal-copy{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:26px; }

.specs-field{ display:block; margin-bottom:8px; }
.specs-field span{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px;
}
.specs-field span em{ color:var(--gold); font-style:normal; }
.specs-field input{
  width:100%; padding:13px 14px; border:1px solid var(--steel-line-2); border-radius:4px; font-size:14px;
  font-family:'Inter',sans-serif; color:var(--ink); transition:border-color .2s ease; box-sizing:border-box;
}
.specs-field input:focus{ outline:none; border-color:var(--gold); }
.specs-field input.has-error{ border-color:#c0392b; }

.specs-error-msg{ min-height:18px; font-size:12px; color:#c0392b; margin:6px 0 16px; display:none; }
.specs-error-msg.show{ display:block; }

.specs-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.specs-submit{ width:100%; justify-content:center; margin-top:6px; position:relative; gap:9px; }
.specs-submit:disabled{ opacity:0.75; cursor:default; pointer-events:none; }
.specs-spinner{
  display:none; width:15px; height:15px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  border-radius:50%; animation:specsSpin .7s linear infinite; flex:none;
}
.specs-submit.is-loading .specs-spinner{ display:inline-block; }
@keyframes specsSpin{ to{ transform:rotate(360deg); } }

.specs-privacy-note{ margin-top:16px; font-size:11px; color:var(--ink-faint); line-height:1.5; text-align:center; }

.specs-modal-state{ text-align:center; }
.specs-modal-state#specsStateForm{ text-align:left; }
.specs-icon{ width:52px; height:52px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.specs-icon-success{ background:rgba(30,138,76,0.12); color:var(--gold); }
.specs-icon-error{ background:rgba(192,57,43,0.1); color:#c0392b; }
.specs-modal-state h3{ margin-bottom:10px; }
.specs-close-btn, #specsRetryBtn{ margin-top:6px; }

@media (max-width:520px){
  .specs-modal{ padding:32px 24px 28px; }
}
</style>