/* ==========================================================================
   TOSHWORLD RESOURCES INTERNATIONAL
   02 — GLOBAL: BASE · LAYOUT · TYPE · GLOBAL COMPONENTS
   Loaded on every page. Page-specific sections live in /assets/css/pages/.

   Order
     01 Reset & base          08 Header · nav · mega menu
     02 Page transitions      09 Mobile menu
     03 Layout                10 Page hero · breadcrumbs
     04 Print motifs          11 Media & image treatments
     05 Typography            12 Cards
     06 Buttons & links       13 Chips · filters · accordion · steps · stats
     07 Placeholder flags     14 Forms
                              15 CTA band · footer
                              16 WhatsApp system · mobile action bar
                              17 Lightbox
                              18 Reveal system · utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  overflow-x: clip;   /* safety net; `clip` creates no scroll container, so sticky still works */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 76px) + 1.5rem);
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }

/* Class selectors out-rank the UA [hidden] rule; restate it with force. */
[hidden] { display: none !important; }

/* One visible focus treatment, defined once, never removed. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
::selection { background: var(--tw-blue); color: var(--tw-navy); }

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  translate: -50% -120%;
  z-index: 999;
  padding: 0.85rem 1.5rem;
  background: var(--tw-blue);
  color: var(--tw-navy);
  font-weight: 700;
  font-size: var(--fs-small);
  transition: translate var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   02 — PAGE TRANSITIONS
   Cross-document View Transitions: pure CSS, zero JS, progressive. Browsers
   without support simply navigate normally. Paste into Elementor › Site
   Settings › Custom CSS unchanged.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 360ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 620ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; translate: 0 -12px; } }
@keyframes vt-in  { from { opacity: 0; translate: 0 18px; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* --------------------------------------------------------------------------
   03 — LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { max-width: 1080px; }
.shell--text   { max-width: 760px; }
.shell--wide   { width: min(100% - (var(--gutter) * 2), var(--shell-wide)); }

.section    { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--alt { background: var(--bg-alt); }

.on-dark { background: var(--bg); color: var(--fg); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split--wide-left  { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.split--wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.split--center { align-items: center; }
@media (max-width: 900px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
}
.sticky-col { position: sticky; top: calc(var(--header-h, 76px) + 2rem); }
@media (max-width: 900px) { .sticky-col { position: static; } }

.stack > * + * { margin-top: var(--stack, var(--space-5)); }

/* --------------------------------------------------------------------------
   04 — PRINT MOTIFS
   The visual language that makes this a print company, not a SaaS page:
   crop marks, the colour-control strip, registration marks, Swiss rules.
   -------------------------------------------------------------------------- */

