/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:"Inter",sans-serif;color:#0A1628;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ── CSS Variables ── */
:root{
  --navy:#0A1628;
  --navy-mid:#0F2040;
  --royal:#1B4FD8;
  --royal-light:#3B6EF0;
  --aqua:#00C2CB;
  --aqua-light:#4DDDE4;
  --ember:#FF6B35;
  --ember-light:#FF8F5E;
  --white:#FFFFFF;
  --slate:#F4F7FF;
  --slate-mid:#E8EEFF;
  --grey:#8A9BB8;
  --grey-dark:#4A5568;
  --r-sm:8px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:40px;
  --shadow-card:0 4px 24px rgba(10,22,40,.08);
  --shadow-hover:0 12px 48px rgba(27,79,216,.18);
  --transition:all .3s cubic-bezier(.4,0,.2,1);
  --max-w:1280px;
}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6{font-family:"Archivo",sans-serif;line-height:1.1;font-weight:800}
h1{font-size:clamp(2.8rem,6vw,5.5rem);letter-spacing:-0.03em}
h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-0.02em}
h3{font-size:clamp(1.4rem,2.5vw,2rem)}
h4{font-size:1.25rem;font-weight:700}
p{line-height:1.7;color:var(--grey-dark)}
.eyebrow{font-family:"Space Mono",monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--aqua);font-weight:700}
.lead{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.6;color:var(--grey-dark)}
.stat-num{font-family:"Archivo",sans-serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-0.04em}
.mono{font-family:"Space Mono",monospace;font-size:.85rem}

/* ── Layout Utilities ── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.section{padding:clamp(4rem,8vw,7rem) 0}
.section--dark{background:var(--navy);color:var(--white)}
.section--dark p,.section--dark .lead{color:rgba(255,255,255,.7)}
.section--dark .eyebrow{color:var(--aqua)}
.section--slate{background:var(--slate)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2rem}

.text-center{text-align:center}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9em 2em;border-radius:100px;font-family:"Inter",sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;border:2px solid transparent;transition:var(--transition);white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--royal);color:#fff;border-color:var(--royal)}
.btn-primary:hover{background:var(--royal-light);border-color:var(--royal-light);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-ember{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn-ember:hover{background:var(--ember-light);border-color:var(--ember-light);transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,107,53,.3)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}
.btn-outline-dark{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline-dark:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}

.btn svg{width:1.1em;height:1.1em;flex-shrink:0}

/* ── Navigation ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--transition)}
.site-header.scrolled{background:rgba(10,22,40,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1.25rem,4vw,3rem);max-width:1400px;margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:.75rem}
.nav-logo img{height:44px;width:44px;border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.nav-logo-text{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.1rem;color:#fff;line-height:1.2}
.nav-logo-text span{display:block;font-size:.65rem;font-weight:400;color:var(--aqua);letter-spacing:.1em;text-transform:uppercase;font-family:"Space Mono",monospace}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{color:rgba(255,255,255,.85);font-size:.9rem;font-weight:500;transition:color .2s;position:relative}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a::after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--aqua);transform:scaleX(0);transition:transform .2s;border-radius:2px}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-dropdown{position:relative}
.nav-dropdown-toggle{display:flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.85);font-size:.9rem;font-weight:500;cursor:pointer;background:none;border:none;transition:color .2s;font-family:"Inter",sans-serif}
.nav-dropdown-toggle:hover{color:#fff}
.nav-dropdown-menu{position:absolute;top:calc(100% + 1rem);left:50%;transform:translateX(-50%);background:var(--navy-mid);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:.75rem;min-width:260px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);transition:var(--transition);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dropdown-menu a{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--r-sm);color:rgba(255,255,255,.8);font-size:.875rem;transition:var(--transition)}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-dropdown-menu a::after{display:none}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;background:none;border:none}
.nav-hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--transition)}
.mobile-nav{display:flex;position:fixed;inset:0;background:var(--navy);z-index:999;flex-direction:column;padding:6rem 1.75rem 2rem;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.mobile-nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}
.mobile-nav a{display:flex;align-items:center;min-height:52px;color:#fff;font-size:1.1rem;font-weight:600;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav a:active{color:var(--aqua-light)}

/* Equipment accordion — parent toggle */
.mobile-nav-parent{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:52px;background:none;border:none;color:#fff;font-size:1.1rem;font-weight:600;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;width:100%;cursor:pointer;font-family:inherit}
.mobile-nav-parent .mnp-chevron{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.mobile-nav-parent .mnp-chevron svg{width:13px;height:13px;transition:transform .3s cubic-bezier(.4,0,.2,1);color:var(--aqua)}
.mobile-nav-parent[aria-expanded="true"] .mnp-chevron{background:var(--royal)}
.mobile-nav-parent[aria-expanded="true"] .mnp-chevron svg{color:#fff;transform:rotate(180deg)}

/* Equipment accordion — submenu panel */
.mobile-nav-sub{overflow:hidden;max-height:0;display:flex;flex-direction:column;background:rgba(255,255,255,.04);border-radius:var(--r-md);transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.mobile-nav-sub.open{max-height:20rem}
.mobile-nav-sublink{display:flex;align-items:center;gap:.65rem;min-height:48px;font-size:.95rem;font-weight:400;line-height:1.3;color:rgba(255,255,255,.7);padding:.7rem 1rem .7rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s,background .2s}
.mobile-nav-sublink::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--aqua);flex-shrink:0}
.mobile-nav-sublink:last-child{border-bottom:none}
.mobile-nav-sublink:hover,.mobile-nav-sublink:active{color:#fff;background:rgba(255,255,255,.06)}

.mobile-nav-cta{margin-top:1.75rem;display:flex;flex-direction:column;gap:1rem}
.mobile-nav-cta .btn{justify-content:center;min-height:48px}

@media(max-width:900px){.nav-links,.nav-cta .btn-primary{display:none}.nav-hamburger{display:flex}}
@media(max-width:360px){.mobile-nav{padding:5.5rem 1.25rem 1.5rem}}

/* ── Hero ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:visible;background:var(--navy)}
.hero-video-bg{position:absolute;inset:0;z-index:0}
.hero-video-bg video{width:100%;height:100%;object-fit:cover;opacity:.86}
.hero-video-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,40,.8) 0%,rgba(10,22,40,.7) 44%,rgba(10,22,40,.38) 64%,rgba(10,22,40,.1) 84%,rgba(10,22,40,0) 100%),linear-gradient(to top,rgba(10,22,40,.48) 0%,rgba(10,22,40,0) 42%)}
.hero-content{position:relative;z-index:2;padding:7rem clamp(1.25rem,4vw,3rem) 5rem;max-width:1280px;margin:0 auto;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,194,203,.12);border:1px solid rgba(0,194,203,.3);border-radius:100px;padding:.4em 1em;margin-bottom:2rem}
.hero-badge span{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--aqua);letter-spacing:.1em;text-transform:uppercase}
.hero h1{color:#fff;max-width:820px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--aqua)}
.hero-sub{color:rgba(255,255,255,.75);font-size:clamp(1rem,2vw,1.25rem);max-width:560px;margin-top:1.5rem;line-height:1.65}
.hero-video-bg~.hero-content h1,.hero-video-bg~.hero-content .hero-sub,.hero-video-bg~.hero-content .eyebrow{text-shadow:0 1px 18px rgba(10,22,40,.5),0 1px 3px rgba(10,22,40,.42)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}

/* ── Page Hero (inner pages) ── */
.page-hero{background:var(--navy);padding:clamp(6rem,10vw,8rem) 0 clamp(3rem,5vw,5rem);position:relative;overflow:hidden}
.page-hero-video{position:absolute;inset:0;z-index:0;pointer-events:none}
.page-hero-video video{width:100%;height:100%;object-fit:cover;display:block;opacity:.86}
.page-hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,40,.82) 0%,rgba(10,22,40,.74) 48%,rgba(10,22,40,.38) 70%,rgba(10,22,40,.1) 88%,rgba(10,22,40,0) 100%),linear-gradient(to top,rgba(10,22,40,.42) 0%,rgba(10,22,40,0) 46%)}
.page-hero::before{content:"";position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(27,79,216,.25) 0%,transparent 70%);pointer-events:none}
.page-hero::after{content:"";position:absolute;bottom:-20%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(0,194,203,.15) 0%,transparent 70%);pointer-events:none}
.page-hero-content{position:relative;z-index:1}
.page-hero h1{color:#fff}
.page-hero .lead{color:rgba(255,255,255,.7);margin-top:1rem;max-width:600px}
.breadcrumb{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.breadcrumb a,.breadcrumb span{font-size:.8rem;font-family:"Space Mono",monospace;color:rgba(255,255,255,.45);letter-spacing:.05em}
.breadcrumb a:hover{color:var(--aqua)}
.breadcrumb svg{width:12px;height:12px;opacity:.4}

/* ── Cards ── */
.card{background:#fff;border-radius:var(--r-lg);padding:2rem;box-shadow:var(--shadow-card);transition:var(--transition);border:1px solid rgba(10,22,40,.06)}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);border-color:rgba(27,79,216,.15)}

.card h3{font-size:1.2rem;margin-bottom:.65rem}
.card p{font-size:.9rem;color:var(--grey-dark)}

/* ── Equipment Cards ── */
.equip-card{background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition);border:1px solid rgba(10,22,40,.06);display:flex;flex-direction:column}
.equip-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-6px)}

.equip-card-body{padding:1.75rem 2rem 2rem;flex:1;display:flex;flex-direction:column}

.equip-card-body .btn{margin-top:1.5rem;justify-content:center}

/* ── Industries Grid ── */
.industry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}
.industry-card{padding:1.75rem;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-card);border:1px solid rgba(10,22,40,.06);transition:var(--transition);cursor:default}
.industry-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);border-color:rgba(27,79,216,.2)}

.industry-card h4{font-size:1rem;margin-bottom:.5rem}
.industry-card p{font-size:.85rem}

/* ── Service Area Tags ── */
.area-tags{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.area-tag{padding:.5em 1.2em;border-radius:100px;background:rgba(0,194,203,.1);border:1px solid rgba(0,194,203,.25);color:var(--navy);font-size:.875rem;font-weight:500;transition:var(--transition)}
.area-tag:hover{background:rgba(0,194,203,.2);border-color:var(--aqua)}

/* ── FAQ Accordion ── */
.faq-list{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(10,22,40,.08)}
.faq-toggle{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:"Archivo",sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);transition:color .2s}
.faq-toggle:hover{color:var(--royal)}
.faq-toggle .faq-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--slate-mid);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.faq-toggle .faq-icon svg{width:14px;height:14px;transition:transform .3s;color:var(--royal)}
.faq-item.open .faq-icon{background:var(--royal)}
.faq-item.open .faq-icon svg{color:#fff;transform:rotate(45deg)}
.faq-answer{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.faq-answer-inner{padding:0 0 1.5rem}
.faq-answer-inner p{color:var(--grey-dark);font-size:.95rem;line-height:1.75}
.faq-cats{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem;justify-content:center}
.faq-cat-btn{padding:.45em 1.2em;border-radius:100px;border:1.5px solid rgba(10,22,40,.15);background:transparent;cursor:pointer;font-size:.85rem;font-weight:500;transition:var(--transition);font-family:"Inter",sans-serif;color:var(--navy)}
.faq-cat-btn.active,.faq-cat-btn:hover{background:var(--royal);border-color:var(--royal);color:#fff}

/* ── Contact Form ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:.5rem}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:.875rem;font-weight:600;color:var(--navy)}
.form-group input,.form-group textarea,.form-group select{padding:.85em 1.1em;border:1.5px solid rgba(10,22,40,.15);border-radius:var(--r-sm);font-family:"Inter",sans-serif;font-size:.95rem;color:var(--navy);background:#fff;transition:border-color .2s,box-shadow .2s;outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--royal);box-shadow:0 0 0 4px rgba(27,79,216,.1)}
.form-group textarea{min-height:140px;resize:vertical}
.form-submit{margin-top:.5rem}
.contact-info-card{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:2.5rem}
.contact-info-item{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.contact-info-item:last-child{border-bottom:none}
.contact-info-icon{width:44px;height:44px;border-radius:var(--r-sm);background:rgba(0,194,203,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem}
.contact-info-text strong{display:block;color:#fff;font-size:.9rem;margin-bottom:.2rem}
.contact-info-text span{color:rgba(255,255,255,.55);font-size:.85rem}
.contact-info-text a{color:var(--aqua)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}.form-group.full{grid-column:1}}

/* ── Spec Table ── */

/* ── Testimonials ── */
.testimonial-card{background:#fff;border-radius:var(--r-xl);padding:2.5rem;box-shadow:var(--shadow-card);border:1px solid rgba(10,22,40,.06);position:relative}
.testimonial-card::before{content:"\"";font-family:"Archivo",sans-serif;font-size:8rem;line-height:.8;color:var(--aqua);opacity:.15;position:absolute;top:1rem;left:1.5rem}
.testimonial-text{font-size:1.05rem;line-height:1.7;color:var(--grey-dark);position:relative;z-index:1;margin-bottom:1.5rem}
.testimonial-author strong{display:block;font-size:.95rem;color:var(--navy)}
.testimonial-author span{font-size:.8rem;color:var(--grey)}

/* ── Milestones ── */
.timeline{position:relative;padding-left:2.5rem}
.timeline::before{content:"";position:absolute;left:.625rem;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--royal),var(--aqua))}

/* ── Map Placeholder ── */
.map-container{border-radius:var(--r-xl);overflow:hidden;background:var(--slate);height:320px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(10,22,40,.08);position:relative}

.service-area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-top:2rem}
.service-area-item{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;background:#fff;border-radius:var(--r-sm);border:1px solid rgba(10,22,40,.08);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-card)}
.service-area-item::before{content:"📍";font-size:1rem;flex-shrink:0}

/* ── CTA Band ── */
.cta-band{background:linear-gradient(90deg,var(--royal),var(--aqua)) top/100% 3px no-repeat,linear-gradient(135deg,#2E5CE6 0%,#1B4FD8 52%,#1A46B8 100%);padding:clamp(4rem,7vw,6rem) 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-45%;left:-8%;width:560px;height:560px;background:radial-gradient(circle,rgba(77,221,228,.22) 0%,transparent 60%);pointer-events:none}
.cta-band::after{content:"";position:absolute;bottom:-32%;right:-6%;width:520px;height:520px;background:radial-gradient(circle,rgba(255,255,255,.14) 0%,transparent 62%);pointer-events:none}
.cta-band-content{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.95);margin-top:.75rem;font-size:1.1rem}
.cta-band .btn{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease,color .3s ease}
.cta-band .btn:hover{transform:translateY(-3px)}
.cta-band .btn-group{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* ── Footer ── */
.site-footer{background:var(--navy);color:rgba(255,255,255,.7);padding:4rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand .nav-logo-text{font-size:1.2rem;color:#fff;margin-bottom:1rem}
.footer-brand p{font-size:.875rem;line-height:1.7;max-width:280px}
.footer-col h5{color:#fff;font-size:.875rem;font-weight:700;margin-bottom:1.25rem;letter-spacing:.05em;text-transform:uppercase;font-family:"Space Mono",monospace}
.footer-col ul li{margin-bottom:.65rem}
.footer-col ul li a{font-size:.875rem;transition:color .2s}
.footer-col ul li a:hover{color:var(--aqua)}
.footer-contact-item{display:flex;gap:.6rem;margin-bottom:.75rem;font-size:.875rem}
.footer-contact-item a{color:rgba(255,255,255,.7)}
.footer-contact-item a:hover{color:var(--aqua)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:gap;gap:1rem;font-size:.8rem}
.footer-bottom a:hover{color:var(--aqua)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}

/* ── Reveal Animations ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ── Section Heading Block ── */
.section-heading{margin-bottom:clamp(2.5rem,5vw,4rem);text-align:center}
.section-heading h2{margin-top:.75rem}
.section-heading p{max-width:580px;margin:.75rem auto 0;font-size:1.05rem}

/* ── Highlighted Tag ── */
.tag{display:inline-flex;align-items:center;gap:.35rem;background:rgba(27,79,216,.1);border:1px solid rgba(27,79,216,.2);border-radius:100px;padding:.3em .9em;font-size:.78rem;font-weight:600;color:var(--royal)}
.tag-aqua{background:rgba(0,194,203,.1);border-color:rgba(0,194,203,.25);color:var(--navy)}

/* ── Divider ── */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(10,22,40,.1),transparent);margin:0}

/* ── Skip link ── */
.skip-link{position:absolute;top:-40px;left:0;background:var(--royal);color:#fff;padding:.5rem 1rem;border-radius:0 0 var(--r-sm) 0;z-index:2000;transition:top .2s;font-size:.85rem}
.skip-link:focus{top:0}

/* ── Scroll-triggered counter ── */
.count-up{display:inline-block}

/* ── Print / reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *:not(.stats-ticker-track):not(.hero-scroll):not(.hero-scroll svg){
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}
@media print{.site-header,.mobile-nav,.cta-band,.site-footer{display:none}.hero{min-height:auto}}

/* ── Hero entry animations ── */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
.hero-animate-1{animation:heroFadeUp .7s cubic-bezier(.4,0,.2,1) .1s both}
.hero-animate-2{animation:heroFadeUp .8s cubic-bezier(.4,0,.2,1) .25s both}
.hero-animate-3{animation:heroFadeUp .8s cubic-bezier(.4,0,.2,1) .4s both}
.hero-animate-4{animation:heroFadeUp .8s cubic-bezier(.4,0,.2,1) .55s both}
.hero-animate-5{animation:heroFadeUp .8s cubic-bezier(.4,0,.2,1) .75s both}

/* ── Hero ambient orbs ── */
.hero-orbs{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px)}
.hero-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(27,79,216,.35),transparent 70%);top:-10%;right:-5%;animation:orbFloat 12s ease-in-out infinite}
.hero-orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(0,194,203,.2),transparent 70%);bottom:10%;left:-5%;animation:orbFloat 9s ease-in-out 2s infinite reverse}
.hero-orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(255,107,53,.12),transparent 70%);top:40%;right:25%;animation:orbFloat 14s ease-in-out 4s infinite}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-30px) scale(1.05)}66%{transform:translate(-15px,20px) scale(.95)}}

/* ── Hero play button ── */
.hero-play-btn{display:inline-flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.25);border-radius:100px;padding:.8em 1.6em;color:#fff;font-family:"Inter",sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-play-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.hero-play-icon{width:36px;height:36px;border-radius:50%;background:var(--ember);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s;box-shadow:0 4px 16px rgba(255,107,53,.4)}
.hero-play-btn:hover .hero-play-icon{transform:scale(1.12)}

/* ── Video modal ── */
.video-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.video-modal.open{display:flex}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(5,10,20,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer}
.video-modal-inner{position:relative;z-index:1;width:100%;max-width:960px;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.8);animation:modalIn .4s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:none}}
.video-modal-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-modal-close{position:absolute;top:-3rem;right:0;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:var(--transition);z-index:2}
.video-modal-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}
body.modal-open{overflow:hidden}

/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .stats-ticker-track  { animation: none !important; }
  .hero-orb            { animation: none !important; }
}

/* ── Mobile nav interactive elements ── */
.mobile-nav-close{position:absolute;top:1.15rem;right:1.15rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:var(--transition)}
.mobile-nav-close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}

/* ── Contact page tab system (contact.html) ── */
.form-tab-btn{padding:.6em 1.4em;border-radius:100px;border:1.5px solid rgba(10,22,40,.15);background:transparent;color:var(--navy);cursor:pointer;font-family:"Inter",sans-serif;font-size:.875rem;font-weight:600;transition:var(--transition)}
.form-tab-btn.active{background:var(--royal);border-color:var(--royal);color:#fff}
.form-panel{display:block}

/* ── Nav dropdown JS-open state ── */
.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.stats-ticker-section {
  background: var(--navy);
  padding: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.stats-ticker-inner {
  padding: 2.5rem 0;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image:         linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  overflow: hidden;
}
.stats-ticker-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation: statsMarquee 34s linear infinite;
}
.stats-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes statsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sticker-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 0 3rem;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: default;
}
.sticker-num {
  font-family: "Archivo", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -.03em;
  transition: color .25s;
  line-height: 1;
}
.sticker-item:hover .sticker-num {
  color: var(--aqua);
}
.sticker-label {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.35;
  max-width: 130px;
}
.sticker-div {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,.14);
  flex-shrink: 0;
}
/* animated accent bar at bottom */

/* ════════════════════════════════════════════════════════
   INDUSTRIES — premium full-tile image cards
   4:3 marketing tiles shown whole (image is 4:3, box is 4:3 →
   object-fit:cover never crops at rest). Namespaced .industry-*.
   ════════════════════════════════════════════════════════ */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.6rem);
  align-items: stretch;
}
@media (max-width: 1200px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .industry-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

.industry-card {
  position: relative;
  padding: 0;                     /* neutralizes an earlier .industry-card padding rule */
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(10,22,40,.07);
  box-shadow: var(--shadow-card);
  cursor: default;
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              box-shadow .5s cubic-bezier(.22,1,.36,1),
              border-color .4s ease;
}
.industry-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(27,79,216,.28);
}

/* Image frame — square-ish 4:3 stage matching the source tiles */
.industry-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(140deg, var(--slate), var(--slate-mid));
  flex-shrink: 0;
}
.industry-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.industry-card:hover .industry-card-img img { transform: scale(1.06); }
/* subtle gradient overlay for depth + smooth hand-off into the content block */
.industry-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(10,22,40,.18) 100%);
  transition: opacity .4s ease;
}
/* animated royal→aqua accent seam, draws in on hover */
.industry-card-img::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--royal), var(--aqua));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.industry-card:hover .industry-card-img::before { transform: scaleX(1); }

