/*
Theme Name: Deep N Clean
Theme URI: https://www.yourdomain.com/
Author: Deep N Clean
Description: One-page theme for Deep N Clean, professional deep cleaning in Trivandrum. Every home page section is an editable block (click text to type, replace photos, edit links and lists). On activation it creates the Home and Customer Terms & Conditions pages, sets Home as the front page and builds the menu. Contact details, WhatsApp, social links and the hero photo are in Appearance → Customize → Deep N Clean. Pages and posts with a featured image get a cover header with height, overlay, focus and alignment controls.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deepnclean
Tags: one-column, custom-menu, featured-images, theme-options, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   Deep N Clean — Design System
   Layout, spacing and structure measured off the Glossia template kit demo
   (1328 container · 1280 content · 24/48/64 gaps · 96px rhythm · Archivo
   w500 headings · 8px cards · 50px buttons). Hues: Marine Navy + Oceanic Blue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Brand ------------------------------------------------------------- */
  --anchor:        #0E2F4F;
  --anchor-hover:  #14406B;
  --anchor-soft:   #163A5E;

  --accent:        #03BBFE;   /* Deep N Clean oceanic blue — 6.2:1 on --anchor */
  --accent-hover:  #00A6E6;   /* accent as BACKGROUND on hover — 4.9:1 with navy text */
  --accent-ink:    #006B99;   /* accent as TEXT/ICON on light grounds — 5.4:1 on --surface */
  --accent-soft:   #E6F8FF;
  --accent-rgb:    3, 187, 254;

  --surface:       #F4F7F9;
  --base:          #FFFFFF;

  --heading:       #0E2F4F;
  --body:          #5F6D7A;
  --body-on-dark:  #A9BDD0;
  --hairline:      #E4EAEF;
  --hairline-dark: rgba(255,255,255,.12);

  --wa-green:      #25D366;   /* WhatsApp brand green — recognition matters */
  --wa-green-dark: #1EBE5B;

  /* — Type -------------------------------------------------------------- */
  --ff: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 1.35rem + 4.4vw, 4.5rem);      /* 40 → 72 — same scale as section headings */
  --lh-h1: 1.14;
  --fs-h2: clamp(1.75rem, 1.30rem + 2.00vw, 2.5rem);    /* 28 → 40 */
  --lh-h2: 1.25;
  --fs-h5: clamp(1.25rem, 1.05rem + 0.90vw, 1.75rem);   /* 20 → 28 */
  --lh-h5: 1.36;
  --fs-h6: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); /* 18 → 22 */
  --lh-h6: 1.45;
  --fs-body: 1rem;
  --lh-body: 1.625;
  --fs-sm: .9375rem;
  --fs-14: .875rem;
  --fs-13: .8125rem;

  /* — Section type scale (from the About section; used site-wide) ------- */
  --t-display:  clamp(2.5rem, 1.35rem + 4.4vw, 4.5rem);    /* 40 → 72  section headings */
  --t-title-lg: clamp(2rem, 1.4rem + 1.8vw, 3rem);         /* 32 → 48  feature / service titles */
  --t-title-md: clamp(1.625rem, 1.2rem + 1.4vw, 2.1875rem);/* 26 → 35  title rows, sublines, key cards */
  --t-title-sm: clamp(1.25rem, 1.12rem + .45vw, 1.5rem);   /* 20 → 24  card titles */
  --t-body:     1.0625rem;                                 /* 17       copy */
  --t-label:    1rem;                                      /* 16       uppercase labels */
  --t-kicker:   .9375rem;                                  /* 15       dotted eyebrows */

  --fw-head: 500;
  --fw-body: 400;
  --fw-light: 300;

  /* — Layout (measured) ------------------------------------------------- */
  --container: 1328px;
  --pad: 24px;
  --gap: 24px;
  --gap-48: 48px;
  --gap-64: 64px;
  --section-y: 96px;

  /* — Radius ------------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-pill: 50px;

  /* — Motion ------------------------------------------------------------ */
  --t: .3s;
  --t-slow: .4s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: var(--body);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: var(--r-xs); }
.hero :focus-visible, .on-dark :focus-visible, .footer :focus-visible,
.drawer :focus-visible, .header:not(.is-stuck) :focus-visible { outline-color: var(--accent); }

::selection { background: rgba(var(--accent-rgb), .28); color: var(--heading); }
.hero ::selection, .on-dark ::selection, .footer ::selection { background: var(--accent); color: var(--anchor); }
input, textarea, select { caret-color: var(--accent-ink); accent-color: var(--accent-ink); }
html { scrollbar-color: #B9C6D2 transparent; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff);
  font-weight: var(--fw-head);
  color: var(--heading);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; }
h2 { font-size: var(--t-display); line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); }
p  { text-wrap: pretty; }

.hl { color: var(--accent); }
.nowrap { white-space: nowrap; }
.hl-ink { color: var(--accent-ink); }

/* Type classes — one scale for every section (defined by the About section) */
.t-title-lg { font-size: var(--t-title-lg); line-height: 1.2; font-weight: 500; letter-spacing: -0.04em; }
.t-title-md { font-size: var(--t-title-md); line-height: 1.2; font-weight: 500; letter-spacing: -0.04em; }
.t-title-sm { font-size: var(--t-title-sm); line-height: 1.3; font-weight: 500; letter-spacing: -0.03em; }
.t-body     { font-size: var(--t-body); line-height: 1.5; letter-spacing: -0.02em; }
.t-label    { font-size: var(--t-label); line-height: 1.3; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 400; }

/* Dotted eyebrow */
.kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-kicker); line-height: 1.3; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--body);
}
.kicker .sec-dot { width: 12px; height: 12px; border-width: 2.5px; margin-top: 0; align-self: center; }
.kicker--strong { font-weight: 600; }
.on-dark .kicker, .hero .kicker { color: var(--body-on-dark); }

/* Section header: dot · title | meta, hairline, then headline + subline */
.sec-head { display: flex; flex-direction: column; }
.sec-titlerow { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; flex-wrap: wrap; }
.sec-dot {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 3px solid var(--accent); align-self: flex-start; margin-top: 6px;
}
.sec-title { font-size: var(--t-title-md); line-height: 1.2; font-weight: 500; letter-spacing: -0.04em; color: var(--heading); }
.sec-meta  { font-size: var(--t-body); line-height: 1.4; letter-spacing: -0.02em; color: var(--body); }
.sec-vr    { width: 1px; align-self: stretch; min-height: 42px; background: var(--hairline); }
.sec-rule  { display: block; height: 1px; background: var(--hairline); }

.sec-headline { margin-top: 60px; display: flex; flex-direction: column; gap: 24px; }
.sec-headline h2 { max-width: 900px; }
.sec-headline--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.sec-headline__text { display: flex; flex-direction: column; gap: 24px; }
.sec-sub {
  max-width: 800px;
  font-size: var(--t-title-md); line-height: 1.3; font-weight: 500; letter-spacing: -0.04em;
  color: var(--body); text-wrap: balance;
}
.sec-body { margin-top: 60px; }

/* Centred variant — Client Reviews and Good To Know keep their original centred headers */
.sec-center .sec-titlerow { justify-content: center; }
.sec-center .sec-meta { text-align: center; }
.sec-center .sec-headline { align-items: center; text-align: center; }
.sec-center .sec-headline h2,
.sec-center .sec-sub { margin-inline: auto; }

