/* Nanocoating Supply theme. Built by Wiblify (https://wiblify.com) from the approved Demo 1 design.
   Brand colours and fonts are CSS variables printed from Appearance > Theme Options
   (--blue, --navy, --acc, --ink, --f-serif, --f-head, --f-body). The :root values below are fallbacks only. */
:root {
  --navy: #0F1B33;
  --blue: #1F45D6;
  --blue-2: #3E63F0;
  --ink: #0E1320;
  --muted: #5B6476;
  --line: #E1E5EE;
  --paper: #FFFFFF;
  --tint: #F3F5FA;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-word: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-serif: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --f-head: "Inter Tight", "Inter", system-ui, sans-serif;
  --acc: #CFDCFF;
  --gut: clamp(16px, 4vw, 56px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; height: auto; } /* height:auto beats WordPress's width/height attributes */
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- logo (v2: glossy drop on a coated metal block, name in Montserrat ExtraBold, outlined) ----------
   Artwork: assets/brand/logo-inline.svg. Only the name colours change between light and dark backgrounds. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; --lg-a: #0B1A3D; --lg-b: #0A6CF0; }
.logo svg { display: block; height: 46px; width: auto; aspect-ratio: 659 / 170; }
@media (max-width: 560px) { .logo svg { height: 38px; } }
.logo .la { fill: var(--lg-a); } .logo .lb { fill: var(--lg-b); }
.logo.on-dark { --lg-a: #FFFFFF; --lg-b: #4D9BFF; } /* v2 dark-background colours: white + light blue */

/* Intro (homepage header only): the block rises, the drop falls and squashes, a ripple spreads,
   the shine and the name appear, then a small sparkle repeats every 6 s. */
.logo .lg-ring, .logo .lg-glint { opacity: 0; }
.logo.anim .lg-blk { animation: lg-blk .55s cubic-bezier(.2,.8,.2,1) both; }
.logo.anim .lg-drop { transform-box: fill-box; transform-origin: 50% 100%; animation: lg-drop 1.05s .3s both; }
.logo.anim .lg-pool { transform-box: fill-box; transform-origin: center; animation: lg-pool .5s .9s ease-out both; }
.logo.anim .lg-ring { transform-box: fill-box; transform-origin: center; animation: lg-ring 1s .95s ease-out both; }
.logo.anim .lg-shine { animation: lg-fade .6s 1.35s ease-out both; }
.logo.anim .lg-glint { transform-box: fill-box; transform-origin: center; animation: lg-glint 6s 2.2s ease-in-out infinite both; }
.logo.anim .lg-t1 { animation: lg-txt .6s 1.15s cubic-bezier(.2,.8,.2,1) both; }
.logo.anim .lg-t2 { animation: lg-txt .6s 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lg-blk { from { opacity: 0; transform: translateY(14px); } }
@keyframes lg-drop {
	0% { opacity: 0; transform: translateY(-70px); animation-timing-function: cubic-bezier(.55,0,.85,.35); }
	12% { opacity: 1; }
	58% { transform: translateY(0) scale(1,1); animation-timing-function: ease-out; }
	68% { transform: translateY(0) scale(1.08,.88); animation-timing-function: ease-in-out; }
	82% { transform: translateY(-4px) scale(.97,1.04); }
	100% { opacity: 1; transform: none; }
}
@keyframes lg-pool { from { opacity: 0; transform: scale(.2); } }
@keyframes lg-ring { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: .9; } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes lg-fade { from { opacity: 0; } }
@keyframes lg-glint { 0%, 86%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 92% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes lg-txt { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) { .logo.anim * { animation: none !important; } }

/* ---------- reveal on scroll (content is visible by default; JS adds .rv only when motion is allowed) ---------- */
.rv-on [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rv-on [data-rv].in { opacity: 1; transform: none; }

/* =====================================================================
   PRODUCT SHOWCASE (juice-style): pinned, one product per screen of scroll
   ===================================================================== */
.sc { position: relative; height: calc(var(--n) * 100vh); }
.sc-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--sc-bg, #1E7FD8); transition: background-color .8s ease; color: #FFFFFF; }
.sc-stick::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 52%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); pointer-events: none; }
.sc-top { position: absolute; top: clamp(18px, 4vh, 40px); left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 4; }
.sc-kicker { font: 600 13px var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.sc-count { font: 600 14px var(--f-body); font-variant-numeric: tabular-nums; opacity: .85; }
.sc-layer { position: absolute; inset: 0; pointer-events: none; }
.sc-layer.on { pointer-events: auto; }
.sc-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-46%); display: flex; justify-content: center; align-items: center; gap: clamp(90px, 15vw, 260px); font: 400 clamp(96px, 15.5vw, 270px)/.82 var(--f-word); letter-spacing: -.01em; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; }
.sc-word span { display: block; overflow: hidden; padding-top: .04em; }
.sc-word span i { display: block; font-style: normal; transform: translateY(105%); transition: transform .8s cubic-bezier(.2,.75,.2,1); }
.sc-layer.on .sc-word span i { transform: none; }
.sc-layer.on .sc-word span:last-child i { transition-delay: .06s; }
.sc-img { position: absolute; left: 50%; top: 52%; width: auto; height: min(62vh, 600px); max-width: 34vw; object-fit: contain; transform: translate(-50%, -42%) scale(.86) rotate(-6deg); opacity: 0; transition: transform .9s cubic-bezier(.2,.75,.2,1), opacity .6s ease; filter: drop-shadow(0 30px 40px rgba(0,0,0,.28)); z-index: 2; }
.sc-layer.on .sc-img { transform: translate(-50%, -50%); opacity: 1; transition-delay: .08s; }
.sc-left { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); width: min(280px, 20vw); z-index: 3; }
.sc .sc-left h3 { font: 400 clamp(32px, 3.6vw, 56px)/.95 var(--f-word); text-transform: uppercase; letter-spacing: .005em; }
.sc-left p { margin-top: 16px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.92); }
.sc-left > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.sc-layer.on .sc-left > * { opacity: 1; transform: none; transition-delay: .2s; }
.sc-layer.on .sc-left > p { transition-delay: .28s; }
.sc-right { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); display: grid; justify-items: end; gap: 14px; z-index: 3; }
.sc-name { top: calc(50% - 62px); }
.sc-sizes { top: calc(50% + 30px); }
.sc-right .nm { font: 600 18px var(--f-body); opacity: 0; transform: translateY(10px); transition: all .5s ease; }
.sc-layer.on .sc-right .nm { opacity: 1; transform: none; transition-delay: .2s; }
.sizes { display: flex; gap: 10px; }
.sizes button { width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.22); color: #FFFFFF; font: 600 15px var(--f-body); transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.sizes button:hover { transform: translateY(-2px); }
.sizes button[aria-pressed="true"] { background: #FFFFFF; color: var(--sc-bg); }
.sizes-note { font-size: 13px; opacity: .8; }
.sc-bottom { position: absolute; bottom: clamp(70px, 9vh, 96px); left: var(--gut); right: var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; z-index: 4; }
.sc-dots { display: flex; gap: 8px; }
.sc-dots button { width: 10px; height: 10px; padding: 0; border-radius: 99px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s ease, background-color .3s; }
.sc-dots button[aria-current="true"] { width: 30px; background: #FFFFFF; }
.sc-choose { display: flex; align-items: center; gap: 14px; font: 400 20px var(--f-word); letter-spacing: .02em; text-transform: uppercase; }
.sc-choose::before, .sc-choose::after { content: ""; width: 54px; height: 1px; background: rgba(255,255,255,.7); }
.sc-cta { justify-self: end; display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; color: var(--ink); text-decoration: none; border: 0; cursor: pointer; border-radius: 999px; padding: 13px 22px; font: 600 15px var(--f-body); transition: transform .2s ease; }
.sc-cta:hover { transform: translateY(-2px); }
.sc-cta svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .sc-word { top: 46%; font-size: 30vw; gap: 30vw; }
  .sc-img { top: 47%; height: 42vh; max-width: 70vw; }
  .sc-left { top: auto; bottom: 168px; transform: none; width: auto; right: var(--gut); text-align: center; }
  .sc .sc-left h3 { font-size: 34px; }
  .sc-left p { display: none; }
  .sc-right { transform: none; justify-items: start; left: var(--gut); right: auto; }
  .sc-top { top: 84px; }
  .sc-name { top: 116px; }
  .sc-sizes { top: 148px; }
  .sc-right .sizes button { font-size: 12px; }
  .sc-right .sizes button { width: 56px; height: 56px; font-size: 13px; }
  .sc-right .sizes-note { display: none; }
  .sc-bottom { grid-template-columns: 1fr auto; bottom: 84px; }
  .sc-choose { display: none; }
}

/* =====================================================================
   SINGLE PRODUCT PAGE (overlay)
   ===================================================================== */
.pp-hero { background: var(--pc); color: #FFFFFF; position: relative; overflow: hidden; }
.pp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 70% 50%, rgba(255,255,255,.25), transparent 70%); }
.pp-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(20px, 4vw, 48px) clamp(48px, 7vw, 96px); }
@media (max-width: 860px) { .pp-grid { grid-template-columns: 1fr; } }
.pp-crumb { font-size: 14px; opacity: .85; }
.pp-grid h1 { font: 400 clamp(56px, 8vw, 120px)/.9 var(--f-word); text-transform: uppercase; margin-top: 10px; }
.pp-grid .lead { font-size: 19px; line-height: 1.55; margin-top: 18px; max-width: 46ch; opacity: .95; }
.pp-buy { margin-top: 26px; display: grid; gap: 12px; }
.pp-buy .sizes button { width: 80px; height: 80px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.btn-w { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: 0; cursor: pointer; border-radius: 999px; padding: 14px 24px; font: 600 15px var(--f-body); background: #FFFFFF; color: var(--ink); }
.btn-o { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; border-radius: 999px; padding: 13px 22px; font: 600 15px var(--f-body); background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.7); }
.pp-img { justify-self: center; max-height: 560px; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.3)); animation: ppIn .9s cubic-bezier(.2,.75,.2,1) both; }
@keyframes ppIn { from { opacity: 0; transform: translateY(40px) rotate(-5deg) scale(.92); } to { opacity: 1; transform: none; } }
.pp-body { padding-block: clamp(48px, 7vw, 96px); display: grid; gap: clamp(40px, 6vw, 72px); }
.pp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .pp-cols { grid-template-columns: 1fr; } }
.pp-card { background: var(--tint); border-radius: 20px; padding: 26px; display: grid; gap: 12px; align-content: start; }
.pp-card h3 { font: 700 20px var(--f-body); letter-spacing: -.01em; }
.pp-card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); }
.pp-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.pp-specs th, .pp-specs td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pp-specs th { width: 34%; color: var(--muted); font-weight: 500; }
.pp-sec h2 { font: 700 clamp(28px, 3.4vw, 40px)/1.1 var(--f-body); letter-spacing: -.02em; margin-bottom: 18px; }
.pp-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .pp-more { grid-template-columns: 1fr 1fr; } }
.pp-more button { border: 0; cursor: pointer; border-radius: 18px; padding: 18px; background: var(--c); color: #FFFFFF; display: grid; gap: 10px; justify-items: center; text-align: center; font: 600 15px var(--f-body); }
.pp-more img { height: 130px; width: auto; filter: drop-shadow(0 12px 16px rgba(0,0,0,.25)); }
.pp-quote { border-radius: 24px; background: var(--navy); color: #FFFFFF; padding: clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; }
.pp-quote h2 { margin: 0; color: #FFFFFF; }
.pp-quote p { color: #C3CBDD; margin-top: 6px; }
.pp-foot { font-size: 13px; color: var(--muted); }

/* =====================================================================
   SHARED SMALL PIECES
   ===================================================================== */
.ico { width: 20px; height: 20px; flex: none; }
.pcard-img { background: var(--c); border-radius: 18px; display: grid; place-items: center; padding: 22px; aspect-ratio: 1 / 1; overflow: hidden; }
.pcard-img img { height: 100%; width: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.25)); transition: transform .5s cubic-bezier(.2,.75,.2,1); }
.pcard:hover .pcard-img img { transform: translateY(-6px) rotate(-3deg) scale(1.03); }


/* =====================================================================
   LAYOUT STYLES for the approved Demo 1 design. One font family (Montserrat, from Theme Options)
   plus Geist Mono for small labels. The accent colour is the client's blue.
   ===================================================================== */
:root {
  --f-geist-mono: "Geist Mono", ui-monospace, Consolas, monospace;
}

/* ---------- shared animation helpers ---------- */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-w > span { display: inline-block; }
.rv-on [data-split] .split-w > span { transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--w) * 45ms); }
.rv-on [data-split].in .split-w > span { transform: none; }
.rv-on [data-rv="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.rv-on [data-rv="clip"].in { clip-path: inset(0 0 0 0); }
.rv-on [data-rv="scale"] { opacity: 0; transform: scale(.94); }
.rv-on [data-rv="scale"].in { opacity: 1; transform: none; }
.rv-on [data-rv="left"] { transform: translateX(-30px); }
.rv-on [data-rv="left"].in { transform: none; }
[data-par] { will-change: transform; }
.marq { overflow: hidden; }
.marq .track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.pcard { display: grid; gap: 12px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.pcard-img { background: var(--c); border-radius: 18px; display: grid; place-items: center; padding: 22px; aspect-ratio: 1 / 1; overflow: hidden; }
.pcard-img img { height: 100%; width: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.22)); transition: transform .6s cubic-bezier(.2,.75,.2,1); }
.pcard:hover .pcard-img img { transform: translateY(-6px) rotate(-3deg) scale(1.04); }