/* Text content */
.industry-card-content {
  padding: 1.15rem 1.35rem 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(244,247,255,.5), #fff 60%);
  transition: background .4s ease;
}
.industry-card:hover .industry-card-content {
  background: linear-gradient(180deg, rgba(232,238,255,.85), #fff 60%);
}
.industry-card-content h4 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 .4rem;
  line-height: 1.25;
  transition: color .3s ease;
}
.industry-card:hover .industry-card-content h4 { color: var(--royal); }
.industry-card-content p {
  font-size: .85rem;
  color: var(--grey-dark);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.industry-card-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--royal);
  transition: gap .25s ease, color .25s ease;
}
.industry-card:hover .industry-card-link { gap: .55rem; } /* color stays royal (6.65:1) for AA */

/* Entrance — staggered fade-up; `backwards` fill only, so the animation
   never locks transform and the hover lift stays responsive. */
.industry-card.reveal { opacity: 0; }
.industry-card.reveal.visible { opacity: 1; animation: indIn .7s cubic-bezier(.22,1,.36,1) backwards; }
.industry-card:nth-child(4n/**/+2).reveal.visible { animation-delay: .07s; }
.industry-card:nth-child(4n/**/+3).reveal.visible { animation-delay: .14s; }
.industry-card:nth-child(4n).reveal.visible   { animation-delay: .21s; }
@keyframes indIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .industry-card, .industry-card-img img, .industry-card-img::after,
  .industry-card-img::before, .industry-card-content, .industry-card-link {
    transition: none !important; animation: none !important;
  }
  .industry-card.reveal, .industry-card.reveal.visible { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════
   ADD: contrast fixes + hero stats infinite loop
   ════════════════════════════════════════════ */

/* Task 2 — fonts that were invisible on dark backgrounds */
.section--dark .tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.section--dark .tag-aqua{background:rgba(0,194,203,.18);border-color:rgba(0,194,203,.45);color:var(--aqua-light)}
.site-footer p{color:rgba(255,255,255,.68)}

/* Task 3 — hero trust stats: infinite-loop marquee (mirrors the mid-page ticker) */

/* ════════════════════════════════════════════
   FIX: white cards inheriting light text inside
   dark sections (headings/body went invisible).
   These cards are always background:#fff, so dark
   text is correct in light AND dark sections.
   ════════════════════════════════════════════ */
.card h3{color:var(--navy)}

.service-area-item{color:var(--navy)}

/* ════════════════════════════════════════════
   FIX: Equipment cards — title band was white text
   on a light background (invisible). Give it a navy
   band with legible white text + a cleaner image area.
   ════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   ADD: Service-area interactive Google map
   ════════════════════════════════════════════ */
.map-container iframe{width:100%;height:100%;border:0;display:block}
.area-tag{cursor:pointer;font-family:inherit;line-height:1.2;-webkit-appearance:none;appearance:none}
.area-tag:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
.area-tag-active{background:var(--royal);border-color:var(--royal);color:#fff}
.area-tag-active:hover{background:var(--royal);border-color:var(--royal)}
.map-hint{margin-top:.85rem;font-size:.8rem;color:var(--grey);text-align:center}

/* ════════════════════════════════════════════
   ADD: Our Services cards with image headers
   (branded gradient fallback so they never break)
   ════════════════════════════════════════════ */
/* Full 4:3 marketing tiles shown whole (object-fit:cover on a 4:3 box → no crop
   at rest). Render-safe plain <img>. Layered shadows + glass-tinted body.     */
.service-card{
  position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column;
  border-radius:18px;
  box-shadow:0 2px 8px rgba(10,22,40,.06), 0 14px 34px rgba(10,22,40,.12);
  border:1px solid rgba(10,22,40,.06);
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s cubic-bezier(.22,1,.36,1),
             border-color .4s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 6px 16px rgba(10,22,40,.10), 0 26px 56px rgba(27,79,216,.24);
  border-color:rgba(27,79,216,.30);
}
.service-card-img{
  position:relative;aspect-ratio:4/3;overflow:hidden;display:block;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-mid) 60%,#16315f 100%);
}
.service-card-img img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transform:scale(1);transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.service-card:hover .service-card-img img{transform:scale(1.06)}
/* gradient overlay for depth + smooth hand-off into the body */
.service-card-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(10,22,40,.20) 100%);transition:opacity .4s ease}
/* animated royal→aqua accent seam, draws in on hover */
.service-card-img::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--royal),var(--aqua));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.service-card:hover .service-card-img::before{transform:scaleX(1)}
/* body — subtle glass-tinted wash that warms on hover */
.service-card-body{
  position:relative;flex:1;display:flex;flex-direction:column;
  padding:1.4rem 1.5rem 1.6rem;
  background:linear-gradient(180deg,rgba(244,247,255,.6),#fff 60%);
  transition:background .4s ease;
}
.service-card:hover .service-card-body{background:linear-gradient(180deg,rgba(232,238,255,.9),#fff 60%)}
.service-card-body h3{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.18rem;line-height:1.25;
  color:var(--navy);margin:0 0 .55rem;transition:color .3s ease;
}
.service-card:hover .service-card-body h3{color:var(--royal)}
.service-card-body p{font-size:.9rem;color:var(--grey-dark);line-height:1.65;margin:0}
/* entrance — staggered fade-up; `backwards` fill only, so the animation never
   locks transform and the hover lift stays responsive. */
.service-card.reveal{opacity:0}
.service-card.reveal.visible{opacity:1;animation:svcIn .7s cubic-bezier(.22,1,.36,1) backwards}
.service-card:nth-child(3n/**/+2).reveal.visible{animation-delay:.08s}
.service-card:nth-child(3n).reveal.visible{animation-delay:.16s}
@keyframes svcIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .service-card,.service-card-img img,.service-card-img::after,.service-card-img::before,.service-card-body{
    transition:none!important;animation:none!important}
  .service-card.reveal,.service-card.reveal.visible{opacity:1!important;transform:none!important}
}

/* ════════════════════════════════════════════════════════════════════
   CLIENT REVISION — Homepage interactivity pass (2026-06)
   (1) Polished video player   (2) Interactive hero stat marquee
   (3) Equipment CTAs + section CTA   (4) "Why Kingstar" cards
   Additive override layer — PORT BACK into theme.py / components.py.
   ════════════════════════════════════════════════════════════════════ */

/* ───────────── (1) POLISHED VIDEO PLAYER ───────────── */
.video-modal-inner{background:#0A1628;border:1px solid rgba(255,255,255,.1)}
.video-modal-bar{display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem .8rem 1.1rem;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border-bottom:1px solid rgba(255,255,255,.08)}
.video-modal-bar-label{display:flex;align-items:center;gap:.75rem}
.vm-dot{width:9px;height:9px;border-radius:50%;background:var(--ember);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,107,53,.5);animation:vmPulse 2s infinite}
@keyframes vmPulse{0%{box-shadow:0 0 0 0 rgba(255,107,53,.5)}70%{box-shadow:0 0 0 9px rgba(255,107,53,0)}100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}}
.vm-eyebrow{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--aqua);margin:0;line-height:1}
.vm-title{font-family:"Archivo",sans-serif;font-weight:800;font-size:.95rem;color:#fff;margin:.15rem 0 0;line-height:1.15}
/* close button moves into the bar */
.video-modal-inner .video-modal-close{position:static;top:auto;right:auto;width:40px;height:40px;flex-shrink:0}
.video-modal-frame{border-radius:0}
/* loader */
.video-modal-loader{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;color:rgba(255,255,255,.72);
  font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.video-modal-loader.show{display:flex}
.vm-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--aqua);animation:vmSpin .8s linear infinite}
@keyframes vmSpin{to{transform:rotate(360deg)}}
/* click-to-play poster overlay */
.video-poster-overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.05rem;cursor:pointer;
  background:none;border:0;font-family:inherit;width:100%;
  background-image:radial-gradient(130% 130% at 50% 38%,rgba(15,32,64,.35),rgba(10,22,40,.88));
  transition:opacity .35s}
.video-poster-overlay.hidden{opacity:0;pointer-events:none}
.vp-play{position:relative;width:84px;height:84px;border-radius:50%;background:var(--ember);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 16px 50px rgba(255,107,53,.5);transition:transform .3s}
.vp-play svg{width:32px;height:32px;color:#fff;margin-left:5px}
.vp-play::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,107,53,.55);animation:vpRing 2.2s ease-out infinite}
@keyframes vpRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}
.video-poster-overlay:hover .vp-play{transform:scale(1.08)}
.vp-label{font-family:"Archivo",sans-serif;font-weight:800;color:#fff;font-size:1.05rem;letter-spacing:.01em}
.vp-sub{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:-.55rem;font-family:"Space Mono",monospace;letter-spacing:.04em}

/* ───────────── (2) INTERACTIVE HERO STAT MARQUEE ───────────── */

/* ───────────── (3) EQUIPMENT CTAs ───────────── */
/* Card buttons: ghost → confident, obviously-tappable gradient action */
.equip-card-body .btn.btn-outline-dark{
  background-color:var(--royal);
  background-image:linear-gradient(120deg,var(--royal),var(--royal-light));
  color:#fff;border-color:transparent;
  box-shadow:0 6px 20px rgba(27,79,216,.18);transition:var(--transition)}
.equip-card-body .btn.btn-outline-dark:hover{
  background-image:linear-gradient(120deg,var(--royal),var(--aqua));
  color:#fff;transform:translateY(-2px);box-shadow:0 12px 34px rgba(27,79,216,.34)}
.equip-card-body .btn.btn-outline-dark svg{transition:transform .3s}
.equip-card-body .btn.btn-outline-dark:hover svg{transform:translateX(4px)}
/* Section-level CTA band */
.equip-section-cta{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.5rem;padding:1.8rem 2.2rem;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--navy),var(--navy-mid));
  border:1px solid rgba(0,194,203,.18);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.equip-section-cta::after{content:"";position:absolute;top:-60px;right:-40px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(0,194,203,.14),transparent 70%);pointer-events:none}
.equip-section-cta-text{position:relative;z-index:1}
.equip-section-cta-eyebrow{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--aqua);margin:0}
.equip-section-cta-head{font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(1.1rem,2vw,1.45rem);color:#fff;margin:.35rem 0 0;line-height:1.25;max-width:52ch}
.equip-section-cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;position:relative;z-index:1}
.equip-section-cta .btn-outline-dark{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;background-image:none}
.equip-section-cta .btn-outline-dark:hover{background:#fff;color:var(--navy);border-color:#fff;background-image:none;transform:translateY(-2px)}
/* video poster — compact on small frames so it never crowds the controls */
@media(max-width:600px){
  .vp-play{width:68px;height:68px}
  .vp-play svg{width:26px;height:26px}
  .vp-label{font-size:.92rem}
  .vp-sub{font-size:.7rem}
  .video-poster-overlay{gap:.8rem}
  .video-modal-bar{padding:.7rem .8rem}
}

/* ════════════════════════════════════════════════════════════════════
   CLIENT REVISION — About page interactivity pass (2026-06)
   (H) Hero video bg   (2) Our Story   (3) Core Values
   (4) Our Services    (5) Why Kingstar (reuses .why-card machinery)
   (6) Company Milestones timeline
   Additive override layer — PORT BACK into theme.py / components.py /
   pages/about. Scoped to About-page sections; no homepage impact.
   ════════════════════════════════════════════════════════════════════ */

/* ── Shared: reveal-up (was observed by JS but never styled) ── */
.reveal-up{opacity:0;transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal-up.visible{opacity:1;transform:none}
/* no-JS safety: never leave content hidden if scripts don't run */
@media (scripting: none){.reveal,.reveal-up{opacity:1 !important;transform:none !important}}

/* ───────────── (H) ABOUT HERO VIDEO ───────────── */
.page-hero--video{min-height:clamp(440px,60vh,640px);display:flex;align-items:center}
.page-hero--video .container{width:100%}
.page-hero-video.video-failed{display:none}

/* ───────────── (2) OUR STORY ───────────── */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:920px){.story-grid{grid-template-columns:1fr;gap:2.5rem}}

/* staggered cascade of the copy once the column reveals */
.story-stagger{opacity:0}
.story-copy.visible .story-stagger{animation:storyRise .55s cubic-bezier(.4,0,.2,1) both}
.story-copy.visible .story-stagger:nth-child(3){animation-delay:.05s}
.story-copy.visible .story-stagger:nth-child(4){animation-delay:.15s}
.story-copy.visible .story-stagger:nth-child(5){animation-delay:.25s}
.story-copy.visible .story-stagger:nth-child(6){animation-delay:.35s}
@keyframes storyRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.story-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.story-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5em 1em;border-radius:100px;
  background:rgba(27,79,216,.07);border:1px solid rgba(27,79,216,.16);
  font-size:.8rem;font-weight:600;color:var(--navy);transition:var(--transition)}
.story-chip svg{width:15px;height:15px;color:var(--royal);flex-shrink:0}
.story-chip:hover{background:rgba(27,79,216,.12);border-color:rgba(27,79,216,.32);transform:translateY(-2px)}

/* layered media + stats panel */
.story-panel{display:flex;flex-direction:column;gap:1.25rem}

/* photo present → hide the SVG fallback; photo missing → .img-fallback keeps SVG */

.story-stats{background:linear-gradient(135deg,var(--navy),var(--navy-mid));border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.25rem);color:#fff}
.story-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.25rem}
.story-stat{padding:1.1rem 1.15rem;border-radius:var(--r-md);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);transition:transform .3s,background .3s,border-color .3s;
  opacity:0;transform:translateY(12px)}
.story-panel.visible .story-stat{animation:storyRise .5s cubic-bezier(.4,0,.2,1) both}
.story-panel.visible .story-stat:nth-child(2){animation-delay:.08s}
.story-panel.visible .story-stat:nth-child(3){animation-delay:.16s}
.story-panel.visible .story-stat:nth-child(4){animation-delay:.24s}
.story-stat:hover{transform:translateY(-4px);background:rgba(0,194,203,.08);border-color:rgba(0,194,203,.35)}
.story-stat .stat-num{color:#fff;font-size:clamp(2rem,4vw,2.7rem);line-height:1}
.story-stat:hover .stat-num{color:var(--aqua-light)}
.story-stat-lbl{color:rgba(255,255,255,.55);font-size:.8rem;margin-top:.3rem}

/* ───────────── LIGHTBOX ───────────── */
.lightbox{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem)}
.lightbox.open{display:flex}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(5,10,20,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:zoom-out}
.lightbox-stage{position:relative;z-index:1;max-width:1100px;width:100%;display:flex;
  flex-direction:column;align-items:center;gap:1rem;animation:modalIn .35s cubic-bezier(.4,0,.2,1)}
.lightbox-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-lg);
  background:radial-gradient(120% 120% at 50% 0%,#fff,#e9eef7);padding:1.5rem;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lightbox-caption{font-family:"Space Mono",monospace;font-size:.78rem;letter-spacing:.08em;
  color:rgba(255,255,255,.8)}
.lightbox-close{position:absolute;top:-3.2rem;right:0;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;
  font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);z-index:2}
.lightbox-close:hover{background:rgba(255,255,255,.22);transform:scale(1.08)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);z-index:2}
.lightbox-nav:hover{background:rgba(255,255,255,.22)}
.lightbox-nav svg{width:22px;height:22px}
.lightbox-prev{left:-1rem}.lightbox-next{right:-1rem}
@media(max-width:640px){.lightbox-prev{left:.25rem}.lightbox-next{right:.25rem}}
body.lightbox-open{overflow:hidden}

/* ════════════════════════════════════════════════════════════
   About hero — video background legibility (additive override)
   Tuned against rendered frames of kingstar-about-us.mp4.
   Desktop left column already sits at 12–18:1 (AAA) via the
   existing directional gradient. These rules add a soft glyph
   text-shadow as a safety net and a light mobile-only scrim,
   because the video's bright center lands in the narrow-screen
   crop and drops worst-case patches behind the 70%-white lead
   toward ~6:1. The scrim lifts that back above ~8:1 without
   washing the footage out.
   Port-back: theme.py / page-hero video block.
   ════════════════════════════════════════════════════════════ */
.page-hero-video video{background:var(--navy)} /* avoids flash before poster/first frame */
/* readability safety net for every video hero (incl. equipment pages w/o the --video modifier) */
.page-hero:has(.page-hero-video) .page-hero-content h1,
.page-hero:has(.page-hero-video) .page-hero-content .lead,
.page-hero:has(.page-hero-video) .page-hero-content .eyebrow,
.page-hero:has(.page-hero-video) .page-hero-content .breadcrumb{text-shadow:0 1px 16px rgba(10,22,40,.5),0 1px 3px rgba(10,22,40,.4)}
.page-hero--video .page-hero-content h1,
.page-hero--video .page-hero-content .lead,
.page-hero--video .page-hero-content .eyebrow,
.page-hero--video .page-hero-content .breadcrumb{
  text-shadow:0 1px 16px rgba(10,22,40,.5),0 1px 3px rgba(10,22,40,.4);
}
@media (max-width:768px){
  .page-hero--video .page-hero-video::before{
    content:"";position:absolute;inset:0;
    background:rgba(10,22,40,.2);pointer-events:none;
  }
}

/* ════════════════════════════════════════════════════════════
   Contact — full-width location map (additive override)
   Replaces the half-column placeholder with a real embedded
   Google map spanning the full content width, with a caption
   bar (address + directions). Port-back: contact page block.
   ════════════════════════════════════════════════════════════ */
.contact-map-section{padding-top:0}
.map-block{background:#fff;border:1px solid rgba(10,22,40,.08);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card)}
.map-block-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding:1.25rem clamp(1.25rem,3vw,2rem)}
.map-block-bar .eyebrow{margin-bottom:.15rem}
.map-block-addr{font-size:.95rem;color:var(--navy);font-weight:600}
.map-embed{width:100%;height:clamp(360px,42vw,480px);background:var(--slate)}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

/* ════════════════════════════════════════════════════════════════
   CONTACT HUB — premium homepage contact section (additive)
   Namespaced .contact-hub / .cc-* to avoid collisions. Reuses the
   existing .reveal observer + .section rhythm + brand tokens.
   Port-back: new components.py block + theme.py styles.
   ════════════════════════════════════════════════════════════════ */
.contact-hub{position:relative;overflow:hidden;background:#fff}
.contact-hub .container{position:relative;z-index:2}

/* Ambient background: faint dot field + two blurred brand orbs */
.contact-hub-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.contact-hub-bg::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(27,79,216,.06) 1px,transparent 1px);
  background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%);opacity:.7}
.chub-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.chub-orb-1{top:-120px;left:-100px;width:460px;height:460px;background:radial-gradient(circle,rgba(27,79,216,.22),transparent 68%)}
.chub-orb-2{bottom:-160px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(0,194,203,.18),transparent 68%)}

/* ════════════════════════════════════════════════════════════════════
   CLIENT REVISION — Homepage premium pass (2026-07)
   (1) Hero statistics ticker   (2) Contact / NAP section + showroom banner
   (3) Our Equipment product showcase
   Additive override layer. PORT BACK into theme.py / components.py.
   Scoped with new class names (.hero-ticker, .ht-*, .chub-feature,
   .equip-media/.equip-chip/.equip-btn) so it cannot collide with the
   older ticker (.stats-ticker-*) or the old equip-card head markup.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   (1) HERO STATISTICS TICKER
   Seamless right→left marquee. Two identical copies inside the
   track; the keyframe translates the track by exactly -50%, so
   copy B lands where copy A started → no jump / flicker / reset.
   ───────────────────────────────────────────────────────────── */
.hero-ticker{
  position:relative;margin-top:2.75rem;padding:2.1rem .2rem 1.4rem;
  border-top:1px solid rgba(255,255,255,.1);overflow:hidden;
  /* soft fade masks so cards gracefully enter/exit on both edges */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.hero-ticker-track{
  display:inline-flex;align-items:stretch;width:max-content;
  will-change:transform;backface-visibility:hidden;transform:translateZ(0);
  animation:heroTickerScroll 50s linear infinite;   /* slow, comfortably readable */
}
/* pause on hover / keyboard focus, resume smoothly from the same position */
.hero-ticker:hover .hero-ticker-track,
.hero-ticker:focus-within .hero-ticker-track{animation-play-state:paused}
/* translate the track by exactly one copy (-50%) → copy B lands where copy A
   began, so there is no jump, flicker, or visible reset. translate3d keeps it
   on the GPU for perfectly smooth motion across browsers. */
@keyframes heroTickerScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── premium stat card ── */
.ht-stat{
  display:inline-flex;align-items:center;gap:1rem;flex-shrink:0;
  padding:1rem 1.5rem;border-radius:18px;
  background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px -20px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .4s cubic-bezier(.22,1,.36,1),background .4s,border-color .4s,box-shadow .4s;
}
.ht-stat:hover{
  transform:translateY(-5px);
  background:linear-gradient(155deg,rgba(0,194,203,.14),rgba(27,79,216,.07));
  border-color:rgba(0,194,203,.5);
  box-shadow:0 20px 44px -20px rgba(0,194,203,.55),0 0 0 1px rgba(0,194,203,.25),
             inset 0 1px 0 rgba(255,255,255,.12);
}
/* modern outlined icon in a soft-glow tile */
.ht-ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:48px;height:48px;border-radius:14px;color:var(--aqua-light);
  background:linear-gradient(150deg,rgba(0,194,203,.18),rgba(27,79,216,.16));
  border:1px solid rgba(0,194,203,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 18px -10px rgba(0,194,203,.5);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .35s,border-color .35s,box-shadow .35s;
}
.ht-ico svg{width:23px;height:23px}
.ht-stat:hover .ht-ico{
  transform:scale(1.1) rotate(-5deg);color:#fff;border-color:rgba(0,194,203,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -8px rgba(0,194,203,.7);
}
.ht-text{display:flex;flex-direction:column;line-height:1}
.ht-num{
  font-family:"Archivo",sans-serif;font-weight:900;font-size:1.85rem;letter-spacing:-.03em;
  white-space:nowrap;line-height:1;
  /* animated number: soft aqua sheen sweeping across white glyphs */
  background:linear-gradient(100deg,#fff 0%,#fff 38%,var(--aqua-light) 50%,#fff 62%,#fff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:htNumShine 7s linear infinite;
}
.ht-num--word{font-size:1.18rem;letter-spacing:-.01em}
@keyframes htNumShine{0%{background-position:120% 0}100%{background-position:-120% 0}}
.ht-stat:hover .ht-num{filter:drop-shadow(0 2px 14px rgba(77,221,228,.5))}
.ht-lbl{
  margin-top:.4rem;font-size:.78rem;font-weight:500;color:rgba(255,255,255,.55);
  white-space:nowrap;letter-spacing:.01em;transition:color .3s;
}
.ht-stat:hover .ht-lbl{color:rgba(255,255,255,.9)}
/* elegant glowing separator between cards */
.ht-sep{
  align-self:center;width:2px;height:30px;flex-shrink:0;margin:0 1.35rem;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(0,194,203,.65),transparent);
  box-shadow:0 0 10px rgba(0,194,203,.45);
}

@media(max-width:600px){
  .hero-ticker{padding:1.7rem .2rem 1.1rem}
  .ht-stat{gap:.8rem;padding:.85rem 1.15rem;border-radius:15px}
  .ht-num{font-size:1.55rem}
  .ht-num--word{font-size:1.05rem}
  .ht-sep{margin:0 1rem;height:26px}
  .ht-ico{width:42px;height:42px}.ht-ico svg{width:20px;height:20px}
}

/* ─────────────────────────────────────────────────────────────
   (3) OUR EQUIPMENT — premium product showcase
   Replaces the old navy-band card. New markup:
   .equip-card > .equip-media(.equip-badge,.equip-media-frame>img)
              + .equip-card-body(h3,.equip-desc,.equip-chips,.equip-btn)
   ───────────────────────────────────────────────────────────── */
.equip-grid{grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2vw,2rem);align-items:stretch}

