/* ==================================================================
   CYCLONE INDUSTRIES — landing page, revision 2
   CI Manual palette + type. Client overrides applied:
     · rounded corners throughout (manual specifies 2/4px — overridden)
     · crimson on every CTA (manual reserves it for one element — overridden)
     · blueprint grid lifted to 10%
   ================================================================== */
:root{
  --deep-ocean:#0A4B73;  --ocean-800:#073A5A;  --ocean-600:#0F5C8C;
  --rich-navy:#1A2433;   --navy-900:#10161F;   --navy-700:#26334A;
  --mid-blue:#156FA6;    --blue-400:#3E8CBE;
  --steel:#8BB6D1;       --steel-200:#B7D2E4;  --steel-100:#DCE8F1; --steel-50:#EFF4F8;
  --off-white:#F9F9F9;
  --crimson:#DC1D3C;     --crimson-700:#B01630;
  --grey-100:#E6E8EB;    --grey-200:#CFD3D9;   --grey-400:#8A929E;  --grey-600:#5A626E;

  --surface-page:var(--off-white);
  --surface-card:#fff;
  --surface-sunken:var(--steel-50);
  --text-heading:var(--rich-navy);
  --text-body:var(--navy-700);
  --text-muted:var(--grey-600);
  --hairline:var(--grey-100);
  --border:var(--grey-200);

  --shadow-card:0 1px 3px rgba(26,36,51,.07);
  --shadow-raised:0 10px 28px rgba(10,75,115,.13);

  --blueprint:rgba(10,75,115,.055);
  --cell:22px;

  --r-btn:999px;   /* rounded CTAs */
  --r-card:14px;   /* rounded holders */
  --r-sm:10px;

  --font:"Poppins",Arial,Helvetica,sans-serif;

  /* Type scale — Poppins. Bigger sizes take lighter weight, tighter
     tracking and tighter leading; smaller sizes do the reverse. */
  --t-display:clamp(40px,5.4vw,66px); --l-display:1.0;  --k-display:-.035em; --w-display:600;
  --t-h1:clamp(34px,4vw,48px);        --l-h1:1.05;      --k-h1:-.03em;       --w-h1:600;
  --t-h2:clamp(28px,3.2vw,40px);      --l-h2:1.1;       --k-h2:-.025em;      --w-h2:600;
  --t-h3:clamp(19px,1.5vw,22px);      --l-h3:1.3;       --k-h3:-.012em;      --w-h3:600;
  --t-h4:17px;                        --l-h4:1.35;      --k-h4:-.006em;      --w-h4:600;
  --t-lede:clamp(16.5px,1.25vw,18.5px); --l-lede:1.6;
  --t-body:16px; --l-body:1.6;
  --t-sm:14px;   --t-cap:12px;
  --maxw:1240px; --gutter:32px;
  /* spacing scale — 4px base */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px;
  --gap-card:20px; --pad-card:30px;
  --ease:cubic-bezier(.2,0,0,1);
}
:root[data-theme="dark"]{
  --surface-page:var(--navy-900);
  --surface-card:#16202E;
  --surface-sunken:#131C28;
  --text-heading:var(--off-white);
  --text-body:var(--steel-200);
  --text-muted:var(--steel);
  --hairline:rgba(139,182,209,.20);
  --border:rgba(139,182,209,.28);
  --shadow-card:0 1px 3px rgba(0,0,0,.45);
  --shadow-raised:0 10px 28px rgba(0,0,0,.5);
  --blueprint:rgba(139,182,209,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:16px;line-height:1.55;
  color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--blueprint) 1px,transparent 1px),
                   linear-gradient(90deg,var(--blueprint) 1px,transparent 1px);
  background-size:var(--cell) var(--cell)}
body > *{position:relative;z-index:1}

