/*
Theme Name: WanTok New
Theme URI: https://wantok.to
Author: WanTok
Author URI: https://wantok.to
Description: A modern, responsive WordPress theme for WanTok — Simple. Reliable. Affordable. Built for the Kingdom of Tonga's leading ICT provider.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: wantok-new
Tags: custom-logo, custom-menu, featured-images, responsive-layout, translation-ready
*/

/* =====================================================================
   WanTok Refresh — theme stylesheet
   Brand: the original ocean cyan/blue/purple gradient on a white canvas —
   restored per request after a brief tapa-cream/brown experiment. Tongan
   ngatu (tapa cloth) design is still present, but expressed as SHAPE
   rather than a colour swap: a zigzag "kupesi" stamp mark before every
   section eyebrow, a real recoloured kupesi motif band under the hero,
   and sharp/graphic radii (rather than soft rounded-app defaults) —
   all rendered in the company's own cyan/blue/purple, not earth tones.
   Type: Space Grotesk (display) + Inter (body).
   ===================================================================== */

:root {
	/* Brand — restored to the original cyan/blue/purple/navy set. */
	--wt-cyan: #13b6e6;
	--wt-blue: #1170d6;
	--wt-blue-deep: #0a4fa6;
	--wt-purple: #7a39bb;
	--wt-purple-deep: #5a23a0;
	--wt-navy: #0c1330;
	--wt-navy-2: #131c44;

	/* Surfaces — back to white/cool blue-white, not tapa-cream. */
	--wt-bg: #ffffff;
	--wt-surface: #f5f8fc;
	--wt-surface-2: #eef3fa;
	--wt-border: #dde5f0;

	/* Text */
	--wt-ink: #131a2b;
	--wt-ink-2: #45506a;
	--wt-ink-3: #6b7690;
	--wt-on-dark: #f3f6fc;
	--wt-on-dark-2: #aab6d4;

	/* Gradient — cyan → blue → purple, the company's own colours. */
	--wt-grad: linear-gradient(120deg, var(--wt-cyan) 0%, var(--wt-blue) 45%, var(--wt-purple) 100%);
	--wt-grad-soft: linear-gradient(120deg, rgba(19,182,230,0.12), rgba(122,57,187,0.12));
	/* Flattened back to solid navy (16 July, later the same day) — Soana
	   asked for the page banner ("header") and closing CTA band ("footer")
	   to both go back to plain navy instead of the gradient added earlier
	   today. Kept as its own variable (rather than replacing every
	   --wt-navy-grad reference with --wt-navy directly) so both spots stay
	   wired to one source of truth if a gradient's ever wanted again. */
	--wt-navy-grad: var(--wt-navy);

	/* Type */
	--wt-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--wt-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Layout — smaller radii than the old soft-app defaults, closer to a
	   printed panel than a rounded card. Kept from the tapa pass — this is
	   shape language, not colour, and pairs with the kupesi motif below. */
	--wt-maxw: 1180px;
	--wt-radius: 6px;
	--wt-radius-sm: 4px;
	--wt-shadow: 0 1px 2px rgba(12,19,48,0.06), 0 8px 24px rgba(12,19,48,0.07);
	--wt-shadow-lg: 0 18px 48px rgba(12,19,48,0.14);

	--wt-space: 1rem;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden here (not on body, to avoid any risk of interfering
   with the sticky header below) clips a real layout bug: the "Services"
   nav dropdown (.mega-menu) and the partner-logo marquee are both wider
   than the viewport by design (a hidden-until-hover dropdown, and a
   duplicated-content infinite-scroll strip) but nothing was clipping
   that width at the document level, so the whole page's scrollable area
   silently extended past the viewport edge — invisible during normal
   browsing, but it showed up as blank canvas on the right of a full-page
   screenshot, and could cause a stray horizontal scrollbar. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Reveal-on-scroll ----------
   15 July: theme.js already had a complete IntersectionObserver-driven
   reveal system (targets [data-reveal], .service-card, .plan-card,
   .news-card, .why-list li — see "Reveal-on-scroll" in theme.js) — it
   adds .reveal-init then .is-visible, with a reduced-motion bypass and a
   2.5s safety net so nothing gets stuck invisible if the observer never
   fires. What was missing was this half: the actual hidden/visible look.
   Kept deliberately restrained — a short rise + fade, not a bounce or a
   slide from the side, and unobserved after the first reveal so it's a
   one-time entrance, not something that replays every time you scroll
   past a section. data-reveal was also added to each section's header
   block and the CTA band content, so headers ease in as one block just
   before their cards cascade in individually right after. */
.reveal-init {
	opacity: 0; transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-init.is-visible { opacity: 1; transform: none; }
body {
	margin: 0;
	font-family: var(--wt-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wt-ink);
	background: var(--wt-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--wt-blue); text-decoration: none; }
a:hover { color: var(--wt-purple); }
/* Scoped to "body.wp-theme-wantok-new" (a class WordPress adds to every
   page automatically for the active theme) rather than a bare tag
   selector — Elementor's global "Kit" stylesheet ships its own
   `.elementor-kit-1 h1`/`h2`/`h3`/`h4`/`h5`/`h6` rules (font-family:
   Nexa, and for h1 specifically a flat font-size:40px/font-weight:900
   too), and a plain `h1, h2, h3, h4` selector has lower CSS specificity
   than that, so it was silently losing — every heading site-wide was
   quietly rendering in the wrong typeface (discovered 15 July while
   chasing why the hero title wouldn't get bigger no matter what value
   was set — it wasn't a sizing bug, the value was being overridden
   outright). This selector is one specificity tier higher so it wins
   regardless of stylesheet load order. */
body.wp-theme-wantok-new h1, body.wp-theme-wantok-new h2, body.wp-theme-wantok-new h3, body.wp-theme-wantok-new h4 { font-family: var(--wt-font-display); line-height: 1.15; color: var(--wt-ink); margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--wt-blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--wt-navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
	font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--wt-maxw); margin: 0 auto; padding: 0 22px; }
.content-area { padding-top: 48px; padding-bottom: 64px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	font-family: var(--wt-font-display); font-weight: 600; font-size: 0.98rem;
	padding: 0.72em 1.4em; border-radius: 8px; border: 2px solid transparent;
	cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
	text-align: center; line-height: 1.1;
}
.btn:hover { transform: translateY(-1px); }
/* Round 27 (14 July) — the cyan/blue/purple gradient dropped in favour of
   plain navy, so nothing on the homepage still uses the old brand
   gradient (matches the monochrome-navy language the rest of the page
   settled on this session). */
.btn-primary { background: var(--wt-navy); color: #fff; box-shadow: 0 6px 18px rgba(12,19,48,0.35); }
.btn-primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(12,19,48,0.4); }
.btn-outline { background: #fff; color: var(--wt-blue-deep); border-color: var(--wt-border); }
.btn-outline:hover { color: var(--wt-purple); border-color: var(--wt-purple); }
.btn-ghost { background: transparent; color: var(--wt-blue-deep); border-color: transparent; }
.btn-ghost:hover { color: var(--wt-purple); }
.btn-light { background: #fff; color: var(--wt-navy); }
.btn-light:hover { color: var(--wt-purple-deep); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost-light:hover { color: #fff; border-color: #fff; }
/* Added 16 July for inner-page closing CTAs (starting with Support), per a
   reference design the client liked — a rounded pill filled with the brand
   gradient, for one primary action to stand out against a navy CTA band.
   This doesn't reverse Round 27's move away from the gradient on the
   homepage's own buttons above; it's a deliberate, separate accent used
   sparingly on inner pages only. */
.btn-gradient { background: var(--wt-grad); color: #fff; border-radius: 999px; box-shadow: 0 10px 26px rgba(90,35,160,0.35); }
.btn-gradient:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 14px 32px rgba(90,35,160,0.42); }

/* ---------- Utility bar ---------- */
.utility-bar { background: var(--wt-navy); color: var(--wt-on-dark); font-size: 0.86rem; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; flex-wrap: wrap; }
.utility-contact { display: flex; gap: 1.25rem; list-style: none; flex-wrap: wrap; }
.utility-contact a { color: var(--wt-on-dark); display: inline-flex; align-items: center; gap: 0.4em; }
.utility-contact a:hover { color: var(--wt-cyan); }
.util-ico { opacity: 0.85; }
.utility-actions { display: flex; align-items: center; gap: 1rem; }
.util-portal {
	color: #fff; font-weight: 600; background: rgba(255,255,255,0.08);
	padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
}
.util-portal:hover { color: #fff; background: rgba(19,182,230,0.25); border-color: var(--wt-cyan); }
.utility-social { display: flex; gap: 0.4rem; list-style: none; }
.utility-social a {
	display: inline-grid; place-items: center; width: 26px; height: 26px;
	border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--wt-on-dark);
	font-size: 0.72rem; font-weight: 700; text-transform: lowercase;
}
/* Lighter navy rather than flat var(--wt-navy) — the bar itself is
   already navy, so a same-navy hover fill would be invisible. */
.utility-social a:hover { background: #3d4f96; color: #fff; }

/* ---------- Header ----------
   Navy by default everywhere — same var(--wt-navy) as .utility-bar right
   above it, and no border between them, so the two read as one seamless
   navy band instead of a dark strip stacked on a separate white bar
   (this was a deliberate change on 8 July: the previous solid-white
   header looked like two different-coloured bars stacked together). The
   one exception is .hero-overlay on the homepage, which starts fully
   transparent over the hero photo and only becomes this same navy once
   .is-scrolled fires (see theme.js) — text/logo colours don't need to
   change between the transparent and solid states, since both sit on a
   dark background either way; only the background itself toggles. */
.site-header {
	position: sticky; top: 0; z-index: 100; background: var(--wt-navy);
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: var(--wt-shadow-lg); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.site-branding { flex: 0 0 auto; }
.brand-wordmark { display: inline-flex; align-items: center; }
.custom-logo { max-height: 46px; width: auto; }
.custom-logo-link { display: inline-flex; align-items: center; }

/* Real logo (assets/images/wantok-logo-{white,navy}.png) — updated 15 July
   to the fuller lockup with the "Simple. Reliable. Affordable." tagline
   baked in under the wordmark, replacing the wordmark-only crop. The
   header is navy in every state now, so the white mark is simply the
   default — the navy copy is kept only in case a future light-background
   header variant is wanted, but nothing currently shows it. Height bumped
   34px→46px from the wordmark-only version so the tagline line stays
   legible at nav-bar scale. */
.wantok-logo-swap { position: relative; display: inline-block; height: 46px; }
.wantok-logo-swap .wantok-logo { display: block; height: 46px; width: auto; transition: opacity 0.25s ease; }
.wantok-logo-swap .wantok-logo-dark { position: absolute; inset: 0; opacity: 0; }
.wantok-logo-swap .wantok-logo-light { opacity: 1; }
/* Footer has real vertical room, so its copy of the same lockup can run
   larger — the tagline should be comfortably readable here, not just
   present. */
.footer-logo .wantok-logo-swap { height: 64px; }
.footer-logo .wantok-logo-swap .wantok-logo { height: 64px; }

/* Homepage-only: the header starts transparent, floating directly over
   the hero photo (the hero is pulled up underneath it via a matching
   negative margin in front-page.php's "front-main hero-overlay-page"
   wrapper) instead of sitting above it as a separate bar. The threshold
   for .is-scrolled is set in theme.js based on the hero's own height,
   not the default 8px scroll-shadow trigger, so it stays transparent
   through the hero and only goes navy once scrolled past it. Inner
   pages never get .hero-overlay, so their header is navy from the start. */
.site-header.hero-overlay { background: transparent; }
.site-header.hero-overlay.is-scrolled { background: var(--wt-navy); box-shadow: var(--wt-shadow-lg); }

.main-navigation { margin-left: auto; }
.nav-menu { display: flex; align-items: center; gap: 0.35rem; list-style: none; }
.nav-menu a {
	display: inline-block; padding: 0.55rem 0.85rem; border-radius: 8px;
	font-weight: 500; color: var(--wt-on-dark); font-size: 0.98rem;
}
.nav-menu a:hover, .nav-menu .current-menu-item > a { color: #fff; background: rgba(255,255,255,0.14); }
.nav-menu .current-menu-item > a { box-shadow: inset 0 -2px 0 #fff; }

/* Dropdowns */
.nav-menu li { position: relative; }
.nav-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--wt-bg);
	border: 1px solid var(--wt-border); border-radius: var(--wt-radius-sm);
	box-shadow: var(--wt-shadow-lg); padding: 8px; list-style: none;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu,
.nav-menu li.submenu-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .sub-menu a { display: block; padding: 0.5rem 0.7rem; font-size: 0.93rem; }
.submenu-toggle { display: none; }

/* Mega menu (Services) — grouped columns instead of one long list */
.nav-menu .mega-menu {
	position: absolute; top: 100%; left: 0; width: 640px; background: var(--wt-bg);
	border: 1px solid var(--wt-border); border-radius: var(--wt-radius-sm);
	box-shadow: var(--wt-shadow-lg); padding: 20px 22px; z-index: 50;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-menu li:hover > .mega-menu,
.nav-menu li:focus-within > .mega-menu,
.nav-menu li.submenu-open > .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-col { padding: 0 16px; border-left: 1px solid var(--wt-border); }
.mega-col:first-child { padding-left: 0; border-left: none; }
.mega-col:last-child { padding-right: 0; }
.mega-col-title {
	display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--wt-purple); margin-bottom: 0.6rem;
}
.mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.mega-col li a {
	display: block; padding: 0.35rem 0.5rem; margin: 0 -0.5rem; border-radius: 8px;
	font-size: 0.88rem; font-weight: 500; color: var(--wt-ink); line-height: 1.35;
}
.mega-col li a:hover { color: var(--wt-blue); background: var(--wt-surface); }
.mega-col li a span[aria-hidden] { opacity: 0.6; font-size: 0.85em; margin-left: 1px; }
.mega-item-disabled {
	display: inline-block; padding: 0.35rem 0.5rem; margin: 0 -0.5rem;
	font-size: 0.88rem; font-weight: 500; color: var(--wt-ink-3); line-height: 1.35; cursor: default;
}
.mega-badge {
	display: inline-block; margin-left: 0.4rem; padding: 2px 8px; border-radius: 999px;
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	color: #fff; background: var(--wt-purple); vertical-align: 1px;
}
.submenu-toggle { display: none; }

.menu-toggle {
	display: none; align-items: center; justify-content: center; width: 44px; height: 40px;
	margin-left: auto; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
	border-radius: 10px; cursor: pointer;
}
.menu-toggle-bars { display: grid; gap: 4px; }
.menu-toggle-bars span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-open .menu-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .menu-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ----------
   Full-bleed cover hero: the carousel images sit as an absolutely-
   positioned background layer spanning the whole section, a dark scrim
   sits above them for text contrast, and the copy is left-aligned on
   top — the header stays a normal solid bar above this section. */
.hero-overlay-page .hero {
	/* Pulls the hero up to close the gap the (now-transparent) header would
	   normally occupy, so the header floats directly on the photo instead
	   of sitting above it. Matches .header-inner's min-height (72px). The
	   header itself keeps its normal sticky flow/height — this is purely a
	   visual overlap via z-index (.site-header is z-index:100, well above
	   the hero's own stacking), not an absolute-positioning hack. */
	margin-top: -72px;
}
.hero {
	position: relative; overflow: hidden; display: flex; align-items: center;
	min-height: min(88vh, 760px); color: var(--wt-on-dark);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--wt-navy); }

/* Hero carousel — calmed down 14 July at Soana's request ("minimal, not
   overbearing"). This used to be a jagged kupesi-zigzag clip-path wipe
   plus a light streak sweeping the seam; both are gone now. Once each
   slide carried its own real copy (not one shared heading), that fast,
   busy transition was one motion too many on top of the text changing —
   so the whole thing steps down to a single plain opacity crossfade, and
   the only other movement left is a very slow, subtle zoom (ambient, not
   an "event" — nothing to notice happening, just a photo that feels
   alive) that settles right as the slide's turn ends. JS only ever
   toggles .is-active — no clip-path interpolation, no separate sweep
   element, no wipe timer to babysit. Falls back to the first slide only
   if JS never runs; the zoom is dropped entirely under reduced motion. */
.hero-carousel { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-carousel-slide {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 1;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1.4s ease, transform 7s linear;
}
.hero-carousel-slide.is-active { opacity: 1; z-index: 2; transform: scale(1); }
.hero-scrim {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		/* Top blend (14 July): fades the utility-bar/nav's solid navy down
		   into the carousel photo, so the transparent header doesn't cut
		   hard against the image — the hero now reads as emerging from
		   behind the navy bar rather than starting abruptly beneath it. */
		linear-gradient(180deg, rgba(12,19,48,0.92) 0%, rgba(12,19,48,0.55) 8%, rgba(12,19,48,0) 20%),
		linear-gradient(100deg, rgba(6,10,26,0.90) 0%, rgba(6,10,26,0.72) 30%, rgba(6,10,26,0.32) 56%, rgba(6,10,26,0.08) 76%),
		/* Bottom floor (14 July, hardened for the on-photo trust ribbon):
		   deeper than the old 0.55 flat stop so the ribbon's text has a
		   guaranteed dark floor to sit on across all 3 slides, not just
		   whichever one happens to be dim there already. Mirrors the top
		   blend above — the hero now has a deliberate top-and-bottom
		   vignette bookending the photo instead of one-off patchwork. */
		linear-gradient(0deg, rgba(6,10,26,0.85) 0%, rgba(6,10,26,0.5) 16%, transparent 36%);
}
.hero-carousel-dots {
	/* 14 July: moved from horizontal/bottom-center to a vertical rail on
	   the left edge, based on a reference the user brought — this also
	   frees the bottom edge entirely now that the trust strip no longer
	   floats over it. .hero-copy-stack picks up a matching left offset
	   below so the text clears this rail instead of sitting under it. */
	position: absolute; z-index: 3; left: 26px; top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero-carousel-dots::before {
	/* Hairline rail behind the dots (14 July) — without it the three dots
	   read as loose marks floating in the photo; the line ties them into
	   one component (a track you move a position along), which is the
	   difference between "we moved the dots" and "this is how the
	   carousel works." Sized to the dot stack's own height/width via
	   inset:0 so it never needs separate tuning when a slide is added. */
	content: ""; position: absolute; inset: 0; margin: auto;
	background: rgba(255,255,255,0.32);
	width: 1px;
}
.hero-carousel-dot {
	/* A real <button> now (was a decorative <span>) — clickable/focusable
	   so a user can jump straight to a slide, see theme.js goTo(). Padding
	   pads out the hit target well past the small visible dot itself. */
	appearance: none; border: none; background: transparent; margin: 0;
	padding: 8px; display: flex; align-items: center; justify-content: center;
	cursor: pointer; border-radius: 50%;
}
.hero-carousel-dot::before {
	content: ""; display: block; width: 8px; height: 8px; border-radius: 50%;
	background: rgba(255,255,255,0.4); box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
	transition: background 0.3s ease, transform 0.3s ease;
}
.hero-carousel-dot:hover::before { background: rgba(255,255,255,0.7); }
.hero-carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-carousel-dot.is-active::before { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
	.hero-carousel-slide {
		transform: none !important;
		transition: opacity 0.4s linear;
	}
	.hero-carousel-slide.is-active { opacity: 1; }
}

/* Real kupesi (tapa stencil) artwork — a genuine 3-diamond ngatu motif,
   recoloured from its source red to the company's own brand purple and
   trimmed tip-to-tip so it tiles seamlessly (assets/images/kupesi-band.png).
   NOT currently used anywhere in the markup — it sat as a divider strip
   right under the hero, which the user didn't like there, so it's been
   pulled out (see PROJECT-NOTES.md). Left defined here, unused, in case
   it's wanted for a different spot later (Partners ribbon border and a
   faint Why WanTok watermark have both been floated previously). */
.tapa-band {
	height: 46px; width: 100%;
	background-color: var(--wt-bg);
	background-image: url("assets/images/kupesi-band.png");
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
	box-shadow: 0 -1px 0 rgba(12,19,48,0.12);
}

.hero-inner { position: relative; z-index: 3; padding: 120px 22px; width: 100%; }
/* Per-slide copy (14 July): each slide now has its own eyebrow/title
   instead of one static block shared across all 4 — text changes along
   with the photo, in sync with theme.js goTo(). Stacked absolutely (like
   the carousel images themselves) rather than swapping text in place, so
   the outgoing and incoming copy crossfade instead of jump-cutting.
   min-height on the stack reserves room for the tallest slide's copy so
   switching slides doesn't visibly resize/jiggle the block. Re-measured
   15 July after the lead paragraph was dropped — the old 320px value was
   sized for eyebrow+title+paragraph and left a dead gap above the CTA
   buttons once the paragraph was cut (worse on 2-line titles like slide
   1's than on 3-line ones). Tallest slide (a 3-line title) now measures
   ~260px; bumped to 264px for a little rounding room. margin-left clears
   the left-hand dot rail. */
/* --hero-title-fs drives the title's font-size AND (below) the copy
   block's width and reserved height, all from one source of truth. Fixed
   px values for the container width and reserved height fell out of sync
   with the font at viewport widths between the mobile and "wide desktop"
   breakpoints — a smaller scaled-down font sitting inside a box sized
   for the biggest font left a large dead gap above the buttons on
   in-between/laptop-width screens (15 July, reported as "small and
   awkward" with a big gap to the buttons). Tying width/height to the same
   variable that drives the font means every screen size scales together. */
.hero-copy-stack {
	--hero-title-fs: clamp(3.6rem, 8.5vw, 6.4rem);
	position: relative; margin-left: 64px;
	/* 3 lines at 1.2 line-height, plus eyebrow + the two margins below it. */
	min-height: calc(var(--hero-title-fs) * 3.6 + 3.2rem);
}
.hero-copy {
	/* Slowed from 0.45s to match the calmer photo crossfade above (14
	   July) — the text and the photo now settle at roughly the same
	   pace instead of the words snapping in noticeably faster. Width is
	   set on .hero-title itself (below) in em, not here in px, so it
	   scales with the title's own font-size instead of drifting out of
	   proportion with it at in-between viewport widths. */
	position: absolute; top: 0; left: 0; right: 0;
	opacity: 0; pointer-events: none; transition: opacity 1s ease;
}
.hero-copy.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
	.hero-copy { transition: none; }
}
.hero-eyebrow {
	font-family: var(--wt-font-display); font-weight: 600; letter-spacing: 0.04em;
	text-transform: uppercase; font-size: 0.86rem; color: var(--wt-cyan);
	margin-bottom: 0.65rem;
}
/* Bumped three times on 15 July chasing "still too small" feedback before
   finding the actual cause: Elementor's global Kit CSS ships
   `.elementor-kit-1 h1 { font-size: 40px; font-weight: 900; }`, which has
   higher specificity than a plain `.hero-title` class selector, so it was
   silently overriding every size change made here regardless of the
   value. Scoped to "body.wp-theme-wantok-new" (see the h1-h4 rule near
   the top of this file) so it actually wins. 9.15em max-width keeps
   roughly the same wrap point at every size since it scales with this
   same font-size. Margins on the eyebrow/title/buttons stay tightened so
   the block reads as one group. */
body.wp-theme-wantok-new .hero-title { font-size: var(--hero-title-fs); font-weight: 700; max-width: 9.15em; margin-bottom: 0.85rem; color: #fff; }
.hero-actions {
	/* A sibling of .hero-copy-stack, not nested inside each slide's
	   .hero-copy, with its own top margin — no lead paragraph sits
	   between title and buttons any more (dropped 15 July), but the
	   stack's height is still driven by the tallest title, so this stays
	   independent rather than relying on inherited spacing. Shares
	   .hero-copy-stack's 64px left offset (15 July fix) so the buttons
	   line up under the headline instead of under the logo/container
	   edge above — before this they only matched the dot rail's margin
	   by coincidence and drifted out of line with the title. Margin-top
	   tightened from 1.8rem (15 July) to sit closer under the title. */
	display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; margin-left: 64px;
}

/* Page media — the illustrated brand imagery used inline on inner pages
   (not the homepage hero, which is the full-bleed carousel above). A
   gentle hover "rollover" (scale) is the only interaction. */
.richtext-media {
	position: relative; border-radius: var(--wt-radius); overflow: hidden;
	box-shadow: var(--wt-shadow-lg); aspect-ratio: 4 / 3; width: 100%;
}
.richtext-media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s ease;
}
.richtext-media:hover img { transform: scale(1.045); }
.richtext-media--contain { background: var(--wt-surface); }
.richtext-media--contain img { object-fit: contain; padding: 18px; }

/* ---------- Trust strip ----------
   14 July, round 10: after trying a centred headline+paragraph intro
   (round 7) and then a split-head layout matching Why WanTok (round 9),
   Soana didn't like either once she saw them live and asked to drop any
   heading entirely — just the stat row, straight after the hero, with
   plain white space above and below from this section's own padding
   (no bespoke intro markup left to remove padding rules for). The
   closing "See what's included" text link (round 9) is gone too — this
   section makes its case with the stat row alone now, no CTA of its
   own. Round 8's change stands: icons are one colour (navy), not
   cycled — bare strokes in a single row read as noise with 4 hues,
   unlike Services' cards where each icon sits in its own coloured
   badge. */
.trust-strip { background: var(--wt-navy); padding: 44px 0 48px; }
.trust-inline-list {
	display: grid; grid-template-columns: repeat(4, 1fr); list-style: none;
	margin: 0; padding: 0;
}
.trust-inline-item {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	gap: 10px; padding: 0 2rem;
}
.trust-inline-item:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.18); }
.trust-inline-icon { flex: none; color: rgba(255,255,255,0.55); }
.trust-inline-text { display: flex; flex-direction: column; gap: 4px; }
.trust-inline-label {
	font-family: var(--wt-font-display); font-weight: 700; font-size: 1.32rem;
	letter-spacing: -0.01em; color: #fff; white-space: nowrap;
}
.trust-inline-detail { font-size: 0.85rem; color: rgba(255,255,255,0.62); white-space: nowrap; }

/* ---------- Section heads ----------
   Used to carry a small purple zigzag "kupesi" mark before every eyebrow
   (a nod to the carved stencils used to stamp triangle/diamond borders
   onto ngatu/tapa cloth). Removed everywhere 14 July — Soana didn't like
   it on Why WanTok specifically ("makes no sense", plus it broke the
   monochrome direction the rest of the page has been moving toward all
   session) and since it was the exact same mark on every section
   (Services/Plans/Partners/News too), it came out site-wide rather than
   leaving Why WanTok as the one section without it. */
.section-head { max-width: 720px; margin: 0 auto 2.8rem; text-align: center; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; max-width: none; text-align: left; gap: 1rem; flex-wrap: wrap; }
.section-eyebrow {
	font-family: var(--wt-font-display); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
	font-size: 0.82rem; color: var(--wt-blue); margin-bottom: 0.7rem;
	display: inline-flex; align-items: center; gap: 0.55em;
}
.section-head-row .section-eyebrow, .section-head-row .section-title { display: block; }
.section-head-row .section-eyebrow { display: inline-flex; }
.section-title { font-size: clamp(2rem, 3.8vw, 2.9rem); letter-spacing: -0.015em; line-height: 1.08; }
.section-intro { color: var(--wt-ink-2); font-size: 1.08rem; }

/* ---------- Services ----------
   Round 15 (14 July) — Soana shared a clean 3x2 reference (icon, bold
   title, quiet description, small "learn more" link, all bare — no card
   shell, no coloured badges) and asked for it plus two new services
   (Solar Energy, Utility Management System). 6 services now, laid out
   3 columns x 2 rows to match the reference exactly. No background, no
   padding box, no shadow — just icon-over-text sitting directly on the
   page, same monochrome-navy icon treatment as the trust strip. */
.services { padding: 100px 0 108px; background: var(--wt-surface); }
/* Round 20 (14 July) — flat left-to-right row instead of a centred,
   stacked title+subtitle+intro block (that read as "towering" over the
   grid below it). Body copy on the left, a vertical divider, then the
   title+subheading on the right — same navy pair as Why WanTok's
   title/subtitle, just arranged horizontally instead of on top of the
   body copy. */
.services-head {
	display: flex; align-items: center; gap: 2.6rem;
	max-width: none; margin: 0 0 2.8rem; text-align: left;
}
.services-body { flex: 1 1 380px; margin: 0; }
.services-divider { width: 1px; align-self: stretch; background: var(--wt-border); flex: none; }
.services-heading { flex: 1 1 380px; }
/* Boosted specificity — the general body.wp-theme-wantok-new h1-h4 rule
   above (added 15 July to beat Elementor's global Kit CSS) has higher
   specificity than a plain single class, so it was overriding this back
   to the default dark ink color. Same fix applied to every other title/
   heading override below that hit the same regression. */
body.wp-theme-wantok-new .services-title { color: #1c2c68; margin-bottom: 0.4rem; }
.services-subtitle {
	font-family: var(--wt-font-display); font-weight: 600; font-size: 1.3rem;
	color: #3d4f96; letter-spacing: -0.005em; margin: 0;
}
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.6rem; list-style: none; }
.service-card { display: flex; flex-direction: column; align-items: flex-start; }
.service-icon {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--wt-bg); color: var(--wt-navy); margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(28,44,104,0.08);
}
.service-title { font-size: 1.12rem; margin-bottom: 0.45rem; letter-spacing: -0.01em; }
.service-desc { color: var(--wt-ink-2); font-size: 0.94rem; margin-bottom: 0.9rem; line-height: 1.5; }
.service-link {
	font-weight: 600; font-family: var(--wt-font-display); font-size: 0.9rem;
	color: var(--wt-blue); display: inline-flex; align-items: center; gap: 0.4em;
	padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease;
}
.service-link span { transition: transform 0.18s ease; }
.service-link:hover { color: #1c2c68; border-color: currentColor; }
.service-link:hover span { transform: translateX(3px); }

/* ---------- Plans ----------
   3 cards on the plain white page canvas — the two side plans are told
   apart only by a quiet --wt-surface tint (no border, no default shadow),
   and the featured "Business Connect" card is filled with the brand
   gradient itself, so the one plan we want to sell hardest is also the
   one place this row breaks into full colour. */
.plans { padding: 80px 0; background: var(--wt-bg); }
/* Round 21 (14 July) — same flat row header as Services (Option A):
   heading left, divider, intro right, same navy title/subtitle pair. */
.plans-head {
	display: flex; align-items: center; gap: 2.6rem;
	max-width: none; margin: 0 0 2.8rem; text-align: left;
}
.plans-heading { flex: 1 1 200px; }
.plans-divider { width: 1px; align-self: stretch; background: var(--wt-border); flex: none; }
.plans-body { flex: 1 1 380px; margin: 0; }
body.wp-theme-wantok-new .plans-title { color: #1c2c68; margin-bottom: 0.4rem; }
.plans-subtitle {
	font-family: var(--wt-font-display); font-weight: 600; font-size: 1.3rem;
	color: #3d4f96; letter-spacing: -0.005em; margin: 0;
}
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 1.3rem; }
.plan-card {
	background: var(--wt-surface); border-radius: 6px; box-shadow: none;
	padding: 36px 30px; display: flex; flex-direction: column; position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow-lg); }
/* Round 27 (14 July) — gradient dropped for plain navy (matches the
   monochrome direction elsewhere on the homepage). The flag badge uses
   the lighter navy shade so it still reads clearly against the now-navy
   card sitting right behind it. */
.plan-featured {
	background: var(--wt-navy); border-color: transparent; color: var(--wt-on-dark);
	box-shadow: 0 24px 48px -16px rgba(12,19,48,0.35);
}
.plan-flag {
	position: absolute; top: -13px; left: 26px; background: #3d4f96; color: #fff;
	font-family: var(--wt-font-display); font-weight: 600; font-size: 0.78rem;
	padding: 5px 12px; border-radius: 999px;
}
.plan-name { font-size: 1.4rem; margin-bottom: 0.2rem; letter-spacing: -0.01em; }
.plan-featured .plan-name { color: #fff; }
.plan-for { color: var(--wt-ink-3); font-size: 0.92rem; margin-bottom: 1.1rem; }
.plan-featured .plan-for { color: rgba(255,255,255,0.82); }
.plan-points { list-style: none; margin-bottom: 1.6rem; display: grid; gap: 0.6rem; }
.plan-points li { position: relative; padding-left: 1.7rem; color: var(--wt-ink-2); font-size: 0.98rem; }
.plan-featured .plan-points li { color: rgba(255,255,255,0.88); }
.plan-points li::before {
	content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 7px;
	border-left: 2px solid var(--wt-blue); border-bottom: 2px solid var(--wt-blue);
	transform: rotate(-45deg);
}
.plan-featured .plan-points li::before { border-color: #fff; }
.plan-card .btn { margin-top: auto; }
.plan-featured .btn-primary { background: #fff; color: var(--wt-navy); box-shadow: none; }

/* ---------- Why WanTok ----------
   Round 26 (14 July) — restructured to match Services/Plans/News' flat
   header row (heading left, divider, intro right) followed by full-width
   content below, instead of the old side-by-side text-vs-cards two-column
   layout that spent 5+ rounds fighting a height-mismatch problem (two
   independently-sized blocks next to each other only look right when
   their heights happen to match). Stacking the cards below the header
   instead of beside it removes that problem entirely and brings this
   section in line with the rest of the page. Cards are a horizontal row
   now, same navy fill as before (the one deliberate colour break from
   Services' monochrome-icon cards — a plain solid card, not a return to
   the cyan/blue/purple cycle), sized generously again since they're no
   longer competing with the text column for vertical space. */
.why { padding: 88px 0 96px; background: var(--wt-bg); }
.why-head {
	display: flex; align-items: center; gap: 2.6rem;
	max-width: none; margin: 0 0 2.8rem; text-align: left;
}
.why-heading { flex: 1 1 200px; }
.why-divider { width: 1px; align-self: stretch; background: var(--wt-border); flex: none; }
.why-body { flex: 1 1 380px; }
/* "Why WanTok?" is the big title itself, with "A technology partner that
   knows Tonga" as a subheading underneath, instead of a small uppercase
   eyebrow above a big title. Recoloured out of the default dark-ink
   heading colour — var(--wt-navy)/--wt-navy-2 (the card fill colours)
   are so dark that as small-area text on white they just read as black,
   not navy, so a lighter, more saturated navy is used here instead while
   staying in the same family as the cards. */
body.wp-theme-wantok-new .why-title {
	font-size: clamp(2.2rem, 4vw, 3.1rem); letter-spacing: -0.015em; line-height: 1.08;
	margin-bottom: 0.4rem; color: #1c2c68;
}
.why-subtitle {
	font-family: var(--wt-font-display); font-weight: 600; font-size: 1.3rem;
	color: #3d4f96; letter-spacing: -0.005em; margin: 0;
}
.why-intro { max-width: none; font-size: 1.1rem; margin-bottom: 0; }
.why-intro-2 { margin-top: 1rem; }
.why-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; list-style: none; margin: 0; }
.why-list li {
	background: var(--wt-navy); color: #fff; border-radius: 8px; box-shadow: none;
	padding: 28px 26px; position: relative; display: flex; flex-direction: column; align-items: flex-start;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.why-list li:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow-lg); }
.why-list .why-icon { color: #fff; }
/* h1-h4's base rule (line ~90) sets color: var(--wt-ink) on every heading
   site-wide — h3 needs an explicit override here or it inherits that
   dark ink colour instead of the card's white, since a direct rule on
   the element itself always wins over inheriting from the parent .why-list
   li, regardless of which has higher specificity. */
.why-list li p { color: rgba(255,255,255,0.78); }
.why-icon { display: block; color: var(--wt-navy); margin-bottom: 14px; }
.why-list h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.4rem; }
.why-list p { margin: 0; color: var(--wt-ink-2); font-size: 0.98rem; }

/* ---------- Partners marquee ----------
   Round 16 (14 July) — no longer its own section between Plans and Latest
   News. Moved up into Services, right under the services grid, as a
   trailing strip of that section instead of a standalone one — so the
   heading is a small caption, not a full eyebrow+h2 section-head, and it
   picks up Services' own padding/background rather than having its own.
   Overflow is hidden here (rather than on the whole section) since the
   marquee-track is intentionally wider than its container and shouldn't
   push the page width out. Continuously auto-scrolling strip of partner
   names; the track's item list is rendered twice by PHP (front-page.php)
   and this animates it exactly one list-width to the left, so the loop
   point is invisible — no JS needed. Pauses on hover/focus and respects
   reduced motion. */
.partners-inline { margin-top: 3rem; overflow: hidden; }
/* Round 17 (14 July) — centred instead of left-aligned, with a divider
   line either side to section it off from the services grid above.
   Round 19 — recoloured navy (to match the cards above) instead of blue. */
.partners-caption {
	display: flex; align-items: center; justify-content: center; gap: 1.2rem;
	margin: 0 0 1.6rem; text-align: center;
}
.partners-caption::before, .partners-caption::after {
	content: ""; flex: 1 1 0; max-width: 140px; height: 1px; background: var(--wt-border);
}
.partners-caption span {
	font-family: var(--wt-font-display); font-weight: 600; font-size: 0.82rem;
	letter-spacing: 0.05em; text-transform: uppercase; color: #1c2c68; white-space: nowrap;
}
.marquee {
	position: relative; padding: 10px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
	display: flex; align-items: center; width: max-content; gap: 2.2rem;
	animation: wt-marquee 32s linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item {
	font-family: var(--wt-font-display); font-weight: 600; font-size: 1.2rem; color: var(--wt-ink-2);
	white-space: nowrap; letter-spacing: -0.01em; display: flex; align-items: center; gap: 2.2rem;
}
.marquee-item::after { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--wt-border); flex: none; }
.marquee-item:last-child::after { display: none; }
@keyframes wt-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; overflow-x: auto; }
}

/* ---------- Latest news ----------
   Closes out the plain white run. Cards mirror a minimal blog-card
   layout: the image sits edge-to-edge at the top of the card (no inset
   padding), a quiet date/meta row and bold title sit in a padded block
   below — no excerpt, no border, no default shadow, just a --wt-surface
   tint to tell the card from the page. A single centered button below
   the grid replaces the old corner "All news" link. */
.latest-news { padding: 80px 0; background: var(--wt-surface); }
/* Round 22 (14 July) — same flat row header as Services/Plans (Option A):
   heading left, divider, intro right, same navy title/subtitle pair. */
.news-head {
	display: flex; align-items: center; gap: 2.6rem;
	max-width: none; margin: 0 0 2.8rem; text-align: left;
}
.news-heading { flex: 1 1 200px; }
.news-divider { width: 1px; align-self: stretch; background: var(--wt-border); flex: none; }
.news-head-intro { flex: 1 1 380px; margin: 0; }
body.wp-theme-wantok-new .news-head-title { color: #1c2c68; margin-bottom: 0.4rem; }
.news-subtitle {
	font-family: var(--wt-font-display); font-weight: 600; font-size: 1.3rem;
	color: #3d4f96; letter-spacing: -0.005em; margin: 0;
}
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; list-style: none; margin-top: 0; }
.news-card {
	position: relative; background: var(--wt-bg); box-shadow: 0 1px 3px rgba(28,44,104,0.08);
	border-radius: 6px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow-lg); }
.news-card-link { display: block; color: inherit; }
.news-thumb { margin: 0; }
.news-thumb img { display: block; width: 100%; height: 180px; object-fit: cover; transition: transform 0.4s ease; }
.news-card-link:hover .news-thumb img { transform: scale(1.05); }
.news-body { padding: 20px 22px 24px; }
.news-card .news-date { display: block; font-size: 0.82rem; color: var(--wt-ink-3); }
.news-title { font-size: 1.2rem; margin: 0.5rem 0 0; letter-spacing: -0.01em; }
.news-card-link:hover .news-title { color: var(--wt-blue); }
.news-empty { color: var(--wt-ink-2); margin-top: 1.5rem; }
.news-cta { text-align: center; margin-top: 2.6rem; }

/* ---------- News page / archive card grid (16 July) ----------
   Reuses the homepage's .news-grid/.news-card component (same card
   language site-wide) rather than the old two-column .post-card list —
   see index.php and archive.php. The archive context adds an excerpt and
   a "Read more" link that the homepage teaser cards don't have room for;
   these are additive rules only, the plain homepage .news-card is
   untouched. Section sits on the same --wt-surface tint as the homepage's
   Latest News band, right below the navy .page-title-banner, so the page
   still reads as "navy banner, then a tinted (not plain-white) body" like
   Support and the homepage. */
.news-archive { padding-top: 64px; }
.news-grid-archive .news-thumb img { height: 200px; }
.news-card .news-excerpt { color: var(--wt-ink-2); font-size: 0.92rem; line-height: 1.55; margin: 0.6rem 0 0.9rem; }
.news-card .news-excerpt p { margin: 0; }
.news-card .read-more {
	display: inline-flex; align-items: center; gap: 0.35em;
	font-size: 0.9rem; color: var(--wt-blue);
}
.news-card-link:hover .read-more { color: var(--wt-purple); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--wt-navy); color: #fff; position: relative; overflow: hidden; }
/* Round 27 (14 July) — the purple/cyan glow recoloured to navy-family
   tones instead (was the last spot on the page still using the old
   brand gradient's colours); keeps the ambient depth without the
   cyan-blue-purple blend. */
.cta-band::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(700px 300px at 85% 120%, rgba(61,79,150,0.45), transparent 60%), radial-gradient(600px 280px at 8% -20%, rgba(28,44,104,0.4), transparent 60%);
}
/* Inner-page CTA bands (e.g. Support) get --wt-navy-grad instead of flat
   navy (16 July, Soana's request for gradient "navy parts") — scoped to
   .page-content-template only so the homepage's own CTA band, already
   finalized this session under Round 27's flat-navy direction, is left
   untouched. */
.page-content-template .cta-band { background: var(--wt-navy-grad); }
.cta-inner { position: relative; text-align: center; padding: 88px 22px; max-width: 760px; }
/* Small pill badge above the CTA heading — added 16 July, optional per-block
   (see wantok_block_cta's 'badge' key). */
.cta-badge {
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
	color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
	padding: 0.42em 1em; border-radius: 999px; margin-bottom: 1.1rem;
}
body.wp-theme-wantok-new .cta-title { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.015em; }
.cta-lead { color: var(--wt-on-dark-2); font-size: 1.1rem; margin-bottom: 1.6rem; }
.cta-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact details (plain icon list) ----------
   Added 16 July for the Support page's contact-details section; reworked
   twice same day per client feedback: first an earlier, more colourful
   card-based version ("icons all over the place", didn't like the cards),
   then the icon moved above the text instead of beside it (also fixes the
   detail line only having width-minus-icon to work with, which was
   wrapping phone numbers awkwardly) — icons are stroke-only navy with no
   background shape, items have no card chrome, and Phone/Email sit in a
   2-up row with Office/location spanning the full width below (see
   wantok_block_contact_grid()). */
.contact-grid-lead { color: var(--wt-ink-2); max-width: 620px; margin: -0.4rem 0 1.6rem; }
/* 'contact-section' (added 16 July, see wantok_block_contact_grid()) drops
   the usual 900px text-column cap so this can use the container's full
   1180px, and adds extra vertical padding — the default .richtext-section
   sizing read as too small/narrow for a two-column list+map layout versus
   a column of body text. Icon/type sizes below were bumped to match. */
.contact-section { max-width: 1180px; padding-top: 56px; padding-bottom: 56px; }
/* align-content: center (16 July, after the closing CTA band was removed and
   the map's min-height was trimmed back down — see .contact-split-map below)
   so if the list still ends up shorter than the stretched row, the leftover
   space is split evenly above/below the three items instead of only
   appearing as a gap underneath — keeps the list optically centered against
   the map rather than looking top-anchored and unbalanced. */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 2.8rem; align-content: center; }
.contact-item { display: flex; flex-direction: column; align-items: flex-start; }
.contact-item--full { grid-column: 1 / -1; }
.contact-item-icon { display: inline-flex; color: var(--wt-navy); margin-bottom: 0.7rem; }
.contact-item-title { font-family: var(--wt-font-display); font-weight: 700; font-size: 1.08rem; color: var(--wt-ink); margin: 0 0 0.3rem; }
.contact-item-detail { color: var(--wt-ink-2); margin: 0; font-size: 1.05rem; line-height: 1.5; }
/* Phone/Email details are real tel:/mailto: links now (16 July) — styled to
   read the same as plain text (no default blue/underline) so making them
   clickable doesn't change the section's look, just its behaviour; purple
   on hover matches the site's other inline-link hover treatment. */
.contact-item-detail a { color: inherit; text-decoration: none; }
.contact-item-detail a:hover { color: var(--wt-purple); text-decoration: underline; }
/* Dashed dividers (added 16 July — the plain list read a little bare)
   between items, echoing the dashed-border treatment already used
   elsewhere on the site (e.g. .content-todo-note) instead of a new style.
   Assumes the common "2-up row + full-width row below" pattern: a vertical
   dash between the two top items, a horizontal one above the full row. */
/* Scoped to .contact-grid (16 July, added alongside the overlay layout
   variant below) — these were previously bare .contact-item selectors,
   which would otherwise leak into .contact-overlay-list's plain vertical
   stack (that layout has its own, simpler divider rule instead). */
.contact-grid .contact-item:nth-child(2):not(.contact-item--full) { border-left: 1px dashed var(--wt-border); padding-left: 2rem; }
.contact-grid .contact-item--full { border-top: 1px dashed var(--wt-border); padding-top: 1.8rem; margin-top: 0.4rem; }
@media (max-width: 560px) {
	.contact-grid { grid-template-columns: 1fr; }
	.contact-grid .contact-item--full { grid-column: auto; }
	.contact-grid .contact-item:nth-child(2):not(.contact-item--full) {
		border-left: 0; padding-left: 0;
		border-top: 1px dashed var(--wt-border); padding-top: 1.8rem; margin-top: 0.4rem;
	}
}

/* Contact grid paired with a map (added 16 July, per a second reference the
   client liked): the icon list becomes a box on the left, map on the
   right. Both are grid items in the same row, so they stretch to match
   each other's height with no fixed height needed on either side. Left
   column widened same day (client didn't mind the contact info taking
   more room) so detail lines have breathing room now that icons sit above
   the text rather than eating into the row's width.
   min-height re-tuned (16 July, later same day, after the closing CTA band
   was removed): the original 400px was set to give the map "a substantial
   presence even if the list ends up short," but against the 3-item list's
   real content height that read as an oversized, mostly-empty map box —
   dropped to 320px, closer to the list's natural height, so the two panels
   read as sized to match each other rather than the map dwarfing the list.
   See .contact-grid's align-content: center above for how any remaining
   slack is shared instead of just sitting at the bottom. */
.contact-split { display: grid; grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 1fr); gap: 2rem; align-items: stretch; }
.contact-split-map { min-height: 320px; }
.contact-split-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 780px) {
	.contact-split { grid-template-columns: 1fr; }
	.contact-split-map { min-height: 260px; }
}
/* Location map embed (16 July) — see wantok_block_map(). */
.map-embed { position: relative; border-radius: var(--wt-radius); overflow: hidden; box-shadow: var(--wt-shadow); border: 1px solid var(--wt-border); }
/* Transparent full-cover link (16 July) so clicking anywhere on the map
   opens real Google Maps in a new tab — a keyless embed iframe on its own
   never does this. Sits above the iframe (z-index) and captures every
   click itself, which does mean the mini embedded map can no longer be
   panned/zoomed in place; that trade-off is intentional here since the
   embed is informational, not a working mini-map someone needs to explore. */
.map-embed-link { position: absolute; inset: 0; z-index: 1; }
.map-embed-badge {
	position: absolute; right: 16px; bottom: 16px;
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: var(--wt-navy); color: #fff; font-family: var(--wt-font-display);
	font-size: 0.86rem; font-weight: 600; padding: 0.55em 1.1em;
	border-radius: 999px; box-shadow: var(--wt-shadow-lg);
}
.map-embed-link:hover .map-embed-badge { background: var(--wt-purple); }
.map-embed iframe { display: block; }

/* Contact "overlay" layout — a /frontend-design alternative to .contact-split
   (16 July, exploration only, not yet the live layout): the map becomes a
   tall full-width backdrop instead of one half of a two-column row, and the
   contact list sits in a solid card floating over its corner, like a
   "visit us" section on a hospitality site. Card is absolutely positioned
   only from tablet width up, where there's enough map width for it not to
   cover the whole thing — below that it drops to a plain stacked block
   under the map instead of overlapping, since there's no room to overlap
   without hiding most of the map.
   Card anchored top-left rather than bottom-left (16 July, revised same
   day) — bottom-left is where Google's own map puts its attribution/terms
   link, and bottom-right is where its zoom controls sit, so a card pinned
   to either bottom corner fights with that chrome. Anchoring from the top
   leaves the whole bottom strip clear regardless of the card's actual
   height. Map height bumped 460px → 520px to give the card real breathing
   room above that bottom strip, and the card gets a max-height + scroll as
   a safety net in case its content ever runs longer than expected. */
.contact-overlay { position: relative; }
/* height (not min-height) is required here — the iframe below uses
   height: 100%, and a percentage height only resolves against a parent
   with a *definite* height; min-height alone doesn't count. Without this,
   the iframe collapses to the browser's default intrinsic iframe size and
   Google's own map canvas inside it initializes at that wrong size, then
   gets stretched to fill the box — which is what read as "distorted". */
.contact-overlay-map { height: 520px; }
.contact-overlay-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-overlay-card {
	background: #fff; border-radius: var(--wt-radius); border: 1px solid var(--wt-border);
	box-shadow: var(--wt-shadow-lg); padding: 1.7rem 1.9rem; margin-top: 1.4rem;
}
.contact-overlay-list { display: flex; flex-direction: column; gap: 1.05rem; margin-bottom: 1.3rem; }
.contact-overlay-list .contact-item:not(:first-child) { border-top: 1px dashed var(--wt-border); padding-top: 1.05rem; }
.contact-overlay-directions { width: 100%; justify-content: center; }
@media (min-width: 640px) {
	.contact-overlay-card {
		position: absolute; left: 32px; top: 32px; bottom: auto; margin-top: 0;
		width: min(360px, calc(100% - 64px));
		max-height: calc(100% - 64px); overflow-y: auto;
	}
}
@media (max-width: 560px) {
	.contact-overlay-map { height: 340px; }
}

/* Contact "columns" layout — a third /frontend-design alternative (16 July),
   per a reference design Soana liked: three equal, centred columns (Phone /
   Address / Email) with thin divider lines between them, no paired map (the
   map moved to its own full-bleed block below — see .map-embed-full-bleed).
   Reuses .contact-item, but centred instead of the default left-aligned
   layout, so it's scoped under .contact-columns rather than changing the
   shared .contact-item rules other layouts still depend on. */
.contact-columns { display: grid; grid-template-columns: repeat(3, 1fr); }
.contact-columns .contact-item { align-items: center; text-align: center; padding: 0 1.8rem; }
.contact-columns .contact-item-detail { max-width: 260px; }
.contact-columns .contact-item:not(:first-child) { border-left: 1px solid var(--wt-border); }
@media (max-width: 720px) {
	.contact-columns { grid-template-columns: 1fr; gap: 2rem; }
	.contact-columns .contact-item { padding: 0; }
	.contact-columns .contact-item:not(:first-child) {
		border-left: 0; border-top: 1px solid var(--wt-border);
		padding-top: 1.8rem; margin-top: 0.2rem;
	}
}

/* "Connect with us" social row (16 July) — sits right after .contact-columns,
   before the map. Reuses the same real social URLs as the header's
   .utility-social (via wantok_opt()) rather than duplicating them, just
   scaled up and recoloured for a white section background instead of the
   navy utility bar. */
.connect-block { text-align: center; margin-top: 2.6rem; }
.connect-label {
	font-family: var(--wt-font-display); font-weight: 700; font-size: 1rem;
	color: var(--wt-ink); text-transform: uppercase; letter-spacing: 0.04em;
	margin-bottom: 1rem;
}
.connect-social { display: flex; gap: 0.7rem; justify-content: center; list-style: none; }
.connect-social a {
	display: inline-grid; place-items: center; width: 42px; height: 42px;
	border-radius: var(--wt-radius); background: var(--wt-navy); color: #fff;
	font-size: 0.95rem; font-weight: 700; text-transform: lowercase;
}
.connect-social a:hover { background: var(--wt-purple); }

/* Full-bleed wide/short map (16 July) — replaces the tall paired map on the
   Support page; see wantok_block_map()'s 'full_bleed' option. Overrides
   .map-embed's rounded corners/border/shadow since those read oddly on a
   section spanning the full viewport edge-to-edge — same reasoning as
   .page-title-banner just above going edge-to-edge with no card chrome.
   height (not min-height): same reason as .contact-overlay-map earlier —
   the iframe's height:100% needs a definite parent height to resolve. */
.map-full-bleed-section { width: 100%; }
.map-embed-full-bleed { border-radius: 0; border: 0; box-shadow: none; height: 340px; }
.map-embed-full-bleed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) {
	.map-embed-full-bleed { height: 260px; }
}
/* Heading + office address sitting above the full-bleed map (17 July —
   the address moved here from the contact-grid columns, which now show
   Office Hours instead; see wantok_block_map()'s 'address' handling).
   .map-full-bleed-section itself is edge-to-edge (no .container), so this
   intro block brings its own .container class for the max-width/centring/
   padding, same trick as .page-title-banner-mascot-wrap. h2 styling
   matches .richtext-section h2's underline-accent treatment for
   consistency with the rest of the page, since this sits outside any
   .richtext-section itself. */
.map-full-bleed-intro { padding-bottom: 1.6rem; }
.map-full-bleed-intro h2 {
	position: relative; padding-bottom: 0.7rem; margin: 0 0 0.6rem; font-size: 1.5rem;
}
.map-full-bleed-intro h2::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--wt-purple);
}
.map-address { color: var(--wt-ink-2); font-size: 1.03rem; margin: 0; max-width: 520px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--wt-navy-2); color: var(--wt-on-dark); }
/* 17 July: was a 4-track grid (Brand/Explore/Contact/Widgets); the Explore
   column was removed from footer.php (see its comment there), leaving
   just Brand + "Talk to us" by default. A percentage-based grid split
   (e.g. 1.6fr/1fr) looked worse than the original 4-column version once
   only two, content-sized blocks remained — each column stretched across
   its full share of the 1180px container while the actual text inside
   stayed left-aligned and narrow, leaving an odd dead gap in the middle
   *and* more dead space past "Talk to us" out to the container's right
   edge. Switched to flex + space-between instead: Brand anchors to the
   container's left edge, "Talk to us" anchors to its right edge, both
   sized to their own content — the classic symmetric "bookend" footer
   layout, which reads as intentional at any column count instead of
   assuming exactly 3-4 evenly-sized blocks. */
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 60px 22px 40px; }
.footer-brand { flex: 0 1 420px; }
.footer-contact { flex: 0 0 auto; }
.footer-logo { display: inline-block; margin-bottom: 14px; }
.footer-address { font-style: normal; color: var(--wt-on-dark-2); font-size: 0.94rem; max-width: 320px; }
.footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; list-style: none; margin-top: 16px; }
.footer-social a { color: var(--wt-on-dark-2); font-size: 0.9rem; }
.footer-social a:hover { color: var(--wt-cyan); }
body.wp-theme-wantok-new .footer-heading { font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; }
.footer-menu, .footer-contact-list { list-style: none; display: grid; gap: 0.6rem; }
.footer-menu a, .footer-contact-list a { color: var(--wt-on-dark-2); font-size: 0.96rem; }
.footer-menu a:hover, .footer-contact-list a:hover { color: var(--wt-cyan); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px 22px; flex-wrap: wrap; }
.copyright, .footer-microcopy { margin: 0; font-size: 0.86rem; color: var(--wt-on-dark-2); }