/* Film grain — settles photography shot on different devices into one
   field and removes gradient banding on large navy areas. Decorative. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

/* Swiss hairline grid — four vertical rules behind a section. */
.rules {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.rules span { border-right: 1px solid var(--line-soft); }
.rules span:first-child { border-left: 1px solid var(--line-soft); }
.on-dark .rules span, .page-hero .rules span { border-color: var(--line-on-dark-soft); }
@media (max-width: 760px) { .rules { grid-template-columns: repeat(2, 1fr); } }

/* Crop marks — the corner trims printed outside every proof. Wrap any
   image frame in .crop. --crop-c sets the colour; --crop-o the offset. */
.crop { position: relative; }
.crop::before {
  --c: var(--crop-c, rgba(255, 255, 255, 0.45));
  --l: 14px;
  content: "";
  position: absolute;
  inset: calc(var(--crop-o, 12px) * -1);
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat;
}
.crop--ink { --crop-c: rgba(23, 32, 42, 0.35); }

/* Colour-control strip — the logo's palette as a printer's colour bar.
   The ONLY place magenta and yellow appear in the interface. */
.cstrip { display: inline-flex; gap: 3px; vertical-align: middle; }
.cstrip i { display: block; width: 10px; height: 10px; }
.cstrip i:nth-child(1) { background: var(--tw-blue); }
.cstrip i:nth-child(2) { background: var(--tw-magenta); }
.cstrip i:nth-child(3) { background: var(--tw-yellow); }
.cstrip i:nth-child(4) { background: var(--tw-orange); }
.cstrip i:nth-child(5) { background: var(--tw-purple); }
.cstrip--lg i { width: 18px; height: 6px; }

/* Registration mark */
.regmark { width: 22px; height: 22px; color: currentColor; opacity: 0.55; flex: none; }

/* --------------------------------------------------------------------------
   05 — TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.t-hero    { font-size: var(--fs-hero);    line-height: var(--lh-tight); letter-spacing: var(--ls-mega); font-weight: 600; }
.t-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--ls-mega); }
.t-h2      { font-size: var(--fs-h2); line-height: 1.08; }
.t-h3      { font-size: var(--fs-h3); }
.t-h4      { font-size: var(--fs-h4); }
.t-mega    { font-family: var(--font-display); font-size: var(--fs-mega); line-height: 0.92; letter-spacing: var(--ls-mega); font-weight: 600; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.body-copy { max-width: var(--measure); color: var(--fg-muted); text-wrap: pretty; }
.body-copy + .body-copy { margin-top: var(--space-5); }
.body-copy strong { color: var(--fg); font-weight: 700; }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  line-height: 1.5;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--plain::before { display: none; }
@media (max-width: 620px) {
  .eyebrow { letter-spacing: 0.13em; }
  .eyebrow::before { width: 18px; margin-right: 0.55rem; }
}

.accent { color: var(--accent-text); }
.on-dark .accent, .accent--bright { color: var(--tw-blue); }
.t-muted { color: var(--fg-muted); }
.num {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Section heading block — eyebrow + index + title, used site-wide. */
.sec-head { margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.sec-head__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.sec-head__idx {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.sec-head__split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.sec-head__split > :only-child { grid-column: 1 / -1; max-width: 20ch; }
@media (max-width: 860px) { .sec-head__split { grid-template-columns: 1fr; align-items: start; } }

/* Long-form reading (article body, service overview). */
.prose { max-width: var(--measure); color: var(--fg); font-size: var(--fs-body); line-height: 1.75; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: var(--fs-h3); margin-top: 2.2em; line-height: 1.2; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose p, .prose li { color: #344054; }
.on-dark .prose p, .on-dark .prose li { color: var(--fg-muted); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 0; display: grid; gap: 0.6em; }
.prose ul li { position: relative; padding-left: 1.5em; }
.prose ul li::before { content: ""; position: absolute; left: 0.2em; top: 0.72em; width: 6px; height: 6px; rotate: 45deg; background: var(--accent); }
.prose ol { counter-reset: li; }
.prose ol li { position: relative; padding-left: 2.4em; counter-increment: li; }
.prose ol li::before {
  content: counter(li, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--font-display); font-size: 0.8em; font-weight: 700; color: var(--accent-text);
}
.prose strong { font-weight: 700; color: var(--fg); }

/* --------------------------------------------------------------------------
   06 — BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--tw-blue);
  --btn-fg: var(--tw-navy);
  --btn-wipe: var(--tw-navy);
  --btn-fg-hover: var(--tw-white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 1rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* Directional wipe instead of a colour fade. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-wipe);
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--dur) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { scale: 1 1; }
.btn:hover, .btn:focus-visible { color: var(--btn-fg-hover); }
.btn svg { flex: none; }
.btn__arrow { transition: translate var(--dur) var(--ease-out); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { translate: 4px 0; }

/* Orange = conversion. Used for "Request a Quote" and nothing else. */
.btn--orange { --btn-bg: var(--tw-orange); }
.on-dark .btn--orange { --btn-wipe: var(--tw-white); --btn-fg-hover: var(--tw-navy); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-wipe: var(--fg);
  --btn-fg-hover: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.on-dark .btn--ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }

/* WhatsApp button — matches the system instead of a green blob. The
   WhatsApp green appears only as a small live dot. */
.btn--wa {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-wipe: var(--fg);
  --btn-fg-hover: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.on-dark .btn--wa { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.wa-glyph { position: relative; display: inline-flex; flex: none; }
.wa-dot {
  position: absolute;
  top: -2px; right: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tw-wa-green);
  box-shadow: 0 0 0 2px var(--bg);
}

.btn--lg { min-height: 58px; padding: 1.25rem 2.1rem; font-size: 0.875rem; }
.btn--sm { min-height: 42px; padding: 0.75rem 1.15rem; font-size: 0.75rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 480px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; }
}

/* Text link with a rule that draws in from the left. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  padding-block: 0.35rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.link:hover .btn__arrow, .link:focus-visible .btn__arrow { translate: 4px 0; }
.link--quiet { color: var(--fg); }

/* Round icon button (close, prev/next). */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg);
  flex: none;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* --------------------------------------------------------------------------
   07 — PLACEHOLDER FLAGS
   Everything awaiting real content is marked so it cannot ship by accident.
   Toggle all flags with TW_CONFIG.SHOW_FLAGS in assets/js/config.js, or
   press Shift + F in the browser while reviewing.
   -------------------------------------------------------------------------- */
.flag {
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(245, 166, 35, 0.14);
  color: #8A5B05;
  border: 1px solid rgba(245, 166, 35, 0.55);
  font-family: var(--font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 100%;
  vertical-align: 0.2em;
}
.on-dark .flag, .flag--dark { color: var(--tw-orange); background: rgba(245, 166, 35, 0.1); }
.show-flags .flag { display: inline-flex; }
.flag--abs { position: absolute; top: 1rem; right: 1rem; z-index: 4; }

/* Bracketed placeholder copy, e.g. "[Client name to confirm]". */
.ph-text { color: var(--fg-muted); font-style: italic; }
.show-flags .ph-text { background: repeating-linear-gradient(135deg, rgba(245,166,35,.1) 0 6px, transparent 6px 12px); }

/* Temporary stock images carry [data-ph]; flagged in review mode. */
.show-flags [data-ph]::after {
  content: "Temp image";
  position: absolute;
  right: 0.6rem; bottom: 0.6rem;
  z-index: 5;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(7, 20, 33, 0.72);
  color: var(--tw-orange);
  font: 700 0.5625rem/1 var(--font-text);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   08 — HEADER · NAV · MEGA MENU
   Transparent over the navy hero; solid glass once scrolled; retreats on
   scroll-down, returns on scroll-up.
   -------------------------------------------------------------------------- */
.header {
  --h: 88px;
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--fg-on-dark);
  transition: translate var(--dur) var(--ease-out);
}
.header__bar {
  position: relative;
  height: var(--h);
  display: flex;
  align-items: center;
  transition: height var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7, 20, 33, 0.6), transparent);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.header.is-stuck .header__bar,
.header.is-mega .header__bar {
  --h: 70px;
  background: rgba(7, 20, 33, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line-on-dark);
}
.header.is-stuck .header__bar::before, .header.is-mega .header__bar::before { opacity: 0; }
.header.is-hidden { translate: 0 -100%; }

.header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; flex: none; }
.brand__mark { width: 42px; height: auto; transition: width var(--dur) var(--ease-out); }
.header.is-stuck .brand__mark { width: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--tw-white);
}
.brand__sub {
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted-on-dark);
  margin-top: 0.34rem;
}

.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 2.1rem); }
.nav__item { position: relative; display: flex; align-items: center; gap: 0.2rem; }
.nav__link {
  position: relative;
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-on-dark);
  padding-block: 0.6rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.2rem;
  width: 100%; height: 1px;
  background: var(--tw-blue);
  scale: 0 1;
  transform-origin: right center;
  transition: scale var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--tw-white); }