h1,h2,h3,h4{color:var(--text-heading);text-wrap:balance;font-synthesis:none}
h1{font-size:var(--t-h1);line-height:var(--l-h1);letter-spacing:var(--k-h1);font-weight:var(--w-h1)}
h2{font-size:var(--t-h2);line-height:var(--l-h2);letter-spacing:var(--k-h2);font-weight:var(--w-h2)}
h3{font-size:var(--t-h3);line-height:var(--l-h3);letter-spacing:var(--k-h3);font-weight:var(--w-h3)}
h4{font-size:var(--t-h4);line-height:var(--l-h4);letter-spacing:var(--k-h4);font-weight:var(--w-h4)}
img{display:block;max-width:100%}
a{color:var(--mid-blue);text-decoration:none;transition:color .16s var(--ease)}
a:hover{color:var(--deep-ocean)}
:focus-visible{outline:2px solid var(--mid-blue);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sect{padding:var(--s-7) 0}
.sunken{background:var(--surface-sunken);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}

.shead{max-width:720px;margin-bottom:var(--s-6)}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{margin-bottom:var(--s-2);max-width:22ch}
.shead.mid h2{margin-left:auto;margin-right:auto}
.shead p{font-size:var(--t-lede);line-height:var(--l-lede);color:var(--text-muted);
  max-width:52ch;font-weight:400}
.shead.mid p{margin-left:auto;margin-right:auto}
.shead h2 em{font-style:normal;color:var(--crimson)}

/* ---- buttons: rounded, crimson CTAs ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:15px;
  font-weight:600;padding:14px 30px;border-radius:var(--r-btn);border:1.5px solid transparent;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-cta{background:var(--crimson);color:#fff;box-shadow:0 6px 18px rgba(220,29,60,.28)}
.btn-cta:hover{background:var(--crimson-700);color:#fff;box-shadow:0 9px 24px rgba(220,29,60,.34);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--off-white);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn-line{background:var(--surface-card);color:var(--deep-ocean);border-color:var(--border)}
.btn-line:hover{border-color:var(--mid-blue);color:var(--mid-blue)}

/* ---- 1. TOP BAR (blue) + HEADER ---- */
.util{background:rgba(7,58,90,.70);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--steel-200);font-size:13px;position:relative;z-index:101}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.util a{color:#fff;font-weight:500}
.util a:hover{color:var(--steel-200)}
.util-l{display:flex;gap:24px;flex-wrap:wrap}
.themebtn{background:none;border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:var(--r-btn);
  padding:5px 14px;font:inherit;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}
.themebtn:hover{background:rgba(255,255,255,.16)}

header{background:rgba(10,75,115,.80);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.16);position:sticky;top:0;z-index:100}
header .wrap{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.logo{flex:none;line-height:0}
.logo svg{height:54px;width:auto}
nav{margin-left:auto;display:flex;align-items:center}
nav > ul{display:flex;list-style:none;align-items:center}
nav > ul > li{position:relative}
nav > ul > li > a{display:block;padding:10px 13px;font-size:14px;font-weight:500;color:#fff;border-radius:var(--r-sm)}
nav > ul > li > a:hover{color:#fff;background:rgba(255,255,255,.15)}
nav > ul > li.has > a::after{content:"▾";margin-left:6px;font-size:10px;color:var(--grey-400)}
/* translucent dropdown, rounded bottom edges */
.drop{position:absolute;top:calc(100% + 4px);left:0;list-style:none;padding:14px;min-width:300px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5);border-top:3px solid var(--deep-ocean);
  border-radius:6px 6px var(--r-card) var(--r-card);box-shadow:var(--shadow-raised);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:110}
:root[data-theme="dark"] .drop{background:rgba(22,32,46,.84);border-color:rgba(139,182,209,.28)}
.drop.wide{min-width:560px;columns:2;column-gap:10px}
li.has:hover .drop, li.has:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop li{break-inside:avoid}
.drop a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:13.5px;
  font-weight:500;color:var(--text-heading)}
.drop a:hover{background:rgba(21,111,166,.12);color:var(--deep-ocean)}
.drop .hd{padding:6px 11px 4px;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--grey-400)}
.navcta{margin-left:14px}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-sm);
  padding:9px 11px;cursor:pointer;margin-left:10px}
.burger span{display:block;width:18px;height:2px;background:#fff;margin:4px 0}

/* ---- 2. HERO CAROUSEL ---- */
.hero{position:relative;overflow:hidden;background:var(--rich-navy);min-height:620px;display:flex;align-items:center}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.slide.on{opacity:1}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg, rgba(26,36,51,.94) 0%, rgba(26,36,51,.84) 40%, rgba(26,36,51,.30) 100%)}
.hero svg.flow{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.45;
  animation:sweep 1s cubic-bezier(.16,1,.3,1) both}