.on-dark .sec-title { color: #fff; }
.on-dark .sec-meta, .on-dark .sec-sub { color: var(--body-on-dark); }
.on-dark .sec-vr, .on-dark .sec-rule { background: var(--hairline-dark); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.section { display: flex; flex-direction: column; }

.inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.block { padding: var(--pad) 0; }

.section--pad-y   > .inner { padding-block: var(--section-y); }
.section--pad-btm > .inner { padding-block: 0 var(--section-y); }

.section--surface { background: var(--surface); }
.section--dark    { background: var(--anchor); }

.on-dark { color: var(--body-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6 { color: #fff; }



/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--anchor);
  --btn-line: transparent;          /* outline colour (drawn inset, so the fill covers it) */
  --btn-wave: var(--anchor);        /* colour that fills the button on hover */
  --btn-fg-hover: #fff;             /* text colour once filled */
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 25px;               /* = the old 12/24 + 1px border, so sizes are unchanged */
  font-size: var(--fs-sm); font-weight: var(--fw-head); line-height: 1.4;
  color: var(--btn-fg); background-color: var(--btn-bg);
  border: 0; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--btn-line);   /* an outline, not a drop shadow */
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  /* leaving: the text changes back only once the falling water has passed it */
  transition: color .18s var(--ease) .12s, background-color 0s;
}
/* Water fill — a large, slowly turning rounded square rises from well below the
   button; its softly curved top edge reads as a moving wave line. It rests far
   enough down that even a turned corner can never peek into the button. */
.btn::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 100%;
  width: max(260%, 260px); aspect-ratio: 1;
  translate: -50% 12%;
  border-radius: 43%;
  background: var(--btn-wave);
  transition: top .9s var(--ease-out), translate .9s var(--ease-out);
  animation: btn-wave 6s linear infinite paused;
}
.btn:hover::before, .btn:focus-visible::before {
  top: -60%; translate: -50% -22%;   /* rises well past the top so even very wide buttons are fully covered */
  animation-play-state: running;
}
.btn:hover, .btn:focus-visible {
  color: var(--btn-fg-hover);
  background-color: var(--btn-wave);    /* swaps in under the water once it has filled */
  transition: color .16s var(--ease) .04s, background-color 0s linear .6s;
}
@keyframes btn-wave { to { rotate: 360deg; } }
.btn--lg { padding: 16px 31px; font-size: 1rem; }

.btn--primary { --btn-wave: var(--anchor); --btn-fg-hover: #fff; }
.btn--dark { --btn-bg: var(--anchor); --btn-fg: #fff; --btn-wave: var(--accent); --btn-fg-hover: var(--anchor); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--anchor); --btn-line: var(--hairline); --btn-wave: var(--anchor); }
.btn--ghost-light { --btn-bg: rgba(255,255,255,.04); --btn-fg: #fff; --btn-line: rgba(255,255,255,.28); --btn-wave: #fff; --btn-fg-hover: var(--anchor); }
.btn--wa { --btn-bg: var(--wa-green); --btn-fg: var(--anchor); --btn-wave: var(--anchor); --btn-fg-hover: #fff; }   /* navy on green 6.9:1; white was 2.0:1 */
/* On navy grounds (hero, Why Choose Us, reviews, footer, mobile menu, page covers) a navy fill would
   vanish into the background, so the water fills white with navy text instead. */
:is(.hero, .on-dark, .footer, .drawer, .page-cover) :is(.btn--primary, .btn--wa) { --btn-wave: #fff; --btn-fg-hover: var(--anchor); }
.btn--block { width: 100%; }

.btn__arrow { transition: transform var(--t) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-head);
  color: var(--anchor);
  transition: color var(--t) var(--ease);
}
.link svg { transition: transform var(--t) var(--ease); }
.link:hover { color: var(--accent-ink); }
.link:hover svg { transform: translateX(5px); }
.on-dark .link { color: #fff; }
.on-dark .link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 16px;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease),
              opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.header.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline), 0 6px 24px rgba(14,47,79,.07);
}

/* Logo — transparent artwork: the white letters + blue outline read on the dark
   hero, the navy footer and the white scrolled header alike. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 56px; width: auto; }
.brand--full { align-self: flex-start; }          /* don't stretch across the footer column */
.brand--full img { height: 136px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; padding: 9px 15px;
  font-size: var(--fs-sm); font-weight: var(--fw-head);
  color: rgba(255,255,255,.86);
  transition: color var(--t) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px;
  height: 2px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a:hover, .nav a.is-active { color: #fff; }
.header.is-stuck .nav a { color: var(--body); }
.header.is-stuck .nav a:hover, .header.is-stuck .nav a.is-active { color: var(--anchor); }

.header__cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; width: 46px; height: 46px; place-items: center;
  border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
}
.header.is-stuck .nav-toggle { background: var(--surface); border-color: var(--hairline); color: var(--anchor); }

.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--anchor);
  padding: 28px var(--pad) 40px;
  display: flex; flex-direction: column;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s;
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.drawer__close {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff;
}
.drawer nav { display: flex; flex-direction: column; gap: 4px; }
.drawer nav a {
  font-size: 1.75rem; font-weight: var(--fw-head); color: #fff;
  padding: 12px 0; border-bottom: 1px solid var(--hairline-dark);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}
.drawer nav a:hover { color: var(--accent); transform: translateX(10px); }
.drawer__foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 12px; }
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO — full viewport. Lead is centred in the space above the trust bar.
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--anchor);
  min-height: 100vh; min-height: 100svh;
  display: flex;
}
.hero > .inner { display: flex; padding-block: 120px 32px; }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
/* water ripple (ripple.js): cross-fades in over the photo once its first frame is drawn;
   .hero__media::after (the dark overlay) still paints above it */
.hero__ripple { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s var(--ease-out); }
.hero__ripple.is-live { opacity: 1; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,35,64,.95) 0%, rgba(10,35,64,.84) 44%, rgba(10,35,64,.40) 100%),
    linear-gradient(to top, rgba(10,35,64,.92) 0%, rgba(10,35,64,0) 42%);
}

