/*
Theme Name: Megakarbon
Theme URI: https://www.megakarbon.com
Author: Webekspor
Description: Dark-industrial theme for PT Mega Karbon Nusantara — lab-tested granular activated carbon manufacturer. Classic PHP theme, no build step.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: megakarbon
*/

/* ================= Tokens =================
   v2 "Dark Industrial": near-black navy base, brand cyan accent.
   Mood follows the client-approved reference (djavacoal) — dark, dense,
   full-bleed photography — but keeps Mega Karbon's own navy/cyan identity
   so the site reads "industrial water treatment", not "shisha charcoal".
   ------------------------------------------------------------------ */
:root {
	/* Surfaces, darkest -> lightest */
	--c-bg:        #08131A;
	--c-bg-2:      #0B1F28;
	--c-bg-3:      #0E2731;
	--c-card:      #102730;
	--c-card-2:    #143440;

	/* Brand */
	--c-accent:      #2BB3C0;
	--c-accent-lite: #57DCE8;
	--c-accent-deep: #1A7C88;

	/* Type */
	--c-white:    #ffffff;
	--c-text:     #A6C0CB;
	--c-text-dim: #76909C;

	/* Lines */
	--c-line:      rgba(255, 255, 255, .09);
	--c-line-soft: rgba(255, 255, 255, .05);
	--c-hairline:  rgba(43, 179, 192, .42);

	--c-wa: #25D366;

	--font: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 12px 34px rgba(0, 0, 0, .45);
	--shadow-lg: 0 26px 64px rgba(0, 0, 0, .60);
	--glow: 0 0 42px rgba(43, 179, 192, .30);
	--wrap: 1240px;
	--sp-section: clamp(64px, 8.5vw, 108px);
}

@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/Manrope-VariableFont_wght.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-display: swap;
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	scroll-padding-top: 92px;
	background: var(--c-bg);
}
body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.68;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--c-accent-lite); }
h1, h2, h3, h4 { line-height: 1.16; color: var(--c-white); font-weight: 800; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); letter-spacing: -.018em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
strong, b { color: #cfe2ea; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 34px); }
.wrap--narrow { max-width: 980px; }

/* Sections. Alternate surfaces + a thin accent hairline between them,
   the rhythm device the reference site uses to separate blocks. */
.section { padding-block: var(--sp-section); position: relative; }
.section--panel { background: var(--c-bg-2); }
.section--navy  { background: var(--c-bg); }
.section--raise { background: var(--c-bg-3); }
.section--rule  { border-top: 1px solid var(--c-hairline); }
.section--tex {
	background-color: var(--c-bg-2);
	background-image: linear-gradient(180deg, rgba(8,19,26,.90), rgba(8,19,26,.95));
	background-size: cover;
	background-position: center;
}

/* Accent-highlighted word inside a heading */
.hl { color: var(--c-accent); }

/* Section kicker: short rule + small-caps label */
.kicker {
	display: flex; align-items: center; gap: 12px;
	font-size: .8rem; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--c-accent);
	margin-bottom: 14px;
}
.kicker::before { content: ""; width: 36px; height: 2px; background: var(--c-accent); flex: none; }