.equip-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:24px;
  border:1px solid rgba(10,22,40,.07);
  box-shadow:0 2px 10px rgba(10,22,40,.05),0 20px 44px -26px rgba(10,22,40,.28);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .45s;
}
/* premium gradient border-glow + soft top sheen that lights up on hover */
.equip-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(140deg,rgba(27,79,216,.55),rgba(0,194,203,.45) 55%,transparent 82%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s}
.equip-card:hover{
  transform:translateY(-9px);
  border-color:rgba(27,79,216,.14);
  box-shadow:0 10px 24px rgba(10,22,40,.08),0 40px 72px -30px rgba(27,79,216,.4);
}
.equip-card:hover::before{opacity:1}

/* Media area — bigger, uniform height, soft-blue backdrop, ground shadow */
.equip-media{
  position:relative;height:clamp(196px,20vw,232px);
  background:linear-gradient(160deg,#fdfeff 0%,#eef3fb 60%,#e6eefb 100%);
  overflow:hidden;
}
/* animated lighting sheen */
.equip-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 70% 0%,rgba(0,194,203,.18),transparent 60%);
  transition:opacity .5s}
.equip-card:hover .equip-media::before{opacity:1}
/* soft shadow beneath the equipment so it never floats */
.equip-media::after{content:"";position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  width:62%;height:26px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(10,22,40,.22),transparent 70%);
  filter:blur(3px);transition:width .5s,opacity .5s}
.equip-card:hover .equip-media::after{width:70%;opacity:.9}
.equip-media-frame{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:1.35rem 1.35rem 1.6rem}
.equip-media-frame img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 8px 18px rgba(10,22,40,.14));
}
.equip-card:hover .equip-media-frame img{transform:scale(1.045)}

/* Badge */

/* Body */
.equip-card-body{
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;flex:1;
  padding:1.4rem 1.5rem 1.6rem;
}
.equip-card-body h3{color:var(--navy);font-size:1.16rem;line-height:1.22;letter-spacing:-.01em;margin:0}
.equip-desc{color:var(--grey-dark);font-size:.88rem;line-height:1.55;margin:0}
.equip-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.equip-chip{
  display:inline-flex;align-items:center;
  padding:.32em .7em;border-radius:100px;
  font-family:"Space Mono",monospace;font-size:.68rem;font-weight:400;letter-spacing:.01em;
  color:var(--navy);background:var(--slate);
  border:1px solid rgba(27,79,216,.14);transition:background .3s,border-color .3s,color .3s}
.equip-card:hover .equip-chip{background:var(--slate-mid);border-color:rgba(27,79,216,.24)}

/* CTA — always tappable; arrow slides into view on hover */
.equip-btn{
  margin-top:auto;width:100%;justify-content:center;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.82rem 1.25rem;border-radius:100px;
  font-family:"Inter",sans-serif;font-size:.92rem;font-weight:600;
  color:#fff;border:1.5px solid transparent;
  background-image:linear-gradient(120deg,var(--royal),var(--royal-light));
  box-shadow:0 8px 22px -10px rgba(27,79,216,.55);
  transition:background-image .35s,transform .3s,box-shadow .3s;
}
.equip-btn svg{width:1.05em;height:1.05em;opacity:0;transform:translateX(-6px);
  transition:opacity .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.equip-card:hover .equip-btn{
  background-image:linear-gradient(120deg,var(--royal),var(--aqua));
  transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(27,79,216,.6);
}
.equip-card:hover .equip-btn svg,
.equip-btn:focus-visible svg{opacity:1;transform:translateX(0)}
.equip-btn:focus-visible{outline:3px solid rgba(27,79,216,.5);outline-offset:3px}

@media(max-width:1080px){.equip-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.equip-grid{grid-template-columns:1fr}}

/* ── Reduced motion for this pass ── */
@media(prefers-reduced-motion:reduce){
  .hero-ticker-track{animation:none !important}
  .ht-num{animation:none !important;background-position:0 0}

  .equip-card:hover{transform:none}
  .equip-card:hover .equip-media-frame img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — UI/UX ENHANCEMENT LAYER  (additive, non-destructive)
   Sections: (1) Interactive Gallery + Lightbox  (2) Story photo collage
             (3) Mission / Vision feature blocks  (4) Core Value image tiles
   All classes are namespaced (.ka-*, .mv-*, .cv-*) to avoid collisions with
   existing selectors. Uses the established --navy/--royal/--aqua/--ember tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (1) INTERACTIVE IMAGE GALLERY ─────────────────────────────────────── */
.ka-gallery-section{position:relative}
.ka-gallery{
  display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,minmax(0,1fr));
  grid-template-areas:
    "a a b c"
    "a a b d"
    "e f f g"
    "e f f h";
  min-height:660px;
}
.ka-tile{
  position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;
  border-radius:var(--r-md);background:var(--navy-mid);
  box-shadow:var(--shadow-card);
  transition:box-shadow .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.ka-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);transition:transform .7s cubic-bezier(.22,1,.36,1),filter .5s ease;
}
.ka-tile-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,0) 38%,rgba(10,22,40,.35) 62%,rgba(10,22,40,.86) 100%);
  opacity:.85;transition:opacity .45s ease;
}
.ka-tile-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;gap:.15rem;
  padding:1rem 1.1rem;color:#fff;text-align:left;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;line-height:1.2;
  transform:translateY(6px);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s ease;
}
.ka-tile-kicker{
  font-family:"Space Mono",monospace;font-weight:700;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--aqua-light);
}
.ka-tile-zoom{
  position:absolute;top:.85rem;right:.85rem;z-index:3;pointer-events:none;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,194,203,.16);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);color:#fff;
  transform:scale(.6) rotate(-25deg);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s ease,background .3s ease;
}
.ka-tile-zoom svg{width:18px;height:18px}
/* hover / keyboard-focus state */
.ka-tile:hover,.ka-tile:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-hover);outline:none}
.ka-tile:hover img,.ka-tile:focus-visible img{transform:scale(1.09)}
.ka-tile:hover .ka-tile-scrim,.ka-tile:focus-visible .ka-tile-scrim{opacity:1}
.ka-tile:hover .ka-tile-cap,.ka-tile:focus-visible .ka-tile-cap{transform:none;opacity:1}
.ka-tile:hover .ka-tile-zoom,.ka-tile:focus-visible .ka-tile-zoom{transform:none;opacity:1}
.ka-tile:focus-visible{box-shadow:0 0 0 3px var(--aqua),var(--shadow-hover)}
/* feature tiles show caption at rest for editorial rhythm */
.ka-tile--a .ka-tile-cap,.ka-tile--f .ka-tile-cap{opacity:1;transform:none}
.ka-tile--a .ka-tile-cap{font-size:1.18rem}

/* tablet */
@media(max-width:860px){
  .ka-gallery{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:none;grid-auto-rows:150px;min-height:0;
    grid-template-areas:
      "a a" "a a" "b e" "f f" "f f" "c d" "g h";
  }
}
/* mobile */
@media(max-width:520px){
  .ka-gallery{grid-template-columns:1fr;grid-auto-rows:220px;grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h"}
  .ka-tile-cap{opacity:1;transform:none}
  .ka-tile-scrim{opacity:1}
}

/* ── Lightbox ──────────────────────────────────────────────────────────── */
.ka-lightbox{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.ka-lightbox[hidden]{display:none}
.ka-lightbox-backdrop{position:absolute;inset:0;background:rgba(6,14,26,.92);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s ease}
.ka-lightbox.open .ka-lightbox-backdrop{opacity:1}
.ka-lb-stage{position:relative;z-index:1;max-width:1100px;width:100%;display:flex;flex-direction:column;align-items:center;
  transform:scale(.94);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.ka-lightbox.open .ka-lb-stage{transform:none;opacity:1}
.ka-lb-img{max-width:100%;max-height:78vh;border-radius:var(--r-md);box-shadow:0 30px 80px rgba(0,0,0,.6);display:block;background:var(--navy-mid)}
.ka-lb-cap{margin-top:1rem;text-align:center;color:rgba(255,255,255,.85);font-size:.95rem;display:flex;flex-direction:column;gap:.35rem;max-width:640px}
.ka-lb-count{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.15em;color:var(--aqua)}
.ka-lb-btn{position:absolute;z-index:3;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:50%;
  backdrop-filter:blur(4px);transition:background .25s ease,transform .25s ease}
.ka-lb-btn:hover{background:var(--royal);transform:scale(1.06)}
.ka-lb-btn:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.ka-lb-btn svg{width:24px;height:24px}
.ka-lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);width:48px;height:48px}
.ka-lb-prev,.ka-lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px}
.ka-lb-prev{left:clamp(.5rem,3vw,2rem)}
.ka-lb-next{right:clamp(.5rem,3vw,2rem)}
.ka-lb-prev:hover,.ka-lb-next:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:640px){
  .ka-lb-prev,.ka-lb-next{width:44px;height:44px;top:auto;bottom:1rem;transform:none}
  .ka-lb-prev{left:1rem}.ka-lb-next{right:1rem}
  .ka-lb-prev:hover,.ka-lb-next:hover{transform:scale(1.06)}
  .ka-lb-img{max-height:64vh}
}

/* ── (2) STORY PHOTO COLLAGE (replaces animated SVG drum) ──────────────── */
.ka-story-visual{position:relative;padding-bottom:2.2rem;padding-right:1.6rem}
.ka-story-primary{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/11;
  box-shadow:0 24px 60px rgba(10,22,40,.28)}
.ka-story-primary img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.ka-story-visual:hover .ka-story-primary img{transform:scale(1.04)}
.ka-story-inset{position:absolute;right:0;bottom:0;width:46%;max-width:230px;margin:0;
  border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;border:5px solid #fff;
  box-shadow:0 18px 40px rgba(10,22,40,.32);will-change:transform}
.ka-story-inset img{width:100%;height:100%;object-fit:cover;display:block}
.ka-story-tag{position:absolute;left:1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  padding:.5em 1em;border-radius:100px;background:rgba(10,22,40,.68);backdrop-filter:blur(6px);
  color:#fff;font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.05em}
.ka-story-dot{width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 0 rgba(0,194,203,.6);animation:kaDot 2.4s infinite}
@keyframes kaDot{0%{box-shadow:0 0 0 0 rgba(0,194,203,.55)}70%{box-shadow:0 0 0 8px rgba(0,194,203,0)}100%{box-shadow:0 0 0 0 rgba(0,194,203,0)}}
.ka-story-badge{position:absolute;left:-.4rem;top:1.4rem;z-index:2;display:flex;flex-direction:column;line-height:1.1;
  padding:.7rem 1.1rem;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--ember),var(--ember-light));
  color:#fff;box-shadow:0 12px 30px rgba(255,107,53,.35);transform:rotate(-2deg)}
.ka-story-badge strong{font-family:"Archivo",sans-serif;font-size:1rem;font-weight:800}
.ka-story-badge span{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
/* graceful fallback if the primary image fails to load */
.ka-story-visual.img-fallback .ka-story-primary{background:linear-gradient(135deg,var(--navy),var(--navy-mid))}
@media(max-width:920px){.ka-story-inset{max-width:180px}}

/* ── (3) MISSION / VISION FEATURE BLOCKS ──────────────────────────────── */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2rem)}
@media(max-width:820px){.mv-grid{grid-template-columns:1fr}}
.mv-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(1.9rem,3.5vw,2.75rem);
  background:linear-gradient(150deg,var(--navy-mid),var(--navy));color:#fff;
  border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow-card);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.mv-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(10,22,40,.4)}
.mv-card .eyebrow{color:var(--aqua)}
.mv-card h3{margin:.55rem 0 0;font-size:clamp(1.35rem,2.4vw,1.75rem);color:#fff}
.mv-lead{margin-top:1rem;color:rgba(255,255,255,.74);font-size:.98rem}
.mv-accent{position:absolute;left:0;top:0;height:4px;width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.mv-card.visible .mv-accent,.mv-card:hover .mv-accent{transform:scaleX(1)}
.mv-card--mission .mv-accent{background:linear-gradient(90deg,var(--aqua),var(--royal))}
.mv-card--vision .mv-accent{background:linear-gradient(90deg,var(--ember),var(--ember-light))}
.mv-watermark{position:absolute;right:-18px;bottom:-18px;width:150px;height:150px;opacity:.06;pointer-events:none;
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.mv-watermark svg{width:100%;height:100%}
.mv-card:hover .mv-watermark{transform:rotate(12deg) scale(1.08);opacity:.1}
.mv-icon{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:1.1rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:var(--transition)}
.mv-icon svg{width:28px;height:28px;transition:var(--transition)}
.mv-card--mission .mv-icon svg{color:var(--aqua-light)}
.mv-card--vision .mv-icon svg{color:var(--ember-light)}
.mv-card--mission:hover .mv-icon{background:linear-gradient(135deg,var(--aqua),var(--royal));transform:rotate(-5deg) scale(1.05)}
.mv-card--vision:hover .mv-icon{background:linear-gradient(135deg,var(--ember),var(--ember-light));transform:rotate(-5deg) scale(1.05)}
.mv-card:hover .mv-icon svg{color:#fff}
.mv-points{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.mv-points li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:rgba(255,255,255,.82)}
.mv-tick{flex-shrink:0;width:22px;height:22px;border-radius:50%;position:relative;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18)}
.mv-tick::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mv-card--mission .mv-tick::after{border-color:var(--aqua)}
.mv-card--vision .mv-tick::after{border-color:var(--ember-light)}

/* ── (4) CORE VALUE IMAGE TILES — full-image cards ────────────────────────
   4:3 marketing tiles shown whole (object-fit:cover on a 4:3 box → no crop at
   rest). Render-safe plain <img>. Equal heights via grid stretch + flex.   */
.cv-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:clamp(1.25rem,2vw,1.6rem);align-items:stretch}
@media(max-width:920px){.cv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cv-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

.cv-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:18px;background:#fff;border:1px solid rgba(10,22,40,.07);
  box-shadow:0 2px 8px rgba(10,22,40,.06),0 14px 34px rgba(10,22,40,.10);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .4s ease;
}
.cv-card:hover{transform:translateY(-8px);
  box-shadow:0 6px 16px rgba(10,22,40,.10),0 26px 56px rgba(27,79,216,.22);border-color:rgba(27,79,216,.28)}

.cv-media{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-mid) 60%,#16315f 100%)}
.cv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transform:scale(1);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.cv-card:hover .cv-media img{transform:scale(1.06)}
/* subtle gradient overlay for depth + hand-off into the body */
.cv-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(10,22,40,.18) 100%);transition:opacity .4s ease}
/* animated royal→aqua accent seam, draws in on hover */
.cv-media::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--royal),var(--aqua));transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.cv-card:hover .cv-media::before{transform:scaleX(1)}

.cv-body{flex:1;display:flex;flex-direction:column;padding:1.4rem 1.5rem 1.6rem;
  background:linear-gradient(180deg,rgba(244,247,255,.55),#fff 60%);transition:background .4s ease}
.cv-card:hover .cv-body{background:linear-gradient(180deg,rgba(232,238,255,.85),#fff 60%)}
.cv-body h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.18rem;line-height:1.25;
  color:var(--navy);margin:0 0 .5rem;transition:color .3s ease}
.cv-card:hover .cv-body h4{color:var(--royal)}
.cv-body p{font-size:.9rem;line-height:1.65;color:var(--grey-dark);margin:0}

/* entrance — staggered fade-up; `backwards` fill so hover transform stays free */
.cv-card.reveal{opacity:0}
.cv-card.reveal.visible{opacity:1;animation:cvIn .7s cubic-bezier(.22,1,.36,1) backwards}
.cv-card:nth-child(3n/**/+2).reveal.visible{animation-delay:.08s}
.cv-card:nth-child(3n).reveal.visible{animation-delay:.16s}
@keyframes cvIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
/* touch devices: reveal gallery captions without hover */
@media(hover:none){ .ka-tile-cap{opacity:1;transform:none} }

/* ── Reduced-motion: keep it calm ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .ka-tile img,.ka-story-primary img,.cv-media img,.cv-media::after,.cv-media::before,.cv-body,.ka-lb-stage,.ka-lightbox-backdrop,
  .ka-tile,.mv-card,.cv-card,.mv-icon,.ka-tile-zoom{transition:none !important;animation:none !important}
  .cv-card.reveal,.cv-card.reveal.visible{opacity:1 !important;transform:none !important}
  .ka-story-dot{animation:none !important}
  [data-parallax]{transform:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — UI/UX ENHANCEMENT LAYER · PART 2  (additive, non-destructive)
   Sections: (5) Our Services  (6) Why Kingstar  (7) Milestones timeline
             (8) Leadership showcase
   Namespaced .svc-* / .wc-* / .mtl-* / .lead-* — no collisions with existing CSS.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (5) OUR SERVICES — image-forward cards ───────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;
  border:1px solid rgba(10,22,40,.06);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.svc-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:3;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--royal),var(--aqua));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--navy-mid)}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.svc-card:hover .svc-media img{transform:scale(1.1)}
.svc-media-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,.05) 40%,rgba(10,22,40,.5) 100%);opacity:.8;transition:opacity .4s ease}
.svc-card:hover .svc-media-scrim{opacity:1}
.svc-num{position:absolute;top:.8rem;left:.9rem;z-index:2;font-family:"Space Mono",monospace;font-weight:700;
  font-size:.72rem;color:#fff;background:rgba(10,22,40,.55);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:.25em .7em}
.svc-cat{position:absolute;bottom:.85rem;left:.9rem;z-index:2;font-family:"Space Mono",monospace;font-weight:700;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua-light);
  background:rgba(0,194,203,.14);border:1px solid rgba(0,194,203,.35);border-radius:100px;padding:.3em .8em}
.svc-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.svc-body h3{font-size:1.18rem;color:var(--navy);margin:0 0 .5rem}
.svc-body p{font-size:.9rem;color:var(--grey-dark);line-height:1.65;margin:0 0 1rem}
.svc-link{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:"Space Mono",monospace;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--royal);transition:gap .3s ease,color .3s ease}
.svc-link svg{width:14px;height:14px;transition:transform .3s ease}
.svc-card:hover .svc-link{gap:.65rem;color:var(--aqua)}
.svc-card:hover .svc-link svg{transform:translateX(3px)}
/* services sit on a dark section — keep white cards legible */
.section--dark .svc-body h3{color:var(--navy)}

/* ── (6) WHY KINGSTAR — counters + alternating blocks ─────────────────── */
.wc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);margin-bottom:clamp(2.5rem,5vw,4rem)}
@media(max-width:680px){.wc-stats{grid-template-columns:repeat(2,1fr)}}
.wc-stat{padding:clamp(1.5rem,3vw,2.2rem) 1.25rem;text-align:center;position:relative;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));transition:background .35s ease}
.wc-stat:hover{background:linear-gradient(135deg,var(--navy-mid),#12294f)}
.wc-stat .stat-num{color:#fff;font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2rem,4vw,2.9rem);line-height:1;
  background:linear-gradient(90deg,#fff,var(--aqua-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wc-stat-lbl{color:rgba(255,255,255,.6);font-size:.82rem;margin-top:.5rem}

/* on desktop, flipped rows put the image on the right */

/* ── (7) MILESTONES — center-rail interactive timeline ────────────────── */
.mtl{position:relative;max-width:940px;margin:0 auto;padding:1rem 0}
/* mobile: single left-aligned rail */
@media(max-width:720px){
  .mtl{max-width:100%}
}

/* ── (8) LEADERSHIP — executive profile cards ─────────────────────────── */
.lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:1000px){.lead-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.lead-grid{grid-template-columns:1fr}}
.lead-card{position:relative;overflow:hidden;background:#fff;border-radius:var(--r-lg);padding:1.6rem;
  box-shadow:var(--shadow-card);border:1px solid rgba(10,22,40,.06);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.lead-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;z-index:1;transform:scaleX(0);transform-origin:left;
  background:var(--lead-accent,var(--royal));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lead-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.lead-card:hover::before,.lead-card.visible::before{transform:scaleX(1)}
.lead-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.lead-avatar{flex-shrink:0;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;position:relative;
  color:#fff;background:linear-gradient(135deg,var(--lead-accent,var(--royal)),var(--navy-mid))}
.lead-avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--lead-accent,var(--royal));opacity:.3;transition:opacity .4s ease,transform .4s ease}
.lead-card:hover .lead-avatar::after{opacity:.7;transform:scale(1.05)}
.lead-avatar svg{width:30px;height:30px}
.lead-heading .eyebrow{color:var(--lead-accent,var(--royal))}
.lead-role{font-size:1.05rem;color:var(--navy);margin:.25rem 0 0;line-height:1.2}
.lead-name{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;color:var(--navy);margin:.25rem 0 0;line-height:1.2}
.lead-tag{display:inline-block;font-family:"Space Mono",monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.03em;color:var(--grey-dark);background:var(--slate);border:1px solid rgba(10,22,40,.07);
  border-radius:100px;padding:.35em .8em;margin-bottom:.9rem}
.lead-bio-wrap{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.lead-card.open .lead-bio-wrap{max-height:280px;opacity:1}
.lead-bio{font-size:.875rem;color:var(--grey-dark);line-height:1.7;margin:0 0 1rem}
.lead-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding-top:.9rem;border-top:1px solid rgba(10,22,40,.07)}
.lead-more{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;cursor:pointer;
  font-family:"Space Mono",monospace;font-size:.74rem;font-weight:700;color:var(--royal);padding:0;transition:color .3s ease}
.lead-more svg{width:14px;height:14px;transition:transform .35s ease}
.lead-more:hover{color:var(--aqua)}
.lead-card.open .lead-more svg{transform:rotate(180deg)}
.lead-more:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:4px}
.lead-social{display:flex;gap:.5rem}
.lead-social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--grey-dark);background:var(--slate);border:1px solid rgba(10,22,40,.07);transition:var(--transition)}
.lead-social a svg{width:16px;height:16px}
.lead-social a:hover{background:var(--lead-accent,var(--royal));color:#fff;transform:translateY(-2px)}
.lead-social a:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
/* certifications strip */
.lead-certs{margin-top:2.5rem;text-align:center;padding:1.75rem;border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--shadow-card);border:1px solid rgba(10,22,40,.06)}
.lead-cert-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:center}
.lead-cert-list li{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--grey-dark)}
.lead-cert-list svg{width:18px;height:18px;color:var(--aqua);flex-shrink:0}