.hero__body { flex: 1; display: flex; flex-direction: column; gap: var(--gap-64); }
.hero__lead {
  margin-block: auto;
  display: flex; flex-direction: column; gap: var(--gap);
  max-width: 780px;                    /* 72px headline breaks as "…home that / feels brand new again" */
}
.hero__lead .kicker { color: rgba(255,255,255,.82); }
.hero__lead h1 { color: #fff; }
.hero__lead > p:not(.kicker) { color: rgba(255,255,255,.80); font-size: 1.0625rem; line-height: 1.7; max-width: 560px; }

.hero__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.proof { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.avatars span {
  width: 40px; height: 40px; margin-left: -10px;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--anchor);
  background: var(--accent); color: var(--anchor);
  font-size: .75rem; font-weight: 600;
}
.avatars span:nth-child(2) { background: #81DDFF; }
.avatars span:nth-child(3) { background: #C6EFFF; }
.avatars span:nth-child(4) { background: #fff; }
.avatars > :first-child { margin-left: 0; }
.avatars span { overflow: hidden; }
.avatars img { width: 100%; height: 100%; object-fit: cover; }
.proof__text { font-size: var(--fs-sm); color: rgba(255,255,255,.78); line-height: 1.4; }
.proof__text strong { display: block; color: #fff; font-weight: var(--fw-head); font-size: 1rem; }

/* Trust bar — replaces the reference's chip row at the foot of the hero */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  padding-top: 28px;
  padding-right: 88px;          /* keep the last badge clear of the WhatsApp bubble + its pulse */
  border-top: 1px solid rgba(255,255,255,.14);
}
.trust__item { display: flex; gap: 14px; align-items: flex-start; }
.trust__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(var(--accent-rgb),.14); color: var(--accent);
}
.trust__item strong { display: block; color: #fff; font-weight: var(--fw-head); line-height: 1.35; }
.trust__item span { font-size: var(--fs-14); color: rgba(255,255,255,.72); line-height: 1.45; }

/* --------------------------------------------------------------------------
   8. ABOUT — "achievements" layout (Arpeggio template, light mode)
   Measured from the reference: title row 35px + meta 17px over a hairline ·
   72/79 w600 headline at -0.04em · 35px subline · 50/50 media + sheet with a
   56px stat column behind a divider · centred snapshot grid of large rolling
   numbers between vertical dividers · a quiet row of five marks.
   -------------------------------------------------------------------------- */
.achieve { --achieve-muted: var(--body); --achieve-rule: var(--hairline); }
.achieve p { text-wrap: pretty; }

/* feature row — media | details + stat column */
.achieve__feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.achieve__media { position: relative; aspect-ratio: 673 / 500; overflow: hidden; background: var(--surface); }
.achieve__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.achieve__sheet { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.achieve__details { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 40px 0 60px; }
.achieve__body { color: var(--achieve-muted); max-width: 380px; }
.achieve__cta {
  position: relative; margin-top: 16px; padding-bottom: 4px;
  font-size: 1.25rem; font-weight: 500; letter-spacing: -0.03em; color: var(--heading);
}
.achieve__cta::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--accent); transform-origin: left; transform: scaleX(.22);
  transition: transform .45s var(--ease-out);
}
.achieve__cta:hover::after, .achieve__cta:focus-visible::after { transform: scaleX(1); }

.achieve__stats { position: relative; display: flex; flex-direction: column; gap: 32px; padding: 20px 0 20px 40px; min-width: 210px; }
.achieve__vr--full { position: absolute; left: 0; top: 0; bottom: 0; min-height: 0; }
.achieve__label { color: var(--achieve-muted); }
.achieve__stat-num {
  margin-top: 4px;
  font-size: clamp(2.5rem, 1.9rem + 1.8vw, 3.5rem);        /* 40 → 56 */
  line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--heading);
}

/* snapshot grid */
.achieve__snapshot { margin-top: 60px; }
.achieve__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.achieve__cell {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 12px; text-align: center;
  border-left: 1px solid var(--achieve-rule);
}
.achieve__cell:first-child { border-left: 0; }
.achieve__cell-num {
  font-size: clamp(3rem, 1.9rem + 3.4vw, 4.5rem);          /* 48 → 72 */
  line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; color: var(--heading);
}

/* marks row */
.achieve__badges {
  margin-top: 40px; padding-top: 40px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: center;
}
.achieve__badges li {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--achieve-muted); font-size: .75rem; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
  transition: color var(--t) var(--ease);
}
.achieve__badges li:hover { color: var(--heading); }
.achieve__badges svg { flex-shrink: 0; color: var(--accent-ink); }
.achieve__badges b { display: block; font-weight: 600; color: var(--heading); }

/* rolling numbers (built by script.js from data-roll) */
.roll { display: inline-flex; font-variant-numeric: tabular-nums; }
.roll__col { display: inline-block; height: 1.1em; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.roll__strip { display: flex; flex-direction: column; }
.roll__strip span { display: block; height: 1.1em; line-height: 1.1em; }
.roll__sym { display: inline-block; line-height: 1.1em; }

/* --------------------------------------------------------------------------
   9. SERVICES — sticky intro left, services scroll on the right
   After Neiden's "What We Build": a 1/3-ish intro column pinned below the header
   (heading + lede at the top, CTA at the foot), and each service as label → big
   title → two-image pair → description | inclusions. No rules between items.
   -------------------------------------------------------------------------- */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-64); align-items: start; }
.svc__intro {
  position: sticky; top: 120px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: min(600px, calc(100vh - 160px));
}
.svc__intro-top { display: flex; flex-direction: column; gap: 24px; }
.svc__intro h2 { text-wrap: balance; }
.svc__lede { font-size: var(--t-title-sm); line-height: 1.35; font-weight: 500; letter-spacing: -0.04em; color: var(--body); max-width: 440px; text-wrap: pretty; }
.svc__intro-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 400px; }
.svc__intro-foot .t-body { color: var(--body); }

.svc__list { display: flex; flex-direction: column; gap: 96px; }
.svc__item { display: flex; flex-direction: column; gap: 16px; }
.svc__item > h3 { margin-bottom: 16px; }
.svc__media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc__img { position: relative; aspect-ratio: 448 / 270; overflow: hidden; background: var(--surface); border-radius: var(--r-sm); }
.svc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__details { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 16px; }
.svc__desc { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.svc__desc .t-body { color: var(--body); }
.svc__sub { color: var(--heading); margin-bottom: 14px; }
.svc__incl .checks { grid-template-columns: 1fr; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; width: 100%; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; color: var(--heading); line-height: 1.5; }
.checks svg { flex-shrink: 0; margin-top: 4px; color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   10. WHY US — image 584 left / content right, features stacked gap 32
   -------------------------------------------------------------------------- */
.why { display: grid; grid-template-columns: 584px 1fr; gap: var(--gap-64); align-items: stretch; }
.why__media {
  position: relative; border-radius: var(--r-sm); overflow: hidden;
  background: var(--anchor-soft); min-height: 420px; min-width: 0;
}
.why__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.why__body { display: flex; flex-direction: column; justify-content: center; gap: var(--gap-48); }

.features { display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--gap); }
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(var(--accent-rgb),.14); color: var(--accent);
  transition: transform var(--t-slow) var(--ease);
}
.feature:hover .feature__icon { transform: rotate(-8deg) scale(1.06); }
.feature h3 { margin-bottom: 6px; }
.feature p  { color: var(--body-on-dark); }

