/* Sphere site styles.
   Everything is fully visible by default. Hidden animation "from" states live only under
   html.js-motion, which a script adds and a failsafe removes (see the <head> of index.html). */

/* Metric-matched fallbacks keep text from jumping when the web fonts arrive. */
@font-face{font-family:'Fraunces Fallback'; src:local('Georgia'),local('Noto Serif'),local('Times New Roman'); size-adjust:96%; ascent-override:100%; descent-override:26%; line-gap-override:0%;}
@font-face{font-family:'Inter Fallback'; src:local('Arial'),local('Roboto'),local('Helvetica'); size-adjust:107.4%; ascent-override:90%; descent-override:22.4%; line-gap-override:0%;}

:root{
  /* Egyptian blue leads, stone blue supports, gold is a small accent only. */
  --ink:#071A52;
  --navy:#1034A6;
  --navy-2:#2A55D4;
  --cream:#E4EBF0;
  --cream-2:#D2DDE5;
  --paper:#F3F6F8;
  --gold:#C6A05C;
  --gold-2:#DFC08B;
  --accent-ink:#1034A6;
  --stone:#8097A8;
  --stone-dark:#4A6173;
  --text:#17233A;
  --grey:#4E5D69;
  --muted-on-ink:#A3B3D1;
  --border:#CCD7E0;
  --white:#FFFFFF;
  --radius:16px;

  --font-display:'Fraunces','Fraunces Fallback',Georgia,serif;
  --font-body:'Inter','Inter Fallback',system-ui,sans-serif;

  --dur-micro:180ms;
  --dur-base:400ms;
  --dur-reveal:800ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  --header-h:76px;
  --header-condensed:64px;
  --gutter:clamp(20px,4vw,48px);
  --edge:max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));
  --section-y:clamp(72px,10vw,148px);
}

*{box-sizing:border-box;}
html{scroll-padding-top:calc(var(--header-condensed) + 8px); scrollbar-gutter:stable;}
html:not(.js-motion){scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--navy); font-weight:600; font-optical-sizing:auto;}
em,.accent-word{font-style:italic; color:var(--gold); font-family:var(--font-display);}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
button{font:inherit; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
[hidden]{display:none !important;}
::selection{background:var(--gold-2); color:var(--ink);}
main:focus{outline:none;}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:4px;}
.hero :focus-visible,.final-cta :focus-visible,.tech-section :focus-visible,footer :focus-visible,.marquee-strip :focus-visible{outline-color:var(--gold-2);}

.container{max-width:1320px; margin:0 auto; padding:0 var(--gutter);}
.skip-link{
  position:absolute; top:-60px; left:12px; z-index:1000; background:var(--navy); color:var(--white);
  padding:12px 20px; border-radius:8px; font-weight:600; font-size:14px; text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{top:12px;}

/* Film grain: one static tile, no blend mode, so it costs nothing while scrolling. */
body::after{
  content:""; position:fixed; inset:0; z-index:400; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; height:var(--header-h); transition:transform var(--dur-base) var(--ease-out);}
html.js .site-header{position:fixed; top:0; left:0; right:0;}
html.js body{padding-top:var(--header-h);}
.site-header::before{content:""; position:absolute; inset:0; background:var(--paper); border-bottom:1px solid var(--border); transition:background-color var(--dur-base);}
.header-inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; height:100%; max-width:1400px; margin:0 auto; padding:0 var(--gutter); transition:transform var(--dur-base) var(--ease-out);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.brand img{height:50px; width:auto; transform-origin:left center; transition:transform var(--dur-base) var(--ease-out);}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--navy); letter-spacing:.01em; white-space:nowrap;}
.brand-sub{font-size:10.5px; color:var(--grey); margin-top:-2px; letter-spacing:.03em; white-space:nowrap;}

/* Shrink happens by transform so the reserved height never changes and nothing shifts. */
html.header-condensed .site-header{transform:translateY(calc(var(--header-condensed) - var(--header-h)));}
html.header-condensed .site-header::before{background:rgba(243,246,248,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
html.header-condensed .header-inner{transform:translateY(calc((var(--header-h) - var(--header-condensed)) / 2));}
html.header-condensed .brand img{transform:scale(.84);}
html.header-hidden:not(.menu-open) .site-header{transform:translateY(-100%);}

nav.main-nav{display:flex; align-items:center; gap:clamp(12px,1.4vw,24px);}
nav.main-nav a{position:relative; font-size:13.5px; font-weight:500; color:var(--text); text-decoration:none; padding:6px 0; white-space:nowrap; transition:color var(--dur-micro);}
nav.main-nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 250ms var(--ease-out);}
nav.main-nav a:hover,nav.main-nav a:focus-visible{color:var(--accent-ink);}
nav.main-nav a:hover::after,nav.main-nav a:focus-visible::after{transform:scaleX(1);}
.nav-brochure-link{display:none;}
.header-actions{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:10px; margin-right:-10px;}
.menu-toggle svg{stroke:var(--navy); display:block;}

/* ---------- Buttons: fill slides in from below, text color follows ---------- */
.btn,.btn-whatsapp.btn-labeled{
  position:relative; display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  font-family:var(--font-body); white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.btn::before,.btn-whatsapp.btn-labeled::before{content:""; position:absolute; inset:-1px; z-index:-1; background:var(--fill,var(--navy)); transform:translateY(101%); transition:transform 300ms var(--ease-out);}
.btn:hover::before,.btn:focus-visible::before,.btn-whatsapp.btn-labeled:hover::before,.btn-whatsapp.btn-labeled:focus-visible::before{transform:translateY(0);}
.btn-primary{background:var(--gold); color:var(--ink); --fill:var(--navy);}
.btn-primary:hover,.btn-primary:focus-visible{color:var(--white);}
.hero .btn-primary,.final-cta .btn-primary{--fill:var(--gold-2);}
.hero .btn-primary:hover,.hero .btn-primary:focus-visible,.final-cta .btn-primary:hover,.final-cta .btn-primary:focus-visible{color:var(--ink);}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.4); color:var(--white); --fill:var(--white);}
.btn-outline:hover,.btn-outline:focus-visible{color:var(--navy); border-color:var(--white);}
.btn-ghost{background:transparent; border-color:var(--navy); color:var(--navy); --fill:var(--navy);}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--white);}
.btn-block{width:100%; justify-content:center;}
.btn-grow{flex:1; justify-content:center;}
.btn-whatsapp{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25D366; color:var(--ink); flex-shrink:0; transition:background-color var(--dur-micro);}
.btn-whatsapp:hover{background:#3BE078;}
.btn-whatsapp.btn-labeled{width:auto; height:auto; background:#25D366; --fill:var(--white);}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--ink);
  background:radial-gradient(ellipse 120% 90% at 75% 20%, #2A55D4 0%, #10318F 45%, #071A52 100%);
  min-height:calc(100svh - var(--header-h)); display:flex; align-items:center;
  padding:clamp(40px,5vw,72px) 0 clamp(64px,6vw,84px);
}
.hero-glow{position:absolute; width:min(780px,110vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(120,160,255,.28) 0%, rgba(120,160,255,0) 70%); top:-12%; right:-6%; pointer-events:none;}
.hero-ring{position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; pointer-events:none;}
.hero-ring.r1{width:min(620px,92vw); aspect-ratio:1; top:4%; right:2%;}
.hero-ring.r2{width:min(400px,62vw); aspect-ratio:1; top:20%; right:12%;}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,3vw,48px); align-items:center; position:relative; z-index:2; width:100%;}
.eyebrow{display:inline-block; font-family:var(--font-display); font-style:italic; color:var(--gold-2); font-size:clamp(15px,1.25vw,18px); font-weight:500; margin:0 0 clamp(14px,1.6vw,22px);}
.hero h1{color:var(--white); font-size:clamp(44px,6.5vw,104px); line-height:.98; font-weight:500; letter-spacing:-.022em; margin-bottom:clamp(18px,2vw,28px);}
.hero p.lead{font-size:clamp(16px,1.3vw,18.5px); line-height:1.6; color:#C9D4EC; max-width:33em; margin:0 0 clamp(22px,2.4vw,32px);}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:clamp(26px,3vw,40px);}
.hero-stats{display:flex; gap:clamp(20px,3vw,40px); flex-wrap:wrap;}
.hero-stat{font-size:12.5px; color:#BCC9E6; font-weight:500; padding-left:14px; border-left:1px solid rgba(255,255,255,.2);}
.hero-stat b{display:block; color:var(--white); font-family:var(--font-display); font-size:clamp(22px,2vw,28px); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.15;}

.hero-stage{position:relative; height:clamp(320px,64vh,640px); will-change:transform;}
.hero-stage-bg{position:absolute; inset:6% 4%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 72%);}
.hero-float{position:absolute; inset:0;}
.hero-product-wrap{position:absolute; inset:0 0 24% 0;}
.hero-product{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 100%;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.5));
  opacity:0; clip-path:circle(0% at 50% 62%);
  /* Leaving product: holds, fades, then its circle resets out of sight. */
  transition:opacity .55s ease .3s, clip-path 0s linear .9s;
}
.hero-product.active{opacity:1; z-index:2; clip-path:circle(78% at 50% 62%); transition:opacity 0s, clip-path .9s var(--ease-inout);}
.hero-product-reflection{
  position:absolute; left:0; right:0; top:100%; width:100%; height:100%; object-fit:contain; object-position:50% 100%;
  transform:scaleY(-1); opacity:0; transition:opacity .7s ease; pointer-events:none;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.24), transparent 26%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.24), transparent 26%);
}
.hero-product-reflection.active{opacity:1;}
.hero-dots{position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; z-index:3;}
.hero-dot{width:32px; height:32px; background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.hero-dot::before{content:""; width:6px; height:6px; border-radius:6px; background:rgba(255,255,255,.35); transition:transform var(--dur-base) var(--ease-out), background-color var(--dur-base);}
.hero-dot:hover::before{background:var(--white);}
.hero-dot.active::before{background:var(--gold); transform:scaleX(3);}
.hero-float-deco{position:absolute; opacity:.2; filter:blur(1px) drop-shadow(0 20px 30px rgba(0,0,0,.4)); pointer-events:none;}
.hero-float-deco img{width:clamp(96px,10vw,140px);}
.hero-float-deco.d1{top:2%; left:-8%;}
.hero-float-deco.d2{bottom:4%; right:-6%;}
.hero-shade{position:absolute; inset:0; z-index:3; background:var(--ink); opacity:0; pointer-events:none;}
.scroll-cue{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(255,255,255,.6); font-size:12px;}

/* Idle motion only runs when motion is on, and stops when paused or off screen. */
html.js-motion .hero-float{animation:heroFloat 5s ease-in-out infinite alternate;}
html.js-motion .hero-glow{animation:glowDrift 7s ease-in-out infinite alternate;}
html.js-motion .hero-float-deco.d1 img{animation:floatSlow 9s ease-in-out infinite alternate;}
html.js-motion .hero-float-deco.d2 img{animation:floatSlow 11s ease-in-out infinite alternate-reverse;}
html.js-motion .scroll-cue svg{animation:bounceDown 1.8s ease-in-out infinite;}
@keyframes heroFloat{from{transform:translateY(0);} to{transform:translateY(-12px);}}
@keyframes glowDrift{from{transform:scale(1); opacity:.75;} to{transform:scale(1.14); opacity:1;}}
@keyframes floatSlow{from{transform:translateY(0) rotate(0deg);} to{transform:translateY(-22px) rotate(3deg);}}
@keyframes bounceDown{0%,100%{transform:translateY(0); opacity:.5;} 50%{transform:translateY(6px); opacity:1;}}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after,html.hero-offscreen .hero *{animation-play-state:paused !important;}

/* ---------- Marquee (ticker + client logos) ----------
   Default: a plain single line you can swipe. motion.js adds the loop under js-motion. */
.marquee-strip{background:var(--navy); overflow-x:auto; white-space:nowrap; padding:13px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); scrollbar-width:none;}
.marquee-strip::-webkit-scrollbar{display:none;}
.marquee-track{display:flex; width:max-content;}
.marquee-group{display:flex; flex:0 0 auto; align-items:center;}
.marquee-strip .marquee-group{padding:0 var(--gutter);}
html.js-motion .marquee-strip{overflow:hidden;}
html.js-motion .marquee-strip .marquee-group{padding:0;}
.marquee-track span{color:var(--gold-2); font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(14.5px,1.2vw,17px); letter-spacing:.01em; padding:0 14px;}
.marquee-track .dot{color:rgba(255,255,255,.3); padding:0 6px; font-style:normal;}