.nav__link:hover::after, .nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { scale: 1 1; transform-origin: left center; }
.nav__link[aria-current="page"] { color: var(--tw-white); }

.nav__toggle {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  color: var(--fg-muted-on-dark);
  border-radius: 50%;
  transition: rotate var(--dur) var(--ease-out), color var(--dur-fast);
}
.nav__toggle:hover, .nav__toggle[aria-expanded="true"] { color: var(--tw-blue); }
.nav__toggle[aria-expanded="true"] { rotate: 180deg; }

.header__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.header__wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 42px;
  padding-inline: 0.8rem;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--fg-on-dark);
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.header__wa:hover { border-color: var(--tw-blue); color: var(--tw-white); background: rgba(22, 184, 242, 0.08); }
.header__wa .wa-dot { box-shadow: 0 0 0 2px var(--tw-navy); }
@media (max-width: 1280px) { .header__wa-label { display: none; } .header__wa { width: 42px; padding: 0; justify-content: center; } }

.burger {
  display: none;
  width: 46px; height: 46px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--tw-white);
  transition: translate var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.burger[aria-expanded="true"] span:nth-child(1) { translate: 0 6.5px; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -6.5px; rotate: -45deg; }

@media (max-width: 1100px) {
  .nav, .header__cta { display: none; }
  .burger { display: grid; }
}
@media (max-width: 380px) { .brand__sub { display: none; } }

/* Mega menu — Services. A disclosure panel: opens on hover (fine pointer),
   click, or keyboard; closes on Escape, outside click, or pointer exit. */