/* --------------------------------------------------------------------------
   11. HOW IT WORKS — five-card bento (Arpeggio "Why Choose Us" composition)
   6 columns × 320px rows, 16px gaps, square tiles, 32px padding.
   01 and 03 are 2×2 photos, 02 (WhatsApp confirmation) and 04 (live checklist)
   stack between them, 05 runs full width. One card per step — nothing repeated.
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 320px; gap: 16px; }

.tile {
  --img-round: 0px;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 32px; background: var(--surface); color: var(--heading);
}
.tile--2x2 { grid-column: span 2; grid-row: span 2; }
.tile--2x1 { grid-column: span 2; }
.tile--6x1 { grid-column: span 6; }

.tile__bg { position: absolute; inset: 0; z-index: -1; background: var(--anchor-soft); }
.tile__bg img { width: 100%; height: 100%; object-fit: cover; }
.tile__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.tile--fade-top    .tile__bg::after { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 26%, rgba(255,255,255,0) 52%); }
.tile--fade-bottom .tile__bg::after { background: linear-gradient(0deg,   rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 26%, rgba(255,255,255,0) 54%); }
.tile--fade-left   .tile__bg::after { background: linear-gradient(90deg,  rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 40%, rgba(255,255,255,0) 72%); }

.tile__content { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tile__content--end    { margin-top: auto; }
.tile__content--middle { margin-block: auto; max-width: 62%; }
.tile__content--center { align-items: center; text-align: center; }
.tile__content .kicker { color: var(--heading); }
.tile--fade-left .tile__caption, .tile--fade-bottom .tile__caption { color: var(--heading); }

.t-title-tile { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.04em; }
.tile__sub { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.4; letter-spacing: -0.04em; color: var(--heading); max-width: 360px; }
.tile__caption { font-size: .9375rem; line-height: 1.4; letter-spacing: -0.02em; color: var(--body); }
/* accent — ocean blue with the WhatsApp mock rising from the foot */
.tile--accent { background: var(--accent); color: var(--anchor); }
.tile--accent .tile__content .kicker { color: var(--anchor); }
.tile--accent .sec-dot { border-color: #fff; }
.chatmock {
  position: absolute; left: 50%; bottom: 0; width: min(82%, 340px);
  transform: translate(-50%, 16%);
  background: #fff; border-radius: 12px 12px 0 0; overflow: hidden;
  box-shadow: 0 -2px 0 rgba(255,255,255,.35), 0 18px 44px rgba(14,47,79,.28);
}
.chatmock__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #eef1f3; }
.chatmock__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-green); color: #fff; }
.chatmock__bar b { display: block; font-size: .8125rem; font-weight: 600; color: var(--heading); line-height: 1.2; }
.chatmock__bar small { font-size: .6875rem; color: var(--body); }
.chatmock__body { padding: 14px 14px 40px; background: #EFEAE2; }
.chatmock__bubble {
  position: relative; margin-right: auto; max-width: 92%;
  padding: 8px 12px 18px; border-radius: 10px 10px 10px 2px;
  background: #fff; color: #111b21; font-size: .8125rem; line-height: 1.45;
}
.chatmock__bubble span { color: #3b4a54; }
.chatmock__bubble i { position: absolute; right: 10px; bottom: 4px; font-size: .625rem; font-style: normal; color: #4f5f69; }

/* 04 — photo with a floating checklist */
.checkcard {
  position: absolute; left: 50%; top: 24px; width: min(78%, 300px); transform: translateX(-50%);
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(14,47,79,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.checkcard__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.checkcard__head b { font-size: .875rem; font-weight: 600; color: var(--heading); letter-spacing: -0.02em; }
.checkcard__head small { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--body); }
.checkcard ul { display: grid; gap: 6px; }
.checkcard li { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--heading); }
.checkcard li svg { color: var(--accent-ink); flex-shrink: 0; }
.checkcard li em { margin-left: auto; font-style: normal; font-size: .6875rem; color: var(--accent-ink); }
.checkcard__pulse { width: 10px; height: 10px; margin: 0 3px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.tile--checklist .tile__content { gap: 0; }

/* 05 — full-width photo, copy left */
.tile--6x1 .tile__content--middle { max-width: 560px; }
.tile__marks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 8px; }
.tile__marks li { display: flex; align-items: center; gap: 8px; font-size: .9375rem; letter-spacing: -0.02em; color: var(--heading); }
.tile__marks svg { color: var(--accent-ink); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   12. REVIEWS — testimonial marquee
   Cards share the footer "Ready for a fresh start?" card style. The row drifts
   slowly and loops seamlessly (script.js repeats the set to fill the width and
   appends one copy for the -50% loop). Pauses on hover, keyboard focus, the
   pause button, and whenever it is scrolled offscreen.
   -------------------------------------------------------------------------- */
.reviews-section { padding-block: var(--section-y); }
.reviews-section > .inner .block { padding-bottom: 0; }

.marquee {
  --marquee-gap: var(--gap);
  padding-block: 8px;
  overflow-x: auto;                              /* no-JS / reduced motion: a swipeable row */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.marquee::-webkit-scrollbar { display: none; }

.marquee__track { display: flex; width: max-content; }
.marquee__set {
  display: flex; gap: var(--marquee-gap);
  padding-inline: var(--pad) 0;
  padding-right: var(--marquee-gap);              /* trailing gap so the -50% loop is seamless */
}

.marquee.is-ready {
  overflow: hidden; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee.is-ready .marquee__set { padding-left: 0; }
.marquee.is-ready .marquee__track {
  animation: marquee-drift var(--marquee-dur, 60s) linear infinite;
}
.marquee.is-offscreen .marquee__track { animation-play-state: paused; }   /* hover slows it via script.js */
@keyframes marquee-drift { to { transform: translateX(-50%); } }

/* Card — same recipe as .footer__cta */
.testimonial {
  flex: 0 0 clamp(290px, 80vw, 400px);
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px 32px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline-dark);
  scroll-snap-align: start;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.testimonial:hover { background: rgba(255,255,255,.08); border-color: rgba(var(--accent-rgb), .38); }

.testimonial__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 2px; color: #F5B301; }
.testimonial__service { font-size: var(--fs-13); color: var(--body-on-dark); }
.testimonial__quote p { color: rgba(255,255,255,.92); font-size: var(--t-body); line-height: 1.55; letter-spacing: -0.02em; }

.testimonial__who {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid var(--hairline-dark);
}
.testimonial__name { color: #fff; font-size: var(--t-body); font-weight: var(--fw-head); line-height: 1.3; letter-spacing: -0.02em; }
.testimonial__area { font-size: var(--fs-14); color: var(--body-on-dark); }

/* Avatar — initials until a photo is dropped in; the <img> covers them */
.avatar {
  position: relative; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--accent); color: var(--anchor);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14);
}
.avatar__initials { font-size: .875rem; font-weight: 600; letter-spacing: .02em; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.reviews__foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; }


/* --------------------------------------------------------------------------
   13. GOOD TO KNOW — centred head + 3 cards (reference pricing pattern)
   -------------------------------------------------------------------------- */
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
/* Same build as the bento "Book your service" tile: photo fills the card and fades
   into the surface behind the copy, which sits at the foot. Rounded like the other cards. */
.term {
  --img-round: var(--r-sm);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 620px; padding: 32px; background: var(--surface); border-radius: var(--r-sm);
}
.term__bg { position: absolute; inset: 0; z-index: -1; background: var(--anchor-soft); }
.term__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.term__bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #F4F7F9 0%, #F4F7F9 44%, rgba(244,247,249,.86) 56%, rgba(244,247,249,0) 80%);
}
.term__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.term__body .kicker { color: var(--heading); }
.term__body h3 { margin-bottom: 8px; }
.term__list { display: flex; flex-direction: column; gap: 12px; }
.term__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 1rem; line-height: 1.55; color: var(--heading); }
.term__list svg { flex-shrink: 0; margin-top: 4px; color: var(--accent-ink); }
.term__list strong { font-weight: var(--fw-head); }


.terms__more { display: flex; justify-content: center; margin-top: 40px; }

/* --------------------------------------------------------------------------
   13b. TERMS PAGE (terms.html) — after faith365.app/terms
   Big title + lede, then numbered clauses: a 90px number box on the left, the
   text column starting ~36% across (max 640px), 80px between clauses with a
   hairline under each. "Important" closes the list with an accent box.
   -------------------------------------------------------------------------- */
.legal > .inner { padding-block: calc(88px + 72px) var(--section-y); }
.legal__head { margin-top: 60px; display: flex; flex-direction: column; gap: 24px; padding-bottom: 60px; border-bottom: 1px solid var(--hairline); }
.legal__head h1 {
  max-width: 1100px;
  font-size: clamp(3rem, 1.5rem + 5.2vw, 6.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.05em;
  color: var(--heading); text-wrap: balance;
}
.legal__clauses { list-style: none; padding: 0; }
.clause {
  display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); align-items: start;
  padding: 80px 0; border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 96px;
}
.clause__num {
  width: 90px; height: 90px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 28px;
  font-size: 1.75rem; line-height: 1; letter-spacing: -0.04em; color: var(--heading);
}
.clause__body { max-width: 640px; display: flex; flex-direction: column; gap: 24px; }
.clause__title { font-size: var(--t-title-lg); line-height: 1.1; font-weight: 500; letter-spacing: -0.04em; color: var(--heading); text-wrap: balance; }
.legal__text { font-size: clamp(1.125rem, 1rem + .3vw, 1.25rem); line-height: 1.6; letter-spacing: -0.01em; color: var(--body); text-wrap: pretty; }
.legal__text strong { color: var(--heading); font-weight: var(--fw-head); }
.clause--important { border-bottom: 0; padding-bottom: 0; }
.clause--important .clause__num { background: var(--accent); border-color: var(--accent); color: var(--anchor); border-radius: 50%; }
.clause--important .legal__text { color: var(--heading); }
.legal__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   14. BOOK — simple form left / copy right, gap 64
   -------------------------------------------------------------------------- */
.book { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-64); align-items: center; }
.book__card { padding: 32px; background: var(--surface); border-radius: var(--r-sm); }
.book__card-head { margin-bottom: var(--gap); }
.book__card-head p { margin-top: 8px; color: var(--body); }

.book__copy { display: flex; flex-direction: column; gap: var(--gap); align-items: flex-start; }
.book__card { grid-column: 1; grid-row: 1; }   /* copy comes first in the markup (heading order), form sits left */
.book__copy { grid-column: 2; grid-row: 1; }
.book__copy > p { max-width: 520px; color: var(--body); }
.book__copy h2 { max-width: 560px; text-wrap: balance; }
.book__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.book__contact { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.book__contact li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); }
.book__contact svg { flex-shrink: 0; margin-top: 3px; color: var(--accent-ink); }
.book__contact strong { color: var(--heading); font-weight: var(--fw-head); display: block; }
.book__contact a:hover { color: var(--accent-ink); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--gap); }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--fs-13); font-weight: var(--fw-head); color: var(--heading); }
.field label small { font-weight: var(--fw-body); color: var(--body); font-size: inherit; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px;
  background: var(--base); border: 1px solid var(--hairline);
  border-radius: var(--r-xs); font-size: var(--fs-sm); color: var(--heading);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%235F6D7A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-size: 18px;
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: #8A96A2; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18);
}
.field.is-invalid input { border-color: #C2410C; }
.field__error { font-size: var(--fs-13); color: #B03A0C; display: none; }
.field.is-invalid .field__error { display: block; }
.form__note { font-size: var(--fs-13); text-align: center; margin-top: 12px; }
.form__status { font-size: var(--fs-sm); color: var(--accent-ink); font-weight: var(--fw-head); text-align: center; margin-top: 10px; min-height: 1em; }
.form__status.is-warn { color: #B03A0C; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--anchor); color: var(--body-on-dark); }
.footer > .inner { padding-block: var(--section-y) var(--pad); }
.footer__wrap { display: flex; flex-direction: column; gap: var(--gap-64); padding: var(--pad) 0; }
.footer h5, .footer h6 { color: #fff; }

.footer__top { display: flex; gap: var(--gap-64); justify-content: space-between; flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: var(--gap); max-width: 384px; }
.footer__brand p { font-size: var(--fs-sm); }
.footer__tagline { font-size: var(--fs-13); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }

.footer__cta {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  max-width: 460px; padding: 28px 32px;
  align-self: flex-start;                          /* size to its content, not the taller logo column */
  border-radius: var(--r-sm); background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline-dark);
}
.footer__cta h2 { color: #fff; }
.footer__cta p { font-size: var(--fs-sm); }
.footer__cta .row { display: flex; gap: 10px; flex-wrap: wrap; }

.footer__cols { display: flex; gap: var(--gap); justify-content: space-between; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: var(--gap); min-width: 160px; }
.footer__heading { color: var(--body-on-dark); }
.footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.footer__col a {
  display: inline-block;
  font-size: var(--fs-sm); color: var(--body-on-dark);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}
.footer__col a:hover { color: var(--accent); transform: translateX(6px); }
.footer__col li { font-size: var(--fs-sm); display: flex; gap: 11px; align-items: flex-start; }
.footer__col li svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--hairline-dark); color: #fff;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t-slow) var(--ease), border-color var(--t) var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--anchor); }

.footer__bottom {
  display: flex; gap: var(--gap); justify-content: space-between; flex-wrap: wrap;
  border-top: 1px solid var(--hairline-dark); padding-top: var(--pad);
  font-size: var(--fs-sm);
}
.footer__bottom ul { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   16. FLOATING WHATSAPP BUBBLE
   pop-in on load · soft pulse ring · periodic wiggle · greeting tooltip.
   Every animation runs on transform/opacity only.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;                      /* the wrapper never blocks the page… */
}
.wa-float__btn {
  pointer-events: auto;                      /* …only the button and a visible tip do */
  position: relative;
  width: 62px; height: 62px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wa-green); color: #fff;
  box-shadow: 0 10px 28px rgba(37,211,102,.42), 0 2px 6px rgba(0,0,0,.14);
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease);
  /* rises straight up from below the screen edge (uses `translate`, so the hover
     `transform: scale` still works after it lands) */
  animation: wa-in .9s var(--ease-out) 1.2s both;
}
.wa-float__btn::before,
.wa-float__btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wa-green); z-index: -1;
  animation: wa-pulse 2.6s var(--ease-out) 2.2s infinite both;   /* pulses start once it has landed */
}
.wa-float__btn::after { animation-delay: 3.5s; }
.wa-float__btn svg { animation: wa-wiggle 7s var(--ease) 3s infinite; }
.wa-float__btn:hover { transform: scale(1.08); background: var(--wa-green-dark); }
.wa-float__btn:active { transform: scale(.96); }