/* ── Reduced-motion: keep it calm ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .svc-card,.svc-media img,
  .lead-card,.lead-avatar::after,.svc-link svg,.lead-more svg{transition:none !important;animation:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — UI/UX ENHANCEMENT LAYER  (additive, non-destructive)
   (1) Product Showcase prominence  (2) NAP contact cards
   (3) Why Kingstar image cards      (4) How It Works journey
   Namespaced .nap-* / .wk-* / .jny-*; equipment uses higher-specificity overrides.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (1) PRODUCT SHOWCASE — show each machine whole, make it prominent ──── */
/* Taller stage + object-fit:contain guarantees no machine is ever cropped,
   and the larger media area gives the equipment real visual weight.        */
#equipment .equip-media{
  height:clamp(260px,26vw,340px);
  background:
    radial-gradient(120% 90% at 50% 8%,#ffffff 0%,#f2f6fd 46%,#e6eefb 100%);
}
#equipment .equip-media-frame{padding:1.25rem 1.25rem 1.9rem}
#equipment .equip-media-frame img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 14px 26px rgba(10,22,40,.18));
}
/* subtle "pedestal" the machine stands on */
#equipment .equip-media::after{
  width:66%;height:30px;bottom:16px;
  background:radial-gradient(ellipse at center,rgba(10,22,40,.24),transparent 72%);
}
#equipment .equip-card:hover .equip-media-frame img{transform:scale(1.06) translateY(-2px)}
/* keep the grid balanced as it scales down */
@media(max-width:1080px){#equipment .equip-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#equipment .equip-grid{grid-template-columns:1fr}
  #equipment .equip-media{height:clamp(280px,70vw,360px)}}

/* soft tinted wash (fallback for no color-mix) */

/* reuse existing animated .cc-icon glyphs, re-tinted per card */

/* ── (3) WHY KINGSTAR — full-image feature cards ──────────────────────── */
/* Square marketing tiles shown whole via object-fit:contain → never cropped,
   no distortion. Namespaced .wk-*; used only inside #why-kingstar.        */
.wk-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,2.2vw,1.75rem);align-items:stretch;
}
@media(max-width:920px){.wk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wk-grid{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}

.wk-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:#fff;
  border:1px solid rgba(10,22,40,.07);box-shadow:var(--shadow-card);
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s cubic-bezier(.22,1,.36,1),
             border-color .4s ease;
}
.wk-card:hover{
  transform:translateY(-8px);box-shadow:var(--shadow-hover);
  border-color:rgba(27,79,216,.28);
}

/* MEDIA — square stage; whole image floated on a soft brand-tinted wash */
.wk-media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(155deg,var(--slate) 0%,var(--slate-mid) 100%);
}
.wk-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block;
  transform:scale(1);transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.wk-card:hover .wk-media img{transform:scale(1.055)}
/* gradient accent seam between image and body; draws in on hover (signature) */
.wk-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--royal),var(--aqua));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.wk-card:hover .wk-media::after{transform:scaleX(1)}

/* BODY — clean hierarchy, subtle wash that warms on hover */
.wk-body{
  display:flex;flex-direction:column;flex:1;padding:1.5rem 1.4rem 1.65rem;
  background:linear-gradient(180deg,rgba(244,247,255,.5),#fff 62%);
  transition:background .4s ease;
}
.wk-card:hover .wk-body{background:linear-gradient(180deg,rgba(232,238,255,.8),#fff 62%)}
.wk-body h4{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.16rem;line-height:1.2;
  color:var(--navy);margin:0 0 .5rem;transition:color .3s ease;
}
.wk-card:hover .wk-body h4{color:var(--royal)}
.wk-body p{font-size:.9rem;color:var(--grey-dark);line-height:1.62;margin:0}

/* ENTRANCE — staggered fade/rise on scroll-in.  `backwards` fill only, so the
   animation never locks transform and the hover lift stays responsive.     */
.wk-card.reveal{opacity:0}
.wk-card.reveal.visible{opacity:1;animation:wkIn .7s cubic-bezier(.22,1,.36,1) backwards}
.wk-card:nth-child(3n/**/+2).reveal.visible{animation-delay:.09s}
.wk-card:nth-child(3n).reveal.visible{animation-delay:.18s}
@keyframes wkIn{from{opacity:0;transform:translateY(34px) scale(.965)}to{opacity:1;transform:none}}
@media(max-width:920px){
  .wk-card:nth-child(3n/**/+2).reveal.visible,
  .wk-card:nth-child(3n).reveal.visible{animation-delay:0s}
  .wk-card:nth-child(even).reveal.visible{animation-delay:.09s}
}

/* ── (4) HOW IT WORKS — interactive journey ───────────────────────────── */
#process{background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%)}
.jny{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,1.75rem);padding-top:2.75rem}
.jny-line{position:absolute;top:calc(2.75rem + 26px);left:12.5%;right:12.5%;height:3px;z-index:0;
  background:rgba(27,79,216,.14);border-radius:3px;overflow:hidden}
.jny-line-fill{position:absolute;left:0;top:0;height:100%;width:var(--jp,0%);border-radius:3px;
  background:linear-gradient(90deg,var(--royal),var(--aqua));box-shadow:0 0 12px rgba(0,194,203,.5);
  transition:width .6s cubic-bezier(.22,1,.36,1)}
.jny-step{position:relative;z-index:1;appearance:none;-webkit-appearance:none;background:transparent;border:0;
  padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;
  align-items:center;gap:1rem}
.jny-node{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:#fff;border:3px solid rgba(27,79,216,.2);box-shadow:0 4px 14px rgba(10,22,40,.1);transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.jny-node-num{font-family:"Space Mono",monospace;font-weight:700;font-size:.85rem;color:var(--royal);transition:color .3s}
.jny-step.active .jny-node,.jny-step:hover .jny-node{
  background:linear-gradient(135deg,var(--royal),var(--aqua));border-color:transparent;transform:scale(1.12);
  box-shadow:0 10px 28px rgba(27,79,216,.5)}
.jny-step.active .jny-node-num,.jny-step:hover .jny-node-num{color:#fff}
.jny-card{width:100%;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 2px 8px rgba(10,22,40,.06),0 14px 34px rgba(10,22,40,.10);
  border:1px solid rgba(10,22,40,.06);display:flex;flex-direction:column;flex:1;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .4s ease}
.jny-step.active .jny-card,.jny-step:hover .jny-card{transform:translateY(-8px);
  box-shadow:0 6px 16px rgba(10,22,40,.10),0 26px 56px rgba(27,79,216,.22);border-color:rgba(27,79,216,.30)}
.jny-media{position:relative;aspect-ratio:16/10;overflow:hidden;display:block}
.jny-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.03);
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.jny-step.active .jny-media img,.jny-step:hover .jny-media img{transform:scale(1.09)}
.jny-media-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,40,0) 55%,rgba(10,22,40,.35) 100%)}
/* animated royal→aqua accent seam on the active / hovered step */
.jny-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--royal),var(--aqua));transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.jny-step.active .jny-media::after,.jny-step:hover .jny-media::after{transform:scaleX(1)}
.jny-text{display:block;flex:1;padding:1.25rem 1.3rem 1.5rem;
  background:linear-gradient(180deg,rgba(244,247,255,.55),#fff 55%);transition:background .4s ease}
.jny-step.active .jny-text,.jny-step:hover .jny-text{background:linear-gradient(180deg,rgba(232,238,255,.85),#fff 55%)}
.jny-label{font-family:"Space Mono",monospace;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#0C7379;display:block;margin-bottom:.3rem}
.jny-h4{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.1rem;color:var(--navy);margin-bottom:.45rem}
.jny-p{display:block;font-size:.85rem;color:var(--grey-dark);line-height:1.6}
/* vertical journey on smaller screens */
@media(max-width:820px){
  .jny{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:2.5rem}
  .jny-line{left:26px;top:0;bottom:0;right:auto;width:3px;height:auto}
  .jny-line-fill{width:100%!important;height:var(--jp,0%);top:0;left:0;transition:height .6s cubic-bezier(.22,1,.36,1)}
  .jny-step{flex-direction:row;align-items:flex-start;gap:1.1rem;padding-bottom:1.75rem}
  .jny-node{position:absolute;left:-2.5rem;margin-left:0}
  .jny-card{flex:1}
}
@media(max-width:420px){.jny-media{aspect-ratio:16/9}}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  #equipment .equip-card:hover .equip-media-frame img,.wk-card,.wk-media img,.wk-media::after,.wk-body,.jny-card,.jny-media img,.jny-media::after,.jny-text,.jny-node,.jny-line-fill{transition:none!important;animation:none!important}
  .wk-card.reveal,.wk-card.reveal.visible{opacity:1!important;transform:none!important}
}

/* ══════════════════════════════════════════════════════════════════
   NAP REDESIGN  —  namespaced .napr-*   (additive; leaves .nap-* intact)
   Layout mirrors the reference screenshot: showroom photo + business-hours
   block on the left, three contact cards with buttons seated in a gap
   beneath each card on the right. Skinned to Kingstar's royal accent.
   Uses existing tokens: --navy --navy-mid --royal --royal-light --aqua
   --grey --grey-dark --slate --r-sm --r-md --shadow-card --shadow-hover
   --transition. No new tokens required.
   ══════════════════════════════════════════════════════════════════ */
.napr-layout{
  display:grid;
  grid-template-columns:minmax(280px,340px) 1fr;
  gap:clamp(1.5rem,3vw,2.25rem);
  align-items:stretch;
}

/* ── Left column: showroom image + hours block ── */
.napr-aside{display:flex;flex-direction:column;gap:1.1rem}
.napr-photo{
  position:relative;border-radius:18px;overflow:hidden;
  border:4px solid var(--royal);aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,#16305f 100%);
  box-shadow:0 2px 10px rgba(10,22,40,.05),0 12px 30px rgba(10,22,40,.07);
}
.napr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.napr-aside:hover .napr-photo img{transform:scale(1.05)}

.napr-hours{
  display:flex;flex-direction:column;flex:1;
  border:1px solid rgba(10,22,40,.1);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 2px 10px rgba(10,22,40,.05),0 12px 30px rgba(10,22,40,.07);
}
.napr-hours-bar{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(120deg,var(--royal),var(--royal-light));
  color:#fff;padding:.85rem 1.35rem;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.napr-live-dot{width:9px;height:9px;border-radius:50%;background:var(--aqua);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(0,194,203,.6);animation:naprPulse 2.2s infinite}
@keyframes naprPulse{0%{box-shadow:0 0 0 0 rgba(0,194,203,.55)}70%{box-shadow:0 0 0 9px rgba(0,194,203,0)}100%{box-shadow:0 0 0 0 rgba(0,194,203,0)}}
.napr-hours-body{padding:1.2rem 1.35rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.napr-hours-row{display:flex;flex-direction:column;gap:.15rem}
.napr-hours-day{font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.napr-hours-time{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.25rem;color:var(--navy);letter-spacing:-.01em}
.napr-hours-note{margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(10,22,40,.08);
  display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;line-height:1.4;color:var(--grey-dark)}
.napr-hours-note svg{width:16px;height:16px;color:var(--aqua);flex-shrink:0;margin-top:2px}

/* ── Right column: 3 contact cards, each with a button seated below ── */
.napr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.napr-col{display:flex;flex-direction:column;gap:.85rem}
.napr-card{
  position:relative;flex:1;overflow:hidden;
  background:#fff;border:1px solid rgba(10,22,40,.1);border-radius:18px;
  padding:1.55rem 1.5rem;box-shadow:0 2px 10px rgba(10,22,40,.05),0 12px 30px rgba(10,22,40,.07);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .4s ease;
}
.napr-card:hover{transform:translateY(-6px);box-shadow:0 6px 16px rgba(10,22,40,.09),0 22px 48px rgba(27,79,216,.18);border-color:rgba(27,79,216,.26)}
/* giant faded watermark glyph, bottom-right */
.napr-wm{position:absolute;right:-14px;bottom:-22px;z-index:0;pointer-events:none;
  width:150px;height:150px;color:var(--royal);opacity:.055;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.napr-card:hover .napr-wm{transform:scale(1.08) rotate(-6deg);opacity:.09}
.napr-card>*{position:relative;z-index:1}
/* flat line icon (no box), like the reference */
.napr-glyph{width:44px;height:44px;color:var(--royal);margin-bottom:.85rem;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.napr-card:hover .napr-glyph{transform:translateY(-2px) scale(1.06)}
.napr-label{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.2rem;color:var(--navy);
  letter-spacing:-.01em;margin:0}
.napr-rule{width:44px;height:3px;border-radius:3px;margin:.55rem 0 1rem;
  background:linear-gradient(90deg,var(--royal),var(--aqua));
  transform-origin:left;transition:width .4s ease}
.napr-card:hover .napr-rule{width:64px}
.napr-value{font-size:1.02rem;line-height:1.5;color:var(--grey-dark);font-style:normal;margin:0}
.napr-value strong{color:var(--navy);font-weight:600}
.napr-value--big{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.4rem;color:var(--navy);letter-spacing:-.02em}
.napr-value--email{color:var(--royal);font-weight:600;word-break:break-word}
.napr-sub{margin:.45rem 0 0;font-size:.85rem;line-height:1.4;color:var(--grey)}

/* button seated in the gap beneath each card (reference behaviour) */
.napr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  padding:1rem 1.25rem;border-radius:var(--r-sm);
  font-family:"Inter",sans-serif;font-size:.95rem;font-weight:600;
  color:#fff;background:var(--royal);border:2px solid var(--royal);cursor:pointer;
  transition:var(--transition);text-decoration:none;
}
.napr-btn svg{width:1.15em;height:1.15em;flex-shrink:0;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.napr-btn:hover{background:var(--royal-light);border-color:var(--royal-light);
  transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.napr-btn:hover .napr-ico-shift{transform:translateX(3px)}
.napr-btn:hover .napr-ico-lift{transform:translate(2px,-2px)}
.napr-btn:focus-visible{outline:3px solid rgba(27,79,216,.45);outline-offset:3px}

/* ── Responsive ── */
@media(max-width:980px){
  .napr-layout{grid-template-columns:1fr}
  .napr-photo{aspect-ratio:16/7}
}
@media(max-width:760px){
  .napr-cards{grid-template-columns:1fr;gap:1.75rem}
  .napr-photo{aspect-ratio:16/8}
}
@media(prefers-reduced-motion:reduce){
  .napr-card,.napr-wm,.napr-glyph,.napr-rule,.napr-btn,.napr-btn svg,.napr-photo img{transition:none!important}
  .napr-live-dot{animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════
   PDP ENHANCE  —  additive premium layer for product pages
   (.pdp-* namespace)  Reuses existing tokens; loads AFTER style.css.
   Adds: capacity/performance charts, sticky quote bar, gallery zoom,
   glass spec-highlight rail, refined micro-interactions. Non-destructive.
   ══════════════════════════════════════════════════════════════════ */

/* ── Gallery zoom polish (lightbox handles full view; this is hover depth) ── */

/* ── Capacity & Performance section ── */
.pdp-perf{--pdp-accent:var(--royal)}
.pdp-perf-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:stretch;margin-top:clamp(1.5rem,3vw,2.5rem)
}
@media(max-width:880px){.pdp-perf-grid{grid-template-columns:1fr}}

/* capacity chart card */
.pdp-chart{
  background:#fff;border:1px solid rgba(10,22,40,.08);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--shadow-card)
}
.pdp-chart h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;color:var(--navy);margin:0 0 .35rem}
.pdp-chart-sub{font-size:.85rem;color:var(--grey);margin:0 0 1.5rem}
.pdp-bar-row{display:flex;align-items:center;gap:1rem;margin:0 0 1.05rem}
.pdp-bar-row:last-child{margin-bottom:0}
.pdp-bar-lbl{flex:0 0 4.5rem;font-family:"Space Mono",monospace;font-weight:700;font-size:.9rem;color:var(--navy);text-align:right}
.pdp-bar-track{flex:1;height:34px;background:var(--slate);border-radius:999px;overflow:hidden;position:relative}
.pdp-bar-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--royal),var(--aqua));
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:.75rem;color:#fff;font-size:.72rem;font-weight:700;
  font-family:"Space Mono",monospace;letter-spacing:.03em;min-width:2.5rem
}
.pdp-perf.in-view .pdp-bar-fill{width:var(--w)}

/* performance stat tiles */
.pdp-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-content:start}
.pdp-stat{
  position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy),var(--navy-mid));
  border-radius:var(--r-md);padding:1.5rem 1.4rem;color:#fff;
  border:1px solid rgba(255,255,255,.06)
}
.pdp-stat::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;
  background:radial-gradient(circle,rgba(0,194,203,.28),transparent 70%);pointer-events:none}
.pdp-stat-num{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.9rem,4vw,2.5rem);
  line-height:1;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,var(--aqua-light));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pdp-stat-lbl{margin-top:.5rem;font-size:.82rem;color:rgba(255,255,255,.7);line-height:1.35}
.pdp-stat--wide{grid-column:1/-1;background:linear-gradient(120deg,var(--royal),var(--royal-light))}
.pdp-stat--wide::after{background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%)}

/* ── Sticky quote bar (appears after hero) ── */
.pdp-quotebar{
  position:fixed;left:50%;bottom:1.15rem;transform:translate(-50%,180%);
  z-index:120;display:flex;align-items:center;gap:1rem;max-width:calc(100% - 2rem);
  padding:.7rem .8rem .7rem 1.35rem;border-radius:999px;
  background:rgba(10,22,40,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px -12px rgba(10,22,40,.6);
  opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease
}
.pdp-quotebar.show{transform:translate(-50%,0);opacity:1}
.pdp-quotebar-txt{color:#fff;font-size:.9rem;font-weight:500;line-height:1.25}
.pdp-quotebar-txt b{font-weight:700}
.pdp-quotebar-txt span{display:block;font-size:.72rem;color:rgba(255,255,255,.6);font-weight:400}
.pdp-quotebar-actions{display:flex;gap:.5rem;flex-shrink:0}
.pdp-quotebar .pdp-qb-btn{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.62rem 1.15rem;border-radius:999px;font-size:.85rem;font-weight:600;
  text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease
}
.pdp-qb-btn--primary{background:var(--ember);color:#fff}
.pdp-qb-btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -6px rgba(255,107,53,.6)}
.pdp-qb-btn--ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.pdp-qb-btn--ghost:hover{background:rgba(255,255,255,.18)}
.pdp-qb-btn svg{width:1em;height:1em}
@media(max-width:560px){
  .pdp-quotebar{padding:.6rem .6rem .6rem 1rem;gap:.7rem;bottom:.75rem}
  .pdp-quotebar-txt span{display:none}
  .pdp-qb-btn--ghost{display:none}
}

@media(prefers-reduced-motion:reduce){
  .pdp-bar-fill,.pdp-quotebar{transition:none!important}
}

/* no-JS / print fallback: show capacity bars filled */
@media (scripting: none){.pdp-bar-fill{width:var(--w)!important}}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE EQUIPMENT — six-category layout (additive; #equipment-scoped
   so it outranks the earlier #equipment product-showcase overrides).
   3×2 grid; media bg follows each card's --equip-bg → seamless real
   photos; no boxy drop-shadow, no pedestal (photos are self-grounded).
   ══════════════════════════════════════════════════════════════════ */
#equipment .equip-grid--six{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.2vw,2rem);align-items:stretch}
#equipment .equip-grid--six .equip-media{background:var(--equip-bg,#fff);height:clamp(300px,27vw,360px)}
#equipment .equip-grid--six .equip-media::before{opacity:0}
#equipment .equip-grid--six .equip-card:hover .equip-media::before{opacity:.5}
#equipment .equip-grid--six .equip-media::after{display:none}
#equipment .equip-grid--six .equip-media-frame{display:flex;align-items:center;justify-content:center;padding:.5rem}
#equipment .equip-grid--six .equip-media-frame img{filter:none;width:100%;height:100%;object-fit:contain}
#equipment .equip-grid--six .equip-card:hover .equip-media-frame img{transform:scale(1.05) translateY(-2px)}
@media(max-width:1080px){#equipment .equip-grid--six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#equipment .equip-grid--six{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════
   INDUSTRIAL PAGE — REDESIGN COMPONENTS (namespace: iw-)
   ═══════════════════════════════════════════════════════════════════ */
.iw-tag-ember{background:linear-gradient(135deg,var(--ember),var(--ember-light));color:#fff}
.iw-tag-royal{background:linear-gradient(135deg,var(--royal),var(--royal-light));color:#fff}

/* 1 · EQUIPMENT OVERVIEW */

.iw-product-copy .eyebrow{margin-bottom:.35rem}

/* 2 · KEY FEATURES */
.iw-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:1rem}
@media(max-width:1080px){.iw-feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.iw-feat-grid{grid-template-columns:1fr}}
.iw-feat{background:#fff;border:1px solid rgba(10,22,40,.07);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1)}
.iw-feat:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.iw-feat-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#eef3fb}
.iw-feat-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.iw-feat:hover .iw-feat-media img{transform:scale(1.08)}
.iw-feat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,22,40,.28));opacity:0;transition:opacity .35s}
.iw-feat:hover .iw-feat-media::after{opacity:1}
.iw-feat-ic{position:absolute;right:.8rem;bottom:.8rem;z-index:2;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.92);color:var(--royal);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(10,22,40,.18);transition:transform .35s,background .35s,color .35s}
.iw-feat-ic svg{width:21px;height:21px}
.iw-feat:hover .iw-feat-ic{transform:translateY(-3px) rotate(-6deg);background:var(--royal);color:#fff}
.iw-feat-body{padding:1.15rem 1.25rem 1.4rem}
.iw-feat-kicker{display:inline-block;font-family:"Space Mono",monospace;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);background:rgba(255,107,53,.1);border-radius:100px;padding:.2rem .6rem;margin-bottom:.55rem}
.iw-feat-body h4{font-size:1.02rem;margin:0 0 .4rem;color:var(--navy);line-height:1.25}
.iw-feat-body p{font-size:.86rem;color:var(--grey-dark);line-height:1.6;margin:0}

/* 3 · MODEL LINEUP */
.iw-model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:1rem}
@media(max-width:820px){.iw-model-grid{grid-template-columns:1fr}}
.iw-model{background:#fff;border:1px solid rgba(10,22,40,.07);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.iw-model:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.iw-model-media{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#f1f6ff,#dfe9f8);display:flex;align-items:center;justify-content:center}
.iw-model-media img{width:100%;height:100%;object-fit:contain;padding:1.5rem;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.iw-model:hover .iw-model-media img{transform:scale(1.05)}
.iw-model-badge{position:absolute;top:1rem;left:1rem;font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.4rem .85rem;border-radius:100px;box-shadow:0 6px 18px rgba(10,22,40,.16)}
.iw-model-body{padding:1.6rem 1.75rem 1.9rem;display:flex;flex-direction:column;flex:1}
.iw-model-body h3{font-size:1.35rem;margin:0 0 .3rem;color:var(--navy)}
.iw-model-cap{font-family:"Space Mono",monospace;font-weight:700;color:var(--royal);font-size:.95rem;margin:0 0 1rem;letter-spacing:.02em}
.iw-model-spec{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.6rem}
.iw-model-spec li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--grey-dark);line-height:1.4}
.iw-model-spec svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--aqua)}
.iw-model-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem}
.iw-model-cta svg{width:15px;height:15px;transition:transform .3s}
.iw-model-cta:hover svg{transform:translateX(4px)}