.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--tw-navy-soft);
  border-top: 1px solid var(--line-on-dark);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mega.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--dur-slow) var(--ease-out), visibility 0s; }
.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
  padding-block: clamp(2rem, 3.5vw, 3rem);
}
.mega__col { opacity: 0; translate: 0 10px; transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); }
.mega.is-open .mega__col { opacity: 1; translate: 0 0; transition-delay: calc(var(--i, 0) * 50ms + 120ms); }
.mega__cat {
  display: block;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-on-dark);
}
.mega__cat .num { color: var(--tw-blue); display: block; margin-bottom: 0.4rem; }
.mega__cat strong { font-family: var(--font-display); font-size: 1.0625rem; color: var(--tw-white); font-weight: 600; transition: color var(--dur-fast); }
.mega__cat:hover strong { color: var(--tw-blue); }
.mega__list { display: grid; gap: 0.15rem; }
.mega__list a {
  display: block;
  padding-block: 0.3rem;
  font-size: var(--fs-small);
  color: var(--fg-muted-on-dark);
  transition: color var(--dur-fast), translate var(--dur) var(--ease-out);
}
.mega__list a:hover, .mega__list a:focus-visible { color: var(--tw-white); translate: 4px 0; }
.mega__feature {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  isolation: isolate;
}
.mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mega__feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7,20,33,.95) 20%, rgba(7,20,33,.2)); }
.mega__feature p { color: var(--tw-white); font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; margin-bottom: var(--space-4); }
.mega__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-xs);
  color: var(--fg-muted-on-dark);
}

/* --------------------------------------------------------------------------
   09 — MOBILE MENU (full-screen)
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--tw-navy);
  color: var(--fg-on-dark);
  padding: calc(var(--header-h, 88px) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--dur-slow) var(--ease-out), visibility 0s; }
.menu__list { display: flex; flex-direction: column; }
.menu__item { overflow: hidden; border-bottom: 1px solid var(--line-on-dark-soft); }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8.5vw, 3rem);
  font-weight: 600;
  letter-spacing: var(--ls-mega);
  color: var(--tw-white);
  padding-block: 0.45rem;
  translate: 0 110%;
  transition: translate var(--dur-slow) var(--ease-out), color var(--dur-fast);
}
.menu.is-open .menu__link { translate: 0 0; transition-delay: calc(var(--i) * 50ms + 80ms); }
.menu__link:hover, .menu__link[aria-current="page"] { color: var(--tw-blue); }
.menu__num { font-size: 0.75rem; letter-spacing: var(--ls-wide); color: var(--tw-blue); font-variant-numeric: tabular-nums; }
.menu__sub-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-on-dark); border-radius: 50%; color: var(--tw-white); transition: rotate var(--dur) var(--ease-out); }
.menu__sub-toggle[aria-expanded="true"] { rotate: 45deg; }
.menu__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.menu__sub.is-open { grid-template-rows: 1fr; }
.menu__sub > div { overflow: hidden; }
.menu__sub ul { display: grid; gap: 0.2rem; padding: 0.25rem 0 1.25rem 2.1rem; }
.menu__sub a { display: block; padding-block: 0.4rem; color: var(--fg-muted-on-dark); font-size: 1rem; }
.menu__sub a:hover { color: var(--tw-white); }
.menu__foot { margin-top: auto; padding-top: var(--space-5); display: grid; gap: var(--space-4); }
.menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 400px) { .menu__actions { grid-template-columns: 1fr; } }
.menu__contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: var(--fs-small); color: var(--fg-muted-on-dark); }
.menu__contact a:hover { color: var(--tw-blue); }

/* --------------------------------------------------------------------------
   10 — PAGE HERO · BREADCRUMBS
   Every internal page opens on navy so the header behaves identically.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h, 88px) + clamp(3rem, 7vw, 6.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
  background: var(--tw-navy);
  color: var(--fg-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -10%; right: -15%;
  width: 70vw; height: 70vw;
  max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, rgba(22, 184, 242, 0.13), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.page-hero__inner { position: relative; z-index: 3; }
.page-hero__title { color: var(--tw-white); margin-block: var(--space-5) var(--space-5); max-width: 18ch; }
.page-hero__lead { color: var(--fg-muted-on-dark); max-width: 52ch; }
.page-hero__actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}
@media (max-width: 960px) { .page-hero__grid { grid-template-columns: 1fr; align-items: start; } }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: var(--fs-xs); color: var(--fg-muted-on-dark); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.6rem; }
.crumbs li + li::before { content: "/"; opacity: 0.45; }
.crumbs a { transition: color var(--dur-fast); }
.crumbs a:hover { color: var(--tw-blue); }
.crumbs [aria-current] { color: var(--fg-on-dark); }

/* Meta bar under a hero — label/value pairs in Swiss columns. */
.meta-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.meta-bar > div { padding: var(--space-5) var(--space-5) 0 0; }
.meta-bar dt { margin-bottom: 0.45rem; }
.meta-bar dd { margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--fg); font-weight: 500; }