.wa-float__tip {
  position: relative;
  max-width: 230px; padding: 12px 16px;
  background: #fff; color: var(--heading);
  border-radius: 14px 14px 4px 14px;
  font-size: var(--fs-14); line-height: 1.4;
  box-shadow: 0 12px 32px rgba(14,47,79,.18), 0 0 0 1px rgba(14,47,79,.06);
  opacity: 0; transform: translateX(12px) scale(.96); transform-origin: right bottom;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.wa-float__tip strong { display: block; font-weight: var(--fw-head); margin-bottom: 2px; }
.wa-float__tip-close {
  position: absolute; top: -8px; left: -8px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--anchor); color: #fff;
}
.wa-float:hover .wa-float__tip,
.wa-float.is-greeting .wa-float__tip { opacity: 1; transform: none; pointer-events: auto; }

@keyframes wa-in {
  from { opacity: 0; translate: 0 calc(100% + 40px); }
  30%  { opacity: 1; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .45; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes wa-wiggle {
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(-14deg); }
  90% { transform: rotate(12deg); }
  92% { transform: rotate(-9deg); }
  94% { transform: rotate(6deg); }
  96% { transform: rotate(-3deg); }
}

/* Back to top — stacked above the WhatsApp bubble */
.to-top {
  position: fixed; right: 32px; bottom: 100px; z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--anchor); color: #fff;
  box-shadow: 0 10px 24px rgba(14,47,79,.28);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
              visibility var(--t), background var(--t) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--anchor-hover); }

/* --------------------------------------------------------------------------
   17. MOTION — "haze → clarity"
   Everything arrives the way a surface does when it is cleaned: out of a soft
   haze into sharp focus. Titles resolve word by word, images are wiped clear
   top-to-bottom like a squeegee pass, content settles in beneath them.
   Only hidden while JS runs (html.js), with a 3.5s inline safety net.
   -------------------------------------------------------------------------- */

/* Content — gentle rise out of a light blur */
.js [data-reveal] {
  opacity: 0; transform: translateY(16px); filter: blur(4px);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Titles — split into words by script.js, each resolving from haze */
.split .w { display: inline-block; }
.js [data-split]:not([data-split-done]) { visibility: hidden; }   /* no flash before the split */
.js [data-split] .w {
  opacity: 0; transform: translateY(.38em); filter: blur(8px);
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out);
  transition-delay: calc(80ms + min(var(--i), 12) * 42ms);
}
.js [data-split].is-in .w { opacity: 1; transform: none; filter: none; }

/* Character split (data-split="chars", the About headline) — each letter rises
   out of a light haze; words stay intact so lines still wrap naturally */
.js [data-split="chars"] .w { opacity: 1; transform: none; filter: none; transition: none; }
.js [data-split="chars"] .c {
  display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(4px);
  transition: opacity .5s var(--ease-out), transform .8s var(--ease-out), filter .6s var(--ease-out);
  transition-delay: calc(min(var(--i), 48) * 14ms);
}
.js [data-split="chars"].is-in .c { opacity: 1; transform: none; filter: none; }

/* Rolling numbers — each digit spins a full turn then lands (NumberFlow-style) */
.js .roll__strip { transform: translateY(0); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k) * 110ms + 150ms); }
.js [data-roll].is-in .roll__strip { transform: translateY(calc((10 + var(--n)) * -1.1em)); }

/* Bento tiles — the WhatsApp mock rises, the checklist ticks, the rings ripple out */
.js .tile--accent .chatmock { transform: translate(-50%, 70%); opacity: 0; transition: transform 1s var(--ease-out) .3s, opacity .6s var(--ease-out) .3s; }
.js .tile--accent.is-in .chatmock { transform: translate(-50%, 16%); opacity: 1; }
.js .tile--accent .chatmock__bubble { transform: scale(.85); transform-origin: left bottom; opacity: 0; transition: transform .5s var(--ease-out) 1s, opacity .4s var(--ease-out) 1s; }
.js .tile--accent.is-in .chatmock__bubble { transform: none; opacity: 1; }