/* ---------- Section generic ---------- */
section{padding:var(--section-y) 0;}
.section-head{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:10px clamp(24px,5vw,72px); align-items:end; margin-bottom:clamp(32px,4.4vw,64px);}
.section-eyebrow{grid-column:1 / -1; display:block; color:var(--accent-ink); font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(15px,1.25vw,18px);}
.section-head h2,.about-copy h2{font-size:clamp(34px,4.6vw,68px); line-height:1.04; letter-spacing:-.018em; font-weight:500;}
.section-head p{color:var(--grey); font-size:clamp(15px,1.15vw,17px); line-height:1.6; margin:0 0 .4em; max-width:34em;}
.bg-cream{background:var(--cream);}

/* ---------- Industries: sticky stacking cards ---------- */
.stack{display:grid; gap:clamp(16px,2vw,24px);}
.stack-inner{
  position:relative; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(20px,4vw,64px);
  min-height:clamp(340px,58vh,540px); padding:clamp(28px,4.4vw,64px); border-radius:24px; overflow:hidden;
  text-decoration:none; transform-origin:50% 0; transition:box-shadow var(--dur-base);
}
.stack-card.tone-navy .stack-inner{background:linear-gradient(150deg,#1A45C2 0%,#0B2577 100%);}
.stack-card.tone-sage .stack-inner{background:linear-gradient(150deg,#5E7788 0%,#41576A 100%);}
.stack-card.tone-ink .stack-inner{background:linear-gradient(150deg,#0B2577 0%,#071A52 100%);}
.stack-card.tone-cream .stack-inner{background:linear-gradient(150deg,#EEF3F6 0%,#D2DDE5 100%);}
.stack-card.tone-white .stack-inner{background:var(--white); box-shadow:inset 0 0 0 1px var(--border);}
.stack-text h3{font-size:clamp(30px,4vw,60px); line-height:1.04; letter-spacing:-.015em; font-weight:500; margin:clamp(16px,2vw,26px) 0 clamp(10px,1.2vw,16px);}
.stack-text p{font-size:clamp(15px,1.25vw,18px); line-height:1.55; margin:0; max-width:30em;}
.stack-card.tone-navy .stack-text h3,.stack-card.tone-sage .stack-text h3,.stack-card.tone-ink .stack-text h3{color:var(--white);}
.stack-card.tone-navy .stack-text p,.stack-card.tone-ink .stack-text p{color:#C9D4EC;}
.stack-card.tone-sage .stack-text p{color:#F3F6F8;}
.stack-card.tone-cream .stack-text p,.stack-card.tone-white .stack-text p{color:#4E5D69;}
.industry-icon{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:var(--gold-2);}
.stack-card.tone-cream .industry-icon,.stack-card.tone-white .industry-icon{background:var(--cream-2); color:var(--navy);}
.stack-media{display:flex; align-items:center; justify-content:center; min-width:0;}
.stack-media img{width:auto; max-width:100%; height:min(44vh,400px); object-fit:contain; filter:drop-shadow(0 26px 34px rgba(0,0,0,.34));}
.stack-card.tone-white .stack-media img{filter:none;}
.stack-shade{position:absolute; inset:0; background:var(--ink); opacity:0; pointer-events:none;}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .stack-card{position:sticky; top:calc(var(--header-condensed) + 16px + var(--i) * 14px);}
}

/* ---------- About ---------- */
.about-section{position:relative; background:var(--cream);}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,88px); align-items:center;}
.about-copy .section-eyebrow{margin-bottom:10px;}
.about-copy h2{margin-bottom:clamp(20px,2.4vw,32px);}
.about-copy em{color:var(--accent-ink);}
.about-copy p{color:var(--grey); font-size:16px; line-height:1.75; margin:0 0 16px; max-width:36em;}
.about-copy p.about-lead{position:relative; font-family:var(--font-display); color:var(--navy); font-size:clamp(22px,2.3vw,33px); line-height:1.28; font-weight:500; max-width:none; margin-bottom:clamp(18px,2vw,26px);}
html.js-motion .about-copy p.about-lead.is-split{color:var(--grey);}
.about-lead-on{position:absolute; inset:0; color:var(--navy);}
.cert-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.cert-pill{border:1.5px solid var(--navy); color:var(--navy); font-weight:600; font-size:12px; padding:8px 16px; border-radius:20px; background:var(--white);}
.about-photo-stage{position:relative; height:clamp(300px,42vw,560px);}
.about-photo-card{position:relative; background:linear-gradient(160deg, var(--navy) 0%, #071A52 100%); border-radius:24px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 40px 70px -30px rgba(16,52,166,.5);}
.about-photo-card img{width:auto; max-width:82%; max-height:74%; object-fit:contain; filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));}
.about-photo-card::before{content:""; position:absolute; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(128,151,168,.25), transparent 70%); top:-12%; left:-12%;}
.about-badge{position:absolute; bottom:-18px; left:-18px; background:var(--white); border-radius:14px; padding:16px 20px; box-shadow:0 20px 40px -18px rgba(7,26,82,.3); display:flex; align-items:center; gap:12px;}
.about-badge b{font-family:var(--font-display); font-size:24px; color:var(--navy); display:block; font-variant-numeric:tabular-nums;}
.about-badge span{font-size:11.5px; color:var(--grey);}

/* ---------- Showcase ----------
   A native sideways scroller, so it swipes on phones and works without JS.
   site.js adds .has-showcase: sideways wheel/trackpad and mouse drag move it, vertical scrolling never does. */
.showcase-section{padding:var(--section-y) 0 clamp(56px,6vw,96px); overflow-x:clip;}
.showcase-section .section-head{margin-bottom:clamp(28px,3.6vw,52px);}
.showcase-scroll{
  position:relative; display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; overflow-y:hidden;
  padding:14px var(--edge) 30px; scroll-padding-inline:var(--edge); scroll-snap-type:x proximity;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;
}
.showcase-scroll::-webkit-scrollbar{height:6px;}
.showcase-scroll::-webkit-scrollbar-thumb{background:var(--border); border-radius:10px;}
.showcase-card{
  --card-h:min(52vh,460px);
  flex:0 0 auto; height:var(--card-h); width:calc(var(--card-h) * .78); border-radius:22px; scroll-snap-align:start;
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; text-decoration:none;
  transition:box-shadow .35s; -webkit-user-drag:none;
}
.showcase-card:hover,.showcase-card:focus-visible{box-shadow:0 30px 50px -22px rgba(7,26,82,.35);}
.showcase-card.tone-navy{background:linear-gradient(160deg,#1A45C2 0%,#0B2577 100%);}
.showcase-card.tone-cream{background:linear-gradient(160deg,#EEF3F6 0%,#D2DDE5 100%);}
.showcase-card.tone-ink{background:linear-gradient(160deg,#4A6173 0%,#33475A 100%);}
.showcase-card.tone-ink .showcase-index,.showcase-card.tone-ink .showcase-label span{color:#D2DDE5 !important;}
/* Photos with their own background fill the card. motion.js keeps their drift small, so no edge shows. */
.showcase-card.tone-photo{background:var(--navy);}
.showcase-card.tone-photo img{position:absolute; top:0; left:-6%; width:112%; height:100%; max-width:none; max-height:none; margin:0; object-fit:cover; z-index:0; filter:none;}
.showcase-card.tone-photo::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(7,26,82,.9) 0%, rgba(7,26,82,.55) 24%, rgba(7,26,82,0) 46%), linear-gradient(to bottom, rgba(7,26,82,.5) 0%, rgba(7,26,82,0) 18%);}
.showcase-card.tone-photo::after,.showcase-card.tone-photo .showcase-glow,.showcase-card.tone-white .showcase-glow,.showcase-card.tone-white::after{display:none;}
/* Studio shots on white: the card matches, so no box shows around the product. */
.showcase-card.tone-white{background:var(--white); box-shadow:inset 0 0 0 1px var(--border);}
.showcase-card.tone-white img{filter:none;}
.showcase-card img{width:auto; max-width:82%; max-height:60%; object-fit:contain; position:relative; z-index:1; margin-top:-6%; -webkit-user-drag:none; user-select:none; will-change:transform;}
.showcase-card.tone-navy img,.showcase-card.tone-ink img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));}
.showcase-card.tone-cream img{filter:drop-shadow(0 18px 26px rgba(30,50,80,.22));}
/* A soft floor under each product, so it stands rather than floats. */
.showcase-card::after{content:""; position:absolute; left:18%; right:18%; top:72%; height:14px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.28), transparent); filter:blur(4px); z-index:0; pointer-events:none;}
.showcase-card.tone-cream::after{background:radial-gradient(closest-side, rgba(30,50,80,.18), transparent);}
.showcase-index{position:absolute; top:18px; left:20px; z-index:2; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:15px; letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.showcase-card.tone-navy .showcase-index,.showcase-card.tone-ink .showcase-index,.showcase-card.tone-photo .showcase-index{color:var(--gold-2);}
.showcase-card.tone-cream .showcase-index,.showcase-card.tone-white .showcase-index{color:var(--accent-ink);}
.showcase-label{position:absolute; left:20px; bottom:20px; right:20px; z-index:2; padding-top:14px; border-top:1px solid rgba(255,255,255,.14);}
.showcase-card.tone-cream .showcase-label,.showcase-card.tone-white .showcase-label{border-top-color:rgba(16,52,166,.12);}
.showcase-label b{display:block; font-family:var(--font-display); font-size:clamp(17px,1.5vw,22px); font-weight:600; line-height:1.15;}
.showcase-label span{font-size:12.5px; letter-spacing:.01em;}
.showcase-card.tone-navy .showcase-label b,.showcase-card.tone-ink .showcase-label b,.showcase-card.tone-photo .showcase-label b{color:var(--white);}
.showcase-card.tone-cream .showcase-label b,.showcase-card.tone-white .showcase-label b{color:var(--navy);}
.showcase-card.tone-navy .showcase-label span,.showcase-card.tone-ink .showcase-label span,.showcase-card.tone-photo .showcase-label span{color:var(--gold-2);}
.showcase-card.tone-cream .showcase-label span,.showcase-card.tone-white .showcase-label span{color:#4A6173;}
.showcase-expand{position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:opacity 250ms, transform 250ms var(--ease-out); pointer-events:none;}
.showcase-card:hover .showcase-expand,.showcase-card:focus-visible .showcase-expand{opacity:1; transform:none;}
.showcase-card.tone-cream .showcase-expand,.showcase-card.tone-white .showcase-expand{background:rgba(16,52,166,.1);}
.showcase-expand svg{stroke:var(--white);}
.showcase-card.tone-cream .showcase-expand svg,.showcase-card.tone-white .showcase-expand svg{stroke:var(--navy);}
.showcase-glow{position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, var(--glow,#DFC08B), transparent 70%); opacity:.3; top:-80px; right:-80px;}
.showcase-card.tone-ink .showcase-glow{--glow:#8097A8;}
.showcase-card.tone-cream .showcase-glow{--glow:#C6A05C; opacity:.2;}
.showcase-hint{text-align:center; color:var(--grey); font-size:13px; margin:0;}

/* Controls: counter, a progress rail whose thumb is as wide as the part in view, and arrows. */
.showcase-bar{display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); margin-top:clamp(4px,1vw,12px);}
.showcase-bar[hidden]{display:none;}
.showcase-count{margin:0; display:flex; align-items:baseline; gap:6px; font-family:var(--font-display); font-variant-numeric:tabular-nums; color:var(--grey); font-size:14px; flex:0 0 auto;}
.showcase-count b{font-size:22px; font-weight:600; color:var(--navy); min-width:1.6em;}
.showcase-progress{position:relative; flex:1 1 auto; height:2px; background:var(--border); border-radius:2px; overflow:hidden;}
.showcase-progress span{position:absolute; inset:0 auto 0 0; width:30%; background:var(--gold); border-radius:2px; transform-origin:left; will-change:transform;}
.showcase-tip{margin:0; flex:0 0 auto; color:var(--grey); font-size:13px;}
.showcase-tip .tip-touch{display:none;}
@media (hover:none),(pointer:coarse){ .showcase-tip .tip-fine{display:none;} .showcase-tip .tip-touch{display:inline;} }
.showcase-arrows{display:flex; gap:10px; flex:0 0 auto;}
.showcase-arrow{
  width:52px; height:52px; border-radius:50%; border:1.5px solid var(--navy); background:transparent; color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--dur-micro), border-color var(--dur-micro), opacity var(--dur-micro);
}
.showcase-arrow::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--navy); border-radius:50%; transform:scale(0); transition:transform 300ms var(--ease-out);}
.showcase-arrow:hover:not(:disabled)::before,.showcase-arrow:focus-visible::before{transform:scale(1);}
.showcase-arrow:hover:not(:disabled),.showcase-arrow:focus-visible{color:var(--white);}
.showcase-arrow:disabled{opacity:.3; cursor:default;}
.showcase-arrow svg{transition:transform 300ms var(--ease-out);}
#showcasePrev:hover:not(:disabled) svg{transform:translateX(-3px);}
#showcaseNext:hover:not(:disabled) svg{transform:translateX(3px);}

/* With JS: no scrollbar (the rail replaces it); with a mouse, the row is dragged, so no snapping fights it. */
html.has-showcase .showcase-hint{display:none;}
html.has-showcase .showcase-scroll{scrollbar-width:none;}
html.has-showcase .showcase-scroll::-webkit-scrollbar{display:none;}
html.showcase-drag .showcase-scroll{scroll-snap-type:none; cursor:grab; user-select:none; -webkit-user-select:none;}
html.showcase-drag .showcase-scroll.is-dragging{cursor:grabbing;}
html.showcase-drag .showcase-scroll.is-dragging .showcase-card{pointer-events:none;}

/* Tilt glare: a soft highlight moved by transform. */
.tilt-glare{position:absolute; inset:-40%; z-index:3; background:radial-gradient(circle at center, rgba(255,255,255,.2), rgba(255,255,255,0) 52%); opacity:0; pointer-events:none;}

/* ---------- Categories: typographic index ---------- */
.cat-index{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,5vw,72px);}
.cat-row{display:flex; align-items:center; gap:clamp(12px,1.4vw,18px); padding:clamp(10px,1vw,14px) 0; border-bottom:1px solid var(--border); text-decoration:none; color:var(--navy);}
.cat-thumb{width:56px; height:56px; flex-shrink:0; background:var(--white); border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.cat-thumb img{width:100%; height:100%; object-fit:contain; padding:4px;}
.cat-name{position:relative; flex:0 1 auto; min-width:0; font-family:var(--font-display); font-weight:500; font-size:clamp(18px,1.9vw,28px); line-height:1.18; letter-spacing:-.01em;}
.cat-name::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 300ms var(--ease-out);}
.cat-row:hover .cat-name::after,.cat-row:focus-visible .cat-name::after{transform:scaleX(1);}
.cat-count{margin-left:auto; flex-shrink:0; padding-left:12px; color:var(--accent-ink); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.cat-preview{position:fixed; top:0; left:0; z-index:90; width:300px; pointer-events:none; background:var(--white); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(7,26,82,.4); visibility:hidden;}
.cat-preview img{width:100%; height:220px; object-fit:contain; padding:14px;}
.cat-preview p{margin:0; padding:0 16px 14px; font-size:13px; line-height:1.4; color:var(--grey);}

/* ---------- Catalog ---------- */
.catalog-toolbar{display:flex; gap:14px; align-items:center; margin-bottom:16px; flex-wrap:wrap; position:sticky; top:var(--header-condensed); background:var(--cream); padding:12px 0; z-index:20; transition:transform var(--dur-base) var(--ease-out);}
html.header-hidden .catalog-toolbar.is-stuck{transform:translateY(calc(var(--header-condensed) * -1));}
html:not(.js) .catalog-toolbar,html:not(.js) .chip-row{display:none;}
/* With JS the catalog opens as a 12-card preview: keep the rest out of the first layout until site.js takes over. */
html.js:not(.catalog-ready) .prod-grid > .prod-card:nth-child(n+13){display:none;}

/* Floating labels work with CSS alone. */
.field{position:relative;}
.field input,.field textarea{width:100%; padding:23px 16px 8px; border:1.5px solid var(--border); border-radius:10px; font-size:15px; font-family:var(--font-body); color:var(--text); background:var(--white); outline:none; transition:border-color var(--dur-micro); display:block;}
.field textarea{resize:vertical; min-height:112px;}
.field label{position:absolute; left:17px; top:16px; max-width:calc(100% - 34px); color:var(--grey); font-size:15px; pointer-events:none; transform-origin:left top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform var(--dur-micro) var(--ease-out), color var(--dur-micro);}
.field input::placeholder,.field textarea::placeholder{color:transparent; transition:color var(--dur-micro);}
.field input:focus::placeholder,.field textarea:focus::placeholder{color:var(--grey);}
.field input:focus + label,.field input:not(:placeholder-shown) + label,.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-9px) scale(.76); color:var(--accent-ink);}
.field input:focus,.field textarea:focus{border-color:var(--accent-ink);}
.field::after{content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; background:var(--accent-ink); transform:scaleX(0); transform-origin:left; transition:transform 250ms var(--ease-out); pointer-events:none;}
.field:focus-within::after{transform:scaleX(1);}
.search-box{flex:1; min-width:240px;}
.search-box input{padding-left:42px;}
.search-box label{left:43px; max-width:calc(100% - 60px);}
.search-box svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); stroke:var(--grey); z-index:1;}

.chip-row{display:flex; gap:8px; flex-wrap:wrap; padding-bottom:4px; margin-bottom:16px;}
.chip{padding:8px 15px; border-radius:20px; border:1.5px solid var(--border); background:var(--white); font-size:13px; font-weight:600; color:#4E5D69; cursor:pointer; white-space:nowrap; transition:color var(--dur-micro), border-color var(--dur-micro), background-color var(--dur-micro);}
.chip.active{background:var(--navy); border-color:var(--navy); color:var(--white);}
.chip:hover:not(.active){border-color:var(--accent-ink); color:var(--accent-ink);}
.chip-x{margin-left:6px; opacity:.7;}
.result-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; min-height:38px;}
.result-count{color:var(--grey); font-size:13.5px; margin:0;}
.expand-pill{display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:999px; background:var(--navy); color:var(--white); border:none; font-size:13px; font-weight:700; cursor:pointer; transition:background-color var(--dur-micro), color var(--dur-micro);}
.expand-pill:hover{background:var(--gold); color:var(--ink);}
.expand-pill svg{stroke:currentColor; transition:transform var(--dur-base) var(--ease-out);}
.expand-pill.is-expanded svg{transform:rotate(180deg);}
.expand-row{text-align:center; margin-top:26px;}
.iml-toggle{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--text); cursor:pointer; white-space:nowrap;}
.iml-toggle input{width:16px; height:16px; accent-color:var(--navy); cursor:pointer;}
.view-toggle{display:flex; border:1.5px solid var(--border); border-radius:9px; overflow:hidden; flex-shrink:0;}
.view-btn{display:flex; align-items:center; gap:6px; padding:9px 14px; background:var(--white); border:none; font-size:13px; font-weight:600; color:#4E5D69; cursor:pointer; transition:background-color var(--dur-micro), color var(--dur-micro);}
.view-btn svg{stroke:currentColor;}
.view-btn.active{background:var(--navy); color:var(--white);}
.view-btn:not(.active):hover{background:var(--cream); color:var(--navy);}

.prod-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.prod-card{position:relative; display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--white); transition:transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro), border-color var(--dur-micro);}
html.js .prod-card{cursor:pointer;}
html.js .prod-card:hover{border-color:var(--gold); box-shadow:0 14px 28px -18px rgba(7,26,82,.3); transform:translateY(-3px);}
.prod-card:has(.prod-open:focus-visible){outline:2px solid var(--accent-ink); outline-offset:2px;}
.prod-thumb{position:relative; width:84px; height:84px; flex-shrink:0; border-radius:8px; background:var(--white); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.prod-thumb img{width:100%; height:100%; object-fit:contain; transition:opacity var(--dur-base);}
html.js .prod-thumb:not(.is-loaded){background:var(--cream);}
html.js .prod-thumb:not(.is-loaded) img{opacity:0;}
html.js-motion .prod-thumb:not(.is-loaded)::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform:translateX(-100%); animation:shimmer 1.2s linear infinite;}
@keyframes shimmer{to{transform:translateX(100%);}}
.prod-info{min-width:0; flex:1;}
.prod-code{font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:6px; word-break:break-word; line-height:1.25;}
.prod-open{background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer;}
.prod-open::after{content:""; position:absolute; inset:0; border-radius:12px;}
.prod-open:focus-visible{outline:none;}
html:not(.js) .prod-open{cursor:text;}
html:not(.js) .prod-open::after{display:none;}
.prod-meta{display:flex; flex-wrap:wrap; gap:6px;}
.badge{font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--cream); color:var(--navy); font-variant-numeric:tabular-nums;}
.badge.grey{background:#E4EBF0; color:#4E5D69;}
.prod-dims{margin:7px 0 0; font-size:12.5px; line-height:1.35; color:var(--grey); font-variant-numeric:tabular-nums;}
.prod-nojs{display:none;}
html:not(.js) .prod-nojs{display:block; margin:6px 0 0; font-size:12.5px; color:var(--grey);}
.empty-state{text-align:center; padding:60px 20px; color:var(--grey); margin:0;}

.prod-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--white);}
.prod-table{width:100%; border-collapse:collapse; min-width:640px;}
.prod-table th{background:var(--cream-2); color:var(--navy); font-size:12.5px; font-weight:700; text-align:left; padding:13px 16px; border-bottom:1px solid var(--border); white-space:nowrap;}
.prod-table th button{background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;}
.prod-table th button:hover{color:var(--accent-ink);}
.prod-table th .arrow{color:var(--accent-ink); font-size:11px;}
.prod-table td{padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums;}
.prod-table tbody tr{cursor:pointer; transition:background-color var(--dur-micro);}
.prod-table tbody tr:hover{background:var(--cream);}
.prod-table td.muted{color:var(--grey);}
.table-empty{text-align:center; padding:40px;}
.row-open{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--navy); cursor:pointer;}