/* 4 · TECHNICAL SPECIFICATIONS */

.iw-spec-scroll{overflow-x:auto}
.iw-spec-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.iw-spec-table thead th{background:var(--navy);color:#fff;padding:1rem 1.25rem;text-align:left;font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.iw-spec-table thead th:first-child{width:30%}

.iw-spec-table td{padding:.9rem 1.25rem;border-bottom:1px solid rgba(10,22,40,.07);color:var(--grey-dark);vertical-align:top}
.iw-spec-table td:first-child{font-weight:600;color:var(--navy)}
.iw-spec-table tbody tr{transition:background .2s}
.iw-spec-table tbody tr:hover{background:var(--slate)}
.iw-spec-table tbody tr:last-child td{border-bottom:none}
.iw-spec-table .mono{font-family:"Space Mono",monospace;font-size:.82rem;color:var(--navy)}
.iw-spec-table .iw-hl{color:var(--royal);font-weight:700}

.iw-acc-item{background:#fff;border:1px solid rgba(10,22,40,.08);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .3s}
.iw-acc-item:hover{box-shadow:var(--shadow-hover)}
.iw-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;cursor:pointer;padding:1.15rem 1.5rem;font-family:inherit;text-align:left}

.iw-acc-item.open .iw-acc-ic{transform:rotate(135deg);background:var(--royal);color:#fff}
.iw-acc-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}

.iw-spec-note{text-align:center;margin-top:2rem;font-size:.85rem;color:var(--grey)}
.iw-spec-note a{color:var(--royal);font-weight:600}

/* 5 · HIGHLIGHTS */
.iw-hl-acc{display:flex;flex-direction:column;gap:1rem;max-width:1000px;margin:0 auto}
.iw-hl-item{background:#fff;border:1px solid rgba(10,22,40,.08);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .35s,border-color .35s}
.iw-hl-item:hover{box-shadow:var(--shadow-hover)}
.iw-hl-item.open{border-color:rgba(27,79,216,.35)}
.iw-hl-btn{width:100%;display:flex;align-items:center;gap:1.1rem;background:none;border:none;cursor:pointer;padding:1.35rem 1.6rem;font-family:inherit;text-align:left}
.iw-hl-idx{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.5rem;color:var(--slate-mid);line-height:1;flex-shrink:0;transition:color .35s;width:2.2rem}
.iw-hl-item.open .iw-hl-idx,.iw-hl-btn:hover .iw-hl-idx{color:var(--ember)}
.iw-hl-head{flex:1;display:flex;flex-direction:column;gap:.15rem}
.iw-hl-title{font-weight:700;font-size:1.1rem;color:var(--navy);line-height:1.2}
.iw-hl-sub{font-size:.82rem;color:var(--grey)}
.iw-hl-chev{width:32px;height:32px;border-radius:50%;background:var(--slate);color:var(--royal);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s,background .35s,color .35s}
.iw-hl-chev svg{width:16px;height:16px}
.iw-hl-item.open .iw-hl-chev{transform:rotate(180deg);background:var(--royal);color:#fff}
.iw-hl-panel{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.iw-hl-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:1.75rem;align-items:center;padding:0 1.6rem 1.6rem 5.7rem}
@media(max-width:720px){.iw-hl-inner{grid-template-columns:1fr;padding:0 1.6rem 1.6rem;gap:1.25rem}}
.iw-hl-text p{color:var(--grey-dark);line-height:1.7;margin:0;font-size:.94rem}
.iw-hl-media{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:#eef3fb;box-shadow:var(--shadow-card)}
.iw-hl-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.iw-hl-item.open .iw-hl-media img{transform:scale(1.04)}

/* 6 · BENEFITS */
.iw-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:1rem}
@media(max-width:900px){.iw-benefit-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.iw-benefit{background:#fff;border:1px solid rgba(10,22,40,.07);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.iw-benefit:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.iw-benefit-media{aspect-ratio:16/10;overflow:hidden;background:#eef3fb}
.iw-benefit-media img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.iw-benefit:hover .iw-benefit-media img{transform:scale(1.07)}
.iw-benefit-body{padding:1.6rem 1.6rem 1.8rem;position:relative}
.iw-benefit-ic{position:absolute;top:-1.6rem;left:1.6rem;width:3.2rem;height:3.2rem;border-radius:14px;background:#fff;box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:transform .35s}
.iw-benefit:hover .iw-benefit-ic{transform:translateY(-4px) scale(1.06)}
.iw-benefit-body h3{margin:1.1rem 0 .55rem;font-size:1.2rem;color:var(--navy)}
.iw-benefit-body p{color:var(--grey-dark);line-height:1.65;font-size:.92rem;margin:0}

/* 7 · RELATED EQUIPMENT */
.iw-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:1rem}
@media(max-width:900px){.iw-related-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.iw-rel-card{text-decoration:none;background:#fff;border:1px solid rgba(10,22,40,.07);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.iw-rel-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.iw-rel-media{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(10,22,40,.06)}
.iw-rel-media img{width:100%;height:100%;object-fit:contain;padding:1.5rem;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.iw-rel-card:hover .iw-rel-media img{transform:scale(1.06)}
.iw-rel-media.iw-rel-ph{position:relative;background:linear-gradient(160deg,#eef3fb,#dde8f7)}
.iw-rel-media.iw-rel-ph::before{content:"Image coming soon";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Space Mono",monospace;font-size:.75rem;letter-spacing:.05em;color:var(--grey);text-transform:uppercase}
.iw-rel-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.iw-rel-body h4{margin:0 0 .5rem;font-size:1.08rem;color:var(--navy);line-height:1.25}
.iw-rel-body p{font-size:.87rem;color:var(--grey-dark);line-height:1.6;margin:0 0 1rem}
.iw-rel-more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;color:var(--royal);font-weight:600;font-size:.875rem}
.iw-rel-more svg{width:14px;height:14px;transition:transform .3s}
.iw-rel-card:hover .iw-rel-more svg{transform:translateX(4px)}
.iw-benefit-ic svg{width:26px;height:26px;color:var(--royal)}

/* ═══════════════════════════════════════════════════════════════
   COIN-OPERATED PAGE — 2025 revision (additive, namespaced .co-*)
   Port back into theme.py. Uses existing design tokens only.
   ═══════════════════════════════════════════════════════════════ */

/* ── §1 Equipment Overview — two product split-layouts ── */

/* ── §2 Key Features — image cards ── */
.co-feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.co-feat-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.co-feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.co-feat-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--slate)}
.co-feat-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.co-feat-card:hover .co-feat-media img{transform:scale(1.07)}
.co-feat-icon{position:absolute;left:1rem;bottom:-1.35rem;z-index:2;width:2.7rem;height:2.7rem;display:grid;place-items:center;background:var(--royal);color:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(27,79,216,.4);border:3px solid #fff;transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s}
.co-feat-icon svg{width:1.35rem;height:1.35rem}
.co-feat-card:hover .co-feat-icon{transform:translateY(-4px) rotate(-6deg);background:var(--aqua)}
.co-feat-body{padding:2rem 1.5rem 1.6rem}
.co-feat-body h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;color:var(--navy)}
.co-feat-body p{margin-top:.5rem;font-size:.92rem;line-height:1.6;color:var(--grey-dark)}

/* ── §3 Specifications — model overview + tabbed comparison ── */
.co-model-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(1rem,2vw,1.5rem);margin-bottom:clamp(2rem,4vw,3rem)}
.co-model-card{background:#fff;border:1px solid var(--slate-mid);border-radius:var(--r-lg);padding:1.5rem;transition:var(--transition);border-top:3px solid var(--royal)}
.co-model-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-top-color:var(--aqua)}
.co-model-kicker{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;color:var(--navy)}
.co-model-range{display:block;margin-top:.3rem;font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;color:var(--royal)}
.co-model-facts{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.co-model-facts li{font-size:.85rem;color:var(--grey-dark);padding-left:1.1rem;position:relative}
.co-model-facts li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.co-model-facts b{color:var(--navy);font-weight:700}
.co-spec-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.co-tab-btn{font-family:"Inter",sans-serif;font-size:.9rem;font-weight:600;color:var(--grey-dark);background:#fff;border:1.5px solid var(--slate-mid);border-radius:100px;padding:.6em 1.35em;cursor:pointer;transition:var(--transition)}
.co-tab-btn:hover{border-color:rgba(27,79,216,.4);color:var(--royal)}
.co-tab-btn.is-active{background:var(--royal);border-color:var(--royal);color:#fff;box-shadow:0 8px 22px rgba(27,79,216,.28)}
.co-tab-btn:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.co-tab-panel[hidden]{display:none}
.co-tab-panel{animation:coFade .4s cubic-bezier(.4,0,.2,1)}
@keyframes coFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.co-table-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-card);background:#fff;-webkit-overflow-scrolling:touch}
.co-spec-table{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem}
.co-spec-table thead th{background:var(--navy);color:#fff;font-family:"Archivo",sans-serif;font-weight:700;font-size:.85rem;text-align:center;padding:1rem .9rem;position:sticky;top:0}
.co-spec-table thead th:first-child{text-align:left}
.co-spec-table tbody th{text-align:left;font-weight:600;color:var(--navy);padding:.85rem 1.1rem;background:var(--slate);position:sticky;left:0;white-space:nowrap}
.co-spec-table tbody td{text-align:center;padding:.85rem .9rem;color:var(--grey-dark);border-bottom:1px solid var(--slate-mid)}
.co-spec-table tbody tr{transition:background .2s}
.co-spec-table tbody tr:hover{background:rgba(27,79,216,.045)}
.co-spec-table tbody tr:hover th{background:var(--slate-mid)}
.co-spec-table td.co-hi{color:var(--royal);font-weight:700}
.co-spec-note{text-align:center;margin-top:1.75rem;font-size:.85rem;color:var(--grey)}
.co-spec-note a{color:var(--royal);font-weight:600}

/* ── §4 Highlights — premium accordion ── */
.co-acc{max-width:900px;margin:0 auto;display:grid;gap:1rem}
.co-acc-item{background:#fff;border:1px solid var(--slate-mid);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .35s,border-color .35s}
.co-acc-item.is-open{box-shadow:var(--shadow-card);border-color:rgba(27,79,216,.28)}
.co-acc-head{width:100%;display:flex;align-items:center;gap:1rem;padding:1.25rem 1.4rem;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.co-acc-ic{flex:0 0 auto;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:12px;background:var(--slate);color:var(--royal);transition:var(--transition)}
.co-acc-ic svg{width:1.3rem;height:1.3rem}
.co-acc-item.is-open .co-acc-ic{background:var(--royal);color:#fff}
.co-acc-title{flex:1;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.08rem;color:var(--navy)}
.co-acc-chev{flex:0 0 auto;color:var(--grey);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.co-acc-chev svg{width:1rem;height:1rem;display:block}
.co-acc-item.is-open .co-acc-chev{transform:rotate(180deg);color:var(--royal)}
.co-acc-head:focus-visible{outline:3px solid var(--aqua);outline-offset:-3px}
.co-acc-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.co-acc-inner{display:grid;grid-template-columns:1.4fr .9fr;gap:1.5rem;align-items:center;padding:0 1.4rem 1.5rem 1.4rem}
.co-acc-text ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.co-acc-text li{position:relative;padding-left:1.4rem;font-size:.95rem;line-height:1.55;color:var(--grey-dark)}
.co-acc-text li::before{content:"";position:absolute;left:0;top:.35em;width:8px;height:8px;border-radius:2px;background:var(--aqua);transform:rotate(45deg)}
.co-acc-img{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3;background:var(--slate)}
.co-acc-img img{width:100%;height:100%;object-fit:cover}

/* ── §5 Benefits — image cards ── */
.co-benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.co-benefit-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.co-benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.co-benefit-media{aspect-ratio:16/10;overflow:hidden;background:var(--slate)}
.co-benefit-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.co-benefit-card:hover .co-benefit-media img{transform:scale(1.06)}
.co-benefit-body{padding:1.75rem 1.6rem 1.85rem}
.co-benefit-body h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.25rem;color:var(--navy)}
.co-benefit-body p{margin-top:.6rem;font-size:.95rem;line-height:1.65;color:var(--grey-dark)}

/* ── §6 Related Equipment — real product images ── */
.co-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.co-related-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.co-related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.co-related-media{aspect-ratio:4/3;background:linear-gradient(160deg,#fff,var(--slate));display:grid;place-items:center;padding:1.5rem}
.co-related-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(10,22,40,.13));transition:transform .5s cubic-bezier(.4,0,.2,1)}
.co-related-card:hover .co-related-media img{transform:scale(1.05)}
.co-related-body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.co-related-body h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;color:var(--navy)}
.co-related-body p{margin-top:.5rem;font-size:.9rem;line-height:1.6;color:var(--grey-dark);flex:1}
.co-related-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;color:var(--royal);font-weight:600;font-size:.9rem}
.co-related-link svg{width:14px;height:14px;transition:transform .3s}
.co-related-card:hover .co-related-link svg{transform:translateX(4px)}

/* ── Responsive ── */
@media (max-width:860px){
  
  
  .co-acc-inner{grid-template-columns:1fr}
  .co-acc-img{max-width:360px}
}
@media (prefers-reduced-motion:reduce){
  .co-feat-media img,.co-feat-icon,.co-benefit-media img,.co-related-media img,.co-tab-panel,.co-acc-panel,.co-acc-chev{transition:none!important;animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   WET CLEANING PAGE — 2025 revision (additive, namespaced .wcm-*)
   Port back into theme.py. Uses existing design tokens only.
   ═══════════════════════════════════════════════════════════════ */

/* ── §1 Equipment Overview — two product split-layouts ── */
.wcm-products .wcm-product{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(2rem,4vw,4.5rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.wcm-products .wcm-product + .wcm-product{margin-top:clamp(3.5rem,7vw,6rem)}
.wcm-product--rev .wcm-product-media{order:2}
.wcm-product-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(150deg,#fff 0%,var(--slate) 60%,var(--slate-mid) 100%);box-shadow:var(--shadow-card);padding:clamp(1.5rem,3vw,2.75rem);transition:box-shadow .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.wcm-product-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(27,79,216,.06);border-radius:inherit;pointer-events:none}
.wcm-product:hover .wcm-product-frame{box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.wcm-product-frame img{display:block;width:100%;height:clamp(300px,42vw,460px);object-fit:contain;filter:drop-shadow(0 24px 40px rgba(10,22,40,.14));transition:transform .5s cubic-bezier(.4,0,.2,1)}
.wcm-product:hover .wcm-product-frame img{transform:scale(1.035)}
.wcm-product-tag{position:absolute;top:1.1rem;left:1.1rem;z-index:2;font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--royal);padding:.42em .9em;border-radius:100px;box-shadow:0 6px 18px rgba(27,79,216,.32)}
.wcm-caps{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.25rem}
.wcm-cap{font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;color:var(--royal);background:var(--white);border:1.5px solid var(--slate-mid);border-radius:100px;padding:.35em 1em;transition:var(--transition)}
.wcm-product:hover .wcm-cap{border-color:rgba(27,79,216,.35)}
.wcm-model-code{font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--aqua);text-transform:uppercase;margin-bottom:.5rem}
.wcm-product-copy h3{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.08;color:var(--navy);letter-spacing:-.01em}
.wcm-product-lead{margin-top:1rem;font-size:1.05rem;line-height:1.65;color:var(--grey-dark)}
.wcm-keyfeat{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.wcm-keyfeat li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--navy)}
.wcm-keyfeat li svg{flex:0 0 auto;width:20px;height:20px;margin-top:.1rem;color:var(--white);background:var(--aqua);border-radius:50%;padding:3px;box-shadow:0 3px 10px rgba(0,194,203,.35)}
.wcm-hl-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.wcm-hl{flex:1 1 0;min-width:96px;background:var(--slate);border:1px solid var(--slate-mid);border-radius:var(--r-md);padding:1rem .85rem;text-align:center;transition:var(--transition)}
.wcm-hl:hover{background:#fff;border-color:rgba(27,79,216,.3);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.wcm-hl-num{display:block;font-family:"Archivo",sans-serif;font-weight:900;font-size:1.4rem;color:var(--royal);line-height:1}
.wcm-hl-num i{font-style:normal;font-size:.68rem;font-weight:700;color:var(--grey)}
.wcm-hl-lbl{display:block;margin-top:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--grey-dark);text-transform:uppercase}
.wcm-product-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}

/* ── §2 Key Features — image cards ── */
.wcm-feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.wcm-feat-card{position:relative;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.wcm-feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.wcm-feat-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--slate)}
.wcm-feat-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.wcm-feat-card:hover .wcm-feat-media img{transform:scale(1.07)}
.wcm-feat-icon{position:absolute;left:1.5rem;top:0;transform:translateY(-50%);z-index:2;width:2.7rem;height:2.7rem;display:grid;place-items:center;background:var(--royal);color:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(27,79,216,.4);border:3px solid #fff;transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s}
.wcm-feat-icon svg{width:1.35rem;height:1.35rem}
.wcm-feat-card:hover .wcm-feat-icon{transform:translateY(calc(-50% - 4px)) rotate(-6deg);background:var(--aqua)}
.wcm-feat-body{position:relative;padding:2.4rem 1.5rem 1.6rem}
.wcm-feat-body h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.12rem;color:var(--navy);line-height:1.25}
.wcm-feat-body p{margin-top:.5rem;font-size:.92rem;line-height:1.6;color:var(--grey-dark)}

/* ── §3 Specifications — model overview + tabbed comparison ── */
.wcm-model-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(1rem,2vw,1.5rem);margin-bottom:clamp(2rem,4vw,3rem)}
.wcm-model-card{background:#fff;border:1px solid var(--slate-mid);border-radius:var(--r-lg);padding:1.5rem;transition:var(--transition);border-top:3px solid var(--royal)}
.wcm-model-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-top-color:var(--aqua)}
.wcm-model-kicker{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;color:var(--navy)}
.wcm-model-range{display:block;margin-top:.3rem;font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;color:var(--royal)}
.wcm-model-facts{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.wcm-model-facts li{font-size:.85rem;color:var(--grey-dark);padding-left:1.1rem;position:relative}
.wcm-model-facts li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.wcm-model-facts b{color:var(--navy);font-weight:700}
.wcm-spec-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.wcm-tab-btn{font-family:"Inter",sans-serif;font-size:.9rem;font-weight:600;color:var(--grey-dark);background:#fff;border:1.5px solid var(--slate-mid);border-radius:100px;padding:.6em 1.35em;cursor:pointer;transition:var(--transition)}
.wcm-tab-btn:hover{border-color:rgba(27,79,216,.4);color:var(--royal)}
.wcm-tab-btn.is-active{background:var(--royal);border-color:var(--royal);color:#fff;box-shadow:0 8px 22px rgba(27,79,216,.28)}
.wcm-tab-btn:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.wcm-tab-panel[hidden]{display:none}
.wcm-tab-panel{animation:wcmFade .4s cubic-bezier(.4,0,.2,1)}
@keyframes wcmFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wcm-table-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-card);background:#fff;-webkit-overflow-scrolling:touch}
.wcm-spec-table{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem}
.wcm-spec-table thead th{background:var(--navy);color:#fff;font-family:"Archivo",sans-serif;font-weight:700;font-size:.85rem;text-align:center;padding:1rem .9rem;position:sticky;top:0}
.wcm-spec-table thead th:first-child{text-align:left}
.wcm-spec-table tbody th{text-align:left;font-weight:600;color:var(--navy);padding:.85rem 1.1rem;background:var(--slate);position:sticky;left:0;white-space:nowrap}
.wcm-spec-table tbody td{text-align:center;padding:.85rem .9rem;color:var(--grey-dark);border-bottom:1px solid var(--slate-mid)}
.wcm-spec-table tbody tr{transition:background .2s}
.wcm-spec-table tbody tr:hover{background:rgba(27,79,216,.045)}
.wcm-spec-table tbody tr:hover th{background:var(--slate-mid)}
.wcm-spec-table td.wcm-hi{color:var(--royal);font-weight:700}
.wcm-spec-note{text-align:center;margin-top:1.75rem;font-size:.85rem;color:var(--grey)}
.wcm-spec-note a{color:var(--royal);font-weight:600}

/* ── §4 Highlights — premium accordion ── */
.wcm-acc{max-width:900px;margin:0 auto;display:grid;gap:1rem}
.wcm-acc-item{background:#fff;border:1px solid var(--slate-mid);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .35s,border-color .35s}
.wcm-acc-item.is-open{box-shadow:var(--shadow-card);border-color:rgba(27,79,216,.28)}
.wcm-acc-head{width:100%;display:flex;align-items:center;gap:1rem;padding:1.25rem 1.4rem;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.wcm-acc-ic{flex:0 0 auto;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:12px;background:var(--slate);color:var(--royal);transition:var(--transition)}
.wcm-acc-ic svg{width:1.3rem;height:1.3rem}
.wcm-acc-item.is-open .wcm-acc-ic{background:var(--royal);color:#fff}
.wcm-acc-title{flex:1;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.08rem;color:var(--navy)}
.wcm-acc-chev{flex:0 0 auto;color:var(--grey);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.wcm-acc-chev svg{width:1rem;height:1rem;display:block}
.wcm-acc-item.is-open .wcm-acc-chev{transform:rotate(180deg);color:var(--royal)}
.wcm-acc-head:focus-visible{outline:3px solid var(--aqua);outline-offset:-3px}
.wcm-acc-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.wcm-acc-inner{display:grid;grid-template-columns:1.4fr .9fr;gap:1.5rem;align-items:center;padding:0 1.4rem 1.5rem 1.4rem}
.wcm-acc-text ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.wcm-acc-text li{position:relative;padding-left:1.4rem;font-size:.95rem;line-height:1.55;color:var(--grey-dark)}
.wcm-acc-text li::before{content:"";position:absolute;left:0;top:.35em;width:8px;height:8px;border-radius:2px;background:var(--aqua);transform:rotate(45deg)}
.wcm-acc-img{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3;background:var(--slate)}
.wcm-acc-img img{width:100%;height:100%;object-fit:cover}

/* ── §5 Benefits — image cards ── */
.wcm-benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.wcm-benefit-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.wcm-benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.wcm-benefit-media{aspect-ratio:16/10;overflow:hidden;background:var(--slate)}
.wcm-benefit-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.wcm-benefit-card:hover .wcm-benefit-media img{transform:scale(1.06)}
.wcm-benefit-body{padding:1.75rem 1.6rem 1.85rem}
.wcm-benefit-body h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.25rem;color:var(--navy)}
.wcm-benefit-body p{margin-top:.6rem;font-size:.95rem;line-height:1.65;color:var(--grey-dark)}

/* ── §6 Related Equipment — real product images ── */
.wcm-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.wcm-related-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
.wcm-related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.wcm-related-media{aspect-ratio:4/3;background:linear-gradient(160deg,#fff,var(--slate));display:grid;place-items:center;padding:1.5rem}
.wcm-related-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(10,22,40,.13));transition:transform .5s cubic-bezier(.4,0,.2,1)}
.wcm-related-card:hover .wcm-related-media img{transform:scale(1.05)}
.wcm-related-body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.wcm-related-body h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;color:var(--navy)}
.wcm-related-body p{margin-top:.5rem;font-size:.9rem;line-height:1.6;color:var(--grey-dark);flex:1}
.wcm-related-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;color:var(--royal);font-weight:600;font-size:.9rem}
.wcm-related-link svg{width:14px;height:14px;transition:transform .3s}
.wcm-related-card:hover .wcm-related-link svg{transform:translateX(4px)}

/* ── Responsive ── */
@media (max-width:860px){
  .wcm-products .wcm-product{grid-template-columns:1fr;gap:2rem}
  .wcm-product--rev .wcm-product-media{order:0}
  .wcm-acc-inner{grid-template-columns:1fr}
  .wcm-acc-img{max-width:360px}
}
@media (prefers-reduced-motion:reduce){
  .wcm-product-frame,.wcm-product-frame img,.wcm-feat-media img,.wcm-feat-icon,.wcm-benefit-media img,.wcm-related-media img,.wcm-tab-panel,.wcm-acc-panel,.wcm-acc-chev{transition:none!important;animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   TOWEL FOLDERS PAGE — enhancement layer (2025 redesign)
   Dual-technology product system: Air Blowing = aqua, Blade = royal.
   All new selectors are namespaced (tf- / kf- / spc- / acc- / hl- / ben- /
   rel-) so they can't collide with the shared component library above.
   Reuses existing design tokens only. PORT BACK into theme.py.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · DUAL PRODUCT OVERVIEW ─────────────────────────────────────── */
.tf-overview{display:flex;flex-direction:column;gap:clamp(2.75rem,5vw,4.75rem)}
.tf-panel{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;position:relative}
@media(max-width:900px){.tf-panel{grid-template-columns:1fr;gap:1.9rem}}
.tf-panel.tf-reverse .tf-panel-media{order:2}
@media(max-width:900px){.tf-panel.tf-reverse .tf-panel-media{order:0}}

.tf-media-frame{position:relative;display:block;width:100%;border-radius:var(--r-xl);
  overflow:hidden;border:1px solid rgba(10,22,40,.08);cursor:zoom-in;padding:0;background:transparent;
  font:inherit;color:inherit;text-align:inherit;
  box-shadow:var(--shadow-card);transition:box-shadow .35s,transform .35s}
.tf-media-frame::before{content:"";position:absolute;inset:0;z-index:0}
.tf-panel--air .tf-media-frame::before{background:radial-gradient(120% 120% at 30% 0%,#f1fcfe 0%,#e0f4f6 58%,#d3edf0 100%)}
.tf-panel--blade .tf-media-frame::before{background:radial-gradient(120% 120% at 70% 0%,#f5f8ff 0%,#e8eeff 58%,#dbe4ff 100%)}
.tf-media-frame::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2}
.tf-panel--air .tf-media-frame::after{background:linear-gradient(90deg,var(--aqua),var(--aqua-light))}
.tf-panel--blade .tf-media-frame::after{background:linear-gradient(90deg,var(--royal),var(--royal-light))}
.tf-media-frame img{position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:contain;
  padding:clamp(1.2rem,3vw,2.4rem);transition:transform .55s cubic-bezier(.4,0,.2,1)}
.tf-media-frame:hover{box-shadow:var(--shadow-hover)}
.tf-media-frame:hover img{transform:scale(1.045)}
.tf-zoom{position:absolute;bottom:1rem;right:1rem;z-index:3;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:600;color:var(--navy);background:rgba(255,255,255,.92);
  padding:.45em .8em;border-radius:100px;border:1px solid rgba(10,22,40,.1);
  box-shadow:0 4px 14px rgba(10,22,40,.12);transition:var(--transition)}
.tf-media-frame:hover .tf-zoom{transform:translateY(-2px)}
.tf-panel--air .tf-media-frame:hover .tf-zoom{background:var(--aqua);color:#043a3e}
.tf-panel--blade .tf-media-frame:hover .tf-zoom{background:var(--royal);color:#fff}
.tf-zoom svg{width:13px;height:13px}

.tf-kicker{display:inline-flex;align-items:center;gap:.55rem;font-family:"Space Mono",monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.4em .9em;border-radius:100px;margin-bottom:1.1rem}
.tf-panel--air .tf-kicker{color:#046b73;background:rgba(0,194,203,.12);border:1px solid rgba(0,194,203,.3)}
.tf-panel--blade .tf-kicker{color:var(--royal);background:rgba(27,79,216,.09);border:1px solid rgba(27,79,216,.22)}
.tf-dot{width:7px;height:7px;border-radius:50%}
.tf-panel--air .tf-dot{background:var(--aqua)}
.tf-panel--blade .tf-dot{background:var(--royal)}
.tf-panel-body h3{font-size:clamp(1.55rem,2.6vw,2.15rem);color:var(--navy);line-height:1.12;letter-spacing:-.02em}
.tf-panel-body>p{margin-top:1rem;font-size:.98rem}
.tf-feature-list{display:grid;gap:.7rem;margin:1.5rem 0 0;padding:0;list-style:none}
.tf-feature-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--grey-dark);line-height:1.5}
.tf-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:.05rem}
.tf-panel--air .tf-check{background:rgba(0,194,203,.15);color:#046b73}
.tf-panel--blade .tf-check{background:rgba(27,79,216,.1);color:var(--royal)}
.tf-check svg{width:12px;height:12px}
.tf-bestfor{margin-top:1.45rem;padding:1rem 1.2rem;border-radius:var(--r-md);background:var(--slate);
  border:1px solid rgba(10,22,40,.06);font-size:.9rem;color:var(--grey-dark);line-height:1.55}
.tf-bestfor strong{color:var(--navy);font-family:"Archivo",sans-serif}
.tf-panel--air .tf-bestfor{border-left:3px solid var(--aqua)}
.tf-panel--blade .tf-bestfor{border-left:3px solid var(--royal)}
.tf-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.btn-aqua{background:var(--aqua);color:#04252a;border-color:var(--aqua)}
.btn-aqua:hover{background:var(--aqua-light);border-color:var(--aqua-light);transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,194,203,.32)}

/* ── 2 · KEY FEATURES (image cards) ────────────────────────────────── */
.kf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.5rem}
.kf-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-card);border:1px solid rgba(10,22,40,.06);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s,border-color .35s}
.kf-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(27,79,216,.15)}
.kf-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,#eef2f9,#e2e9f5)}
.kf-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.kf-card:hover .kf-media img{transform:scale(1.06)}
.kf-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.32),transparent 46%)}
.kf-icon{position:absolute;left:1rem;bottom:1rem;z-index:2;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);
  box-shadow:0 6px 18px rgba(10,22,40,.2);transition:var(--transition)}
.kf-icon svg{width:21px;height:21px;color:var(--royal);transition:var(--transition)}
.kf-card:hover .kf-icon{background:var(--royal);transform:translateY(-2px) rotate(-4deg)}
.kf-card:hover .kf-icon svg{color:#fff}
.kf-body{padding:1.3rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column}
.kf-body h4{font-size:1.05rem;color:var(--navy);margin-bottom:.45rem;line-height:1.3}
.kf-body p{font-size:.875rem;color:var(--grey-dark);line-height:1.6}

/* ── 3 · TECHNICAL SPECIFICATIONS — comparison table ───────────────── */
.spc-table-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  border:1px solid rgba(10,22,40,.06);background:#fff}
.spc-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.spc-table thead th{padding:1.15rem 1.25rem;text-align:left;font-family:"Archivo",sans-serif;
  font-size:.95rem;font-weight:800;color:#fff;vertical-align:bottom}
.spc-table thead th.col-attr{background:var(--navy);font-family:"Space Mono",monospace;font-size:.72rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.spc-table thead th.col-air{background:linear-gradient(135deg,#0a8189,#00c2cb)}
.spc-table thead th.col-blade{background:linear-gradient(135deg,var(--royal),var(--royal-light))}
.spc-table thead th .col-tag{display:block;font-family:"Space Mono",monospace;font-size:.64rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:.3rem}
.spc-table td{padding:.9rem 1.25rem;border-bottom:1px solid rgba(10,22,40,.07);color:var(--grey-dark);
  vertical-align:top;line-height:1.5}
.spc-table td.cell-attr{font-family:"Space Mono",monospace;font-size:.74rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--navy);background:var(--slate);white-space:nowrap}
.spc-table tbody tr:last-child td{border-bottom:none}
.spc-table tbody tr:hover td{background:rgba(27,79,216,.035)}
.spc-table tbody tr:hover td.cell-attr{background:var(--slate-mid)}
.spc-foot{text-align:center;margin-top:1.75rem;font-size:.85rem;color:var(--grey)}
.spc-foot a{color:var(--royal);font-weight:600}

/* ── generic robust accordion (Specs detail + Highlights) ──────────── */
.acc{display:grid;gap:.85rem}
.acc.acc-2{display:flex;gap:.85rem;align-items:flex-start}
.acc.acc-2 .acc-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.85rem}
@media(max-width:760px){.acc.acc-2{flex-direction:column}.acc.acc-2 .acc-col{width:100%}}
.acc-item{background:#fff;border:1px solid rgba(10,22,40,.08);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-card);transition:border-color .3s,box-shadow .3s}
.acc-item.open{border-color:rgba(27,79,216,.28);box-shadow:var(--shadow-hover)}
.acc-head{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.9rem;
  font-family:"Archivo",sans-serif;font-size:1rem;font-weight:700;color:var(--navy);transition:color .2s}
.acc-head:hover{color:var(--royal)}
.acc-ico{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(27,79,216,.1),rgba(0,194,203,.08));transition:var(--transition)}
.acc-ico svg{width:19px;height:19px;color:var(--royal);transition:var(--transition)}
.acc-item.open .acc-ico{background:linear-gradient(135deg,var(--royal),var(--aqua))}
.acc-item.open .acc-ico svg{color:#fff}
.acc-plus{margin-left:auto;flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--slate-mid);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.acc-plus svg{width:13px;height:13px;color:var(--royal);transition:transform .3s}
.acc-item.open .acc-plus{background:var(--royal)}
.acc-item.open .acc-plus svg{color:#fff;transform:rotate(45deg)}
.acc-panel{overflow:hidden;max-height:0;transition:max-height .42s cubic-bezier(.4,0,.2,1)}
.acc-panel-inner{padding:0 1.25rem 1.35rem 4.15rem}
@media(max-width:520px){.acc-panel-inner{padding-left:1.25rem}}
.acc-panel-inner>p{font-size:.9rem;color:var(--grey-dark);line-height:1.7}
.acc-list{display:flex;flex-direction:column;gap:.5rem;list-style:none;padding:0}
.acc-list li{position:relative;padding-left:1.5rem;font-size:.88rem;color:var(--grey-dark);line-height:1.55}
.acc-list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--aqua)}

/* Highlights: figure inside a panel */
.hl-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:center}
@media(max-width:640px){.hl-panel{grid-template-columns:1fr}}
.hl-figure{border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(10,22,40,.07);
  background:linear-gradient(140deg,#eef2f9,#e2e9f5);aspect-ratio:4/3}
.hl-figure img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 5 · BENEFITS (image cards) ────────────────────────────────────── */
.ben-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.75rem}
.ben-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--shadow-card);border:1px solid rgba(10,22,40,.06);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}
.ben-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-hover)}
.ben-media{position:relative;aspect-ratio:5/4;overflow:hidden;background:linear-gradient(140deg,#eef2f9,#e2e9f5)}
.ben-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ben-card:hover .ben-media img{transform:scale(1.06)}
.ben-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.34),transparent 50%)}
.ben-badge{position:absolute;top:1rem;left:1rem;z-index:2;font-family:"Space Mono",monospace;
  font-size:.66rem;letter-spacing:.1em;color:#fff;background:rgba(10,22,40,.8);padding:.42em .8em;border-radius:100px;
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ben-body{padding:1.5rem 1.6rem 1.8rem;flex:1;display:flex;flex-direction:column}
.ben-body h3{font-size:1.2rem;color:var(--navy);margin-bottom:.6rem;line-height:1.25}
.ben-body p{font-size:.9rem;color:var(--grey-dark);line-height:1.65}

/* ── 6 · RELATED EQUIPMENT ─────────────────────────────────────────── */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.75rem}
.rel-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-card);border:1px solid rgba(10,22,40,.06);text-decoration:none;
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}
.rel-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.rel-media{position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%,#fff,#eef2f9);border-bottom:1px solid rgba(10,22,40,.05);overflow:hidden}
.rel-media img{width:100%;height:100%;object-fit:contain;padding:1.4rem;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.rel-card:hover .rel-media img{transform:scale(1.04)}
.rel-badge{position:absolute;top:1rem;left:1rem;z-index:2;font-family:"Space Mono",monospace;
  font-size:.64rem;letter-spacing:.1em;color:var(--navy);background:rgba(255,255,255,.9);padding:.38em .75em;
  border-radius:100px;border:1px solid rgba(10,22,40,.1)}
.rel-body{padding:1.5rem 1.6rem 1.7rem;flex:1;display:flex;flex-direction:column}
.rel-body h4{font-size:1.12rem;color:var(--navy);margin-bottom:.55rem;line-height:1.3}
.rel-body p{font-size:.875rem;color:var(--grey-dark);line-height:1.6;flex:1}
.rel-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;font-weight:600;font-size:.875rem;
  color:var(--royal);transition:gap .25s}
.rel-card:hover .rel-more{gap:.7rem}
.rel-more svg{width:15px;height:15px}

/* ── reduced-motion: neutralise hover transforms ───────────────────── */
@media(prefers-reduced-motion:reduce){
  .kf-card:hover,.ben-card:hover,.rel-card:hover,.tf-media-frame:hover{transform:none}
  .kf-card:hover .kf-media img,.ben-card:hover .ben-media img,.rel-card:hover .rel-media img,
  .tf-media-frame:hover img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE · (5) OUR SERVICES — PREMIUM CARD SYSTEM  v2
   Additive & non-destructive: nothing above is deleted. These rules share the
   same specificity as the original .svc-* block and win purely on source
   order, so reverting = delete this block.

   Design notes
   ────────────
   • The service artwork is banner-format (43:24) and carries baked-in headline
     + checklist text, so the media is rendered UNCROPPED at its native ratio
     and the grid is 2-up (not 3-up) to keep that text legible.
   • No chrome is placed over the top or left of the media — every asset keeps
     its marketing copy there. The only overlay is the frosted category chip,
     pinned bottom-right, which is clear of text in all six assets.
   • Card index + hairline "spec rule" live in the body: a documentation cue
     that suits laundry equipment, and immune to image collisions.
   ══════════════════════════════════════════════════════════════════════════ */

.svc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;              /* literal equal-height cards at every breakpoint */
  gap:clamp(1.25rem,2.4vw,1.75rem);
  align-items:stretch;
}
/* single column below 1024px so the banner artwork never shrinks past legibility */
@media (max-width:1023px){ .svc-grid{grid-template-columns:minmax(0,1fr)} }

/* ── Card shell ─────────────────────────────────────────────────────────── */
.svc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(10,22,40,.07);
  box-shadow:
    0 1px 2px rgba(10,22,40,.06),
    0 10px 24px -14px rgba(10,22,40,.22),
    0 28px 56px -32px rgba(10,22,40,.30);
  color:inherit;
  text-decoration:none;
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    box-shadow .5s cubic-bezier(.22,1,.36,1),
    border-color .4s ease;
}

/* animated accent seam — matches the site-wide card language */
.svc-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  z-index:4;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg,var(--royal),var(--aqua));
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.svc-card:hover,
.svc-card:focus-visible{
  transform:translateY(-8px);
  border-color:rgba(27,79,216,.22);
  box-shadow:
    0 2px 4px rgba(10,22,40,.06),
    0 20px 40px -20px rgba(27,79,216,.32),
    0 44px 76px -36px rgba(10,22,40,.45);
}
.svc-card:hover::before,
.svc-card:focus-visible::before{transform:scaleX(1)}

/* WCAG 2.2 — 2.4.11 / 2.4.13: unmistakable keyboard focus indicator */
.svc-card:focus-visible{
  outline:3px solid var(--aqua-light);
  outline-offset:4px;
}

/* ── Media ──────────────────────────────────────────────────────────────── */
.svc-media{
  position:relative;
  aspect-ratio:43/24;          /* exact native ratio — zero crop, zero distortion */
  overflow:hidden;
  background:var(--navy-mid);
  border-bottom:1px solid rgba(10,22,40,.06);
}
.svc-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.01);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-media img,
.svc-card:focus-visible .svc-media img{transform:scale(1.055)}

/* light gradient overlay: seats the artwork into the card without dulling
   the baked-in headline/checklist copy */
.svc-media-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.85;
  background:linear-gradient(180deg,
    rgba(10,22,40,.10) 0%,
    rgba(10,22,40,0)   20%,
    rgba(10,22,40,0)   70%,
    rgba(10,22,40,.16) 100%);
  transition:opacity .45s ease;
}
.svc-card:hover .svc-media-scrim,
.svc-card:focus-visible .svc-media-scrim{opacity:1}

/* frosted category chip — bottom-right is the one zone free of baked-in
   text across all six assets */
.svc-cat{
  position:absolute;
  z-index:3;
  top:auto; left:auto;
  right:clamp(.7rem,1.4vw,1rem);
  bottom:clamp(.7rem,1.4vw,1rem);
  display:inline-flex;
  align-items:center;
  font-family:"Space Mono",monospace;
  font-weight:700;
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1;
  color:#F2FEFF;
  padding:.5em .85em;
  border-radius:100px;
  background:rgba(10,22,40,.70);   /* 7.1:1 min over the lightest photo regions — AA */
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 4px 14px rgba(10,22,40,.28);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  transition:background .4s ease,border-color .4s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-cat,
.svc-card:focus-visible .svc-cat{
  background:rgba(8,74,80,.74);    /* 5.0:1 min — AA */
  border-color:rgba(77,221,228,.62);
  transform:translateY(-2px);
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.svc-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(1.3rem,2.2vw,1.75rem) clamp(1.3rem,2.2vw,1.75rem) clamp(1.4rem,2.2vw,1.8rem);
}

/* index + hairline spec rule */
.svc-meta{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0 0 .95rem;
  padding:0;
  line-height:1;
}
.svc-meta::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,rgba(10,22,40,.16),rgba(10,22,40,0));
}
.svc-num{
  position:static;
  inset:auto;
  display:inline-flex;
  align-items:center;
  font-family:"Space Mono",monospace;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.08em;
  line-height:1;
  color:var(--navy);
  background:var(--slate);
  border:1px solid rgba(10,22,40,.09);
  border-radius:8px;
  padding:.38em .62em;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.svc-body h3{
  font-family:"Archivo",sans-serif;
  font-weight:800;
  font-size:clamp(1.15rem,1.35vw,1.4rem);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--navy);
  margin:0 0 .6rem;
}
.section--dark .svc-body h3{color:var(--navy)}

.svc-body p.svc-desc{
  font-size:.93rem;
  line-height:1.7;
  color:var(--grey-dark);
  margin:0 0 1.35rem;
}
.section--dark .svc-body p.svc-desc{color:var(--grey-dark)}

.svc-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:"Space Mono",monospace;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--royal);                 /* 6.6:1 on white — AA */
  transition:gap .35s ease,color .35s ease;
}
.svc-link svg{width:14px;height:14px;flex-shrink:0;transition:transform .35s ease}
.svc-card:hover .svc-link,
.svc-card:focus-visible .svc-link{
  gap:.75rem;
  color:#0B7C86;                      /* deep teal, 4.9:1 on white — AA */
}
.svc-card:hover .svc-link svg,
.svc-card:focus-visible .svc-link svg{transform:translateX(4px)}

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width:560px){
  .svc-card{border-radius:18px}
  .svc-cat{font-size:.55rem;padding:.45em .75em;letter-spacing:.14em}
  .svc-body p.svc-desc{font-size:.9rem}
}

/* touch devices: no hover state to rely on, so ship the resting state polished */
@media (hover:none){
  .svc-card:hover{transform:none;box-shadow:
    0 1px 2px rgba(10,22,40,.06),
    0 10px 24px -14px rgba(10,22,40,.22),
    0 28px 56px -32px rgba(10,22,40,.30)}
  .svc-card:hover .svc-media img{transform:scale(1.01)}
  .svc-card:active{transform:translateY(-2px)}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .svc-card,.svc-card::before,.svc-media img,.svc-media-scrim,
  .svc-cat,.svc-link,.svc-link svg{transition:none !important;animation:none !important}
  .svc-card:hover,.svc-card:focus-visible{transform:none}
  .svc-card:hover .svc-media img,.svc-card:focus-visible .svc-media img{transform:scale(1.01)}
  .svc-card:hover .svc-cat,.svc-card:focus-visible .svc-cat{transform:none}
}

/* no-JS: reveal-up must never leave the grid blank */
@media (scripting:none){
  .svc-card.reveal-up{opacity:1 !important;transform:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY PAGE  (gallery.html)                                  [ADDITIVE]
   Every selector is namespaced .gal-* so nothing here can collide with the
   existing .ka-* (About page) or .lightbox (PDP) systems. Colours, radii,
   shadows and easing all come from the established :root tokens.

   Signature device: the "spec plate" caption — a machine data-plate lockup
   (Space Mono kicker over an Archivo title, hairline rule, riveted corner)
   that sits under every frame and reads like the badge on the cabinet.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Skip link ─────────────────────────────────────────────────────────── */

/* ── 1. HERO ───────────────────────────────────────────────────────────── */
.gal-hero{min-height:clamp(520px,78vh,760px);display:flex;flex-direction:column;justify-content:center}
.gal-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.gal-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:.9}
.gal-hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,22,40,.94) 0%,rgba(10,22,40,.82) 42%,rgba(10,22,40,.5) 68%,rgba(10,22,40,.24) 88%,rgba(10,22,40,.18) 100%),
    linear-gradient(to top,rgba(10,22,40,.72) 0%,rgba(10,22,40,0) 46%)}