.js .checkcard { transform: translate(-50%, -14px); opacity: 0; transition: transform .8s var(--ease-out) .35s, opacity .6s var(--ease-out) .35s; }
.js .is-in .checkcard { transform: translateX(-50%); opacity: 1; }
.js .checkcard li svg { transform: scale(0); opacity: 0; transition: transform .5s var(--ease-out) calc(.8s + var(--k) * .4s), opacity .3s calc(.8s + var(--k) * .4s); }
.js .is-in .checkcard li svg { transform: none; opacity: 1; }
.js .is-in .checkcard__pulse { animation: checkpulse 1.6s var(--ease-out) 1.8s 4; }
@keyframes checkpulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 100% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); } }


/* Dividers draw in */
.js [data-line="x"] { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s var(--ease-out); }
.js [data-line="y"] { transform: scaleY(0); transform-origin: center top;  transition: transform 1s var(--ease-out) .15s; }
.js [data-line].is-in { transform: none; }

/* Images — squeegee wipe from the top while the photo sharpens */
/* every photo settles with a slow zoom-out as it arrives */
[data-img] img { transition: transform 1.9s var(--ease-out) var(--d, 0ms), filter 1s var(--ease-out) var(--d, 0ms); }
.js [data-img] {
  clip-path: inset(0 0 100% 0 round var(--img-round, var(--r-sm)));
  transition: clip-path 1.15s var(--ease-out) var(--d, 0ms);
}
.js [data-img] img { transform: scale(1.18); filter: blur(10px) saturate(.65); }
.js [data-img].is-in { clip-path: inset(0 0 0 0 round var(--img-round, var(--r-sm))); }
.js [data-img].is-in img { transform: none; filter: none; }

/* Hero — the focal moment, on load (CSS keyframes: no observer, no rAF) */
.js .hero__media img { animation: hero-settle 1.9s var(--ease-out) both; }
.js .hero [data-reveal] {
  opacity: 1; transform: none; filter: none; transition: none;
  animation: hero-rise .9s var(--ease-out) var(--d, 0ms) both;
}
.js .hero [data-split] .w {
  opacity: 1; transform: none; filter: none; transition: none;
  animation: word-resolve .95s var(--ease-out) both;
  animation-delay: calc(60ms + min(var(--i), 12) * 40ms);
}
.hero__spark {
  display: inline-block; width: .44em; height: .44em;
  margin-left: .04em; vertical-align: super;
  color: var(--accent);
}
.js .hero__spark {
  animation: spark-land .7s var(--ease-out) .72s both, spark-glint 1.1s var(--ease) 1.45s 1;
}