/* --------------------------------------------------------------------------
   11 — MEDIA & IMAGE TREATMENTS
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--tw-grey-100);
}
.on-dark .media { background: var(--tw-navy-soft); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 img { aspect-ratio: 16 / 9; }
.media--3x2 img  { aspect-ratio: 3 / 2; }
.media--4x3 img  { aspect-ratio: 4 / 3; }
.media--4x5 img  { aspect-ratio: 4 / 5; }
.media--1x1 img  { aspect-ratio: 1; }
.media--tall img { aspect-ratio: 3 / 4; }
/* A light consistent grade so mixed photography reads as one set. */
.media--graded img { filter: saturate(0.92) contrast(1.05) brightness(0.94); }
.media--hover img { transition: scale var(--dur-slow) var(--ease-out); }
.media--hover:hover img, a:hover > .media--hover img, a:focus-visible > .media--hover img { scale: 1.05; }

/* Mask reveal — the frame opens; the image inside is already in place. */
[data-mask] { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
[data-mask].is-in { clip-path: inset(0 0 0 0); }
[data-mask="left"] { clip-path: inset(0 100% 0 0); }
[data-mask="left"].is-in { clip-path: inset(0 0 0 0); }

/* Floating preview that trails the pointer over list rows (B8). */
.hover-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-float);
  width: 300px;
  aspect-ratio: 4 / 3;
  margin: -110px 0 0 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: 0.9;
  box-shadow: var(--shadow-deep);
  transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out);
}
.hover-preview.is-on { opacity: 1; scale: 1; }
.hover-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Sticky in-page sub-navigation (services archive, about). Scroll-spy
   marks the active link; scrolls sideways on phones. */
.subnav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: top var(--dur) var(--ease-out);
}
/* Sit below the header while it is showing; take its place when it retreats. */
body:has(.header.is-stuck:not(.is-hidden)) .subnav { top: 70px; }
.subnav__inner { display: flex; align-items: center; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a:not(.btn) {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding-block: 1.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
  transition: color var(--dur-fast);
}
.subnav a:not(.btn) .num { font-size: 0.6875rem; color: inherit; }
.subnav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tw-blue); scale: 0 1; transform-origin: left; transition: scale var(--dur) var(--ease-out); }
.subnav a:not(.btn):hover, .subnav a.is-active { color: var(--fg); }
.subnav a.is-active::after { scale: 1 1; }
.subnav .btn { margin-block: 0.5rem; }
.subnav__cta { margin-left: auto; flex: none; }

figcaption.cap {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
figcaption.cap .num { flex: none; }

/* --------------------------------------------------------------------------
   12 — CARDS
   -------------------------------------------------------------------------- */

/* The whole card is one link; flex so the "more" link can sit at the foot. */
.card-link { display: flex; flex-direction: column; height: 100%; }

/* Service card — image-led link card (related services, archive grids). */
.svc-card { height: 100%; }
.svc-card__media { margin-bottom: var(--space-5); }
.svc-card__media img { aspect-ratio: 4 / 3; }
.svc-card__cat { margin-bottom: 0.6rem; }
.svc-card__title { font-size: var(--fs-h4); letter-spacing: var(--ls-tight); transition: color var(--dur-fast); }
.svc-card:hover .svc-card__title { color: var(--accent-text); }
.svc-card__text { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.6; }
.svc-card__more { margin-top: auto; padding-top: var(--space-4); }

/* Editorial project card (portfolio grids, related work). */
.proj { display: block; }
.proj > a { display: block; }
.proj__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--tw-grey-100); }
.on-dark .proj__media { background: var(--tw-navy-soft); }
.proj__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scale: 1.06; transition: scale var(--dur-slow) var(--ease-out); }
.proj:hover .proj__media img, .proj a:focus-visible .proj__media img { scale: 1.12; }
.proj__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 20, 33, 0.5), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.proj:hover .proj__media::after { opacity: 1; }
.proj__num {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: 0.4rem 0.65rem;
  background: rgba(7, 20, 33, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--tw-white);
  font-variant-numeric: tabular-nums;
}
.proj__view {
  position: absolute;
  right: 1rem; bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--tw-white);
  color: var(--tw-navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0;
  translate: 0 8px;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}