/* ---------- Clients ----------
   Default: a static grid of all 16. motion.js turns the two rows into marquees under js-motion. */
.logo-rows{display:grid; gap:14px;}
.logo-group{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:1320px; margin:0 auto; padding:0 var(--gutter);}
.logo-row .marquee-track{width:auto; display:block;}
html.js-motion .logo-row{overflow:hidden;}
html.js-motion .logo-row .marquee-track{display:flex; width:max-content;}
html.js-motion .logo-group{display:flex; flex:0 0 auto; max-width:none; margin:0; padding:0 14px 0 0;}
.partner-card{border:1px solid var(--border); border-radius:14px; background:var(--white); padding:18px; display:flex; align-items:center; justify-content:center; height:96px;}
html.js-motion .partner-card{flex:0 0 auto; width:clamp(150px,15vw,216px);}
.partner-card img{width:auto; max-width:100%; max-height:58px; object-fit:contain;}
@media (hover:hover){
  .partner-card img{filter:grayscale(1); opacity:.78; transition:filter var(--dur-micro), opacity var(--dur-micro);}
  .partner-card:hover img{filter:none; opacity:1;}
}
.partners-tagline{color:var(--grey); font-size:14.5px; margin:clamp(20px,2.4vw,32px) 0 0;}

/* ---------- Certifications ---------- */
.tech-section{position:relative; background:var(--ink); overflow:hidden; color:#DCE3F2;}
.tech-section .section-eyebrow{color:var(--gold-2);}
.tech-section h2{color:var(--white);}
.tech-section .section-head p{color:#B4C2DD;}
.tech-glow{position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(128,151,168,.14), transparent 70%); pointer-events:none;}
.tech-glow.g1{top:-140px; left:-100px;}
.tech-glow.g2{bottom:-160px; right:-80px; background:radial-gradient(circle, rgba(128,151,168,.18), transparent 70%);}
.cert-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; position:relative; z-index:1;}
.cert-card{position:relative; display:block; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.03); overflow:hidden; text-decoration:none; transition:border-color 250ms, box-shadow 250ms, transform 250ms var(--ease-out);}
.cert-card:hover,.cert-card:focus-visible{border-color:var(--gold); box-shadow:0 22px 44px -20px rgba(128,151,168,.3); transform:translateY(-5px);}
.cert-thumb-wrap{display:block; height:clamp(150px,15vw,210px); background:rgba(255,255,255,.04); overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1);}
.cert-thumb-wrap img{width:100%; height:100%; object-fit:cover; object-position:top;}
.cert-text{display:block; padding:16px 14px; font-size:13px; line-height:1.5; color:#B4C2DD;}
.cert-title{display:block; color:var(--white); font-size:15px; font-weight:700; margin-bottom:4px;}
.cert-hint{color:#B4C2DD; font-size:13px; margin:22px 0 0; position:relative; z-index:1;}

/* Under tilt GSAP owns the transform, so the CSS lift and its transition step aside. */
html.has-tilt .cert-card{transition:border-color 250ms, box-shadow 250ms;}
html.has-tilt .cert-card:hover,html.has-tilt .cert-card:focus-visible{transform:none;}

/* ---------- Location + enquiry form ---------- */
.location-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,32px); align-items:stretch;}
.location-card{border:1px solid var(--border); border-radius:20px; padding:clamp(24px,2.6vw,36px); background:var(--white);}
.location-card h3{font-size:clamp(21px,1.9vw,26px); margin-bottom:18px; font-weight:500;}
.location-row{display:flex; gap:12px; margin-bottom:18px; align-items:flex-start;}
.location-row svg{stroke:var(--accent-ink); flex-shrink:0; margin-top:2px;}
.location-row div{font-size:14.5px; color:var(--grey); line-height:1.55; min-width:0;}
.location-row b{display:block; color:var(--navy); font-weight:700; font-size:14px; margin-bottom:2px;}
.location-row a{color:inherit; text-underline-offset:3px; overflow-wrap:anywhere;}
.location-row a:hover{color:var(--accent-ink);}
.location-row a[href^="tel"]{white-space:nowrap;}
.map-frame{border-radius:20px; overflow:hidden; border:1px solid var(--border); min-height:340px; background:var(--cream);}
.map-frame iframe{display:block; width:100%; height:100%; min-height:340px; border:0;}
.enquiry{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:clamp(20px,4vw,56px); margin-top:clamp(20px,2.4vw,32px); padding:clamp(24px,3vw,44px); border-radius:20px; background:var(--cream);}
.enquiry h3{font-size:clamp(24px,2.4vw,34px); font-weight:500; letter-spacing:-.01em; margin-bottom:10px;}
.enquiry p{margin:0; color:var(--grey); font-size:14.5px; line-height:1.6;}
.enquiry-fields{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.field-wide{grid-column:1 / -1;}
.enquiry-send{grid-column:1 / -1; justify-self:start;}

/* ---------- Final CTA ---------- */
.final-cta{position:relative; background:linear-gradient(160deg, #1034A6 0%, #071A52 100%); overflow:hidden; padding:clamp(80px,9vw,130px) 0;}
.final-cta::before{content:""; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(128,151,168,.18), transparent 70%); top:-200px; right:-120px;}
.final-cta-inner{position:relative; z-index:1; text-align:center; max-width:760px; margin:0 auto;}
.final-cta h2{color:var(--white); font-size:clamp(34px,4.6vw,68px); line-height:1.04; letter-spacing:-.018em; font-weight:500; margin-bottom:18px;}
.final-cta p{color:#C9D4EC; font-size:clamp(15px,1.2vw,17px); line-height:1.7; margin:0 0 34px;}
.final-cta-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.final-cta-photo{position:absolute; right:2%; bottom:-6%; width:clamp(180px,18vw,270px); opacity:.9; filter:drop-shadow(0 40px 50px rgba(0,0,0,.5));}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#B4C2DD; padding:clamp(48px,5vw,72px) 0 0; overflow:hidden;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,3vw,40px);}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand img{height:42px; width:auto; filter:brightness(0) invert(1);}
.footer-brand span{color:var(--white); font-family:var(--font-display); font-weight:700; font-size:17px;}
footer p{font-size:13.5px; line-height:1.7; margin:0; max-width:38em;}
.footer-h{color:var(--white); font-size:14px; margin-bottom:14px; font-family:var(--font-body); font-weight:700;}
.footer-h-gap{margin-top:22px;}
footer a{color:#B4C2DD; text-decoration:none; font-size:13.5px; display:inline-block; padding:4px 0; margin-bottom:2px; transition:color var(--dur-micro);}
.footer-grid > div > a{display:table;}
footer a:hover{color:var(--gold-2);}
.footer-bottom{position:relative; margin-top:clamp(28px,3vw,40px); padding-top:20px; padding-bottom:6px; display:flex; justify-content:space-between; color:var(--muted-on-ink); font-size:12.5px; flex-wrap:wrap; gap:10px;}
.footer-bottom::before{content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:rgba(255,255,255,.1);}
.footer-wordmark{overflow:hidden; padding:0 var(--gutter); line-height:.82; text-align:center; margin-top:clamp(12px,2vw,24px); user-select:none;}
.footer-wordmark span{display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(84px,25.5vw,420px); letter-spacing:-.03em; color:var(--stone); padding-bottom:.06em;}

/* ---------- Product modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(7,26,82,.6); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--white); border-radius:20px; max-width:600px; width:100%; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; box-shadow:0 40px 80px -30px rgba(0,0,0,.4);}
.modal-img{width:100%; height:260px; background:var(--white); overflow:hidden; border-radius:20px 20px 0 0; display:flex; gap:2px;}
.modal-img img{height:100%; width:50%; flex:1; object-fit:contain; padding:14px;}
.modal-body{padding:24px 30px 30px;}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.modal-head h2{font-size:26px; font-weight:500;}
.modal-cat{color:var(--accent-ink); font-size:13px; font-weight:600; margin-top:4px; display:block;}
.modal-close,.lightbox-close{background:var(--cream); border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background-color var(--dur-micro);}
.modal-close:hover,.lightbox-close:hover{background:var(--cream-2);}
.spec-table{width:100%; border-collapse:collapse; margin-top:18px;}
.spec-table td{padding:11px 4px; border-bottom:1px solid var(--border); font-size:14.5px; font-variant-numeric:tabular-nums;}
.spec-table td:first-child{color:var(--grey); font-weight:500;}
.spec-table td:last-child{text-align:right; font-weight:700; color:var(--navy);}
.modal-note{margin-top:18px; background:var(--cream); color:var(--navy); font-size:13.5px; padding:12px 14px; border-radius:8px; line-height:1.5;}
.modal-cta{margin-top:22px; display:flex; gap:10px; align-items:center;}

/* ---------- Lightbox ---------- */
.lightbox-backdrop{position:fixed; inset:0; background:rgba(5,16,48,.9); display:none; align-items:center; justify-content:center; z-index:300; padding:clamp(12px,3vw,30px);}
.lightbox-backdrop.open{display:flex;}
.lightbox-img-wrap{display:flex; flex-direction:column; max-width:min(720px,100%); max-height:100%; background:var(--white); border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -20px rgba(0,0,0,.5);}
.lightbox-img-wrap img{width:100%; min-height:0; flex:1; object-fit:contain;}
.lightbox-cap{padding:12px 16px 12px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.lightbox-cap h2{font-size:16px; font-weight:600;}
html.overlay-open{overflow:hidden;}

/* ---------- View Transitions: the shared element between thumbnail and overlay ---------- */
::view-transition-group(sphere-morph){animation-duration:350ms; animation-timing-function:var(--ease-out); z-index:500;}
::view-transition-old(sphere-morph),::view-transition-new(sphere-morph){animation-duration:350ms; height:100%; object-fit:contain;}
::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;}

/* ---------- Motion chrome (inert until motion.js uses it) ---------- */
.scroll-progress{display:none; position:fixed; top:0; left:0; right:0; height:2px; z-index:250; background:var(--gold); transform:scaleX(0); transform-origin:left; pointer-events:none;}
html.has-progress .scroll-progress{display:block;}
.motion-toggle{display:none; position:fixed; right:16px; bottom:16px; z-index:150; height:40px; min-width:40px; padding:0 12px; align-items:center; justify-content:center; gap:8px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(7,26,82,.8); color:var(--white); font-size:12.5px; font-weight:600; cursor:pointer;}
html.js-motion .motion-toggle{display:inline-flex;}
.motion-toggle span{display:none;}
.motion-toggle:hover span,.motion-toggle:focus-visible span{display:inline;}
.motion-toggle .icon-play{display:none;}
html.motion-paused .motion-toggle .icon-play{display:block;}
html.motion-paused .motion-toggle .icon-pause{display:none;}


/* Custom cursor: fine pointers only, injected by motion.js. */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; z-index:700; pointer-events:none; border-radius:50%;}
.cursor-dot{width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--gold);}
.cursor-ring{width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; transition:background-color var(--dur-micro), border-color var(--dur-micro);}
.cursor-ring span{font-size:5px; font-weight:700; letter-spacing:.02em; color:var(--ink); opacity:0; transition:opacity var(--dur-micro);}
.cursor-ring.is-view{background:var(--gold);}
.cursor-ring.is-view span{opacity:1;}

/* Hidden "from" states. Nothing here applies unless js-motion is on. */
html.js-motion .hero-copy .eyebrow:not(.is-in),
html.js-motion .hero-copy .lead:not(.is-in),
html.js-motion .hero-ctas:not(.is-in),
html.js-motion .hero-stats:not(.is-in),
html.js-motion .scroll-cue:not(.is-in),
html.js-motion .hero-dots:not(.is-in){opacity:0;}
html.js-motion [data-split]:not(.is-in){visibility:hidden;}
html.js-motion [data-reveal]:not(.is-in){opacity:0; transform:translateY(24px);}

/* SplitText's line mask would clip descenders and italic overhang at tight line-heights. */
.split-line-mask{padding:0 .06em .18em; margin:0 -.06em -.18em;}

/* Lenis */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:clip;}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  /* Without JS the links stay on show in a wrapped row; with JS they move behind the menu button. */
  .site-header{height:auto; min-height:var(--header-h);}
  html.js .site-header{height:var(--header-h);}
  .header-inner{flex-wrap:wrap; padding-top:10px; padding-bottom:10px;}
  html.js .header-inner{flex-wrap:nowrap; padding-top:0; padding-bottom:0;}
  nav.main-nav{order:3; width:100%; flex-wrap:wrap; gap:6px 18px;}
  html.js nav.main-nav{display:none;}
  html.js nav.main-nav.is-open{display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:100%; left:0; right:0; gap:4px; padding:14px var(--gutter) 18px; background:var(--paper); border-bottom:1px solid var(--border); box-shadow:0 12px 24px -12px rgba(7,26,82,.25);}
  html.js nav.main-nav.is-open a{padding:9px 0; font-size:15px;}
  html.js .menu-toggle{display:block;}
}
@media (max-width:980px){
  .hero{min-height:auto; padding:clamp(28px,6vw,48px) 0 64px;}
  .hero-grid{display:flex; flex-direction:column; align-items:stretch; gap:0;}
  .hero-copy{display:contents;}
  .eyebrow{order:1;}
  .hero h1{order:2;}
  .hero-stage{order:3; height:clamp(240px,64vw,460px); margin-bottom:18px;}
  .hero p.lead{order:4; max-width:none;}
  .hero-ctas{order:5;}
  .hero-stats{order:6;}
  .hero-float-deco{display:none;}
  .about-grid{grid-template-columns:1fr;}
  .about-photo-stage{order:-1; height:clamp(260px,56vw,460px); margin:0 0 18px 18px;}
  .cat-index{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cert-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .location-grid{grid-template-columns:1fr;}
  .enquiry{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .final-cta-photo{display:none;}
}
@media (max-width:767px){
  .stack-inner{grid-template-columns:1fr; min-height:0; gap:18px;}
  .stack-media{order:-1;}
  .stack-media img{height:200px;}
  .section-head{grid-template-columns:1fr;}
  .showcase-card{--card-h:340px; width:256px;}
  .showcase-tip{display:none;}
  .showcase-arrow{width:44px; height:44px;}
  .chip-row{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip{scroll-snap-align:start;}
  .catalog-toolbar{position:static; background:none;}
  html.header-hidden .catalog-toolbar.is-stuck{transform:none;}
  .prod-grid{grid-template-columns:1fr;}
  .logo-group{grid-template-columns:repeat(2,minmax(0,1fr));}
  .enquiry-fields{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .modal-img{height:190px;}
  .modal-body{padding:20px 20px 24px;}
  .modal-cta{flex-wrap:wrap;}
  .header-brochure{display:none !important;}
  .brand-sub{display:none;}
  .brand img{height:42px;}
  .brand-name{font-size:16px;}
  .nav-brochure-link{display:block;}
  .nav-brochure-link a{color:var(--accent-ink) !important; font-weight:700;}
  .cert-grid{gap:12px;}
  .scroll-cue{display:none;}
  .about-badge{left:-14px; bottom:-14px; padding:12px 16px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  *,*::before,*::after{animation:none !important;}
  .hero-product,.hero-product.active,.hero-product-reflection,.prod-card,.cert-card,.btn,.btn::before,.btn-whatsapp.btn-labeled::before,.site-header,.header-inner,.catalog-toolbar{transition:none !important;}
  .hero-stage{will-change:auto;}
  .prod-card:hover,.cert-card:hover,.cert-card:focus-visible{transform:none !important;}
}

@media print{
  html.js-motion [data-reveal],html.js-motion [data-split]{opacity:1 !important; transform:none !important; visibility:visible !important;}
  .site-header,.motion-toggle,.enq-list-btn,.scroll-progress,body::after{display:none !important;}
}

/* ==========================================================================
   Additions: conversion, buyer content, catalog tools
   ========================================================================== */

/* Facts still to be supplied stay out of the page until filled in (see PLACEHOLDERS.md). */
[data-placeholder]{display:none !important;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.anchor-alias{position:absolute;}
.btn-small{padding:9px 18px; font-size:13.5px;}

/* ---------- Header: grouped navigation ---------- */
.nav-list{display:flex; align-items:center; gap:clamp(14px,1.8vw,28px); list-style:none; margin:0; padding:0;}
.nav-group{position:relative;}
.nav-group > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--text); padding:6px 0; white-space:nowrap; transition:color var(--dur-micro);}
.nav-group > summary::-webkit-details-marker{display:none;}
.nav-group > summary::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform var(--dur-micro);}
.nav-group[open] > summary::after{transform:translateY(1px) rotate(225deg);}
.nav-group > summary:hover,.nav-group[open] > summary{color:var(--accent-ink);}
.nav-sub{position:absolute; top:calc(100% + 14px); left:-16px; min-width:210px; list-style:none; margin:0; padding:8px; background:var(--paper); border:1px solid var(--border); border-radius:14px; box-shadow:0 20px 40px -18px rgba(7,26,82,.3); z-index:5;}
nav.main-nav .nav-sub a{display:block; padding:9px 12px; border-radius:8px; font-size:14px;}
nav.main-nav .nav-sub a::after{display:none;}
nav.main-nav .nav-sub a:hover,nav.main-nav .nav-sub a:focus-visible{background:var(--cream);}
.nav-lang a{display:inline-block; padding:5px 12px !important; border:1px solid var(--border); border-radius:999px; font-size:13px !important;}
nav.main-nav .nav-lang a::after{display:none;}
.header-actions .btn-small{padding:9px 16px;}

/* ---------- Hero: third, quieter call to action ---------- */
.hero-link{align-self:center; color:var(--white); font-size:14px; font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:5px; padding:8px 4px; transition:text-decoration-color var(--dur-micro);}
.hero-link:hover,.hero-link:focus-visible{text-decoration-color:var(--gold-2);}

/* ---------- About: company facts (shown once filled in) ---------- */
.company-facts{display:flex; gap:28px; list-style:none; padding:0; margin:22px 0 0;}
.company-facts b{display:block; font-family:var(--font-display); font-size:26px; color:var(--navy);}
.company-facts span{font-size:13px; color:var(--grey);}

/* ---------- Capabilities ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px);}
.cap-card{background:var(--white); border:1px solid var(--border); border-radius:18px; padding:clamp(22px,2.2vw,30px);}
.cap-card h3{font-size:clamp(20px,1.7vw,24px); font-weight:500; margin-bottom:10px;}
.cap-card p{margin:0; color:var(--grey); font-size:15px; line-height:1.6;}
/* While the capacity card waits for its figures, the last visible card closes the row. */
.cap-grid:has(> [data-placeholder="capacity"]) > .cap-card:nth-child(5){grid-column:span 2;}
.cap-sustain{margin-top:clamp(14px,1.6vw,22px); display:grid; grid-template-columns:minmax(0,.35fr) minmax(0,1fr); gap:12px 28px; align-items:baseline; padding:clamp(22px,2.2vw,30px); border-radius:18px; background:linear-gradient(150deg,#5E7788 0%,#41576A 100%); color:#F3F6F8;}
.cap-sustain h3{color:var(--white); font-size:clamp(20px,1.7vw,24px); font-weight:500;}
.cap-sustain p{margin:0; font-size:15px; line-height:1.6;}

/* ---------- How we work ---------- */
.process-section{background:var(--cream);}
.process-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px);}
.process-step{position:relative; padding:22px 0 0; border-top:2px solid var(--stone);}
.process-step:first-child{border-top-color:var(--navy);}
.process-num{display:block; font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--accent-ink); margin-bottom:10px;}
.process-step h3{font-size:clamp(18px,1.5vw,22px); font-weight:500; margin-bottom:8px;}
.process-step p{margin:0; color:var(--grey); font-size:14.5px; line-height:1.55;}

/* ---------- FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,72px); align-items:start;}
.faq-grid .section-head{display:block; margin:0;}
.faq-grid .section-head h2{margin:10px 0 14px;}
.faq-list{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item > summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 0; font-family:var(--font-display); font-size:clamp(17px,1.5vw,21px); font-weight:500; color:var(--navy);}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::after{content:"+"; flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:18px; color:var(--accent-ink); transition:transform var(--dur-base) var(--ease-out);}
.faq-item[open] > summary::after{transform:rotate(45deg);}
.faq-item p{margin:0 0 22px; color:var(--grey); font-size:15.5px; line-height:1.65; max-width:46em;}

/* ---------- Catalog: search clear, filters, suggestions, add-to-list ---------- */
.search-box input[type="search"]::-webkit-search-cancel-button{display:none;}
.search-box input{padding-right:44px;}
.search-clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:0; background:var(--cream); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1;}
.search-clear:hover{background:var(--cream-2);}
.filter-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 14px; margin-bottom:14px;}
.filter{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--grey);}
.filter select,.field-select select{appearance:none; -webkit-appearance:none; min-width:170px; padding:10px 34px 10px 14px; border:1.5px solid var(--border); border-radius:10px; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231034A6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; font:inherit; font-size:14px; font-weight:500; color:var(--text); cursor:pointer;}
.filter select:focus,.field-select select:focus{border-color:var(--accent-ink); outline:none;}
.filter-note{margin:0 0 10px; font-size:12.5px; color:var(--grey);}
html:not(.js) .filter-row{display:none;}
.empty-state p{margin:0;}
.did-you-mean{margin-top:12px !important; color:var(--text);}
.did-you-mean button{background:none; border:0; padding:2px 4px; font:inherit; font-weight:700; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.new-badge{display:inline-block; margin-left:8px; padding:2px 7px; border-radius:6px; background:var(--gold); color:var(--ink); font-family:var(--font-body); font-size:10.5px; font-weight:700; font-style:normal; letter-spacing:.02em; vertical-align:middle;}
.chip.active .new-badge{background:var(--gold-2);}
.prod-add{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border); background:var(--white); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);}
.prod-add:hover{border-color:var(--navy);}
.prod-add .i-check{display:none;}
.prod-add[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--white);}
.prod-add[aria-pressed="true"] .i-plus{display:none;}
.prod-add[aria-pressed="true"] .i-check{display:block;}
.prod-card .prod-info{padding-right:30px;}
.modal-add[aria-pressed="true"]{background:var(--navy); color:var(--white);}