@keyframes hero-settle   { from { transform: scale(1.08); filter: blur(8px); } }
@keyframes hero-rise     { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
@keyframes word-resolve  { from { opacity: 0; transform: translateY(.38em); filter: blur(8px); } }
@keyframes spark-land    { from { opacity: 0; transform: scale(.2) rotate(-70deg); } }
@keyframes spark-glint   { 50% { transform: scale(1.2) rotate(10deg); } }

/* Reduced motion: keep the fades that signal arrival, drop movement/blur/wipes */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-split] .w, .js [data-split="chars"] .c {
    transform: none; filter: none;
    transition: opacity .45s linear; transition-delay: 0s;
  }
  .js .roll__strip, .js [data-line] { transition: none; }
  .js .tile--accent .chatmock, .js .tile--accent.is-in .chatmock { transform: translate(-50%, 16%); transition: opacity .45s linear; }
  .js .checkcard, .js .is-in .checkcard { transform: translateX(-50%); transition: opacity .45s linear; }
  .js .tile--accent .chatmock__bubble, .js .checkcard li svg { transform: none; transition: opacity .45s linear; }
  .js .is-in .checkcard__pulse { animation: none; }
  .js [data-img] { clip-path: none; opacity: 0; transition: opacity .5s linear; }
  .js [data-img].is-in { opacity: 1; }
  .js [data-img] img, .js [data-img].is-in img { transform: none; filter: none; }
  .js .hero__media img, .js .hero__spark { animation: none; }
  .js .hero [data-reveal], .js .hero [data-split] .w { animation: fade-only .5s linear both; }
  @keyframes fade-only { from { opacity: 0; } }

  .wa-float__btn, .wa-float__btn::before, .wa-float__btn::after, .wa-float__btn svg { animation: none; }
  .wa-float__btn::before, .wa-float__btn::after { opacity: 0; }
  .marquee.is-ready .marquee__track { animation: none; }
  .btn::before { animation: none; transition: opacity .3s linear; opacity: 0; top: -60%; translate: -50% -22%; }
  .btn:hover::before, .btn:focus-visible::before { opacity: 1; }
  .btn:active,
  .socials a:hover, .footer__col a:hover, .drawer nav a:hover,
  .feature:hover .feature__icon,
  .wa-float__btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   17b. INTRO — circle → hero
   Timing and easing match the Kora template's load reveal (measured from its
   source): 0.3s hold, 0.75s open, cubic-bezier(.87,0,.13,1). A clip-path
   circle grows from the centre until it covers the hero; the photo settles
   from a slight zoom and the dark overlay fades in with it (Kora fades its
   overlay 0 → full the same way). Hero copy, header and the WhatsApp bubble
   wait, then play their normal entrances.
   html.intro      → set inline in <head> (skipped for reduced motion / #hash)
   html.intro-play → added by script.js once the hero photo is decoded
   html.intro-done → added when the circle has opened
   -------------------------------------------------------------------------- */
:root {
  --intro-r: clamp(52px, 7vw, 104px);            /* ≈200px wide on desktop, like Kora's start card */
  --intro-ease: cubic-bezier(.87, 0, .13, 1);
  --intro-delay: .3s;
  --intro-dur: .75s;
}

.intro .hero { clip-path: circle(var(--intro-r) at 50% 50%); }
.intro .hero__media img { animation: none; transform: scale(1.22); filter: none; }
.intro .hero__media::after { opacity: 0; }

/* everything else holds its first frame until the circle has opened */
.intro .hero [data-reveal],
.intro .hero [data-split] .w,
.intro .hero__spark,
.intro .wa-float__btn, .intro .wa-float__btn::before, .intro .wa-float__btn::after { animation-play-state: paused; }
.intro .header { opacity: 0; transform: translateY(-14px); visibility: hidden; }

.intro-play .hero {
  will-change: clip-path;
  animation: intro-open var(--intro-dur) var(--intro-ease) var(--intro-delay) both;
}
.intro-play .hero__media img  { animation: intro-zoom var(--intro-dur) var(--intro-ease) var(--intro-delay) both; }
.intro-play .hero__media::after { animation: intro-dim var(--intro-dur) var(--intro-ease) var(--intro-delay) both; }

/* the photo already settled during the intro — don't replay the load zoom */
.intro-done .hero__media img { animation: none; }

@keyframes intro-open {
  from { clip-path: circle(var(--intro-r) at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }       /* 75% of the reference radius clears every corner */
}
@keyframes intro-zoom { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes intro-dim  { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .why     { grid-template-columns: 1fr 1fr; gap: var(--gap-48); }
  .process { grid-template-columns: 1fr 1fr; gap: var(--gap-48); }
  .trust   { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}

@media (max-width: 1024px) {
  .achieve__feature { grid-template-columns: 1fr; gap: 40px; }
  .achieve__details { padding: 0 32px 0 0; }
  .achieve__badges { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  :root { --section-y: 76px; --gap-64: 40px; }
  .nav, .header__cta .btn { display: none; }
  .nav-toggle { display: grid; }
  .why, .book { grid-template-columns: 1fr; }
  .book__card, .book__copy { grid-column: auto; grid-row: auto; }
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 320px; }
  .why__media { min-height: 0; aspect-ratio: 16 / 10; }
  /* Footer: brand and CTA share the row when there's room, otherwise each spans the full
     width; link columns fill the width in an adaptive grid */
  .footer__brand { flex: 1 1 320px; max-width: none; }
  .footer__cta { flex: 1 1 360px; max-width: none; }
  .footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px 24px; }
  .footer__col { min-width: 0; }
  .footer__col a, .footer__col span { overflow-wrap: anywhere; }
  .terms { grid-template-columns: 1fr; }
  .legal > .inner { padding-top: calc(88px + 40px); }
  .clause { padding: 64px 0; }
  .term { min-height: 560px; }
  .svc { grid-template-columns: 1fr; gap: 56px; }
  .svc__intro { position: static; min-height: 0; }
  .svc__list { gap: 72px; }
  .tile--6x1 { grid-column: span 4; }
}

/* Short laptop screens (1366×768, 1280×720, 1024×768): tighten the hero so
   the trust bar still lands inside the first screen. */
@media (min-width: 761px) and (max-height: 860px) {
  .hero > .inner { padding-block: 100px 24px; }
  .hero__body { gap: 36px; }
  .hero__lead { gap: 18px; }
  .hero__lead h1 { font-size: clamp(2.375rem, 6.4vh, 3.5rem); }
  .hero__lead > p:not(.kicker) { font-size: 1rem; line-height: 1.6; }
  .trust { padding-top: 20px; }
}

@media (max-width: 760px) {
  .sec-headline, .sec-body, .achieve__snapshot { margin-top: 40px; }
  .sec-titlerow { row-gap: 6px; }
  .sec-titlerow > .sec-vr { display: none; }                  /* meta wraps below, so the divider would dangle */
  .sec-meta { flex-basis: 100%; }
  .sec-headline--split { align-items: flex-start; }
  .achieve__sheet { grid-template-columns: 1fr; gap: 32px; }
  .achieve__details { padding: 0; }
  /* About numbers: one 2-column grid of three rows (the two stats + the four snapshot
     cells), same label and number sizes, left-aligned, joined hairlines */
  .achieve__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; min-width: 0; border-top: 1px solid var(--achieve-rule); }
  .achieve__stats .achieve__vr--full { display: none; }
  .achieve__snapshot { margin-top: 0; }
  .achieve__grid { grid-template-columns: 1fr 1fr; }
  .achieve__stat, .achieve__cell {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 20px 12px 20px 0; text-align: left; min-width: 0;
    border-top: 0; border-left: 0; border-bottom: 1px solid var(--achieve-rule);
  }
  .achieve__stat + .achieve__stat, .achieve__cell:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--achieve-rule); }
  .achieve__label { font-size: .8125rem; line-height: 1.35; letter-spacing: .01em; }
  .achieve__stat-num, .achieve__cell-num { margin-top: 0; font-size: clamp(2.25rem, 1.6rem + 3vw, 2.75rem); line-height: 1; letter-spacing: -0.04em; }
  .achieve__badges { grid-template-columns: 1fr 1fr; justify-items: start; margin-top: 24px; }
  .achieve__badges li { justify-content: flex-start; }
  :root { --section-y: 64px; --pad: 20px; --gap-48: 32px; --gap-64: 32px; }
  /* mobile hero budget: everything incl. the trust bar fits a 844px screen */
  .hero > .inner { padding-block: 96px 100px; }  /* bottom band = WhatsApp bubble zone */
  .hero__media img { object-position: 80% center; }   /* keep the cleaner in frame on tall phone screens */
  .hero__lead { gap: 18px; }
  .hero__lead > p:not(.kicker) { font-size: var(--fs-sm); line-height: 1.6; }
  .hero__cta { flex-wrap: nowrap; margin-top: 4px; }
  .hero__cta .btn--lg { padding: 14px 21px; font-size: var(--fs-sm); }
  .trust { grid-template-columns: 1fr 1fr; gap: 14px 12px; padding-top: 20px; padding-right: 0; }
  .trust__item { align-items: center; gap: 10px; }
  .trust__icon { width: 34px; height: 34px; }
  .trust__icon svg { width: 18px; height: 18px; }
  .trust__item strong { font-size: var(--fs-14); line-height: 1.3; }
  .trust__item div > span { display: none; } /* sub-line only (the icon is a span too); the bold promise carries it */
  .form, .features, .checks { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 12px; }
  .tile { padding: 24px; }
  .tile--2x2, .tile--2x1, .tile--6x1 { grid-column: span 2; grid-row: auto; }
  .tile--2x2 { min-height: 460px; }
  .tile--2x1 { min-height: 300px; }
  .tile--accent { min-height: 340px; }
  .tile--6x1 { min-height: 460px; }
  .tile--6x1.tile--fade-left .tile__bg::after { background: linear-gradient(0deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 40%, rgba(255,255,255,0) 62%); }
  .tile--6x1 .tile__bg img { object-position: 88% center; }
  .tile--6x1 .tile__content--middle { margin-block: auto 0; max-width: none; }
  .svc__details { grid-template-columns: 1fr; gap: 24px; }
  .term { padding: 24px; min-height: 520px; }
  .testimonial { padding: 24px; }
  .book__card { padding: 24px 20px; }
  .legal__head { margin-top: 40px; padding-bottom: 40px; }
  .clause { grid-template-columns: 1fr; gap: 24px; padding: 48px 0; }
  .clause__num { width: 64px; height: 64px; border-radius: 20px; font-size: 1.25rem; }
  .clause__num svg { width: 26px; height: 26px; }
  /* Footer on phones: brand text and CTA card full width; links in a 2 × 2 grid */
  .footer__top { flex-direction: column; gap: 32px; }
  .footer__brand, .footer__cta { flex: none; max-width: none; width: 100%; align-self: stretch; }
  .footer__cta { padding: 24px 20px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer__col { gap: 16px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; padding-bottom: 84px; }
  .drawer nav a { font-size: 1.5rem; }
  .brand img { height: 46px; }
  .brand--full img { height: 112px; }
  .wa-float { right: 16px; bottom: 16px; }
  .wa-float__btn { width: 56px; height: 56px; }
  .wa-float__tip { max-width: 190px; }
  .to-top { right: 21px; bottom: 86px; width: 42px; height: 42px; }
}

.sm-only { display: none; }
@media (max-width: 420px) {
  .lg-only { display: none; }
  .sm-only { display: inline; }
}

/* ==========================================================================
   WORDPRESS ADDITIONS
   Everything above this line is the static site's stylesheet, unchanged.
   ========================================================================== */

/* Admin bar: keep the fixed header below it for logged-in users */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header { top: 0; } }  /* WP's bar scrolls away on phones */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus { clip: auto; width: auto; height: auto; margin: 0; padding: 12px 16px; background: #fff; color: var(--heading); z-index: 1000; left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Cover header — a page's featured image behind its title.
   Height, overlay, focus point and alignment come from the "Cover header" box
   in the editor (inline custom properties).
   -------------------------------------------------------------------------- */
.page-cover {
  --cover-h: 60vh; --cover-min: 420px; --cover-overlay: .55; --cover-pos: 50% 50%;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; min-height: max(var(--cover-min), var(--cover-h));
  background: var(--anchor); color: #fff;
}
.page-cover__media { position: absolute; inset: 0; z-index: -2; }
.page-cover__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-pos); }
.page-cover__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,35,64,.55) 0%, rgba(10,35,64,0) 55%),
    rgba(10,35,64,var(--cover-overlay));
}
.page-cover > .inner { display: flex; width: 100%; padding-block: calc(88px + 56px) 56px; }
.page-cover__body { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 900px; }
.page-cover--v-bottom .page-cover__body { margin-top: auto; }
.page-cover--v-center .page-cover__body { margin-block: auto; }
.page-cover--center .page-cover__body { align-items: center; text-align: center; margin-inline: auto; }
.page-cover__title { color: #fff; font-size: var(--t-display); line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; }
.page-cover__title .hl-ink { color: var(--accent); }          /* the ink blue is for light grounds */
.page-cover__sub { font-size: var(--t-title-sm); line-height: 1.4; font-weight: 500; letter-spacing: -0.03em; color: rgba(255,255,255,.84); max-width: 680px; }
.js .page-cover__media img { animation: hero-settle 1.9s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .js .page-cover__media img { animation: none; } }
@media (max-width: 760px) {
  .page-cover > .inner { padding-block: calc(76px + 40px) 40px; }
}

/* --------------------------------------------------------------------------
   Inner pages, posts, blog
   -------------------------------------------------------------------------- */
.page-main > .inner { padding-block: calc(88px + 72px) var(--section-y); }
.page-main--after-cover > .inner,
.legal--after-cover > .inner { padding-top: var(--section-y); }
.legal__head--slim { display: none; }
.legal--after-cover .legal__content { margin-top: 20px; }
.page-head { display: flex; flex-direction: column; gap: 20px; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--hairline); }
.page-head h1 { font-size: var(--t-display); line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; max-width: 1000px; }
@media (max-width: 760px) {
  .page-main > .inner { padding-top: calc(76px + 40px); }
  .page-head { padding-bottom: 32px; margin-bottom: 32px; }
}