.gal-hero-content{position:relative;z-index:2}
.gal-hero h1{margin-top:.5rem}
.gal-hero .lead{max-width:600px}
.gal-hero h1,.gal-hero .lead,.gal-hero .eyebrow{text-shadow:0 1px 18px rgba(10,22,40,.55),0 1px 3px rgba(10,22,40,.45)}

/* hero facts strip — reuses the data-plate voice */
.gal-hero-facts{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);margin-top:2.25rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);max-width:600px}
.gal-hero-facts li{display:flex;flex-direction:column;gap:.2rem}
.gal-hero-facts strong{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.5rem,3vw,2.1rem);
  color:#fff;letter-spacing:-.03em;line-height:1}
.gal-hero-facts span{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--aqua)}

/* entrance sequence */
.gal-fade{opacity:0;transform:translateY(18px);animation:galFadeUp .85s cubic-bezier(.22,1,.36,1) .1s forwards}
.gal-fade-1{animation-delay:.22s}.gal-fade-2{animation-delay:.34s}.gal-fade-3{animation-delay:.46s}
@keyframes galFadeUp{to{opacity:1;transform:none}}

/* scroll cue */
.gal-scroll-cue{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  width:max-content;margin:clamp(1.75rem,4vw,3rem) auto 0;padding:.5rem;
  opacity:0;animation:galFadeUp .8s ease .8s forwards}