/* ---------- Certificates: number and dates on each card ---------- */
.cert-meta{display:block; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; line-height:1.55; color:var(--muted-on-ink); font-variant-numeric:tabular-nums;}

/* ---------- Location: readable address, map on request ---------- */
.location-row address{font-style:normal; font-size:14.5px; color:var(--grey); line-height:1.55;}
.plus-code{display:inline-block; margin-top:4px; font-size:13px; color:var(--grey);}
.map-frame{display:flex;}
.map-frame iframe{flex:1;}
.map-facade{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px; text-align:center; color:var(--navy); background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.7), transparent 60%), repeating-linear-gradient(0deg, transparent 0 38px, rgba(16,52,166,.06) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(16,52,166,.06) 38px 39px), var(--cream);}
.map-facade p{margin:0; font-weight:600;}
.map-open{color:var(--accent-ink); font-size:14px; font-weight:600; text-underline-offset:3px;}
.map-note{font-size:12.5px !important; font-weight:400 !important; color:var(--grey);}

/* ---------- Enquiry form ---------- */
.enquiry-intro h3{margin-bottom:10px;}
.enquiry-privacy{margin-top:14px !important; font-size:13px !important;}
.field-select{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--grey);}
.field-select select{width:100%; min-width:0; padding-top:12px; padding-bottom:12px;}
.enquiry-actions{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:12px;}

