/* =========================================================
   Crystal Cleanser — Design Tokens
   Palette drawn from the mascot (deep sky blue) and the seal
   (leaf green) — not a generic SaaS palette.
   ========================================================= */
:root{
	--ink:        #0B2233;
	--deep:       #0F3A54;
	--blue:       #1D6FD6;
	--blue-2:     #4C97ED;
	--green:      #2FA84F;
	--green-2:    #79D08D;
	--mist:       #EFF7F4;
	--foam:       #FFFFFF;
	--sand:       #F6F3EC;
	--gold:       #F0AE3C;
	--line:       rgba(11,34,51,.10);
	--shadow:     0 24px 60px -30px rgba(11,34,51,.35);
	--text-dim:   #546D7E;
	--surface-dark: #0B2233;
	--surface-dark-deep: #123A54;

	--font-head: "Nunito", "Mukta", "Noto Sans Devanagari", "Segoe UI", sans-serif;
	--font-body: "Nunito Sans", "Mukta", "Noto Sans Devanagari", "Segoe UI", sans-serif;

	--radius: 18px;
	--wrap: 1180px;
}

[data-theme="dark"]{
	--ink:        #EAF3F1;
	--deep:       #CFE6E0;
	--blue:       #5FA8F5;
	--blue-2:     #7FBBF7;
	--green:      #56C878;
	--green-2:    #8EDCA4;
	--mist:       #0B1B22;
	--foam:       #12252E;
	--sand:       #16292F;
	--line:       rgba(234,243,241,.12);
	--shadow:     0 24px 60px -30px rgba(0,0,0,.6);
	--text-dim:   #9FB5C0;
}
[data-theme="dark"] body{ background:var(--mist); }
[data-theme="dark"] .hero__facet-bg{ opacity:.6; }
[data-theme="dark"] .footer-seal{ filter:none; opacity:.9; }
[data-theme="dark"] .site-header{ background:rgba(11,27,34,.86); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html{ max-width:100%; overflow-x:clip; }
body{ max-width:100%; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
	margin:0;
	font-family:var(--font-body);
	color:var(--ink);
	background:var(--mist);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
	font-family:var(--font-head);
	line-height:1.1;
	margin:0 0 .5em;
	letter-spacing:var(--h-track,-.01em);
	font-weight:600;
}
h1{ font-size:clamp(2.4rem,4.6vw,3.9rem); }
h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; max-width:62ch; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.screen-reader-text{ position:absolute; left:-9999px; }
.skip-link:focus{ position:fixed; top:10px; left:10px; z-index:9999; background:var(--surface-dark); color:#fff; padding:10px 16px; border-radius:8px; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.eyebrow{
	font-family:var(--font-head);
	font-size:.9rem;
	font-weight:600;
	color:var(--blue);
	margin:0 0 .6em;
}

/* Scroll progress bar */
.site-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; background:transparent; }
.site-progress__bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--green)); transition:width .1s linear; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:14px 26px;
	border-radius:100px;
	font-family:var(--font-head);
	font-weight:600;
	font-size:.98rem;
	border:2px solid transparent;
	transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
	white-space:nowrap;
}
.btn--primary{
	background:linear-gradient(120deg,var(--blue),var(--green));
	color:#fff;
	box-shadow:0 14px 30px -12px rgba(29,111,214,.55);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(29,111,214,.65); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--surface-dark); color:#fff; }