@keyframes sweep{from{transform:translate3d(-6%,4%,0);opacity:0}to{transform:none;opacity:.45}}
.hero .wrap{position:relative;z-index:3;padding-top:var(--s-7);padding-bottom:var(--s-7)}
.hero-in{max-width:660px}
.hero h1{font-size:var(--t-display);line-height:var(--l-display);letter-spacing:var(--k-display);
  color:#fff;font-weight:var(--w-display);margin-bottom:var(--s-3);max-width:15ch}
.hero p{color:rgba(255,255,255,.88);font-size:var(--t-lede);line-height:var(--l-lede);
  max-width:50ch;margin-bottom:var(--s-4);font-weight:400}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.dots{position:absolute;left:0;right:0;bottom:var(--s-4);z-index:4;display:flex;gap:10px;
  justify-content:center;align-items:center}
.dots button{width:34px;height:4px;border-radius:999px;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.34);transition:background .2s var(--ease),width .2s var(--ease)}
.dots button[aria-current="true"]{background:var(--crimson);width:54px}
.slidelabel{position:absolute;right:var(--gutter);bottom:var(--s-4);z-index:4;font-size:10.5px;
  font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ---- 3. JUSTIFICATION ---- */
.just{background:var(--deep-ocean);position:relative}
.just .wrap{padding-top:var(--s-5);padding-bottom:var(--s-6)}
.just .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stat b{display:block;font-size:clamp(36px,4.6vw,56px);font-weight:600;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.stat span{display:block;font-size:11px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--steel);margin-top:var(--s-2);line-height:1.5;max-width:16ch;margin-left:auto;margin-right:auto}
.stat{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stat.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.stat{opacity:1;transform:none;transition:none}}

/* ---- CAPABILITIES (CI manual sheet 05 device) ---- */
.caps4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)}
.cap4{background:var(--rich-navy);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.cap4:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}
.cap4 .cimg{height:180px;flex:none;overflow:hidden;position:relative;background:var(--navy-900)}
.cap4 .cimg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8);
  transition:transform .5s var(--ease)}
.cap4:hover .cimg img{transform:scale(1.05)}
.cap4 .cimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(26,36,51,.15), rgba(26,36,51,.72))}
.cap4 .ctx{padding:var(--s-3) var(--s-3) var(--s-4);display:flex;flex-direction:column;align-items:center}
.cap4 h3{color:#fff;font-size:var(--t-h3);line-height:var(--l-h3);letter-spacing:var(--k-h3);
  font-weight:var(--w-h3);margin-bottom:10px}
.cap4 .kick{display:block;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--crimson);margin-bottom:15px}
.cap4 p{color:var(--steel-200);font-size:14.5px;line-height:1.62;max-width:30ch}
.capstrip{margin-top:var(--s-5);border-top:1px solid var(--hairline);padding-top:var(--s-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);text-align:center}
.capstrip .facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:12px;
  font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--deep-ocean)}
.capstrip .facts span{display:inline-flex;align-items:center;gap:26px}
.capstrip .facts span::after{content:"·";color:var(--grey-400)}
.capstrip .facts span:last-child::after{content:""}
.capstrip .rep{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--grey-400)}
.capstrip .rep b{color:var(--text-muted);font-weight:600;margin-right:14px}
@media(max-width:1080px){.caps4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.caps4{grid-template-columns:1fr}}

/* ---- 5. BRANDS ---- */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-2)}
.bcell{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  height:108px;display:flex;align-items:center;justify-content:center;padding:var(--s-3);
  box-shadow:var(--shadow-card);transition:.2s var(--ease)}
.bcell:hover{box-shadow:var(--shadow-raised);transform:translateY(-3px)}
.bcell img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.55;transition:.2s var(--ease)}
.bcell:hover img{filter:none;opacity:1}

