/*
  Bizwise site, v2.
  THESIS: one team for the paperwork behind a Singapore business and the life
  around it, told as a journey (Start, Run, Grow, Live & move), not a catalogue.
  OWN-WORLD: white pages, deep navy ink, the logo's four ribbon colours as
  wayfinding, Bizwise blue for structure, WhatsApp green for the one action.
  Bricolage Grotesque headlines, Geist text. Rounded, friendly, uncluttered.
  STORY: see the range in one chat, trust the registrations, message us.
  FIRST VIEWPORT: headline and WhatsApp button left; an example WhatsApp
  conversation on a blue stage right.
*/

:root {
  --ink: #0b1b2e;
  --ink-2: #33445a;
  --muted: #5b6878;
  --line: #e3e8ee;
  --bg: #f2f4f7;   /* light grey page base; sections set their own colour */
  --soft: #eceff3;

  --blue: #0877dc;
  --blue-ink: #0660b3;
  --amber: #f5b400;
  --red: #e51d21;
  --green: #82bd11;
  --cyan: #48c0ed;
  --wa: #25d366;
  --wa-ink: #05351a;

  /* Section accent: set by data-colour, defaults to Bizwise blue */
  --c: var(--blue);
  --c-soft: #e8f2fd;
  --c-ink: var(--blue-ink);

  --display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --wrap: 1240px;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --nav-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 18px 44px rgba(11, 27, 46, 0.1);
}

[data-colour="amber"] { --c: var(--amber); --c-soft: #fff5d6; --c-ink: #7a5900; --c-on: var(--ink); }
[data-colour="red"] { --c: var(--red); --c-soft: #fde9e9; --c-ink: #a3111a; --c-on: #fff; }
[data-colour="blue"] { --c: var(--blue); --c-soft: #e8f2fd; --c-ink: var(--blue-ink); --c-on: #fff; }
[data-colour="green"] { --c: var(--green); --c-soft: #eef7dc; --c-ink: #476a00; --c-on: var(--ink); }
[data-colour="cyan"] { --c: var(--cyan); --c-soft: #e3f6fd; --c-ink: #0a6a8f; --c-on: var(--ink); }
[data-colour="ink"] { --c: var(--ink); --c-soft: #eef1f5; --c-ink: var(--ink); --c-on: #fff; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 1rem); }
/* Chinese pages: Latin letters keep the brand fonts, Chinese falls through to PingFang SC / Noto Sans SC. */
:root:lang(zh) {
  --display: "Bricolage Grotesque", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --body: "Geist", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
:lang(zh) body { line-height: 1.75; }
:lang(zh) :is(h1, h2, h3, .drop__headline, .mobile__group summary, .mobile__top) { letter-spacing: 0; line-height: 1.3; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }
/* Section colours: grey (default), white, a tint of the area colour, navy */
.bg-white { background: #fff; }
.bg-tint { background: var(--c-soft); }
/* Left/right padding that lines content up with .wrap inside a full-bleed section */
:root { --edge: max(var(--pad), (100vw - var(--wrap)) / 2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.7rem 1rem; border-radius: var(--r-sm); background: var(--ink); color: #fff; transform: translateY(-200%); }
.skip:focus { transform: none; }

.icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--wa { stroke-width: 1.6; }
.icon--wa .fill { fill: currentColor; stroke: none; }

.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; color: var(--c-ink); font-size: 0.92rem; font-weight: 600; }
.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); }
.lede { max-width: 38rem; margin-top: 1.25rem; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; }

.text-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--blue-ink); font-weight: 600; text-decoration: none; transition: gap 200ms var(--ease); }
.text-link:hover { gap: 0.65rem; }

/* ---------- Buttons ---------- */

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.9rem; padding: 0.7rem 1.25rem; border: 1px solid transparent; border-radius: 999px; font: 600 0.95rem/1 var(--body); text-decoration: none; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 200ms var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn--sm { min-height: 2.5rem; padding: 0.55rem 1rem; font-size: 0.88rem; }
.btn--lg { min-height: 3.3rem; padding: 0.85rem 1.5rem; font-size: 1rem; }
.btn--wa { background: var(--wa); color: var(--wa-ink); }
.btn--wa:hover { background: #1fc05c; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--blue-ink); }
.btn--ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #eef4fb; }

/* ---------- Navigation ---------- */

/* Solid background: a backdrop-filter here would trap the fixed mobile menu inside the bar */
.nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); background: #fff; }
.nav__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; width: min(100% - (var(--pad) * 2), 1360px); height: var(--nav-h); margin-inline: auto; }
.nav__logo img { width: auto; height: 40px; }
.nav__menu ul { display: flex; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.nav__link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.8rem; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 0.95rem/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link.is-current { background: var(--soft); }
.nav__link .icon--chev { width: 0.95em; height: 0.95em; color: var(--muted); transition: transform 200ms var(--ease); }
.nav__link[aria-expanded="true"] .icon--chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 1rem; }
.nav__phone { color: var(--ink-2); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav__phone:hover { color: var(--blue-ink); }
.langmenu { position: relative; }
.langmenu__btn { justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.langmenu__btn .icon--globe { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langmenu__list { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 2; display: grid; gap: 2px; min-width: 200px; padding: 0.4rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -18px rgb(15 23 42 / 0.35); }
.langmenu__list[hidden] { display: none; }
.langmenu__list:not([hidden]) { animation: drop-in-narrow 220ms var(--ease); }
.langmenu__list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem; border-radius: 10px; color: var(--ink-2); font: 500 0.95rem/1.2 var(--body); text-decoration: none; white-space: nowrap; }
.langmenu__list a:hover { background: var(--soft); color: var(--ink); }
.langmenu__list a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.langmenu__list .icon--check { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2; }
.nav__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.nav__toggle > span:not(.sr-only) { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 200ms var(--ease); }
.nav__toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Dropdowns hang from the bar, centred under the menu */
.drop { position: absolute; top: calc(100% + 0.6rem); left: 50%; width: min(1320px, 100vw - 3rem); transform: translateX(-50%); }
.drop[hidden] { display: none; }
.drop:not([hidden]) { animation: drop-in 220ms var(--ease); }
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -6px); } }
.drop--narrow { left: auto; right: max(1.5rem, (100vw - 1360px) / 2); width: 460px; transform: none; }
.drop--narrow:not([hidden]) { animation-name: drop-in-narrow; }
@keyframes drop-in-narrow { from { opacity: 0; transform: translateY(-6px); } }
.drop__inner { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 28px 70px rgba(11, 27, 46, 0.16); }
.drop--narrow .drop__inner { grid-template-columns: 1fr; }
.drop__body--groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.drop__group--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; align-content: start; }
.drop__label { margin: 0.5rem 1rem 0.5rem; color: var(--c-ink); font-size: 0.8rem; font-weight: 600; }
/* Each menu item: tinted icon square in the area colour, name, one-line note */
.drop__link { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.15rem; align-items: start; padding: 0.9rem 1rem; border-radius: 12px; text-decoration: none; }
.drop__link strong { align-self: end; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.drop__link > span:last-child { grid-column: 2; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.drop__icon { display: grid; grid-row: span 2; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--c-soft); color: var(--c-ink); transition: background 160ms ease, color 160ms ease; }
.drop__icon .icon { width: 1.3rem; height: 1.3rem; stroke-width: 1.7; }
.drop__link:hover { background: var(--soft); }
.drop__link:hover strong { color: var(--c-ink); }
.drop__link:hover .drop__icon { background: var(--c); color: var(--c-on); }
/* Side panel: the area's photo under a dark overlay tinted with the area colour */
.drop__aside { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; min-height: 20rem; padding: 1.75rem; overflow: hidden; border-radius: 16px; background: var(--ink); color: #fff; isolation: isolate; }
.drop__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.drop__aside::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 32, 0.15) 0%, rgba(6, 18, 32, 0.6) 45%, rgba(6, 18, 32, 0.92) 100%), linear-gradient(0deg, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%); content: ""; }
.drop:not([hidden]) .drop__img { animation: drop-zoom 1200ms var(--ease) both; }
@keyframes drop-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.drop__aside .drop__label { margin: 0; color: #fff; opacity: 0.85; }
.drop__headline { font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.drop__aside .text-link { color: #fff; }
.drop__help { display: flex; gap: 0.6rem; align-items: flex-start; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.85); font-size: 0.86rem; text-decoration: none; }
.drop__help .icon { margin-top: 0.15rem; color: var(--wa); }
.drop__help b { color: #fff; }
.drop__help:hover b { text-decoration: underline; }

/* Mobile menu */
/* data-lenis-prevent on the menu lets it scroll natively while smooth scrolling is paused */
.mobile { position: fixed; inset: var(--nav-h) 0 0; z-index: 99; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; }
.mobile[hidden] { display: none; }
.mobile__inner { display: grid; gap: 0.25rem; padding: 1rem var(--pad) 2rem; }
.mobile__group { border-bottom: 1px solid var(--line); }
.mobile__group summary, .mobile__top { display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 0; font: 600 1.2rem/1.2 var(--display); letter-spacing: -0.02em; list-style: none; cursor: pointer; text-decoration: none; }
.mobile__group summary::-webkit-details-marker { display: none; }
.mobile__top { border-bottom: 1px solid var(--line); }
.mobile__group[open] summary .icon--chev { transform: rotate(180deg); }
.mobile__group div { display: grid; padding: 0 0 1rem; }
.mobile__group div a { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; color: var(--ink-2); text-decoration: none; }
.mobile__group div a .drop__icon { grid-row: auto; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 9px; }
.mobile__group div a .drop__icon .icon { width: 1.1rem; height: 1.1rem; }
.mobile__all { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--blue-ink) !important; font-weight: 600; }
.mobile .btn { margin-top: 1.25rem; }
body.menu-open { overflow: hidden; }

/* ---------- Homepage hero ---------- */

/* Hero carousel: photos cross-fade with a slow zoom, the kicker, title and
   subtext swap with them, the buttons stay fixed. site.js moves .is-active. */
.hero { padding: 0; }
.hero__card { position: relative; display: flex; align-items: flex-end; height: clamp(600px, calc(100svh - var(--nav-h)), 980px); overflow: hidden; background: var(--ink); isolation: isolate; }
.hero__slides, .hero__slide { position: absolute; inset: 0; margin: 0; }
.hero__slide { opacity: 0; transition: opacity 1000ms var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.hero__slide.is-active .hero__photo { animation: hero-zoom 8s linear both; }
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(0deg, rgba(6, 18, 32, 0.9) 0%, rgba(6, 18, 32, 0.55) 36%, rgba(6, 18, 32, 0.08) 66%), linear-gradient(90deg, rgba(6, 18, 32, 0.4) 0%, rgba(6, 18, 32, 0) 50%); }
.hero__content { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.5rem 4rem; align-items: end; width: 100%; padding: clamp(1.5rem, 3.5vw, 3rem); color: #fff; }
/* Stacked in one grid cell so the block keeps the tallest slide's height */
/* Only the active slide's title and text take up space, so they always sit tight together,
   anchored above the buttons; the outgoing ones fade out in place at the bottom. */
.hero__texts, .hero__subs { position: relative; display: grid; }
.hero__text:not(.is-active), .hero__sub:not(.is-active) { position: absolute; right: 0; bottom: 0; left: 0; }
.hero__text, .hero__sub { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 700ms var(--ease), visibility 0s linear 700ms; }
.hero__text.is-active, .hero__sub.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 150ms, 150ms, 0s; }
.hero__text { align-self: end; }
.hero__kicker { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; color: #fff; font-size: 0.95rem; font-weight: 600; }
.hero__title { max-width: 15ch; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.02; }
.hero__sub { align-self: end; max-width: 30rem; color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; }
.hero__side .hero__actions { margin-top: 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn--glass { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--glass:hover { border-color: #fff; background: rgba(255, 255, 255, 0.2); }
.ribbon { display: inline-flex; gap: 3px; }
.ribbon i { width: 6px; height: 16px; border-radius: 3px; }
.ribbon i:nth-child(1) { background: var(--amber); }
.ribbon i:nth-child(2) { background: var(--red); }
.ribbon i:nth-child(3) { background: var(--blue); }
.ribbon i:nth-child(4) { background: var(--green); }
.tick { position: relative; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #e3f7e9; }
.tick::after { position: absolute; top: 0.27rem; left: 0.4rem; width: 0.3rem; height: 0.5rem; border: solid #0f9d4a; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; }


/* One chat: the example conversation, now its own section */
.onechat__wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.onechat__copy h2 { max-width: 14ch; }
.onechat__copy > p:not(.eyebrow) { max-width: 32rem; margin: 1.25rem 0 2rem; color: var(--muted); font-size: 1.1rem; }
.onechat .eyebrow { color: var(--ink-2); }

.hero__stage { position: relative; display: grid; place-items: center; min-height: 560px; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; border-radius: 32px; background: var(--blue); }
.stage__shapes i { position: absolute; border-radius: 50%; }
.stage__shapes .s1 { top: -90px; right: -70px; width: 280px; height: 280px; background: var(--amber); }
.stage__shapes .s2 { bottom: -60px; left: -50px; width: 190px; height: 190px; background: var(--red); }
.stage__shapes .s3 { right: 8%; bottom: -110px; width: 240px; height: 240px; border: 34px solid var(--green); }

.chat { position: relative; z-index: 1; width: min(100%, 410px); overflow: hidden; border-radius: 24px; background: #f0f2f5; box-shadow: 0 34px 70px rgba(2, 28, 58, 0.38), 0 4px 12px rgba(2, 28, 58, 0.18); }
.chat__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; background: #fff; }
.chat__head img { width: 40px; height: 40px; padding: 4px; border: 1px solid var(--line); border-radius: 50%; object-fit: contain; }
.chat__head strong { display: block; font-size: 0.98rem; }
.chat__head span { color: var(--muted); font-size: 0.78rem; }
.chat__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem; }
.chat__day { align-self: center; padding: 0.25rem 0.7rem; border-radius: 999px; background: #fff; color: var(--muted); font-size: 0.72rem; font-weight: 500; }
.bubble { max-width: 86%; padding: 0.65rem 0.85rem; border-radius: 16px; font-size: 0.9rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(11, 27, 46, 0.08); }
.bubble--in { align-self: flex-start; border-top-left-radius: 4px; background: #fff; }
.bubble--out { align-self: flex-end; border-top-right-radius: 4px; background: #d9fdd3; }
.chat__tags { display: flex; gap: 0.35rem; align-self: flex-end; }
.tag { padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.tag--amber { background: #fff1c2; color: #6b4e00; }
.tag--green { background: #e4f3c9; color: #3f5e00; }
.chat__input { display: flex; justify-content: space-between; align-items: center; margin: 0.25rem 1rem 1rem; padding: 0.75rem 1rem; border-radius: 999px; background: #fff; color: var(--muted); font-size: 0.86rem; }
.chat__input .icon { width: 1.3rem; height: 1.3rem; color: #0f9d4a; }

/* Authorities strip */
.agencies { border-block: 1px solid var(--line); background: var(--soft); }
.agencies__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2.25rem; padding-block: 1.4rem; }
.agencies p { color: var(--muted); font-size: 0.9rem; }
.agencies ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.agencies li { color: var(--ink-2); font: 600 1.05rem/1 var(--display); letter-spacing: 0.01em; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(4.5rem, 8vw, 7rem); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head > p:not(.eyebrow) { margin-top: 1rem; color: var(--muted); font-size: 1.08rem; }
.section__head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; max-width: none; }
.section__head--split > div { max-width: 42rem; }
.section__head--split > p { max-width: 26rem; margin: 0; color: var(--muted); font-size: 1.05rem; }

/* Five areas as photo cards, each with its icon badge in the area colour */
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.areas { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.areas__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.area { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; text-decoration: none; transition: box-shadow 220ms var(--ease), transform 220ms var(--ease); }
.area:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.area__media { position: relative; display: block; overflow: hidden; margin-bottom: 0.6rem; border-radius: 16px; aspect-ratio: 4 / 5; background: var(--soft); }
.area__img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.area:hover .area__img { transform: scale(1.05); }
.area__badge { position: absolute; top: 0.7rem; left: 0.7rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--c); color: var(--c-on); box-shadow: 0 4px 12px rgba(11, 27, 46, 0.18); }
.area__badge .icon { width: 1.3rem; height: 1.3rem; }
.area__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-inline: 0.5rem; }
.area__foot strong { font: 600 1.15rem/1.2 var(--display); letter-spacing: -0.02em; }
.area__go { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.area:hover .area__go { border-color: var(--c); background: var(--c); color: var(--c-on); }
.area__note { padding-inline: 0.5rem; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }

/* Wide photo banner */
.banner { padding: 0; }
.banner__card { position: relative; display: flex; align-items: flex-end; min-height: clamp(440px, 48vw, 660px); overflow: hidden; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.banner__card::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 18, 32, 0.78) 0%, rgba(6, 18, 32, 0.35) 48%, rgba(6, 18, 32, 0) 75%); content: ""; }
.banner__copy { position: relative; z-index: 1; max-width: calc(34rem + var(--edge)); padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(3rem, 6vw, 5rem) var(--edge); color: #fff; }
.banner__copy p { margin: 1rem 0 1.75rem; color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; }

/* Journey: a pinned photo on the left that changes as each chapter on the
   right reaches the middle of the screen (site.js toggles .is-active). */
.journey__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.journey__visual { position: sticky; top: calc(var(--nav-h) + 2rem); }
.journey__frame { position: relative; height: min(calc(100vh - var(--nav-h) - 4rem), 680px); overflow: hidden; border-radius: 28px; background: var(--soft); }
.journey__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity 600ms var(--ease), transform 900ms var(--ease); }
.journey__shot.is-active { opacity: 1; transform: none; }
.journey__img { width: 100%; height: 100%; object-fit: cover; }
.journey__shot figcaption { position: absolute; bottom: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem 0.5rem 0.5rem; border-radius: 999px; background: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(11, 27, 46, 0.18); }
.journey__shot figcaption span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c); color: var(--c-on); font: 700 0.85rem/1 var(--display); }
.chapters { margin: 0; padding: 0; list-style: none; }
.chapter { display: flex; flex-direction: column; justify-content: center; min-height: min(70vh, 620px); padding-block: 2rem; border-top: 1px solid var(--line); opacity: 0.4; transition: opacity 400ms ease; }
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter.is-active { opacity: 1; }
.chapter__media { display: none; }
.chapter__mark { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; }
.chapter__mark span { color: var(--c); font: 700 3rem/1 var(--display); letter-spacing: -0.04em; }
.chapter__mark em { color: var(--c-ink); font-size: 0.92rem; font-style: normal; font-weight: 600; }
.chapter h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.chapter__text { max-width: 34rem; margin-top: 0.9rem; color: var(--muted); font-size: 1.05rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.chip:hover { border-color: var(--c); background: var(--c-soft); }
.chapter__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* Beyond: the differentiating services on navy */
.beyond { background: var(--ink); color: #fff; }
.beyond .eyebrow { color: #b7f05a; }
.beyond .section__head--split > p { color: rgba(255, 255, 255, 0.74); }
.beyond__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.tile { position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-height: 15rem; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--r-md); background: #13283f; text-decoration: none; transition: background 200ms ease, transform 220ms var(--ease); }
.tile:hover { background: #18324e; transform: translateY(-3px); }
.tile__kicker { color: rgba(255, 255, 255, 0.66); font-size: 0.84rem; font-weight: 500; }
.tile strong { margin-top: auto; padding-right: 2.5rem; font: 600 1.35rem/1.15 var(--display); letter-spacing: -0.02em; }
.tile__text { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; line-height: 1.45; }
.tile__go { position: absolute; top: 1.25rem; right: 1.25rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.tile--ask { background: var(--green); color: var(--ink); }
.tile--ask:hover { background: #8fcc1c; }
.tile--ask .tile__kicker, .tile--ask .tile__text { color: rgba(11, 27, 46, 0.78); }
.tile--ask .tile__go { background: rgba(11, 27, 46, 0.12); }
.route { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5rem; color: inherit; font: 700 0.95rem/1 var(--display); letter-spacing: 0.02em; white-space: nowrap; }
.route__end { display: inline-flex; align-items: center; gap: 0.4rem; }
.route__arrow { opacity: 0.6; font-weight: 500; }
.flag { display: inline-block; flex: none; width: 1.5em; height: 1.5em; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgb(15 23 42 / 0.12); }
.flag svg { display: block; width: 100%; height: 100%; }
/* Inside a pill: centred on the pill's text, same font and size, flags a touch larger */
.route--xs { align-self: center; gap: 0.35rem; font: 600 1em/1 var(--body); letter-spacing: 0; }
.route--xs .route__end { gap: 0.3rem; }
.route--xs .flag { width: 1.35em; height: 1.35em; }
.chip:has(.route) { gap: 0.6rem; }
.route--sm { font-size: 0.85rem; }
.route--lg { font-size: 1.35rem; gap: 0.7rem; }
.route--lg .route__end { gap: 0.55rem; }
.glance__route { margin: 0 0 0.75rem; }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.step { padding: 1.6rem; border-radius: var(--r-md); background: #fff; }
.bg-white .step { background: var(--soft); }
.step__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 1.4rem; border-radius: 50%; background: var(--ink); color: #fff; font: 600 1rem/1 var(--display); }
.step h3 { font-size: 1.2rem; }
.step p { margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; }

/* Credentials */
.creds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cred { display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.bg-white .cred { border-color: transparent; background: var(--soft); }
/* Fixed-height logo box so the two different logo shapes line up */
.cred__logo { display: flex; align-items: center; height: 4.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); box-sizing: content-box; }
.cred__logo img { width: auto; max-width: 12rem; height: 100%; object-fit: contain; object-position: left center; }
.cred h3 { font-size: 1.4rem; }
.cred__body p { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.95rem; }
.cred__body .cred__holder { color: var(--muted); font-size: 0.86rem; }
.cred__number { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.92rem; }
.cred__number span { color: var(--muted); }

/* FAQ */
.faq__wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; font-size: 1.08rem; font-weight: 600; list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; }
.bg-white .faq__plus { background: var(--soft); }
.faq__plus::before, .faq__plus::after { position: absolute; top: 50%; left: 50%; width: 0.7rem; height: 2px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); content: ""; transition: transform 200ms var(--ease); }
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: translate(-50%, -50%); }
.faq__item p { max-width: 62ch; padding-bottom: 1.4rem; color: var(--muted); }

/* Closing call to action */
.cta { padding: 0; }
.cta__wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; background: var(--blue); color: #fff; }
.cta__copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(3.5rem, 7vw, 6rem) var(--edge); }
.cta h2 { max-width: 16ch; }
.cta p { max-width: 34rem; margin-top: 1rem; color: rgba(255, 255, 255, 0.9); font-size: 1.08rem; }
.cta__actions { margin-top: 2rem; }
.cta__media { position: relative; min-height: 30rem; margin: 0; overflow: hidden; }
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Inner pages ---------- */

.phero { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem); background: var(--c-soft); }
.phero__wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.phero h1 { max-width: 18ch; font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); color: var(--muted); font-size: 0.86rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.phero__aside { padding: 1.5rem; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow); }
/* Inner page header with a full-width photo; the summary card becomes a
   strip that overlaps the photo's bottom edge. */
.phero--photo { position: relative; display: flex; align-items: flex-end; min-height: clamp(520px, 72vh, 740px); padding: clamp(6rem, 10vw, 8rem) 0 clamp(5.5rem, 8vw, 7rem); overflow: hidden; background: var(--ink); color: #fff; }
.phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; }
.phero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 18, 32, 0.82) 0%, rgba(6, 18, 32, 0.55) 45%, rgba(6, 18, 32, 0.1) 80%), linear-gradient(0deg, rgba(6, 18, 32, 0.55) 0%, rgba(6, 18, 32, 0) 50%); }
.phero__inner { position: relative; z-index: 1; }
.phero--photo h1 { max-width: 16ch; font-size: clamp(2.5rem, 5vw, 4.4rem); }
.phero--photo .lede { color: rgba(255, 255, 255, 0.88); }
.phero--photo .eyebrow { color: #fff; }
.phero--photo .crumbs, .phero--photo .crumbs a { color: rgba(255, 255, 255, 0.78); }
.phero--photo .crumbs a:hover { color: #fff; }
.phero__strip { position: relative; z-index: 2; margin-top: -3.5rem; }
.phero__strip .phero__aside { padding: 1.25rem 1.5rem; }
.phero__strip .glance dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.phero__strip .glance dl div { padding: 0; border: 0; }
.phero__strip .glance .route--lg { font-size: 1.15rem; }
.phero__strip .phero__aside ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.phero__strip .phero__aside li a { gap: 0.3rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.86rem; }
.phero__strip .phero__aside li:last-child a { border-bottom: 1px solid var(--line); }
.phero__strip .phero__aside li a .icon { display: none; }
.phero__strip .phero__aside li a:hover { border-color: var(--c); background: var(--c-soft); }
.phero__aside ul { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.phero__aside .eyebrow { display: flex; margin-bottom: 0.75rem; }
.phero__aside ul { margin: 0; padding: 0; list-style: none; }
.phero__aside li a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.phero__aside li:last-child a { border-bottom: 0; }
.phero__aside li a:hover { color: var(--c-ink); }
.glance dl { margin: 0; }
.glance dl div { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.glance dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.glance dt { color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.glance dd { margin: 0.2rem 0 0; font-size: 0.95rem; }
.notice { margin-top: 2rem; padding: 1rem 1.25rem; border-radius: var(--r-sm); background: #fff5d6; color: #4a3600; font-size: 0.95rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; }
.scard { display: flex; flex-direction: column; gap: 0.6rem; min-height: 15rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; text-decoration: none; transition: border-color 180ms ease, box-shadow 220ms var(--ease), transform 220ms var(--ease); }
.scard:hover { border-color: var(--c); box-shadow: var(--shadow); transform: translateY(-2px); }
.scard__kicker { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--c-ink); font-size: 0.85rem; font-weight: 600; }
.scard strong { font: 600 1.3rem/1.15 var(--display); letter-spacing: -0.02em; }
.scard__text { flex: 1; color: var(--muted); font-size: 0.95rem; }
.scard__go { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--blue-ink); font-size: 0.92rem; font-weight: 600; }
.sgroup + .sgroup { margin-top: 2.5rem; }
.sgroup__title { margin-bottom: 1rem; font-size: 1.25rem; }

.scope { padding: 0; }
.scope__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.scope__media { position: relative; min-height: 640px; margin: 0; overflow: hidden; background: var(--soft); }
.scope__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scope__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 7rem) var(--edge) clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 5.5rem); }
.scope .section__head { margin-bottom: 1.5rem; }
.scope__list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.scope__list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); font-size: 1.12rem; font-weight: 500; }
.scope__list span { color: var(--c-ink); font: 600 1rem/1.6 var(--display); }
.about-svc { padding-top: clamp(5rem, 9vw, 7.5rem); }
.about-svc h2 { max-width: 18ch; }
.about-svc .prose { padding-top: 0.45rem; } /* first line sits level with the heading's cap height */
.nobr { white-space: nowrap; }
/* Who it's for: three situations */
.who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.persona { padding: 1.6rem; border-radius: var(--r-md); background: var(--c-soft); }
.persona__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; border-radius: 12px; background: #fff; color: var(--c-ink); }
.persona__icon .icon { width: 1.35rem; height: 1.35rem; }
.persona h3 { font-size: 1.2rem; }
.persona p { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.95rem; }
/* Sections with a photo background under a dark overlay */
.section--photo { position: relative; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.section__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.section--photo::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 32, 0.86) 0%, rgba(6, 18, 32, 0.74) 100%); content: ""; }
.section--photo .eyebrow { color: #fff; }
.section--photo .section__head > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.8); }
.section--photo .persona, .section--photo .step { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); }
.section--photo .persona p, .section--photo .step p { color: rgba(255, 255, 255, 0.78); }
.section--photo .persona__icon { background: var(--c); color: var(--c-on); }
.section--photo .step__n { background: #fff; color: var(--ink); }

/* What you'll need: a checklist on a soft band */
.prepare { padding: 0; }
.prepare__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.prepare__copy { padding: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 5.5rem) clamp(4rem, 8vw, 7rem) var(--edge); }
.prepare__copy .section__head { margin-bottom: 1.75rem; }
.prepare__media { position: relative; min-height: 600px; margin: 0; overflow: hidden; background: var(--soft); }
.prepare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.checklist { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: #fff; font-weight: 500; }
.checklist .tick { flex: none; margin-top: 0.15rem; }

.two-col { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); }
.prose p { max-width: 60ch; color: var(--ink-2); font-size: 1.12rem; }
.prose p + p { margin-top: 1.1rem; }
.empty { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 5vw, 3.5rem); border-radius: var(--r-lg); background: var(--soft); text-align: center; }
.empty h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.empty p { margin: 1rem auto 1.75rem; color: var(--muted); }
.empty .btn { margin-inline: auto; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact__direct h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.contact__direct > p { margin: 0.75rem 0 1.5rem; color: var(--muted); }
.channel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.channel small { grid-column: 1; color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.channel strong { grid-column: 1; font: 600 1.4rem/1.2 var(--display); }
.channel .icon { grid-column: 2; grid-row: 1 / span 2; }
a.channel:hover strong { color: var(--blue-ink); }
.channel--office address { grid-column: 1; margin: 0.2rem 0 0.35rem; font: 500 1.05rem/1.5 var(--body); font-style: normal; color: var(--ink); }
.channel__map { grid-column: 1; color: var(--blue-ink); font-size: 0.85rem; font-weight: 600; }
.channel--office .icon { grid-row: 1 / span 3; }
.form { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow); }
.form h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.form__note { margin: 0.5rem 0 1.5rem; color: var(--muted); font-size: 0.9rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; align-content: start; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }
.field > span { font-size: 0.88rem; font-weight: 600; }
.field i { color: var(--muted); font-style: normal; font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid #cfd6df; border-radius: var(--r-sm); background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--body); }
.field textarea { min-height: 8rem; resize: vertical; }
.field select:disabled { background: var(--soft); color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid rgba(8, 119, 220, 0.18); outline-offset: 0; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red); }
.field__error { color: #b3131b; font-size: 0.84rem; font-weight: 600; }
.field__error:empty { display: none; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.75rem; margin-top: 1.4rem; color: var(--ink-2); font-size: 0.9rem; }
.consent input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--ink); }
.consent .field__error { grid-column: 2; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.75rem; }
.form__actions p { color: var(--muted); font-size: 0.86rem; }
.form__actions .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.form__status { margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: #e3f7e9; font-size: 0.95rem; }
.form__status[data-tone="error"] { background: #fde9e9; }
.form__status a { font-weight: 600; }

/* ---------- Footer ---------- */

/* Bottom padding keeps the last row clear of the floating WhatsApp button */
.footer { padding-bottom: 4.5rem; border-top: 1px solid var(--line); background: #fff; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); gap: 2rem; width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; padding-block: 4rem 2.5rem; }
.footer__brand img { width: auto; height: 38px; }
.footer__brand p { max-width: 22rem; margin: 1rem 0 1.25rem; color: var(--muted); font-size: 0.92rem; }
.footer__offices { display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); gap: 1.5rem 3rem; width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; padding-block: 2rem; border-top: 1px solid var(--line); }
.footer__office p { margin: 0 0 0.4rem; color: var(--ink); font-size: 0.85rem; font-weight: 600; }
.footer__office address { color: var(--muted); font-size: 0.9rem; font-style: normal; line-height: 1.6; }
.footer__col p { margin-bottom: 0.75rem; font-size: 0.92rem; font-weight: 600; }
.footer__col a { display: block; padding: 0.25rem 0; color: var(--muted); font-size: 0.88rem; text-decoration: none; }
.footer__col a:hover { color: var(--ink); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; padding-block: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; }
.footer__base a { text-decoration: none; }
.footer__base a:hover { color: var(--ink); text-decoration: underline; }

/* Floating WhatsApp */
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--wa); color: var(--wa-ink); box-shadow: 0 12px 28px rgba(11, 27, 46, 0.24); transition: transform 200ms var(--ease); }
.wa-float:hover { transform: translateY(-2px); }
.wa-float .icon { width: 1.7rem; height: 1.7rem; }
.page-contact .wa-float { display: none; }

/* ---------- Splash intro ----------
   Four dark columns whose logo-colour strips fill as the counter runs, a
   rapid service ticker, then the logo, then the columns lift away in turn. */

.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; color: #fff; cursor: pointer; }
.splash-seen .splash { display: none; }
body.splash-on { overflow: hidden; }
.splash__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.splash__cols i { position: relative; background: var(--ink); transition: transform 1000ms cubic-bezier(0.76, 0, 0.24, 1); }
.splash__cols i + i { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05); }
.splash__cols i::after { position: absolute; right: 0; bottom: 0; left: 0; height: 6px; background: var(--col); transform: scaleX(var(--fill, 0)); transform-origin: left; content: ""; }
.splash__cols i:nth-child(2) { transition-delay: 80ms; }
.splash__cols i:nth-child(3) { transition-delay: 160ms; }
.splash__cols i:nth-child(4) { transition-delay: 240ms; }
/* A soft blue glow behind the centre for depth */
.splash::before { position: absolute; inset: -20%; z-index: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 30%, transparent), transparent 70%); opacity: 0.7; content: ""; pointer-events: none; transition: opacity 500ms ease; }
.splash__stage { position: relative; z-index: 2; display: grid; place-items: center; text-align: center; transition: opacity 500ms ease, transform 900ms cubic-bezier(0.76, 0, 0.24, 1); }
.splash__word, .splash__brand { grid-area: 1 / 1; }
.splash__word { margin: 0; font: 600 clamp(2.6rem, 8vw, 7rem)/1 var(--display); letter-spacing: -0.04em; white-space: nowrap; }
.splash__word.is-tick { animation: splash-tick 220ms var(--ease); }
@keyframes splash-tick { from { opacity: 0; transform: translateY(35%); filter: blur(6px); } }
.splash__brand { display: grid; justify-items: center; gap: 1.25rem; opacity: 0; }
.splash__logo { width: clamp(220px, 30vw, 420px); height: auto; clip-path: inset(0 100% 0 0); transition: clip-path 900ms cubic-bezier(0.76, 0, 0.24, 1); }
.splash__line { margin: 0; color: rgba(255, 255, 255, 0.75); font: 500 clamp(1rem, 1.6vw, 1.3rem)/1 var(--body); letter-spacing: 0.02em; opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease) 450ms, transform 700ms var(--ease) 450ms; }
.splash.is-brand .splash__word { opacity: 0; transform: translateY(-30%); transition: opacity 300ms ease, transform 500ms var(--ease); }
.splash.is-brand .splash__brand { opacity: 1; }
.splash.is-brand .splash__logo { clip-path: inset(0 0 0 0); }
.splash.is-brand .splash__line { opacity: 1; transform: none; }
.splash__meta { position: absolute; right: var(--pad); bottom: calc(6px + 1.5rem); left: var(--pad); z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; transition: opacity 400ms ease; }
.splash__count { color: #fff; font: 600 clamp(2.4rem, 5vw, 4rem)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
/* Exit: everything on top fades, then the columns lift away one by one */
.splash.is-out { pointer-events: none; }
.splash.is-out::before, .splash.is-out .splash__meta { opacity: 0; }
.splash.is-out .splash__stage { opacity: 0; transform: translateY(-12vh); }
.splash.is-out .splash__cols i { transform: translateY(-101%); }

/* ---------- Motion (inspired by Haven Constructions) ----------
   Only active when site.js adds .motion to <html>, which it skips for
   reduced-motion visitors; without it every element is simply visible. */

/* Smooth scrolling is handled by Lenis, so native smooth scroll is off */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Hero: the photo opens from an inset rounded frame on load */
.motion .hero__card { clip-path: inset(3% 3% 0 3% round 28px); transition: clip-path 1400ms var(--ease); }
.motion.is-loaded .hero__card { clip-path: inset(0 0 0 0 round 0); }
.motion .hero__slides { will-change: transform; }
.motion .hero__content { opacity: 0; transform: translateY(30px); transition: opacity 900ms var(--ease) 500ms, transform 1100ms var(--ease) 500ms; }
.motion.is-loaded .hero__content { opacity: 1; transform: none; }

/* Fade-up reveals, staggered by --i within a group */
.motion [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 800ms var(--ease), transform 1000ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Image reveals: a cover panel lifts off the photo while it settles from a
   zoom. The frame itself is never clipped, so lazy-loaded photos still load. */
.motion [data-reveal="image"] { position: relative; opacity: 1; transform: none; }
.motion [data-reveal="image"]::after { position: absolute; inset: 0; z-index: 2; background: #e4e9ef; transform-origin: top; transition: transform 1200ms cubic-bezier(0.76, 0, 0.24, 1); content: ""; }
.motion [data-reveal="image"].is-in::after { transform: scaleY(0); }
.motion [data-reveal="image"] img { transform: scale(1.18); transition: transform 1600ms var(--ease); }
.motion [data-reveal="image"].is-in img { transform: scale(1.08); }

/* Parallax: photos sit slightly oversized and drift by --shift (set on scroll) */
.motion [data-parallax] { transform: translate3d(0, var(--shift, 0px), 0) scale(1.12); will-change: transform; }
.motion [data-reveal="image"].is-in img[data-parallax] { transform: translate3d(0, var(--shift, 0px), 0) scale(1.12); }
/* Full-width photos: a smaller zoom keeps them sharp (the source images are about 1536px wide) */
.motion .phero__bg[data-parallax], .motion .section__bg[data-parallax] { transform: translate3d(0, var(--shift, 0px), 0) scale(1.07); }
.motion [data-reveal="image"].is-settled img { transition: none; }

/* Signature moment: the banner pins while its photo grows from a framed
   image to full screen (--p goes 0 to 1 with scroll), then the copy fades in */
.motion .banner { height: 210vh; }
.motion .banner__card { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); min-height: 0; clip-path: inset(calc((1 - var(--p, 0)) * 16%) calc((1 - var(--p, 0)) * 24%) round calc((1 - var(--p, 0)) * 32px)); }
.motion .banner__img { transform: scale(calc(1.1 - var(--p, 0) * 0.1)); }
.motion .banner__card::after { opacity: clamp(0, calc((var(--p, 0) - 0.3) * 2), 1); }
.motion .banner__copy { opacity: clamp(0, calc((var(--p, 0) - 0.6) * 3), 1); transform: translateY(calc((1 - var(--p, 0)) * 50px)); }

/* ---------- Press ---------- */

.press__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.press__logos img { display: block; width: auto; height: 34px; }
.press__logos li:first-child img { height: 24px; }
.press__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.clip { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.clip__media { display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--line); background: #fff; }
.clip__media img { display: block; width: 100%; height: auto; max-height: 11rem; object-fit: contain; box-shadow: 0 14px 30px -18px rgb(15 23 42 / 0.35); transform: rotate(-0.6deg); transition: transform 300ms var(--ease); }
.clip:nth-child(even) .clip__media img { transform: rotate(0.6deg); }
.clip:hover .clip__media img { transform: rotate(0deg) scale(1.02); }
.clip__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; }
.clip__meta { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.clip__meta img { width: auto; height: 12px; }
.clip[data-outlet="star"] .clip__meta img { height: 22px; }
.clip h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.clip h3 a { color: inherit; text-decoration: none; }
.clip h3 a:hover { color: var(--blue-ink); }
.clip__body > p:not(.clip__meta) { margin: 0; color: var(--ink-2); }
.clip__body .text-link { margin-top: auto; }

/* ---------- Responsive ---------- */

/* Narrower laptops: pull the menu items closer so the header never overflows */
@media (max-width: 1320px) {
  .nav__menu ul { gap: 0; }
  .nav__link { padding-inline: 0.6rem; }
}

@media (max-width: 1180px) {
  .nav__phone { display: none; }
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .nav__menu { display: none; }
  .nav__bar { grid-template-columns: auto 1fr auto; }
  .nav__actions { grid-column: 3; }
  .nav__toggle { display: flex; }
  .hero__content { grid-template-columns: 1fr; }
  .onechat__wrap { grid-template-columns: 1fr; }
  .hero__stage { min-height: 500px; }
  .beyond__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who__grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .press__grid { grid-template-columns: 1fr; }
  .faq__wrap, .scope__wrap, .two-col, .contact, .phero__wrap { grid-template-columns: 1fr; }
  .journey__wrap { grid-template-columns: 1fr; }
  .prepare__wrap { grid-template-columns: 1fr; }
  .prepare__copy { padding: 3.5rem var(--pad); }
  .prepare__media { min-height: 0; aspect-ratio: 16 / 10; }
  .journey__visual { display: none; }
  .chapter { min-height: 0; opacity: 1; }
  .chapter__media { display: block; margin: 0 0 1.25rem; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16 / 10; }
  .chapter__img { width: 100%; height: 100%; object-fit: cover; }
  .creds__grid { grid-template-columns: 1fr; }
  .cta__wrap { grid-template-columns: 1fr; }
  .cta__media { min-height: 18rem; }
  .cta__copy { padding-inline: var(--pad); }
  .scope__wrap { grid-template-columns: 1fr; }
  .scope__media { min-height: 0; aspect-ratio: 16 / 10; }
  .scope__copy { padding: 3.5rem var(--pad); }
  .phero__strip .glance dl { grid-template-columns: 1fr; gap: 0.75rem; }
}

@media (max-width: 600px) {
  /* Phones: text runs over the busiest part of the photo, so the shade covers it all */
  .hero__shade { background: linear-gradient(0deg, rgba(6, 18, 32, 0.94) 0%, rgba(6, 18, 32, 0.82) 45%, rgba(6, 18, 32, 0.5) 75%, rgba(6, 18, 32, 0.3) 100%); }
  .phero__shade { background: linear-gradient(0deg, rgba(6, 18, 32, 0.9) 0%, rgba(6, 18, 32, 0.74) 55%, rgba(6, 18, 32, 0.5) 100%); }
  .footer__offices { grid-template-columns: 1fr; }
  :root { --nav-h: 64px; }
  .nav__logo img { height: 34px; }
  .nav__actions .btn { display: none; }
  .hero__card { height: calc(100svh - var(--nav-h)); min-height: 600px; }
  .hero__content { gap: 1rem; padding: 1.25rem 1.25rem 5rem; } /* room for the floating WhatsApp button */
  .hero__title { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .hero__sub { font-size: 0.98rem; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__stage { min-height: 0; padding: 2.5rem 1rem; border-radius: 24px; }
  .stage__shapes .s1 { width: 180px; height: 180px; }
  .bubble { font-size: 0.88rem; }
  .beyond__grid, .steps { grid-template-columns: 1fr; }
  .areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .area__foot strong { font-size: 1rem; }
  .area__note { display: none; }
  .banner__card::after { background: linear-gradient(0deg, rgba(6, 18, 32, 0.92) 0%, rgba(6, 18, 32, 0.6) 55%, rgba(6, 18, 32, 0.25) 100%); }
  .tile { min-height: 0; }
  .tile strong { margin-top: 1.5rem; }
  .form__grid { grid-template-columns: 1fr; }
  .form__actions .btn { width: 100%; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__actions .btn { width: 100%; }
  .wa-float { right: 0.9rem; bottom: 0.9rem; width: 3.3rem; height: 3.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}