.section-head { max-width: 760px; margin-bottom: clamp(30px, 5vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head p { color: var(--c-text); }

/* Centered display heading — the reference's all-caps treatment */
.h-display {
	text-transform: uppercase;
	letter-spacing: .01em;
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
}

/* ================= Buttons ================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 30px; border-radius: 999px;
	font-weight: 700; font-size: .95rem; line-height: 1;
	border: 2px solid transparent; cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--c-accent); color: #04161c; }
.btn--solid:hover { background: var(--c-accent-lite); color: #04161c; box-shadow: 0 10px 28px rgba(43, 179, 192, .40); }
.btn--outline { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(255,255,255,.04); }
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent); background: rgba(43,179,192,.10); }
.btn--ghost { border-color: var(--c-accent); color: var(--c-accent); background: transparent; }
.btn--ghost:hover { background: rgba(43,179,192,.14); color: var(--c-accent-lite); }
.btn--navy { background: var(--c-card-2); color: #fff; border-color: rgba(255,255,255,.12); }
.btn--navy:hover { background: #1b4453; color: #fff; }
.btn--wa { background: var(--c-wa); color: #04240f; }
.btn--wa:hover { background: #3ae07c; color: #04240f; box-shadow: 0 10px 28px rgba(37, 211, 102, .35); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Text link with arrow, used under cards */
.tlink { font-weight: 700; font-size: .92rem; color: var(--c-accent); display: inline-flex; align-items: center; gap: 7px; }
.tlink::after { content: "→"; transition: transform .18s ease; }
.tlink:hover::after { transform: translateX(4px); }

/* ================= Header ================= */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(6, 15, 21, .86);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--c-line);
	transition: background .25s ease;
}
body.scrolled .site-header { background: rgba(6, 15, 21, .97); }
.site-header__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 22px; min-height: 78px;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; }
.brand:hover { color: #fff; }
.brand__logo {
	width: 46px; height: 46px; flex: none; border-radius: 50%;
	background: radial-gradient(circle at 32% 26%, #2a8ea1, #07222c 72%);
	border: 2px solid rgba(87, 220, 232, .70);
	display: grid; place-items: center;
	font-size: 1.3rem; font-weight: 800; color: #fff;
	box-shadow: 0 0 22px rgba(43,179,192,.35);
}
/* Full lockup logo (Customizer → Site Identity). It carries its own mark AND
   wordmark, so it replaces the badge+text entirely — height-capped, width
   auto, no circle/ring/glow. Height is the only dimension pinned; the image's
   own ratio (~2.8:1) sets the width. */
.brand--logo { gap: 0; }
.brand__logoimg { display: block; height: 42px; width: auto; }
@media (max-width: 640px) { .brand__logoimg { height: 34px; max-width: 62vw; object-fit: contain; object-position: left center; } }
.brand__name { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name b { font-size: 1.04rem; letter-spacing: .03em; color: #fff; }
.brand__name span { font-size: .66rem; font-weight: 700; letter-spacing: .32em; color: var(--c-accent); text-transform: uppercase; }

.nav-primary ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-primary a {
	display: block; padding: 10px 14px; border-radius: 7px;
	color: #cfdee5; font-weight: 600; font-size: .94rem;
}
.nav-primary a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a { color: var(--c-accent); }
.site-header .btn { padding: 12px 22px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; width: 25px; height: 2px; background: #fff; margin: 5px 0; transition: .22s; }

@media (max-width: 1040px) {
	.nav-toggle { display: block; }
	.site-header .btn--header { display: none; }
	.nav-primary {
		position: absolute; top: 100%; left: 0; right: 0;
		background: #071720; border-bottom: 1px solid var(--c-line);
		display: none; padding: 10px 18px 20px;
	}
	.nav-primary.is-open { display: block; }
	.nav-primary ul { flex-direction: column; gap: 2px; }
	.nav-primary a { padding: 13px 14px; }
	body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ================= Hero (full-bleed) ================= */
.hero {
	position: relative;
	min-height: clamp(540px, 84vh, 780px);
	display: grid; align-items: center;
	overflow: hidden;
	text-align: left;
	isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* Slide change is a wipe, not a crossfade. A crossfade between two dark
   industrial photos is close to invisible — for about a second you get a
   muddy blend of both and then it is simply a different picture. The wipe has
   a direction and an edge, so the change registers as an event.
   How the three states work together:
     .is-active  the incoming slide, on top, animating from clipped to open
     .is-prev    the outgoing slide, fully open underneath — it is what the
                 wipe reveals *over*, so the frame is never empty
     neither     clipped away entirely, hidden under the two above
   main.js forces a reflow between removing .is-prev and adding .is-active, so
   jumping back to the previous slide re-wipes instead of popping. */
.hero__slide { position: absolute; inset: 0; z-index: 0; clip-path: inset(0 100% 0 0); }
.hero__slide.is-prev   { z-index: 1; clip-path: inset(0 0 0 0); }
.hero__slide.is-active { z-index: 2; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
	/* Declared on the target state on purpose: transitions read the
	   after-change style, so this animates in and snaps back out — which is
	   what we want, since .is-prev must be open the instant it is set. */
	.hero__slide.is-active { transition: clip-path 1.15s cubic-bezier(.62, .02, .24, 1); }
}
.hero__slide img {
	width: 100%; height: 100%; object-fit: cover;
	/* Phone-camera source, then a dark scrim on top: both flatten the image.
	   A small grade back gives the fire and the blue sacks their colour again. */
	filter: saturate(1.12) contrast(1.06);
}

/* Slow drift on the visible slide. This is the single biggest reason the hero
   stopped reading as a static plate — a still photo under a fixed scrim looks
   like a placeholder no matter which photo it is. Duration is driven from JS
   (--hero-interval) so the motion and the dot fill always finish together, and
   --kb-x/--kb-y come from front-page.php so consecutive slides drift different
   ways instead of all sliding the same direction. */
@keyframes mkn-kenburns {
	from { transform: scale(1.005) translate3d(0, 0, 0); }
	to   { transform: scale(1.075) translate3d(var(--kb-x, 0), var(--kb-y, 0), 0); }
}
@media (prefers-reduced-motion: no-preference) {
	.hero__slide.is-active img {
		animation: mkn-kenburns var(--hero-interval, 6000ms) linear both;
		will-change: transform;
	}
	.hero.is-paused .hero__slide.is-active img { animation-play-state: paused; }
}

.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		/* Scrim follows the copy, and the copy is now on the left. A centred
		   scrim over centred text is the worst of both: it darkens the middle
		   of the frame, which is where the subject of every one of these
		   photos sits. Weighting it left buys the headline more contrast than
		   it had *and* leaves the right-hand two thirds of the photo clear. */
		radial-gradient(760px 460px at 24% 48%, rgba(4,11,16,.80), transparent 72%),
		linear-gradient(96deg,
			rgba(4,11,16,.88) 0%,
			rgba(4,11,16,.68) 38%,
			rgba(4,11,16,.18) 66%,
			rgba(4,11,16,.42) 100%),
		radial-gradient(1100px 520px at 30% 40%, rgba(43,179,192,.14), transparent 70%),
		linear-gradient(180deg,
			rgba(4,11,16,.66) 0%,
			rgba(4,11,16,.10) 30%,
			rgba(4,11,16,.30) 64%,
			rgba(4,11,16,.94) 100%);
}
.hero__inner {
	position: relative;
	padding-block: clamp(84px, 11vw, 132px);
	display: grid; gap: 40px 56px;
	grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
	align-items: end;
}
/* px, not ch: `ch` resolves against this element's own font-size (1rem), so a
   40ch cap here throttled a 3.4rem headline to ~340px and broke it over six
   lines. */
.hero__copy { max-width: 660px; }

/* Eyebrow chip. Two facts we can stand behind, set above the headline so the
   first thing read is evidence rather than an adjective. */
.hero__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 22px; padding: 7px 16px 7px 12px;
	border: 1px solid var(--c-hairline); border-radius: 999px;
	background: rgba(6, 20, 27, .55); backdrop-filter: blur(6px);
	font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: #cfe6ec; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.hero__eyebrow b {
	width: 7px; height: 7px; border-radius: 50%; flex: none;
	background: var(--c-accent); box-shadow: 0 0 0 3px rgba(43,179,192,.28);
}
/* The separator is an <i>, not a character in the translated string, because
   the phrase it separates disappears on a phone and a dangling em dash would
   go with it. */
.hero__eyebrow-loc i { font-style: normal; margin: 0 .5em; opacity: .55; }
@keyframes mkn-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(43,179,192,.30); }
	50%      { box-shadow: 0 0 0 8px rgba(43,179,192,0); }
}
@media (prefers-reduced-motion: no-preference) {
	/* Scoped to :not(.is-paused) like everything else in the hero — no point
	   repainting a live-signal dot nobody is looking at. */
	.hero:not(.is-paused) .hero__eyebrow b { animation: mkn-pulse 2.6s ease-in-out infinite; }
}
/* Copy stack. Every slide has its own headline and lead, and all three sit in
   the SAME grid cell — so the block is as tall as the longest of them and the
   CTAs below never move when the reel advances. Laying them out in flow and
   absolutely positioning the inactive ones would collapse the container to the
   height of whichever slide happened to be showing, and the buttons would
   jump every six seconds. */
.hero__texts { display: grid; }
.hero__texts > .hero__text { grid-area: 1 / 1; }
/* visibility, not display:none — a display toggle cannot be transitioned, and
   opacity alone would leave three invisible copies stacked over each other
   catching text selection. */
.hero__text { opacity: 0; visibility: hidden; }
.hero__text.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
	/* The copy lands a beat after the wipe starts, not with it: the photo edge
	   is the loud event, and two things moving on the same frame just read as
	   one blur. `visibility` is stepped at the END of the fade-out (0s delayed
	   by the duration) so the outgoing block stays paintable while it fades. */
	.hero__text {
		transform: translateY(16px);
		transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
	}
	.hero__text.is-active {
		transform: none;
		transition: opacity .5s ease .3s, transform .6s cubic-bezier(.2, .7, .3, 1) .3s, visibility 0s;
	}
}

/* The scrim behind the text was lightened so the photo reads; the contrast the
   words lost is paid back here instead, which costs the image nothing. */
/* text-wrap: balance evens out the two lines at every width instead of filling
   line 1 and dumping the remainder. Hand-picking wording that broke well was a
   trap: "Small or Bulk Orders, Packed at 25 kg" balanced nicely at 1440 and
   then hung "at 25 kg" alone on a 175px line at 1100. Unsupported browsers
   just get the old greedy wrap, which is what we had. */
.hero h1,
.hero__title {
	color: #fff; margin: 0 0 .4em;
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	text-wrap: balance;
	line-height: 1.16; font-weight: 800; letter-spacing: -.022em;
	text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 34px rgba(0,0,0,.7);
}
/* Two lines of lead is a bigger block than one, so it is stepped down off pure
   white (same value as .page-hero p) to keep the headline clearly on top. The
   size ratio alone — 54px against 19px — was doing that work when the lead was
   a single line; at two it needed the tone as well. */
.hero p.lead {
	font-size: clamp(1.02rem, 1.5vw, 1.18rem);
	color: #cfe2ea; max-width: 60ch;
	text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 20px rgba(0,0,0,.6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* Short button labels are a phone-only swap — see .hero__cta in the 640px
   block for why they exist and how they were sized. */
.cta-short { display: none; }

/* The CTAs deliberately sit OUTSIDE .hero__texts so they can never move in
   layout when the reel advances (that is the whole point of the stacked grid
   above). Holding perfectly still while the photo wipes and the headline rises
   made them read as page furniture rather than part of the slide, so they get
   the same entrance by animation instead: opacity and transform only, neither
   of which reflows, so the button is still exactly where it was.
   One animation covering out AND in, not two — the class is re-applied on every
   change, and a separate fade-out would need a second class and a timer to
   sequence. Timings shadow .hero__text: copy leaves by .4s and lands at .8s,
   so the buttons leave by .4s and land at 1s, half a beat behind. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes mkn-cta-swap {
		0%   { opacity: 1; transform: none; }
		40%  { opacity: 0; transform: translateY(9px); }
		46%  { opacity: 0; transform: translateY(16px); }
		100% { opacity: 1; transform: none; }
	}
	.hero__cta.is-in { animation: mkn-cta-swap 1s cubic-bezier(.3, 0, .2, 1) both; }
}

/* Chapter rail. This replaced three unlabelled bars centred under the CTAs —
   controls that told you a carousel existed but never what it was for. Each
   row now names its frame, so the same three photos read as a tour of the
   operation, and the filling bar still shows when the next one is due. */
/* Glass panel behind the rail. Without it the captions float loose over
   whatever the photo happens to be doing there — and on slide 1 that is a bed
   of embers, which is the worst possible backdrop for 13px text. The panel
   also makes the rail read as an instrument, which suits the subject. */
.hero__rail {
	display: flex; flex-direction: column; gap: 15px;
	padding: 18px 18px 16px;
	border: 1px solid var(--c-line); border-radius: 14px;
	background: rgba(6, 18, 25, .46); backdrop-filter: blur(9px);
	box-shadow: var(--shadow);
}
.hero__chapter {
	position: relative; display: flex; flex-direction: column; gap: 9px;
	width: 100%; padding: 4px 0; cursor: pointer;
	border: 0; background: none; text-align: left; color: inherit; font: inherit;
}
.hero__chapter-head { display: flex; align-items: baseline; gap: 10px; }
.hero__chapter-n {
	font-size: .7rem; font-weight: 800; letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	color: var(--c-text-dim); transition: color .25s ease;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.hero__chapter-t {
	font-size: .85rem; font-weight: 600; line-height: 1.3;
	color: #9db6c1; transition: color .25s ease;
	text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.hero__chapter-bar {
	position: relative; display: block; overflow: hidden;
	height: 3px; border-radius: 99px;
	background: rgba(255,255,255,.20); box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.hero__chapter-bar i {
	position: absolute; inset: 0; display: block; border-radius: 99px;
	background: var(--c-accent); box-shadow: 0 0 10px rgba(43,179,192,.75);
	transform: scaleX(0); transform-origin: left center;
}
.hero__chapter:hover .hero__chapter-t { color: #dceaf0; }
.hero__chapter:hover .hero__chapter-bar { background: rgba(255,255,255,.34); }
.hero__chapter.is-active .hero__chapter-n { color: var(--c-accent-lite); }
.hero__chapter.is-active .hero__chapter-t { color: #fff; }
/* Fallback for reduced-motion / no-JS: the active bar is simply filled. */
.hero__chapter.is-active .hero__chapter-bar i { transform: scaleX(1); }
/* is-auto is set by main.js only when the timer is actually running, so the bar
   never animates a countdown that is not happening. */
@keyframes mkn-railfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__rail.is-auto .hero__chapter.is-active .hero__chapter-bar i {
	animation: mkn-railfill var(--hero-interval, 6000ms) linear forwards;
}
.hero.is-paused .hero__rail.is-auto .hero__chapter.is-active .hero__chapter-bar i { animation-play-state: paused; }

/* Below the two-column threshold the rail turns into a single row and only the
   active chapter keeps its caption — three captions stacked under the CTAs
   would out-weigh the CTAs themselves. The inactive ones stay as numbered
   stubs, which is enough to show there are three and let you jump. */
@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; gap: 34px; align-items: start; }
	.hero__copy { max-width: 620px; }
	.hero__rail { flex-direction: row; align-items: flex-start; gap: 12px; }
	.hero__chapter { width: auto; flex: 0 0 auto; min-width: 54px; }
	.hero__chapter.is-active { flex: 1 1 auto; }
	.hero__chapter:not(.is-active) .hero__chapter-t { display: none; }
}

/* Mobile hero.
   Everything in this block exists to fix one problem: stacked in a single
   column, the hero was seven bars of near-identical width — capsule eyebrow,
   headline, lead, two capsule buttons, rail — and the furniture measured more
   than the message it framed (chip 31 + buttons 109 + rail 75 = 215px against
   175px of copy). Three pill shapes in a vertical row is what made it read as
   an app splash screen instead of the front of an industrial supplier, and
   because the copy spans the full column the scrim then had to cover the frame
   end to end, so the photograph each slide was chosen FOR never appeared.
   The fixes are all subtractive: drop two of the three capsules, and reserve
   height so the picture has somewhere to be seen. */
@media (max-width: 640px) {
	/* Reserved height, so there is a band of photograph rather than a box that
	   shrink-wraps the text — on a phone the copy spans the full column, and
	   without the reserve the scrim has to cover the frame end to end and the
	   image never speaks. min() rather than a bare vh so a short viewport just
	   falls back to content height.
	   The leftover is CENTRED, not dumped above the copy. Anchoring the block
	   to the bottom (align-items: end) was the first attempt and it measured
	   226px of photo above the chip against 40px below the rail — the whole
	   message crammed into the bottom third under a large dead sky. Inheriting
	   the base align-items: center splits it evenly; ~99px either side at
	   390x844, ~93px at 402x825.
	   The reserve is also smaller than it was (76vh/660 -> 68vh/600): balancing
	   alone would have moved the void rather than removed it, so some of it is
	   simply given back, which lifts the whole hero and lets the credential
	   strip below peek further up the screen. */
	.hero { min-height: min(68vh, 600px); }
	.hero__inner { padding-block: 34px; gap: 24px; }

	/* The chip keeps its glass — dropping it was tried first and the 10px caps
	   then had to survive whatever the photo was doing behind them, which on
	   slide 2 is a wall of bright blue sacks. What goes instead is the half of
	   the sentence that made it 321px wide in a 354px column: the place. The
	   test method is the part carrying the credential, and Bogor is already in
	   the footer, on the contact page and in slide 3's own caption. */
	.hero__eyebrow {
		margin-bottom: 15px; padding: 6px 14px 6px 10px;
		font-size: .64rem; letter-spacing: .07em;
	}
	.hero__eyebrow-loc { display: none; }
	.hero h1,
	.hero__title { font-size: 1.86rem; letter-spacing: -.014em; margin-bottom: .5em; }
	.hero p.lead { font-size: .97rem; line-height: 1.6; max-width: 40ch; }

	/* One row, both small. Stacked full-width they were 109px of capsule for two
	   choices; side by side at this size the pair is 46px and reads as a single
	   line of controls, which is what the desktop layout does too. Hierarchy is
	   carried by fill (solid vs outline) rather than by size, so aligning them
	   costs nothing.
	   The short labels are what make one row possible at all. Measured at 360px,
	   where the column is 324px: the full pair needs 337px even at .82rem, and
	   .74rem gets it to 315px but is 11.8px type on the primary call to action.
	   With the verb dropped the pair is ~255px, which still fits a 320px screen.
	   flex-wrap on the base rule is the safety net if a translation runs long —
	   they stack rather than overflow. */
	.hero__cta { flex-direction: row; align-items: center; gap: 10px; margin-top: 24px; }
	.hero__cta .btn { padding: 14px 20px; font-size: .86rem; }
	.hero__cta .cta-long { display: none; }
	.hero__cta .cta-short { display: inline; }

	/* The rail is the third capsule and the only one worth keeping — it is the
	   carousel's only control — but it can carry less. Slimmer padding, a
	   narrower stub for the two inactive chapters, so the named one clearly
	   dominates instead of sharing the row three ways. */
	.hero__rail { padding: 13px 14px 11px; gap: 11px; border-radius: 12px; }
	.hero__chapter { min-width: 40px; padding: 2px 0; gap: 8px; }
	.hero__chapter-n { font-size: .66rem; }
	.hero__chapter-t { font-size: .8rem; }

	/* Scrim rebalanced to match the new layout: clear through the upper quarter,
	   which is now photograph and nothing else, then ramping steadily from the
	   point the eyebrow starts down to near-solid under the rail. The old
	   version never dropped below 54% anywhere, which is why the ember bed read
	   as a grey wash whatever slide was showing.
	   Tune this against SLIDE 2, not slide 1. The ember and workshop frames are
	   dark to begin with and look fine under almost anything; the sacks are a
	   wall of bright blue, and a ramp that flatters slide 1 leaves white text
	   sitting on top of it. The many stops are not fussiness — two stops far
	   apart put a visible band edge across the middle of the frame. */
	.hero::before {
		background:
			radial-gradient(620px 460px at 34% 52%, rgba(4,11,16,.42), transparent 76%),
			linear-gradient(180deg,
				rgba(4,11,16,.58) 0%,
				rgba(4,11,16,.18) 8%,
				rgba(4,11,16,.32) 15%,
				rgba(4,11,16,.50) 24%,
				rgba(4,11,16,.62) 40%,
				rgba(4,11,16,.72) 60%,
				rgba(4,11,16,.86) 82%,
				rgba(4,11,16,.96) 100%);
	}
}

/* Proof stats bar sitting on the hero seam */
.proof-bar { background: var(--c-bg-3); border-block: 1px solid var(--c-hairline); }
.proof-bar__grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	text-align: center;
}
.proof-bar__grid > div { padding: 26px 16px; border-left: 1px solid var(--c-line); }
.proof-bar__grid > div:first-child { border-left: 0; }
.proof-bar b {
	display: block; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--c-accent);
	letter-spacing: -.02em; line-height: 1.15;
}
.proof-bar span {
	font-size: .74rem; color: var(--c-text-dim); letter-spacing: .12em;
	text-transform: uppercase; font-weight: 700;
}
@media (max-width: 720px) {
	.proof-bar__grid { grid-template-columns: repeat(2, 1fr); }
	.proof-bar__grid > div:nth-child(odd) { border-left: 0; }
	.proof-bar__grid > div:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}

/* ================= Credential strip ================= */
.cred-strip { background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); overflow: hidden; }
.cred-strip__track {
	display: flex; gap: 0; list-style: none;
	/* Reset the BLOCK axis only. This <ul> also carries .wrap, and a `margin: 0`
	   /`padding: 0` shorthand silently clobbers .wrap's `margin-inline: auto`
	   and gutter — the strip then hugged the left edge while every other
	   section stayed centred (414px out on a 2000px screen). */
	margin-block: 0; padding-block: 0;
}
.cred-strip li {
	flex: 1; min-width: 0; padding: 22px 18px; text-align: center;
	border-left: 1px solid var(--c-line);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cred-strip li:first-child { border-left: 0; }
.cred-strip svg { width: 28px; height: 28px; stroke: var(--c-accent); fill: none; stroke-width: 1.6; }
.cred-strip b { font-size: .82rem; color: #fff; letter-spacing: .04em; line-height: 1.3; }
.cred-strip span { font-size: .72rem; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 900px) {
	.cred-strip__track { flex-wrap: wrap; }
	.cred-strip li { flex: 0 0 50%; border-top: 1px solid var(--c-line); }
	.cred-strip li:nth-child(odd) { border-left: 0; }
	/* Five items in a two-column wrap leaves the last one orphaned in a
	   half-empty row — let it take the full width instead. */
	.cred-strip li:last-child:nth-child(odd) { flex-basis: 100%; }
}

/* ================= Grids & cards ================= */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
	background: linear-gradient(180deg, var(--c-card) 0%, #0a1a22 100%);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 28px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(43,179,192,.42); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .38em; }
.card p { color: var(--c-text); font-size: .95rem; margin: 0; }
.card__icon {
	width: 52px; height: 52px; border-radius: 11px;
	background: rgba(43, 179, 192, .14); color: var(--c-accent);
	display: grid; place-items: center; margin-bottom: 18px; flex: none;
}
.card__icon svg { width: 26px; height: 26px; }
.card--stat b.stat {
	display: block; font-size: 2.1rem; color: var(--c-white);
	letter-spacing: -.025em; margin-bottom: 4px; line-height: 1.1;
}
.card--stat .stat-unit { font-size: .95rem; color: var(--c-accent); font-weight: 700; }

/* Attribute tiles — the eight measured claims under "Why Choose Us?".
   What this replaced: a 108px near-black radial disc with a 46px hairline
   glyph floating in the middle of it, on a teal-washed card ~280px tall
   holding one line of text. Three things went wrong there. The disc was the
   loudest element in the card and it was a hole; the icon inside it was too
   small and too thin to register; and the card was mostly empty space, so
   eight of them made a very quiet grid. Now: a lit icon chip anchored
   top-left, denser cards, and the label carrying the weight. */
.glow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .glow-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .glow-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.gcard {
	position: relative; isolation: isolate;
	border-radius: 14px; overflow: hidden;
	padding: 22px 20px 24px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
	background: linear-gradient(168deg, var(--c-card) 0%, var(--c-bg) 100%);
	border: 1px solid var(--c-line);
	transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
/* Corner bloom: gives the flat card a light source, sitting where the chip is
   so the two read as one glow. z-index -1 inside the card's own stacking
   context (hence `isolation`) puts it above the card fill, below the content. */
.gcard::before {
	content: ""; position: absolute; z-index: -1;
	top: -55px; left: -45px; width: 165px; height: 165px;
	background: radial-gradient(circle, rgba(43,179,192,.34), transparent 68%);
	opacity: .75; transition: opacity .24s ease;
}
/* Hairline along the top edge, lit only on hover. */
.gcard::after {
	content: ""; position: absolute; inset: 0 0 auto; height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-accent-lite), transparent);
	opacity: 0; transition: opacity .24s ease;
}
.gcard:hover { transform: translateY(-4px); border-color: rgba(43,179,192,.42); box-shadow: var(--glow); }
.gcard:hover::before { opacity: 1; }
.gcard:hover::after  { opacity: .85; }

.gcard__ico {
	width: 52px; height: 52px; border-radius: 15px;
	display: grid; place-items: center; flex: none;
	background: linear-gradient(150deg, rgba(87,220,232,.24) 0%, rgba(43,179,192,.05) 100%);
	border: 1px solid rgba(87,220,232,.32);
	/* Inset top highlight + drop shadow: the chip should sit on the card, not
	   be cut out of it. That inversion is what made the old disc look dead. */
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(2,10,15,.45);
	transition: transform .24s ease, border-color .24s ease;
}
.gcard:hover .gcard__ico { transform: translateY(-2px) rotate(-5deg); border-color: rgba(87,220,232,.6); }
.gcard__ico svg {
	width: 26px; height: 26px; stroke: var(--c-accent-lite); fill: none;
	stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
	filter: drop-shadow(0 0 8px rgba(43,179,192,.45));
}
/* Sentence case, not the old uppercase + .13em tracking. Six of these eight
   labels carry a figure ("1,279 mg/g", "92.80%", "mesh 325") and tracked caps
   at .72rem make digits genuinely hard to read — which is the opposite of the
   point, since the numbers are the argument. */
.gcard b {
	font-size: .95rem; font-weight: 700; line-height: 1.4;
	color: var(--c-white); letter-spacing: -.005em;
}

/* Product cards */
.pcard {
	background: linear-gradient(180deg, var(--c-card) 0%, #08181f 100%);
	border: 1px solid var(--c-line); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcard:hover { transform: translateY(-5px); border-color: rgba(43,179,192,.45); box-shadow: var(--shadow-lg); }
.pcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #05121a; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.pcard:hover .pcard__media img { transform: scale(1.07); }
.pcard__media::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(4,12,18,.72) 100%);
}
.pcard__grade {
	position: absolute; top: 13px; left: 13px; z-index: 2;
	background: var(--c-accent); color: #04161c;
	font-weight: 800; font-size: .74rem; letter-spacing: .09em;
	padding: 6px 13px; border-radius: 999px; text-transform: uppercase;
}
.pcard__body { padding: 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pcard__body h3 { font-size: 1.1rem; margin: 0; }
.pcard__body h3 a { color: #fff; }
.pcard__body h3 a:hover { color: var(--c-accent); }
.pcard__iodine { font-size: 1.7rem; font-weight: 800; color: var(--c-accent); letter-spacing: -.025em; line-height: 1.1; }
.pcard__iodine small { font-size: .76rem; color: var(--c-text-dim); font-weight: 700; margin-left: 5px; letter-spacing: .04em; }
.pcard__body p { color: var(--c-text); font-size: .92rem; margin: 0; flex: 1; }

/* Image tile with caption overlay — production-info / factory navigation */
.icard {
	position: relative; display: block; overflow: hidden;
	border-radius: 10px; aspect-ratio: 3 / 4;
	border: 1px solid var(--c-line);
}
.icard img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.icard:hover img { transform: scale(1.07); }
.icard::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(4,12,18,.10) 35%, rgba(4,12,18,.93) 100%);
}
.icard__label {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 20px 18px; text-align: center;
}
.icard__label b { display: block; color: #fff; font-size: .98rem; }
.icard__label span { font-size: .78rem; color: var(--c-accent); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

/* Mesh / packaging tile */
.mtile {
	border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden;
	background: linear-gradient(180deg, var(--c-card), #08181f);
	transition: transform .2s ease, border-color .2s ease;
}
.mtile:hover { transform: translateY(-4px); border-color: rgba(43,179,192,.4); }
.mtile__media { aspect-ratio: 4 / 3; position: relative; background: #05121a; }
.mtile__media img { width: 100%; height: 100%; object-fit: cover; }
.mtile__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, transparent 28%, rgba(4,12,18,.68) 100%); }
.mtile__tag {
	position: absolute; z-index: 2; top: 12px; left: 12px;
	background: rgba(4,14,20,.82); border: 1px solid var(--c-hairline);
	color: var(--c-accent-lite); font-weight: 800; font-size: .76rem;
	letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
}
.mtile__body { padding: 22px; }
.mtile__body h3 { font-size: 1.05rem; margin-bottom: .3em; }
.mtile__body p { font-size: .9rem; color: var(--c-text); margin: 0; }

/* A subsection inside #production-process, not a section of its own — the hairline
   does the separating work that .section--rule would have done, without adding a
   fourth background band to a page that already alternates three. */
.floor-clips {
	margin-top: clamp(46px, 6vw, 76px);
	padding-top: clamp(38px, 5vw, 60px);
	border-top: 1px solid var(--c-line-soft);
}
.floor-clips .section-head { margin-inline: auto; text-align: center; }
.floor-clips .section-head .kicker { justify-content: center; }
.floor-clips .section-head h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .5em; }
.floor-clips .section-head p { color: var(--c-text); }

/* One clip centred under a centred heading leaves a 340px object marooned in a
   full-width band. With a single clip the block turns on its side instead:
   copy left, frame right, both vertically centred. */
@media (min-width: 861px) {
	.floor-clips--single {
		display: grid; align-items: center;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: clamp(34px, 5vw, 64px);
	}
	.floor-clips--single .section-head { margin: 0; text-align: left; max-width: none; }
	.floor-clips--single .section-head .kicker { justify-content: flex-start; }
	.floor-clips--single .vclips { grid-template-columns: 340px; }
}

/* ================= Floor clips (click-to-play video) =================
   The client's two clips are 478x850 phone footage. Everything here follows
   from that: the frame is locked to 478/850 so the poster and the player are
   the same shape, and the column is capped at 340px so the source is displayed
   BELOW its native width (~1.4x density) instead of upscaled. Widening this
   past 478px is the one change that will visibly wreck it — the footage has no
   more detail to give and simply goes soft.

   Not a background, not full-bleed, not autoplaying: see mkn_videos() for why
   phone-shaped is the honest presentation, and video-figure.php for why nothing
   downloads until the visitor clicks. */
.vclips {
	display: grid; gap: clamp(20px, 3vw, 34px);
	grid-template-columns: repeat(auto-fit, minmax(230px, 340px));
	justify-content: center;
}
.vclip { margin: 0; max-width: 340px; }
.vclip__frame {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: 478 / 850;
	border: 1px solid var(--c-line); border-radius: 14px;
	background: #05121a; text-decoration: none;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.vclip__frame:hover { border-color: rgba(43,179,192,.45); box-shadow: var(--glow); }
.vclip__frame:focus-visible { outline: 2px solid var(--c-accent-lite); outline-offset: 3px; }
.vclip__poster, .vclip__video { width: 100%; height: 100%; display: block; object-fit: cover; }
/* contain, not cover: once the real player is in, letterboxing is better than
   quietly cropping the frame the poster promised. Same result either way for
   these two files — this only matters if a future clip is not 9:16. */
.vclip__video { object-fit: contain; background: #000; }
/* The poster darkens toward the bottom so the duration chip stays legible over
   whatever the frame happens to show. Once the player is in, that scrim would
   sit on top of the native controls and swallow clicks, so it goes. */
.vclip__frame::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(4,12,18,.34) 0%, transparent 32%, transparent 58%, rgba(4,12,18,.8) 100%);
}
.vclip__frame.is-playing::after { content: none; }
.vclip__play {
	position: absolute; z-index: 2; top: 50%; left: 50%;
	translate: -50% -50%;
	width: 66px; height: 66px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(6,18,25,.62); backdrop-filter: blur(6px);
	border: 1px solid var(--c-hairline); color: var(--c-accent-lite);
	box-shadow: var(--glow);
	transition: transform .22s ease, background-color .22s ease;
}
/* Optical centring: a triangle's visual centre of mass sits left of its bounding
   box, so a mathematically centred play glyph always looks like it is drifting
   backwards inside its circle. */
.vclip__play svg { width: 26px; height: 26px; margin-left: 3px; }
.vclip__frame:hover .vclip__play { transform: scale(1.08); background: rgba(43,179,192,.24); }
.vclip__meta {
	position: absolute; z-index: 2; left: 12px; bottom: 12px;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
	color: var(--c-text); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.vclip__meta b { color: #fff; font-weight: 800; }
.vclip figcaption { padding: 14px 2px 0; }
.vclip figcaption b { display: block; color: var(--c-white); font-size: .98rem; margin-bottom: 4px; }
.vclip figcaption span { display: block; font-size: .88rem; color: var(--c-text); }
@media (prefers-reduced-motion: reduce) {
	.vclip__frame, .vclip__play { transition: none; }
	.vclip__frame:hover .vclip__play { transform: none; }
}

/* ================= Spec tables ================= */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.spec-table {
	width: 100%; border-collapse: collapse; font-size: .94rem;
	background: rgba(255, 255, 255, .022);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm); overflow: hidden;
	min-width: 560px;
}
.spec-table caption {
	caption-side: top; text-align: left; font-size: .85rem;
	color: var(--c-text-dim); padding: 0 2px 10px;
}
.spec-table th, .spec-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--c-line-soft); }
.spec-table thead th {
	background: rgba(43, 179, 192, .13); color: var(--c-accent-lite);
	font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
	border-bottom: 1px solid var(--c-hairline); font-weight: 800;
}
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover td, .spec-table tbody tr:hover th { background: rgba(255,255,255,.03); }
.spec-table tbody th { font-weight: 600; color: #d7e6ec; width: 34%; }
.spec-table td.num { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }
.spec-table tr.is-key td, .spec-table tr.is-key th { background: rgba(43, 179, 192, .10); }
.spec-table tr.is-key td.num { color: var(--c-accent-lite); font-weight: 800; }
.spec-table .unit { color: var(--c-text-dim); font-weight: 400; font-size: .82rem; }

/* Lab meta strip under tables */
.lab-meta {
	display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px;
	font-size: .84rem; color: var(--c-text-dim);
}
.lab-meta b { color: var(--c-accent); }

/* ================= Process ================= */
.process__item {
	display: grid; grid-template-columns: 92px 1fr; gap: 24px;
	padding: 30px 0; border-bottom: 1px solid var(--c-line); align-items: start;
}
.process__item:last-child { border-bottom: 0; }
.process__num {
	width: 70px; height: 70px; border-radius: 50%;
	background: rgba(43, 179, 192, .10); border: 2px solid var(--c-accent);
	display: grid; place-items: center;
	font-size: 1.3rem; font-weight: 800; color: var(--c-accent);
	box-shadow: 0 0 26px rgba(43,179,192,.20);
}
.process__media img {
	border-radius: var(--radius-sm); border: 1px solid var(--c-line);
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.process--full .process__item { grid-template-columns: 92px 1.15fr .85fr; }
@media (max-width: 800px) {
	.process__item, .process--full .process__item { grid-template-columns: 1fr; gap: 16px; }
	.process__num { width: 54px; height: 54px; font-size: 1.05rem; }
}

/* Compact numbered strip (home) */
.process-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1000px) { .process-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .process-strip { grid-template-columns: repeat(2, 1fr); } }
.pstep {
	background: rgba(255,255,255,.035); border: 1px solid var(--c-line);
	border-radius: var(--radius-sm); padding: 20px 16px;
	transition: border-color .2s ease, transform .2s ease;
}
.pstep:hover { border-color: rgba(43,179,192,.45); transform: translateY(-3px); }
.pstep b { display: block; font-size: .95rem; margin-top: 8px; color: #fff; }
.pstep span { font-size: .74rem; color: var(--c-accent); font-weight: 800; letter-spacing: .14em; }

/* ================= FAQ ================= */
.faq { max-width: 880px; }
.faq details {
	background: rgba(255,255,255,.03); border: 1px solid var(--c-line);
	border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden;
	transition: border-color .2s ease;
}
.faq details[open] { border-color: rgba(43,179,192,.4); }
.faq summary {
	cursor: pointer; list-style: none; display: flex; justify-content: space-between;
	align-items: center; gap: 16px; padding: 19px 24px;
	font-weight: 700; color: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--c-accent); transition: transform .22s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 24px 22px; color: var(--c-text); }

/* ================= Team ================= */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.tcard {
	background: rgba(255,255,255,.03); border: 1px solid var(--c-line);
	border-radius: var(--radius-sm); padding: 22px 16px; text-align: center;
	transition: border-color .2s ease;
}
.tcard:hover { border-color: rgba(43,179,192,.42); }
.tcard__avatar {
	width: 60px; height: 60px; margin: 0 auto 13px; border-radius: 50%;
	background: radial-gradient(circle at 40% 30%, rgba(43,179,192,.5), rgba(43,179,192,.10));
	color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
	border: 1px solid rgba(43,179,192,.35);
}
.tcard b { display: block; color: #fff; font-size: .95rem; }
.tcard span { font-size: .8rem; color: var(--c-text-dim); }

/* ================= Detail info rows ================= */
.detail-rows { border: 1px solid var(--c-line); border-radius: var(--radius-sm); overflow: hidden; }
.detail-rows > div {
	display: grid; grid-template-columns: 240px 1fr; gap: 16px;
	padding: 16px 22px; background: rgba(255,255,255,.02);
}
.detail-rows > div:nth-child(even) { background: rgba(255,255,255,.045); }
.detail-rows b { color: #fff; }
@media (max-width: 580px) { .detail-rows > div { grid-template-columns: 1fr; gap: 3px; } }

/* ================= Feature band (full-bleed photo) ================= */
.band { position: relative; overflow: hidden; isolation: isolate; }
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(4,12,18,.90), rgba(4,12,18,.72) 45%, rgba(4,12,18,.95));
}
.band__inner { padding-block: clamp(80px, 11vw, 140px); text-align: center; max-width: 760px; margin-inline: auto; }
.band__inner p { color: #d3e3ea; }

/* ================= CTA banner ================= */
.cta-banner {
	background:
		radial-gradient(760px 320px at 10% 110%, rgba(43,179,192,.28), transparent 62%),
		linear-gradient(150deg, #10333f 0%, #071820 88%);
	border: 1px solid rgba(43,179,192,.30);
	border-radius: var(--radius); color: #fff;
	padding: clamp(36px, 6vw, 66px);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
	box-shadow: var(--shadow-lg);
}
.cta-banner h2 { color: #fff; margin: 0 0 .3em; }
.cta-banner p { color: var(--c-text); margin: 0; max-width: 50ch; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ================= Blog ================= */
.post-card {
	display: flex; flex-direction: column;
	border-radius: var(--radius); overflow: hidden;
	background: linear-gradient(180deg, var(--c-card), #08181f);
	border: 1px solid var(--c-line);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-5px); border-color: rgba(43,179,192,.42); box-shadow: var(--shadow); }
.post-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #05121a; display: block; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(4,12,18,0) 45%, rgba(4,12,18,.55) 100%);
}
.post-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-card__date { font-size: .74rem; color: var(--c-accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.post-card h3 { font-size: 1.03rem; margin: 0; }
.post-card h3 a { color: #fff; }
.post-card h3 a:hover { color: var(--c-accent); }
.post-card p { color: var(--c-text); font-size: .9rem; margin: 0; flex: 1; }

/* Article body */
.article { max-width: 780px; margin-inline: auto; }
.article-header { padding: clamp(48px, 7vw, 82px) 0 0; }
.article-header .post-card__date { margin-bottom: 12px; display: block; }
.article-body { font-size: 1.06rem; color: var(--c-text); }
.article-body h2 { margin-top: 1.7em; font-size: 1.55rem; }
.article-body h3 { margin-top: 1.4em; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.5em 0; }
.article-body table th, .article-body table td { border: 1px solid var(--c-line); padding: 11px 13px; text-align: left; }
.article-body table thead th { background: rgba(43,179,192,.12); color: var(--c-accent-lite); }
.article-body img { border-radius: var(--radius-sm); }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li { margin-bottom: .5em; }
.article-body blockquote {
	border-left: 3px solid var(--c-accent); margin: 1.5em 0; padding: .5em 0 .5em 1.3em;
	color: #cfe2ea; font-style: italic;
}

/* ================= Gallery ================= */
.gallery-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.gallery-grid img { border-radius: var(--radius-sm); border: 1px solid var(--c-line); width: 100%; }
@media (max-width: 780px) { .gallery-grid { grid-template-columns: 1fr; } }

/* Framed media (used beside body copy) */
.framed {
	border-radius: var(--radius); border: 1px solid var(--c-line);
	overflow: hidden; box-shadow: var(--shadow-lg); position: relative;
}
.framed img { width: 100%; }
.framed__cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, transparent, rgba(4,12,18,.92));
	padding: 26px 20px 18px; color: #fff; font-size: .88rem; font-weight: 700;
}

/* ================= Contact ================= */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 56px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-list .card__icon { width: 46px; height: 46px; margin: 0; flex: none; }
.contact-list b { color: #fff; display: block; font-size: .92rem; }
.contact-list span, .contact-list a { font-size: .95rem; }
.contact-list span { color: var(--c-text); }

.inquiry-form {
	background: linear-gradient(180deg, var(--c-card), #08181f);
	border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow);
}
.inquiry-form label { display: block; font-weight: 700; font-size: .86rem; color: #cfe2ea; margin: 17px 0 6px; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea {
	width: 100%; padding: 13px 15px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	font: inherit; color: #fff; background: rgba(255,255,255,.05);
}
.inquiry-form select option { background: #0d232c; color: #fff; }
.inquiry-form input::placeholder, .inquiry-form textarea::placeholder { color: var(--c-text-dim); }
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus {
	outline: 2px solid var(--c-accent); outline-offset: 0; background: rgba(255,255,255,.08);
}
.inquiry-form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.inquiry-form .note { font-size: .82rem; color: var(--c-text-dim); margin-top: 14px; }

.map-embed {
	border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line);
	margin-top: clamp(32px, 6vw, 56px);
}
.map-embed iframe { display: block; width: 100%; height: 400px; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ================= Footer ================= */
.site-footer {
	position: relative; isolation: isolate;
	color: var(--c-text); font-size: .92rem;
	border-top: 1px solid var(--c-hairline);
	background: #050f15;
}
.site-footer__bg { position: absolute; inset: 0; z-index: -2; opacity: .18; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; }
.site-footer::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(5,15,21,.94), rgba(5,15,21,.98));
}
.site-footer a { color: var(--c-text); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__grid {
	display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.4fr; gap: 32px;
	padding-block: clamp(48px, 6vw, 70px);
}
@media (max-width: 1080px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 680px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 {
	color: var(--c-accent); font-size: .88rem; letter-spacing: .1em;
	text-transform: uppercase; margin-bottom: 18px; padding-bottom: 10px;
	border-bottom: 1px solid var(--c-line); font-weight: 800;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.site-footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; stroke: var(--c-accent); fill: none; stroke-width: 1.8; }
.site-footer__bottom {
	border-top: 1px solid var(--c-line);
	padding-block: 20px; font-size: .8rem; color: var(--c-text-dim);
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}

/* ================= WhatsApp widget ================= */
.wa-widget { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
.wa-widget__btn {
	width: 60px; height: 60px; border-radius: 50%;
	background: var(--c-wa); border: 0; cursor: pointer;
	display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0,0,0,.45);
	transition: transform .16s ease;
}
.wa-widget__btn:hover { transform: scale(1.08); }
.wa-widget__btn svg { width: 32px; height: 32px; fill: #fff; }
.wa-widget__panel {
	position: absolute; right: 0; bottom: 76px; width: 310px;
	background: #0c222c; border: 1px solid var(--c-line);
	border-radius: var(--radius); box-shadow: var(--shadow-lg);
	overflow: hidden; display: none;
}
.wa-widget__panel.is-open { display: block; }
.wa-widget__head { background: rgba(43,179,192,.14); padding: 17px 19px; display: flex; gap: 12px; align-items: center; }
.wa-widget__head .tcard__avatar { width: 42px; height: 42px; margin: 0; font-size: .92rem; }
.wa-widget__head b { display: block; font-size: .95rem; color: #fff; }
.wa-widget__head span { font-size: .77rem; color: var(--c-text-dim); }
.wa-widget__body { padding: 19px; font-size: .9rem; color: var(--c-text); }
.wa-widget__body .btn { width: 100%; margin-top: 15px; }

/* ================= Back-to-top + scroll progress ring =================
   Bottom-LEFT because the WhatsApp widget owns bottom-right and its panel
   opens upward from there. main.js sets --p (0-1); the ring derives its dash
   offset from it, so scrolling only ever writes one custom property. */
.to-top {
	position: fixed; left: 22px; bottom: 22px; z-index: 80;
	width: 52px; height: 52px; padding: 0;
	display: grid; place-items: center;
	border: 1px solid var(--c-line); border-radius: 50%;
	background: rgba(11, 31, 40, .82);
	-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
	color: #fff; cursor: pointer;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
	opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
	transition: opacity .28s ease, transform .28s ease, visibility .28s,
		background .16s ease, border-color .16s ease, color .16s ease;
}
/* Ring and arrow share one grid cell so they stay concentric. */
.to-top > * { grid-area: 1 / 1; }
.to-top.is-vis { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
	background: rgba(43, 179, 192, .18);
	border-color: var(--c-hairline);
	color: var(--c-accent-lite);
}
.to-top:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.to-top__icon { width: 19px; height: 19px; }

.to-top__ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.to-top__ring circle { fill: none; stroke-width: 2.4; }
.to-top__track { stroke: rgba(255, 255, 255, .13); }
.to-top__bar {
	stroke: var(--c-accent); stroke-linecap: round;
	/* The circle carries pathLength="100", so the dash maths is a plain
	   percentage — no 2πr magic number that drifts from Chrome's actual
	   bezier-approximated path length. */
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 * (1 - var(--p, 0)));
	filter: drop-shadow(0 0 5px rgba(43, 179, 192, .55));
}
@media (prefers-reduced-motion: no-preference) {
	.to-top__bar { transition: stroke-dashoffset .12s linear; }
}
@media (max-width: 640px) {
	.to-top { left: 15px; bottom: 15px; width: 46px; height: 46px; }
	.to-top__icon { width: 17px; height: 17px; }
}

/* ================= Page hero (inner pages) ================= */
.page-hero {
	position: relative; isolation: isolate; overflow: hidden;
	padding-block: clamp(70px, 10vw, 130px);
	border-bottom: 1px solid var(--c-hairline);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(800px 380px at 20% 0%, rgba(43,179,192,.20), transparent 66%),
		linear-gradient(180deg, rgba(4,12,18,.88), rgba(4,12,18,.94));
}
.page-hero h1 { color: #fff; margin: 0 0 .35em; }
.page-hero p { color: #cfe2ea; max-width: 64ch; margin: 0; font-size: 1.05rem; }

/* Breadcrumb */
.crumbs { font-size: .82rem; color: var(--c-text-dim); margin-bottom: 16px; }
.crumbs a { color: var(--c-text-dim); }
.crumbs a:hover { color: var(--c-accent); }
.crumbs span { margin-inline: 8px; opacity: .5; }

/* Anchor sub-nav on long pages */
.subnav {
	background: rgba(8, 25, 33, .95); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--c-line);
	position: sticky; top: 78px; z-index: 40;
}
.subnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 9px 0; overflow-x: auto; }
.subnav a {
	display: block; white-space: nowrap; padding: 9px 16px; border-radius: 999px;
	font-size: .87rem; font-weight: 600; color: var(--c-text-dim);
}
.subnav a:hover { background: rgba(43,179,192,.14); color: var(--c-accent); }

/* ================= Scroll reveal ================= */
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
	.reveal.is-in { opacity: 1; transform: none; }

	/* Attribute tiles fade in one after another rather than as a slab — eight
	   cards appearing at once reads as a repaint glitch. The delay is on
	   `opacity` only, never on `transform`: transform is what the hover lift
	   uses, and a card seven places along would otherwise take 420ms to
	   respond to the pointer. */
	.glow-grid.reveal .gcard { opacity: 0; }
	.glow-grid.reveal.is-in .gcard {
		opacity: 1;
		transition: opacity .55s ease calc(var(--i, 0) * 60ms),
			transform .24s ease, border-color .24s ease, box-shadow .24s ease;
	}
}

/* ================= Utilities ================= */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.stack-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.stack-cta--center { justify-content: center; }
.muted { color: var(--c-text-dim); font-size: .88rem; }
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; overflow: hidden; position: absolute;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-accent); color: #04161c; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 0; }

/* Two-column text/media block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.split--wide-left { grid-template-columns: 1.15fr .85fr; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 900px) { .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; } }

/* Pagination */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.pagination .page-numbers {
	padding: 10px 16px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	font-weight: 600; font-size: .9rem; color: var(--c-text);
}
.pagination a.page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination .current { background: var(--c-accent); color: #04161c; border-color: var(--c-accent); }