.brandline{margin-top:var(--s-5);text-align:center;font-size:clamp(19px,2vw,23px);line-height:1.45;
  font-weight:500;color:var(--text-heading);max-width:36ch;margin-left:auto;margin-right:auto;
  letter-spacing:-.018em}

/* ---- 6. PUMP FINDER ---- */
.finder{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);overflow:hidden;max-width:1000px;margin:0 auto}
.fhead{background:var(--surface-sunken);border-bottom:1px solid var(--hairline);
  padding:var(--s-3) var(--pad-card);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fhead strong{font-size:var(--t-h4);font-weight:var(--w-h4);color:var(--text-heading);
  letter-spacing:var(--k-h4)}
.fhead .step{font-size:12.5px;color:var(--text-muted)}
.fbody{padding:var(--s-4) var(--pad-card);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-4)}
.fsel{display:flex;flex-direction:column;gap:9px}
.fsel label{font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--grey-600)}
.fsel select{font-family:var(--font);font-size:15.5px;font-weight:500;color:var(--text-heading);
  background:var(--surface-page);border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:14px 44px 14px 16px;width:100%;cursor:pointer;transition:.16s var(--ease);appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230A4B73' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.fsel select:hover{border-color:var(--mid-blue)}
.fsel select:focus{outline:none;border-color:var(--mid-blue);box-shadow:0 0 0 3px rgba(21,111,166,.16)}
.fsel select.set{border-color:var(--deep-ocean);background-color:var(--steel-50);color:var(--deep-ocean);font-weight:600}
:root[data-theme="dark"] .fsel select.set{background-color:rgba(21,111,166,.16)}

.fresult{background:var(--surface-sunken);border-top:1px solid var(--hairline);padding:var(--s-3) var(--pad-card) var(--s-4)}
.fsum{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.fsum .cnt{font-size:var(--t-h3);line-height:1.2;font-weight:var(--w-h3);color:var(--text-heading);
  letter-spacing:var(--k-h3);display:block}
.fhint{font-size:13.5px;color:var(--text-muted);margin-top:4px}
.fsum-act{display:flex;align-items:center;gap:16px}
.reset{background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.reset:hover{color:var(--crimson)}
.matches{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2);margin-top:var(--s-3);
  animation:reveal .32s var(--ease) both}
@keyframes reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.match{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:16px 18px;display:flex;gap:15px;align-items:center;text-align:left;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.match:hover{border-color:var(--mid-blue);box-shadow:var(--shadow-card)}
.match img{width:62px;height:62px;object-fit:contain;flex:none;mix-blend-mode:multiply}
.match .brand{font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--mid-blue)}
.match strong{display:block;font-size:15.5px;font-weight:600;color:var(--text-heading);
  line-height:1.3;letter-spacing:-.008em;margin-top:3px}
.match small{display:block;font-size:12px;color:var(--grey-400);margin-top:5px;font-variant-numeric:tabular-nums}
.match .enq{margin-left:auto;flex:none;font-size:11px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--crimson);border:1.5px solid var(--crimson);
  border-radius:999px;padding:7px 15px;background:none;cursor:pointer;font-family:var(--font)}
.match .enq:hover{background:var(--crimson);color:#fff}
.fnone{font-size:15px;color:var(--text-muted);margin-top:16px;max-width:70ch}

.seclabel{display:block;font-size:11px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--mid-blue);margin-bottom:var(--s-2)}

/* ---- 7. ABOUT ---- */
.about-blue{background:var(--deep-ocean)}
.about-blue .seclabel{color:var(--steel)}
.about-blue h2{color:#fff}
.about-blue .about p{color:rgba(255,255,255,.88)}
.about-blue .about li{color:rgba(255,255,255,.92);font-weight:500}
.about-blue .about li::before{color:var(--crimson)}
.about-blue .about-img{box-shadow:0 18px 44px rgba(0,0,0,.30)}

.about{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-6);align-items:center}
.about-img{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-raised)}
.about-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.about h2{margin-bottom:var(--s-3);max-width:16ch}
.about p{font-size:16px;color:var(--text-muted);margin-bottom:var(--s-2);max-width:56ch}
.about ul{list-style:none;margin:var(--s-3) 0 var(--s-4);display:grid;gap:12px}
.about li{display:flex;gap:11px;font-size:15px;color:var(--text-body)}
.about li::before{content:"—";color:var(--crimson);font-weight:700;flex:none}

/* ---- 8. CONTACT ---- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap-card);align-items:start}
.cbox{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);overflow:hidden}
.cbox .inner{padding:var(--pad-card)}
form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-2)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--s-2)}
.field.full{grid-column:1/-1}
#prodfield{position:relative}
#prodfield input{background:var(--steel-50);border-color:var(--mid-blue);font-weight:600;
  color:var(--deep-ocean);padding-right:74px}
:root[data-theme="dark"] #prodfield input{background:rgba(21,111,166,.14)}
.clearprod{position:absolute;right:10px;bottom:9px;background:none;border:0;font:inherit;font-size:11px;
  font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--crimson);cursor:pointer}
.clearprod:hover{text-decoration:underline}
select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A626E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
label{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey-600)}
label .r{color:var(--crimson)}
input,select,textarea{font-family:var(--font);font-size:15px;color:var(--text-heading);
  background:var(--surface-page);border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;width:100%;transition:.16s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mid-blue);
  box-shadow:0 0 0 3px rgba(21,111,166,.16)}
textarea{resize:vertical;min-height:104px}
.mapwrap{aspect-ratio:4/3;background:var(--surface-sunken)}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}
.hours{padding:var(--pad-card)}
.hours h4{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--grey-600);margin-bottom:var(--s-2)}
.hours dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14.5px}
.hours dt{color:var(--text-muted)}
.hours dd{color:var(--text-heading);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.hours .addr{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--hairline);
  font-size:14px;color:var(--text-muted);line-height:1.7}

/* ---- FOOTER ---- */
footer{background:var(--navy-900);color:var(--steel-200);padding:var(--s-7) 0 var(--s-4);font-size:14px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:var(--s-5)}
.fcol h4{color:#fff;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fcol a{color:var(--steel-200);font-size:14px}
.fcol a:hover{color:#fff}
.flogo{margin-bottom:20px;line-height:0}
.flogo svg{height:48px;width:auto}
.fbot{border-top:1px solid rgba(139,182,209,.2);margin-top:var(--s-6);padding-top:var(--s-3);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--grey-400)}
.fbot ul{list-style:none;display:flex;gap:20px;flex-wrap:wrap}

.pvw{background:var(--crimson);color:#fff;font-size:12.5px;padding:9px 20px;text-align:center;font-weight:500}

@media(max-width:1080px){
  .brands{grid-template-columns:repeat(3,1fr)}
  .matches{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;gap:34px}
  .contact{grid-template-columns:1fr}
  nav > ul{display:none}
  .burger{display:block}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  :root{--gutter:20px;--s-7:56px;--s-6:40px;--s-5:32px;--pad-card:22px}
  .just .stats{grid-template-columns:1fr 1fr;gap:34px}
  .matches{grid-template-columns:1fr}
  form .grid2{grid-template-columns:1fr}
  .hero{min-height:520px}
  .hero .wrap{padding-top:70px;padding-bottom:130px}
}
@media(max-width:520px){
  .brands{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .logo svg{height:40px}
}

/* ==================================================================
   PAGE-TYPE STYLES — inner pages (added at full-site build).
   Uses only the tokens above; landing-page rules untouched.
   ================================================================== */

/* breadcrumb */
.crumb{font-size:12.5px;color:var(--text-muted)}
.crumb .wrap{padding-top:14px;padding-bottom:14px;display:flex;gap:10px;flex-wrap:wrap}
.crumb a{color:var(--text-muted);font-weight:500}
.crumb a:hover{color:var(--mid-blue)}
.crumb span{color:var(--text-heading);font-weight:600}

/* page banner (simple pages) */
.pbanner{padding:var(--s-6) 0 var(--s-5);border-bottom:1px solid var(--hairline)}
.pbanner h1{max-width:22ch;margin-bottom:var(--s-2)}
.pbanner p{font-size:var(--t-lede);line-height:var(--l-lede);color:var(--text-muted);max-width:58ch}

/* product hero (two-column) */
.phero{padding:var(--s-6) 0;border-bottom:1px solid var(--hairline)}
.phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-6);align-items:center}
.phero h1{max-width:18ch;margin-bottom:var(--s-3)}
.plede{font-size:var(--t-lede);line-height:var(--l-lede);color:var(--text-muted);
  max-width:52ch;margin-bottom:var(--s-4)}
.pimgbox{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);overflow:hidden;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;padding:var(--s-4)}
.pimgbox img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
:root[data-theme="dark"] .pimgbox{background:#fff}
.pimgbox.photo{padding:0}
.pimgbox.photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}

/* duty envelope band (deep ocean, like the landing stat band) */
.dutyband{background:var(--deep-ocean)}
.dutyband .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  padding-top:var(--s-4);padding-bottom:var(--s-4)}
.dband span{display:block;font-size:11px;font-weight:600;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.dband b{font-size:clamp(20px,2.2vw,27px);font-weight:600;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

/* generic card */
.card{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--shadow-card)}

/* body + sidebar columns */
.pcols{display:grid;grid-template-columns:1.55fr .85fr;gap:var(--s-6);align-items:start}
.pbody h2{margin-bottom:var(--s-3);max-width:24ch}
.pbody p{margin-bottom:var(--s-2);max-width:64ch;color:var(--text-body)}
.pbody.wide{max-width:820px}
.pbody.wide p{max-width:none;font-size:var(--t-lede);line-height:var(--l-lede)}
.pside{position:sticky;top:96px}
.sidecard{padding:var(--pad-card)}
.sidecard h3{margin-bottom:10px}
.sidecard p{font-size:14.5px;color:var(--text-muted);margin-bottom:var(--s-3)}
.sidecard .btn{width:100%;justify-content:center}
.sidecard .small{font-size:13px;margin:var(--s-2) 0 0;text-align:center}

/* feature cards */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.feats.ind3{grid-template-columns:repeat(3,1fr)}
.feat{padding:var(--pad-card);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised)}
.feat h3{font-size:var(--t-h4);line-height:var(--l-h4);letter-spacing:var(--k-h4);margin-bottom:9px}
.feat p{font-size:14.5px;line-height:1.62;color:var(--text-muted)}

/* tag chips */
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--s-2)}
.taglist li{background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:999px;
  padding:8px 18px;font-size:13.5px;font-weight:500;color:var(--deep-ocean)}
:root[data-theme="dark"] .taglist li{color:var(--steel-200)}

/* vertical product cards (valves, seals, packing) */
.vgrid{display:grid;gap:var(--gap-card)}
.vcard{display:grid;grid-template-columns:.9fr 1.5fr;overflow:hidden}
.vcard > img{width:100%;height:100%;object-fit:cover;min-height:260px}
.vtx{padding:var(--pad-card)}
.vtx h3{margin-bottom:12px;max-width:30ch}
.vtx p{font-size:15px;line-height:1.62;color:var(--text-muted);margin-bottom:var(--s-2);max-width:64ch}
.spec{display:grid;gap:0;margin-top:var(--s-2);border-top:1px solid var(--hairline)}
.spec > div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--hairline);font-size:13.5px}
.spec dt{font-size:10.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--grey-400);padding-top:2px}
.spec dd{color:var(--text-heading);font-weight:500}
.note{margin-top:var(--s-4);padding:var(--s-2) var(--s-3);background:var(--surface-sunken);
  border-left:3px solid var(--mid-blue);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:14px;color:var(--text-muted);max-width:88ch}

/* service / section index cards */
.svcs{display:grid;gap:var(--gap-card)}
.svcs4{grid-template-columns:repeat(2,1fr)}
.svcs2{grid-template-columns:repeat(2,1fr)}
.svc{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}
.svc > img{width:100%;height:230px;object-fit:cover;filter:saturate(.85);
  transition:transform .5s var(--ease)}
.svc:hover > img{transform:scale(1.04)}
.svc .tx{padding:var(--pad-card)}
.svc .tx h3{margin-bottom:9px}
.svc .tx p{font-size:14.5px;line-height:1.62;color:var(--text-muted)}

/* pump range cards */
.ranges{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.ranges.rel3{grid-template-columns:repeat(3,1fr)}
.card.range{display:flex;flex-direction:column;overflow:hidden;color:inherit;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.card.range:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}
.range .ph{position:relative;background:#fff;height:210px;display:flex;align-items:center;
  justify-content:center;padding:var(--s-3);border-bottom:1px solid var(--hairline)}
.range .ph img{max-height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .4s var(--ease)}
.card.range:hover .ph img{transform:scale(1.05)}
.range .idx{position:absolute;top:14px;left:16px;font-size:10px;font-weight:600;letter-spacing:1.8px;
  color:var(--grey-400);font-variant-numeric:tabular-nums}
.range .tx{padding:22px var(--pad-card) 18px;flex:1}
.range .brand{font-size:10px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--mid-blue);margin-bottom:7px}
.range .tx h3{font-size:var(--t-h4);line-height:var(--l-h4);letter-spacing:var(--k-h4);margin-bottom:8px}
.range .tx p{font-size:13.5px;line-height:1.58;color:var(--text-muted)}
.duty{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);
  background:var(--surface-sunken)}
.duty > div{padding:12px 10px;text-align:center;border-right:1px solid var(--hairline)}
.duty > div:last-child{border-right:0}
.duty dt{font-size:9px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey-400)}
.duty dd{font-size:12.5px;font-weight:600;color:var(--text-heading);margin-top:3px;
  font-variant-numeric:tabular-nums}

/* brands page */
.brandlist{display:grid;gap:var(--gap-card)}
.brandrow{display:grid;grid-template-columns:.65fr 1.6fr;gap:var(--gap-card);align-items:stretch;
  scroll-margin-top:110px}