/* Block content in the site's type system */
.entry-content { max-width: 780px; color: var(--body); font-size: var(--t-body); line-height: 1.7; letter-spacing: -0.01em; }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content > .alignwide { max-width: min(1100px, calc(100vw - 2 * var(--pad))); }
.entry-content > .alignfull { max-width: none; width: calc(100vw); margin-left: calc(50% - 50vw); }
.entry-content h2 { font-size: var(--t-title-lg); line-height: 1.15; font-weight: 500; margin-top: 1.6em; }
.entry-content h3 { font-size: var(--t-title-md); line-height: 1.2; font-weight: 500; letter-spacing: -0.04em; margin-top: 1.5em; }
.entry-content h4 { font-size: var(--t-title-sm); line-height: 1.3; font-weight: 500; margin-top: 1.4em; }
.entry-content h5, .entry-content h6 { margin-top: 1.3em; }
.entry-content a:not(.wp-block-button__link) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content a:not(.wp-block-button__link):hover { color: var(--heading); }
.entry-content strong { color: var(--heading); font-weight: 600; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .4em; }
.entry-content li::marker { color: var(--accent-ink); }
.entry-content blockquote, .entry-content .wp-block-quote { border-left: 3px solid var(--accent); padding: 4px 0 4px 24px; font-size: var(--t-title-sm); line-height: 1.45; color: var(--heading); }
.entry-content blockquote cite { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--body); font-style: normal; }
.entry-content img, .entry-content .wp-block-image img { border-radius: var(--r-sm); }
.entry-content figcaption, .wp-caption-text { margin-top: 8px; font-size: var(--fs-14); color: var(--body); }
.entry-content hr, .entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--hairline); margin-block: 2.5em; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.entry-content th, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); text-align: left; }
.entry-content th { color: var(--heading); font-weight: 600; background: var(--surface); }
.entry-content code, .entry-content pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface); border-radius: var(--r-xs); }
.entry-content code { padding: 2px 6px; }
.entry-content pre { padding: 18px 20px; overflow-x: auto; }
.entry-content .wp-block-button__link {
  display: inline-flex; align-items: center; padding: 13px 25px; border-radius: var(--r-pill);
  background: var(--anchor); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-head); text-decoration: none;
}
.entry-content .wp-block-button__link:hover { background: var(--accent); color: var(--anchor); }
.entry-content .is-style-outline .wp-block-button__link { background: transparent; color: var(--anchor); box-shadow: inset 0 0 0 1px var(--hairline); }
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; text-align: center; }
.wp-caption { max-width: 100%; }
.sticky, .bypostauthor, .gallery-caption { /* reserved WordPress classes */ }

.page-links { margin-top: 32px; display: flex; gap: 10px; font-weight: var(--fw-head); color: var(--heading); }
.post-nav { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.post-nav .nav-links { display: flex; justify-content: space-between; gap: 24px; }
.post-nav a { display: flex; flex-direction: column; gap: 4px; color: var(--heading); font-weight: var(--fw-head); }
.post-nav .t-label { color: var(--body); font-size: var(--fs-14); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-sm); overflow: hidden; }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.post-card__body h2 a:hover { color: var(--accent-ink); }
.pagination, .nav-links { margin-top: 48px; display: flex; gap: 8px; flex-wrap: wrap; }
.page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--heading); font-weight: var(--fw-head); }
.page-numbers.current { background: var(--anchor); color: #fff; box-shadow: none; }
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .post-grid { grid-template-columns: 1fr; } }

.search-form { display: flex; gap: 10px; margin-top: 24px; }
.search-form label { flex: 1; }
.search-form .search-field { width: 100%; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--r-pill); }
.search-form .search-submit { padding: 12px 22px; border-radius: var(--r-pill); background: var(--anchor); color: #fff; font-weight: var(--fw-head); border: 0; cursor: pointer; }

.comments { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hairline); max-width: 780px; }
.comment-list { margin: 24px 0 40px; display: grid; gap: 24px; }
.comment-list .children { margin: 20px 0 0 32px; display: grid; gap: 20px; }
.comment-body { padding: 20px 24px; background: var(--surface); border-radius: var(--r-sm); }
.comment-meta { font-size: var(--fs-14); margin-bottom: 8px; }
.comment-author .avatar { display: inline-block; width: 32px; height: 32px; margin-right: 8px; vertical-align: middle; box-shadow: none; }
.comment-form { display: grid; gap: 14px; }
.comment-form label { display: block; font-size: var(--fs-14); color: var(--heading); margin-bottom: 4px; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-xs); }

.page-404 .legal__actions { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Terms template — clauses written as blocks in the editor.
   Group (class "clause") > Heading + Paragraph. Numbers come from a CSS counter,
   so reordering or adding clauses renumbers them automatically.
   -------------------------------------------------------------------------- */
.legal__content.entry-content { max-width: none; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.legal__content { counter-reset: clause; }
.legal__content > * + * { margin-top: 0; }
.legal__content > .clause {
  display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); column-gap: 0; row-gap: 24px; align-items: start;
  padding: 80px 0; border-bottom: 1px solid var(--hairline); scroll-margin-top: 96px;
}
.legal__content > .clause::before {
  counter-increment: clause; content: counter(clause, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 6;
  width: 90px; height: 90px; display: grid; place-items: center; align-self: start;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 28px;
  font-size: 1.75rem; line-height: 1; letter-spacing: -0.04em; color: var(--heading);
}
.legal__content > .clause > *,
.legal__content > .clause > .wp-block-group__inner-container { grid-column: 2; max-width: 640px; margin: 0; }
.legal__content > .clause > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 24px; }
.legal__content .clause__title,
.legal__content .clause h2 { font-size: var(--t-title-lg); line-height: 1.1; font-weight: 500; letter-spacing: -0.04em; color: var(--heading); text-wrap: balance; margin: 0; }
.legal__content .clause p { font-size: clamp(1.125rem, 1rem + .3vw, 1.25rem); line-height: 1.6; letter-spacing: -0.01em; color: var(--body); margin: 0; }
.legal__content .clause strong { color: var(--heading); font-weight: var(--fw-head); }
.legal__content > .clause--important { border-bottom: 0; }
.legal__content > .clause--important::before {
  counter-increment: none; content: '';
  background: var(--accent) center / 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2F4F' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z'/%3E%3C/svg%3E");
  border-color: var(--accent); border-radius: 50%;
}
.legal__content > .clause--important p { color: var(--heading); }
.legal__actions--page { padding-left: 36%; }
@media (max-width: 1024px) { .legal__content > .clause { padding: 64px 0; } }
@media (max-width: 760px) {
  .legal__content > .clause { grid-template-columns: 1fr; padding: 48px 0; }
  .legal__content > .clause::before { grid-row: auto; width: 64px; height: 64px; border-radius: 20px; font-size: 1.25rem; }
  .legal__content > .clause--important::before { border-radius: 50%; background-size: 26px; }
  .legal__content > .clause > *, .legal__content > .clause > .wp-block-group__inner-container { grid-column: 1; }
  .legal__actions--page { padding-left: 0; }
}