/* Kedia Water House — Premium Industrial / "Deep Water" design system */
/* ============================================================
   TYPEFACES — self-hosted, subset to the ranges this site uses
   ------------------------------------------------------------
   Display: IBM Plex Sans. Commissioned by IBM to express
   engineering and precision, which is closer to a water-supply
   contractor than the previous Space Grotesk (a display face
   derived from Space Mono, and the default look of startup
   landing pages). Plex also ships a matching Devanagari family,
   so Nepali content can join later in the same voice.
   Body: Inter, kept — neutral and highly legible.
   Accent: IBM Plex Serif italic, replacing Fraunces, whose
   literal WONK axis read boutique rather than industrial.
   Mono: IBM Plex Mono, used only for reference codes and counts.

   Served from assets/fonts rather than the Google CDN: one less
   third-party request, and the pages no longer fall back to
   system fonts when that CDN is slow or blocked.
   ============================================================ */
@font-face{font-family:'IBM Plex Sans';src:url('../assets/fonts/plex-sans-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../assets/fonts/plex-sans-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../assets/fonts/plex-sans-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Serif';src:url('../assets/fonts/plex-serif-500-italic.woff2') format('woff2');
  font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/plex-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/plex-mono-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --deep:#06172e;
  --navy:#0d2b52;
  --blue:#1b5fa8;
  --blue-2:#12699b;
  --aqua:#37c3e8;
  --foam:#eaf4fb;
  /* Cool paper. Was #f6f1e8, a warm cream at hue 39 sitting inside an
     otherwise cool palette (--foam is hue 207) — it read as a foreign
     block between sections. This keeps a distinct surface without
     leaving the blue family. */
  --paper:#e8eef4;
  --white:#fff;
  --ink:#0e1a28;
  --muted:#5c6d80;
  --line:#dbe6f0;
  --line-dark:rgba(255,255,255,.13);
  --wa:#25d366;
  --grad:linear-gradient(125deg,#06172e 0%,#0d2b52 52%,#12699b 100%);
  --shadow:0 24px 64px rgba(6,23,46,.14);
  --shadow-sm:0 12px 30px rgba(6,23,46,.1);
  --display:'IBM Plex Sans','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --editorial:'IBM Plex Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:18px;
  --radius-sm:11px;
  --header-h:78px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:var(--body);font-size:16px;line-height:1.65;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.06;letter-spacing:-.035em}
h1{font-size:clamp(2.55rem,5.8vw,5.4rem)}
h2{font-size:clamp(2rem,4vw,3.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
em.display{font-family:var(--editorial);font-weight:500;color:var(--aqua)}
.wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.on-dark{color:#fff}
.on-light{color:var(--ink)}
.skip-link{position:fixed;left:16px;top:12px;z-index:500;transform:translateY(-160%);background:#fff;
  color:var(--deep);padding:10px 16px;border-radius:8px;font-weight:800}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--aqua);outline-offset:4px;border-radius:5px}
::selection{background:var(--aqua);color:var(--deep)}

/* typography details */
.lbl{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-size:.72rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--blue)}
.lbl::before{content:"";width:28px;height:2px;background:currentColor}
.on-dark .lbl,.dark .lbl,.hero-bg .lbl,.product-hero .lbl,.gallery-page .lbl{color:var(--aqua)}
.eyebrow{font:700 .72rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.section-intro{max-width:640px;color:var(--muted);font-size:1.02rem}

/* buttons */
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 23px;
  border:1px solid transparent;border-radius:999px;font-family:var(--display);font-size:.91rem;font-weight:700;
  letter-spacing:.01em;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,
  border-color .22s ease,color .22s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:18px;height:18px;transition:transform .22s ease}
.btn:hover svg{transform:translateX(2px)}
.btn-copper{background:var(--aqua);color:var(--deep);box-shadow:0 12px 28px rgba(55,195,232,.2)}
.btn-copper:hover{background:#66d4ef;box-shadow:0 16px 36px rgba(55,195,232,.3)}
.btn-ink{background:var(--deep);color:#fff}.btn-ink:hover{background:var(--navy)}
.btn-line{border-color:var(--line);background:#fff;color:var(--deep)}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.btn-line-w{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04);color:#fff;
  backdrop-filter:blur(8px)}
.btn-line-w:hover{border-color:var(--aqua);background:rgba(55,195,232,.1)}
.btn-wa{background:var(--wa);color:#073e1d;box-shadow:0 12px 25px rgba(37,211,102,.17)}
.btn-wa:hover{background:#45df7b;box-shadow:0 16px 32px rgba(37,211,102,.25)}

/* header */
.site-head{position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);background:rgba(6,23,46,.76);
  border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:background .25s ease,box-shadow .25s ease,transform .3s ease}
.site-head.scrolled{background:rgba(6,23,46,.96);box-shadow:0 10px 30px rgba(4,16,31,.2)}
.site-head.hide{transform:translateY(-105%)}
.site-head .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font:700 1rem/1.15 var(--display)}
.brand .mark{width:46px;height:46px;border-radius:13px;overflow:hidden;border:2px solid rgba(55,195,232,.7);
  background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.16);flex-shrink:0}
.brand .mark img{width:100%;height:100%;object-fit:cover}
.brand small{display:block;color:#8db6d4;font:700 .61rem/1.35 var(--display);letter-spacing:.17em;
  text-transform:uppercase;margin-top:3px}
.nav{display:flex;align-items:center;gap:31px;font:600 .88rem/1 var(--display);color:#adc1d5}
.nav a{position:relative;padding:11px 0;transition:color .2s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aqua);
  transform:scaleX(0);transition:transform .25s ease;transform-origin:right}
.nav a:hover,.nav a.on{color:#fff}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.head-cta{display:inline-flex;min-height:44px;padding:11px 20px}
.burger{display:none;width:48px;height:48px;border:1px solid rgba(255,255,255,.16);border-radius:50%;
  background:rgba(255,255,255,.06);cursor:pointer;z-index:120}
.burger i{display:block;width:20px;height:2px;background:#fff;margin:5px auto;border-radius:2px;transition:.3s}
.burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;justify-content:center;padding:100px 32px 42px;
  background:radial-gradient(circle at 85% 10%,rgba(55,195,232,.22),transparent 30%),var(--deep);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto}
.drawer::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px}
.drawer a{position:relative;color:#fff;font:700 clamp(2rem,8vw,3.4rem)/1 var(--display);letter-spacing:-.04em;
  padding:12px 0;opacity:0;transform:translateY(16px);transition:.35s ease}
.drawer.open a{opacity:1;transform:none}
.drawer a.on{color:var(--aqua)}
.drawer .drawer-quote{align-self:flex-start;margin-top:22px;padding:13px 21px;border-radius:999px;background:var(--aqua);color:var(--deep);font-size:.88rem;letter-spacing:0}
.drawer .d-contact{position:relative;margin-top:32px;padding-top:25px;border-top:1px solid var(--line-dark);
  color:#91a9c1;font-size:.85rem;opacity:0;transition:.35s ease .25s}
.drawer.open .d-contact{opacity:1}

/* homepage hero */
.hero-bg{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:var(--deep);color:#fff}
.hero-bg .bg{position:absolute;inset:0;overflow:hidden}
.hero-bg .bg img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.015);will-change:transform}
.hero-bg .veil{position:absolute;inset:0;background:
  radial-gradient(700px 480px at 75% 55%,rgba(27,95,168,.12),transparent 70%),
  linear-gradient(90deg,rgba(6,23,46,.98) 0%,rgba(6,23,46,.88) 38%,rgba(6,23,46,.38) 67%,rgba(6,23,46,.12) 100%)}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 70%)}
.hero-bg .wrap{position:relative;z-index:2;padding-top:calc(var(--header-h) + 66px);padding-bottom:52px}
.hero-bg .wrap>div{max-width:760px}
.hero-bg h1{max-width:760px;margin-top:24px;color:#fff;font-weight:700;text-wrap:balance}
.hero-bg h1 .accent{font-family:var(--editorial);font-style:italic;font-weight:500;color:var(--aqua)}
.hero-bg p.lead{max-width:600px;margin:25px 0 32px;color:#c7d8e8;font-size:clamp(1rem,1.4vw,1.16rem)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:0;max-width:780px;margin-top:54px;
  padding:23px 25px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  background:rgba(6,23,46,.56);backdrop-filter:blur(16px)}
.hero-stats>div{padding:3px 20px;border-left:1px solid rgba(255,255,255,.14)}
.hero-stats>div:first-child{border-left:0;padding-left:0}
.hero-stats b{display:block;color:#fff;font:700 clamp(1.5rem,2.5vw,2.15rem)/1 var(--display)}
.hero-stats b em{font-style:normal;color:var(--aqua)}
.hero-stats b span{display:inline;margin:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none}
.hero-stats>div>span{display:block;margin-top:8px;color:#8fa9c2;font:700 .61rem/1.25 var(--display);
  letter-spacing:.13em;text-transform:uppercase}

/* shared sections */
.sec{position:relative;padding:112px 0;background:#fff}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.sec-head h2{margin-top:15px;color:var(--deep)}
.sec-head .sub{max-width:460px;color:var(--muted)}
.water-grid{position:relative;overflow:hidden}
.water-grid::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;background-image:
  radial-gradient(circle at 82% 12%,rgba(55,195,232,.11),transparent 22%),
  linear-gradient(rgba(27,95,168,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(27,95,168,.035) 1px,transparent 1px);
  background-size:auto,52px 52px,52px 52px}

/* category rail */
.category-rail{position:relative;z-index:4;background:var(--deep);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.category-rail .wrap{display:flex;overflow-x:auto;scrollbar-width:none}
.category-rail .wrap::-webkit-scrollbar{display:none}
.category-rail a{min-width:max-content;display:flex;align-items:center;gap:11px;padding:20px 24px;color:#9bb2c9;
  border-right:1px solid var(--line-dark);font:600 .79rem/1 var(--display);letter-spacing:.05em;transition:.2s}
.category-rail a:first-child{border-left:1px solid var(--line-dark)}
.category-rail a span{color:var(--aqua);font-family:var(--editorial);font-style:italic}
.category-rail a:hover{background:rgba(55,195,232,.08);color:#fff}

/* image product cards */
.prod-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{position:relative;min-height:440px;display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--radius);
  background:var(--deep);box-shadow:var(--shadow-sm);isolation:isolate;transition:transform .35s ease,box-shadow .35s ease}
.pcard .pimg{position:absolute;inset:0;z-index:-2}
.pcard .pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,23,46,.04) 20%,rgba(6,23,46,.95) 93%)}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.pcard .pbody{width:100%;padding:30px;color:#fff}
.pcard .pbody::before{display:block;margin-bottom:16px;color:var(--aqua);font:italic 1rem/1 var(--editorial)}
.pcard:nth-child(1) .pbody::before{content:"01 / Pumping"}
.pcard:nth-child(2) .pbody::before{content:"02 / Pipe systems"}
.pcard:nth-child(3) .pbody::before{content:"03 / Flow control"}
.pcard h3{font-size:1.35rem}.pcard p{margin:10px 0 18px;color:#b9cadb;font-size:.9rem}
.pcard .go{color:var(--aqua);font:700 .79rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.pcard:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(6,23,46,.22)}
.pcard:hover .pimg img{transform:scale(1.065)}

/* why section */
.why-section{padding:108px 0;background:
  radial-gradient(700px 430px at 86% 12%,rgba(55,195,232,.15),transparent 68%),
  radial-gradient(520px 350px at 5% 92%,rgba(27,95,168,.08),transparent 70%),var(--foam)}
.why-section .wrap{position:relative;z-index:1}
.why-title{max-width:720px;margin-top:16px;text-wrap:balance}
.why-grid{display:grid;grid-template-columns:1.1fr repeat(2,1fr);gap:18px;margin-top:44px}
.why-card{position:relative;isolation:isolate;min-height:248px;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;padding:27px 28px;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:rgba(255,255,255,.66);
  box-shadow:0 22px 55px rgba(6,23,46,.08),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(18px) saturate(120%)}
.why-card::before{content:"";position:absolute;z-index:-1;width:190px;aspect-ratio:1;right:-80px;top:-94px;border-radius:50%;
  border:1px solid rgba(27,95,168,.11);box-shadow:0 0 0 25px rgba(55,195,232,.035),0 0 0 51px rgba(27,95,168,.025);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.why-card.featured{grid-row:span 2;min-height:514px;padding:30px;color:#fff;background:
  linear-gradient(180deg,rgba(6,23,46,.18) 0%,rgba(6,23,46,.45) 40%,rgba(6,23,46,.96) 100%),
  linear-gradient(120deg,rgba(55,195,232,.12),transparent 55%),url('../assets/real-warehouse-inventory.jpg') center/cover}
@supports (background-image:image-set(url('../assets/real-warehouse-inventory.avif') type("image/avif"))){
  .why-card.featured{background:
    linear-gradient(180deg,rgba(6,23,46,.18) 0%,rgba(6,23,46,.45) 40%,rgba(6,23,46,.96) 100%),
    linear-gradient(120deg,rgba(55,195,232,.12),transparent 55%),
    image-set(url('../assets/real-warehouse-inventory.avif') type("image/avif"),url('../assets/real-warehouse-inventory.jpg') type("image/jpeg")) center/cover}
}
.why-card.featured::before{z-index:0;width:270px;right:-94px;top:-112px;border-color:rgba(55,195,232,.28);
  box-shadow:0 0 0 34px rgba(55,195,232,.06),0 0 0 69px rgba(55,195,232,.035)}
.why-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.why-index{color:var(--blue);font:700 .64rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.why-icon{width:50px;height:50px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(27,95,168,.12);border-radius:16px;
  background:rgba(255,255,255,.66);color:var(--blue);box-shadow:0 10px 24px rgba(6,23,46,.08),inset 0 1px 0 #fff}
.why-icon svg{width:25px;height:25px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-card-copy{position:relative;z-index:2;margin-top:38px;max-width:390px}
.why-card h3{margin-bottom:10px;font-size:clamp(1.2rem,1.7vw,1.46rem)}
.why-card p{color:var(--muted);font-size:.91rem;line-height:1.7}
.why-card .why-card-mark{position:absolute;z-index:0;right:19px;bottom:-19px;color:rgba(27,95,168,.065);
  font:700 5.3rem/1 var(--display);letter-spacing:-.09em;transition:transform .45s ease,color .45s ease}
.why-status{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  background:rgba(3,19,38,.38);color:#d5e7f5;font:700 .61rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px)}
.why-status i{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px rgba(55,195,232,.12),0 0 12px rgba(55,195,232,.75)}
.why-stock .why-index{color:#bfeefa}
.why-feature-copy{position:relative;z-index:2;padding:25px;border:1px solid rgba(255,255,255,.16);border-radius:19px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(16px)}
.why-feature-copy p{color:#c2d2e2}.why-stat{display:flex;align-items:flex-end;gap:7px;margin-bottom:25px;color:var(--aqua)}
.why-stat strong{font:700 clamp(3.4rem,5vw,5rem)/.72 var(--display);letter-spacing:-.08em}.why-stat span{padding-bottom:2px;font:700 .72rem/1 var(--display);letter-spacing:.18em}
.why-guidance{border-color:rgba(255,255,255,.17);color:#fff;background:
  radial-gradient(220px circle at 90% 4%,rgba(55,195,232,.23),transparent 63%),linear-gradient(145deg,#071b35,#0d315c)}
.why-guidance::before{border-color:rgba(55,195,232,.2);box-shadow:0 0 0 25px rgba(55,195,232,.035),0 0 0 51px rgba(55,195,232,.025)}
.why-guidance .why-icon{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.09);color:var(--aqua);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.why-guidance .why-index{color:#87dff3}.why-guidance p{color:#b9cddd}.why-guidance .why-card-mark{color:rgba(255,255,255,.045)}
.why-delivery{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(218,243,250,.7))}
.why-delivery .why-icon{background:linear-gradient(145deg,#fff,#dff6fb);color:#11719f}
.why-boq{background:
  linear-gradient(rgba(27,95,168,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,95,168,.045) 1px,transparent 1px),
  linear-gradient(145deg,rgba(237,250,253,.94),rgba(197,235,246,.72));background-size:22px 22px,22px 22px,auto}
.why-boq .why-icon{background:linear-gradient(145deg,#e9faff,#bdebf5);color:#0f6795}
.why-continuity{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,241,232,.78))}
.why-continuity .why-icon{background:linear-gradient(145deg,#fff,#e6edf4)}
.why-card:hover::before{transform:translate3d(-9px,12px,0) scale(1.05)}
.why-card:hover .why-card-mark{transform:translateY(-8px);color:rgba(27,95,168,.11)}
.why-guidance:hover .why-card-mark{color:rgba(255,255,255,.075)}

/* editorial heritage band */
.band{position:relative;padding:112px 0;background:var(--paper);overflow:hidden}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.band h2{margin-top:17px;color:var(--deep)}
.band .quote{margin-top:22px;color:var(--muted);font-size:1.04rem;line-height:1.8}
.band .sig{margin-top:24px;color:var(--blue);font:700 .7rem/1.4 var(--display);letter-spacing:.13em;text-transform:uppercase}
.band-img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.band-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.24);border-radius:inherit}
.band-img picture,.story-img picture,.p-feature .media picture{display:block;width:100%;height:100%}
.band-img img{width:100%;height:100%;object-fit:cover}
.heritage-mark{position:absolute;right:-18px;bottom:-22px;z-index:2;width:132px;height:132px;display:grid;place-items:center;
  border-radius:50%;background:var(--aqua);color:var(--deep);text-align:center;font:700 .85rem/1.25 var(--display);
  box-shadow:0 18px 40px rgba(6,23,46,.18)}

/* catalogue */
.catalogue-section{padding:90px 0;background:#fff}
.catalogue-panel{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;padding:55px;
  overflow:hidden;border-radius:26px;background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.catalogue-panel::before{content:"";position:absolute;width:430px;height:430px;right:-190px;top:-210px;border:1px solid rgba(55,195,232,.35);border-radius:50%;box-shadow:0 0 0 55px rgba(55,195,232,.05),0 0 0 110px rgba(55,195,232,.035)}
.catalogue-panel h2{margin:14px 0;color:#fff}.catalogue-panel p{max-width:580px;color:#bdd1e3}
.catalogue-visual{position:relative;display:flex;align-items:center;justify-content:center}
.catalogue-sheet{width:220px;aspect-ratio:520/735;border-radius:11px;overflow:hidden;background:var(--deep);
  transform:rotate(4deg);box-shadow:0 28px 60px rgba(0,0,0,.34)}
.catalogue-sheet img{display:block;width:100%;height:100%;object-fit:cover}

/* inner heroes */
.page-hero{position:relative;padding:170px 0 72px;overflow:hidden;background:
  radial-gradient(circle at 78% 34%,rgba(55,195,232,.2),transparent 27%),var(--grad);color:#fff}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px}
.page-hero .wrap{position:relative;z-index:2}.page-hero h1{max-width:900px;margin-top:18px;color:#fff}
.page-hero h1 em{font-family:var(--editorial);font-weight:500;color:var(--aqua)}
.page-hero p{max-width:650px;margin-top:19px;color:#b9ccde;font-size:1.02rem}

/* filters */
.chipbar{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.chip{min-height:44px;padding:9px 17px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.06);
  color:#b9ccde;font:600 .8rem/1 var(--display);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--aqua);color:#fff}.chip.on{border-color:var(--aqua);background:var(--aqua);color:var(--deep)}
.filter-status{margin-top:15px!important;color:#8ea8c0!important;font-size:.78rem!important}
.hidden{display:none!important}

/* products */
.product-hero{padding-bottom:52px}.product-hero .btn{margin-top:28px}
.product-filter-shell{position:sticky;top:var(--header-h);z-index:35;border-bottom:1px solid var(--line-dark);background:rgba(6,23,46,.96);backdrop-filter:blur(14px)}
.product-filter-shell .chipbar{margin-top:0;padding:13px 0}.product-filter-shell .filter-status{position:absolute;right:24px;top:20px;margin:0!important}.product-filter-shell .wrap{position:relative;padding-right:190px}
.p-list{padding:78px 0 110px;background:var(--foam)}
.p-feature{display:grid;grid-template-columns:.92fr 1.08fr;min-height:420px;margin-bottom:34px;overflow:hidden;
  border-radius:var(--radius);background:#fff;box-shadow:0 16px 45px rgba(6,23,46,.08);scroll-margin-top:115px}
.p-feature .media{min-height:420px;overflow:hidden;background:var(--deep)}
.p-feature .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.p-feature.alt .media{order:2}.p-feature .txt{padding:46px 50px;display:flex;flex-direction:column;justify-content:center}
.p-feature.alt .txt{background:var(--paper)}
.p-feature .idx{color:var(--blue);font:italic 1rem/1 var(--editorial)}
.p-feature h2{margin:12px 0 17px;color:var(--deep);font-size:clamp(1.55rem,2.6vw,2.35rem)}
.p-feature ul{list-style:none;margin:0 0 21px}.p-feature li{position:relative;padding:9px 0 9px 21px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.88rem}
.p-feature li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px rgba(55,195,232,.12)}
.spec{display:inline-block;margin:0 6px 7px 0;padding:6px 11px;border:1px solid rgba(27,95,168,.12);border-radius:999px;background:var(--foam);color:var(--blue);font:700 .7rem/1 var(--display)}
.p-feature:hover .media img{transform:scale(1.045)}
.spec-toggle{display:none;width:100%;min-height:44px;margin-bottom:14px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--blue);font:700 .78rem/1 var(--display);text-align:left}

/* about */
.about-hero h1{max-width:820px}.story{position:relative;padding:105px 0;background:#fff}
.story .wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:75px;align-items:center}
.bigyear{font:700 clamp(7rem,15vw,12rem)/.8 var(--display);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:2px var(--blue)}
.bigyear-cap{max-width:320px;margin-top:25px;color:var(--muted);font-size:1rem}
.story-img{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.story-img img{width:100%;height:100%;object-fit:cover}
.miles{padding:0 0 110px;background:#fff}.miles .wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.miles .wrap::before{content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:var(--line)}
.mile{position:relative;padding:40px 28px 0 0}.mile::before{content:"";position:absolute;top:7px;left:0;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 1px var(--blue)}
.mile b{display:block;margin-bottom:9px;color:var(--deep);font:700 1rem/1 var(--display)}.mile span{color:var(--muted);font-size:.84rem}
.capacity-section{padding:0 0 105px;background:#fff}.capacity-panel{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:54px;padding:48px;border-radius:24px;background:var(--foam);overflow:hidden}.capacity-number{color:var(--blue);font:700 clamp(4.5rem,10vw,8rem)/.8 var(--display);letter-spacing:-.08em}.capacity-number span{display:block;margin-top:22px;color:var(--muted);font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}.capacity-panel h2{color:var(--deep)}.capacity-panel p{margin-top:15px;color:var(--muted)}

/* gallery */
.gallery-page{background:var(--deep)}.gallery-page .site-foot{border-top:1px solid var(--line-dark)}
.gallery-page .page-hero{background:radial-gradient(circle at 75% 40%,rgba(55,195,232,.16),transparent 28%),var(--deep);padding-bottom:54px}
.g-wrap{padding:50px 0 110px;background:var(--deep)}
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:15px}
.g-item{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);cursor:zoom-in;background:var(--navy);transition:transform .3s ease,border-color .3s ease}
.g-item picture{position:absolute;inset:0;display:block}
.g-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s ease,filter .3s ease}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,23,46,.88));pointer-events:none}
.g-item .cap{position:absolute;inset:auto 0 0;z-index:2;padding:17px;color:#fff;font:600 .79rem/1 var(--display);letter-spacing:.04em}
.g-item:hover{z-index:2;transform:translateY(-4px);border-color:var(--aqua)}.g-item:hover img{transform:scale(1.055)}
.g-item.w2{grid-column:span 2}.g-item.h2x{grid-row:span 2}
.lightbox{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:60px;background:rgba(3,12,24,.96);opacity:0;visibility:hidden;pointer-events:none;transition:.25s}
.lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox .lb-media{width:min(1040px,88vw);height:min(680px,72vh);overflow:hidden;border-radius:var(--radius);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lightbox .lb-media img{width:100%;height:100%;object-fit:contain;background:#020a14}
.lightbox .lb-cap{margin-top:16px;color:#b9ccde;font-size:.86rem}
.lb-count{margin-top:4px;color:var(--aqua);font:700 .67rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.lightbox button{display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.lightbox .lb-close{position:absolute;right:28px;top:25px;width:48px;height:48px;border-radius:50%;font-size:1.8rem}
.lightbox .lb-arrow{position:absolute;top:50%;width:52px;height:52px;border-radius:50%;font-size:1.25rem;transform:translateY(-50%)}
.lightbox button:hover{border-color:var(--aqua);background:rgba(55,195,232,.14)}.lb-prev{left:28px}.lb-next{right:28px}

/* contact */
.c-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:820px}.c-left{position:relative;padding:170px max(38px,7vw) 85px;color:#fff;background:var(--grad);overflow:hidden}
.c-left::before{content:"";position:absolute;width:480px;height:480px;right:-260px;bottom:-230px;border:1px solid rgba(55,195,232,.28);border-radius:50%;box-shadow:0 0 0 70px rgba(55,195,232,.035),0 0 0 140px rgba(55,195,232,.025)}
.c-left h1{max-width:540px;color:#fff}.c-left .lbl{color:var(--aqua)}
.c-item{position:relative;z-index:2;display:flex;align-items:flex-start;gap:15px;margin-top:24px;color:#c5d7e7;font-size:.9rem}
.c-item .ic{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line-dark);border-radius:50%;background:rgba(255,255,255,.06)}
.c-item .ic svg{width:19px;height:19px}.c-item a{color:#fff;font-weight:700}.c-item small{display:block;margin-top:3px;color:#8ca8c0}
.map-shell{position:relative;z-index:2;height:230px;margin-top:36px;overflow:hidden;border:1px solid var(--line-dark);border-radius:var(--radius);background:rgba(255,255,255,.045);cursor:pointer}
.map-shell iframe{width:100%;height:100%;border:0}.map-tap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#aac0d4;font:600 .78rem/1.4 var(--display);text-align:center;padding:20px}.map-tap svg{width:25px;height:25px}
.c-right{padding:170px max(38px,7vw) 85px;background:var(--paper)}.c-right h2{margin:13px 0 10px;color:var(--deep)}
.formnote{margin-bottom:30px;color:var(--muted)}.field{width:100%;min-height:52px;margin-bottom:14px;padding:14px 16px;border:1px solid #cbd9e6;border-radius:10px;background:rgba(255,255,255,.76);color:var(--ink);transition:.2s}
.contact-quick{display:none;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0 30px}.contact-quick a{min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:999px;font:700 .8rem/1 var(--display)}.contact-quick .quick-call{border:1px solid var(--line);background:#fff;color:var(--deep)}.contact-quick .quick-wa{background:var(--wa);color:#073e1d}
.field:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,95,168,.1);background:#fff}.field.is-invalid{border-color:#bf3151;box-shadow:0 0 0 4px rgba(191,49,81,.08)}
textarea.field{min-height:125px;resize:vertical}.field-error{display:block;margin:-8px 0 12px;color:#a32343;font-size:.75rem}.form-alt{margin-top:18px;color:var(--muted);font-size:.82rem}.form-alt a{color:var(--blue);font-weight:800}.form-status{margin-top:14px;color:var(--blue);font-size:.82rem;font-weight:700}
.form-escape{margin-top:10px;color:var(--muted);font-size:.8rem;line-height:1.55}
.form-escape a{color:var(--blue);font-weight:800}

/* CTAs */
.cta-final{position:relative;padding:100px 0;overflow:hidden;text-align:center;background:var(--grad);color:#fff}
.cta-final::before{content:"";position:absolute;width:620px;height:620px;left:50%;top:50%;border:1px solid rgba(55,195,232,.2);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 70px rgba(55,195,232,.03),0 0 0 140px rgba(55,195,232,.02)}
.cta-final .wrap{position:relative;z-index:2}.cta-final h2{max-width:820px;margin-inline:auto;color:#fff}.cta-final p{max-width:620px;margin:16px auto 30px;color:#bfd2e3}
.cta-final:not(.dark){background:var(--paper)}.cta-final:not(.dark)::before{border-color:rgba(27,95,168,.14)}

/* footer */
.site-foot{position:relative;isolation:isolate;overflow:hidden;padding:66px 0 24px;background:
  radial-gradient(700px 430px at 88% -6%,rgba(55,195,232,.15),transparent 68%),
  radial-gradient(560px 380px at -5% 110%,rgba(27,95,168,.16),transparent 70%),linear-gradient(145deg,#020c19,#06172e 64%,#08213c);
  color:#8da7bf;font-size:.83rem;box-shadow:inset 0 1px 0 rgba(55,195,232,.28)}
.site-foot::before{content:"";position:absolute;z-index:-1;width:400px;aspect-ratio:1;right:-150px;top:-255px;border:1px solid rgba(55,195,232,.14);border-radius:50%;
  box-shadow:0 0 0 48px rgba(55,195,232,.022),0 0 0 96px rgba(55,195,232,.014)}
.site-foot::after{content:"";position:absolute;z-index:-2;inset:0;opacity:.34;pointer-events:none;background-image:
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px;mask-image:linear-gradient(90deg,#000,transparent 74%)}
.site-foot .wrap{position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:42px;margin-bottom:30px}
.foot-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--aqua);font:700 .67rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase}
.foot-eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.foot-top h2{max-width:600px;margin-top:13px;color:#fff;font-size:clamp(2rem,3.2vw,3rem);text-wrap:balance}
.foot-top h2 em{font-family:var(--editorial);font-weight:500;color:var(--aqua)}
.foot-actions{display:flex;align-items:center;gap:9px}
.foot-action{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:10px 17px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(255,255,255,.045);transition:transform .22s ease,border-color .22s ease,background .22s ease}
.foot-action strong{color:#fff;font:700 .76rem/1 var(--display);letter-spacing:.02em}
.foot-action:hover{transform:translateY(-2px);border-color:rgba(55,195,232,.42);background:rgba(55,195,232,.08)}
.foot-action.foot-wa{border-color:rgba(75,224,132,.32);background:rgba(37,211,102,.08)}
.foot-action.foot-wa strong{color:#8beaae}
.foot-cols{display:grid;grid-template-columns:1.7fr .65fr 1.1fr;gap:54px;border-block:1px solid rgba(255,255,255,.11);background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 72%)}
.foot-cols>*{min-width:0;padding:28px 0}
.foot-cols h5{margin-bottom:15px;color:#dce8f3;font:700 .64rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.foot-cols a{position:relative;display:block;width:fit-content;max-width:100%;padding:5px 0;color:#9bb2c8;transition:color .2s ease,transform .2s ease}
.foot-cols a:hover{color:#fff;transform:translateX(4px)}
.foot-brand{display:flex;align-items:flex-start;gap:17px}.foot-brand img{width:62px;height:62px;object-fit:cover;border:1px solid rgba(255,255,255,.46);border-radius:16px;
  background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 0 3px rgba(55,195,232,.05);flex-shrink:0}.foot-brand h5{margin-bottom:8px}
.foot-brand-copy p{max-width:320px;color:#a7bdd0;line-height:1.65}.foot-brand address{margin-top:14px;color:#6f8ca6;font-style:normal;line-height:1.7}
.foot-contact a:nth-of-type(3){overflow-wrap:anywhere}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 2px 0;color:#5f7891;font-size:.72rem}
.foot-signature{display:inline-flex;align-items:center;gap:9px}.foot-signature i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px rgba(55,195,232,.65)}

/* reveal and enhanced motion */
.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}.js .p-feature .media.reveal{transform:scale(.97)}.js .p-feature .media.reveal.in{transform:none}

/* floating and mobile conversion */
.fab{position:fixed;right:22px;bottom:22px;z-index:90;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--wa);box-shadow:0 12px 30px rgba(2,35,16,.28);transition:.2s}.fab:hover{transform:translateY(-3px) scale(1.04)}.fab svg{width:26px;height:26px;fill:#073e1d}
.mobile-actions{display:none;position:fixed;inset:auto 0 0;z-index:95;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(4,16,31,.94);border-top:1px solid var(--line-dark);backdrop-filter:blur(16px);gap:8px}
.mobile-actions a{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font:700 .82rem/1 var(--display)}
.mobile-actions .call{width:42%;border:1px solid rgba(255,255,255,.25);color:#fff}.mobile-actions .whatsapp{flex:1;background:var(--wa);color:#063d1c}

/* responsive */
@media (max-width:1100px){
  .nav{gap:22px}.head-cta{display:none}.hero-bg h1{max-width:680px}.hero-stats{max-width:700px}
  .why-grid{grid-template-columns:1fr 1fr}.why-card.featured{grid-column:1/-1;grid-row:auto;min-height:410px}.why-feature-copy{max-width:570px}
  .band .wrap{gap:50px}.p-feature .txt{padding:40px}.foot-top{gap:28px}.foot-cols{gap:35px}
}
@media (max-width:860px){
  :root{--header-h:70px}.wrap{width:min(100% - 36px,760px)}.nav,.head-cta{display:none}.burger{display:block}
  .hero-bg .veil{background:linear-gradient(180deg,rgba(6,23,46,.75) 0%,rgba(6,23,46,.9) 57%,rgba(6,23,46,.98) 100%)}
  .hero-bg .bg img{object-position:62% center}.hero-bg .wrap{padding-top:130px;padding-bottom:38px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
  .hero-bg h1{font-size:clamp(2.65rem,9vw,4.6rem)}.hero-stats{grid-template-columns:1fr 1fr;margin-top:40px}.hero-stats>div{border-left:0;border-top:1px solid var(--line-dark);padding:16px 8px}.hero-stats>div:nth-child(-n+2){border-top:0}.hero-stats>div:first-child{padding-left:8px}
  .sec,.band,.story{padding:82px 0}.sec-head{align-items:flex-start;flex-direction:column;gap:15px}.prod-strip{grid-template-columns:1fr 1fr}.pcard{min-height:380px}.pcard:last-child{grid-column:1/-1}
  .band .wrap,.catalogue-panel,.story .wrap{grid-template-columns:1fr}.band .wrap{gap:42px}.band-img{order:-1}.catalogue-visual{order:-1}.catalogue-panel{padding:42px}.catalogue-sheet{width:180px}
  .p-feature{grid-template-columns:1fr}.p-feature.alt .media{order:0}.p-feature .media{min-height:300px;aspect-ratio:16/9}.p-feature .txt{padding:34px}
  .miles .wrap{grid-template-columns:1fr 1fr;gap:28px}.miles .wrap::before{display:none}.mile{padding:28px 18px 0;border-top:1px solid var(--line)}.mile::before{top:-7px}
  .g-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.lightbox{padding:45px 18px}.lightbox .lb-media{width:92vw}.lb-prev{left:12px}.lb-next{right:12px}
  .c-wrap{grid-template-columns:1fr}.c-left,.c-right{padding:125px 24px 66px}.c-right{padding-top:70px}
  .foot-top{grid-template-columns:1fr;align-items:start;gap:20px}.foot-cols{grid-template-columns:.7fr 1.3fr;gap:28px}.foot-brand{grid-column:1/-1;padding-bottom:25px;border-bottom:1px solid rgba(255,255,255,.08)}
}
@media (max-width:620px){
  body{padding-bottom:67px}.wrap{width:calc(100% - 30px)}h1{font-size:clamp(2.35rem,12vw,3.25rem)}h2{font-size:clamp(1.85rem,9vw,2.65rem)}
  .brand{font-size:.88rem}.brand .mark{width:42px;height:42px}.brand small{font-size:.52rem}.site-head .wrap{width:calc(100% - 24px)}
  .hero-bg{min-height:auto}.hero-bg .wrap{min-height:100svh;padding-top:125px;padding-bottom:25px}.hero-bg p.lead{font-size:.95rem;margin:19px 0 26px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .btn{padding:12px 13px;font-size:.79rem}
  .hero-stats{margin-top:30px;padding:11px 14px;border-radius:14px}.hero-stats b{font-size:1.42rem}.hero-stats>div>span{font-size:.58rem}.hero-stats>div{padding:13px 5px}
  .category-rail a{padding:17px 19px}.sec{padding:68px 0}.prod-strip{grid-template-columns:1fr}.pcard,.pcard:last-child{grid-column:auto;min-height:370px}.pcard .pbody{padding:25px}
  .why-section{padding:72px 0}.why-grid{grid-template-columns:1fr;margin-top:30px;gap:14px}.why-card.featured{grid-column:auto;min-height:410px}.why-card{min-height:224px;padding:23px;border-radius:20px}.why-card-copy{margin-top:34px}.why-icon{width:46px;height:46px;border-radius:14px}.why-feature-copy{padding:21px}.why-stat{margin-bottom:22px}.why-card-mark{font-size:4.7rem}
  .band,.story{padding:70px 0}.band .wrap{gap:35px}.heritage-mark{width:104px;height:104px;right:-7px;bottom:-12px}.catalogue-section{padding:62px 0}.catalogue-panel{padding:32px 24px;border-radius:20px;gap:32px}.catalogue-sheet{width:155px}
  .page-hero{padding:135px 0 48px}.page-hero p{font-size:.92rem}.product-hero .btn{width:100%}.chipbar{margin-inline:-15px;padding:0 15px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.chipbar::-webkit-scrollbar{display:none}.chip{flex-shrink:0}
  .product-filter-shell .wrap{width:100%;padding:0}.product-filter-shell .chipbar{margin:0;padding:11px 15px}.product-filter-shell .filter-status{display:none}.p-list{padding:45px 0 75px}.p-feature{min-height:0;margin-bottom:24px;border-radius:14px}.p-feature .media{min-height:220px}.p-feature .txt{padding:28px 22px}.p-feature h2{font-size:1.65rem}.p-feature.enhanced ul{display:none}.p-feature.enhanced ul.open{display:block}.spec-toggle{display:block}
  .story .wrap{gap:42px}.bigyear{font-size:7.8rem}.story-img{aspect-ratio:4/3}.miles{padding-bottom:75px}.miles .wrap{grid-template-columns:1fr;gap:18px}.mile{padding-left:5px}
  .capacity-section{padding-bottom:72px}.capacity-panel{grid-template-columns:1fr;padding:30px 24px;gap:30px}.contact-quick{display:grid}
  .g-wrap{padding:28px 0 75px}.g-grid{grid-template-columns:1fr 1fr;grid-auto-rows:125px;gap:9px}.g-item.w2{grid-column:span 2}.lightbox .lb-media{height:66vh}.lightbox .lb-arrow{top:auto;bottom:22px;transform:none}.lb-prev{left:calc(50% - 62px)}.lb-next{right:calc(50% - 62px)}.lightbox .lb-cap{margin-bottom:58px;text-align:center}
  .c-left{padding-top:125px}.c-right{padding:64px 20px}.map-shell{height:200px}.c-item{font-size:.83rem}.c-item .ic{width:42px;height:42px}
  .cta-final{padding:72px 0}.site-foot{padding:58px 0 28px}.foot-top{margin-bottom:24px}.foot-top h2{font-size:clamp(2rem,9.5vw,2.65rem)}.foot-actions{display:flex;width:100%}.foot-action{min-height:46px;flex:1}.foot-cols{grid-template-columns:1fr;gap:0}.foot-cols>*{padding:22px 0}.foot-cols>*+*{border-top:1px solid rgba(255,255,255,.08)}.foot-cols a{min-height:44px;display:flex;align-items:center}.foot-brand{grid-column:auto;gap:15px;border-bottom:0}.foot-brand img{width:58px;height:58px;border-radius:15px}.foot-base{flex-direction:column;padding-top:18px}.fab{display:none}.mobile-actions{display:flex}
}
@media (hover:none){.btn:hover,.pcard:hover,.g-item:hover{transform:none}.pcard:hover .pimg img,.g-item:hover img,.p-feature:hover .media img{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none!important}.hero-bg .bg img{transform:none!important}
}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}

/* ============================================================
   Liquid glass refinement layer
   ============================================================ */
:root{
  --glass:rgba(10,35,61,.58);
  --glass-strong:rgba(7,27,50,.82);
  --glass-light:rgba(255,255,255,.68);
  --glass-line:rgba(255,255,255,.2);
  --glass-highlight:rgba(255,255,255,.38);
  --glow:0 24px 70px rgba(3,16,34,.28),inset 0 1px 0 rgba(255,255,255,.18);
  --page-progress:0;
  --spot-x:50%;
  --spot-y:0%;
}

/* floating liquid-glass navigation capsule */
.site-head{inset:14px 0 auto;height:auto;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.site-head.scrolled{background:transparent;box-shadow:none}
.site-head.hide{transform:translateY(calc(-100% - 22px))}
.site-head .wrap{position:relative;width:min(1240px,calc(100% - 32px));min-height:66px;height:auto;padding:8px 10px 8px 12px;
  overflow:hidden;border:1px solid var(--glass-line);border-radius:24px;background:
  radial-gradient(220px circle at var(--spot-x,72%) var(--spot-y,0%),rgba(55,195,232,.15),transparent 55%),
  linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 38%,rgba(55,195,232,.08)),var(--glass);
  box-shadow:var(--glow);backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);
  pointer-events:auto;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.site-head .wrap::before{content:"";position:absolute;inset:0 18% auto;height:1px;background:linear-gradient(90deg,transparent,var(--glass-highlight),transparent);pointer-events:none}
.site-head .wrap::after{content:"";position:absolute;width:110px;height:110px;right:8%;top:-88px;border-radius:50%;background:rgba(55,195,232,.2);filter:blur(18px);pointer-events:none}
.site-head.scrolled .wrap{border-color:rgba(255,255,255,.16);background:
  radial-gradient(220px circle at var(--spot-x,72%) var(--spot-y,0%),rgba(55,195,232,.12),transparent 55%),
  linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.025) 40%,rgba(55,195,232,.06)),var(--glass-strong);
  box-shadow:0 18px 55px rgba(3,16,34,.34),inset 0 1px 0 rgba(255,255,255,.14)}
.brand{position:relative;z-index:2}.brand .mark{width:44px;height:44px;border:1px solid rgba(255,255,255,.48);box-shadow:0 8px 22px rgba(0,0,0,.2),0 0 0 3px rgba(55,195,232,.08)}
.nav{position:relative;z-index:2;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(1,12,27,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.nav a{padding:10px 15px;border-radius:999px}.nav a::after{left:50%;right:auto;bottom:4px;width:4px;height:4px;border-radius:50%;transform:translateX(-50%) scale(0)}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.08);color:#fff}.nav a:hover::after,.nav a.on::after{transform:translateX(-50%) scale(1)}
.head-cta{position:relative;z-index:2;background:linear-gradient(135deg,#74ddf4,var(--aqua) 55%,#1aa7d1);border:1px solid rgba(255,255,255,.42);box-shadow:0 10px 28px rgba(55,195,232,.25),inset 0 1px 0 rgba(255,255,255,.52)}
.scroll-progress{position:absolute;z-index:5;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--aqua),#b8f2ff);transform:scaleX(var(--page-progress,0));transform-origin:left;box-shadow:0 0 12px rgba(55,195,232,.8);pointer-events:none}

/* refracted light and liquid atmosphere */
.hero-bg::before,.page-hero::before{content:"";position:absolute;z-index:1;width:min(42vw,620px);aspect-ratio:1;right:-10%;top:8%;border-radius:42% 58% 61% 39% / 45% 35% 65% 55%;background:
  radial-gradient(circle at 31% 28%,rgba(255,255,255,.24),transparent 13%),
  radial-gradient(circle at 48% 48%,rgba(55,195,232,.22),rgba(27,95,168,.07) 50%,transparent 70%);
  border:1px solid rgba(122,224,248,.16);filter:blur(.2px);box-shadow:inset 18px 22px 50px rgba(255,255,255,.05),inset -24px -28px 55px rgba(2,16,34,.14);opacity:.68;animation:liquidFloat 11s ease-in-out infinite;pointer-events:none}
.page-hero::before{width:min(36vw,480px);right:2%;top:16%;opacity:.58}
@keyframes liquidFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg);border-radius:42% 58% 61% 39% / 45% 35% 65% 55%}50%{transform:translate3d(-18px,16px,0) rotate(7deg);border-radius:57% 43% 39% 61% / 37% 57% 43% 63%}}
.hero-bg .lbl,.page-hero .lbl{padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(3,19,38,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.hero-bg h1,.page-hero h1{text-shadow:0 12px 42px rgba(0,0,0,.22)}
.hero-stats{position:relative;overflow:hidden;border-color:rgba(255,255,255,.22);background:
  linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 55%,rgba(55,195,232,.08)),rgba(3,19,38,.46);
  box-shadow:0 24px 60px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(24px) saturate(140%)}
.hero-stats::before{content:"";position:absolute;inset:0 20% auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent)}

/* glass controls and luminous buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;z-index:-1;inset:-2px auto -2px -45%;width:34%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transition:left .5s ease}
.btn:hover::before{left:125%}
.btn-line-w{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 32px rgba(0,0,0,.12);backdrop-filter:blur(14px)}
.chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.product-filter-shell{top:96px;margin-top:12px;border:0;background:transparent;backdrop-filter:none;pointer-events:none}
.product-filter-shell .wrap{overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(6,23,46,.82);box-shadow:0 16px 45px rgba(3,16,34,.22),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(20px);pointer-events:auto}

/* premium surface depth */
.pcard{border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 60px rgba(6,23,46,.16),inset 0 1px 0 rgba(255,255,255,.14)}
.pcard::after{content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,15%),rgba(55,195,232,.18),transparent 42%);opacity:0;pointer-events:none;transition:opacity .3s ease}
.pcard:hover::after{opacity:1}
.pcard .pbody{position:relative;z-index:4}
.why-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.why-card::after,.p-feature::after,.catalogue-panel::after,.capacity-panel::after{content:"";position:absolute;z-index:1;inset:0;background:radial-gradient(380px circle at var(--spot-x,50%) var(--spot-y,0%),rgba(55,195,232,.16),transparent 44%);opacity:0;pointer-events:none;transition:opacity .3s ease}
.why-card:hover{transform:translateY(-6px);border-color:rgba(55,195,232,.38);box-shadow:0 26px 60px rgba(6,23,46,.12),inset 0 1px 0 #fff}.why-card:hover::after,.p-feature:hover::after,.catalogue-panel:hover::after,.capacity-panel:hover::after{opacity:1}
.why-card>*{position:relative;z-index:2}.why-card.featured{box-shadow:0 30px 72px rgba(6,23,46,.24),inset 0 1px 0 rgba(255,255,255,.18)}
.p-feature{position:relative;border:1px solid rgba(255,255,255,.7);box-shadow:0 22px 58px rgba(6,23,46,.1),inset 0 1px 0 #fff;transition:transform .35s ease,box-shadow .35s ease}
.p-feature:hover{transform:translateY(-4px);box-shadow:0 30px 76px rgba(6,23,46,.15),inset 0 1px 0 #fff}.p-feature>*{position:relative;z-index:2}
.catalogue-panel{border:1px solid rgba(255,255,255,.2);background:
  radial-gradient(circle at 88% 20%,rgba(55,195,232,.2),transparent 27%),
  linear-gradient(125deg,rgba(255,255,255,.08),transparent 45%),var(--grad);box-shadow:0 32px 90px rgba(6,23,46,.22),inset 0 1px 0 rgba(255,255,255,.2)}
.catalogue-panel>*{position:relative;z-index:2}.catalogue-sheet{border:1px solid rgba(255,255,255,.7);box-shadow:0 32px 75px rgba(0,0,0,.4),inset 0 1px 0 #fff}
.capacity-panel{position:relative;border:1px solid rgba(255,255,255,.9);background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(234,244,251,.62));box-shadow:0 22px 60px rgba(6,23,46,.08),inset 0 1px 0 #fff;backdrop-filter:blur(15px)}
.capacity-panel>*{position:relative;z-index:2}
.band-img{border:1px solid rgba(255,255,255,.8)}.heritage-mark{border:1px solid rgba(255,255,255,.7);background:linear-gradient(145deg,#92e8f8,var(--aqua));box-shadow:0 20px 50px rgba(6,23,46,.22),inset 0 1px 0 rgba(255,255,255,.65)}

/* immersive gallery and contact glass */
.g-item{box-shadow:0 18px 44px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.09)}
.g-item::before{content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--spot-x,50%) var(--spot-y,20%),rgba(55,195,232,.22),transparent 46%);opacity:0;pointer-events:none;transition:opacity .3s ease}.g-item:hover::before{opacity:1}
.c-left{background:radial-gradient(circle at 85% 18%,rgba(55,195,232,.2),transparent 25%),var(--grad)}
.c-item .ic{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.map-shell{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.c-right{background:radial-gradient(circle at 85% 9%,rgba(55,195,232,.11),transparent 24%),var(--paper)}
.field{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(10px)}

/* liquid CTA panels and footer transition */
.cta-final{padding:88px 0}.cta-final .wrap{max-width:980px;padding:56px 44px;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));box-shadow:0 28px 75px rgba(3,16,34,.2),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(18px)}
.cta-final:not(.dark) .wrap{border-color:rgba(27,95,168,.12);background:rgba(255,255,255,.55);box-shadow:0 25px 65px rgba(6,23,46,.08),inset 0 1px 0 #fff}
.site-foot{position:relative}
.mobile-actions{margin:0 8px 8px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025)),rgba(4,16,31,.84);box-shadow:0 18px 50px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(22px) saturate(145%)}

@media (max-width:1100px){
  .site-head .wrap{width:calc(100% - 28px)}.nav a{padding-inline:12px}.product-filter-shell{top:94px}
}
@media (max-width:860px){
  .site-head{inset:10px 0 auto}.site-head .wrap{width:calc(100% - 20px);min-height:60px;padding:7px 8px 7px 10px;border-radius:21px}.site-head .wrap::after{right:20%}
  .burger{display:block;position:relative;z-index:2;border-color:rgba(255,255,255,.2);background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .drawer{background:radial-gradient(circle at 80% 10%,rgba(55,195,232,.25),transparent 27%),linear-gradient(145deg,rgba(255,255,255,.05),transparent 45%),rgba(4,16,31,.96);backdrop-filter:blur(24px)}
  .product-filter-shell{top:82px;margin-top:8px}.product-filter-shell .wrap{border-radius:17px}
  .hero-bg::before{width:72vw;right:-35%;top:9%;opacity:.5}.page-hero::before{width:58vw;right:-20%;top:15%}
}
@media (max-width:620px){
  .site-head .wrap{width:calc(100% - 16px);border-radius:19px}.brand .mark{width:40px;height:40px}.brand small{letter-spacing:.12em}
  .hero-bg .lbl,.page-hero .lbl{padding:7px 10px;font-size:.61rem}.hero-stats{border-radius:18px}
  .product-filter-shell{top:78px}.product-filter-shell .wrap{border-radius:15px}
  .why-card:hover,.p-feature:hover{transform:none}.cta-final{padding:62px 0}.cta-final .wrap{width:calc(100% - 30px);padding:38px 22px;border-radius:22px}
  .mobile-actions{inset:auto 0 0;margin:0 7px 7px;padding-bottom:calc(9px + env(safe-area-inset-bottom));border-radius:18px}
}
@media (hover:none){.pcard::after,.why-card::after,.p-feature::after,.catalogue-panel::after,.capacity-panel::after,.g-item::before{display:none}.btn::before{display:none}}
@media (prefers-reduced-motion:reduce){.hero-bg::before,.page-hero::before{animation:none!important}.btn::before{display:none}.scroll-progress{transition:none!important}}

/* ============================================================
   Image-led page banners — Kedia inventory in focus
   ============================================================ */
.page-hero.image-hero{
  min-height:600px;display:flex;align-items:center;padding:142px 0 62px;color:#fff;
  background:
    radial-gradient(760px 480px at 96% 8%,rgba(55,195,232,.23),transparent 67%),
    radial-gradient(520px 340px at 49% 100%,rgba(27,95,168,.22),transparent 72%),
    linear-gradient(120deg,#041225 0%,#082443 52%,#0a456b 100%);
}
.hero-bg .bg picture{display:block;width:100%;height:100%}
.page-hero.image-hero::before{
  z-index:1;width:52%;height:88%;aspect-ratio:auto;right:-2%;top:8%;border:0;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(55,195,232,.24),rgba(27,95,168,.08) 48%,transparent 72%);
  filter:blur(18px);box-shadow:none;opacity:.9;animation:none;transform:none;
}
.page-hero.image-hero::after{
  z-index:0;inset:0;background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.65) 51%,transparent 69%);
  mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.65) 51%,transparent 69%);
}
.page-hero-grid{
  display:grid;grid-template-columns:minmax(0,.91fr) minmax(440px,1.09fr);gap:clamp(42px,5.6vw,82px);align-items:center;
}
.page-hero-copy{position:relative;z-index:3;min-width:0}
.page-hero.image-hero h1{max-width:680px;margin-top:20px;font-size:clamp(3.25rem,5.35vw,5.35rem);text-wrap:balance}
.page-hero.image-hero p{max-width:590px;margin-top:20px;color:#bdd0e1;font-size:1rem;line-height:1.75}
.page-hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:27px}
.page-hero-actions .btn,.product-hero .page-hero-actions .btn{margin-top:0}
.hero-text-link{
  min-height:48px;display:inline-flex;align-items:center;gap:10px;padding:10px 4px;color:#9cecff;
  font:700 .86rem/1 var(--display);letter-spacing:.015em;border-bottom:1px solid rgba(156,236,255,.34);
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.hero-text-link:hover{gap:14px;color:#fff;border-color:var(--aqua)}
.hero-proof{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 0;margin-top:27px;padding-top:19px;
  border-top:1px solid rgba(255,255,255,.14);color:#8fa9bf;font:700 .69rem/1.4 var(--display);
  letter-spacing:.12em;text-transform:uppercase;
}
.hero-proof span{display:inline-flex;align-items:center;white-space:nowrap}
.hero-proof span+span::before{content:"";width:4px;height:4px;margin:0 14px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px rgba(55,195,232,.72)}
.hero-proof strong{margin-right:6px;color:#fff;font-size:.82rem;letter-spacing:.03em}
.hero-visual{
  position:relative;z-index:2;height:430px;min-width:0;overflow:hidden;isolation:isolate;
  border:1px solid rgba(207,241,250,.35);border-radius:34px 34px 118px 34px;
  background:#0b233b;box-shadow:0 34px 85px rgba(1,12,27,.42),0 0 60px rgba(55,195,232,.09),inset 0 1px 0 rgba(255,255,255,.25);
}
.hero-visual::before{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,18,37,.54) 0%,rgba(4,18,37,.08) 42%,transparent 68%),linear-gradient(0deg,rgba(4,18,37,.58),transparent 43%);
}
.hero-visual::after{
  content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),inset -1px -1px 0 rgba(55,195,232,.08);
}
.hero-visual>picture,.hero-visual>picture>img{width:100%;height:100%;display:block}
.hero-visual>picture>img{object-fit:cover;transform:scale(1.018);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.hero-visual figcaption{
  position:absolute;z-index:5;left:20px;bottom:20px;display:flex;align-items:center;gap:9px;max-width:calc(100% - 40px);
  padding:10px 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(4,18,37,.62);
  box-shadow:0 12px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(14px);
  color:#d8e6f1;font:600 .66rem/1.2 var(--display);letter-spacing:.04em;
}
.hero-visual figcaption span{color:var(--aqua);font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.hero-visual-products img{object-position:center 52%}
.hero-visual-about img{object-position:center 45%}
.hero-visual-contact img{object-position:center 54%}
.hero-year{
  position:absolute;z-index:4;right:24px;bottom:-28px;color:rgba(255,255,255,.08);
  font:700 clamp(8.5rem,14vw,12.5rem)/.82 var(--display);letter-spacing:-.09em;
  -webkit-text-stroke:1px rgba(151,232,249,.28);text-shadow:0 18px 50px rgba(2,14,30,.28);pointer-events:none;
}
.hero-collage{display:grid;grid-template-columns:1.55fr .85fr;grid-template-rows:1fr 1fr;gap:8px;padding:8px}
.hero-collage::before{z-index:4;background:linear-gradient(0deg,rgba(4,18,37,.48),transparent 36%)}
.hero-collage>picture{position:relative;min-width:0;min-height:0;overflow:hidden}
.hero-collage>picture:first-of-type{grid-row:1/-1;border-radius:27px 6px 6px 27px}
.hero-collage>picture:nth-of-type(2){border-radius:6px 27px 6px 6px}
.hero-collage>picture:nth-of-type(3){border-radius:6px 6px 88px 6px}
.hero-collage>picture>img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hero-collage>picture:first-of-type>img{object-position:center 58%}
.hero-collage>picture:nth-of-type(2)>img{object-position:center 52%}
.hero-collage>picture:nth-of-type(3)>img{object-position:center}
.collage-label{
  position:absolute;z-index:3;left:11px;top:11px;padding:7px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  background:rgba(4,18,37,.64);color:#d9edf5;font:800 .55rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(12px);
}
.gallery-filter-shell{
  position:relative;z-index:9;border-block:1px solid rgba(255,255,255,.1);background:#071a31;color:#fff;
  box-shadow:0 14px 36px rgba(2,14,29,.16);
}
.gallery-filter-shell .wrap{display:flex;align-items:center;min-height:72px}
.gallery-filter-shell .chipbar{margin:0;padding:11px 0;flex:1}
.gallery-filter-shell .filter-status{margin-left:auto;padding-left:18px;color:#7fa0bb;font-size:.72rem;white-space:nowrap}
.contact-body{min-height:0}
.contact-body .c-left,.contact-body .c-right{padding-top:78px;padding-bottom:82px}
.contact-section-title{max-width:560px;margin-top:15px;color:#fff;font-size:clamp(2rem,3.4vw,3.1rem)}
.contact-section-intro{max-width:520px;margin-top:14px;color:#a9c0d4}
.contact-section-intro+.c-item{margin-top:35px}
.hero-waterline{
  position:absolute;z-index:4;inset:auto 0 -1px;height:34px;pointer-events:none;background:var(--deep);
  clip-path:polygon(0 75%,14% 57%,30% 66%,48% 43%,67% 63%,84% 44%,100% 55%,100% 100%,0 100%);
}
.hero-bg .veil{background:linear-gradient(90deg,rgba(4,20,38,.97) 0%,rgba(5,25,46,.83) 39%,rgba(5,22,39,.33) 70%,rgba(4,16,29,.14) 100%),linear-gradient(0deg,rgba(4,18,34,.75) 0%,transparent 43%)}
.hero-bg .bg img{filter:saturate(.9) contrast(1.04)}
.hero-stats{padding:17px 21px;border-radius:19px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.018) 58%,rgba(55,195,232,.06)),rgba(3,19,38,.4)}

@media (hover:hover) and (pointer:fine){
  .hero-visual:hover>picture>img,.hero-collage:hover>picture>img{transform:scale(1.055)}
  .hero-collage:hover>picture:nth-of-type(2)>img{transform:scale(1.075)}
}
@media (prefers-reduced-motion:no-preference){
  .page-hero-copy>*{opacity:0;animation:bannerCopyIn .68s cubic-bezier(.2,.72,.2,1) forwards}
  .page-hero-copy>*:nth-child(2){animation-delay:.08s}.page-hero-copy>*:nth-child(3){animation-delay:.16s}
  .page-hero-copy>*:nth-child(4){animation-delay:.24s}.page-hero-copy>*:nth-child(5){animation-delay:.31s}
  .hero-visual{opacity:0;animation:bannerLensIn .9s .14s cubic-bezier(.18,.72,.2,1) forwards}
  @keyframes bannerCopyIn{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}
  @keyframes bannerLensIn{from{opacity:0;transform:translateX(28px);clip-path:inset(0 0 0 18% round 34px 34px 118px 34px)}to{opacity:1;transform:none;clip-path:inset(0 round 34px 34px 118px 34px)}}
}

@media (max-width:1100px){
  .page-hero.image-hero{min-height:570px;padding-top:132px}.page-hero-grid{grid-template-columns:minmax(0,.92fr) minmax(400px,1.08fr);gap:42px}
  .page-hero.image-hero h1{font-size:clamp(3rem,5.2vw,4.65rem)}.hero-visual{height:390px}
}
@media (max-width:860px){
  .page-hero.image-hero{min-height:0;padding:122px 0 54px}.page-hero.image-hero::before{width:90%;height:55%;right:-30%;top:39%}
  .page-hero.image-hero::after{-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.58) 44%,transparent 76%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.58) 44%,transparent 76%)}
  .page-hero-grid{grid-template-columns:1fr;gap:34px}.page-hero.image-hero h1{max-width:720px;font-size:clamp(3.1rem,8.5vw,4.7rem)}
  .page-hero.image-hero p{max-width:680px}.hero-visual{height:320px;border-radius:28px 28px 88px 28px}
  .hero-year{right:20px;font-size:10rem}.gallery-filter-shell .wrap{width:100%;padding-left:24px}
  .contact-body .c-left,.contact-body .c-right{padding-top:70px;padding-bottom:72px}
}
@media (max-width:620px){
  .page-hero.image-hero{padding:112px 0 42px}.page-hero-grid{gap:27px}.page-hero.image-hero h1{margin-top:16px;font-size:clamp(2.6rem,12.8vw,3.55rem)}
  .page-hero.image-hero p{margin-top:15px;font-size:.9rem;line-height:1.68}.page-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:21px}
  .page-hero-actions .btn,.hero-text-link{width:100%;min-height:48px;padding:11px 12px;text-align:center;justify-content:center;font-size:.76rem}
  .hero-proof{margin-top:21px;padding-top:16px;font-size:.58rem;letter-spacing:.09em}.hero-proof span+span::before{margin:0 9px}
  .hero-proof strong{font-size:.69rem}.hero-visual{height:260px;border-radius:22px 22px 68px 22px}.hero-visual figcaption{left:13px;bottom:13px;max-width:calc(100% - 26px);padding:8px 10px;font-size:.58rem}
  .hero-year{right:14px;bottom:-18px;font-size:7.4rem}.hero-collage{display:block;padding:0}.hero-collage>picture{height:100%;border-radius:inherit!important}
  .hero-collage>picture:nth-of-type(n+2){display:none}.hero-collage::before{background:linear-gradient(0deg,rgba(4,18,37,.56),transparent 48%)}
  .gallery-filter-shell .wrap{min-height:62px;padding-left:15px}.gallery-filter-shell .chipbar{padding:9px 15px 9px 0}.gallery-filter-shell .filter-status{display:none}
  .contact-body .c-left,.contact-body .c-right{padding-top:60px;padding-bottom:64px}.contact-body .c-left{padding-inline:24px}.contact-section-title{font-size:2rem}
  .hero-waterline{height:25px}.hero-stats{padding:10px 13px}
}
@media (prefers-reduced-motion:reduce){
  .page-hero-copy>*,.hero-visual{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
}

/* ============================================================
   Waterline banners — editorial on desktop, native on mobile
   ============================================================ */
.page-hero.image-hero{
  --page-edge:max(24px,calc((100vw - 1240px)/2));
  min-height:570px;padding:132px 0 54px;background:
    radial-gradient(700px 430px at 82% 18%,rgba(55,195,232,.16),transparent 68%),
    linear-gradient(118deg,#041326 0%,#082543 55%,#0a3c5e 100%);
}
.page-hero.image-hero::before{width:54%;height:100%;right:0;top:0;filter:blur(24px);opacity:.58}
.page-hero.image-hero::after{background-size:92px 92px;opacity:.68}
.page-hero-grid{grid-template-columns:minmax(0,.84fr) minmax(480px,1.16fr);gap:clamp(38px,4.6vw,68px)}
.page-hero-copy{align-self:center}
.hero-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:590px}
.mobile-swipe-cue{display:none;color:var(--aqua)}
.page-hero.image-hero .lbl{padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.page-hero.image-hero h1{font-size:clamp(3.25rem,5.15vw,5.15rem)}
.page-hero.image-hero p{max-width:540px}
.hero-proof{max-width:560px}
.hero-visual{
  width:calc(100% + var(--page-edge));height:420px;margin-right:calc(0px - var(--page-edge));
  border:0;border-radius:132px 0 0 132px;box-shadow:-24px 32px 78px rgba(1,12,27,.35);clip-path:none;
}
.hero-visual::after{border-radius:inherit;box-shadow:inset 2px 0 0 rgba(117,222,244,.3)}
.hero-visual figcaption{left:35px;bottom:24px}
.hero-collage{padding:8px 0 8px 8px;border-radius:132px 0 0 132px}
.hero-collage>picture:first-of-type{border-radius:120px 6px 6px 120px}
.hero-collage>picture:nth-of-type(2){border-radius:6px}
.hero-collage>picture:nth-of-type(3){border-radius:6px}

@media (prefers-reduced-motion:no-preference){
  .hero-visual{animation:waterlineImageIn .8s .08s cubic-bezier(.18,.72,.2,1) forwards}
  @keyframes waterlineImageIn{from{opacity:0;transform:translateX(26px);filter:saturate(.75)}to{opacity:1;transform:none;filter:none}}
}

@media (max-width:1100px) and (min-width:861px){
  .page-hero-grid{grid-template-columns:minmax(0,.84fr) minmax(420px,1.16fr);gap:34px}
  .hero-visual{height:390px;border-radius:110px 0 0 110px}.page-hero.image-hero h1{font-size:clamp(3rem,5.1vw,4.5rem)}
}

@media (max-width:860px){
  .page-hero.image-hero{min-height:0;display:block;padding:80px 0 0;background:var(--deep)}
  .page-hero.image-hero::before{display:none}.page-hero.image-hero::after{opacity:.25;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 54%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 54%,#000 100%)}
  .page-hero.image-hero .page-hero-grid{width:100%;display:flex;flex-direction:column;gap:0}
  .page-hero-copy{
    --mobile-gutter:max(18px,calc((100vw - 760px)/2));order:2;z-index:6;width:100%;margin:-42px 0 0;padding:37px var(--mobile-gutter) 44px;
    border-radius:30px 30px 0 0;background:linear-gradient(180deg,#061a33 0%,var(--deep) 64%);box-shadow:0 -20px 55px rgba(2,13,27,.34);
  }
  .page-hero-copy::before{
    content:"";position:absolute;z-index:0;left:0;right:0;top:-27px;height:36px;background:#061a33;pointer-events:none;
    clip-path:polygon(0 78%,14% 52%,31% 68%,49% 41%,66% 62%,84% 43%,100% 58%,100% 100%,0 100%);
  }
  .page-hero-copy::after{content:"";position:absolute;left:var(--mobile-gutter);right:var(--mobile-gutter);top:5px;height:1px;background:linear-gradient(90deg,var(--aqua),rgba(55,195,232,0))}
  .hero-meta{max-width:none}.page-hero.image-hero h1{max-width:700px;margin-top:17px;font-size:clamp(2.85rem,8.8vw,4.25rem)}
  .mobile-swipe-cue{display:inline}
  .page-hero.image-hero p{max-width:650px;margin-top:16px;font-size:.95rem;line-height:1.65}.page-hero-actions{margin-top:22px}
  .hero-proof{margin-top:21px;padding-top:16px;font-size:.66rem;letter-spacing:.095em}
  .hero-visual{order:1;width:100%;height:clamp(280px,42svh,330px);margin:0;border-radius:0;box-shadow:none;clip-path:none}
  .hero-visual::after{border-radius:0;box-shadow:inset 0 -1px 0 rgba(117,222,244,.18)}
  .hero-visual figcaption{display:none}.hero-year{right:24px;bottom:20px;font-size:9rem}
  .hero-collage{
    display:flex;width:100vw;height:310px;gap:12px;padding:0 18px 14px;overflow-x:auto;overflow-y:hidden;
    border-radius:0;background:#041326;scroll-snap-type:x mandatory;scroll-padding-inline:18px;overscroll-behavior-inline:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .hero-collage::-webkit-scrollbar{display:none}.hero-collage::before,.hero-collage::after{display:none}
  .hero-collage>picture,.hero-collage>picture:first-of-type,.hero-collage>picture:nth-of-type(2),.hero-collage>picture:nth-of-type(3){
    display:block;flex:0 0 min(72vw,560px);height:100%;border-radius:22px!important;scroll-snap-align:center;scroll-snap-stop:always;
  }
  .hero-collage>picture:first-of-type>img{object-position:center 60%}.collage-label{top:13px;left:13px}
  .gallery-hero .page-hero-copy{margin-top:-30px}
  .contact-body .c-left,.contact-body .c-right{padding-top:70px}
}

@media (max-width:620px){
  .site-head{inset:8px 0 auto}.site-head .wrap{width:calc(100% - 16px);min-height:56px;padding:6px 7px 6px 8px;border-radius:18px}
  .brand{gap:9px;font-size:.8rem}.brand .mark{width:38px;height:38px;border-radius:11px}.brand small{display:none}.burger{width:44px;height:44px}
  .page-hero.image-hero{padding-top:72px}.page-hero-copy{--mobile-gutter:18px;margin-top:-35px;padding:31px var(--mobile-gutter) 36px;border-radius:26px 26px 0 0}
  .page-hero-copy::before{top:-23px;height:30px}.page-hero-copy::after{top:4px}
  .page-hero.image-hero h1{font-size:clamp(2.5rem,11.8vw,3.2rem);line-height:1.01}.page-hero.image-hero p{font-size:.89rem;line-height:1.6}
  .page-hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-top:19px}.page-hero-actions .btn{width:100%;min-height:48px}
  .hero-text-link{width:100%;min-height:44px;justify-content:center;border-bottom:0;font-size:.75rem}
  .hero-proof{gap:8px 0;margin-top:18px;padding-top:14px;font-size:.62rem}.hero-proof span+span::before{margin:0 9px}.hero-proof strong{font-size:.72rem}
  .hero-visual{height:clamp(245px,38svh,285px)}.hero-year{right:13px;bottom:17px;font-size:6.8rem}
  .hero-collage{height:270px;gap:10px;padding:0 15px 12px;scroll-padding-inline:15px}.hero-collage>picture,.hero-collage>picture:first-of-type,.hero-collage>picture:nth-of-type(2),.hero-collage>picture:nth-of-type(3){flex-basis:82vw;border-radius:19px!important}
  .gallery-hero .page-hero-copy{margin-top:-24px}.gallery-filter-shell .wrap{padding-left:15px}
  .contact-quick{display:none}

  .hero-bg{min-height:100svh}.hero-bg .bg picture{display:block;width:100%;height:100%}.hero-bg .bg img{object-position:center;filter:saturate(.92) contrast(1.03)}
  .hero-bg .veil{background:linear-gradient(180deg,rgba(4,17,32,.08) 0%,rgba(4,17,32,.2) 28%,rgba(4,17,32,.76) 57%,rgba(4,17,32,.99) 100%)}
  .hero-bg .wrap{min-height:100svh;padding:118px 18px 31px;justify-content:flex-end}.hero-bg .wrap>div{max-width:520px}
  .hero-bg h1{max-width:520px;margin-top:16px;font-size:clamp(2.55rem,12.3vw,3.3rem);line-height:1.01}.hero-bg p.lead{max-width:470px;margin:16px 0 21px;font-size:.89rem;line-height:1.58}
  .hero-bg .hero-actions{display:flex;align-items:center;gap:8px}.hero-bg .hero-actions .btn{min-height:46px;padding:11px 16px;font-size:.75rem}
  .hero-bg .hero-actions .btn-line-w{border-color:transparent;background:transparent;box-shadow:none;padding-inline:10px}.hero-bg .hero-actions .btn-line-w svg{display:none}
  .hero-stats{grid-template-columns:1fr 1fr;gap:0;margin-top:24px;padding:7px 0 0;border:0;border-top:1px solid rgba(255,255,255,.16);border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
  .hero-stats::before{display:none}.hero-stats>div{padding:11px 7px;border-top:0}.hero-stats>div:nth-child(even){border-left:1px solid rgba(255,255,255,.1)}.hero-stats>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .hero-stats b{font-size:1.28rem}.hero-stats>div>span{margin-top:5px;font-size:.58rem;letter-spacing:.1em}.hero-waterline{height:20px}
}

@media (prefers-reduced-motion:reduce){
  .hero-collage{scroll-behavior:auto}.hero-visual{filter:none!important}
}

/* ============================================================
   Pictureless banners — Kedia typography and water geometry
   ============================================================ */
.hero-bg{
  background:
    radial-gradient(700px 520px at 86% 32%,rgba(55,195,232,.18),transparent 66%),
    radial-gradient(520px 380px at 58% 100%,rgba(27,95,168,.2),transparent 72%),
    linear-gradient(118deg,#031124 0%,#071e39 52%,#0a4569 100%);
}
.hero-bg .veil{z-index:0;background:linear-gradient(90deg,rgba(3,17,36,.88) 0%,rgba(3,17,36,.48) 58%,rgba(3,17,36,.08) 100%)}
.hero-bg .veil::before{
  content:"";position:absolute;width:min(42vw,590px);aspect-ratio:1;right:5%;top:15%;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 44px,rgba(126,228,249,.12) 45px 46px,transparent 47px 69px);
  -webkit-mask-image:linear-gradient(135deg,#000,rgba(0,0,0,.3) 65%,transparent);mask-image:linear-gradient(135deg,#000,rgba(0,0,0,.3) 65%,transparent);
}
.hero-bg .veil::after{
  content:"KEDIA";position:absolute;right:-.04em;top:50%;transform:translateY(-45%);color:transparent;
  font:700 clamp(8rem,19vw,18rem)/.8 var(--display);letter-spacing:-.09em;-webkit-text-stroke:1px rgba(137,226,245,.12);
  opacity:.9;white-space:nowrap;
}
.hero-bg::before{
  width:520px;height:520px;right:-230px;top:-210px;border-radius:50%;border:1px solid rgba(55,195,232,.16);
  background:none;box-shadow:0 0 0 70px rgba(55,195,232,.03),0 0 0 140px rgba(55,195,232,.02);filter:none;opacity:1;animation:none;
}
.hero-bg::after{background-size:72px 72px;opacity:.7;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 52%,transparent 82%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 52%,transparent 82%)}
.hero-bg .wrap>div{max-width:790px}
.hero-bg h1{max-width:790px;font-size:clamp(3.6rem,6.4vw,6.35rem)}
.hero-stats{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.018)),rgba(3,17,36,.34)}

.page-hero.image-hero{
  min-height:510px;display:flex;align-items:center;padding:143px 0 82px;background:
    radial-gradient(640px 400px at 92% 25%,rgba(55,195,232,.17),transparent 68%),
    linear-gradient(118deg,#031124 0%,#071f3d 58%,#0a4468 100%);
}
.page-hero.image-hero::before{
  display:block;width:min(44vw,540px);height:auto;aspect-ratio:1;right:-4%;top:10%;border-radius:50%;filter:none;opacity:.85;
  background:repeating-radial-gradient(circle,transparent 0 42px,rgba(121,221,242,.13) 43px 44px,transparent 45px 68px);
  -webkit-mask-image:linear-gradient(125deg,#000,rgba(0,0,0,.35) 66%,transparent);mask-image:linear-gradient(125deg,#000,rgba(0,0,0,.35) 66%,transparent);
}
.page-hero.image-hero::after{
  display:block;opacity:.8;background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(ellipse at 88% 108%,rgba(55,195,232,.16),transparent 34%);
  background-size:80px 80px,80px 80px,100% 100%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.74) 58%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.74) 58%,rgba(0,0,0,.22) 100%);
}
.page-hero.image-hero .page-hero-grid{display:block;width:min(1240px,calc(100% - 48px))}
.page-hero-copy{width:100%;max-width:940px;margin:0;padding:0;background:none;border-radius:0;box-shadow:none}
.page-hero-copy::before,.page-hero-copy::after{display:none!important}
.hero-meta{max-width:760px}
.page-hero.image-hero h1{max-width:930px;font-size:clamp(3.6rem,6.6vw,6.45rem)}
.page-hero.image-hero p{max-width:650px;font-size:1.02rem}.page-hero-actions{max-width:650px}.hero-proof{max-width:650px}
.about-page .page-hero.image-hero::before{
  content:"35";display:flex;align-items:center;justify-content:center;background:none;-webkit-mask-image:none;mask-image:none;
  color:rgba(255,255,255,.025);font:700 clamp(12rem,24vw,22rem)/1 var(--display);letter-spacing:-.1em;-webkit-text-stroke:1px rgba(118,217,239,.16);
}
.gallery-page .page-hero.image-hero::before{right:1%;top:4%;transform:scaleX(1.15)}
.contact-page .page-hero.image-hero::before{right:-8%;top:14%}

@media (prefers-reduced-motion:no-preference){
  .hero-bg .veil::before,.page-hero.image-hero::before{animation:rippleBreathe 8s ease-in-out infinite}
  @keyframes rippleBreathe{0%,100%{opacity:.72;transform:scale(.98)}50%{opacity:1;transform:scale(1.025)}}
  .about-page .page-hero.image-hero::before{animation:yearDrift 8s ease-in-out infinite}
  @keyframes yearDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
}

@media (max-width:860px){
  .page-hero.image-hero{min-height:0;padding:123px 0 66px}.page-hero.image-hero .page-hero-grid{width:min(100% - 36px,760px)}
  .page-hero-copy{width:100%;margin:0;padding:0}.page-hero.image-hero h1{font-size:clamp(3rem,9.4vw,4.75rem)}
  .page-hero.image-hero::before{display:block;width:430px;right:-180px;top:32px;opacity:.54}.hero-meta{max-width:680px}
  .about-page .page-hero.image-hero::before{right:-105px;top:64px;font-size:15rem}.gallery-page .page-hero.image-hero::before{right:-180px;top:28px}
}

@media (max-width:620px){
  .page-hero.image-hero{padding:105px 0 50px}.page-hero.image-hero .page-hero-grid{width:calc(100% - 36px)}
  .page-hero.image-hero h1{margin-top:18px;font-size:clamp(2.55rem,12.1vw,3.3rem);line-height:1.02}.page-hero.image-hero p{margin-top:16px;font-size:.9rem;line-height:1.6}
  .page-hero.image-hero::before{width:290px;right:-145px;top:42px;opacity:.48;background:repeating-radial-gradient(circle,transparent 0 28px,rgba(121,221,242,.13) 29px 30px,transparent 31px 45px)}
  .page-hero.image-hero::after{background-size:58px 58px,58px 58px,100% 100%;opacity:.55}
  .about-page .page-hero.image-hero::before{width:270px;right:-75px;top:75px;font-size:10rem;background:none}.gallery-page .page-hero.image-hero::before{right:-135px;top:42px}.contact-page .page-hero.image-hero::before{right:-155px}
  .page-hero-actions{align-items:flex-start}.page-hero-actions .btn{width:auto;min-width:190px}.hero-text-link{width:auto;justify-content:flex-start;padding-inline:3px}
  .hero-proof{font-size:.61rem}.gallery-page .g-wrap{padding-top:26px}.gallery-page .g-grid{grid-template-columns:1fr;grid-auto-rows:260px;gap:12px}
  .gallery-page .g-item,.gallery-page .g-item.w2,.gallery-page .g-item.h2x{grid-column:auto;grid-row:auto;border-radius:16px}.gallery-page .g-item picture{position:absolute}

  .hero-bg{min-height:100svh}.hero-bg .veil{background:linear-gradient(180deg,rgba(3,17,36,.2) 0%,rgba(3,17,36,.48) 40%,rgba(3,17,36,.96) 100%)}
  .hero-bg .veil::before{width:360px;right:-160px;top:9%;background:repeating-radial-gradient(circle,transparent 0 29px,rgba(126,228,249,.12) 30px 31px,transparent 32px 47px)}
  .hero-bg .veil::after{right:-.03em;top:31%;font-size:8rem;-webkit-text-stroke-color:rgba(137,226,245,.1)}
  .hero-bg .wrap{min-height:100svh;padding:114px 18px 32px}.hero-bg h1{font-size:clamp(2.7rem,12.6vw,3.45rem)}
}

@media (prefers-reduced-motion:reduce){
  .hero-bg .veil::before,.page-hero.image-hero::before{animation:none!important;transform:none!important}
}

/* Homepage photographic hero — approved Kedia product image */
.hero-bg .bg{z-index:0}
.hero-bg .bg img{object-position:center center;filter:saturate(.94) contrast(1.05)}
.hero-bg .veil{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(3,15,29,.96) 0%,rgba(4,18,34,.9) 40%,rgba(4,18,34,.68) 68%,rgba(3,13,25,.3) 100%),
    linear-gradient(0deg,rgba(3,15,29,.78) 0%,transparent 45%);
}
.hero-bg .veil::before{opacity:.28;animation:none!important}
.hero-bg .veil::after{display:none}
.hero-bg::before,.hero-bg::after{z-index:1}
.hero-bg::before{opacity:.2}
.hero-bg::after{opacity:.28}

@media (max-width:1100px){
  .hero-bg .veil{
    background:
      linear-gradient(90deg,rgba(3,15,29,.96) 0%,rgba(4,18,34,.93) 48%,rgba(4,18,34,.82) 76%,rgba(3,13,25,.5) 100%),
      linear-gradient(0deg,rgba(3,15,29,.78) 0%,transparent 45%);
  }
}

@media (max-width:860px){
  .hero-bg .bg img{object-position:66% center}
}

@media (max-width:620px){
  .hero-bg .bg img{object-position:72% center}
  .hero-bg .veil{
    background:
      linear-gradient(180deg,rgba(3,15,29,.52) 0%,rgba(3,15,29,.62) 30%,rgba(3,15,29,.9) 60%,rgba(3,15,29,.99) 100%),
      linear-gradient(90deg,rgba(3,15,29,.32),transparent 72%);
  }
  .hero-bg .veil::before{opacity:.18}
}

/* ============================================================
   PRODUCT SYSTEM — 25-line catalogue
   Mobile-first. Appended as the final layer; nothing above is edited.
   ============================================================ */
:root{
  /* Bright accents — for dots, borders and glows on dark surfaces. */
  --cat-a:#37c3e8;
  --cat-b:#4f9bd8;
  --cat-c:#3fc7b4;
  --cat-d:#e0a33f;
  --cat-e:#f2b632;
  /* Ink accents — same hue, darkened to clear 4.5:1 on white. The category
     colours were chosen for the old dark cards; once the hub and homepage
     cards became white, every one of them failed AA as text (1.82-2.99:1). */
  --cat-a-ink:#127e9a;
  --cat-b-ink:#2979ba;
  --cat-c-ink:#268275;
  --cat-d-ink:#9c6a19;
  --cat-e-ink:#9a6d0a;
  --rail-h:58px;
}

/* ---------- shared section furniture ---------- */
.psec{padding:56px 0}
.psec-head{max-width:660px;margin-bottom:30px}
.psec-head h1,
.psec-head h2{margin-top:14px;color:var(--deep)}
.psec-head p{margin-top:14px;color:var(--muted);font-size:.95rem}
.psec-head.on-dark h1,
.psec-head.on-dark h2{color:#fff}
.psec-head.on-dark p{color:#b9ccde}

/* ============================================================
   HUB — category cards
   Split card: photograph on top at a fixed ratio, content on a
   white body below. Previously the copy sat on the photo behind
   a gradient that had to reach 95% opacity to stay legible,
   which flattened the photography; and the first two cards
   spanned full width for no editorial reason. All five are now
   identical, so the row reads as one system.
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:1fr;gap:16px}
.cat-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);
  box-shadow:0 2px 4px rgba(6,23,46,.03);
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.cat-card:hover{
  transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 22px 48px rgba(6,23,46,.13);
}

/* ---- photo ---- */
.cat-media{position:relative;display:block;overflow:hidden;background:var(--foam)}
.cat-media picture{display:block}
.cat-media img{
  /* height:auto is required — without it the intrinsic height attribute
     (height="896") wins and aspect-ratio is ignored. */
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .7s ease;
}
.cat-card:hover .cat-media img{transform:scale(1.05)}
/* a short scrim only under the count chip, not across the whole frame */
.cat-media::after{
  content:"";position:absolute;inset:auto 0 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,18,34,.42));
}
.cat-count{
  position:absolute;z-index:2;left:14px;bottom:13px;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(6,23,46,.55);backdrop-filter:blur(7px);
  font:700 .64rem/1 var(--display);letter-spacing:.13em;text-transform:uppercase;color:#fff;
}
.cat-count i{width:6px;height:6px;border-radius:50%;background:var(--accent,var(--aqua));font-style:normal}

/* ---- body ---- */
.cat-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.cat-card h3{font-size:1.3rem;color:var(--deep);letter-spacing:-.03em;line-height:1.16}
.cat-card p{margin-top:8px;color:var(--blue);font-size:.84rem;font-weight:600;line-height:1.5}
.cat-lines{
  margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.76rem;line-height:1.65;
}
.cat-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;
  font:700 .79rem/1 var(--display);color:var(--accent,var(--blue));
}
.cat-go i{font-style:normal;transition:transform .3s ease}
.cat-card:hover .cat-go i{transform:translateX(4px)}

/* ============================================================
   HUB — searchable full range index
   ============================================================ */
.range-sec{background:var(--foam);padding:56px 0}
.range-search{position:relative;margin-bottom:22px}
.range-search input{
  width:100%;min-height:54px;padding:15px 17px 15px 48px;
  border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);
  font-size:16px;box-shadow:0 6px 20px rgba(6,23,46,.05);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.range-search input::placeholder{color:#93a6b8}
.range-search input:focus{outline:0;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(55,195,232,.16)}
.range-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:#93a6b8;fill:none;stroke-width:2;pointer-events:none}
.range-clear{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);display:none;
  width:38px;height:38px;border:0;border-radius:10px;background:var(--foam);
  color:var(--muted);font-size:1.1rem;cursor:pointer;
}
.range-search.has-value .range-clear{display:block}
.range-count{margin-bottom:20px;color:var(--muted);font-size:.8rem}
.range-count b{color:var(--blue)}

.range-group{margin-bottom:26px}
.range-group h3{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);
}
.range-group h3 span{
  display:grid;place-items:center;width:23px;height:23px;border-radius:7px;
  background:var(--accent,var(--blue));color:#fff;font-size:.7rem;letter-spacing:0;
}
.range-list{display:grid;grid-template-columns:1fr;gap:8px}
.range-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px 15px;
  border:1px solid var(--line);border-radius:13px;background:#fff;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.range-item:hover{border-color:var(--aqua);transform:translateX(3px);box-shadow:0 8px 22px rgba(6,23,46,.07)}
/* The hub search sets the `hidden` attribute on non-matching lines, but the
   author `display:flex` above beats the UA sheet's `[hidden]{display:none}`,
   so filtered-out lines kept rendering: a search for "butterfly" reported
   "1 of 25" while still painting all 11 lines of the Pipes group. */
.range-item[hidden]{display:none}
.range-ref{
  flex-shrink:0;min-width:34px;padding:4px 7px;border-radius:7px;background:var(--foam);
  color:var(--blue);font:700 .66rem/1.4 var(--display);text-align:center;
}
.range-item b{display:block;color:var(--deep);font-family:var(--display);font-size:.94rem;letter-spacing:-.02em}
.range-item small{display:block;margin-top:3px;color:var(--muted);font-size:.76rem;line-height:1.5}
.range-item mark{background:rgba(55,195,232,.28);color:inherit;border-radius:3px;padding:0 1px}
.range-empty{padding:34px 20px;border:1px dashed var(--line);border-radius:14px;
  background:#fff;color:var(--muted);text-align:center;font-size:.9rem}

/* ---------- standards strip ---------- */
.std-strip{padding:44px 0;background:var(--deep);color:#fff;overflow:hidden}
.std-strip .lbl{color:var(--aqua)}
.std-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.std-list span{
  padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(255,255,255,.05);color:#cfe0ee;
  font:700 .74rem/1 var(--display);letter-spacing:.04em;
}

/* ============================================================
   CATEGORY PAGE — hero + sticky line rail
   ============================================================ */
.cat-hero-tag{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:7px 14px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);
  font:700 .7rem/1 var(--display);letter-spacing:.11em;text-transform:uppercase;color:#fff;
}
.cat-hero-tag i{width:7px;height:7px;border-radius:50%;background:var(--accent,var(--aqua));font-style:normal}

.line-rail{
  position:sticky;top:0;z-index:36;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(6,23,46,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.line-rail .wrap{width:100%;padding:0}
.line-rail-scroll{
  display:flex;gap:6px;padding:10px 15px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
}
.line-rail-scroll::-webkit-scrollbar{display:none}
.line-rail a{
  flex-shrink:0;display:inline-flex;align-items:center;gap:7px;min-height:38px;
  padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  color:#b9ccde;font:600 .78rem/1 var(--display);white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.line-rail a em{font-style:normal;opacity:.55;font-size:.68rem}
.line-rail a:hover{border-color:var(--aqua);color:#fff}
.line-rail a.on{background:var(--accent,var(--aqua));border-color:transparent;color:var(--deep)}
.line-rail a.on em{opacity:.7}

/* ============================================================
   PRODUCT LINE BLOCK — the core component
   ============================================================ */
.p-lines{padding:34px 0 84px;background:var(--foam)}
.p-line{
  margin-bottom:16px;overflow:hidden;border-radius:18px;background:#fff;
  box-shadow:0 14px 40px rgba(6,23,46,.07);scroll-margin-top:calc(var(--rail-h) + 14px);
}
.p-line-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--deep)}
.p-line-media.is-tall{aspect-ratio:4/3}
.p-line-media.is-square{aspect-ratio:1/1}
.p-line-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.p-line:hover .p-line-media img{transform:scale(1.04)}
.p-line-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,18,34,.5) 0%,transparent 42%,rgba(4,18,34,.28) 100%);
}
.p-line-tags{position:absolute;top:13px;left:14px;right:14px;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.p-ref{
  padding:6px 11px;border-radius:8px;background:rgba(4,18,34,.62);backdrop-filter:blur(8px);
  color:#fff;font:700 .68rem/1 var(--display);letter-spacing:.09em;
}
.p-badge{
  padding:6px 11px;border-radius:999px;
  font:700 .62rem/1 var(--display);letter-spacing:.13em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:var(--deep);
}
.p-badge[data-type="service"]{background:var(--cat-d);color:#2a1c02}
.p-badge[data-type="system"]{background:var(--cat-c);color:#04241f}

.p-line-body{padding:24px 20px 26px}
.p-eyebrow{font:700 .68rem/1 var(--display);letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent,var(--blue))}
.p-line h2{margin:11px 0 0;color:var(--deep);font-size:clamp(1.4rem,5.4vw,1.85rem)}
.p-tagline{margin-top:7px;color:var(--blue);font:italic 1rem/1.4 var(--editorial)}
.p-overview{margin-top:14px;color:var(--muted);font-size:.9rem;line-height:1.7}

/* ---------- spec table ---------- */
.spec-dl{margin-top:20px;border-top:1px solid var(--line)}
.spec-dl>div{padding:12px 0;border-bottom:1px solid var(--line)}
.spec-dl dt{
  font:700 .64rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#8397aa;
}
.spec-dl dd{margin-top:5px;color:var(--ink);font-size:.87rem;line-height:1.6}

/* ---------- variants disclosure ---------- */
.p-variants{margin-top:18px}
.p-var-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--foam);
  color:var(--deep);font:700 .82rem/1 var(--display);text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.p-var-toggle:hover{border-color:var(--aqua);background:#fff}
.p-var-toggle .cnt{display:inline-flex;align-items:center;gap:8px}
.p-var-toggle .num{
  display:grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border-radius:6px;
  background:var(--accent,var(--blue));color:#fff;font-size:.7rem;
}
.p-var-toggle .arw{transition:transform .3s ease;color:var(--blue);font-size:.7rem}
.p-var-toggle[aria-expanded="true"] .arw{transform:rotate(180deg)}
.p-var-list{display:none;margin-top:10px}
.p-var-list.open{display:grid;grid-template-columns:1fr;gap:7px}
.p-var-list li{
  list-style:none;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent,var(--aqua));
  border-radius:0 10px 10px 0;background:#fff;
}
/* Scoped to the variant name and detail themselves. These were bare descendant
   selectors (`.p-var-list b` / `.p-var-list span`), so they also matched the
   <span class="fig"> figures nested inside a detail line: every number became
   display:block and shattered the line ("4 / ", / 6 / ", / 8 ..."), and the
   figure lost .fig's own relative font-size to an absolute rem value.
   The name and detail sit directly under <li> in the compact layout and under
   .var-body in the showcase layout; both paths are covered here. */
.p-var-list > li > b,
.p-var-list .var-body > b{display:block;color:var(--deep);font-family:var(--display);font-size:.85rem;letter-spacing:-.01em}
.p-var-list > li > span,
.p-var-list .var-body > span{display:block;margin-top:3px;color:var(--muted);font-size:.78rem;line-height:1.55}

/* ---------- standards + applications ---------- */
.p-meta{margin-top:20px}
.p-meta h3{
  margin-bottom:9px;font:700 .64rem/1 var(--display);letter-spacing:.14em;
  text-transform:uppercase;color:#8397aa;
}
.p-meta+.p-meta{margin-top:16px}
.p-chips{display:flex;flex-wrap:wrap;gap:6px}
.p-chips span{
  padding:6px 11px;border:1px solid rgba(27,95,168,.14);border-radius:999px;
  background:var(--foam);color:var(--blue);font:600 .72rem/1.35 var(--body);
}
.p-chips.std span{
  border-color:rgba(6,23,46,.12);background:#fff;color:var(--deep);
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.02em;
}

/* ---------- feature list ---------- */
.p-feats{margin-top:18px;padding:16px 17px;border-radius:13px;background:var(--foam);list-style:none}
.p-feats li{position:relative;padding:6px 0 6px 21px;color:var(--muted);font-size:.83rem;line-height:1.55}
.p-feats li::before{
  content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;
  background:var(--accent,var(--aqua));box-shadow:0 0 0 4px rgba(55,195,232,.13);
}

/* ---------- actions ---------- */
.p-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.p-actions .btn{flex:1 1 100%}
.p-sheet{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:1 1 100%;min-height:48px;
  padding:13px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--deep);font:700 .85rem/1 var(--display);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.p-sheet:hover{border-color:var(--blue);color:var(--blue);background:var(--foam)}
.p-sheet svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.boq-add{
  display:flex;align-items:center;gap:11px;flex:1 1 100%;min-height:48px;
  padding:12px 16px;border:1px dashed var(--line);border-radius:12px;background:#fff;
  color:var(--muted);font:600 .82rem/1.3 var(--body);cursor:pointer;text-align:left;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.boq-add:hover{border-color:var(--aqua);color:var(--deep)}
.boq-add i{
  flex-shrink:0;display:grid;place-items:center;width:22px;height:22px;
  border:1.5px solid var(--line);border-radius:6px;background:#fff;
  font-style:normal;font-size:.72rem;color:transparent;transition:.2s;
}
.boq-add[aria-pressed="true"]{border-style:solid;border-color:var(--aqua);background:rgba(55,195,232,.07);color:var(--deep)}
.boq-add[aria-pressed="true"] i{background:var(--aqua);border-color:var(--aqua);color:var(--deep)}

/* ============================================================
   BOQ ENQUIRY BAR
   ============================================================ */
.boq-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:12px;padding:12px 15px;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(6,23,46,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translateY(115%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -12px 40px rgba(3,14,28,.32);
}
.boq-bar.show{transform:none}
.boq-info{flex:1;min-width:0;color:#fff}
.boq-info b{display:block;font:700 .9rem/1.2 var(--display)}
.boq-info small{display:block;margin-top:2px;color:#8fb0cb;font-size:.72rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boq-bar .btn{flex-shrink:0;min-height:44px;padding:11px 18px;font-size:.82rem}
.boq-clear{flex-shrink:0;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);
  border-radius:10px;background:transparent;color:#b9ccde;font-size:1.1rem;cursor:pointer}
.boq-clear:hover{border-color:var(--aqua);color:#fff}

/* ============================================================
   CROSS-LINKS
   ============================================================ */
.cat-cross{padding:52px 0;background:#fff}
.cross-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.cross-card{
  display:flex;align-items:center;gap:14px;padding:16px 17px;
  border:1px solid var(--line);border-radius:14px;background:var(--foam);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.cross-card:hover{border-color:var(--aqua);background:#fff;transform:translateY(-2px)}
.cross-card span{
  flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--accent,var(--blue));color:#fff;font:700 1rem/1 var(--display);
}
.cross-card b{display:block;color:var(--deep);font-family:var(--display);font-size:.92rem}
.cross-card small{display:block;margin-top:2px;color:var(--muted);font-size:.76rem}

/* ============================================================
   TABLET  ≥ 700px
   ============================================================ */
@media (min-width:700px){
  .psec{padding:72px 0}
  .cat-grid{grid-template-columns:1fr 1fr;gap:18px}
  .cat-card h3{font-size:1.36rem}
  .range-list{grid-template-columns:1fr 1fr;gap:10px}
  .p-line-body{padding:30px 30px 32px}
  .p-var-list.open{grid-template-columns:1fr 1fr}
  .p-actions .btn,.p-sheet{flex:1 1 auto}
  .boq-add{flex:1 1 100%}
  .cross-grid{grid-template-columns:1fr 1fr}
  .std-list span{font-size:.78rem}
}

/* ============================================================
   DESKTOP  ≥ 960px
   ============================================================ */
@media (min-width:960px){
  :root{--rail-h:64px}
  .psec{padding:92px 0}
  /* 3 + 2 on a six-track grid: five cards, no orphan, all the same size */
  .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
  .cat-card{grid-column:span 2}
  .cat-card:nth-child(4),.cat-card:nth-child(5){grid-column:span 3}
  .cat-card:nth-child(4) .cat-media img,
  .cat-card:nth-child(5) .cat-media img{aspect-ratio:21/9}
  .cat-body{padding:22px 24px 24px}
  .cat-card h3{font-size:1.42rem}

  .range-sec{padding:88px 0}
  .range-search{max-width:560px}
  .range-list{grid-template-columns:repeat(3,1fr)}

  .line-rail-scroll{padding:12px 0;justify-content:flex-start}
  .line-rail .wrap{width:min(1240px,calc(100% - 48px))}

  .p-lines{padding:44px 0 110px}
  .p-line{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    margin-bottom:22px;border-radius:22px;
    /* clip rather than hidden: hidden would make this a scroll container and
       silently kill the sticky media below it, while clip still rounds off the
       corners and the accent bar on .p-line-body */
    overflow:clip}

  /* The media was height:100% inside a grid row whose height is set by the text
     column beside it, so the box came out 495px wide by 835-1568px tall. No
     photograph fits an 0.32-0.59 aspect: object-fit:cover was scaling all 25
     line images up by 1.7x to 3.9x and showing as little as 21% of the frame.

     A square box pinned to the top of the row holds the worst case to 1.28x and
     shows 75% of the frame on average. Sticky then keeps the image beside the
     reader all the way down the long spec columns, so the height the media no
     longer fills is used rather than left empty. Offset matches the rail's own
     stacking (--sticky-top + --rail-h), so the image never slides under it. */
  .p-line-media{
    aspect-ratio:1/1;height:auto;min-height:0;align-self:start;
    position:sticky;top:calc(var(--sticky-top,var(--header-h)) + var(--rail-h) + 18px);
    margin:18px 0 18px 18px;border-radius:16px;
  }
  .p-line:nth-child(even) .p-line-media{order:2;margin:18px 18px 18px 0}
  .p-line-body{padding:42px 44px}
  .p-line h2{font-size:clamp(1.7rem,2.3vw,2.25rem)}
  .p-tagline{font-size:1.1rem}
  .p-overview{font-size:.94rem}

  /* spec table becomes two columns on desktop */
  .spec-dl>div{display:grid;grid-template-columns:138px minmax(0,1fr);gap:20px;
    align-items:baseline;padding:13px 0}
  .spec-dl dt{padding-top:1px}
  .spec-dl dd{margin-top:0;font-size:.88rem}

  .p-var-list.open{grid-template-columns:1fr 1fr;gap:8px}
  .p-actions .btn,.p-sheet{flex:0 1 auto}
  .boq-add{flex:1 1 100%;margin-top:2px}

  .boq-bar{left:auto;right:22px;bottom:22px;width:min(430px,calc(100vw - 44px));
    border:1px solid rgba(255,255,255,.14);border-radius:18px;
    transform:translateY(150%) scale(.96)}
  .boq-bar.show{transform:none}

  .cross-grid{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:1200px){
  .p-line-body{padding:48px 52px}
  .spec-dl>div{grid-template-columns:150px minmax(0,1fr)}
}

/* ============================================================
   SMALL PHONES  ≤ 620px — keep the fixed bottom bar clear
   ============================================================ */
@media (max-width:620px){
  .boq-bar{bottom:67px;padding:11px 14px}
  .boq-bar .btn{padding:11px 14px;font-size:.78rem}
  .boq-info b{font-size:.84rem}
  body.boq-open{padding-bottom:135px}
  .cat-media img{aspect-ratio:16/9}
  .cat-body{padding:17px 18px 19px}
  .cat-card h3{font-size:1.18rem}
  .p-line-body{padding:22px 18px 24px}
  .p-actions{gap:8px}
  .std-strip{padding:38px 0}
}

/* ============================================================
   MOTION + INPUT PREFERENCES
   ============================================================ */
@media (hover:none){
  .cat-card:hover,.range-item:hover,.cross-card:hover{transform:none}
  .cat-card:hover img,.p-line:hover .p-line-media img{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cat-card,.cat-card img,.p-line-media img,.boq-bar,.p-var-toggle .arw{transition:none!important}
  .boq-bar{transform:none;display:none}
  .boq-bar.show{display:flex}
}

/* ============================================================
   NO-JS FALLBACK — everything must remain readable
   ============================================================ */
html:not(.js) .p-var-list{display:grid!important;grid-template-columns:1fr;gap:7px;margin-top:10px}
html:not(.js) .p-var-toggle{display:none}
html:not(.js) .range-search,html:not(.js) .boq-add{display:none}
@media (min-width:700px){html:not(.js) .p-var-list{grid-template-columns:1fr 1fr}}

/* ---------- refinements after visual review ---------- */
/* the line rail scrolls horizontally — fade the right edge to signal it */
.line-rail{position:sticky;overflow:hidden}
.line-rail::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:52px;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,23,46,0),rgba(6,23,46,.95));
}
/* one green CTA at a time on phones: the enquiry bar replaces the quick-action bar */
@media (max-width:620px){
  body.boq-open .mobile-actions{transform:translateY(100%);transition:transform .3s ease}
  body.boq-open{padding-bottom:74px}
  .boq-bar{bottom:0}
}

/* accessibility: 44px minimum touch target on the category line rail */
.line-rail a{min-height:44px;padding:11px 15px}

/* ============================================================
   VARIANT PRESENTATION — showcase carousel + compact chips
   Replaces the boxed two-column list.
   ============================================================ */

/* ---------- compact: dense chip cloud for parts lists ---------- */
.p-var-list.compact.open{display:flex;flex-wrap:wrap;gap:6px;grid-template-columns:none}
.p-var-list.compact li{
  padding:8px 13px;border:1px solid var(--line);border-left-width:1px;border-radius:999px;
  background:#fff;line-height:1.35;
}
.p-var-list.compact > li > b{display:inline;font-size:.79rem;font-family:var(--body);font-weight:600;color:var(--deep)}
.p-var-list.compact > li > span{display:inline;margin-left:7px;font-size:.74rem;color:var(--muted)}

/* ---------- showcase: horizontal snap carousel ---------- */
.p-var-shell{position:relative;margin-top:10px}
.p-var-list.showcase{display:none}
.p-var-list.showcase.open{
  display:flex;gap:12px;grid-template-columns:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:2px 2px 12px;margin:0 -2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.p-var-list.showcase::-webkit-scrollbar{display:none}
.p-var-list.showcase li{
  flex:0 0 clamp(196px,64vw,236px);scroll-snap-align:start;
  padding:0;overflow:hidden;border:1px solid var(--line);border-left-width:1px;
  border-radius:16px;background:#fff;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.p-var-list.showcase li:hover{border-color:var(--accent,var(--aqua));transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(6,23,46,.11)}
.var-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--foam)}
.var-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.p-var-list.showcase li:hover .var-img img{transform:scale(1.05)}
.var-num{
  position:absolute;left:9px;top:9px;z-index:2;padding:4px 8px;border-radius:7px;
  background:rgba(4,18,34,.6);backdrop-filter:blur(6px);
  color:#fff;font:700 .62rem/1 var(--display);letter-spacing:.08em;
}
/* typographic fallback when a variant has no photograph */
.var-img.blank{
  display:grid;place-items:center;
  background:linear-gradient(140deg,#0a2744 0%,#123f66 100%);
}
.var-img.blank em{
  font:700 2.6rem/1 var(--display);letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.4);font-style:normal;
}
.var-body{padding:13px 14px 15px}
.p-var-list.showcase .var-body > b{display:block;color:var(--deep);font-family:var(--display);
  font-size:.84rem;line-height:1.25;letter-spacing:-.01em}
.p-var-list.showcase .var-body > span{display:block;margin-top:6px;color:var(--muted);
  font-size:.75rem;line-height:1.5}

/* carousel controls */
.var-nav{display:none;gap:7px;position:absolute;right:0;top:-42px}
.p-variants.always-open .p-var-shell{margin-top:0}
.var-nav button{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue);
  font-size:.8rem;cursor:pointer;transition:.2s;
}
.var-nav button:hover:not(:disabled){border-color:var(--aqua);background:var(--foam)}
.var-nav button:disabled{opacity:.32;cursor:default}
.var-hint{margin-top:2px;color:var(--muted);font-size:.72rem}

@media (min-width:700px){
  .p-var-list.showcase li{flex-basis:228px}
}
@media (min-width:960px){
  .var-nav{display:flex}
  .var-hint{display:none}
  .p-var-list.showcase li{flex-basis:216px}
  .p-var-list.compact.open{gap:7px}
  .p-variants.always-open .p-var-shell{padding-top:42px}
  .p-variants.always-open .var-nav{top:4px}
}
@media (prefers-reduced-motion:reduce){
  .p-var-list.showcase.open{scroll-behavior:auto}
  .p-var-list.showcase li,.var-img img{transition:none!important}
}
/* no-JS: carousel still scrolls, chips still show */
html:not(.js) .p-var-list.showcase{display:flex!important;overflow-x:auto}
html:not(.js) .p-var-list.compact{display:flex!important;flex-wrap:wrap}
html:not(.js) .var-nav{display:none}


/* ============================================================
   Credentials panel (About) — the dealership is the one
   independently verifiable trust signal on a brand-neutral site,
   so it gets a component rather than a line in a timeline.
   Appended as a final layer; nothing above is modified.
   ============================================================ */
.capacity-number.capacity-word{font-size:clamp(3.2rem,7vw,5.4rem);letter-spacing:-.05em;line-height:.9}
.credential-section{padding-top:0}
.credential-section .wrap{display:flex;flex-direction:column;gap:22px}
.credential-section .capacity-panel{padding:0;gap:0;overflow:hidden;background:#fff}
.credential-panel{grid-template-columns:minmax(240px,.92fr) 1.18fr}
.credential-panel.is-flip .dealer-lockup{order:2}
.dealer-lockup{
  margin:0;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  min-height:100%;padding:52px 36px;text-align:center;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(55,195,232,.18),transparent 58%),
    linear-gradient(165deg,#08182c 0%,#02060c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.dealer-lockup::before{
  content:"";position:absolute;inset:18px;border-radius:18px;pointer-events:none;
  border:1px solid rgba(55,195,232,.18);
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;mask-image:radial-gradient(ellipse at 50% 45%,#000 40%,transparent 78%)
}
.dealer-lockup.is-johnson{
  background:
    radial-gradient(ellipse at 70% 20%,rgba(0,201,176,.16),transparent 52%),
    linear-gradient(180deg,#f3fbfa 0%,#e7f4f2 100%);
  box-shadow:inset 0 1px 0 #fff
}
.dealer-lockup.is-johnson::before{
  border-color:rgba(0,153,136,.18);
  background-image:linear-gradient(rgba(0,153,136,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,153,136,.06) 1px,transparent 1px)
}
.dealer-lockup.is-johnson::after{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#00c9b0,#0aa89a)
}
.dealer-lockup img{
  position:relative;z-index:1;width:min(100%,280px);height:auto;display:block;
  mix-blend-mode:screen;filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))
}
.dealer-lockup.is-johnson img{
  width:min(100%,100%);mix-blend-mode:normal;filter:none
}
.dealer-logo-card{
  position:relative;z-index:1;width:min(100%,340px);padding:22px 24px;
  border-radius:16px;background:#fff;
  border:1px solid rgba(16,55,91,.08);
  box-shadow:0 16px 36px rgba(6,23,46,.08)
}
.dealer-lockup figcaption{
  position:relative;z-index:1;margin:0;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(55,195,232,.35);background:rgba(6,23,46,.45);
  color:#9ed8ea;font:700 .68rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase
}
.dealer-lockup.is-johnson figcaption{
  border-color:rgba(10,136,122,.28);background:#fff;color:#0a6e64
}
.credential-panel.is-johnson{border-color:rgba(0,201,176,.18)}
.credential-copy{padding:48px 44px 48px 40px}
.credential-copy h2{margin-top:16px;color:var(--deep)}
.credential-copy p{margin-top:15px;color:var(--muted)}
.credential-copy p+p{margin-top:12px}
.credential-copy .btn{margin-top:26px}
@media (max-width:860px){
  .capacity-number.capacity-word{font-size:clamp(2.8rem,12vw,3.6rem)}
  .credential-panel{grid-template-columns:1fr}
  .credential-panel.is-flip .dealer-lockup{order:0}
  .dealer-lockup{min-height:220px;padding:36px 28px 32px;border-radius:0}
  .dealer-lockup img{width:min(100%,240px)}
  .dealer-logo-card{width:min(100%,300px);padding:18px 18px}
  .credential-copy{padding:28px 24px 32px}
}

/* ============================================================
   Contact page touch targets.
   The phone / WhatsApp / email links in .c-item were rendering
   as bare inline text ~16px tall — below the 24px WCAG 2.5.8
   minimum, and these are the primary conversion targets on the
   whole site. Give them a real tappable box without breaking
   the inline "number · number" layout.
   ============================================================ */
.c-item a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 2px;border-radius:6px;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);
  text-underline-offset:3px;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.c-item a:hover,.c-item a:focus-visible{
  color:var(--aqua);text-decoration-color:var(--aqua);
}
/* the caption under the phone row shouldn't inherit the tall box */
.c-item small{min-height:0}
/* same treatment for the inline WhatsApp fallback under the enquiry form */
.form-alt a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
@media (hover:none){
  .c-item a{padding:0 4px}
}

/* ============================================================
   Mobile nav drawer: keep the close button reachable.
   .drawer is position:fixed;inset:0;z-index:110 and .site-head
   was z-index:100, so the open drawer covered the burger — the
   very control that closes it. On a touch device the menu could
   then only be dismissed by picking a link (Escape isn't
   available). Lift the header above the drawer; the drawer's
   100px top padding already leaves room for the bar.
   ============================================================ */
.site-head{z-index:130}
.drawer{z-index:120}

/* Below ~345px the two longest hero stat labels ("years at the source",
   "districts delivered") wrap to a second line while the two short ones do
   not, leaving the block ragged. Reserving two lines for all four keeps the
   baselines aligned; above this width nothing wraps and the rule is inert. */
@media (max-width:344px){.hero-stats>div>span{min-height:2.5em}}


/* ============================================================
   Legal pages (privacy policy, and anything similar later).
   Measure-limited prose on the light surface; nothing here is
   used by any other page, so it can't disturb the rest.
   ============================================================ */
.legal-page{background:var(--white)}
.legal .psec-head{max-width:720px;margin-bottom:0}
.legal-updated{margin-top:18px!important;font:600 .74rem/1 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.legal-body{max-width:720px;margin-top:40px;padding-top:34px;border-top:1px solid var(--line)}
.legal-lead{padding:22px 24px;border-left:3px solid var(--aqua);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--foam);color:var(--ink);font-size:1.02rem;line-height:1.7}
.legal-body h2{margin-top:44px;font-size:clamp(1.12rem,1.6vw,1.34rem);letter-spacing:-.02em;color:var(--deep)}
.legal-body h2+p{margin-top:13px}
.legal-body p{margin-top:15px;color:var(--muted);font-size:1rem;line-height:1.78}
/* :not(.btn) matters: without it this rule outranks .btn-ink and repaints the
   button's own white label blue on navy — a 2.6:1 contrast failure. */
.legal-body a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(27,95,168,.38)}
.legal-body a:not(.btn):hover{color:var(--deep);text-decoration-color:currentColor}
.legal-body em{font-style:normal;font-weight:600;color:var(--ink)}
.legal-contact{margin-top:52px;padding:30px 32px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper)}
.legal-contact .foot-h{color:var(--deep);font-family:var(--display);font-weight:700;font-size:.94rem}
.legal-contact p+p{margin-top:10px}
.legal-contact .btn{margin-top:22px}
@media (max-width:620px){
  .legal-body{margin-top:32px;padding-top:28px}
  .legal-lead{padding:19px 18px;font-size:.96rem}
  .legal-body h2{margin-top:36px}
  .legal-body p{font-size:.95rem;line-height:1.75}
  .legal-contact{padding:24px 20px}
  .legal-contact .btn{width:100%}
}