.proj:hover .proj__view, .proj a:focus-visible .proj__view { opacity: 1; translate: 0 0; }
.proj__meta { margin-top: var(--space-5); }
.proj__cat { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.proj__name { margin-top: 0.55rem; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: var(--ls-tight); transition: color var(--dur-fast) var(--ease-out); }
.proj:hover .proj__name { color: var(--accent-text); }
.proj__services {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.proj__services li { display: flex; align-items: center; gap: 0.6rem; }
.proj__services li + li::before { content: ""; width: 3px; height: 3px; rotate: 45deg; background: var(--fg-muted); opacity: 0.6; }

/* Article card. */
.post-card { height: 100%; }
.post-card__media { margin-bottom: var(--space-5); }
.post-card__media img { aspect-ratio: 3 / 2; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; font-size: var(--fs-xs); color: var(--fg-muted); }
.post-card__meta .label { color: var(--accent-text); }
.post-card__title { margin-top: var(--space-3); font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--ls-tight); transition: color var(--dur-fast); }
.post-card:hover .post-card__title { color: var(--accent-text); }
.post-card__excerpt { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.6; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem); }
@media (max-width: 960px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   13 — CHIPS · FILTERS · ACCORDION · STEPS · STATS
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-muted);
  line-height: 1.1;
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
a.chip:hover { border-color: var(--accent); color: var(--fg); }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.filter sup { font-size: 0.625rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; top: -0.1em; }
.filter:hover { border-color: var(--fg); }
.filter[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filter[aria-pressed="true"] sup { color: inherit; opacity: 0.7; }
[data-filter-item] { transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out); }
[data-filter-item].is-leaving { opacity: 0; scale: 0.97; }

/* FAQ accordion — native <details>, so it works with no JS and maps to
   Elementor's Accordion widget. Height animates where supported. */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: clamp(1.25rem, 2vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-text); }
.faq__item .num { align-self: start; padding-top: 0.35rem; }
.faq__sign {
  position: relative;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out);
}
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; background: currentColor; }
.faq__sign::before { width: 11px; height: 1.5px; }
.faq__sign::after { width: 1.5px; height: 11px; transition: scale var(--dur) var(--ease-out); }
.faq__item[open] .faq__sign { background: var(--tw-blue); border-color: var(--tw-blue); color: var(--tw-navy); rotate: 180deg; }
.faq__item[open] .faq__sign::after { scale: 0; }
.faq__answer { padding: 0 0 var(--space-6) calc(3rem + var(--space-4)); color: var(--fg-muted); max-width: 70ch; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }
@media (max-width: 620px) {
  .faq__item summary { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--space-3); }
  .faq__answer { padding-left: 0; }
}

/* Process steps — horizontal rule with numbered stops; stacks on mobile. */
.steps { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--space-5); counter-reset: step; }
.step-item { position: relative; padding-top: var(--space-7); }
.step-item::before { content: ""; position: absolute; top: 12px; left: 0; right: calc(var(--space-5) * -1); height: 1px; background: var(--line); }
.step-item:last-child::before { right: 0; }
.step-item::after {
  content: "";
  position: absolute;
  top: 7px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--fg-muted);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.step-item.is-in::after { background: var(--tw-blue); border-color: var(--tw-blue); }
.step-item .num { display: block; margin-bottom: var(--space-3); }
.step-item h3 { font-size: 1.125rem; letter-spacing: var(--ls-tight); line-height: 1.3; }
.step-item p { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.6; }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step-item { padding: 0 0 var(--space-6) var(--space-7); }
  .step-item::before { top: 12px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .step-item:last-child::before { display: none; }
}