.btn--light{ background:#fff; color:var(--surface-dark); }
.btn--light:hover{ transform:translateY(-2px); }

.link-arrow{
	font-family:var(--font-head); font-weight:600; color:var(--blue);
	position:relative; padding-right:22px;
}
.link-arrow::after{ content:"›"; position:absolute; right:2px; top:-2px; font-size:1.3em; transition:right .2s ease; }
.link-arrow:hover::after{ right:-4px; }

/* =========================================================
   Header
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(239,247,244,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled{ background:rgba(239,247,244,.97); box-shadow:0 8px 24px -16px rgba(11,34,51,.35); }
[data-theme="dark"] .site-header.is-scrolled{ background:rgba(11,27,34,.97); box-shadow:0 8px 24px -16px rgba(0,0,0,.5); }
body.admin-bar .site-header{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .site-header{ top:46px; } }
.site-header__row{ display:flex; align-items:center; justify-content:space-between; padding:12px 28px; gap:18px; }

.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; min-width:0; }
.brand__mark{ width:56px; height:56px; object-fit:contain; flex-shrink:0; }
.brand img.custom-logo{ width:56px; height:56px; object-fit:contain; }
.brand__wordmark{ display:flex; flex-direction:column; line-height:1.2; font-family:var(--font-head); white-space:nowrap; }
.brand__wordmark strong{ font-size:1.08rem; color:var(--ink); }
.brand__wordmark em{ font-style:normal; font-size:.72rem; color:var(--blue); font-weight:500; }

.site-nav{ display:flex; align-items:center; gap:26px; min-width:0; }
.nav-menu{ display:flex; gap:26px; align-items:center; }
.nav-menu a{ font-family:var(--font-head); font-weight:500; font-size:.96rem; position:relative; padding:6px 0; }
.nav-menu a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--green); transition:width .25s ease; }
.nav-menu a:hover::after{ width:100%; }
.nav-cta{ padding:10px 22px; font-size:.9rem; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease, background .3s ease; }

@media (max-width: 1199px){
	.nav-toggle{ display:flex; z-index:102; position:relative; }
	.site-nav{
		position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 100%); overflow-y:auto; z-index:101;
		background:var(--foam); flex-direction:column; justify-content:flex-start; border-top:1px solid var(--line);
		padding:28px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
		box-shadow:0 20px 40px -20px rgba(11,34,51,.25);
	}
	.site-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
	.nav-menu{ flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
	.nav-menu a{ font-size:1.05rem; }
	.nav-cta{ margin-top:10px; padding:11px 22px; font-size:.9rem; }
}

@media (max-width:480px){
	.site-nav{ padding:20px 18px; }
}

/* =========================================================
   Facet divider — a crystal-cut edge between sections instead
   of a straight line or a generic wave.
   ========================================================= */
.facet-divider{
	height:64px;
	background:var(--mist);
	clip-path: polygon(0 0, 8% 100%, 22% 20%, 38% 100%, 55% 10%, 72% 100%, 88% 15%, 100% 0, 100% 100%, 0 100%);
}
.facet-divider--flip{ transform:scaleY(-1); }

/* =========================================================
   Hero
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding:24px 0 20px; }
.hero__facet-bg{
	position:absolute; inset:-10% -10% auto -10%; height:120%;
	background:
		radial-gradient(60% 55% at 82% 20%, rgba(47,168,79,.16), transparent 70%),
		radial-gradient(55% 55% at 8% 30%, rgba(29,111,214,.16), transparent 70%);
	z-index:0;
}
.hero__row{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }

.hero__lede{ font-size:1.14rem; color:var(--text-dim); max-width:52ch; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 40px; }

.hero__stats{ display:flex; gap:36px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat__num{ font-family:var(--font-head); font-size:1.9rem; font-weight:700; color:var(--ink); }
.stat__label{ font-size:.85rem; color:var(--text-dim); max-width:14ch; }

.hero__figure{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero__glow{
	position:absolute; width:340px; height:340px; border-radius:50%;
	background:radial-gradient(circle, rgba(29,111,214,.28), rgba(47,168,79,.16) 55%, transparent 75%);
	filter:blur(6px);
	animation:cc-pulse 6s ease-in-out infinite;
}
.hero__mascot{ position:relative; width:min(420px,80%); z-index:1; animation:cc-float 5.5s ease-in-out infinite; }

.droplet{ position:absolute; border-radius:50% 50% 50% 0; z-index:0; }
.droplet--a{ width:26px; height:26px; background:var(--blue-2); top:12%; left:6%; opacity:.55; transform:rotate(45deg); animation:cc-drift 7s ease-in-out infinite; }
.droplet--b{ width:16px; height:16px; background:var(--green-2); bottom:18%; right:8%; opacity:.6; transform:rotate(45deg); animation:cc-drift 8.5s ease-in-out infinite reverse; }
.droplet--c{ width:12px; height:12px; background:var(--gold); top:60%; left:2%; opacity:.5; transform:rotate(45deg); animation:cc-drift 6.2s ease-in-out infinite; }

@keyframes cc-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
@keyframes cc-pulse{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
@keyframes cc-drift{ 0%,100%{ transform:translateY(0) rotate(45deg); } 50%{ transform:translateY(-14px) rotate(45deg); } }

@media (max-width: 900px){
	.hero__row{ grid-template-columns:1fr; }
	.hero__figure{ order:-1; }
}

/* =========================================================
   Hero — slider variant (Hero Slides CPT, multiple banners)
   ========================================================= */
.hero--slider{ padding:0; overflow:visible; } /* .hero__stage below does its own clipping — the section itself must NOT clip, or long slide text / the nav row get cut off */

/* The "stage" is the image+text banner itself. Its aspect-ratio is set
   inline per-page from the first slide's REAL uploaded dimensions (see
   front-page.php), so a correctly-sized photo fills it exactly — no crop,
   no letterbox bars. aspect-ratio here is a baseline, not a hard cap:
   because overflow stays visible and height is auto, the box will still
   grow taller to fit slide text that needs more room than the photo's
   own shape provides, rather than clipping it. */
.hero__stage{
	position:relative;
	width:100%;
	min-height:320px;
	display:flex; flex-direction:column; justify-content:center;
	padding:40px 0;
	overflow:visible;
}
.hero__stage .hero__row{ display:grid; align-items:center; width:100%; position:relative; z-index:1; }

.hero__slides{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--surface-dark); border-radius:0; }
.hero__slide{
	position:absolute; inset:0;
	/* The stage's aspect-ratio already matches the image, so a plain
	   "cover" fill shows the whole photo true-to-shape with no meaningful
	   crop and no empty bars. If the stage ever grows taller than that
	   ratio (long slide text pushing it), cover crops a little rather
	   than showing bars — the better trade-off of the two. */
	background-size:cover; background-position:center;
	background-color:var(--surface-dark);
	opacity:0; visibility:hidden;
	transition:opacity 1s cubic-bezier(.4,0,.2,1);
	will-change:opacity;
}
.hero__slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hero__slide-overlay{
	position:absolute; inset:0;
	background:
		linear-gradient(100deg, rgba(11,34,51,.82) 0%, rgba(11,34,51,.58) 45%, rgba(11,34,51,.28) 100%),
		linear-gradient(0deg, rgba(11,34,51,.35), transparent 40%);
}
.hero--slider .hero__facet-bg,
.hero--slider .hero__leaf{ display:none; }

/* On a photo background, the plain-ink ghost border/hover disappears — use white so it reads on any photo. */
.hero--slider .btn--ghost{ border-color:#fff; color:#fff; }
.hero--slider .btn--ghost:hover{ background:#fff; color:var(--ink); }
.hero--slider .hero__lede{ color:rgba(255,255,255,.86); }
.hero--slider .hero__copy h1{ color:#fff; }
.hero--slider .stat__num{ color:#fff; }
.hero--slider .stat__label{ color:rgba(255,255,255,.75); }

.hero__badge{
	display:inline-flex; align-items:center; padding:8px 18px; margin-bottom:18px;
	border:1.5px solid rgba(255,255,255,.55); border-radius:100px;
	font-family:var(--font-head); font-size:.78rem; font-weight:700; letter-spacing:.06em;
	color:#fff; text-transform:uppercase;
}

/* Grid-stacking (every slide shares the same grid cell) keeps the copy
   block's height constant across slides, so swapping slides never jumps
   or re-flows the page — only opacity/position move, which is what
   actually reads as a "smooth" transition. */
.hero__copy-slides{ display:grid; }
.hero__copy-slide{
	grid-area:1 / 1;
	opacity:0; visibility:hidden; pointer-events:none;
	transform:translateY(10px);
	transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1), visibility 0s linear .8s;
}
.hero__copy-slide.is-active{
	opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
	transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
}

.hero--slider .hero__stats{ margin-top:32px; }

/* The nav row sits OUTSIDE .hero__stage, in normal document flow —
   previously it was squeezed inside the same fixed-ratio, clipped box
   as the banner image/text and could be pushed out of the visible area
   entirely on desktop. Now it always has its own guaranteed space below
   the banner and is never clipped. */
.hero__nav{
	position:relative; z-index:2;
	display:flex; align-items:center; justify-content:space-between;
	max-width:var(--wrap); margin:20px auto 0; padding:0 28px 28px;
	gap:24px; flex-wrap:wrap;
}
.hero__dots{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero__dot{
	width:34px; height:4px; border-radius:100px; padding:0; flex:0 0 auto;
	background:var(--line); border:0; cursor:pointer;
	transition:background .25s ease, width .25s ease;
}
.hero__dot.is-active{ background:var(--blue); width:46px; }
.hero__arrows{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.hero__ctrl{
	display:flex; align-items:center; justify-content:center;
	width:42px; height:42px; flex:0 0 auto; border-radius:50%;
	background:var(--mist); border:1px solid var(--line);
	color:var(--ink); cursor:pointer; transition:background .25s ease, transform .25s ease;
}
.hero__ctrl:hover{ background:var(--sand); transform:translateY(-2px); }
.hero__ctrl svg{ width:18px; height:18px; }
.hero__ctrl--pause[aria-pressed="true"] svg{ display:none; }
.hero__ctrl--pause[aria-pressed="true"]::after{
	content:""; width:0; height:0;
	border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--ink);
	margin-left:2px;
}

/* ---------- Mobile / tablet ----------
   The banner image is shown WHOLE (never cropped) at its true ratio. It
   fades into a dark content panel directly beneath it that holds the
   badge, heading, text, buttons and stats, with the mascot standing at the
   bottom-right of the panel. The slider controls sit at the bottom of the
   same dark block, so it reads as one continuous hero. Desktop unchanged. */
@media (max-width:900px){
	.hero--slider{ background:var(--surface-dark); overflow:hidden; }
	.hero--slider .hero__stage{
		aspect-ratio:auto !important;
		min-height:0; padding:0; display:block;
	}
	.hero--slider .hero__slides{
		position:relative; inset:auto; width:100%;
		aspect-ratio:var(--hero-ratio, 16 / 9);
	}
	.hero--slider .hero__slides::after{
		content:""; position:absolute; left:0; right:0; bottom:0; height:22%; z-index:3; pointer-events:none;
		background:linear-gradient(to bottom, rgba(11,34,51,0), var(--surface-dark));
	}
	.hero--slider .hero__slide-overlay{ display:none; }

	.hero--slider .hero__stage .hero__row{
		display:block; position:relative;
		padding-top:8px; padding-bottom:12px;
		min-height:340px;
	}
	.hero--slider .hero__copy-slide{ transform:none; }
	.hero--slider .hero__badge{ padding:6px 14px; margin-bottom:12px; font-size:.7rem; }
	.hero--slider .hero__copy h1{ font-size:clamp(1.6rem, 7vw, 2.3rem); line-height:1.15; margin-bottom:10px; }
	.hero--slider .hero__lede{ font-size:1rem; max-width:none; }

	/* buttons + stats take the left ~60%; mascot owns the right side */
	.hero--slider .hero__actions{
		margin:20px 0 0; gap:12px; flex-direction:column; align-items:stretch;
		width:60%; max-width:300px;
	}
	.hero--slider .hero__actions .btn{ justify-content:center; padding:14px 18px; font-size:.95rem; }
	.hero--slider .hero__stats{
		display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
		width:60%; max-width:300px; margin-top:20px;
	}
	.hero--slider .stat__num{ font-size:1.25rem; }
	.hero--slider .stat__label{ font-size:.68rem; max-width:none; line-height:1.25; }

	.hero--slider .hero__figure{
		display:block; position:absolute; right:14px; bottom:6px;
		width:min(38%, 180px); order:0; z-index:2; pointer-events:none;
	}
	.hero--slider .hero__figure .hero__mascot{ width:100%; height:auto; display:block; }
	.hero--slider .hero__glow{ width:120%; height:60%; left:-10%; top:20%; }
	.hero--slider .droplet{ display:none; }

	.hero__nav{ margin:0 auto; padding:14px 20px 22px; gap:12px; flex-wrap:nowrap; }
	.hero--slider .hero__dot{ background:rgba(255,255,255,.35); }
	.hero--slider .hero__dot.is-active{ background:#fff; }
	.hero--slider .hero__ctrl{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
	.hero--slider .hero__ctrl:hover{ background:rgba(255,255,255,.15); }
	.hero--slider .hero__ctrl--pause[aria-pressed="true"]::after{ border-left-color:#fff; }
}
@media (max-width:600px){
	.hero__dots{ gap:8px; flex-wrap:nowrap; }
	.hero__dot{ width:22px; }
	.hero__dot.is-active{ width:34px; }
	.hero__arrows{ gap:10px; }
	.hero__ctrl{ width:44px; height:44px; }
}
@media (max-width:380px){
	.hero--slider .hero__actions, .hero--slider .hero__stats{ width:58%; }
	.hero--slider .hero__figure{ width:36%; right:8px; }
}

/* =========================================================
   Section heads
   ========================================================= */
.section-head{ max-width:640px; margin:0 auto 30px; text-align:center; }
/* .eyebrow (and any <p>) inherits the global max-width:62ch, which makes it
   narrower than .section-head — without an auto margin it then hugs the
   left edge instead of sitting centered like the heading above/below it. */
.section-head > *{ margin-left:auto; margin-right:auto; }
.section-head--split{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; text-align:left; gap:20px; flex-wrap:wrap; }
.section-head--split > *{ margin-left:0; margin-right:0; }
.section-head--split .eyebrow, .section-head--split h2{ margin-bottom:.3em; }

/* =========================================================
   Why Us
   ========================================================= */
.why-us{ padding:8px 0 52px; }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.why-card{
	position:relative; background:var(--foam); border-radius:var(--radius); padding:30px 24px 26px;
	border:1px solid var(--line); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.why-card__facet{
	position:absolute; top:0; right:0; width:46px; height:46px;
	background:linear-gradient(135deg,var(--blue),var(--green));
	clip-path:polygon(100% 0, 0 0, 100% 100%);
}
.why-card__icon{
	display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:14px;
	border-radius:12px; background:rgba(29,111,214,.1); color:var(--blue);
}
.why-card__icon .cc-icon{ width:20px; height:20px; }
.why-card h3{ margin-bottom:.4em; font-size:1.08rem; }
.why-card p{ font-size:.94rem; color:var(--text-dim); margin:0; }

@media (max-width:1000px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Product grid / cards (used on homepage + archive)
   ========================================================= */
.products-preview{ padding:8px 0 52px; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (min-width:1300px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
.product-card{
	background:var(--foam); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
	display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.product-card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--mist); }
.product-card__media img{ width:100%; height:auto; object-fit:contain; transition:transform .5s ease; }
.product-card:hover .product-card__media img{ transform:scale(1.06); }
.product-card__body{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.product-card__body h3{ font-size:1.12rem; margin-bottom:.35em; }
.product-card__body p{ font-size:.92rem; color:var(--text-dim); margin-bottom:14px; }

.product-meta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.pill{ display:inline-flex; padding:6px 14px; border-radius:100px; font-size:.78rem; font-weight:600; background:var(--mist); color:var(--deep); }
.pill--volume{ background:rgba(29,111,214,.1); color:var(--blue); }
.pill--price{ background:rgba(47,168,79,.12); color:#1E7A38; }

@media (max-width:1000px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .product-grid{ grid-template-columns:1fr; } }

/* Archive-specific */
.archive-hero{ padding:44px 0 20px; }
.archive-hero__lede{ font-size:1.08rem; color:var(--text-dim); max-width:60ch; }
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.filter-pill{ padding:8px 18px; border-radius:100px; border:1px solid var(--line); font-family:var(--font-head); font-size:.9rem; font-weight:500; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.filter-pill:hover{ border-color:var(--blue); }
.filter-pill.is-active{ background:var(--surface-dark); color:#fff; border-color:var(--surface-dark); }
.product-grid--archive{ margin-bottom:36px; }

/* =========================================================
   Careers
   ========================================================= */
.careers-preview{ padding:8px 0 52px; }
.job-list{ display:flex; flex-direction:column; gap:12px; }
.job-row{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	background:var(--foam); border:1px solid var(--line); border-radius:14px; padding:22px 26px;
	transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.job-row:hover{ transform:translateX(4px); box-shadow:var(--shadow); border-color:var(--blue); }
.job-row h3{ font-size:1.05rem; margin-bottom:.2em; }
.job-row p{ margin:0; font-size:.88rem; color:var(--text-dim); }
.job-list--archive{ margin:20px 0 70px; }

.empty-state{ text-align:center; padding:60px 20px; background:var(--foam); border-radius:var(--radius); border:1px dashed var(--line); }

.job-single{ padding:28px 0 56px; }
.job-single__row{ display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start; }
.job-single__meta{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 28px; }
.apply-card{ background:var(--foam); border:1px solid var(--line); border-radius:var(--radius); padding:28px; align-self:start; }
.apply-card p{ font-size:.92rem; color:var(--text-dim); }
@media (max-width:900px){ .job-single__row{ grid-template-columns:1fr; } .apply-card{ position:static; } }

/* =========================================================
   Trust / testimonial band
   ========================================================= */
.trust-band{ padding:20px 0 56px; }
.trust-band__inner{
	background:linear-gradient(120deg,var(--surface-dark),var(--surface-dark-deep));
	color:#fff; border-radius:26px; padding:60px; text-align:center; position:relative; overflow:hidden;
}
.trust-band__inner::before{
	content:""; position:absolute; inset:0;
	background:radial-gradient(50% 80% at 90% 0%, rgba(47,168,79,.35), transparent 60%);
}
.trust-band blockquote{ position:relative; margin:0; max-width:760px; margin-inline:auto; }
.trust-band blockquote p{ font-family:var(--font-head); font-size:1.5rem; line-height:1.4; margin:0 auto 18px; max-width:none; }
.trust-band footer{ font-size:.9rem; opacity:.8; }

/* =========================================================
   Footer
   ========================================================= */
.footer-cta{ background:var(--foam); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; z-index:1; }
.footer-cta__inner{ display:flex; align-items:center; justify-content:space-between; padding:44px 28px; gap:20px; flex-wrap:wrap; position:relative; z-index:1; }
.footer-cta__inner h2{ color:var(--ink); margin:0; font-size:1.7rem; }
.footer-cta__inner .eyebrow{ color:var(--blue); }
.footer-cta__inner h2{ margin:0; font-size:1.7rem; }

.site-footer{ background:var(--surface-dark); color:rgba(255,255,255,.82); }
.footer-main{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:60px 28px 40px; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a:hover{ color:var(--green-2); }
.footer-seal{ width:130px; height:auto; display:block; margin-bottom:16px; opacity:1; background:rgba(255,255,255,.96); border-radius:16px; padding:12px; }
.footer-seal img, img.footer-seal{ width:100%; height:auto; object-fit:contain; display:block; }
.footer-col--brand p{ font-size:.9rem; color:rgba(255,255,255,.6); }
.footer-contact li{ font-size:.92rem; }

.social-row{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.social-link{ display:flex; align-items:center; gap:6px; font-size:.82rem; }
.social-dot{ width:7px; height:7px; border-radius:50%; background:var(--green-2); }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; flex-wrap:wrap; gap:10px; }
.footer-legal-menu{ display:flex; gap:18px; }

@media (max-width:900px){ .footer-main{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-main{ grid-template-columns:1fr; } }

/* =========================================================
   Generic content pages / blog
   ========================================================= */
.simple-page{ padding:12px 0 56px; }
.simple-page--narrow{ max-width:720px; margin:0 auto; }
.simple-page--narrow .entry-content{
	font-size:1.06rem; line-height:1.75;
	background:var(--foam); border:1px solid var(--line); border-radius:var(--radius);
	padding:36px 40px; box-shadow:var(--shadow);
}
.entry-content :where(h2,h3){ margin-top:1.4em; }
.entry-content img{ border-radius:14px; margin:1.2em 0; }
.entry-content p{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.entry-content > *:first-child{ margin-top:0; }
.entry-content > *:last-child{ margin-bottom:0; }
/* A long unbroken word/URL/table in post content can overflow its box and
   silently widen the page — the visible column then looks shifted left
   with a big empty gap on the right. Force everything to wrap/scroll
   inside the column instead of pushing past it. */
.entry-content, .entry-content p, .entry-content li{ overflow-wrap:anywhere; word-break:break-word; }
.entry-content table{ display:block; max-width:100%; overflow-x:auto; }
.entry-content pre{ max-width:100%; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.entry-content iframe, .entry-content embed, .entry-content video{ max-width:100%; }
@media (max-width:600px){
	.simple-page--narrow .entry-content{ padding:24px 22px; }
	.entry-content p{ text-align:left; hyphens:none; }
}

/* Scoped, moderate heading sizes for editor content — the global h1-h4
   sizes are tuned for big marketing sections and look wildly oversized
   inside a narrow article/description column if reused verbatim here. */
.entry-content h1, .product-single__excerpt h1, .job-single__content h1{ font-size:1.9rem; }
.entry-content h2, .product-single__excerpt h2, .job-single__content h2{ font-size:1.5rem; }
.entry-content h3, .product-single__excerpt h3, .job-single__content h3{ font-size:1.22rem; }
.entry-content h4, .product-single__excerpt h4, .job-single__content h4{ font-size:1.05rem; }
.entry-content p, .entry-content li, .product-single__excerpt p, .job-single__content p{ font-size:1rem; }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:30px; }
.post-card{ background:var(--foam); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.post-card__media{ aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg, var(--mist), var(--sand)); }
.post-card__media img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.post-card__body{ padding:18px 20px 22px; }
.post-thumb{ border-radius:var(--radius); overflow:hidden; margin:20px 0; background:linear-gradient(135deg, var(--mist), var(--sand)); }
.post-thumb img{ width:100%; height:auto; display:block; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
@media (max-width:900px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .post-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Product single
   ========================================================= */
.product-single{ padding:28px 0 16px; }
.product-single__row{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.product-single__media{ position:relative; border-radius:26px; overflow:hidden; background:var(--foam); }
.product-single__glow{ position:absolute; inset:0; background:radial-gradient(60% 60% at 30% 20%, rgba(29,111,214,.18), transparent 70%); pointer-events:none; }
.product-single__excerpt{ font-size:1.05rem; color:var(--text-dim); }
@media (max-width:900px){ .product-single__row{ grid-template-columns:1fr; } }

.product-detail-panels{ padding:16px 0 8px; }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.detail-panel{ background:var(--foam); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; }
.detail-panel h3{ margin-bottom:.7em; display:flex; align-items:center; gap:10px; }
.detail-panel__icon{
	display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
	border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--green)); color:#fff;
}
.detail-panel__icon .cc-icon{ width:17px; height:17px; }
.detail-panel p{ color:var(--text-dim); margin:0; }
@media (max-width:800px){ .detail-grid{ grid-template-columns:1fr; } }

.product-gallery{ padding:28px 0 8px; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.gallery-grid__item{ border-radius:14px; overflow:hidden; aspect-ratio:1; }
.gallery-grid__item img{ width:100%; height:auto; object-fit:contain; }
@media (max-width:700px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }

.related-products{ padding:32px 0 56px; }
.related-products h3{ margin-bottom:24px; }

/* =========================================================
   Contact page
   ========================================================= */
.contact-section{ padding:12px 0 56px; }
.contact-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:14px; }
.info-card{ background:var(--foam); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.info-card h3{ font-size:.95rem; color:var(--blue); margin-bottom:.3em; }
.info-card p{ margin:0; font-size:.98rem; }
.map-embed{ border-radius:16px; overflow:hidden; border:1px solid var(--line); }

.contact-form-wrap{ background:var(--foam); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:.86rem; font-weight:600; color:var(--deep); }
.form-field input, .form-field textarea, .form-field select{
	border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; font-family:var(--font-body); font-size:.96rem;
	background:var(--mist); color:var(--ink); color-scheme:light dark;
	transition:border-color .2s ease, background .2s ease;
	resize:vertical;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--text-dim); opacity:1; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--blue); background:var(--foam); }

/* Browser autofill (e.g. Chrome remembering a name/email) forces its own
   background color that ignores our theme entirely, which is what causes
   the washed-out, low-contrast look on autofilled fields. This forces it
   back to our own colors via the box-shadow trick, since autofilled
   inputs don't allow a normal background-color override in WebKit. */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0px 1000px var(--mist) inset;
	box-shadow: 0 0 0px 1000px var(--mist) inset;
	transition: background-color 5000s ease-in-out 0s;
}

.file-drop{ position:relative; border:1.5px dashed var(--line); border-radius:12px; padding:20px; text-align:center; background:var(--mist); transition:border-color .2s ease, background .2s ease; }
.file-drop.is-dragover{ border-color:var(--blue); background:var(--foam); }
.file-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-drop span{ font-size:.86rem; color:var(--text-dim); }

#ccSubmitBtn{ width:100%; justify-content:center; margin-top:6px; }
#ccSubmitBtn[disabled]{ opacity:.7; cursor:progress; }
.form-status{ margin:14px 0 0; font-size:.9rem; min-height:1.4em; }
.form-status.is-success{ color:#1E7A38; }
.form-status.is-error{ color:#C43A3A; }

@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-cc-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
[data-cc-reveal].is-visible{ opacity:1; transform:none; }
[data-cc-reveal-delay="1"]{ transition-delay:.1s; }
[data-cc-reveal-delay="2"]{ transition-delay:.2s; }

/* Job description — same card treatment as other plain-text content areas */
.job-single__content{
	background:var(--foam); border:1px solid var(--line); border-radius:var(--radius);
	padding:32px 36px; box-shadow:var(--shadow); margin-top:20px;
}
.job-single__content p{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.job-single__content > *:first-child{ margin-top:0; }
.job-single__content > *:last-child{ margin-bottom:0; }
@media (max-width:600px){
	.job-single__content{ padding:22px 20px; }
	.job-single__content p{ text-align:left; hyphens:none; }
}