.blogo{display:flex;align-items:center;justify-content:center;padding:var(--s-4);min-height:170px;
  background:#fff}
.blogo img{max-width:78%;max-height:96px;object-fit:contain}
.btx{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:var(--pad-card)}
.btx .seclabel{margin-bottom:6px}
.btx h2{font-size:var(--t-h3);line-height:var(--l-h3);letter-spacing:var(--k-h3);margin-bottom:10px}
.btx p{font-size:14.5px;line-height:1.62;color:var(--text-muted);max-width:72ch;margin-bottom:var(--s-2)}
.blinks{display:flex;gap:10px;flex-wrap:wrap}
.blinks .btn{padding:9px 20px;font-size:13px}

/* pre-footer close band */
.close{background:var(--deep-ocean)}
.close .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  flex-wrap:wrap;padding-top:var(--s-6);padding-bottom:var(--s-6)}
.close h2{color:#fff;max-width:20ch;margin-bottom:10px}
.close p{color:var(--steel-200);font-size:15px;line-height:1.6;max-width:52ch}
.close .acts{display:flex;gap:14px;flex-wrap:wrap;flex:none}

/* responsive */
@media(max-width:1080px){
  .phero .wrap{grid-template-columns:1fr;gap:var(--s-4)}
  .pcols{grid-template-columns:1fr}
  .pside{position:static}
  .feats,.feats.ind3{grid-template-columns:1fr 1fr}
  .ranges,.ranges.rel3{grid-template-columns:1fr 1fr}
  .vcard{grid-template-columns:1fr}
  .vcard > img{min-height:220px;max-height:280px}
  .brandrow{grid-template-columns:1fr}
  .blogo{min-height:130px}
}
@media(max-width:760px){
  .dutyband .wrap{grid-template-columns:1fr;gap:16px}
  .feats,.feats.ind3{grid-template-columns:1fr}
  .ranges,.ranges.rel3{grid-template-columns:1fr}
  .svcs4,.svcs2{grid-template-columns:1fr}
  .spec > div{grid-template-columns:1fr;gap:2px}
}

/* mobile burger panel (added at full-site build) */
@media(max-width:1080px){
  nav.open > ul{display:flex;flex-direction:column;align-items:stretch;position:absolute;
    top:100%;left:0;right:0;background:var(--deep-ocean);
    border-bottom:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-raised);
    padding:10px var(--gutter) 18px;max-height:calc(100vh - 140px);overflow:auto;z-index:120}
  nav.open > ul > li > a{padding:13px 10px;font-size:15px;border-radius:var(--r-sm)}
  nav.open .drop{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    columns:1;background:rgba(255,255,255,.08);border:0;border-radius:var(--r-sm);
    box-shadow:none;margin:2px 0 8px;padding:8px}
  nav.open .drop a{color:#fff;font-size:14px}
  nav.open .drop a:hover{background:rgba(255,255,255,.12);color:#fff}
  nav.open .drop .hd{color:var(--steel)}
  .burger span{transition:transform .2s var(--ease),opacity .2s var(--ease)}
  .burger.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* round-2 changes (26 Aug, Bryce's page-by-page list) */
.hero h1 em,.pbanner h1 em,.phero h1 em{font-style:normal;color:var(--crimson)}
.fico{height:58px;width:58px;margin-bottom:16px}
.fico img{width:100%;height:100%;object-fit:contain}
:root[data-theme="dark"] .fico img{filter:invert(.88)}
a.bcell{display:flex}
a.blogo{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
a.blogo:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised)}

/* industry card image-placeholder slot (icons until photos arrive) */
.iph{height:170px;background:var(--surface-sunken);border-bottom:1px solid var(--hairline);
  border-radius:var(--r-card) var(--r-card) 0 0;display:flex;align-items:center;justify-content:center}
.iph img{width:104px;height:104px;object-fit:contain}
:root[data-theme="dark"] .iph img{filter:invert(.88)}
.feat.ind{padding:0;overflow:hidden}
.feat.ind .itx{padding:var(--pad-card)}

/* ---- dark-only build (Shane review, 27 Aug): logo walls go monochrome so
       every mark reads on the dark card, whatever its own ink colour ---- */
:root[data-theme="dark"] .bcell{background:#fff;border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .bcell img{filter:grayscale(1);opacity:.62}
:root[data-theme="dark"] .bcell:hover img{filter:none;opacity:1}
:root[data-theme="dark"] .blogo{background:#fff}
:root[data-theme="dark"] .blogo img{filter:grayscale(1);opacity:.75}
:root[data-theme="dark"] a.blogo:hover img{filter:none;opacity:1}
.themebtn{display:none}

/* ---- dark-only build: lift anything that assumed a light background ----
       (--deep-ocean and --mid-blue as INK go invisible on a dark surface) */
:root[data-theme="dark"] a:hover{color:var(--steel-200)}
:root[data-theme="dark"] .btn-line{color:var(--steel-200)}
:root[data-theme="dark"] .btn-line:hover{color:#fff;border-color:var(--steel)}
:root[data-theme="dark"] .capstrip .facts{color:var(--steel-200)}
:root[data-theme="dark"] .seclabel,
:root[data-theme="dark"] .match .brand,
:root[data-theme="dark"] .range .brand{color:var(--blue-400)}
:root[data-theme="dark"] .crumb a:hover{color:var(--steel-200)}
:root[data-theme="dark"] .drop a:hover{background:rgba(139,182,209,.16);color:#fff}
:root[data-theme="dark"] .fsel select.set{background-color:rgba(21,111,166,.20);
  border-color:var(--blue-400);color:var(--off-white)}
:root[data-theme="dark"] #prodfield input{color:var(--off-white)}
/* finder thumbnails: multiply only works on white — give them their own light chip */
:root[data-theme="dark"] .match img{mix-blend-mode:normal;background:#fff;border-radius:8px;padding:3px}


/* ---- enquiry form: honeypot + send status --------------------- */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fstatus{margin-top:var(--s-2);padding:12px 14px;border-radius:10px;font-weight:600;
  font-size:.95rem;line-height:1.45}
.fstatus.ok{background:rgba(29,150,94,.12);color:#0f7a45;border:1px solid rgba(29,150,94,.35)}
.fstatus.bad{background:rgba(200,36,52,.10);color:#b31f2e;border:1px solid rgba(200,36,52,.35)}
:root[data-theme="dark"] .fstatus.ok{background:rgba(46,204,113,.14);color:#5fe0a0;
  border-color:rgba(46,204,113,.35)}
:root[data-theme="dark"] .fstatus.bad{background:rgba(255,99,110,.14);color:#ff9aa2;
  border-color:rgba(255,99,110,.4)}