/* Stats — verified figures only. */
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--ls-mega);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.stat__suffix { color: var(--accent); }
.stat__label { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.stat__note { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.55; max-width: 34ch; }

/* --------------------------------------------------------------------------
   14 — FORMS
   Structured so Elementor Forms can be styled to match with Custom CSS.
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.5rem; margin-bottom: var(--space-5); }
.field > label, .field .field__label { font-size: var(--fs-small); font-weight: 700; color: var(--fg); }
.field .hint, .field__hint { font-size: var(--fs-xs); color: var(--fg-muted); font-weight: 400; }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
  width: 100%;
  min-height: 52px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--fg);
  font-size: 1rem;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: #C3CAD5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--tw-blue); background-color: var(--bg); box-shadow: 0 0 0 3px rgba(22, 184, 242, 0.18); }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field [aria-invalid="true"] { border-color: #D14343; box-shadow: 0 0 0 3px rgba(209, 67, 67, 0.12); }
.field__error { font-size: var(--fs-xs); color: #B42318; font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.on-dark .field input, .on-dark .field textarea, .on-dark .field select { background-color: rgba(255,255,255,.04); }

/* Choice tiles (checkbox / radio). */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.choice span::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  border: 1.5px solid var(--fg-muted);
  border-radius: 3px;
  background: var(--bg) center / 10px no-repeat;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice input:hover + span { border-color: var(--fg-muted); }
.choice input:checked + span { border-color: var(--tw-blue); background: rgba(22, 184, 242, 0.08); }
.choice input:checked + span::before {
  border-color: var(--tw-blue);
  background-color: var(--tw-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23071421' stroke-width='2'/%3E%3C/svg%3E");
}
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: var(--focus-offset); }

.form-note { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.6; }
.form-status { font-size: var(--fs-small); font-weight: 600; color: #B42318; min-height: 1.5em; }

/* --------------------------------------------------------------------------
   15 — CTA BAND · FOOTER
   -------------------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.cta::before {
  content: "";
  position: absolute;
  top: var(--my, 50%); left: var(--mx, 50%);
  translate: -50% -50%;
  width: 70vw; height: 70vw;
  max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, rgba(22, 184, 242, 0.2), transparent 60%);
  pointer-events: none;
  z-index: 0;
  transition: top 1200ms var(--ease-out), left 1200ms var(--ease-out);
}
.cta__inner { position: relative; z-index: 3; display: grid; justify-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.cta__title { color: var(--tw-white); max-width: 16ch; }
.cta__title .line { display: block; }
.cta__lead { color: var(--fg-muted-on-dark); max-width: 48ch; text-align: center; margin-inline: auto; }
.cta__actions { justify-content: center; margin-top: var(--space-2); }
.cta__alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: center;
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
  width: min(100%, 620px);
}
.cta__alt a { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--fs-small); color: var(--fg-muted-on-dark); transition: color var(--dur-fast); }
.cta__alt a:hover { color: var(--tw-blue); }

/* Inline conversion strip — used mid-page on service/project templates. */
.convert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5) var(--space-7);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--tw-navy);
  color: var(--fg-on-dark);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.convert::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(22,184,242,.18), transparent 65%); z-index: -1; }
.convert h2, .convert h3 { color: var(--tw-white); font-size: var(--fs-h3); max-width: 24ch; }
.convert p { color: var(--fg-muted-on-dark); margin-top: 0.5rem; max-width: 52ch; font-size: var(--fs-small); }
.convert .eyebrow { margin-top: 0; font-size: var(--fs-eyebrow); color: var(--tw-blue); }
@media (max-width: 860px) { .convert { grid-template-columns: 1fr; } }