/* ---------- Blog / pages (inner templates) ---------- */
.page-header { margin-bottom: 2rem; }
.page-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.entry-content { font-size: 1.05rem; }
.entry-content h2 { font-size: 1.6rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.3rem; margin-top: 1.4em; }
.entry-content img, .page-thumb img, .entry-thumb img { border-radius: var(--wt-radius); }
.entry-meta { color: var(--wt-ink-3); font-size: 0.9rem; margin-bottom: 0.6rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.post-list { display: grid; gap: 1.6rem; }
.post-card { display: grid; grid-template-columns: 280px 1fr; gap: 1.4rem; background: var(--wt-bg); border: 1px solid var(--wt-border); border-radius: var(--wt-radius); overflow: hidden; box-shadow: var(--wt-shadow); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 22px 24px; }
.entry-title a { color: var(--wt-ink); }
.entry-title a:hover { color: var(--wt-blue); }
.read-more { font-weight: 600; font-family: var(--wt-font-display); }
.post-navigation { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
.post-navigation a { font-weight: 600; }

/* Pagination */
.pagination { margin-top: 2.5rem; display: flex; }
.pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--wt-border); border-radius: 10px; color: var(--wt-ink); font-weight: 600; }
.pagination .page-numbers.current { background: var(--wt-grad); color: #fff; border-color: transparent; }
.pagination a.page-numbers:hover { border-color: var(--wt-blue); color: var(--wt-blue); }

/* Search form */
.search-form { display: flex; gap: 0.5rem; max-width: 520px; margin-top: 1rem; }
.search-field { flex: 1; padding: 0.7em 1em; border: 1px solid var(--wt-border); border-radius: 999px; font: inherit; }

/* 404 */
.error-404-area { text-align: center; max-width: 640px; }
body.wp-theme-wantok-new .error-code { font-family: var(--wt-font-display); font-weight: 700; font-size: clamp(4rem, 14vw, 8rem); line-height: 1; background: var(--wt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.error-links { display: flex; gap: 1rem; justify-content: center; list-style: none; flex-wrap: wrap; margin: 1rem 0 1.6rem; }
.error-links a { font-weight: 600; }

/* ---------- Inner content pages (page-content.php — replaces Elementor) ---------- */
.page-content-template.content-area { padding-top: 0; }
/* .content-area's 64px bottom padding is meant as breathing room after a
   normal (light-background) closing block. When a page's last block is a
   full-bleed navy .cta-band instead (e.g. Support's new closing CTA, 16
   July), that padding shows through as an unwanted white seam between the
   navy band and the navy footer. Pull the band down to close the gap —
   scoped to :last-child so pages that end on a regular block keep their
   normal spacing before the footer. */
.page-content-template .cta-band:last-child { margin-bottom: -64px; }
/* Same white-seam fix as .cta-band above, for the Support page's new
   full-bleed map when it's the last block before the footer (16 July). */
.page-content-template .map-full-bleed-section:last-child { margin-bottom: -64px; }
/* Same white-seam fix again, for the News page's tinted card-grid band
   (16 July) — it's the last (and only) block in index.php/archive.php's
   <main>, so .content-area's 64px bottom padding was leaving a plain white
   gap between the --wt-surface tint and the navy footer, which read as the
   tint "not going all the way through" even though it already ran full
   viewport width. */
.page-content-template .news-archive:last-child { margin-bottom: -64px; }

/* Full-bleed masthead banner — breaks out of the container to span the
   viewport edge-to-edge like the production site, with a wave divider into
   the white content below. Switched from the old cyan-blue-purple gradient
   to solid navy (16 July) to match the homepage's redesigned brand language,
   then to --wt-navy-grad later the same day per Soana's request to give the
   "navy parts" some gradient depth back (kept in the navy family, not the
   brighter old brand gradient — see --wt-navy-grad's own comment). The
   circuit-line texture and large translucent icon watermark that used to
   sit here were also removed the same day (busy against the navy). */
.page-title-banner {
	position: relative; overflow: hidden;
	background: var(--wt-navy-grad); color: #fff;
	padding: 56px 0 46px;
}
.page-title-banner-inner { position: relative; z-index: 1; max-width: 700px; }
.page-title-banner .section-eyebrow { color: rgba(255,255,255,0.78); }
.page-title-banner .section-eyebrow::before { background: rgba(255,255,255,0.55); }
.page-content-template .page-title-banner .page-title {
	color: #fff; text-transform: uppercase; letter-spacing: 0.02em;
	font-size: clamp(1.7rem, 3.8vw, 2.5rem); margin-bottom: 0.6rem;
}
.page-title-banner .page-quote { color: rgba(255,255,255,0.92); }
.page-title-banner .page-intro { color: rgba(255,255,255,0.9); margin: 0; }
.page-title-banner-wave {
	position: absolute; left: 0; bottom: -1px; width: 100%; height: 34px; display: block;
}
/* The wave's fill is hardcoded to #fff in the markup on the assumption the
   banner always sits above a plain white block — true for Support/About Us,
   but the News page (16 July) sits above a --wt-surface-tinted section
   instead, so the plain-white wave read as its own white sliver/gap between
   the navy banner and the tint. This class overrides the fill to match. */
.page-title-banner-wave--surface path { fill: var(--wt-surface); }
/* Mascot banner variant (16 July) — Soana provided a character render
   ("contact page tokobot.png") to sit in the page banner: a boy mascot
   already rendered on a solid navy background that's an almost exact match
   for --wt-navy (#0b1330 vs #0c1330 — imperceptible), and already composed
   with the character anchored to the right and empty navy space on the
   left. That match means the image can just sit on top of the banner's own
   navy fill with no visible seam or box — no cropping or background-color
   trickery needed, the "empty" two-thirds of the image reads as more banner
   background. Banner grows taller (min-height, tapered down at two
   breakpoints) to give the character real presence instead of a sliver;
   hidden below 700px instead of trying to make it coexist with the
   headline text in a narrow column — see .page-title-banner-mascot below. */
.page-title-banner--mascot { min-height: 400px; display: flex; align-items: center; }
/* 17 July fix — Soana flagged the mascot as "too small and too far to the
   right" on wide screens. Root cause: .page-title-banner-mascot was
   positioned with right:0 against the full-bleed banner, so on wide
   viewports it anchored to the literal browser edge — far outside the
   centred 1180px (--wt-maxw) text column — instead of sitting near the
   content. Fix: wrap the image in .page-title-banner-mascot-wrap, which
   reuses .container's max-width/centring/padding via an absolutely
   positioned inset:0 box (the inset:0 + max-width + margin:auto centering
   trick), so the mascot's right edge now tracks the same right edge as the
   headline column instead of the raw viewport edge.
   17 July, second pass — the first version of this fix also bumped the
   image to height:128%, which (bottom:0-anchored, so all the added height
   pushes the image upward) cropped the character's head off the top,
   clipped by .page-title-banner's overflow:hidden. Checked the source
   image's actual bounding box (contact-page-tokobot.png / support-mascot.jpg,
   1280x720): the character's head starts at y=55 (~7.6% down) and feet sit
   right at y=719 (~100%, already flush with the image's own bottom edge) —
   so there's very little headroom in the source frame itself to work with.
   Any height above ~108% pushes the head above the banner's top edge and
   off-screen. Fixed properly this time by growing the *banner* itself
   (min-height 340->400px, 260->300px at the 1000px breakpoint) so the
   character can be genuinely bigger via a taller banner, while keeping the
   image itself at a safe 105% (leaves ~3% clearance above the head, so it
   isn't clipped even accounting for sub-pixel rounding). Net effect vs. the
   original (pre-17-July) sizing: character renders ~24% larger with the
   whole head visible. */
.page-title-banner-mascot-wrap {
	position: absolute; inset: 0; margin: 0 auto; z-index: 0; pointer-events: none;
}
.page-title-banner-mascot {
	position: absolute; right: 6%; bottom: 0;
	height: 105%; width: auto; pointer-events: none;
}
@media (max-width: 1000px) {
	.page-title-banner--mascot { min-height: 300px; }
	.page-title-banner-mascot { right: 2%; height: 105%; }
}
@media (max-width: 700px) {
	.page-title-banner--mascot { min-height: auto; }
	.page-title-banner-mascot { display: none; }
}

/* About Us — photo hero banner (island collage + WANTOK wordmark), replacing
   the default gradient. The title/quote/intro text is kept in the markup
   for accessibility/SEO (see .screen-reader-text on .page-title-banner-inner
   below) but hidden visually so the photo shows through unobstructed — no
   dark overlay needed since there's no text to keep legible. The circuit
   texture + icon watermark are hidden for this variant since the photo
   already provides visual interest. */
.page-title-banner--photo {
	background: url('assets/images/about-banner.jpg') center/cover no-repeat;
	min-height: 260px; display: flex; align-items: center;
}
.page-quote { font-family: var(--wt-font-display); font-style: italic; font-size: 1.14rem; margin: 0 0 0.4rem; }
.page-intro { font-size: 1.08rem; color: var(--wt-ink-2); max-width: 760px; }

/* About Us fan hero — replaces the old plain static banner photo for this
   page only. A curved, fanned row of real team headshots sits below the
   page eyebrow/title/quote/intro, which are shown visibly here (they were
   screen-reader-only before, hidden behind the plain photo). Ported from
   wantok-new-v59.zip's About Us redesign (17 July). */
.about-fan-hero {
	background: linear-gradient(180deg, var(--wt-surface) 0%, #ffffff 100%);
	padding: 56px 0 64px; text-align: center; overflow: hidden;
}
.about-fan-hero-inner { max-width: 720px; margin: 0 auto; padding: 0 22px; }
.about-fan-hero-eyebrow { display: inline-flex; }
.about-fan-hero-title {
	font-family: var(--wt-font-display); font-size: clamp(2rem, 4vw, 2.7rem);
	font-weight: 700; color: var(--wt-ink); margin: 0.3rem 0 0.6rem; line-height: 1.15;
}
.about-fan-hero-quote {
	font-family: var(--wt-font-display); font-style: italic; color: var(--wt-blue-deep);
	font-size: 1.1rem; margin: 0 0 0.4rem;
}
.about-fan-hero-intro { color: var(--wt-ink-2); font-size: 1.05rem; margin: 0; }

/* Fan hero is an auto-scrolling carousel of the full team roster (each
   photo appears twice back-to-back in the markup so the loop is seamless),
   arranged in a smooth repeating wave: larger portrait cards, tighter
   rounding, a pronounced arc, and edge cards hard-cropped by the container
   (no fade). Pauses on hover so a visitor can look at a photo. */
.about-fan-carousel {
	overflow: hidden; margin-top: 3rem; padding: 34px 0 46px;
}
.about-fan-track {
	display: flex; align-items: center; gap: 16px; width: max-content;
	animation: about-fan-scroll 50s linear infinite;
}
.about-fan-carousel:hover .about-fan-track { animation-play-state: paused; }
.about-fan-photo {
	position: relative; margin: 0; flex-shrink: 0; width: 170px; height: 220px;
	border-radius: 10px; overflow: hidden; box-shadow: var(--wt-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-fan-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-fan-photo:hover { transform: translateY(-10px) scale(1.04) !important; box-shadow: var(--wt-shadow-lg); z-index: 5; }
/* Name/role label — hidden until the card is hovered. The carousel wave
   rotates each card individually via the nth-child rules below, but
   :hover already overrides that with a level translateY+scale transform
   (see above), so this label needs no counter-rotation of its own: by the
   time it's visible the card itself is already sitting level. */
.about-fan-photo-label {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	margin: 0; padding: 10px 12px 12px;
	background: linear-gradient(0deg, rgba(12,19,48,0.85) 0%, rgba(12,19,48,0.55) 65%, transparent 100%);
	color: #fff; opacity: 0; transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.about-fan-photo:hover .about-fan-photo-label { opacity: 1; transform: translateY(0); }
.about-fan-photo-label-name {
	display: block; font-family: var(--wt-font-display); font-weight: 700;
	font-size: 0.82rem; line-height: 1.2;
}
.about-fan-photo-label-role { display: block; font-size: 0.68rem; color: var(--wt-on-dark-2); margin-top: 1px; }
@keyframes about-fan-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Smooth repeating wave — a full sine period across the 15-member roster
   so the curve loops with no visible seam between cycles. */
.about-fan-track .about-fan-photo:nth-child(15n+1)  { transform: rotate(0deg)    translateY(0px); }
.about-fan-track .about-fan-photo:nth-child(15n+2)  { transform: rotate(8deg)    translateY(2px); }
.about-fan-track .about-fan-photo:nth-child(15n+3)  { transform: rotate(15deg)   translateY(7px); }
.about-fan-track .about-fan-photo:nth-child(15n+4)  { transform: rotate(19deg)   translateY(14px); }
.about-fan-track .about-fan-photo:nth-child(15n+5)  { transform: rotate(20deg)   translateY(22px); }
.about-fan-track .about-fan-photo:nth-child(15n+6)  { transform: rotate(17deg)   translateY(30px); }
.about-fan-track .about-fan-photo:nth-child(15n+7)  { transform: rotate(12deg)   translateY(36px); }
.about-fan-track .about-fan-photo:nth-child(15n+8)  { transform: rotate(4deg)    translateY(40px); }
.about-fan-track .about-fan-photo:nth-child(15n+9)  { transform: rotate(-4deg)   translateY(40px); }
.about-fan-track .about-fan-photo:nth-child(15n+10) { transform: rotate(-12deg)  translateY(36px); }
.about-fan-track .about-fan-photo:nth-child(15n+11) { transform: rotate(-17deg)  translateY(30px); }
.about-fan-track .about-fan-photo:nth-child(15n+12) { transform: rotate(-20deg)  translateY(22px); }
.about-fan-track .about-fan-photo:nth-child(15n+13) { transform: rotate(-19deg)  translateY(14px); }
.about-fan-track .about-fan-photo:nth-child(15n+14) { transform: rotate(-15deg)  translateY(7px); }
.about-fan-track .about-fan-photo:nth-child(15n+15) { transform: rotate(-8deg)   translateY(2px); }
/* About Us fan carousel — responsive: just shrink the cards on smaller
   screens. No need to hide specific photos any more since this scrolls
   continuously rather than showing one fixed static set. */
@media (max-width: 860px) {
	.about-fan-photo { width: 130px; height: 168px; }
}
@media (max-width: 620px) {
	.about-fan-hero { padding: 40px 0 44px; }
	.about-fan-photo { width: 104px; height: 134px; }
}

.richtext-section { padding-top: 30px; padding-bottom: 30px; max-width: 900px; }

/* Full-bleed tinted band for a richtext section that needs more visual
   weight/separation mid-page (e.g. a section moved down below other
   content) — breaks out to the viewport edge with a soft surface tint and
   generous vertical breathing room, then centers its container as usual. */
.richtext-band { background: var(--wt-surface); padding: 64px 0; }
.richtext-section--band { padding-top: 0; padding-bottom: 0; }
.richtext-section.has-media { max-width: 1180px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
.richtext-section h2 { position: relative; padding-bottom: 0.7rem; font-size: 1.5rem; }
.richtext-section h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--wt-purple); }
.richtext-section p { color: var(--wt-ink-2); font-size: 1.03rem; }
/* Optional 'centered' flag (no side image) — center the heading/paragraphs
   and re-center the heading's underline accent to match. Ported from
   wantok-new-v59.zip's About Us redesign (17 July). */
.richtext-section--centered { text-align: center; }
.richtext-section--centered h2::after { left: 50%; transform: translateX(-50%); }

/* Optional 'signal' flag — swaps the plain underline bar for a small inline
   "signal-arc" mark (concentric wireless-signal arcs), a one-off signature
   detail used on About Us' "About WanTok Tonga" heading only, grounded in
   WanTok being a *wireless* ISP rather than a generic decorative flourish. */
.richtext-section--signal h2::after { display: none; }
.richtext-section--signal .signal-arc { display: block; width: 64px; height: 30px; margin: 0.1rem auto 1.1rem; }
.richtext-section--signal:not(.richtext-section--centered) .signal-arc { margin-left: 0; }
.signal-arc path, .signal-arc circle { fill: none; stroke: var(--wt-blue); stroke-width: 3; stroke-linecap: round; }
.signal-arc circle { fill: var(--wt-purple); stroke: none; }
.signal-arc path:nth-of-type(1) { stroke: var(--wt-cyan); opacity: 0.4; }
.signal-arc path:nth-of-type(2) { stroke: var(--wt-blue); opacity: 0.7; }
.signal-arc path:nth-of-type(3) { stroke: var(--wt-blue-deep); opacity: 1; }
.richtext-copy > ul { list-style: none; display: grid; gap: 0.6rem; margin: 1rem 0; }
.richtext-copy > ul li { position: relative; padding-left: 1.9rem; color: var(--wt-ink-2); }
.richtext-copy > ul li::before {
	content: "\2713"; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px;
	border-radius: 999px; background: var(--wt-blue); color: #fff; font-size: 0.65rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill { background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: 999px; padding: 0.5em 1.1em; font-size: 0.92rem; font-weight: 600; font-family: var(--wt-font-display); color: var(--wt-blue-deep); }

.feature-columns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.2rem; }
.feature-columns-grid .fcol { background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: var(--wt-radius); padding: 20px; }
.feature-columns-grid .fcol h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.feature-columns-grid .fcol ul { list-style: none; display: grid; gap: 0.4rem; }
.feature-columns-grid .fcol li { font-size: 0.92rem; color: var(--wt-ink-2); position: relative; padding-left: 1.1rem; }
.feature-columns-grid .fcol li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 999px; background: var(--wt-blue); }

.inner-plans-grid { max-width: none; }

.data-table-wrap { overflow-x: auto; margin-top: 1.2rem; border: 1px solid var(--wt-border); border-radius: var(--wt-radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { padding: 10px 16px; border-bottom: 1px solid var(--wt-border); text-align: left; white-space: nowrap; }
.data-table thead th { background: var(--wt-surface); font-family: var(--wt-font-display); font-weight: 600; }
.data-table tbody tr:last-child td { border-bottom: none; }

.faq-list { display: grid; gap: 0.7rem; margin-top: 1.2rem; }
.faq-item { border: 1px solid var(--wt-border); border-radius: var(--wt-radius-sm); overflow: hidden; background: var(--wt-bg); }
.faq-item summary { cursor: pointer; padding: 14px 18px; font-weight: 600; font-family: var(--wt-font-display); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--wt-blue); font-weight: 700; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { padding: 0 18px 16px; margin: 0; color: var(--wt-ink-2); }

/* "Upside-down triangle" team layout: rows of 5, 4, 3, 2 members (top to
   bottom), each row narrower than the last and its cards flexing to fill
   that row's width — so cards get wider row by row, tapering to a point
   at the single centered/featured card below. Row width is driven by
   data-count (set in the PHP loop) rather than a fixed column count. */
.team-pyramid { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; margin-top: 1.4rem; }
.team-row { display: flex; justify-content: center; gap: 1.3rem; width: 100%; }
.team-row .team-card { flex: 1 1 0; min-width: 0; }
.team-row[data-count="5"] { max-width: 100%; }
.team-row[data-count="4"] { max-width: 84%; }
.team-row[data-count="3"] { max-width: 64%; }
.team-row[data-count="2"] { max-width: 44%; }
.team-row[data-count="1"] { max-width: 26%; }
.team-card {
	background: var(--wt-bg); border: 1px solid var(--wt-border); border-radius: var(--wt-radius);
	padding: 28px 20px 24px; text-align: center; box-shadow: var(--wt-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow-lg); border-color: transparent; }
.team-photo {
	width: 100px; height: 100px; margin: 0 auto 16px; border-radius: 50%;
	padding: 3px; background: var(--wt-grad);
}
.team-photo img {
	width: 100%; height: 100%; object-fit: cover; object-position: top center;
	border-radius: 50%; border: 3px solid var(--wt-bg); display: block;
}
.team-name { font-weight: 700; font-family: var(--wt-font-display); font-size: 1.04rem; margin: 0; }
.team-role {
	display: inline-block; margin: 0.55rem 0 0; padding: 3px 12px;
	background: var(--wt-grad-soft); color: var(--wt-blue-deep); border-radius: 999px;
	font-family: var(--wt-font-display); font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.4;
}

/* Featured team member(s) — e.g. the CEO — rendered in their own row below
   the main grid, centered, so they stand out at the bottom-middle instead
   of occupying a regular grid slot. A small eyebrow label and a slightly
   larger, gradient-bordered card mark it as the leadership spotlight while
   keeping the same card language as the rest of the grid. */
.team-featured-label {
	text-align: center; font-family: var(--wt-font-display); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem;
	color: var(--wt-purple); margin: 2.2rem 0 0.9rem;
}
.team-grid-featured { display: flex; justify-content: center; }
.team-grid-featured .team-card {
	width: 100%; max-width: 280px; padding: 32px 24px 26px;
	border: 2px solid transparent;
	background: linear-gradient(var(--wt-bg),var(--wt-bg)) padding-box, var(--wt-grad) border-box;
	box-shadow: var(--wt-shadow-lg);
}
.team-grid-featured .team-photo { width: 116px; height: 116px; }

/* Simple photo grid — e.g. "the team in action" installs/field work —
   reusing the site's existing card shadow/hover-lift language but without
   any of the name/role chrome the team cards above have. Ported from
   wantok-new-v42.zip's About Us update (16 July). */
.gallery-intro { color: var(--wt-ink-2); margin-top: -0.4rem; }
.team-gallery {
	display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.1rem; margin-top: 1.4rem;
}
.team-gallery-item {
	margin: 0; border-radius: var(--wt-radius); overflow: hidden;
	box-shadow: var(--wt-shadow); aspect-ratio: 4 / 3; min-height: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-gallery-item:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow-lg); }
.team-gallery-item img {
	width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}

/* Photo/text feature cards — About Us "Our Team in Action", spotlighting
   real field work. Caption sits below each photo (not overlaid on top of
   it) so the images themselves stay clean/text-free. A uniform 3-column
   grid reads as more organized than an alternating large/small layout once
   the section grew past 4 photos; if the final row is left with one lone
   tile, it spans the full row (.feature-card-tile--full, applied by PHP)
   instead of leaving empty cells. Ported from wantok-new-v59.zip's About
   Us redesign (17 July). */
.feature-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.4rem; }
.feature-card-tile {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--wt-border); border-radius: var(--wt-radius); overflow: hidden;
	box-shadow: var(--wt-shadow);
}
.feature-card-tile--full { grid-column: 1 / -1; }
.feature-card-tile--full .feature-card-tile-media { aspect-ratio: 21 / 9; }
.feature-card-tile-media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.feature-card-tile-img {
	width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease;
}
/* Optional locality tag — grounds the photo in *where* the work happened
   (reusing wording already present in the card's own copy, e.g.
   "Tongatapu" / "Outer Islands" — not a new claim, just surfaced as a
   small on-photo label). */
.feature-card-tile-tag {
	position: absolute; left: 14px; bottom: 14px; z-index: 2;
	background: rgba(12,19,48,0.62); backdrop-filter: blur(2px);
	color: #fff; font-family: var(--wt-font-display); font-weight: 600;
	font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase;
	padding: 5px 12px; border-radius: 999px;
}
.feature-card-tile:hover .feature-card-tile-img { transform: scale(1.04); }
.feature-card-tile-copy { padding: 20px 22px; }
.feature-card-tile-copy h3 { color: var(--wt-ink); margin: 0 0 0.3rem; font-size: 1.1rem; }
.feature-card-tile-copy p {
	color: var(--wt-ink-2); margin: 0; font-size: 0.92rem; line-height: 1.45;
}
@media (max-width: 860px) {
	.feature-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.feature-cards-grid { grid-template-columns: 1fr; }
	.feature-card-tile--full .feature-card-tile-media { aspect-ratio: 16 / 10; }
}

.content-todo-note {
	background: var(--wt-grad-soft); border: 1px dashed var(--wt-purple); border-radius: var(--wt-radius-sm);
	padding: 14px 18px; font-size: 0.94rem; color: var(--wt-ink-2);
}
.content-todo-note strong { color: var(--wt-purple-deep); }

/* Widgets */
.widget { margin-bottom: 1.6rem; }
.footer-widget .widget-title { color: #fff; }

/* ---------- Reveal animation ----------
   Content is fully visible by default. Hiding only happens when JS has
   added .wt-js to <html> AND motion is allowed, so no-JS / reduced-motion
   users always see content. */
.wt-js .reveal-init { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.wt-js .reveal-init.is-visible { opacity: 1; transform: none; }

/* Directional/elegance modifiers for specific sections that want a more
   deliberate slide-in than the default rise (e.g. About Us' "About WanTok
   Tonga" copy/photo pair). Layered on top of .reveal-init so no-JS /
   reduced-motion visitors still just see the content — see above. The
   expo-out easing curve reads as a slower, smoother "settle into place"
   rather than a snappy bounce, which is what gives it the elegant/
   professional feel instead of a flashy one. Ported from
   wantok-new-v59.zip's About Us redesign (17 July). */
.wt-js .reveal-init.reveal-elegant { transition-duration: 0.9s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.wt-js .reveal-init.reveal-left  { transform: translateX(-36px); }
.wt-js .reveal-init.reveal-right { transform: translateX(36px); }
.wt-js .reveal-init.reveal-up    { transform: translateY(30px); }
.wt-js .reveal-init.reveal-left.is-visible,
.wt-js .reveal-init.reveal-right.is-visible,
.wt-js .reveal-init.reveal-up.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.wt-js .reveal-init { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
	/* Left-hand vertical rail is a desktop-width flourish — reverts to the
	   original horizontal/bottom-center layout below tablet width, where
	   a 64px copy offset would eat too much of an already-narrow hero. */
	.hero-carousel-dots {
		left: 50%; top: auto; bottom: 68px; transform: translateX(-50%);
		flex-direction: row; align-items: center; gap: 8px;
	}
	.hero-carousel-dots::before {
		/* Rail flips to a horizontal line under the row layout above. */
		width: auto; height: 1px;
	}
	.hero-copy-stack { margin-left: 0; }
	.hero-actions { margin-left: 0; }
	.news-grid { grid-template-columns: repeat(2, 1fr); }
	/* The left-body / divider / right-heading row needs real width to
	   read as a row — stack it below tablet width, with the divider
	   flipping from a vertical rule to a horizontal one between them. */
	.services-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
	.services-divider { width: 100%; height: 1px; align-self: auto; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.plans-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
	.plans-divider { width: 100%; height: 1px; align-self: auto; }
	.plans-grid { grid-template-columns: repeat(2, 1fr); }
	.news-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
	.news-divider { width: 100%; height: 1px; align-self: auto; }
	.plan-card:nth-child(3) { grid-column: 1 / -1; }
	.why-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
	.why-divider { width: 100%; height: 1px; align-self: auto; }
	/* Every *-heading/*-body pair below uses flex: 1 1 200px / 380px so the
	   two columns start at a sensible width in the desktop row layout
	   above. Once .services-head/.plans-head/.why-head/.news-head switch
	   to flex-direction: column right above, that same flex-basis applies
	   to the vertical axis instead — silently forcing each block to a
	   200-380px-tall box regardless of how short its actual text is. That
	   was the real source of the big gaps between the section heading and
	   its intro paragraph on mobile (15 July feedback). Resetting the
	   basis to auto here lets each block size to its real content. */
	.services-heading, .services-body,
	.plans-heading, .plans-body,
	.why-heading, .why-body,
	.news-heading, .news-head-intro {
		flex-basis: auto;
	}
	.why-list { grid-template-columns: repeat(2, 1fr); }
	.trust-inline-list { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
	.trust-inline-item:nth-child(2n+1) { border-left: none; }
	.trust-inline-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.4rem; }
	.feature-columns-grid { grid-template-columns: repeat(2, 1fr); }
	/* The triangle taper only reads well on wide screens — below this, every
	   row wraps to a plain 2-up grid so cards stay a comfortable, legible size. */
	.team-row { flex-wrap: wrap; max-width: 100% !important; }
	.team-row .team-card { flex: 1 1 45%; }
	.team-gallery { grid-template-columns: repeat(2, 1fr); }
	.richtext-section.has-media { grid-template-columns: 1fr; }
	.richtext-section.has-media .richtext-media { order: -1; }
	.hero { min-height: min(80vh, 620px); }
	.page-title-banner { padding: 38px 0 30px; }
}

@media (max-width: 620px) {
	.feature-columns-grid { grid-template-columns: 1fr; }
	.team-row .team-card { flex: 1 1 100%; }
	.team-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.menu-toggle { display: inline-flex; }
	.main-navigation { margin-left: auto; }
	.nav-menu {
		position: fixed; inset: 114px 0 0 0; flex-direction: column; align-items: stretch;
		gap: 0; background: var(--wt-bg); padding: 14px 22px 40px; overflow-y: auto;
		transform: translateX(100%); transition: transform 0.28s ease; z-index: 90; gap: 2px;
		border-top: 1px solid var(--wt-border);
	}
	.main-navigation.is-open .nav-menu { transform: translateX(0); }
	/* The header bar itself is always navy now, but this flyout panel is
	   still its own white surface — reset the link colours back to dark-
	   on-white here, since .nav-menu a's default (above) is now light text
	   meant for the navy bar, not this panel. */
	.nav-menu a {
		padding: 0.9rem 0.6rem; font-size: 1.06rem; border-bottom: 1px solid var(--wt-surface-2);
		color: var(--wt-ink); background: none;
	}
	.nav-menu a:hover, .nav-menu .current-menu-item > a {
		color: var(--wt-blue); background: var(--wt-surface); box-shadow: none;
	}
	.nav-menu li { position: static; }
	.nav-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		border: none; padding: 0 0 0 14px; display: none;
	}
	.nav-menu li.submenu-open > .sub-menu { display: block; }
	.nav-menu .mega-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		border: none; width: auto; padding: 0 0 0 14px; display: none;
		grid-template-columns: 1fr; gap: 18px;
	}
	.nav-menu li.submenu-open > .mega-menu { display: grid; }
	.mega-col { padding: 0; border-left: none; }
	.submenu-toggle {
		display: inline-grid; place-items: center; position: absolute; right: 22px;
		width: 34px; height: 34px; margin-top: 6px; background: var(--wt-surface);
		border: 1px solid var(--wt-border); border-radius: 8px; cursor: pointer; font-size: 1.2rem;
	}
	.nav-menu .menu-item-has-children { position: relative; }
}

@media (max-width: 620px) {
	body { font-size: 16px; }
	.news-grid { grid-template-columns: 1fr; }
	.footer-grid { flex-direction: column; gap: 1.8rem; }
	.trust-inline-list { grid-template-columns: 1fr; gap: 1.4rem; }
	.trust-inline-item { align-items: center; padding: 0; border-left: none !important; border-top: none !important; }
	.why-list { grid-template-columns: 1fr; }
	.services-grid { grid-template-columns: 1fr; }
	.plans-grid { grid-template-columns: 1fr; }
	.plan-card:nth-child(3) { grid-column: auto; }
	.utility-bar { font-size: 0.8rem; }
	.utility-contact { gap: 0.8rem; }
	.utility-actions .util-portal { display: none; }
	.hero { min-height: min(76vh, 560px); }
	.hero-inner { padding: 64px 22px; }
	/* The calc()-based min-height on the base .hero-copy-stack rule
	   undershoots badly at mobile widths (reported 15 July: title running
	   into the buttons on phones). Two compounding reasons: (1) below this
	   breakpoint .hero-title drops its 9.15em cap for max-width:100%, so
	   each of the 5 slides wraps to a different, width-dependent line
	   count instead of a consistent 3 — measured up to 4 lines / ~444px
	   tall on some slide+width combinations; (2) .hero-copy is
	   position:absolute, so when a slide's real content is taller than
	   the reserved box, it doesn't push .hero-actions down — it just
	   overlaps it directly, which is exactly the bug reported. Fixed with
	   a flat override sized to the worst case measured across every
	   width from 320-620px (444px content height, on the "Solar energy
	   for when the grid can't keep up." slide at exactly 320px), plus a
	   buffer. A few slides get a little extra breathing room above the
	   buttons at some widths as a result — better than any slide ever
	   overlapping them. */
	.hero-copy-stack { min-height: 470px; }
	.hero-title { max-width: 100%; }
	.hero-carousel-dots { bottom: 44px; }
	.post-card { grid-template-columns: 1fr; }
	.post-card-thumb img { height: 200px; }
	.section-head-row { flex-direction: column; align-items: flex-start; }

	/* Section vertical padding was still the desktop value (80-108px top
	   AND bottom) at every width — the grids inside collapse to a single
	   column below, but nothing reduced the space bracketing each
	   section, so on a phone it read as far too much dead air between
	   sections (15 July feedback: "many spaces inbetween the sections"). */
	.trust-strip { padding: 32px 0 36px; }
	.services { padding: 56px 0 64px; }
	.why { padding: 56px 0 64px; }
	.plans { padding: 56px 0; }
	.latest-news { padding: 56px 0; }
	.cta-inner { padding: 56px 20px; }
}