.gal-scroll-line{display:block;width:1px;height:38px;background:linear-gradient(to bottom,rgba(255,255,255,.05),var(--aqua));
  position:relative;overflow:hidden}
.gal-scroll-line::after{content:"";position:absolute;left:0;width:1px;height:12px;background:#fff;
  animation:galCue 1.9s cubic-bezier(.6,0,.4,1) infinite}
@keyframes galCue{0%{top:-14px;opacity:0}30%{opacity:1}100%{top:38px;opacity:0}}
.gal-scroll-word{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.gal-scroll-cue:hover .gal-scroll-word{color:var(--aqua)}
.gal-scroll-cue:focus-visible{outline:2px solid var(--aqua);outline-offset:4px;border-radius:var(--r-sm)}
@media(max-width:640px){.gal-scroll-cue{display:none}}

/* ── Section heads ─────────────────────────────────────────────────────── */
.gal-head{max-width:660px;margin-bottom:clamp(2rem,4vw,3rem)}
.gal-head h2{margin-top:.6rem}
.gal-head .lead{margin-top:1rem}

/* ── Shared frame: image well used by both the featured band and the grid ─ */
.gal-frame{position:relative;display:block;overflow:hidden;border-radius:18px;
  background:var(--navy-mid) center/cover no-repeat;   /* LQIP sits here */
  aspect-ratio:var(--gal-ar,4 / 3);
  box-shadow:0 2px 6px rgba(10,22,40,.06),0 12px 32px rgba(10,22,40,.10);
  transition:box-shadow .45s cubic-bezier(.4,0,.2,1)}
.gal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.015);opacity:0;
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.gal-img.is-loaded,.js .gal-img[data-loaded]{opacity:1}
/* if JS never runs, images must still be visible */
html:not(.js) .gal-img{opacity:1}
.gal-frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%);opacity:0}
.gal-card:not(.is-ready) .gal-frame::before,
.gal-feat:not(.is-ready) .gal-frame::before{opacity:1;animation:galShimmer 1.5s linear infinite}
@keyframes galShimmer{to{transform:translateX(120%)}}

.gal-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,0) 46%,rgba(10,22,40,.28) 72%,rgba(10,22,40,.62) 100%);
  opacity:0;transition:opacity .45s ease}
.gal-zoom{position:absolute;top:.9rem;right:.9rem;z-index:3;pointer-events:none;
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:#fff;
  background:rgba(10,22,40,.42);border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform:scale(.7);opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease,background .3s ease}
.gal-zoom svg{width:18px;height:18px}

/* ── Signature: the spec plate caption ─────────────────────────────────── */
.gal-plate{position:relative;display:flex;flex-direction:column;gap:.22rem;
  padding:.95rem 1rem .2rem;text-align:left}
.gal-plate::before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;
  background:var(--aqua);border-radius:2px;transition:width .45s cubic-bezier(.22,1,.36,1)}
.gal-plate-kicker{font-family:"Space Mono",monospace;font-weight:700;font-size:.63rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--royal)}
.gal-plate-title{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;
  line-height:1.25;color:var(--navy);letter-spacing:-.01em}

/* ── 2. FEATURED BAND (magazine split) ─────────────────────────────────── */
.gal-featured{display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.gal-feat{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.gal-feat--lead{--gal-ar:16 / 11}
.gal-feat--tall{--gal-ar:3 / 4}
.gal-feat--wide{grid-column:1 / -1;--gal-ar:21 / 8}
@media(max-width:900px){
  .gal-featured{grid-template-columns:1fr}
  .gal-feat--lead{--gal-ar:16 / 10}
  .gal-feat--tall{--gal-ar:4 / 3}
  .gal-feat--wide{--gal-ar:16 / 9}
}

/* ── 3. FILTER BAR ─────────────────────────────────────────────────────── */
.gal-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.gal-filter{display:inline-flex;align-items:center;gap:.55rem;
  padding:.62em 1.15em;border-radius:100px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:.855rem;font-weight:600;color:var(--navy);
  background:rgba(255,255,255,.72);border:1.5px solid rgba(10,22,40,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(10,22,40,.04);
  transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease}
.gal-filter:hover{background:#fff;border-color:rgba(27,79,216,.34);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(10,22,40,.10)}
.gal-filter:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.gal-filter.is-active{background:var(--royal);border-color:var(--royal);color:#fff;
  box-shadow:0 10px 26px rgba(27,79,216,.28)}
.gal-filter-count{font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;
  min-width:1.5em;padding:.1em .45em;border-radius:100px;text-align:center;
  background:rgba(10,22,40,.07);color:var(--grey-dark);transition:background .28s ease,color .28s ease}
.gal-filter.is-active .gal-filter-count{background:rgba(255,255,255,.22);color:#fff}

/* ── 3b. THE GRID ──────────────────────────────────────────────────────── */
.gal-grid{display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  align-items:start}
.gal-item{min-width:0}
.gal-item--wide{grid-column:span 2}
.gal-item--wide  .gal-frame{--gal-ar:16 / 9}
.gal-item--land  .gal-frame{--gal-ar:4 / 3}
.gal-item--port  .gal-frame{--gal-ar:3 / 4}
.gal-item--sq    .gal-frame{--gal-ar:1 / 1}
@media(max-width:720px){.gal-item--wide{grid-column:span 1}.gal-item--wide .gal-frame{--gal-ar:4 / 3}}

.gal-card{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}

/* hover / focus — shared by cards and featured tiles */
.gal-card:hover,.gal-feat:hover,
.gal-card:focus-visible,.gal-feat:focus-visible{transform:translateY(-6px);outline:none}
.gal-card:hover .gal-frame,.gal-feat:hover .gal-frame,
.gal-card:focus-visible .gal-frame,.gal-feat:focus-visible .gal-frame{
  box-shadow:0 4px 10px rgba(10,22,40,.08),0 22px 52px rgba(27,79,216,.20)}
.gal-card:hover .gal-img,.gal-feat:hover .gal-img,
.gal-card:focus-visible .gal-img,.gal-feat:focus-visible .gal-img{transform:scale(1.07)}
.gal-card:hover .gal-scrim,.gal-feat:hover .gal-scrim,
.gal-card:focus-visible .gal-scrim,.gal-feat:focus-visible .gal-scrim{opacity:1}
.gal-card:hover .gal-zoom,.gal-feat:hover .gal-zoom,
.gal-card:focus-visible .gal-zoom,.gal-feat:focus-visible .gal-zoom{transform:none;opacity:1;background:rgba(27,79,216,.72)}
.gal-card:hover .gal-plate::before,.gal-feat:hover .gal-plate::before,
.gal-card:focus-visible .gal-plate::before,.gal-feat:focus-visible .gal-plate::before{width:52px}
.gal-card:focus-visible .gal-frame,.gal-feat:focus-visible .gal-frame{
  box-shadow:0 0 0 3px var(--aqua),0 22px 52px rgba(27,79,216,.20)}

/* filtering */
.gal-item[hidden]{display:none}
.gal-item.is-entering{animation:galItemIn .5s cubic-bezier(.22,1,.36,1) backwards}
@keyframes galItemIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.gal-empty{text-align:center;padding:3rem 1rem;color:var(--grey-dark);font-size:1rem}
.gal-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 4. LIGHTBOX ───────────────────────────────────────────────────────── */
.gal-lb{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3.5rem)}
.gal-lb[hidden]{display:none}
.gal-lb-backdrop{position:absolute;inset:0;background:rgba(5,11,22,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .38s ease;cursor:zoom-out}
.gal-lb.is-open .gal-lb-backdrop{opacity:1}
.gal-lb-stage{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;
  gap:1.1rem;max-width:min(1180px,100%);width:100%;
  transform:scale(.94) translateY(10px);opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .38s ease}
.gal-lb.is-open .gal-lb-stage{transform:none;opacity:1}
.gal-lb-imgwrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;
  min-height:0}
.gal-lb-img{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain;display:block;
  border-radius:18px;background:var(--navy-mid);
  box-shadow:0 34px 90px rgba(0,0,0,.62);
  transition:opacity .28s ease}
.gal-lb.is-swapping .gal-lb-img{opacity:.25}
.gal-lb-cap{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;
  max-width:640px;padding:0 1rem}
.gal-lb-count{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--aqua)}
.gal-lb-title{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.05rem,2.4vw,1.4rem);
  color:#fff;letter-spacing:-.01em;line-height:1.25}
.gal-lb-cat{font-size:.85rem;color:rgba(255,255,255,.62)}
.gal-lb-btn{position:absolute;z-index:3;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);border-radius:50%;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s ease,transform .25s cubic-bezier(.22,1,.36,1),border-color .25s ease}
.gal-lb-btn:hover{background:var(--royal);border-color:var(--royal)}
.gal-lb-btn:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.gal-lb-btn svg{width:24px;height:24px}
.gal-lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);width:48px;height:48px}
.gal-lb-close:hover{transform:rotate(90deg)}
.gal-lb-prev,.gal-lb-next{top:50%;transform:translateY(-50%);width:54px;height:54px}
.gal-lb-prev{left:clamp(.5rem,2.5vw,2rem)}
.gal-lb-next{right:clamp(.5rem,2.5vw,2rem)}
.gal-lb-prev:hover,.gal-lb-next:hover{transform:translateY(-50%) scale(1.07)}
.gal-lb-btn[disabled]{opacity:.3;pointer-events:none}
body.gal-lb-open{overflow:hidden}
@media(max-width:720px){
  .gal-lb{padding:1rem}
  .gal-lb-img{max-height:60vh}
  .gal-lb-prev,.gal-lb-next{width:46px;height:46px;top:auto;bottom:1rem;transform:none}
  .gal-lb-prev{left:1rem}.gal-lb-next{right:1rem}
  .gal-lb-prev:hover,.gal-lb-next:hover{transform:scale(1.07)}
  .gal-lb-cap{padding-bottom:4rem}
}

/* ── Reduced motion / no-JS safety nets ────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .gal-fade,.gal-scroll-cue{opacity:1!important;transform:none!important;animation:none!important}
  .gal-scroll-line::after{animation:none}
  .gal-item.is-entering{animation:none}
  .gal-card:hover,.gal-feat:hover,.gal-card:focus-visible,.gal-feat:focus-visible{transform:none}
  .gal-card:hover .gal-img,.gal-feat:hover .gal-img{transform:none}
  .gal-frame::before{animation:none!important;opacity:0!important}
  .gal-lb-stage,.gal-lb-backdrop{transition:none}
  .gal-lb-close:hover{transform:none}
}
@media (scripting: none){
  .gal-img{opacity:1!important}
  .gal-filters{display:none}
  .gal-frame::before{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO OVERLAY REFINEMENT — video heroes site-wide            [ADDITIVE]
   Appended last, so these rules win on order without any original
   declaration being edited or removed.

   THE PROBLEM WITH THE OLD TREATMENT
   Video ran at opacity .86 over a navy section, under a scrim of .80-.82.
   Effective darkness behind the headline was ~.83 — 10.8:1 for white text,
   more than double the 4.5:1 AA needs. Footage was being thrown away to buy
   contrast nobody asked for.

   WHY NOT SIMPLY LIGHTEN IT
   A flat scrim has to be dark enough for the worst pixel anywhere under the
   text. Headlines here measure 65-93% of frame width, so a uniform wash
   bright enough to show the video drops the copy under AA on a light frame.

   THE TREATMENT
   Shape the scrim to the text instead of the frame. A light .12 tint unifies
   the hero; on top sits a feathered ellipse sized and placed from each
   page's measured text bounding box, per breakpoint. Copy sits in the solid
   core; everything outside — most of the frame, since text occupies only
   47-63% of hero height — stays essentially clear.

   ALL NUMBERS ARE MEASURED
   Contrast was verified by compositing each hero over a pure-white video
   frame (the worst case white text can face), hiding the glyphs, sampling
   the real pixels underneath and computing the true ratio.

   TUNING
   --hero-scrim is the ellipse core alpha. With the .12 tint the AA floor for
   body text is .53; below that copy fails on bright footage. Per-page
   ellipse geometry lives in the .hero-tune--* blocks.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --hero-scrim: .62;        /* ellipse core alpha — AA floor .53 with the tint */
  --hero-tint: .07;         /* whole-frame unifying wash                       */
  --hero-scrim-top: .62;    /* band under the fixed transparent header        */
  --hero-scrim-foot: .20;   /* grounds the bottom edge                         */
  --hx: 42%; --hy: 48%;     /* ellipse centre  (overridden per page)           */
  --hrx: 74%; --hry: 56%;   /* ellipse radii   (overridden per page)           */
}

/* 1 ── Let the footage through at full strength (was .86) ─────────────── */
.hero-video-bg video,
.page-hero-video video,
.gal-hero-media img{opacity:1}

/* 2 ── Shaped scrim: header band + text ellipse + foot lift + light tint ─ */
.hero-video-bg::after,
.page-hero-video::after,
.gal-hero-media::after{
  background:
    /* Header band. .site-header is position:fixed with no background until
       scrolled, so nav links sit straight on the video. They measured 4.1:1 against a
       band that faded by 88px. With the .12 tint, AA needs
       >=.55 alpha wherever a link sits, so full strength is held past the
       77px header before releasing. */
    linear-gradient(to bottom,
      rgba(10,22,40,var(--hero-scrim-top)) 0,
      rgba(10,22,40,calc(var(--hero-scrim-top) * .92)) 58px,
      rgba(10,22,40,calc(var(--hero-scrim-top) * .34)) 96px,
      rgba(10,22,40,0) 150px),
    radial-gradient(ellipse var(--hrx) var(--hry) at var(--hx) var(--hy),
      rgba(10,22,40,var(--hero-scrim)) 0%,
      rgba(10,22,40,var(--hero-scrim)) 64%,
      rgba(10,22,40,calc(var(--hero-scrim) * .56)) 81%,
      rgba(10,22,40,calc(var(--hero-scrim) * .20)) 93%,
      rgba(10,22,40,0) 100%),
    linear-gradient(to top,
      rgba(10,22,40,var(--hero-scrim-foot)) 0%,
      rgba(10,22,40,0) 30%),
    linear-gradient(rgba(10,22,40,var(--hero-tint)),rgba(10,22,40,var(--hero-tint)));
}

/* 3 ── Per-page geometry from measured text bounding boxes ───────────────
       Each ellipse is the union of that page's text rects at 1440 and 1280,
       padded, divided by .55 so the copy sits inside the solid core
       (which the gradient holds out to 64% of the radius).
       towel-folders has the shortest headline (rx 46%) so keeps the most
       open frame; coin-operated has the longest (rx 86%) and the least. */
.hero-tune--index         {--hx:35%;--hy:40%;--hrx:61%;--hry:49%}
.hero-tune--about         {--hx:44%;--hy:48%;--hrx:78%;--hry:64%}
.hero-tune--industrial    {--hx:44%;--hy:48%;--hrx:79%;--hry:53%}
.hero-tune--coin-operated {--hx:48%;--hy:48%;--hrx:86%;--hry:57%}
.hero-tune--wet-cleaning  {--hx:38%;--hy:48%;--hrx:67%;--hry:50%}
.hero-tune--towel-folders {--hx:26%;--hy:48%;--hrx:46%;--hry:53%}
.gal-hero                 {--hx:33%;--hy:46%;--hrx:60%;--hry:56%}

.hero{--hero-scrim-foot:.26}
.page-hero:not(.page-hero--video):has(.page-hero-video){--hero-scrim-top:.64}

/* 4 ── Tablet and below: copy reflows to near-full width, so the ellipse
       widens and flattens. It still clears the top and bottom of the frame,
       which is where the video reads on a phone. */
@media (max-width:1024px){
  :root                     {--hero-scrim:.70}
  .hero-tune--index         {--hx:48%;--hy:35%;--hrx:85%;--hry:38%}
  .hero-tune--about         {--hx:47%;--hy:43%;--hrx:84%;--hry:62%}
  .hero-tune--industrial    {--hx:48%;--hy:42%;--hrx:86%;--hry:56%}
  .hero-tune--coin-operated {--hx:49%;--hy:43%;--hrx:87%;--hry:55%}
  .hero-tune--wet-cleaning  {--hx:45%;--hy:43%;--hrx:79%;--hry:54%}
  .hero-tune--towel-folders {--hx:47%;--hy:41%;--hrx:84%;--hry:49%}
  .gal-hero                 {--hx:47%;--hy:44%;--hrx:86%;--hry:56%}
}

/* 5 ── Text tokens: recover the contrast the lighter scrim gives up.
       Colour only — no size, weight, spacing or layout is touched. */
.hero-video-bg ~ .hero-content .hero-sub{color:rgba(255,255,255,.95)}
.page-hero--video .page-hero-content .lead,
.page-hero:has(.page-hero-video) .page-hero-content .lead,
.gal-hero .lead{color:rgba(255,255,255,.95)}

/* .45 white was already under AA before this change and fails outright once
   the scrim lifts, so breadcrumbs move to a legible weight on video heroes. */
.page-hero:has(.page-hero-video) .breadcrumb a,
.page-hero:has(.page-hero-video) .breadcrumb span,
.page-hero--video .breadcrumb a,
.page-hero--video .breadcrumb span,
.gal-hero .breadcrumb a,.gal-hero .breadcrumb span{color:rgba(255,255,255,.97)}
.page-hero:has(.page-hero-video) .breadcrumb a:hover,
.page-hero--video .breadcrumb a:hover{color:var(--aqua)}

/* 6 ── Aqua accents get their own backdrop ───────────────────────────────
       Brand aqua measures 2.3:1 on a lifted scrim over a light frame; it
       only passed before because the wash was so heavy. Rather than darken
       a whole hero for one line of 12px type, the accent gets a local glass
       chip — ~5:1 on any footage, matching the badge already on the
       homepage. */
.page-hero:has(.page-hero-video) .page-hero-content .eyebrow,
.page-hero--video .page-hero-content .eyebrow{
  display:inline-block;padding:.45em 1.05em;border-radius:100px;
  /* Layout-neutral: the chip's vertical padding and border are cancelled by
     an equal negative block margin, so hero height, the content box and
     everything below stay pixel-identical to the previous build. */
  margin-block:calc(-.45em - 1px);margin-inline:0;
  background:rgba(10,22,40,.58);border:1px solid rgba(0,194,203,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.hero-video-bg ~ .hero-content .hero-badge{
  background:rgba(10,22,40,.58);border-color:rgba(0,194,203,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* 7 ── Outline CTA: a 40% white border is ~2:1 against a lit frame, under
       the 3:1 WCAG asks of a control boundary. Firmed up, with a light
       backdrop so the control still reads as a control over moving video. */
.hero-video-bg ~ .hero-content .btn-outline,
.page-hero:has(.page-hero-video) .btn-outline,
.page-hero--video .btn-outline{
  border-color:rgba(255,255,255,.68);background:rgba(10,22,40,.47);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-video-bg ~ .hero-content .btn-outline:hover,
.page-hero:has(.page-hero-video) .btn-outline:hover,
.page-hero--video .btn-outline:hover{
  border-color:#fff;background:rgba(255,255,255,.14);
}

/* 8 ── Tighter shadows. Perceptual support only — every ratio above is met
       by the scrim alone, since WCAG gives no credit for text-shadow. */
.hero-video-bg ~ .hero-content h1,
.hero-video-bg ~ .hero-content .hero-sub,
.hero-video-bg ~ .hero-content .eyebrow,
.page-hero:has(.page-hero-video) .page-hero-content h1,
.page-hero:has(.page-hero-video) .page-hero-content .lead,
.page-hero--video .page-hero-content h1,
.page-hero--video .page-hero-content .lead,
.gal-hero h1,.gal-hero .lead{
  text-shadow:0 1px 2px rgba(10,22,40,.55),0 2px 14px rgba(10,22,40,.42);
}

/* 9 ── If the video never starts (blocked, save-data, decode failure) the
       existing .video-failed path hides the container and the navy section
       background shows through. White on navy is 15:1, so the fallback is
       safe with no scrim at all — nothing to do but stay out of the way. */

/* ═══════════════════════════════════════════════════════════════
   COIN-OPERATED PAGE — CATEGORISED PRODUCT CATALOG (.cocat-*)
   Additive + namespaced. Adds nothing to, and overrides nothing in,
   the existing .co-* families. Uses existing design tokens only.
   Port back into theme.py.
   ═══════════════════════════════════════════════════════════════ */

/* ── Category quick-nav ───────────────────────────────────────── */
.cocat-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.cocat-navlink{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem 1.15rem;border-radius:100px;background:#fff;border:1.5px solid var(--slate-mid);font-size:.875rem;font-weight:600;line-height:1.2;color:var(--navy);transition:var(--transition)}
.cocat-navlink:hover{border-color:rgba(27,79,216,.4);color:var(--royal);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.cocat-navlink:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.cocat-navnum{font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;color:var(--aqua)}

/* ── Category block + separation between categories ───────────── */
.cocat{scroll-margin-top:104px;margin-top:clamp(2.5rem,5vw,3.75rem)}
.cocat + .cocat{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--slate-mid)}

/* ── Category heading ─────────────────────────────────────────── */
.cocat-head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(.9rem,2vw,1.5rem);padding-bottom:1.15rem;border-bottom:2px solid var(--slate-mid)}
.cocat-head::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--royal);border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1) .12s}
.cocat-head.visible::after{width:80px}
.cocat-index{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.9rem,4vw,2.75rem);line-height:1;letter-spacing:-.045em;color:rgba(27,79,216,.26)}
.cocat-title{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.14;letter-spacing:-.015em;color:var(--navy);text-wrap:balance}
.cocat-sizes{margin-top:.35rem;font-family:"Space Mono",monospace;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--aqua)}
.cocat-range{justify-self:end;font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--royal);white-space:nowrap}

/* ── Category body: image + copy ──────────────────────────────── */
.cocat-body{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.cocat-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(150deg,#fff 0%,var(--slate) 60%,var(--slate-mid) 100%);box-shadow:var(--shadow-card);padding:clamp(1.25rem,3vw,2.25rem);transition:box-shadow .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.cocat-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(27,79,216,.06);border-radius:inherit;pointer-events:none}
.cocat-visual:hover .cocat-frame{box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.cocat-frame img{display:block;width:100%;height:clamp(280px,32vw,400px);object-fit:contain;filter:drop-shadow(0 22px 38px rgba(10,22,40,.14));transition:transform .5s cubic-bezier(.4,0,.2,1)}
.cocat-visual:hover .cocat-frame img{transform:scale(1.035)}
.cocat-tag{position:absolute;top:1.05rem;left:1.05rem;z-index:2;font-family:"Space Mono",monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--royal);padding:.42em .9em;border-radius:100px;box-shadow:0 6px 18px rgba(27,79,216,.32)}
.cocat-caps{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.1rem}
.cocat-cap{font-family:"Space Mono",monospace;font-size:.76rem;font-weight:700;color:var(--royal);background:#fff;border:1.5px solid var(--slate-mid);border-radius:100px;padding:.35em 1em;transition:var(--transition)}
.cocat-visual:hover .cocat-cap{border-color:rgba(27,79,216,.35)}

.cocat-lead{font-size:1.05rem;line-height:1.65;color:var(--grey-dark)}
.cocat-feat{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.cocat-feat li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--navy)}
.cocat-feat li svg{flex:0 0 auto;width:20px;height:20px;margin-top:.1rem;color:#fff;background:var(--aqua);border-radius:50%;padding:3px;box-shadow:0 3px 10px rgba(0,194,203,.35)}
.cocat-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}

/* ── Model strip: equal-height spec cards ─────────────────────── */
.cocat-models{margin-top:clamp(1.75rem,3.5vw,2.5rem);background:var(--slate);border:1px solid var(--slate-mid);border-radius:var(--r-lg);padding:clamp(1.15rem,2.5vw,1.75rem)}
.cocat-models-title{font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:1rem}
.cocat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,206px),1fr));gap:clamp(.8rem,1.6vw,1.1rem);align-items:stretch}
.cocat-mcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--slate-mid);border-top:3px solid var(--royal);border-radius:var(--r-md);padding:1.1rem 1.15rem 1.25rem;transition:var(--transition)}
.cocat-mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-top-color:var(--aqua)}
.cocat-mcode{font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--royal)}
.cocat-mcap{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.45rem;line-height:1;letter-spacing:-.02em;color:var(--navy);margin-top:.4rem}
.cocat-mspecs{margin:.85rem 0 0;padding-top:.8rem;border-top:1px solid var(--slate-mid);display:grid;gap:.42rem}
.cocat-mspecs > div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.cocat-mspecs dt{font-size:.75rem;line-height:1.35;color:var(--grey)}
.cocat-mspecs dd{margin:0;font-size:.8rem;font-weight:700;line-height:1.35;color:var(--navy);text-align:right}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:1024px){
  .cocat-body{grid-template-columns:1fr;gap:1.85rem}
  .cocat-frame img{height:clamp(260px,50vw,370px)}
  .cocat-copy{max-width:64ch}
}
@media (max-width:700px){
  .cocat-head{grid-template-columns:auto minmax(0,1fr);row-gap:.6rem}
  .cocat-range{grid-column:1 / -1;justify-self:start;font-size:.74rem}
  .cocat-head.visible::after{width:56px}
  .cocat-navlink{flex:1 1 auto;justify-content:center}
}
@media (max-width:520px){
  .cocat-grid{grid-template-columns:1fr}
  .cocat-mcard{padding:1rem 1.05rem 1.1rem}
  .cocat-actions .btn{flex:1 1 100%;justify-content:center}
  .cocat-navlink{font-size:.82rem;padding:.5rem .9rem}
}

/* ── Deep-linked spec section clears the fixed header ─────────── */
.co-spec-section{scroll-margin-top:96px}

/* ── No-JS + reduced motion ───────────────────────────────────── */
@media (scripting: none){
  .cocat-head::after{width:80px}
}
@media (prefers-reduced-motion:reduce){
  .cocat-frame,.cocat-frame img,.cocat-mcard,.cocat-navlink,.cocat-head::after{transition:none!important;animation:none!important}
  .cocat-visual:hover .cocat-frame,.cocat-visual:hover .cocat-frame img,.cocat-mcard:hover,.cocat-navlink:hover{transform:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   QUOTE FORM — grid min-sizing fix                    [ADDITIVE]
   Pre-existing defect, not introduced by the category work:
   `.form-grid{grid-template-columns:1fr 1fr}` resolves each track to
   minmax(auto,1fr), so the tracks cannot shrink below the inputs'
   intrinsic min-content width (size=20 ≈ 234px). Between ~900–1100px
   the two 234px columns exceed the 367px form and push the document
   ~41px wider than the viewport.
   Floors the tracks at 0 and lets the controls fill their column.
   No effect above ~1100px or below 640px — the fields already
   stretched to full width there. Safe to delete as a block.
   Port back into theme.py.
   ═══════════════════════════════════════════════════════════════ */
.form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form-group{min-width:0}
.form-group input,
.form-group textarea,
.form-group select{width:100%;max-width:100%;min-width:0}
@media(max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}

/* ═══════════════════════════════════════════════════════════════
   INDUSTRIAL PAGE — CATEGORISED PRODUCT CATALOG (.iwcat-*)
   Additive + namespaced. Adds nothing to, and overrides nothing in,
   the existing .iw-* or .cocat-* families. Uses existing design
   tokens only (plus the shared .iw-tag-ember / .iw-tag-royal chips).
   Port back into theme.py.
   ═══════════════════════════════════════════════════════════════ */

/* ── Category quick-nav ───────────────────────────────────────── */
.iwcat-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.iwcat-navlink{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem 1.15rem;border-radius:100px;background:#fff;border:1.5px solid var(--slate-mid);font-size:.875rem;font-weight:600;line-height:1.2;color:var(--navy);transition:var(--transition)}
.iwcat-navlink:hover{border-color:rgba(27,79,216,.4);color:var(--royal);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.iwcat-navlink:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.iwcat-navnum{font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;color:var(--aqua)}

/* ── Category block + separation between categories ───────────── */
.iwcat{scroll-margin-top:104px;margin-top:clamp(2.5rem,5vw,3.75rem)}
.iwcat + .iwcat{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--slate-mid)}

/* ── Category heading ─────────────────────────────────────────── */
.iwcat-head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(.9rem,2vw,1.5rem);padding-bottom:1.15rem;border-bottom:2px solid var(--slate-mid)}
.iwcat-head::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--royal);border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1) .12s}
.iwcat-head.visible::after{width:80px}
/* washer categories use the ember accent seam, dryers the royal one */
#cat-washer .iwcat-head::after,#cat-ft-washer .iwcat-head::after{background:var(--ember)}
.iwcat-index{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.9rem,4vw,2.75rem);line-height:1;letter-spacing:-.045em;color:rgba(27,79,216,.26)}
#cat-washer .iwcat-index,#cat-ft-washer .iwcat-index{color:rgba(255,107,53,.28)}
.iwcat-title{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.14;letter-spacing:-.015em;color:var(--navy);text-wrap:balance}
.iwcat-sizes{margin-top:.35rem;font-family:"Space Mono",monospace;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--aqua)}
.iwcat-range{justify-self:end;font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--royal);white-space:nowrap}

/* ── Category body: image + copy ──────────────────────────────── */
.iwcat-body{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.iwcat-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(150deg,#fff 0%,var(--slate) 60%,var(--slate-mid) 100%);box-shadow:var(--shadow-card);padding:clamp(1.25rem,3vw,2.25rem);transition:box-shadow .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.iwcat-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(27,79,216,.06);border-radius:inherit;pointer-events:none}
.iwcat-frame--ember{background:linear-gradient(150deg,#fff 0%,#fff5f0 62%,#ffe9dd 100%)}
.iwcat-frame--ember::after{border-color:rgba(255,107,53,.08)}
.iwcat-visual:hover .iwcat-frame{box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.iwcat-frame img{display:block;width:100%;height:clamp(300px,34vw,430px);object-fit:contain;filter:drop-shadow(0 22px 38px rgba(10,22,40,.16));transition:transform .5s cubic-bezier(.4,0,.2,1)}
.iwcat-visual:hover .iwcat-frame img{transform:scale(1.035)}
.iwcat-tag{position:absolute;top:1.05rem;left:1.05rem;z-index:2;font-family:"Space Mono",monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.42em .9em;border-radius:100px;box-shadow:0 6px 18px rgba(10,22,40,.22)}
.iwcat-caps{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.1rem}
.iwcat-cap{font-family:"Space Mono",monospace;font-size:.76rem;font-weight:700;color:var(--navy);background:#fff;border:1.5px solid var(--slate-mid);border-radius:100px;padding:.35em 1em;transition:var(--transition)}
.iwcat-visual:hover .iwcat-cap{border-color:rgba(27,79,216,.35)}

.iwcat-lead{font-size:1.05rem;line-height:1.65;color:var(--grey-dark)}
.iwcat-feat{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.iwcat-feat li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--navy)}
.iwcat-feat li svg{flex:0 0 auto;width:20px;height:20px;margin-top:.1rem;color:#fff;background:var(--aqua);border-radius:50%;padding:3px;box-shadow:0 3px 10px rgba(0,194,203,.35)}
.iwcat-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}

/* ── Model strip: equal-height spec cards ─────────────────────── */
.iwcat-models{margin-top:clamp(1.75rem,3.5vw,2.5rem);background:var(--slate);border:1px solid var(--slate-mid);border-radius:var(--r-lg);padding:clamp(1.15rem,2.5vw,1.75rem)}
.iwcat-models-title{font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:1rem}
.iwcat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,206px),1fr));gap:clamp(.8rem,1.6vw,1.1rem);align-items:stretch}
.iwcat-mcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--slate-mid);border-top:3px solid var(--royal);border-radius:var(--r-md);padding:1.1rem 1.15rem 1.25rem;transition:var(--transition)}
#cat-washer .iwcat-mcard,#cat-ft-washer .iwcat-mcard{border-top-color:var(--ember)}
.iwcat-mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-top-color:var(--aqua)}
.iwcat-mcode{font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--royal)}
#cat-washer .iwcat-mcode,#cat-ft-washer .iwcat-mcode{color:var(--ember)}
.iwcat-mcap{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.45rem;line-height:1;letter-spacing:-.02em;color:var(--navy);margin-top:.4rem}
.iwcat-mspecs{margin:.85rem 0 0;padding-top:.8rem;border-top:1px solid var(--slate-mid);display:grid;gap:.42rem}
.iwcat-mspecs > div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.iwcat-mspecs dt{font-size:.75rem;line-height:1.35;color:var(--grey)}
.iwcat-mspecs dd{margin:0;font-size:.8rem;font-weight:700;line-height:1.35;color:var(--navy);text-align:right}

/* single-model category: a quiet note card keeps the row balanced */
.iwcat-mcard--note{justify-content:center;background:transparent;border:1px dashed var(--slate-mid);border-top:1px dashed var(--slate-mid)}
.iwcat-mcard--note:hover{transform:none;box-shadow:none;border-color:var(--slate-mid)}
.iwcat-mnote-k{font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--royal)}
.iwcat-mnote-v{margin-top:.5rem;font-size:.82rem;line-height:1.55;color:var(--grey-dark)}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:1024px){
  .iwcat-body{grid-template-columns:1fr;gap:1.85rem}
  .iwcat-frame img{height:clamp(280px,52vw,390px)}
  .iwcat-copy{max-width:64ch}
}
@media (max-width:700px){
  .iwcat-head{grid-template-columns:auto minmax(0,1fr);row-gap:.6rem}
  .iwcat-range{grid-column:1 / -1;justify-self:start;font-size:.74rem}
  .iwcat-head.visible::after{width:56px}
  .iwcat-navlink{flex:1 1 auto;justify-content:center}
}
@media (max-width:520px){
  .iwcat-grid{grid-template-columns:1fr}
  .iwcat-mcard{padding:1rem 1.05rem 1.1rem}
  .iwcat-mcard--note{display:none}
  .iwcat-actions .btn{flex:1 1 100%;justify-content:center}
  .iwcat-navlink{font-size:.82rem;padding:.5rem .9rem}
}

/* ── Deep-linked spec section clears the fixed header ─────────── */
.iw-specs{scroll-margin-top:96px}

/* ── No-JS + reduced motion ───────────────────────────────────── */
@media (scripting: none){
  .iwcat-head::after{width:80px}
}
@media (prefers-reduced-motion:reduce){
  .iwcat-frame,.iwcat-frame img,.iwcat-mcard,.iwcat-navlink,.iwcat-head::after{transition:none!important;animation:none!important}
  .iwcat-visual:hover .iwcat-frame,.iwcat-visual:hover .iwcat-frame img,.iwcat-mcard:hover,.iwcat-navlink:hover{transform:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   INDUSTRIAL SPECS — overview cards + 4-tab tables (.iws-*)  [ADDITIVE]
   Reuses the existing .iw-spec-table / .iw-spec-scroll / .iw-hl styles.
   Port back into theme.py.
   ═══════════════════════════════════════════════════════════════ */
.iws-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(1rem,2vw,1.5rem);margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.iws-ov-card{background:#fff;border:1px solid var(--slate-mid);border-radius:var(--r-lg);padding:1.5rem;border-top:3px solid var(--royal);transition:var(--transition)}
.iws-ov--ember{border-top-color:var(--ember)}
.iws-ov-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-top-color:var(--aqua)}
.iws-ov-kicker{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;color:var(--navy);line-height:1.2}
.iws-ov-range{display:block;margin-top:.3rem;font-family:"Space Mono",monospace;font-size:.76rem;font-weight:700;color:var(--royal)}
.iws-ov--ember .iws-ov-range{color:var(--ember)}
.iws-ov-facts{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.iws-ov-facts li{font-size:.85rem;color:var(--grey-dark);padding-left:1.1rem;position:relative}
.iws-ov-facts li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.iws-ov-facts b{color:var(--navy);font-weight:700}

.iws-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.iws-tab{font-family:"Inter",sans-serif;font-size:.9rem;font-weight:600;color:var(--grey-dark);background:#fff;border:1.5px solid var(--slate-mid);border-radius:100px;padding:.6em 1.35em;min-height:44px;cursor:pointer;transition:var(--transition)}
.iws-tab:hover{border-color:rgba(27,79,216,.4);color:var(--royal)}
.iws-tab.is-active{background:var(--royal);border-color:var(--royal);color:#fff;box-shadow:0 8px 22px rgba(27,79,216,.28)}
.iws-tab:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.iws-panel[hidden]{display:none}
.iws-panel{animation:iwsFade .4s cubic-bezier(.4,0,.2,1)}
@keyframes iwsFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.iws-panel .iw-spec-scroll{border-radius:var(--r-lg);box-shadow:var(--shadow-card);background:#fff;-webkit-overflow-scrolling:touch}
.iws-panel-note{text-align:center;margin-top:1rem;font-size:.82rem;color:var(--grey)}

/* Model lineup: 4-up grid (was 2-up) */
.iw-model-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.iw-model-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.iw-model-grid--4{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .iws-ov-card,.iws-tab{transition:none!important;animation:none!important}
  .iws-ov-card:hover{transform:none!important}
  .iws-panel{animation:none!important}
}