/* =====================================================================
   PAGE LAYOUT (Demo 1)
   ===================================================================== */
.ncs-site { --gray: #767676; --bg1: #F8FAFC; --bg2: #F7F7F7; --acc-ink: var(--navy); --stroke: #E2E8F0; background: var(--bg1); color: var(--ink); font-family: var(--f-body); }
.ncs-site h1, .ncs-site h2, .ncs-site h3 { font-family: var(--f-head); font-weight: 500; letter-spacing: -.045em; }
.pg-tag { display: inline-flex; align-items: center; background: #0F172A; color: #FFFFFF; font: 600 11px var(--f-body); letter-spacing: .02em; text-transform: uppercase; border-radius: 999px; padding: 5px 10px; }
.pg-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--acc); color: var(--acc-ink); text-decoration: none; font: 500 15px var(--f-body); border-radius: 999px; padding: 12px 20px; transition: transform .2s ease; }
.pg-btn:hover { transform: translateY(-2px); }
.pg-btn-o { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #0F172A; color: #0F172A; text-decoration: none; font: 500 14px var(--f-body); border-radius: 999px; padding: 10px 18px; }
.pg-h2 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; }
.pg-h2 .dim { color: #9AA3AF; }
.pg-sec { padding-block: clamp(72px, 9vw, 128px); }
.pg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 44px; }
.pg-head > div { display: grid; gap: 14px; }
.pg-center { text-align: center; display: grid; justify-items: center; gap: 14px; margin-bottom: 48px; }
/* hero */
.pg-hero { position: relative; min-height: 100vh; color: #FFFFFF; display: grid; grid-template-rows: auto 1fr auto; background: #0B1220; overflow: hidden; }
.pg-hero > img { position: absolute; inset: 0; width: 100%; height: 110%; object-fit: cover; }
.pg-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,20,.5), rgba(4,10,20,.15) 38%, rgba(4,10,20,.78)); }
.pg-hero > *:not(img) { position: relative; z-index: 1; }
.pg-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px; }
.pg-links { display: flex; gap: 2px; background: #FFFFFF; border-radius: 999px; padding: 5px; }
.pg-links a { text-decoration: none; color: #0F172A; font: 500 15px var(--f-body); padding: 8px 15px; border-radius: 999px; }
.pg-links a.on { font-weight: 600; }
.pg-cta { display: flex; gap: 8px; align-items: center; }
@media (max-width: 960px) { .pg-links { display: none; } }
.pg-main { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: end; padding-bottom: 40px; }
@media (max-width: 960px) { .pg-main { grid-template-columns: 1fr; } }
.pg-main h1 { font: 400 clamp(54px, 7vw, 104px)/.98 var(--f-serif) !important; letter-spacing: -.035em !important; }
.pg-main h1 em { color: var(--acc); font-style: italic; }
.pg-main p { margin-top: 20px; max-width: 54ch; font-size: 16px; color: rgba(255,255,255,.88); }
.pg-consult { display: grid; grid-template-columns: 190px 1fr; gap: 18px; background: rgba(30,36,30,.45); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px; justify-self: end; max-width: 580px; }
.pg-consult img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; aspect-ratio: 1; }
.pg-consult h3 { font-size: 24px; color: #FFFFFF; }
.pg-consult p { font-size: 14px; margin: 8px 0 16px; color: rgba(255,255,255,.8); }
.pg-consult a { display: inline-flex; gap: 6px; background: #FFFFFF; color: #0F172A; text-decoration: none; font-weight: 500; font-size: 14px; border-radius: 999px; padding: 11px 20px; }
@media (max-width: 560px) { .pg-consult { grid-template-columns: 1fr; } .pg-consult img { aspect-ratio: 16/9; } }
.pg-bar { border-top: 1px solid rgba(255,255,255,.2); padding-block: 20px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 14px; }
.pg-bar .star { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pg-bar .chip { background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 12px; }
/* logo strip */
.pg-strip { padding-block: 34px 40px; border-bottom: 1px solid var(--stroke); text-align: center; background: var(--bg2); }
.pg-strip p { color: var(--gray); font-size: 14px; margin-bottom: 20px; }
.pg-strip .track { gap: 64px; font: 600 22px var(--f-head); letter-spacing: -.03em; color: #8E96A3; }
.pg-strip .track span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.pg-strip .track span::before { content: ""; width: 22px; height: 22px; border-radius: 6px; background: #C7CDD6; }
/* about */
.pg-about { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .pg-about { grid-template-columns: 1fr; } }
.pg-about img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 6px; }
.pg-about .txt { display: grid; gap: 22px; justify-items: start; }
.pg-about h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; }
.pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
@media (max-width: 860px) { .pg-stats { grid-template-columns: 1fr; } }
.pg-stat { background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 6px; padding: 22px; display: grid; gap: 14px; min-height: 230px; align-content: space-between; }
.pg-stat b { font: 500 28px var(--f-head); letter-spacing: -.04em; }
.pg-stat div { border-top: 1px dashed #C9CED6; padding-top: 14px; display: grid; gap: 4px; }
.pg-stat strong { font-size: 15px; font-weight: 600; }
.pg-stat span { color: var(--gray); font-size: 14px; }
/* steps */
.pg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .pg-steps { grid-template-columns: 1fr; } }
.pg-step { background: var(--bg2); border: 1px solid #EEEEEE; border-radius: 6px; padding: 22px; display: grid; min-height: 260px; align-content: space-between; }
.pg-step .top { display: flex; justify-content: space-between; align-items: start; font-size: 13px; color: var(--gray); }
.pg-step .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--acc); display: grid; place-items: center; color: var(--acc-ink); }
.pg-step h3 { font-size: 22px; letter-spacing: -.03em; }
.pg-step p { color: var(--gray); font-size: 14px; margin-top: 8px; }
/* products */
.pg-prods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .pg-prods { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pg-prods { grid-template-columns: 1fr 1fr; } }
.pg-prods .pcard-img { background: #EEF0F3; border-radius: 6px; position: relative; aspect-ratio: 4/5; }
.pg-prods .pcard-img::after { content: "+"; position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; color: #0F172A; display: grid; place-items: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pg-prods h3 { font-size: 18px; letter-spacing: -.02em; }
.pg-prods p { color: var(--gray); font-size: 14px; }
/* data / industries list */
.pg-data { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .pg-data { grid-template-columns: 1fr; } }
.pg-list { margin-top: 36px; border-top: 1px solid var(--stroke); }
.pg-list button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 0; border-bottom: 1px solid var(--stroke); font: 500 17px var(--f-body); }
.pg-list button span { color: var(--gray); }
.pg-list button p { grid-column: 1 / -1; max-height: 0; overflow: hidden; color: var(--gray); font-size: 14px; transition: max-height .5s ease; }
.pg-list button[aria-expanded="true"] p { max-height: 120px; }
.pg-list button:focus-visible { outline: 2px solid var(--blue); }
.pg-chart { border-radius: 10px; padding: clamp(18px, 3vw, 36px); background: linear-gradient(135deg, #DDE6FF, #F2E9FF 60%, #E6EDF7); }
.pg-chart img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 40px rgba(15,23,42,.15); transition: opacity .4s ease; }
/* why trust (sticky cascade) */
.pg-why { position: relative; height: 260vh; background: #0D120F; }
.pg-why-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; color: #FFFFFF; }
.pg-why-stick > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.pg-why-stick::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.07) calc(10% - 1px) 10%); }
.pg-why-in { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; padding-block: 12vh 8vh; }
.pg-why-in blockquote { margin: 18px 0 0; font: 500 clamp(26px, 2.8vw, 40px)/1.15 var(--f-head); letter-spacing: -.035em; max-width: 30ch; }
.pg-cards { position: relative; }
.pg-card { position: absolute; width: min(230px, 42vw); background: rgba(60,64,58,.55); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 18px; display: grid; gap: 34px; opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.75,.2,1); }
.pg-card.on { opacity: 1; transform: none; }
.pg-card b { color: var(--acc); font: 500 18px var(--f-head); letter-spacing: -.02em; }
.pg-card span { font-size: 13px; color: rgba(255,255,255,.85); }
.pg-card:nth-child(1) { left: 0; bottom: 0; } .pg-card:nth-child(2) { left: 19%; bottom: 14%; } .pg-card:nth-child(3) { left: 38%; bottom: 28%; } .pg-card:nth-child(4) { left: 57%; bottom: 42%; }
@media (max-width: 760px) { .pg-card:nth-child(n) { left: 0; } .pg-card:nth-child(2) { left: 6%; } .pg-card:nth-child(3) { left: 12%; } .pg-card:nth-child(4) { left: 18%; } }
/* case accordion */
/* testimonials masonry */
/* blog */
/* footer */
.pg-foot { position: relative; color: #FFFFFF; padding-block: clamp(72px, 10vw, 140px) 90px; overflow: hidden; }
.pg-foot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-foot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,48,.55), rgba(8,14,28,.92)); }
.pg-foot > *:not(img) { position: relative; z-index: 1; }
.pg-foot h2 { font: 400 clamp(44px, 6vw, 88px)/1 var(--f-serif) !important; letter-spacing: -.03em; max-width: 14ch; }
.pg-foot h2 em { color: var(--acc); }
.pg-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; margin-top: 72px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.2); font-size: 15px; color: rgba(255,255,255,.75); }
@media (max-width: 860px) { .pg-foot .cols { grid-template-columns: 1fr 1fr; } }
.pg-foot h4 { color: #FFFFFF; margin-bottom: 10px; font-weight: 600; }
.pg-foot .cols a { display: block; text-decoration: none; padding: 3px 0; }

/* =====================================================================
   PROBLEMS WE SOLVE + PROTECT YOUR INVESTMENT (shared markup, styled per layout)
   ===================================================================== */
.prob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .prob { grid-template-columns: 1fr; } }
.prob-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.prob-img { position: relative; overflow: hidden; }
.prob-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .8s ease; }
.prob-card:hover .prob-img img { transform: scale(1.05); }
.prob-n { position: absolute; left: 14px; top: 12px; color: #FFFFFF; font: 500 13px var(--f-mono); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.prob-body { display: grid; gap: 10px; align-content: start; padding: 22px; }
.prob-k { font-size: 13px; font-weight: 600; color: var(--blue); }
.prob-body h3 { font-size: 22px; line-height: 1.2; }
.prob-body p { font-size: 15px; line-height: 1.6; opacity: .78; }
.prob-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(127,127,127,.25); }
.prob-fix span { font-size: 12px; opacity: .65; margin-right: 2px; }
/* per layout */
.prob-pg .prob-card { background: #F7F7F7; border: 1px solid #EEEEEE; border-radius: 6px; }
.prob-pg .prob-img { margin: 10px 10px 0; border-radius: 4px; }
.prob-pg h3 { font-family: var(--f-head); font-weight: 500; letter-spacing: -.035em; }

.inv { padding-block: clamp(80px, 10vw, 140px); }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .inv-grid { grid-template-columns: 1fr; } }
.inv-l { display: grid; gap: 20px; justify-items: start; }
.inv-k { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.inv-l h2 { font-size: clamp(36px, 4vw, 58px); line-height: 1.05; }
.inv-l p { font-size: 17px; max-width: 52ch; opacity: .85; }
.inv-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 14px 22px; font-weight: 600; font-size: 15px; transition: transform .2s ease; }
.inv-btn:hover { transform: translateY(-2px); }
.inv-r { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .inv-r { grid-template-columns: 1fr; } }
.inv-pt { padding: 22px; display: grid; gap: 10px; align-content: start; min-height: 190px; }
.inv-pt span { font: 500 13px var(--f-mono); opacity: .6; }
.inv-pt b { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.inv-pt p { font-size: 14px; opacity: .8; }
/* per layout */
.inv-pg { background: var(--navy); color: #FFFFFF; }
.inv-pg .inv-k { color: var(--acc); }
.inv-pg h2 { font: 400 clamp(40px, 4.6vw, 66px)/1.02 var(--f-serif) !important; letter-spacing: -.03em !important; }
.inv-pg .inv-btn { background: var(--acc); color: var(--navy); border-radius: 999px; }
.inv-pg .inv-pt { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; }
.inv-pg .inv-pt b { color: var(--acc); font-family: var(--f-head); font-weight: 500; }

/* menu chevron */


/* Site layer on top of base.css (Demo 1 styles): header, inner pages, forms, FAQ. */
body.ncs-site { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: #FFFFFF; color: #0F172A; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid #E2E8F0; transition: background-color .3s ease, border-color .3s ease; }
.site-head .pg-nav { padding-block: 14px; }
.site-head .pg-links { background: #F1F4F9; }
.site-head .pg-links a.on { color: var(--blue); }
.site-head.over { background: transparent; border-color: transparent; backdrop-filter: none; }
.site-head.over .pg-links { background: #FFFFFF; }
.site-head.over.solid { background: rgba(255,255,255,.96); border-color: #E2E8F0; backdrop-filter: blur(10px); }
.site-head.over.solid .pg-links { background: #F1F4F9; }
.site-head.over.solid .logo { --lg-a: #0B1A3D; --lg-b: #0A6CF0; }
.site-head .pg-btn { background: var(--blue); color: #FFFFFF; }
body:not(.home) main { padding-top: 76px; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #FFFFFF; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; box-shadow: 0 0 0 1px #E2E8F0; }
.menu-btn span { width: 18px; height: 2px; background: #0F172A; border-radius: 2px; transition: transform .2s ease; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mnav { display: grid; gap: 4px; padding: 8px 16px 20px; background: #FFFFFF; border-top: 1px solid #E2E8F0; }
.mnav a { text-decoration: none; color: #0F172A; font: 500 18px var(--f-body); padding: 12px 4px; border-bottom: 1px solid #EEF1F5; }
.mnav a.on { color: var(--blue); }
.mnav .pg-btn { margin-top: 10px; justify-content: center; border: 0; color: #FFFFFF; }
@media (max-width: 960px) { .menu-btn { display: inline-flex; } .site-head .pg-cta .pg-btn { display: none; } }
@media (min-width: 961px) { .mnav { display: none !important; } }

.lang { display: inline-grid; place-items: center; min-width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; color: #0F172A; text-decoration: none; font: 600 13px var(--f-body); letter-spacing: .04em; box-shadow: 0 0 0 1px #E2E8F0; }
.lang:hover { color: var(--blue); }
@media (max-width: 1100px) { .site-head .pg-links a { padding: 8px 10px; font-size: 14px; } }

/* ---------- home hero: water beading photo with a brand-blue tint ---------- */
.home .pg-hero { padding-top: 76px; }
.pg-hero > img.hero-img { filter: saturate(.6); }
.home .pg-hero::after { background: linear-gradient(180deg, rgba(15,27,51,.55), rgba(31,69,214,.32) 40%, rgba(8,14,40,.86)); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pg-btn-o.lt { border-color: rgba(255,255,255,.8); color: #FFFFFF; }
.pg-btn.big { padding: 15px 26px; font-size: 16px; border: 0; cursor: pointer; }
.pg-bar { padding-bottom: 26px; }

/* ---------- inner page hero ---------- */
.phero { background: linear-gradient(180deg, #EEF2FC, #F8FAFC); padding-block: clamp(56px, 8vw, 104px) clamp(36px, 5vw, 64px); border-bottom: 1px solid #E2E8F0; }
.phero h1 { font: 400 clamp(46px, 6.4vw, 92px)/.98 var(--f-serif) !important; letter-spacing: -.035em !important; color: #0F172A; }
.phero h1 em { color: var(--blue); }
.phero .lead { margin-top: 18px; max-width: 62ch; font-size: 18px; color: #475569; }
.lead.dk { color: #475569; font-size: 17px; margin-top: 14px; max-width: 52ch; }
.pg-sec.tight { padding-block: clamp(48px, 6vw, 80px); }

/* ---------- product cards ---------- */
a.pcard { text-decoration: none; }
.pcat { font: 500 12px var(--f-body); color: var(--blue); }
.pg-prods.all { grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .pg-prods.all { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pg-prods.all { grid-template-columns: 1fr; } }
.pg-prods.all .pcard-img { aspect-ratio: 5 / 4; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cat-tabs button { border: 1px solid #CBD5E1; background: #FFFFFF; color: #0F172A; border-radius: 999px; padding: 9px 16px; font: 500 14px var(--f-body); cursor: pointer; }
.cat-tabs button[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }

/* ---------- problems: 4 cards in a 2x2 ---------- */
.prob-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .prob-4 { grid-template-columns: 1fr; } }
.prob-fix a { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(127,127,127,.35); color: inherit; text-decoration: none; border-radius: 999px; padding: 6px 12px; font: 500 13px var(--f-body); }
.prob-fix a i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.prob-fix a:hover { background: var(--c); border-color: var(--c); color: #FFFFFF; }

/* ---------- quote form ---------- */
.qwrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .qwrap { grid-template-columns: 1fr; } }
.qform { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 10px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; box-shadow: 0 20px 50px rgba(15,23,42,.06); }
.qform h3 { font: 500 24px var(--f-head); letter-spacing: -.03em; margin: 0; }
.qform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .qform .row2 { grid-template-columns: 1fr; } }
.qform label { display: grid; gap: 6px; font: 500 13px var(--f-body); color: #334155; }
.qform input, .qform select, .qform textarea { font: 400 16px var(--f-body); color: #0F172A; background: #F8FAFC; border: 1px solid #CBD5E1; border-radius: 8px; padding: 12px 13px; width: 100%; box-sizing: border-box; }
.qform input:focus, .qform select:focus, .qform textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,69,214,.18); }
.qform .chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: #475569; }
.qform .chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.qform .pg-btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.fnote { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 12px; max-width: 34ch; }
.fnote.dk { color: #64748B; margin: 0; max-width: none; }
.cinfo { display: grid; gap: 6px; align-content: start; }
.cinfo h3 { font: 600 15px var(--f-body); margin: 16px 0 0; }
.cinfo p { margin: 0; color: #475569; }
.cinfo a { color: var(--blue); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }

/* ---------- industries page ---------- */
.inds { display: grid; gap: clamp(36px, 5vw, 64px); }
.ind { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; scroll-margin-top: 100px; }
.ind.rev > img { order: 2; }
@media (max-width: 860px) { .ind { grid-template-columns: 1fr; } .ind.rev > img { order: 0; } }
.ind > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.ind h2 { font: 500 clamp(30px, 3.4vw, 44px)/1.1 var(--f-head); letter-spacing: -.035em; margin: 14px 0 12px; }
.ind p { color: #475569; font-size: 17px; }
.ind h4 { margin: 22px 0 10px; font: 600 14px var(--f-body); }
.minis { display: flex; flex-wrap: wrap; gap: 10px; }
.mini { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #0F172A; border: 1px solid #E2E8F0; border-radius: 999px; padding: 5px 14px 5px 5px; font: 500 14px var(--f-body); background: #FFFFFF; }
.mini img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: var(--c); padding: 3px; }

/* ---------- FAQ + prose ---------- */
.faq-wrap { display: grid; gap: 40px; max-width: 900px; }
.faq-g h2 { font: 500 28px var(--f-head); letter-spacing: -.03em; margin: 0 0 12px; }
.faq { border-bottom: 1px solid #E2E8F0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 500 17px var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--blue); transition: transform .2s ease; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: #475569; max-width: 70ch; }
.prose { display: grid; gap: 14px; color: #475569; font-size: 17px; line-height: 1.65; }
.prose.narrow { max-width: 760px; }
.prose h2 { font: 500 24px var(--f-head); color: #0F172A; margin: 18px 0 0; letter-spacing: -.02em; }
.prose a { color: var(--blue); }

/* ---------- product page (static version of the demo overlay) ---------- */
.pp-hero { padding-top: 0; }
.pp-hero .pp-grid { padding-block: clamp(36px, 5vw, 72px); }
.pp-crumb a { color: #FFFFFF; }
.pp-buy .sizes-note { font-size: 14px; opacity: .85; }
.pp-more a { border: 0; cursor: pointer; border-radius: 18px; padding: 18px; background: var(--c); color: #FFFFFF; display: grid; gap: 10px; justify-items: center; text-align: center; font: 600 15px var(--f-body); text-decoration: none; }
.pp-more img { height: 130px; width: auto; filter: drop-shadow(0 12px 16px rgba(0,0,0,.25)); }

/* ---------- footer ---------- */
.foot-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pg-foot .cols .ig { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; color: #FFFFFF; text-decoration: none; }
.pg-foot .legal { margin-top: 36px; font-size: 13px; color: rgba(255,255,255,.6); }
.pg-foot .cols { margin-top: 64px; }

@media (max-width: 560px) {
  .pg-main h1 { font-size: 48px !important; }
  .pg-consult { display: none; }
}

/* =====================================================================
   WORDPRESS LAYER: classes that replace the static build's inline styles, admin bar, form errors.
   ===================================================================== */
.pg-sec.white { background: #FFFFFF; }
.sc-bottom { grid-template-columns: 1fr auto; } /* no "Choose your size" label: there is no online checkout */

/* Fluent Forms skin: the quote/dealer forms inside .qform.ncs-ff match the theme's own form design. */
.ncs-ff .frm-fluent-form fieldset { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.ncs-ff .ff-el-group { grid-column: 1 / -1; margin: 0 !important; }
.ncs-ff .ff-el-group.ff-col-half { grid-column: auto; }
@media (max-width: 560px) { .ncs-ff .frm-fluent-form fieldset { grid-template-columns: 1fr; } }
.ncs-ff .ff-el-input--label { margin: 0 0 6px !important; }
.ncs-ff .ff-el-input--label label { display: inline; font: 500 13px var(--f-body); color: #334155; }
.ncs-ff .ff-el-is-required.asterisk-right label::after { color: var(--blue); }
.ncs-ff .ff-el-form-control { font: 400 16px var(--f-body) !important; color: var(--ink) !important; background: #F8FAFC !important; border: 1px solid #CBD5E1 !important; border-radius: 8px !important; padding: 12px 13px !important; height: auto !important; box-shadow: none !important; }
.ncs-ff .ff-el-form-control:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(31,69,214,.18) !important; outline: none; }
.ncs-ff .ff-el-form-check-label { display: flex !important; gap: 10px; align-items: flex-start; font: 400 14px var(--f-body); color: #475569; margin: 0; }
.ncs-ff .ff-el-form-check-label input { width: 18px; height: 18px; margin: 2px 0 0 !important; padding: 0 !important; flex: none; accent-color: var(--blue); }
.ncs-ff .ff-el-form-check-label a { color: var(--blue); }
.ncs-ff .ff_submit_btn_wrapper { grid-column: 1 / -1; margin: 4px 0 0 !important; }
.ncs-ff .ff-btn-submit { display: inline-flex !important; align-items: center; gap: 8px; background: var(--blue) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; padding: 15px 26px !important; font: 500 16px var(--f-body) !important; cursor: pointer; transition: transform .2s ease; }
.ncs-ff .ff-btn-submit:hover { transform: translateY(-2px); opacity: 1 !important; }
.ncs-ff .error.text-danger { margin-top: 6px; font-size: 13px; color: #B91C1C; }
.ncs-ff .ff-errors-in-stack, .ncs-ff .ff-message-success { grid-column: 1 / -1; font-size: 14px; border-radius: 8px; }
.ncs-ff label { display: inline; }

/* Headlines: every H1 and H2 uses the display font (Anton by default, set in Theme Options > Fonts),
   in capitals like the product showcase. Words in <em> stay coloured but upright (Anton has no italic).
   (Montserrat site-wide was tried on 2026-10-26 and reverted: the user preferred these fonts.) */
.ncs-site h1, .ncs-site h2 { font-family: var(--f-serif) !important; font-weight: 400 !important; letter-spacing: .005em !important; text-transform: uppercase; line-height: .98 !important; }
.ncs-site h1 em, .ncs-site h2 em { font-style: normal; }
.pg-main h1 { font-size: clamp(48px, 6.2vw, 92px) !important; }
/* Homepage hero: the headline runs full width across the top; the intro text + buttons sit under it
   on the left and the advice card on the right. */
.pg-main h1 { grid-column: 1 / -1; }
.pg-main .hero-copy p { margin-top: 0; }
.pg-main { align-content: end; } /* keep the rows packed together instead of stretched to the hero height */
@media (min-width: 961px) { .pg-main { row-gap: 28px; } }
.phero h1 { font-size: clamp(44px, 5.6vw, 80px) !important; }
.pg-h2, .inv-l h2, .inv-pg h2, .pg-about h2 { font-size: clamp(34px, 4vw, 56px) !important; }
.pg-foot h2 { font-size: clamp(42px, 5.4vw, 80px) !important; }
.ind h2, .faq-g h2, .pp-sec h2, .pp-quote h2 { font-size: clamp(28px, 3vw, 40px) !important; }
.prose h2 { font-size: 26px !important; }
/* Product photos: every jug is on the same 640x760 canvas (tools/seed-media); pin it inside the card box so
   tall and short boxes both show the whole jug at the same scale. */
.pcard { align-content: start; } /* keeps labels level when one description runs longer */
.pcard-img { position: relative; }
.pcard-img > img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-height: none; object-fit: contain; }
.ncs-site .pp-grid h1 { font-family: var(--f-word); font-weight: 400; letter-spacing: 0; }
.mt { margin-top: 14px; }
.pg-tag.start { justify-self: start; }
.pg-tag.light { background: #FFFFFF; color: var(--ink); }
.muted { color: var(--gray); max-width: 60ch; }
.pg-why .pg-cards .pg-btn { position: absolute; right: 0; bottom: 0; }
.pg-foot h4.mt { margin-top: 18px; }
.pg-foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.pg-foot .legal p { margin: 0; }
.pg-foot .legal a { color: #FFFFFF; }
.form-error { margin: 0; padding: 12px 14px; border-radius: 8px; background: #FEF2F2; color: #991B1B; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.qform { scroll-margin-top: 100px; }
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }
.prose ul, .prose ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.prose p { margin: 0; }
.prose img { height: auto; border-radius: 6px; }

/* ---------- blog (2026-10-26): list page, category pages, single article ---------- */
.pp-crumb.dk { color: #475569; opacity: 1; margin-bottom: 14px; }
.pp-crumb.dk a { color: var(--blue); }
.narrow-wrap { max-width: 860px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.bcard { display: grid; gap: 16px; align-content: start; min-width: 0; }
.bcard-img { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--tint); }
.bcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bcard:hover .bcard-img img { transform: scale(1.04); }
.bcard-body { display: grid; gap: 8px; }
.bcard-cat { font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.bcard h3 { font: 600 20px/1.25 var(--f-head); letter-spacing: -.02em; margin: 0; }
.bcard h3 a { color: #0F172A; text-decoration: none; }
.bcard h3 a:hover { color: var(--blue); }
.bcard p { margin: 0; color: #475569; font-size: 15px; }
.bcard-meta { font-size: 13px; color: #64748B; }
.blog-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; }
.blog-pager a { color: var(--blue); font-weight: 600; text-decoration: none; }
.blog-empty { display: grid; gap: 18px; justify-items: start; max-width: 56ch; color: #475569; font-size: 17px; }
.blog-empty .pg-btn { background: var(--blue); color: #FFFFFF; }
.blog-more-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 36px; }
.post-head h1 { font-size: clamp(40px, 5vw, 68px) !important; }
.post-meta { margin: 16px 0 0; color: #64748B; font-size: 15px; }
.post-cover { margin: 0 0 40px; border-radius: 16px; overflow: hidden; }
.post-cover img { width: 100%; height: auto; display: block; object-fit: cover; } /* aspect-ratio set inline by the ncs-hero srcset filter */
.post-body h2 { margin-top: 28px !important; }
.post-body h3 { font: 600 20px var(--f-head); color: #0F172A; margin: 14px 0 0; }
.post-body blockquote { margin: 8px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--blue); color: #0F172A; font-size: 19px; }
.post-cta { margin-top: 56px; background: var(--navy); color: #FFFFFF; border-radius: 18px; padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.post-cta h2 { font-size: clamp(26px, 3vw, 36px) !important; color: #FFFFFF; margin: 0; }
.post-cta p { margin: 8px 0 0; color: rgba(255,255,255,.8); max-width: 52ch; }

/* ---------- product technical details (2026-10-26): how to apply, good to know, tests, product FAQ ---------- */
.pp-use { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .pp-use { grid-template-columns: 1fr; } }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: st; }
.pp-steps li { counter-increment: st; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; color: #334155; font-size: 16px; line-height: 1.55; }
.pp-steps li::before { content: counter(st); width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #FFFFFF; display: grid; place-items: center; font: 600 14px var(--f-body); margin-top: -2px; }
.pp-good { background: var(--tint); border-radius: 20px; padding: 24px 26px; display: grid; gap: 12px; }
.pp-good h3 { font: 700 18px var(--f-body); margin: 0; }
.pp-good ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #475569; font-size: 15px; }
.pp-tests-h { font: 700 18px var(--f-body); margin: 28px 0 10px; }
.pp-tests { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #475569; font-size: 15px; }
.pp-source { margin: 16px 0 0; font-size: 13px; color: var(--muted); max-width: 80ch; }
.pp-faq { display: grid; border-top: 1px solid var(--line); }
.pp-faq details { border-bottom: 1px solid var(--line); }
.pp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 17px var(--f-body); color: #0F172A; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--blue); transition: transform .2s ease; }
.pp-faq details[open] summary::after { transform: rotate(45deg); }
.pp-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.pp-faq details p { margin: 0 0 18px; color: #475569; max-width: 75ch; line-height: 1.6; }

/* ── Phone everywhere + ThinTech badge (2026-11-11). Pricing is by phone, so the number is on every screen. ── */
.ico { width: 1em; height: 1em; flex: none; }
.pg-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #0F172A; background: #F1F4F9; border-radius: 999px; padding: 10px 16px; font: 600 15px var(--f-body); white-space: nowrap; }
.pg-tel .ico { color: var(--blue); }
.site-head.over .pg-tel { background: #FFFFFF; }
.site-head.over.solid .pg-tel { background: #F1F4F9; }
.pg-tel:hover { color: var(--blue); }
@media (max-width: 1240px) { .site-head .pg-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .site-head .pg-tel { padding: 11px; } }
.mnav .mnav-tel { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 600; }
.hero-call { display: block; margin-top: 16px; font-size: 15px; color: rgba(255,255,255,.88); }
.hero-call a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fnote.dk a { color: var(--blue); font-weight: 600; }
.cinfo .ctel a { font: 700 20px var(--f-body); color: var(--navy); }
.cinfo .ctel .ico { color: var(--blue); }
.pp-call { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 0; font-size: 15px; }
.pp-call a { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; font: 700 18px var(--f-body); text-decoration: none; }
.pp-call a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pp-quote p a { color: inherit; font-weight: 700; }
.foot-cta .pg-btn-o { display: inline-flex; align-items: center; gap: 8px; }

.tt-badge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 13px var(--f-body); line-height: 1.2; }
.tt-badge img { width: auto; height: 22px; display: block; }
.tt-badge.on-dark { color: rgba(255,255,255,.85); }
.tt-badge.on-dark img { filter: brightness(0) invert(1); }
.tt-badge.on-light { color: #475569; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 16px; background: #FFFFFF; justify-self: start; }
.tt-badge.on-light img { height: 26px; }
.tt-badge.mt { margin-top: 18px; }
.tt-badge:hover img { opacity: .85; }
.pg-bar .tt-badge img { height: 24px; }
.pg-foot .tt-badge img { height: 28px; }
.pp-tt { margin-top: 18px; }
.hero-call .ico { vertical-align: -2px; margin-right: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pg-about .tt-badge img, .tt-badge img { width: auto; max-width: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; clip-path: none; }
.pg-main .hero-copy .hero-call { margin-top: 22px; }

/* Homepage header over the photo (before it turns solid): no white pills, just white text, so only "Request a quote" reads as a button. */
.site-head.over:not(.solid) .pg-links,
.site-head.over:not(.solid) .pg-tel { background: transparent; }
.site-head.over:not(.solid) .pg-links a,
.site-head.over:not(.solid) .pg-tel,
.site-head.over:not(.solid) .pg-tel .ico { color: #FFFFFF; }
.site-head.over:not(.solid) .pg-links a.on { color: #FFFFFF; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-head.over:not(.solid) .pg-links a:hover,
.site-head.over:not(.solid) .pg-tel:hover { background: rgba(255,255,255,.14); }
.site-head.over:not(.solid) .menu-btn { background: rgba(255,255,255,.14); }
/* Top of the homepage (header not yet solid): all-white logo, menu and buttons, a size up. Shrinks back when it turns solid. */
.site-head .logo svg, .site-head .pg-links a, .site-head .pg-tel, .site-head .pg-btn { transition: height .3s ease, font-size .3s ease, padding .3s ease, background-color .3s ease, color .3s ease; }
.site-head.over:not(.solid) .pg-nav { padding-block: 20px; }
.site-head.over:not(.solid) .logo { --lg-a: #FFFFFF; --lg-b: #FFFFFF; }
.site-head.over:not(.solid) .logo svg { height: 58px; }
.site-head.over:not(.solid) .pg-links a { font-size: 17px; padding: 9px 16px; }
.site-head.over:not(.solid) .pg-tel { font-size: 17px; padding: 12px 20px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.site-head.over:not(.solid) .pg-btn { background: #FFFFFF; color: var(--navy); font-size: 17px; padding: 14px 26px; }
.site-head.over:not(.solid) .pg-btn:hover { background: #E8EDFF; }
@media (max-width: 1240px) { .site-head.over:not(.solid) .pg-tel { padding: 13px; } .site-head.over:not(.solid) .pg-links a { font-size: 15px; padding: 8px 10px; } }
@media (max-width: 960px) { .site-head.over:not(.solid) .logo svg { height: 48px; } .site-head.over:not(.solid) .pg-nav { padding-block: 14px; } }
.site-head .pg-btn, .site-head .pg-tel { white-space: nowrap; }
.site-head.over:not(.solid) .menu-btn { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.site-head.over:not(.solid) .menu-btn span { background: #FFFFFF; }
body.menu-open .site-head.over:not(.solid) .menu-btn span { background: #0F172A; }
@media (max-width: 1240px) { .site-head.over:not(.solid) .logo svg { height: 50px; } .site-head.over:not(.solid) .pg-btn { padding: 13px 20px; font-size: 16px; } }
/* Footer photo kept faint so the text leads (2026-11-13). */
.pg-foot::after { background: linear-gradient(180deg, rgba(8,20,48,.82), rgba(8,14,28,.96)); }
.pg-foot > img { filter: grayscale(.4); }
/* ThinTech badge uses the wordmark without the tiny tagline, which blurred at small sizes. */
.tt-badge img { height: 20px; }
.tt-badge.on-light img { height: 22px; }
.pg-bar .tt-badge img { height: 22px; }
.pg-foot .tt-badge img { height: 24px; }

/* Data sheet email gate (product pages). */
.tds-gate { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 0; border-radius: 18px; padding: 34px 30px 28px; color: #0F172A; box-shadow: 0 30px 80px rgba(8,20,48,.35); }
.tds-gate::backdrop { background: rgba(8,14,28,.62); backdrop-filter: blur(3px); }
.tds-gate h2 { font: 400 clamp(30px, 4vw, 40px)/1 var(--f-serif); text-transform: uppercase; margin: 12px 0 8px; }
.tds-gate .tds-p { color: #475569; margin: 0 0 18px; }
.tds-gate .ncs-ff { box-shadow: none; padding: 0; border: 0; background: none; }
.tds-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F1F4F9; font-size: 24px; line-height: 1; cursor: pointer; color: #0F172A; }
.tds-x:hover { background: #E2E8F0; }
.tds-legal { font-size: 13px; color: #64748B; margin: 0; }
.tds-legal a { color: var(--blue); }
.tds-thanks { font-size: 16px; margin: 0 0 6px; }
.tds-done { margin: 14px 0 0; }
.tds-gate .ff_tc_checkbox, .tds-gate .ff-el-tc { font-size: 14px; color: #334155; }
/* Over the hero, hovering a menu item only underlines it (no box), so the bar never looks like it turned solid. */
.site-head.over:not(.solid) .pg-links a:hover { background: transparent; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-head.over:not(.solid) .pg-tel:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #FFFFFF; color: #FFFFFF; }
/* Homepage: header is part of the hero (scrolls away with it), then pins from the 2nd section on. */
.site-head.over:not(.solid) { position: absolute; }
.site-head.over.solid { animation: ncs-head-in .35s ease both; }
@keyframes ncs-head-in { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .site-head.over.solid { animation: none; } }
/* Product showcase: each product switches after ~40% of a screen of scrolling (was ~80%). */
.sc { height: calc(100vh + var(--n) * 40vh); }

/* Lab tested (v1.3.0): homepage proof strip + "Lab tested" badge on product cards.
   Cards come from Homepage > Lab tested; the card badge shows when a product has Test results. */
.lab { background: var(--tint); }
.lab-tag { gap: 6px; background: var(--blue); }
.lab-tag .ico { width: 13px; height: 13px; }
.lab-intro { max-width: 60ch; color: var(--muted); font-size: 17px; }
.lab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .lab-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lab-grid { grid-template-columns: 1fr; } }
.lab-card { --c: var(--blue); background: #FFFFFF; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 10px; padding: 24px 22px 22px; display: grid; gap: 10px; align-content: start; }
.lab-prod { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 600 12px var(--f-body); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.lab-prod i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lab-prod:hover { color: var(--blue); }
.lab-big { font: 400 clamp(40px, 3.6vw, 54px)/1 var(--f-word); text-transform: uppercase; color: var(--navy); margin-top: 6px; }
.lab-card strong { font-size: 16px; font-weight: 600; }
.lab-card p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.lab-src { margin-top: 6px; padding-top: 12px; border-top: 1px dashed #C9CED6; font: 500 11.5px/1.5 var(--f-mono); color: var(--muted); letter-spacing: .01em; }
.pcard-lab { position: absolute; top: 12px; left: 12px; z-index: 2; background: #FFFFFF; color: var(--navy); font: 600 11px var(--f-body); letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 5px 10px 5px 24px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.pcard-lab::before { content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 5px; border: solid var(--blue); border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); }

/* Ad video under the hero (v1.3.0). Grows from small to ~80% of the screen as it scrolls in
   (CSS scroll-driven animation, transform only, no scroll handlers). Plays muted while at least half is
   on screen and pauses when it leaves (main.js). Browsers without scroll timelines just show it full size. */
.reel { background: var(--navy); padding-block: clamp(48px, 7vw, 110px); view-timeline: --reel block; overflow: hidden; }
.reel-frame { position: relative; width: min(80vw, 86vh * 1.6, 1600px); aspect-ratio: 16 / 10; margin-inline: auto; border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; background: #0A1326; box-shadow: 0 40px 90px rgba(0,0,0,.35); transform-origin: 50% 50%; }
@media (max-width: 700px) { .reel-frame { width: calc(100vw - 2 * var(--gut)); } }
.reel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-video::cue { font: 600 clamp(14px, 1.4vw, 22px)/1.35 var(--f-body); background: rgba(10,19,38,.78); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reel-frame { animation: reel-grow linear both; animation-timeline: --reel; animation-range: entry 0% cover 45%; will-change: transform; }
    /* buttons only appear once the video is near full size, so they never become tiny tap targets */
    .reel-ui { animation: reel-ui linear both; animation-timeline: --reel; animation-range: cover 38% cover 45%; }
  }
}
@keyframes reel-ui { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes reel-grow { from { transform: scale(.5) translateY(8%); } to { transform: none; } }
.reel-ui { position: absolute; right: clamp(10px, 1.4vw, 22px); bottom: clamp(10px, 1.4vw, 22px); display: flex; gap: 8px; }
.reel-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(10,19,38,.62); color: #FFFFFF; font: 600 14px var(--f-body); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease; }
.reel-btn:hover, .reel-btn[aria-pressed="true"] { background: var(--blue); }
.reel-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.reel-btn svg { width: 20px; height: 20px; }
.reel-play { padding: 0; }
.reel-play .i-play, .reel.paused .reel-play .i-pause { display: none; }
.reel.paused .reel-play .i-play { display: block; }
/* muted (not pressed): speaker + cross; sound on (pressed): speaker + waves */
.reel-sound[aria-pressed="false"] .w, .reel-sound[aria-pressed="true"] .x { display: none; }
@media (max-width: 560px) { .reel-sound-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* still read out by screen readers */ .reel-ui { gap: 6px; right: 8px; bottom: 8px; } .reel-btn { min-width: 32px; min-height: 32px; padding: 0; font-size: 11px; } .reel-btn svg { width: 15px; height: 15px; } } /* 32px still clears the WCAG 2.2 24px target size */
/* Phones: the video is too short for captions AND buttons to share the bottom edge, so the buttons sit
   just below the video instead of on top of it. */
@media (max-width: 560px) {
  .reel-frame { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .reel-video { height: auto; aspect-ratio: 16 / 10; border-radius: 14px; box-shadow: 0 24px 50px rgba(0,0,0,.35); background: #0A1326; }
  .reel-ui { position: static; justify-content: flex-end; margin-top: 10px; }
  .reel-btn { background: rgba(255,255,255,.12); }
}