/* ---------- Enquiry list: floating counter and panel ---------- */
.enq-list-btn{position:fixed; left:16px; bottom:16px; z-index:150; display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 8px 0 16px; border-radius:999px; border:0; background:var(--navy); color:var(--white); font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 16px 30px -12px rgba(7,26,82,.5);}
.enq-list-btn b{min-width:30px; height:30px; padding:0 8px; border-radius:999px; background:var(--gold); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}
.enq-panel-backdrop{position:fixed; inset:0; z-index:260; display:flex; justify-content:flex-end; background:rgba(7,26,82,.45);}
.enq-panel{width:min(440px,100%); height:100%; overflow-y:auto; overscroll-behavior:contain; background:var(--paper); padding:26px clamp(20px,3vw,30px); display:flex; flex-direction:column; gap:14px; box-shadow:-30px 0 60px -30px rgba(7,26,82,.4);}
.enq-panel-head{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.enq-panel-head h2{font-size:24px; font-weight:500;}
.enq-panel-hint{margin:0; color:var(--grey); font-size:14px;}
.enq-items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.enq-item{display:grid; grid-template-columns:minmax(0,1fr) 130px auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--white);}
.enq-code b{display:block; color:var(--navy); font-size:14.5px;}
.enq-code small{color:var(--grey); font-size:12.5px;}
.enq-item input{width:100%; padding:9px 10px; border:1.5px solid var(--border); border-radius:8px; font:inherit; font-size:14px;}
.enq-item input:focus{border-color:var(--accent-ink); outline:none;}
.enq-remove,.enq-clear{background:none; border:0; padding:6px; font:inherit; font-size:13px; font-weight:600; color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.enq-empty{color:var(--grey); font-size:14px;}
.enq-panel-actions{display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:10px;}
.enq-panel-actions .btn{justify-content:center;}

/* ---------- Footer additions ---------- */
.footer-address{font-style:normal;}
.footer-address .plus-code{color:var(--muted-on-ink); font-size:12.5px;}
.footer-social{list-style:none; padding:0; margin:14px 0 0; display:flex; gap:14px;}

@media (max-width:1240px){
  /* Without JS the grouped list wraps under the logo instead of running off the screen. */
  html:not(.js) .nav-list{flex-wrap:wrap; gap:6px 18px;}
  html.js nav.main-nav.is-open .nav-list{flex-direction:column; align-items:stretch; gap:2px; width:100%;}
  html.js nav.main-nav.is-open .nav-group > summary{pointer-events:none; font-size:12px; font-weight:700; color:var(--grey); padding:12px 0 2px;}
  html.js nav.main-nav.is-open .nav-group > summary::after{display:none;}
  html.js nav.main-nav.is-open .nav-sub{position:static; min-width:0; padding:0 0 4px; border:0; background:none; box-shadow:none;}
  html.js nav.main-nav.is-open .nav-sub a{padding:9px 0;}
  html.js nav.main-nav.is-open .nav-lang{padding-top:10px;}
}
@media (max-width:980px){
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .process-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .faq-grid{grid-template-columns:1fr;}
  .cap-sustain{grid-template-columns:1fr;}
}
@media (max-width:767px){
  .cap-grid,.process-list{grid-template-columns:1fr;}
  .cap-grid:has(> [data-placeholder="capacity"]) > .cap-card:nth-child(5){grid-column:auto;}
  .filter{flex:1 1 140px;}
  .filter select{min-width:0; width:100%;}
  .enq-list-btn span{display:none;}
  .enq-list-btn{padding:0 8px;}
  .enq-item{grid-template-columns:minmax(0,1fr) auto;}
  .enq-item label{grid-column:1 / -1; grid-row:2;}
  .header-quote{padding:8px 13px !important; font-size:12.5px !important;}
}
@media (max-width:420px){
  .brand-name{display:none;}
}

/* ==========================================================================
   Arabic page (/ar/): Arabic fonts after the brand fonts, so Latin codes keep
   Fraunces and Inter; right-to-left versions of the few physical positions.
   ========================================================================== */
html[lang="ar"]{
  --font-display:'Fraunces','Noto Naskh Arabic','Fraunces Fallback',serif;
  --font-body:'Inter','IBM Plex Sans Arabic','Inter Fallback',system-ui,sans-serif;
}
/* Arabic has no italics and joins its letters: no slant, no negative tracking, more line height. */
html[lang="ar"] em,html[lang="ar"] .accent-word,html[lang="ar"] .eyebrow,html[lang="ar"] .section-eyebrow,
html[lang="ar"] .marquee-track span,html[lang="ar"] .process-num,html[lang="ar"] .showcase-index{font-style:normal;}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .cat-name,html[lang="ar"] .faq-item > summary{letter-spacing:0;}
html[lang="ar"] .hero h1{line-height:1.25;}
html[lang="ar"] .section-head h2,html[lang="ar"] .about-copy h2,html[lang="ar"] .final-cta h2,html[lang="ar"] .stack-text h3{line-height:1.3;}
html[lang="ar"] .split-line-mask{padding-bottom:.3em; margin-bottom:-.3em;}

[dir="rtl"] .scroll-progress,[dir="rtl"] nav.main-nav a::after,[dir="rtl"] .cat-name::after,[dir="rtl"] .field::after{transform-origin:right;}
[dir="rtl"] .nav-sub{left:auto; right:-16px;}
[dir="rtl"] .hero-stat{padding-left:0; padding-right:14px; border-left:0; border-right:1px solid rgba(255,255,255,.2);}
[dir="rtl"] .about-badge{left:auto; right:-18px;}
[dir="rtl"] .about-photo-stage{margin:0;}
[dir="rtl"] .search-box svg{left:auto; right:15px;}
[dir="rtl"] .search-box input{padding-left:44px; padding-right:42px;}
[dir="rtl"] .search-box label{left:auto; right:43px;}
[dir="rtl"] .search-clear{right:auto; left:8px;}
[dir="rtl"] .field label{left:auto; right:17px; transform-origin:right top;}
[dir="rtl"] .filter select,[dir="rtl"] .field-select select{padding:10px 14px 10px 34px; background-position:left 12px center;}
[dir="rtl"] .prod-add{right:auto; left:10px;}
[dir="rtl"] .prod-card .prod-info{padding-right:0; padding-left:30px;}
[dir="rtl"] .prod-open{text-align:right;}
[dir="rtl"] .prod-table th{text-align:right;}
[dir="rtl"] .spec-table td:last-child{text-align:left;}
[dir="rtl"] .cat-count{margin-left:0; margin-right:auto; padding-left:0; padding-right:12px;}
[dir="rtl"] .new-badge{margin-left:0; margin-right:8px;}
[dir="rtl"] .chip-x{margin-left:0; margin-right:6px;}
[dir="rtl"] .enq-list-btn{left:auto; right:16px; padding:0 16px 0 8px;}
[dir="rtl"] .motion-toggle{right:auto; left:16px;}
[dir="rtl"] .menu-toggle{margin-right:0; margin-left:-10px;}
/* Codes, phone numbers and the plus code read left to right inside Arabic text. */
[dir="rtl"] .prod-code,[dir="rtl"] .badge,[dir="rtl"] .enq-code b,[dir="rtl"] a[href^="tel:"],[dir="rtl"] .plus-code,[dir="rtl"] .cert-meta{unicode-bidi:plaintext;}
/* The product row and the marquees keep their left-to-right motion; their labels stay right-aligned. */
[dir="rtl"] .showcase-scroll,[dir="rtl"] .showcase-bar,[dir="rtl"] .marquee-track,[dir="rtl"] .logo-rows{direction:ltr;}
[dir="rtl"] .showcase-label,[dir="rtl"] .showcase-tip{direction:rtl; text-align:right;}
@media (max-width:767px){
  [dir="rtl"] .enq-list-btn{padding:0 8px;}
  [dir="rtl"] .about-badge{right:-14px;}
}