.footer {
  position: relative;
  background: var(--tw-navy);
  color: var(--fg-on-dark);
  border-top: 1px solid var(--line-on-dark);
  padding-top: clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer__brand { display: grid; gap: var(--space-5); align-content: start; }
.footer__blurb { color: var(--fg-muted-on-dark); font-size: var(--fs-small); max-width: 36ch; line-height: 1.65; }
.footer__col h2 {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted-on-dark);
  margin-bottom: var(--space-5);
}
.footer__col li + li { margin-top: 0.7rem; }
.footer__col li > a, .footer__col address, .footer__col li > span {
  font-size: var(--fs-small);
  color: var(--fg-on-dark);
  line-height: 1.6;
  transition: color var(--dur-fast);
}
.footer__col a:hover { color: var(--tw-blue); }
.footer__col .t-muted { color: var(--fg-muted-on-dark); }
.social { display: flex; gap: 0.5rem; }
.social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  color: var(--fg-on-dark);
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.social a:hover { border-color: var(--tw-blue); color: var(--tw-blue); }
.footer__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 14.5vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  translate: 0 12%;
  pointer-events: none;
}
.footer__bar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-xs);
  color: var(--fg-muted-on-dark);
}
.footer__bar nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer__bar a:hover { color: var(--tw-blue); }
@media (max-width: 960px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16 — WHATSAPP SYSTEM · MOBILE ACTION BAR
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}
.wa-float.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.wa-float.is-visible.is-typing { opacity: 0; translate: 0 16px; pointer-events: none; }
.wa-float__btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding-inline: 1.05rem;
  border-radius: var(--radius-pill);
  background: rgba(7, 20, 33, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--tw-white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -12px rgba(7, 20, 33, 0.55);
  transition: gap var(--dur) var(--ease-out), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.wa-float__btn .wa-glyph { position: relative; }
.wa-float__btn .wa-dot { box-shadow: 0 0 0 2px var(--tw-navy); }
.wa-float__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: max-width var(--dur-slow) var(--ease-out);
}
.wa-float__btn:hover, .wa-float__btn[aria-expanded="true"] { gap: 0.6rem; background: var(--tw-navy); box-shadow: 0 0 0 1px var(--tw-blue), 0 18px 40px -12px rgba(7, 20, 33, 0.55); }
.wa-float__btn:hover .wa-float__label, .wa-float__btn[aria-expanded="true"] .wa-float__label { max-width: 10rem; }
.wa-float__panel {
  width: min(340px, calc(100vw - 2rem));
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--tw-navy);
  color: var(--fg-on-dark);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  transform-origin: bottom right;
  animation: wa-in var(--dur) var(--ease-out);
}
@keyframes wa-in { from { opacity: 0; scale: 0.96; translate: 0 8px; } }
.wa-float__head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line-on-dark); }
.wa-float__head img { width: 36px; height: auto; }
.wa-float__head strong { display: block; font-family: var(--font-display); font-size: 0.9375rem; color: var(--tw-white); }
.wa-float__head span { display: block; margin-top: 0.2rem; font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-muted-on-dark); }
.wa-float__intro { font-size: var(--fs-xs); color: var(--fg-muted-on-dark); margin-bottom: var(--space-3); }
.wa-float__opts { display: grid; gap: 0.4rem; }
.wa-float__opts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-on-dark);
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.wa-float__opts a:hover, .wa-float__opts a:focus-visible { border-color: var(--tw-blue); background: rgba(22, 184, 242, 0.08); color: var(--tw-white); }
.wa-float__opts a.is-context { border-color: rgba(22, 184, 242, 0.5); }

/* Sticky conversion bar — templates only, phones only. */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .has-mobile-bar .mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-float);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem max(0.75rem, env(safe-area-inset-left)) max(0.6rem, env(safe-area-inset-bottom));
    background: rgba(7, 20, 33, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 var(--line-on-dark);
    translate: 0 110%;
    transition: translate var(--dur) var(--ease-out);
  }
  .has-mobile-bar .mobile-bar.is-visible { translate: 0 0; }
  .has-mobile-bar .mobile-bar .btn { min-height: 48px; padding-inline: 0.75rem; }
  .has-mobile-bar .wa-float { display: none; }
  .has-mobile-bar .footer { padding-bottom: 72px; }
}

/* --------------------------------------------------------------------------
   17 — LIGHTBOX (native <dialog>)
   -------------------------------------------------------------------------- */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: rgba(7, 20, 33, 0.96);
  color: var(--tw-white);
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-4); animation: lb-in var(--dur) var(--ease-out); }
.lightbox::backdrop { background: transparent; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--fg-muted-on-dark); }
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }
.lightbox__nav { display: flex; justify-content: center; gap: var(--space-3); }
.lightbox .icon-btn { border-color: var(--line-on-dark); color: var(--tw-white); }
.lightbox .icon-btn:hover { background: var(--tw-white); color: var(--tw-navy); }
[data-lightbox] { cursor: zoom-in; }

/* --------------------------------------------------------------------------
   18 — REVEAL SYSTEM · UTILITIES
   One [data-reveal] attribute + one observer drives every entrance.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; translate: 0 0; }

/* Line-by-line headline reveal: each line rides up from behind a mask. */
.lines { display: block; }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines .line > span { display: block; translate: 0 105%; transition: translate var(--dur-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
.lines.is-in .line > span, .is-ready [data-lines-load] .line > span { translate: 0 0; }

/* Without JS, nothing is hidden. */
.no-js [data-reveal] { opacity: 1; translate: 0 0; }
.no-js .lines .line > span { translate: 0 0; }
.no-js [data-mask] { clip-path: none; }
.no-js .wa-float { opacity: 1; translate: 0 0; pointer-events: auto; }

.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }