/* ======================================================================
   G LAUNDRY — Design System
   Baby blue + white premium commercial-laundry brand, dark navy accents.
   ====================================================================== */

:root{
  /* Brand palette */
  --blue-50:   #EAF5FB;
  --blue-100:  #D7ECF8;
  --blue-300:  #6FB6E6;
  --blue-500:  #1E7FC2;
  --blue-600:  #1464A5;
  --blue-700:  #0F5488;
  --navy-700:  #0F2A4A;
  --navy-800:  #083B66;
  --navy-900:  #062A46;
  --white:     #FFFFFF;
  --grey-50:   #F5F7F9;
  --grey-100:  #EEF1F4;
  --grey-300:  #D7DEE4;
  --text-grey: #5F6B76;
  --text-dark: #16232E;
  --success:   #1E8E5A;
  --danger:    #C23B3B;

  /* Typography */
  --font-head: 'Plus Jakarta Sans', 'Manrope', 'Inter', system-ui, sans-serif;
  --font-display: 'Playfair Display', 'Plus Jakarta Sans', Georgia, serif;
  --font-body: 'Inter', 'DM Sans', system-ui, sans-serif;

  /* Layout */
  --container: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(15,42,74,.06);
  --shadow-md: 0 10px 30px rgba(15,42,74,.10);
  --shadow-lg: 0 24px 60px rgba(15,42,74,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 96px;
  --font-script: 'Caveat', cursive;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
svg{ width:1em; height:1em; } /* safe default for any inline icon() SVG not given explicit sizing */
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--navy-900); line-height:1.15; margin:0 0 .5em; letter-spacing:-0.01em; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--text-grey); line-height:1.7; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; position:relative; }
.section-tight{ padding:56px 0; }
@media (max-width:768px){
  .section{ padding:64px 0; }
  .section-tight{ padding:40px 0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--blue-600); font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--blue-500); display:inline-block; }

.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem, 2.6vw, 2.5rem); }
.lead{ font-size:1.05rem; color:var(--text-grey); line-height:1.75; }
.section-head.center .lead{ max-width:620px; margin:14px auto 0; }
.bg-soft{ background:var(--blue-50); }
.bg-grey{ background:var(--grey-50); }
.bg-navy{ background:var(--navy-900); }
.bg-navy h2, .bg-navy h3, .bg-navy p{ color:var(--white); }
.bg-navy .text-muted{ color:#AFC6DA; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1.5px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; transition:transform .25s var(--ease); flex-shrink:0; }
.btn-primary{
  background:linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--blue-700) 100%);
  color:var(--white); position:relative; overflow:hidden;
  box-shadow:0 10px 24px rgba(20,100,165,.30), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(6,42,70,.18);
}
.btn-primary:hover{ background:linear-gradient(180deg, var(--blue-500) 0%, var(--blue-700) 65%, var(--navy-800) 100%); transform:translateY(-2px); box-shadow:0 14px 30px rgba(20,100,165,.4), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(6,42,70,.2); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.5); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }
.btn-outline-dark{ background:transparent; border-color:var(--blue-600); color:var(--blue-600); }
.btn-outline-dark:hover{ background:var(--blue-600); color:#fff; transform:translateY(-2px); }
.btn-navy{ background:var(--navy-900); color:#fff; }
.btn-navy:hover{ background:var(--navy-700); transform:translateY(-2px); box-shadow:0 14px 30px rgba(6,42,70,.35); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }

/* ---------- Loading Screen ---------- */
#loader{
  position:fixed; inset:0; z-index:9999; background:linear-gradient(160deg,var(--navy-900),var(--blue-700));
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#loader.no-transition{ transition:none; }
.loader-logo{ width:88px; height:88px; margin-bottom:22px; animation:loaderPulse 1.8s ease-in-out infinite; filter:drop-shadow(0 8px 24px rgba(0,0,0,.25)); }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.loader-word{ font-family:var(--font-head); color:#fff; font-weight:800; letter-spacing:.08em; font-size:1.5rem; }
.loader-sub{ color:var(--blue-100); font-size:.85rem; margin-top:8px; letter-spacing:.03em; }
.loader-bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.loader-bar{ width:160px; height:3px; background:rgba(255,255,255,.2); border-radius:99px; margin-top:22px; overflow:hidden; }
.loader-bar span{ display:block; height:100%; width:40%; background:#fff; border-radius:99px; animation:loaderBar 1.1s ease-in-out infinite; }
@keyframes loaderBar{ 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }

/* ---------- Bubbles (decorative) ---------- */
.bubble{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.05) 70%);
  opacity:.5; pointer-events:none;
  animation:floatUp linear infinite;
}
.bg-navy .bubble, .hero .bubble{ background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.03) 70%); }
@keyframes floatUp{
  0%{ transform:translateY(20px) translateX(0) scale(1); opacity:0; }
  10%{ opacity:.5; }
  90%{ opacity:.35; }
  100%{ transform:translateY(-420px) translateX(30px) scale(1.15); opacity:0; }
}

/* ---------- Navbar (floating pill) ---------- */
.nav-wrap{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:16px 20px 0; pointer-events:none; }
.navbar{
  pointer-events:auto;
  max-width:var(--container); margin:0 auto;
  height:76px; display:flex; align-items:center;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-radius:999px; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 34px rgba(15,42,74,.10);
  padding:0 12px 0 22px;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), height .35s var(--ease), background .35s var(--ease);
}
.nav-wrap.solid .navbar{ box-shadow:0 14px 38px rgba(15,42,74,.16); background:rgba(255,255,255,.98); height:70px; }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:0; max-width:none; }
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand img{ height:44px; width:auto; transition:height .3s var(--ease); }
.nav-wrap.solid .nav-brand img{ height:38px; }
.nav-brand .brand-text{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.nav-brand .brand-text strong{ font-family:var(--font-head); font-size:1.05rem; color:var(--navy-900); letter-spacing:.02em; }
.nav-brand .brand-text span{ font-size:.6rem; color:var(--blue-600); letter-spacing:.07em; font-weight:700; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-weight:600; font-size:.93rem; color:var(--navy-900); position:relative; padding:6px 0; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--blue-500); transition:width .25s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--blue-600); }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-phone{
  display:flex; align-items:center; gap:9px; font-weight:700; color:var(--navy-900); font-size:.88rem;
  background:var(--blue-50); border-radius:999px; padding:8px 16px 8px 8px; white-space:nowrap;
}
.nav-phone .icon-circle{ width:30px; height:30px; border-radius:50%; background:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-phone svg{ width:15px; height:15px; color:#fff; }
.navbar .btn-primary{ border-radius:999px; }
.nav-cart{ position:relative; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--blue-50); flex-shrink:0; }
.nav-cart svg{ width:19px; height:19px; color:var(--navy-900); }
.nav-cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--blue-600); color:#fff; font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1;
}
.nav-burger{ display:none; flex-direction:column; gap:5px; width:32px; height:32px; align-items:center; justify-content:center; border:none; background:none; }
.nav-burger span{ width:24px; height:2px; background:var(--navy-900); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }

.mobile-menu{
  position:fixed; inset:0; z-index:999; background:var(--white);
  display:flex; flex-direction:column; padding:110px 28px 40px;
  transform:translateX(100%); transition:transform .4s var(--ease); overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu > a:not(.btn){ display:block; font-family:var(--font-head); font-size:1.4rem; font-weight:700; color:var(--navy-900); padding:14px 0; border-bottom:1px solid var(--grey-100); }
.mobile-menu .btn{ margin-top:24px; }
.mobile-menu-close{ position:absolute; top:26px; right:24px; width:40px; height:40px; border-radius:50%; background:var(--grey-50); border:none; display:flex; align-items:center; justify-content:center; }

/* Mobile menu quick actions: Shop / Cart / Call as one light row of compact
   icon buttons instead of three stacked full-width buttons, so the drawer
   footer reads as a light utility row rather than four heavy CTAs. */
.mobile-menu-actions{ display:flex; gap:8px; margin-top:12px; }
.mobile-menu-action{
  flex:1; display:flex !important; flex-direction:column; align-items:center; gap:6px;
  padding:14px 6px; border-radius:var(--radius-md); border:1.5px solid var(--grey-200);
  color:var(--navy-900); font-family:var(--font-body); font-size:.74rem; font-weight:700;
  text-align:center; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.mobile-menu-action svg{ width:19px; height:19px; color:var(--blue-600); }
.mobile-menu-action:hover{ background:var(--blue-50); border-color:var(--blue-100); }

@media (max-width:1024px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-phone{ display:none; }
  /* With nav-links hidden, the Quote/Shop/Cart/Burger cluster is tight against the
     brand — drop the subtitle so the wordmark can't overlap the button next to it. */
  .nav-brand .brand-text span{ display:none; }
}
@media (max-width:640px){
  /* The sticky mobile-cta-bar already offers Call + Get a Quote, so the
     top nav only needs the brand and the menu toggle at this width — with
     those buttons gone there's no overlap risk, so bring the "Commercial
     Laundry & Linen" subtitle back, stacked under the G LAUNDRY wordmark. */
  .nav-actions .btn-primary{ display:none; }
  .nav-shop-btn{ display:none; }
  .nav-brand .brand-text span{ display:block; }
}
@media (max-width:480px){
  .nav-wrap{ padding:12px 12px 0; }
  .navbar{ padding:0 8px 0 16px; height:68px; }
  .nav-brand .brand-text strong{ font-size:.92rem; }
  .nav-brand .brand-text span{ font-size:.54rem; }
  .nav-actions{ gap:6px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(100deg, rgba(247,251,254,.97) 0%, rgba(233,244,253,.90) 42%, rgba(203,230,249,.45) 70%, rgba(184,218,246,.22) 100%),
    url("../images/bg/hero-bubbles.jpg") center right / cover no-repeat,
    linear-gradient(180deg, var(--blue-50) 0%, #F7FBFE 60%, var(--white) 100%);
  box-shadow:inset 0 -50px 70px -40px rgba(6,42,70,.14);
  padding:calc(var(--nav-h) + 56px) 0 90px;
}
@media (max-width:640px){
  .hero{
    background:
      linear-gradient(180deg, rgba(247,251,254,.97) 0%, rgba(224,240,252,.92) 100%),
      url("../images/bg/hero-bubbles.jpg") center top / cover no-repeat,
      linear-gradient(180deg, var(--blue-50) 0%, #F7FBFE 60%, var(--white) 100%);
    padding-bottom:40px;
  }
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--blue-100); padding:8px 16px 8px 10px; border-radius:999px; box-shadow:var(--shadow-sm); font-size:.8rem; font-weight:700; color:var(--blue-600); margin-bottom:22px; }
.hero-eyebrow .dot{ width:9px; height:9px; border-radius:50%; background:var(--blue-500); box-shadow:0 0 0 4px var(--blue-100); }
.hero h1{ font-size:clamp(2.3rem, 4.2vw, 3.6rem); margin-bottom:.4em; }
.hero h1 .accent{ color:var(--blue-600); }
.hero-sub{ font-size:1.1rem; margin-bottom:1em; color:var(--navy-800); font-weight:600; }
.hero-copy{ font-size:1.05rem; max-width:520px; margin-bottom:32px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:38px; }

/* Hero benefit row: Premium Quality / On-Time Delivery / Eco-Friendly Processes / Dedicated Support */
.hero-benefits{ display:grid; grid-template-columns:repeat(4,auto); gap:26px; max-width:520px; }
.hero-benefit{ display:flex; align-items:center; gap:10px; }
.hero-benefit .icon{ width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-benefit .icon svg{ width:18px; height:18px; color:var(--blue-600); }
.hero-benefit span{ font-weight:700; font-size:.8rem; color:var(--navy-900); line-height:1.2; }
@media (max-width:1180px){ .hero-benefits{ grid-template-columns:repeat(2,auto); max-width:none; } }
@media (max-width:560px){ .hero-benefits{ grid-template-columns:repeat(2,1fr); gap:16px 10px; } }

.hero-visual{ position:relative; }
.hero-blob{
  position:absolute; inset:-8% -8% -8% 6%; z-index:0;
  background:linear-gradient(135deg, var(--blue-300), var(--blue-600));
  border-radius:44% 56% 62% 38% / 46% 40% 60% 54%;
  filter:blur(0);
  opacity:.18;
}
/* Layered rings behind the hero photo for extra depth */
.hero-visual .ring{ position:absolute; z-index:0; border-radius:50%; border:1.5px solid rgba(20,100,165,.16); pointer-events:none; }
.hero-visual .ring-1{ inset:-4%; }
.hero-visual .ring-2{ inset:-11%; border-color:rgba(20,100,165,.1); }
.hero-visual .ring-glow{
  position:absolute; z-index:0; inset:-16%; border-radius:50%;
  background:radial-gradient(circle, rgba(20,100,165,.14) 0%, rgba(20,100,165,0) 68%);
  pointer-events:none;
}
.hero-visual figure{
  position:relative; z-index:1; margin:0; border-radius:38% 62% 58% 42% / 50% 46% 54% 50%;
  overflow:hidden; border:6px solid #fff;
  box-shadow:0 30px 60px -12px rgba(6,42,70,.32), 0 16px 30px -10px rgba(6,42,70,.22);
  aspect-ratio:6/6.4;
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; object-position:0% 50%; }
.hero-visual .float-card{
  position:absolute; z-index:2; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:16px 18px; display:flex; align-items:center; gap:12px; max-width:230px;
}
.hero-visual .float-card.c1{ top:6%; left:-8%; }
.hero-visual .float-card.c2{ bottom:8%; right:-6%; }
.hero-visual .float-card .icon{ width:42px; height:42px; border-radius:50%; background:var(--blue-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-visual .float-card .icon svg{ width:22px; height:22px; color:var(--blue-600); }
.hero-visual .float-card strong{ display:block; font-size:.92rem; color:var(--navy-900); }
.hero-visual .float-card span{ font-size:.78rem; color:var(--text-grey); }
.hero-visual .script-tag{
  position:absolute; z-index:2; top:5%; right:6%; font-family:var(--font-script);
  color:#fff; font-size:1.6rem; line-height:1.2;
  text-shadow:0 1px 3px rgba(6,42,70,.9), 0 6px 20px rgba(6,42,70,.5);
  transform:rotate(-3deg); text-align:right;
}
@media (max-width:640px){ .hero-visual .script-tag{ display:none; } }

/* Floating "Trusted by / 500+ Happy Clients" badge, sitting outside the photo's right edge */
.hero-visual .trusted-badge{ position:absolute; z-index:2; top:42%; right:-9%; text-align:center; }
.hero-visual .trusted-badge .tb-label{
  display:inline-block; background:#fff; color:var(--blue-600); font-size:.72rem; font-weight:700;
  padding:5px 14px; border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:8px;
}
.hero-visual .trusted-badge .tb-row{
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; box-shadow:var(--shadow-md);
  padding:10px 18px 10px 10px;
}
.hero-visual .trusted-badge .tb-icon{ width:38px; height:38px; border-radius:50%; background:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-visual .trusted-badge .tb-icon svg{ width:18px; height:18px; color:#fff; }
.hero-visual .trusted-badge strong{ display:block; font-size:1rem; color:var(--navy-900); text-align:left; }
.hero-visual .trusted-badge span{ font-size:.72rem; color:var(--text-grey); text-align:left; }
@media (max-width:1180px){ .hero-visual .trusted-badge{ display:none; } }
@media (max-width:640px){
  /* Bring the trust badge back on mobile, but pulled inside the visual's own
     bounds (no negative right offset) so it can't push the page wide. */
  .hero-visual .trusted-badge{ display:block; top:auto; bottom:-6%; right:2%; }
  .hero-visual .trusted-badge .tb-label{ font-size:.66rem; padding:4px 12px; margin-bottom:6px; }
  .hero-visual .trusted-badge .tb-row{ padding:8px 14px 8px 8px; gap:8px; }
  .hero-visual .trusted-badge .tb-icon{ width:32px; height:32px; }
  .hero-visual .trusted-badge .tb-icon svg{ width:15px; height:15px; }
  .hero-visual .trusted-badge strong{ font-size:.88rem; }
  .hero-visual .trusted-badge span{ font-size:.66rem; }
}

/* Floating stats card that overlaps the hero bottom edge */
.floating-stats{
  position:relative; z-index:3; margin-top:18px; margin-bottom:40px;
  background:#fff; border-radius:999px; box-shadow:var(--shadow-lg);
  display:flex; align-items:stretch; justify-content:space-between; padding:22px 36px;
}
.floating-stats .fstat{ display:flex; align-items:center; gap:12px; flex:1; justify-content:center; position:relative; }
.floating-stats .fstat + .fstat::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:34px; background:var(--grey-300); }
.floating-stats .fstat .icon{ width:44px; height:44px; border-radius:50%; background:var(--blue-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.floating-stats .fstat .icon svg{ width:22px; height:22px; color:var(--blue-600); }
.floating-stats .fstat strong{ display:block; font-family:var(--font-head); font-size:1.15rem; color:var(--navy-900); }
.floating-stats .fstat span{ font-size:.78rem; color:var(--text-grey); }
@media (max-width:1024px){
  .floating-stats{ border-radius:var(--radius-lg); flex-wrap:wrap; gap:20px 0; padding:26px; }
  .floating-stats .fstat{ flex:1 1 44%; justify-content:flex-start; }
  .floating-stats .fstat + .fstat::before{ display:none; }
  .floating-stats .fstat:nth-child(odd){ padding-right:14px; }
}
@media (max-width:520px){ .floating-stats .fstat{ flex:1 1 100%; } .floating-stats{ margin-top:22px; margin-bottom:8px; } }

@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:420px; margin:0 auto; }
}
@media (max-width:560px){
  .hero-visual .float-card{ display:none; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
}
/* Mobile Hero: recompose as a centered stack rather than a shrunk desktop layout */
@media (max-width:768px){
  .hero-grid > div:first-child{ text-align:center; display:flex; flex-direction:column; align-items:center; }
  .hero-eyebrow{ margin-left:auto; margin-right:auto; }
  .hero-copy{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; width:100%; }
  .hero-trust{ justify-content:center; }
  .hero-benefits{ justify-items:center; max-width:360px; margin:0 auto; }
  .hero-benefit{ flex-direction:column; text-align:center; gap:8px; }
}

/* ---------- Page header (inner pages) ---------- */
.page-header{
  position:relative; padding:calc(var(--nav-h) + 64px) 0 64px; overflow:hidden;
  background:linear-gradient(120deg,var(--navy-900) 0%, var(--navy-800) 55%, var(--blue-700) 100%);
}
.page-header .container{ position:relative; z-index:1; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.85rem; color:var(--blue-100); margin-bottom:18px; }
.breadcrumb a{ color:var(--blue-100); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb svg{ width:13px; height:13px; flex-shrink:0; }
.page-header h1{ color:#fff; font-size:clamp(2rem,3.4vw,3rem); max-width:680px; }
.page-header p{ color:var(--blue-100); max-width:560px; font-size:1.05rem; margin-bottom:0; }

/* ---------- Trust bar ---------- */
.trust-bar{ background:var(--white); border-bottom:1px solid var(--grey-100); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:36px 0; }
.trust-item{ display:flex; align-items:center; gap:14px; }
.trust-item .icon{ width:48px; height:48px; border-radius:14px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-item .icon svg{ width:24px; height:24px; color:var(--blue-600); }
.trust-item strong{ display:block; font-size:.95rem; color:var(--navy-900); }
.trust-item span{ font-size:.8rem; color:var(--text-grey); }
@media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------- Split / About ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; height:100%; object-fit:cover; aspect-ratio:5/4.3; }
.split-media .badge-float{
  position:absolute; z-index:2; bottom:-22px; left:-22px; background:var(--navy-900); color:#fff; border-radius:var(--radius-md);
  padding:18px 22px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:14px;
}
.split-media .badge-float strong{ display:block; font-size:1.5rem; font-family:var(--font-head); }
.split-media .badge-float span{ font-size:.72rem; color:var(--blue-100); text-transform:uppercase; letter-spacing:.06em; }
.split-media .badge-float.top-left{ bottom:auto; top:-22px; left:-22px; }
.split-body ul{ margin:22px 0; display:flex; flex-direction:column; gap:14px; }
.split-body ul li{ display:flex; gap:12px; align-items:flex-start; font-weight:600; color:var(--navy-900); font-size:.98rem; }
.split-body ul li svg{ width:20px; height:20px; color:var(--blue-600); margin-top:2px; flex-shrink:0; }
.split.split-60-40{ grid-template-columns:1.6fr 1fr; }
@media (max-width:900px){
  .split, .split.split-60-40{ grid-template-columns:1fr; gap:40px; }
  .split.reverse .split-media{ order:0; }
  .split-media .badge-float{ left:16px; bottom:-18px; }
  .split-media .badge-float.top-left{ bottom:auto; top:-18px; left:16px; }
}

/* About Preview: decorative blue blob behind the image + script accent */
.about-media{ position:relative; }
.about-media .about-blob{
  position:absolute; z-index:0; inset:10% -10% -10% 10%;
  background:linear-gradient(135deg, var(--blue-200), var(--blue-600));
  border-radius:42% 58% 60% 40% / 48% 42% 58% 52%; opacity:.55;
}
.about-media img{ position:relative; z-index:1; }
.about-media .script-tag-alt{
  position:absolute; z-index:2; bottom:6%; left:6%; font-family:var(--font-script);
  color:#fff; font-size:1.3rem; line-height:1.2; text-shadow:0 1px 3px rgba(6,42,70,.9), 0 6px 20px rgba(6,42,70,.5);
  transform:rotate(-2deg);
}
@media (max-width:900px){ .about-media .script-tag-alt{ display:none; } }

/* About "who we are" quick-facts row (icon + title + supporting text, divided) */
.about-points{ display:flex; gap:0; margin:26px 0; flex-wrap:wrap; }
.about-point{ flex:1 1 0; padding:0 18px; position:relative; min-width:140px; }
.about-point + .about-point::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--grey-200); }
.about-point .icon{ width:40px; height:40px; border-radius:12px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.about-point .icon svg{ width:20px; height:20px; color:var(--blue-600); }
.about-point strong{ display:block; font-size:.92rem; color:var(--navy-900); }
.about-point span{ font-size:.78rem; color:var(--text-grey); }
@media (max-width:640px){
  .about-points{ flex-direction:column; gap:18px; }
  .about-point{ padding:0; }
  .about-point + .about-point::before{ display:none; }
}

/* ---------- About Us: Hero ---------- */
.about-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 68px) 0 96px;
  background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 52%, var(--blue-700) 100%);
}
/* Static reference photo on the right, blended into the navy gradient with a
   fixed overlay — no motion, kept purely as ambient depth behind the copy. */
.about-hero-photo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.about-hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:78% 50%; opacity:.5; }
.about-hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--navy-900) 0%, rgba(8,59,102,.72) 32%, rgba(8,59,102,.28) 58%, rgba(15,84,136,.18) 100%);
}
.about-hero-copy{ position:relative; z-index:1; max-width:600px; }
.about-hero-copy h1{ color:#fff; font-style:italic; font-size:clamp(2.3rem,4.2vw,3.5rem); }
.about-hero-copy p{ color:var(--blue-100); font-size:1.08rem; max-width:540px; margin:18px 0 32px; }
.about-hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:64px; display:block; z-index:1; }
.about-hero-wave path{ fill:var(--white); }
@media (max-width:768px){
  .about-hero{ padding-bottom:88px; text-align:center; }
  .about-hero-copy{ margin:0 auto; }
  .about-hero-copy .breadcrumb{ justify-content:center; }
  .about-hero-photo img{ object-position:65% 50%; opacity:.34; }
  .about-hero-photo::after{ background:linear-gradient(180deg, rgba(6,42,70,.55) 0%, rgba(6,42,70,.86) 70%, var(--navy-900) 100%); }
}

/* ---------- Inner pages: shared curved photo hero ----------
   Generalised version of the About Us hero (navy gradient + static
   reference photo + SVG wave bottom curve) so Services, Industries,
   Why Choose Us and Contact all share the same premium top treatment.
   Per-page object-position is set inline on the <img> so this stays
   a single reusable block instead of one variant per page. */
.inner-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 68px) 0 96px;
  background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 52%, var(--blue-700) 100%);
}
.inner-hero-photo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.inner-hero-photo img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.inner-hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--navy-900) 0%, rgba(8,59,102,.72) 32%, rgba(8,59,102,.28) 58%, rgba(15,84,136,.18) 100%);
}
.inner-hero-copy{ position:relative; z-index:1; max-width:600px; }
.inner-hero-copy h1{ color:#fff; font-style:italic; font-size:clamp(2.1rem,3.8vw,3.1rem); }
.inner-hero-copy p{ color:var(--blue-100); font-size:1.05rem; max-width:540px; margin:16px 0 0; }
.inner-hero-copy .breadcrumb{ margin-bottom:18px; }
.inner-hero-copy .breadcrumb a, .inner-hero-copy .breadcrumb span{ color:var(--blue-100); }
/* Handwritten signature-style accent — same font/treatment as the Home hero's script-tag, reused subtly on inner pages */
.inner-hero-script{
  display:block; font-family:var(--font-script); font-weight:600; font-size:1.55rem; line-height:1;
  color:#fff; opacity:.92; margin:10px 0 2px;
}
@media (max-width:768px){ .inner-hero-script{ font-size:1.35rem; } }
.inner-hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:64px; display:block; z-index:1; }
.inner-hero-wave path{ fill:var(--white); }
@media (max-width:768px){
  .inner-hero{ padding-bottom:88px; text-align:center; }
  .inner-hero-copy{ margin:0 auto; }
  .inner-hero-copy .breadcrumb{ justify-content:center; }
  .inner-hero-photo img{ opacity:.55; }
  .inner-hero-photo::after{ background:linear-gradient(180deg, rgba(6,42,70,.38) 0%, rgba(6,42,70,.6) 65%, rgba(6,42,70,.78) 100%); }
}

/* ---------- About Us: Who We Are (editorial) ---------- */
.about-who .section-head{ max-width:680px; }
.about-who .section-head h2{ font-style:italic; }
.who-editorial{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; margin-top:56px; }
.who-media{ position:relative; }
.who-media-shape{
  position:absolute; z-index:0; top:-26px; left:-26px; right:34px; bottom:34px;
  background:linear-gradient(135deg, var(--blue-300), var(--blue-700));
  border-radius:38% 62% 60% 40% / 46% 40% 60% 54%;
  opacity:.92; transition:opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s;
}
.who-media-frame{
  position:absolute; z-index:1; top:26px; left:26px; right:-18px; bottom:-18px;
  border:2px solid var(--blue-200); border-radius:var(--radius-lg);
}
.who-media img{
  position:relative; z-index:2; width:100%; height:100%;
  aspect-ratio:4/4.6; object-fit:cover; display:block;
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -20px rgba(6,42,70,.35), 0 10px 24px rgba(6,42,70,.14);
}
html.js .who-media .who-media-shape{ opacity:0; transform:scale(.85); }
html.js .who-media.in .who-media-shape{ opacity:.92; transform:none; }
.who-points{ display:flex; flex-direction:column; }
.who-point{ display:flex; gap:18px; padding:22px 0; }
.who-point + .who-point{ border-top:1px solid var(--grey-100); }
.who-point .wp-num{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--blue-300); line-height:1; flex-shrink:0; width:42px; }
.who-point .wp-icon{ width:38px; height:38px; border-radius:10px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.who-point .wp-icon svg{ width:19px; height:19px; color:var(--blue-600); }
.who-point h4{ font-size:1.05rem; margin-bottom:.35em; }
.who-point p{ font-size:.9rem; margin:0; }
.who-cta{ margin-top:28px; }
@media (max-width:900px){
  .who-editorial{ grid-template-columns:1fr; gap:52px; }
  .who-media{ max-width:460px; margin:0 auto; }
}
@media (max-width:640px){
  .who-media-shape{ top:-16px; left:-16px; right:20px; bottom:20px; }
  .who-media-frame{ top:16px; left:16px; right:-10px; bottom:-10px; }
  .who-point{ text-align:left; }
  .who-cta{ display:block; text-align:center; margin-left:auto; margin-right:auto; max-width:260px; }
}

/* ---------- About Us: premium stat cards ---------- */
.about-stats{ background:linear-gradient(180deg, var(--blue-50) 0%, #F2FAFE 100%); }
.stat-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-card{
  position:relative; text-align:center; padding:32px 20px;
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  border:1px solid rgba(255,255,255,.8); border-radius:var(--radius-lg);
  box-shadow:0 20px 40px -24px rgba(15,84,136,.28), 0 2px 8px rgba(15,84,136,.06);
  overflow:hidden;
}
.stat-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(111,182,230,.16), transparent 60%); pointer-events:none; }
.stat-card strong{ position:relative; display:block; font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--navy-900); font-weight:700; }
.stat-card span{ position:relative; display:block; margin-top:6px; font-size:.8rem; color:var(--text-grey); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:768px){ .stat-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .stat-cards{ grid-template-columns:1fr; } }

/* ---------- Cards grid ---------- */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
/* 5-across grids (Industries/Values preview cards): on tablet, fall back to 3 per
   row with any leftover row centered and matched in width, same fix already used
   for .services-grid, instead of the leftover 2 sticking to the left columns. */
@media (min-width:769px) and (max-width:1024px){
  .grid-5{ display:flex; flex-wrap:wrap; justify-content:center; }
  .grid-5 > *{ flex:0 1 calc((100% - 56px) / 3); max-width:calc((100% - 56px) / 3); }
}
@media (max-width:768px){ .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; } .grid-5{ display:grid; grid-template-columns:repeat(2,1fr); } }

/* Mobile only: Industry cards (Home/About "who we serve" strips) and the
   process-step cards (Home "Our Simple Laundry Process") must show one per
   row on mobile — the generic 2-up .grid-5 fallback above stays for grids
   that don't need this (e.g. the About page Values cards). */
@media (max-width:768px){
  .grid-5:has(> .industry-card),
  .grid-5:has(> .service-card){
    grid-template-columns:1fr;
  }
}

.card{
  background:#fff; border-radius:var(--radius-md); border:1px solid var(--grey-100);
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow:hidden; display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--blue-100); }

/* Service card
   The floating icon badge must hang below the photo without being clipped, so the photo's
   own clipping/rounding lives on an inner .thumb-img wrapper — .thumb itself stays
   overflow:visible and only provides the relative box the icon is positioned against. */
.service-card{ overflow:visible; }
.service-card .thumb{ position:relative; overflow:visible; aspect-ratio:4/3; }
.service-card .thumb-img{ position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.service-card .thumb-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); display:block; }
.service-card:hover .thumb-img img{ transform:scale(1.07); }
.service-card .thumb-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(6,42,70,.55) 100%); opacity:0; transition:opacity .35s var(--ease); }
.service-card:hover .thumb-img::after{ opacity:1; }
.icon-badge{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:var(--blue-600); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(20,100,165,.35);
  transition:transform .35s var(--ease);
}
.service-card .icon-badge{ position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); z-index:3; width:60px; height:60px; border-radius:16px; }
.service-card:hover .icon-badge{ transform:translateX(-50%) translateY(-4px) rotate(-4deg); }
.icon-badge svg{ width:26px; height:26px; color:#fff; }
.service-card .icon-badge svg{ width:28px; height:28px; }
.service-card .body{ padding:40px 24px 24px; flex:1; display:flex; flex-direction:column; text-align:center; align-items:center; }
.service-card .card-link{ align-self:center; }
.service-card h3{ font-size:1.15rem; margin-bottom:.4em; }
.service-card p{ font-size:.92rem; flex:1; }
.card-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--blue-600); font-size:.88rem; margin-top:8px; }
.card-link svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.service-card:hover .card-link svg{ transform:translateX(4px); }

/* Services section: soft background glow behind the cards (decorative, non-interactive) */
.services-section{ position:relative; overflow:hidden; }
.services-section::before,
.services-section::after{
  content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;
}
.services-section::before{
  top:-140px; right:-160px; width:520px; height:520px;
  background:radial-gradient(circle, rgba(46,130,210,.16) 0%, rgba(46,130,210,0) 70%);
}
.services-section::after{
  bottom:-160px; left:-140px; width:440px; height:440px;
  background:radial-gradient(circle, rgba(20,100,165,.12) 0%, rgba(20,100,165,0) 70%);
}
.services-section .container{ position:relative; z-index:1; }

/* Services grid: one clean equal-width row of 5 on wide desktop; on narrower
   desktop/tablet widths, fall back to 3 columns with any leftover row centered
   and matched in width instead of stretching into an unbalanced full-width row. */
@media (min-width:1200px){
  .services-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
}
@media (min-width:769px) and (max-width:1199px){
  .services-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
  .services-grid > .service-card{ flex:0 1 calc((100% - 56px) / 3); max-width:calc((100% - 56px) / 3); }
}

/* ---------- Quality You Can Trust (Services page) ---------- */
.quality-trust-section{ background:var(--blue-50); }
.quality-trust-copy p{ margin:16px 0 26px; }
.quality-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.quality-item{
  background:#fff; border-radius:var(--radius-md); padding:26px 22px; box-shadow:var(--shadow-sm);
  border:1px solid var(--blue-100); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quality-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.quality-item .icon-badge{ margin-bottom:14px; }
.quality-item h4{ font-size:1rem; margin-bottom:.3em; color:var(--navy-900); }
.quality-item p{ font-size:.86rem; margin:0; color:var(--text-grey); }
@media (max-width:900px){ .quality-trust-section .split{ gap:32px; } }
@media (max-width:560px){ .quality-grid{ grid-template-columns:1fr; } }

/* Product card (shop grid) */
.product-card .thumb{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.product-card:hover .thumb img{ transform:scale(1.07); }
.product-card .body{ padding:20px 20px 22px; flex:1; display:flex; flex-direction:column; }
.product-card h3{ font-size:1rem; margin-bottom:.35em; }
.product-card p{ font-size:.86rem; flex:1; margin-bottom:10px; }
.product-price{ font-weight:800; color:var(--blue-600); font-size:1rem; }
.product-detail-price{ font-size:1.6rem; font-weight:800; color:var(--navy-900); margin-top:18px; }
.product-detail-price span{ font-size:.85rem; font-weight:600; color:var(--text-grey); }

/* ---------- Product detail page ---------- */
.product-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--blue-700) 100%);
  padding:calc(var(--nav-h) + 28px) 0 26px;
}
.product-hero-photo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.product-hero-photo img{ width:100%; height:100%; object-fit:cover; opacity:.22; }
.product-hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--navy-900) 0%, rgba(8,59,102,.55) 50%, rgba(8,59,102,.3) 100%);
}
.product-hero .breadcrumb{ position:relative; z-index:1; margin-bottom:0; }

.product-gallery{ display:flex; gap:16px; }
.gallery-thumbs{ display:flex; flex-direction:column; gap:12px; width:84px; flex-shrink:0; }
.gallery-thumb{ border:2px solid transparent; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; background:none; padding:0; aspect-ratio:1/1; transition:border-color .25s var(--ease); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb.active{ border-color:var(--blue-600); }
.gallery-main{ flex:1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:5/4.6; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }

.badge-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--blue-50); color:var(--blue-600); font-weight:700; font-size:.78rem; letter-spacing:.02em; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.badge-pill svg{ width:14px; height:14px; }

.rating-row{ display:flex; align-items:center; gap:10px; margin:12px 0 20px; padding-bottom:20px; border-bottom:1px solid var(--grey-100); flex-wrap:wrap; }
.rating-row .stars{ display:flex; gap:2px; color:#F5A623; }
.rating-row .stars svg{ width:16px; height:16px; fill:currentColor; stroke:none; }
.rating-row strong{ color:var(--navy-900); font-size:.95rem; }
.rating-row span{ color:var(--text-grey); font-size:.86rem; }

.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--grey-300); border-radius:var(--radius-sm); overflow:hidden; background:var(--grey-50); }
.qty-stepper button{ width:42px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--navy-900); transition:background .2s var(--ease), color .2s var(--ease); }
.qty-stepper button:hover{ background:var(--blue-100); color:var(--blue-600); }
.qty-stepper button svg{ width:15px; height:15px; }
.qty-stepper input{ width:52px; text-align:center; border:none; background:transparent; border-left:1.5px solid var(--grey-300); border-right:1.5px solid var(--grey-300); height:44px; font-weight:700; padding:0; }

.trust-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--grey-100); border-radius:var(--radius-md); overflow:hidden; margin-top:28px; border:1px solid var(--grey-100); }
.trust-item{ background:var(--blue-50); padding:20px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.trust-item .icon{ width:38px; height:38px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.trust-item .icon svg{ width:18px; height:18px; color:var(--blue-600); }
.trust-item strong{ font-size:.86rem; color:var(--navy-900); }
.trust-item small{ font-size:.78rem; color:var(--text-grey); line-height:1.4; }
@media (max-width:900px){
  .trust-row{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .product-gallery{ flex-direction:column-reverse; }
  .gallery-thumbs{ flex-direction:row; width:100%; overflow-x:auto; }
  .gallery-thumb{ width:64px; flex-shrink:0; }
}

/* Cart */
.cart-empty-icon{ width:56px; height:56px; color:var(--blue-300); }
.cart-table{ display:flex; flex-direction:column; }
.cart-row{
  display:grid; grid-template-columns:88px 1fr 132px 90px 36px; gap:18px; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--grey-100); transition:background .2s var(--ease);
}
.cart-row:hover{ background:var(--grey-50); }
.cart-row img{ width:88px; height:88px; border-radius:var(--radius-sm); object-fit:cover; border:1px solid var(--grey-100); }
.cart-row-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cart-row-info strong{ color:var(--navy-900); font-size:.98rem; }
.cart-row-info span{ font-size:.82rem; color:var(--text-grey); }
.cart-row-price{ color:var(--blue-600) !important; font-weight:600; }
.cart-row .qty-stepper{ height:40px; }
.cart-row .qty-stepper button{ width:36px; height:38px; }
.cart-row .qty-stepper input{ width:44px; height:38px; }
.cart-qty-input{ width:70px; padding:8px 10px; border:1px solid var(--grey-300); border-radius:var(--radius-sm); font-size:.9rem; text-align:center; }
.cart-row-total{ font-weight:800; color:var(--navy-900); text-align:right; }
.cart-remove-btn{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:var(--text-grey); flex-shrink:0; transition:background .2s var(--ease), color .2s var(--ease); }
.cart-remove-btn:hover{ background:#fdecec; color:var(--danger); }
.cart-remove-btn svg{ width:15px; height:15px; }
.cart-summary-row{ display:flex; justify-content:space-between; align-items:center; font-size:1rem; padding-bottom:14px; border-bottom:1px solid var(--blue-100); }
.cart-summary-row strong{ color:var(--navy-900); font-size:1.15rem; }

/* Order summary: sticky premium card on the cart page specifically — an
   additive class on top of the shared .info-panel used elsewhere, so pages
   like checkout/quote/order-confirmation keep their existing flat style. */
.info-panel.cart-summary-card{
  background:#fff; border:1px solid var(--grey-100); box-shadow:var(--shadow-md);
  position:sticky; top:calc(var(--nav-h) + 24px);
}

@media (max-width:640px){
  .cart-row{ grid-template-columns:56px 1fr auto; grid-template-areas:"img info total" "img info qty" "img info remove"; row-gap:10px; }
  .cart-row img{ grid-area:img; width:56px; height:56px; }
  .cart-row-info{ grid-area:info; }
  .cart-row-total{ grid-area:total; }
  .cart-row .qty-stepper{ grid-area:qty; justify-self:start; }
  .cart-remove-btn{ grid-area:remove; justify-self:start; }
  .info-panel.cart-summary-card{ position:static; }
}

/* Benefit / feature card */
.feature-card{ padding:30px 26px; text-align:left; background:#fff; transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.feature-card:hover{ background:var(--blue-600); border-color:var(--blue-600); }
.feature-card .icon{ width:56px; height:56px; border-radius:16px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:background .3s var(--ease); }
.feature-card:hover .icon{ background:#fff; }
.feature-card .icon svg{ width:28px; height:28px; color:var(--blue-600); transition:color .3s var(--ease); }
.feature-card:hover .icon svg{ color:var(--blue-600); }
.feature-card h3{ font-size:1.08rem; margin-bottom:.4em; transition:color .35s var(--ease); }
.feature-card:hover h3{ color:#fff; }
.feature-card p{ font-size:.92rem; margin-bottom:0; transition:color .35s var(--ease); }
.feature-card:hover p{ color:#fff; }
.feature-card img{ border-radius:var(--radius-sm); margin-top:16px; aspect-ratio:16/10; object-fit:cover; }

/* Industry card */
.industry-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/3.6; box-shadow:var(--shadow-sm); }
.industry-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.industry-card:hover img{ transform:scale(1.08); }
.industry-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,42,70,0) 30%, rgba(6,42,70,.88) 100%); }
.industry-card .content{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:1; }
.industry-card .icon{ width:44px; height:44px; border-radius:12px; background:var(--blue-600); box-shadow:0 6px 16px rgba(6,42,70,.35); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.industry-card .icon svg{ width:22px; height:22px; color:#fff; }
.industry-card h3{ color:#fff; font-size:1.05rem; margin-bottom:.3em; }
.industry-card p{ color:#D9E7F2; font-size:.85rem; margin:0; }

/* Mobile only: on narrow cards the icon + heading + description can need
   more height than the fixed aspect-ratio card provides, which pushed the
   icon (the top-most element in .content) above the card and clipped it
   against .industry-card's overflow:hidden. Switch to overflow:visible on
   mobile so the icon is always fully visible, and give the image/gradient
   their own radius so the rounded-corner look is kept without relying on
   the parent clipping it. */
@media (max-width:768px){
  .industry-card{ overflow:visible; }
  .industry-card img{ border-radius:inherit; }
  .industry-card::after{ border-radius:inherit; }
}

/* Process steps — icon circles connected by arrows, matching the "How It Works" reference */
.process-track{ position:relative; display:flex; align-items:flex-start; gap:4px; }
.process-step{ position:relative; text-align:center; flex:1 1 0; min-width:0; }
.process-step .num{
  font-family:var(--font-head); font-weight:800; font-size:.8rem; color:var(--blue-600);
  letter-spacing:.03em; margin-bottom:4px;
}
.process-step .step-icon{
  width:68px; height:68px; border-radius:50%; background:var(--blue-50); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.process-step .step-icon svg{ width:28px; height:28px; }
.process-step:hover .step-icon{ background:var(--blue-600); color:#fff; transform:translateY(-4px); box-shadow:0 10px 22px rgba(20,100,165,.32); }
.process-step h4{ font-size:1rem; margin-bottom:.35em; }
.process-step p{ font-size:.85rem; }
.process-arrow{ display:flex; align-items:center; justify-content:center; padding-top:22px; color:var(--blue-300); flex-shrink:0; }
.process-arrow svg{ width:22px; height:22px; }
@media (max-width:900px){
  .process-track{ flex-wrap:wrap; row-gap:36px; }
  .process-step{ flex:1 1 44%; }
  .process-arrow{ display:none; }
}
@media (max-width:520px){ .process-step{ flex:1 1 100%; } }

/* Stats */
.stats-bar{ background:var(--navy-900); border-radius:var(--radius-lg); padding:44px 30px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; color:#fff; }
.stat strong{ display:block; font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.2rem); }
.stat span{ font-size:.82rem; color:var(--blue-100); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:768px){ .stats-bar{ grid-template-columns:repeat(2,1fr); } }

/* Testimonials */
.testi-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.testi-card{ padding:30px 26px; }
.testi-stars{ color:#F5A623; letter-spacing:2px; margin-bottom:14px; font-size:.95rem; }
.testi-quote{ font-size:.98rem; color:var(--navy-900); font-style:italic; margin-bottom:20px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{ width:44px; height:44px; border-radius:50%; background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-head); flex-shrink:0; }
.testi-person strong{ display:block; font-size:.92rem; color:var(--navy-900); }
.testi-person span{ font-size:.78rem; color:var(--text-grey); }
@media (max-width:900px){ .testi-track{ grid-template-columns:1fr; } }

/* CTA band — reuses the same footer photo everywhere for a consistent, premium pre-footer moment */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(120deg, rgba(6,42,70,.82) 0%, rgba(13,64,102,.66) 55%, rgba(6,42,70,.84) 100%),
    url("../images/bg/footer-bubbles.jpg") center bottom / cover no-repeat,
    var(--navy-900);
  border-radius:var(--radius-lg); padding:44px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:var(--shadow-md); border:none;
}
.cta-band h3{ margin-bottom:.2em; font-size:1.4rem; color:#fff; }
.cta-band p{ margin:0; color:var(--blue-100); }
.cta-band .btn-primary{ background:#fff; color:var(--navy-900); }
.cta-band .btn-primary:hover{ background:var(--blue-50); }
.cta-band .btn-primary svg{ color:var(--navy-900); }
/* Legacy .navy modifier kept for markup compatibility — same treatment now applies to every cta-band */
.cta-band.navy{ background:
    linear-gradient(120deg, rgba(6,42,70,.82) 0%, rgba(13,64,102,.66) 55%, rgba(6,42,70,.84) 100%),
    url("../images/bg/footer-bubbles.jpg") center bottom / cover no-repeat,
    var(--navy-900);
}
@media (max-width:700px){ .cta-band{ flex-direction:column; text-align:center; } }

/* ---------- Forms ---------- */
.form-card{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:40px; border:1px solid var(--grey-100); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-weight:700; font-size:.86rem; color:var(--navy-900); margin-bottom:8px; }
.field label .req{ color:var(--danger); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--grey-300); border-radius:var(--radius-sm);
  background:var(--grey-50); transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue-500); background:#fff; box-shadow:0 0 0 4px var(--blue-50); }
.field textarea{ resize:vertical; min-height:120px; }
.radio-group{ display:flex; gap:20px; flex-wrap:wrap; }
.radio-group label{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; color:var(--navy-900); }
.radio-group input{ width:auto; accent-color:var(--blue-600); }
.field-hint{ font-size:.78rem; color:var(--text-grey); margin-top:6px; }
.form-note{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-grey); margin-top:14px; justify-content:center; }
.form-note svg{ width:15px; height:15px; color:var(--blue-600); }

.alert{ padding:16px 20px; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem; margin-bottom:24px; display:flex; gap:12px; align-items:flex-start; }
.alert svg{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.alert-success{ background:#EAF8F0; color:var(--success); border:1px solid #BFE9D2; }
.alert-error{ background:#FCEBEB; color:var(--danger); border:1px solid #F3C6C6; }
.field-error{ color:var(--danger); font-size:.78rem; margin-top:6px; display:block; }
.has-error input, .has-error select, .has-error textarea{ border-color:var(--danger); background:#FFF7F7; }

/* Side info panel (quote/contact pages) */
.info-panel{ background:var(--blue-50); border-radius:var(--radius-lg); padding:34px; }
.info-panel h4{ font-size:1.05rem; margin-bottom:18px; color:var(--blue-600); text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; }
.info-steps{ display:flex; flex-direction:column; gap:20px; margin-bottom:26px; }
.info-step{ display:flex; gap:14px; }
.info-step .num{ width:34px; height:34px; border-radius:50%; background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; }
.info-step strong{ display:block; font-size:.92rem; color:var(--navy-900); }
.info-step span{ font-size:.82rem; color:var(--text-grey); }
.info-list{ display:flex; flex-direction:column; gap:10px; }
.info-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; font-weight:600; color:var(--navy-900); }
.info-list li svg{ width:17px; height:17px; color:var(--blue-600); margin-top:2px; flex-shrink:0; }

.contact-info-card{ display:flex; gap:16px; background:#fff; border:1px solid var(--grey-100); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-sm); margin-bottom:16px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.contact-info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-100); }
.contact-info-card .icon{ width:46px; height:46px; border-radius:12px; background:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s var(--ease); }
.contact-info-card:hover .icon{ transform:scale(1.08); }
.contact-info-card .icon svg{ width:22px; height:22px; color:#fff; }
.contact-info-card strong{ display:block; color:var(--blue-600); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.contact-info-card p{ margin:0; font-size:.95rem; color:var(--navy-900); font-weight:600; }
.contact-info-card p.muted{ color:var(--text-grey); font-weight:400; font-size:.85rem; }
.map-embed{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--grey-100); }
.map-embed iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }

/* ---------- Footer ---------- */
footer{
  background:
    linear-gradient(180deg, rgba(6,42,70,.5) 0%, rgba(6,42,70,.82) 65%, var(--navy-900) 100%),
    url("../images/bg/footer-bubbles.jpg") center bottom / cover no-repeat,
    var(--navy-900);
  color:#fff; position:relative; overflow:hidden;
}
.footer-top{ padding:72px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; position:relative; z-index:1; }
.footer-brand-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand-row img{ height:44px; width:auto; }
.footer-brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.footer-brand-text strong{ font-family:var(--font-head); font-size:1.05rem; color:#fff; letter-spacing:.02em; }
.footer-brand-text span{ font-size:.62rem; color:var(--blue-300); letter-spacing:.07em; font-weight:700; text-transform:uppercase; }
.footer-brand p{ color:#AFC6DA; font-size:.9rem; max-width:300px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .25s var(--ease), transform .25s var(--ease); }
.footer-social a:hover{ background:var(--blue-600); transform:translateY(-3px); }
.footer-social svg{ width:17px; height:17px; color:#fff; }
footer h4{ color:#fff; font-size:1rem; font-weight:800; margin-bottom:20px; letter-spacing:.01em; }
.footer-links{ display:flex; flex-direction:column; gap:13px; }
.footer-links a{ color:#C9DDEE; font-size:.92rem; font-weight:500; transition:color .2s var(--ease), padding .2s var(--ease); }
.footer-links a:hover{ color:#fff; padding-left:4px; }
.footer-contact{ display:flex; flex-direction:column; gap:16px; }
.footer-contact li{ display:flex; gap:12px; font-size:.9rem; font-weight:500; color:#E4EFF8; align-items:flex-start; }
.footer-contact svg{ width:18px; height:18px; color:var(--blue-300); flex-shrink:0; margin-top:2px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.16); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; position:relative; z-index:1; }
.footer-bottom p{ margin:0; font-size:.82rem; color:#A9C0D4; }
.footer-bottom .legal-links{ display:flex; gap:18px; }
.footer-bottom .legal-links a{ font-size:.82rem; color:#A9C0D4; }
.footer-bottom .legal-links a:hover{ color:#fff; }
@media (max-width:640px){
  /* Landscape footer-bubbles.jpg crops badly (mostly flat colour) on a tall,
     narrow mobile viewport, so swap in a portrait-shaped crop just for mobile
     — desktop/tablet keep the original image untouched. */
  footer{
    background:
      linear-gradient(180deg, rgba(6,42,70,.5) 0%, rgba(6,42,70,.82) 65%, var(--navy-900) 100%),
      url("../images/bg/footer-bubbles-mobile.jpg") center bottom / cover no-repeat,
      var(--navy-900);
  }
}
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; padding:56px 0 30px; text-align:center; }
  .footer-brand-row{ justify-content:center; text-align:center; }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .footer-social{ justify-content:center; }
  .footer-links{ align-items:center; }
  .footer-contact{ align-items:center; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

/* ---------- Utility / reveal animations ----------
   Gated behind html.js so content is never hidden if JS fails to run
   (progressive enhancement — no-JS / slow-JS visitors always see full content). */
html.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js [data-reveal].in{ opacity:1; transform:none; }
html.js [data-reveal="left"]{ transform:translateX(-36px); }
html.js [data-reveal="left"].in{ transform:none; }
html.js [data-reveal="right"]{ transform:translateX(36px); }
html.js [data-reveal="right"].in{ transform:none; }
html.js [data-reveal="scale"]{ transform:scale(.92); }
html.js [data-reveal="scale"].in{ transform:none; }
html.js [data-stagger] > *{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js [data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){ transition-delay:.05s; }
[data-stagger].in > *:nth-child(2){ transition-delay:.14s; }
[data-stagger].in > *:nth-child(3){ transition-delay:.23s; }
[data-stagger].in > *:nth-child(4){ transition-delay:.32s; }
[data-stagger].in > *:nth-child(5){ transition-delay:.41s; }
[data-stagger].in > *:nth-child(6){ transition-delay:.5s; }

/* On mobile, the scroll-in fade/slide effect could leave a section sitting
   invisible (opacity:0) while scrolling past it before the reveal animation
   catches up. Simplest fix per request: show content immediately on mobile,
   no fade-in transition at all, on every page (not just the homepage —
   the same "section not showing" symptom was reported on the order
   confirmation and product pages too). */
@media (max-width:768px){
  html.js [data-reveal],
  html.js [data-stagger] > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.divider{ height:1px; background:var(--grey-100); margin:40px 0; border:none; }

/* Back to top */
.back-to-top{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px; border-radius:50%;
  background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); border:none; z-index:500; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s var(--ease);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top svg{ width:20px; height:20px; }

/* Sticky quote CTA (mobile) */
.mobile-cta-bar{ display:none; }
@media (max-width:768px){
  .mobile-cta-bar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:900; background:#fff; box-shadow:0 -6px 20px rgba(0,0,0,.08);
    padding:12px 16px; gap:10px;
  }
  .mobile-cta-bar .btn{ flex:1; padding:13px; font-size:.85rem; }
  body{ padding-bottom:70px; }
}

/* Detail lists (services page linen specs) */
.spec-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.spec-table th, .spec-table td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--grey-100); }
.spec-table th{ background:var(--blue-50); color:var(--navy-900); font-family:var(--font-head); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.spec-table tr:last-child td{ border-bottom:none; }
.spec-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--grey-100); }

.tag-list{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-list span{ background:var(--blue-50); color:var(--blue-600); font-weight:700; font-size:.82rem; padding:8px 14px; border-radius:999px; }

/* Anchor / "jump to" tab bar (Services page detail section). Contained in its own
   card + sticky under the navbar so it reads as a proper section control rather
   than bare pills floating on the grey background. */
.anchor-nav{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;
  background:#fff; padding:14px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  position:sticky; top:calc(var(--nav-h) + 16px); z-index:5;
}
.anchor-nav a{ padding:10px 18px; border-radius:999px; border:1.5px solid var(--grey-300); font-weight:700; font-size:.85rem; color:var(--navy-900); transition:all .25s var(--ease); }
.anchor-nav a:hover, .anchor-nav a.active{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
@media (max-width:900px){ .anchor-nav{ position:static; } }

.service-detail{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:70px 0; border-bottom:1px solid var(--grey-100); }
.service-detail:last-child{ border-bottom:none; }
.service-detail.reverse > div:first-child{ order:2; }
.service-detail img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; aspect-ratio:5/4; object-fit:cover; }
@media (max-width:900px){ .service-detail, .service-detail.reverse{ grid-template-columns:1fr; } .service-detail.reverse > div:first-child{ order:0; } .service-detail{ padding:48px 0; gap:32px; } }

/* Industries page + Services page: the content side of each alternating row sits inside
   a soft card panel. Scoped to these two explicit modifiers so no other .service-detail
   usage is affected. */
.service-detail.industries-row,
.service-detail.services-row{ border-bottom:none; padding:28px 0; }
.service-detail.industries-row > div:last-child,
.service-detail.services-row > div:last-child{
  background:var(--blue-50); border-radius:var(--radius-lg); padding:40px 44px; box-shadow:var(--shadow-sm);
}
@media (max-width:900px){
  .service-detail.industries-row > div:last-child,
  .service-detail.services-row > div:last-child{ padding:28px 26px; }
}

/* ---------- Mobile: center headings/paragraphs in the remaining left-aligned
   "text beside image/icon" blocks, so mobile pages read centered rather than
   left-aligned once columns stack. Numbered/icon list rows (.who-point) keep
   their existing deliberate left alignment (readability), and generic shared
   layout primitives (.split, forms, tables) are intentionally left untouched. */
@media (max-width:640px){
  .service-detail > div:last-child,
  .quality-trust-copy,
  .who-content > .eyebrow,
  .who-content > h2,
  .who-content > p.lead,
  .feature-card,
  .quality-item,
  .testi-quote,
  .testi-stars{
    text-align:center;
  }
  .service-detail ul,
  .industry-detail ul{ text-align:left; display:inline-block; }
  .feature-card .icon,
  .quality-item .icon-badge{ margin-left:auto; margin-right:auto; }
  .testi-person{ justify-content:center; }
}

/* ==========================================================================
   Shop page
   ========================================================================== */

/* ---------- Shop hero: same navy/blue language as About, but compact and
   with STATIC decoration only (no floating bubble animation) ---------- */
.shop-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 56px) 0 76px;
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 48%, var(--blue-700) 100%);
}
.shop-hero-decor{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.shop-hero-decor .shd-ring{ position:absolute; border-radius:50%; border:1.5px solid rgba(255,255,255,.14); }
.shop-hero-decor .shd-ring-1{ width:480px; height:480px; right:-150px; top:-130px; }
.shop-hero-decor .shd-ring-2{ width:300px; height:300px; right:70px; bottom:-90px; border-color:rgba(255,255,255,.1); }
.shop-hero-decor .shd-circle{ position:absolute; width:300px; height:300px; right:-40px; top:20%; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(111,182,230,.34), rgba(20,100,165,.04) 70%); }
.shop-hero-copy{ position:relative; z-index:1; max-width:620px; }
.shop-hero-copy h1{ color:#fff; font-style:italic; font-size:clamp(2.1rem,3.8vw,3.1rem); }
.shop-hero-copy p{ color:var(--blue-100); font-size:1.05rem; max-width:540px; margin:16px 0 0; }
@media (max-width:768px){
  .shop-hero{ text-align:center; }
  .shop-hero-copy{ margin:0 auto; }
  .shop-hero-copy .breadcrumb{ justify-content:center; }
}

/* ---------- Toolbar: result count + sort (category lives only in the sidebar/drawer) ---------- */
.shop-toolbar-simple{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:8px 0 28px; }
.shop-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.shop-count{ font-size:.85rem; color:var(--text-grey); white-space:nowrap; }
.shop-sort{
  appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23325576' stroke-width='2'%3E%3Cpath d='M5 8.5l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center/16px;
  border:1.5px solid var(--grey-300); border-radius:999px; padding:9px 38px 9px 16px; font-weight:700; font-size:.84rem; color:var(--navy-900);
  cursor:pointer;
}
.mobile-filter-bar-btn{ display:none; }
@media (max-width:1024px){
  .shop-toolbar-simple{ margin-bottom:22px; }
  .mobile-filter-bar-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:999px; border:1.5px solid var(--grey-300); background:#fff;
    font-weight:700; font-size:.85rem; color:var(--navy-900); cursor:pointer;
  }
  .mobile-filter-bar-btn svg{ width:16px; height:16px; }
}

/* ---------- Layout: sidebar + grid ---------- */
.shop-layout{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }
.shop-filters{
  position:sticky; top:calc(var(--nav-h) + 24px);
  background:#fff; border:1px solid var(--grey-100); border-radius:var(--radius-lg); padding:26px 24px; box-shadow:var(--shadow-sm);
}
.filter-group + .filter-group{ margin-top:26px; padding-top:26px; border-top:1px solid var(--grey-100); }
.filter-title{ font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-900); margin-bottom:16px; }
.filter-option{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:.9rem; color:var(--text-grey); cursor:pointer; transition:color .2s var(--ease); }
.filter-option:hover{ color:var(--navy-900); }
.filter-option input{ accent-color:var(--blue-600); width:16px; height:16px; flex-shrink:0; }
.filter-option.active{ color:var(--navy-900); font-weight:700; }
.price-range input[type=range]{ width:100%; accent-color:var(--blue-600); }
.price-range .range-value{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--text-grey); margin-top:8px; }
.filter-reset{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--blue-600); margin-top:22px; background:none; border:none; padding:0; cursor:pointer; }
.filter-reset:hover{ text-decoration:underline; }

/* Category filter — image cards (desktop sidebar + mobile drawer share this markup) */
.cat-card-list{ display:flex; flex-direction:column; gap:6px; }
.cat-card{
  display:flex; align-items:center; gap:12px; padding:7px 8px; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cat-card:hover{ background:var(--blue-50); box-shadow:var(--shadow-sm); }
.cat-card input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.cat-card-thumb{
  width:42px; height:42px; border-radius:10px; overflow:hidden; flex-shrink:0;
  background:var(--blue-50); display:flex; align-items:center; justify-content:center;
}
.cat-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.cat-card:hover .cat-card-thumb img{ transform:scale(1.12); }
.cat-card-thumb.cat-card-thumb-all{ background:var(--blue-600); }
.cat-card-thumb.cat-card-thumb-all svg{ width:20px; height:20px; color:#fff; }
.cat-card-name{ font-size:.88rem; color:var(--text-grey); font-weight:500; line-height:1.25; }
.cat-card:has(input:checked){ background:var(--blue-50); border-color:var(--blue-100); }
.cat-card:has(input:checked) .cat-card-name{ color:var(--navy-900); font-weight:700; }
.cat-card:has(input:checked) .cat-card-thumb{ box-shadow:0 0 0 2px var(--blue-600); }
.cat-card:has(input:focus-visible){ outline:2px solid var(--blue-500); outline-offset:2px; }

.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.shop-grid .product-card.is-hidden{ display:none; }
.shop-empty{ display:none; text-align:center; padding:60px 20px; color:var(--text-grey); }
.shop-empty.show{ display:block; }
@media (max-width:1280px){ .shop-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1024px){ .shop-layout{ grid-template-columns:1fr; } .shop-filters{ display:none; } }
@media (max-width:900px){ .shop-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:480px){ .shop-grid{ grid-template-columns:1fr; } }

.product-card .card-link{ margin-top:10px; }

/* ---------- Slide-in filter drawer (mobile) ---------- */
.filter-drawer-overlay{
  position:fixed; inset:0; background:rgba(6,42,70,.45); z-index:1200; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.filter-drawer-overlay.open{ opacity:1; visibility:visible; }
.filter-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(340px,86vw); background:#fff; z-index:1201;
  padding:24px; overflow-y:auto; transform:translateX(100%); transition:transform .35s var(--ease);
  box-shadow:-14px 0 40px rgba(6,42,70,.18);
}
.filter-drawer.open{ transform:translateX(0); }
.filter-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.filter-drawer-head h4{ margin:0; font-family:var(--font-head); font-size:1.05rem; }
.filter-drawer-head button{ background:var(--grey-50); border:none; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.filter-drawer-head button svg{ width:16px; height:16px; }
.filter-drawer-apply{ width:100%; margin-top:24px; }

/* Raw details_html content (service/industry feature lists + spec tables) */
.service-detail ul, .industry-detail ul{ margin:18px 0; }
.service-detail ul li, .industry-detail ul li{
  position:relative; padding-left:30px; margin-bottom:11px; color:var(--text-grey); line-height:1.5;
}
.service-detail ul li::before, .industry-detail ul li::before{
  content:""; position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:50%;
  background:var(--blue-50);
}
.service-detail ul li::after, .industry-detail ul li::after{
  content:""; position:absolute; left:6px; top:.55em; width:8px; height:4px;
  border-left:2px solid var(--blue-600); border-bottom:2px solid var(--blue-600); transform:rotate(-45deg);
}
.service-detail ul strong, .industry-detail ul strong{ display:block; margin-top:14px; }
.service-detail > div > strong, .industry-detail > div > strong{
  display:block; font-family:var(--font-head); color:var(--navy-900); font-size:1.05rem; margin:18px 0 4px;
}

/* Legal pages */
.legal-content h2{ font-size:1.4rem; margin-top:2em; }
.legal-content h3{ font-size:1.1rem; margin-top:1.4em; }
.legal-content p, .legal-content li{ color:var(--text-grey); }
.legal-content ul{ padding-left:1.2em; list-style:disc; margin-bottom:1em; }
.legal-content ul li{ margin-bottom:.4em; }
.legal-content .updated{ color:var(--blue-600); font-weight:700; font-size:.85rem; margin-bottom:2em; display:block; }

/* 404 */
.error-page{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:calc(var(--nav-h) + 40px) 24px 60px; }
.error-page .code{ font-family:var(--font-head); font-size:6rem; color:var(--blue-100); font-weight:800; line-height:1; }