/* Sarah Pratt & Associates demo. Embroker-style layout in the firm's green and gold. */
:root {
  --ink: #1c1c1c;
  --muted: #5f6b63;
  --accent: #1a3a2a;
  --accent-deep: #11261c;
  --accent-lt: #e8f0eb;
  --gold: #b89a5e;
  --gold-lt: #f3ede1;
  --sand: #f9f7f4;
  --white: #ffffff;
  --bg: #ffffff;
  --surface: #ffffff;
  --sand-2: #f3f1ec;
  --accent-ink: #1a3a2a;
  --btn-bg: #1a3a2a;
  --btn-bg-hover: #11261c;
  --btn-fg: #ffffff;
  /* Opening section. Defaults reproduce the original light hero; client palettes turn it dark. */
  --hero-bg: var(--bg);
  --page-hero-bg: var(--accent-lt);
  --hero-fg: var(--ink);
  --hero-muted: var(--ink);
  --hero-accent: var(--accent-ink);
  --hero-blob: var(--accent-lt);
  --page-hero-blob: var(--surface);
  --hero-blob-2: var(--gold-lt);
  --hero-btn-bg: var(--btn-bg);
  --hero-btn-fg: var(--btn-fg);
  --hero-btn-hover: var(--btn-bg-hover);
  --border: #e2ddd4;
  --error: #b3261e;
  --radius-card: 32px;
  --radius-pill: 9999px;
  --shadow-card: 0 8px 24px rgba(28, 28, 28, 0.12);
  --shadow-lift: 0 16px 36px rgba(28, 28, 28, 0.18);
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1168px;
  --gutter: 20px;
  --section-pad: clamp(56px, 8vw, 96px);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.06; }
h2 { font-size: clamp(32px, 4vw, 48px); }
h3 { font-size: 24px; line-height: 1.25; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(18px, 2vw, 22px); max-width: 34em; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.tag { display: inline-block; font-weight: 600; margin: 0 0 6px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; }
.band-tint { background: var(--accent-lt); }
.band-sand { background: var(--sand); }
.band-deep { background: var(--accent-deep); color: var(--white); }
.band-deep h2, .band-deep h3 { color: var(--white); }
.band-deep .eyebrow { color: var(--gold); }
.section-head { max-width: 46em; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { max-width: 40em; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid:hover, .btn-gold:hover { box-shadow: 0 10px 22px color-mix(in srgb, var(--accent-deep) 25%, transparent); }
.btn-solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn-solid:hover { background: var(--btn-bg-hover); }
.btn-outline { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn-outline:hover { background: var(--accent-lt); }
.btn-gold { background: var(--gold); color: var(--accent-deep); }
.btn-gold:hover { background: color-mix(in srgb, var(--gold) 85%, white); }
.btn-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-white:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.link { font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link-white { color: var(--white); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: 32px; min-height: var(--header-h); position: relative; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .monogram { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--gold); font: italic 500 15px/1 Georgia, serif; letter-spacing: .02em; flex: none; }
.brand strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.1; }
.brand small { display: block; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.nav-links { display: flex; gap: 28px; margin-left: 24px; }
.nav-links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 16px; padding: 8px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); border-bottom-color: var(--gold); }
.nav-actions { display: flex; gap: 12px; margin-left: auto; }
.menu-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; border-radius: 12px; }
.menu-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; }
.menu-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--accent-deep) 45%, transparent); z-index: 40; }

/* Hero */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px); overflow: hidden; background: var(--hero-bg); color: var(--hero-fg); }
.hero .eyebrow, .page-hero .eyebrow, .hero .link, .page-hero .link { color: var(--hero-accent); }
.hero .lede, .page-hero .lede { color: var(--hero-muted); }
.hero .btn-solid, .page-hero .btn-solid { background: var(--hero-btn-bg); color: var(--hero-btn-fg); }
.hero .btn-solid:hover, .page-hero .btn-solid:hover { background: var(--hero-btn-hover); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 32px; }
.hero-visual { position: relative; aspect-ratio: 4 / 4.4; max-width: 520px; width: 100%; margin-left: auto; }
.blob { position: absolute; inset: 6% 0 8% 8%; background: var(--hero-blob); border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; }
.blob-gold { inset: 30% 0 0 40%; background: var(--hero-blob-2); border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%; }
.hero-photo { position: absolute; left: 14%; right: 10%; bottom: 8%; top: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--radius-card); background: var(--accent-lt); }
.hero-card { position: absolute; left: 0; bottom: 6%; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-card); padding: 16px 20px; max-width: 290px; color: var(--ink); }
.badge-text { display: flex; gap: 14px; align-items: center; }
.badge-text img { height: 72px; width: auto; flex: none; }
/* V2: LIV member logo alone. Padding = clear zone X (height of the LAW + INSTITUTE lines, ~30px at this size). */
.badge-logo { display: none; }
.badge-logo img { height: 64px; width: auto; }
:root[data-badge="logo"] .badge-text { display: none; }
:root[data-badge="logo"] .badge-logo { display: block; }
:root[data-badge="logo"] .hero-card { padding: 32px; max-width: none; }
.hero-card strong { display: block; font-family: var(--font-display); font-size: 16px; line-height: 1.2; }
.hero-card small { color: var(--muted); font-size: 13px; }

/* Stats */
.stats-head { text-align: center; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; margin: 0 0 40px; }
/* Rule above the figures: a hairline with a marker over each stat. Drawn in by the credentials motion sequence. */
.stats-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; height: 9px; margin: 0 0 28px; }
.stats-rail::before, .stats-rail::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: color-mix(in srgb, var(--accent-ink) 16%, transparent); }
.stats-rail::after { background: var(--accent-ink); transform-origin: left center; }
.stats-rail i { position: relative; z-index: 1; width: 9px; height: 9px; margin-left: 20px; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-lt); }
.stat strong { font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { display: flex; gap: 16px; align-items: flex-start; }
.stat .icon { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--accent-ink); flex: none; }
.stat .icon svg { width: 24px; height: 24px; fill: currentColor; }
.stat strong { display: block; font-family: var(--font-display); font-size: 36px; line-height: 1; font-weight: 500; margin-bottom: 6px; }
.stat span { font-size: 15px; color: var(--muted); }


/* Memberships / LIV logo */
.memberships { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); color: var(--muted); font-size: 14px; font-weight: 500; }
.memberships img { height: 56px; width: auto; }
.memberships .acc-logo { height: 76px; }
.memberships .tile { background: var(--white); border-radius: 18px; padding: 26px; display: block; }
:root[data-theme="dark"] .memberships .tile { background: transparent; padding: 0; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
:root[data-theme="dark"] .memberships { border-top-color: rgba(255, 255, 255, 0.12); }
.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 22px; }
.footer-logo { height: 56px; width: auto; }
.footer-logo.acc-logo { height: 72px; }
.glance-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 20px; }
.glance-logo { height: 56px; width: auto; }
.glance-logo.acc-logo { height: 76px; }

/* Cards */
.card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.card .icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-lt); display: grid; place-items: center; color: var(--accent-ink); margin-bottom: 8px; }
.card .icon svg { width: 30px; height: 30px; fill: currentColor; }
.card h3 { margin: 0; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 8px; }
.card-accent { background: var(--accent); color: var(--white); box-shadow: none; }
.card-accent h3 { color: var(--white); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Feature cards (pastel, tall) */
.feature { border-radius: var(--radius-card); padding: 40px 32px 44px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; background: var(--accent); color: color-mix(in srgb, var(--white) 86%, transparent); }
.feature::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.feature:hover::after { transform: scaleX(1); }
.feature .icon { width: 60px; height: 60px; border-radius: 50%; background: var(--gold); color: var(--accent-deep); display: grid; place-items: center; margin-bottom: 20px; }
.feature .icon svg { width: 28px; height: 28px; fill: currentColor; }
.feature h3 { margin: 0; color: var(--white); }

/* About teaser */
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about-photo { position: relative; max-width: 460px; }
.about-photo img { border-radius: var(--radius-card); width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: top; background: var(--accent-lt); }
.about-photo::before { content: ""; position: absolute; inset: 10% -6% -6% 10%; background: var(--gold-lt); border-radius: var(--radius-card); z-index: -1; }
.about-grid > div:first-child { position: relative; z-index: 0; }
/* No photographs of Sarah on the site (her request): the hero shows the accreditation badge alone, the About band is one column. */
.hero-visual-plain { aspect-ratio: 1 / .78; max-width: 440px; display: grid; place-items: center; }
.hero-visual-plain .blob { inset: 0 4% 6% 0; }
.hero-visual-plain .blob-gold { inset: 34% 0 0 38%; }
.hero-visual-plain .hero-card { position: relative; left: auto; bottom: auto; padding: 22px 26px; max-width: 320px; }
.about-solo { grid-template-columns: 1fr; }
.about-solo > div { max-width: 46em; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; padding: 0; list-style: none; }
.chips li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 14px; font-weight: 500; }

/* Capability */
/* Legal pages (privacy policy): a plain reading column. */
.page-hero-plain .lede { margin-bottom: 0; }
.legal { max-width: calc(46em + var(--gutter) * 2); }
.legal h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 2em 0 .6em; }
.legal ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal li { margin-bottom: .35em; }
.legal a { overflow-wrap: anywhere; }

/* Firm capability infographic: preparation pathway panel, four capability cards, closing call to action. */
.cap-panel { background: var(--accent); color: color-mix(in srgb, var(--white) 86%, transparent); border-radius: var(--radius-card); padding: clamp(28px, 4.5vw, 56px); }
.cap-panel-head { max-width: 44em; }
.cap-panel h3 { color: var(--white); font-size: clamp(22px, 2.4vw, 30px); }
.cap-panel .eyebrow, .cap-track-label { color: var(--gold); }
.cap-track-label { margin: clamp(32px, 4vw, 48px) 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cap-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.cap-track::before, .cap-track::after { content: ""; position: absolute; top: 22px; left: 22px; width: calc(100% * 5 / 6); height: 1px; background: color-mix(in srgb, var(--white) 24%, transparent); }
.cap-track::after { background: var(--gold); height: 2px; top: 21.5px; transform-origin: left top; }
.cap-step { position: relative; z-index: 1; padding: 60px 16px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--white); }
.cap-step .node { position: absolute; top: 0; left: 0; width: 45px; height: 45px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; }
.cap-step .node svg { width: 20px; height: 20px; fill: currentColor; }
.cap-end { color: var(--gold); padding-right: 0; }
.cap-end .node { background: var(--gold); color: var(--accent-deep); }
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.cap-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 30px 24px 28px; transition: transform .25s ease, box-shadow .25s ease; }
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.cap-card .icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-lt); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 18px; }
.cap-card .icon svg { width: 24px; height: 24px; fill: currentColor; }
.cap-card h3 { margin: 0 0 8px; }
.cap-card p { font-size: 15px; color: var(--muted); }
.cap-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px clamp(24px, 3vw, 40px); border-radius: var(--radius-card); background: var(--accent-lt); }
.cap-cta p { margin: 0; font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); font-weight: 500; line-height: 1.25; }
.cap-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
:root[data-corners="square"] .cap-card { border-radius: 0; }
@media (max-width: 1000px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  /* Pathway turns vertical */
  .cap-track { grid-template-columns: 1fr; }
  .cap-track::before, .cap-track::after { top: 22px; bottom: 22px; left: 22px; width: 1px; height: auto; }
  .cap-track::after { width: 2px; left: 21.5px; }
  .cap-step { padding: 11px 0 30px 64px; min-height: 45px; }
  .cap-step:last-child { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-cta { flex-direction: column; align-items: flex-start; }
}
.mini { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 24px; }
.mini h3 { font-size: 20px; margin-bottom: 8px; }
.mini p { font-size: 15px; color: var(--muted); }

/* CTA band */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.cta-visual { justify-self: end; width: min(100%, 360px); aspect-ratio: 1; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; background: var(--accent); border: 2px solid color-mix(in srgb, var(--gold) 50%, transparent); display: grid; place-items: center; color: var(--gold); text-align: center; padding: 32px; }
.cta-visual strong { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; display: block; }
.cta-visual span { color: rgba(255,255,255,.8); font-size: 15px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-rows { display: grid; gap: 14px; margin: 28px 0; }
.contact-rows a, .contact-rows span { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 500; }
.contact-rows svg { width: 22px; height: 22px; fill: var(--accent-ink); flex: none; }
.urgent { background: var(--accent-deep); color: var(--white); border-radius: 24px; padding: 24px 28px; }
.urgent small { color: var(--gold); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.urgent a { display: block; color: var(--white); text-decoration: none; font-family: var(--font-display); font-size: 32px; margin: 6px 0 4px; }
.urgent p { color: rgba(255,255,255,.75); font-size: 14px; margin: 0; }
.form-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(24px, 3vw, 40px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.enquiry-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 16px; font: 400 16px/1.4 var(--font-body); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); min-height: 48px;
}
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.enquiry-form .error { border-color: var(--error); }
.enquiry-form textarea { resize: vertical; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.success-message { background: var(--accent-lt); border-radius: 20px; padding: 24px 28px; font-weight: 500; }
.enquiry-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--error); font-weight: 500; margin: 0 0 14px; }

/* Footer */
.footer { background: var(--accent-deep); color: rgba(255,255,255,.8); padding: 64px 0 32px; font-size: 15px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer .brand { color: var(--white); }
.footer .brand small { color: rgba(255,255,255,.6); }
.footer h3 { color: var(--white); font-size: 15px; margin-bottom: 14px; font-family: var(--font-body); font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer-legal { padding-top: 24px; font-size: 13px; color: rgba(255,255,255,.6); }
.footer-legal a { color: inherit; }

/* About page */
.page-hero { padding: clamp(40px, 6vw, 80px) 0; background: var(--page-hero-bg); color: var(--hero-fg); }
.page-hero .blob:not(.blob-gold) { background: var(--page-hero-blob); }
.page-hero .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.page-hero .hero-visual { aspect-ratio: 4 / 4.2; max-width: 420px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.glance { position: sticky; top: calc(var(--header-h) + 24px); }
.glance ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.glance li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.glance li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex: none; }
.profile p { font-size: 18px; }
.timeline { list-style: none; padding: 0; margin: 24px 0 0; border-left: 2px solid var(--accent-lt); display: grid; gap: 22px; }
.timeline li { position: relative; padding-left: 28px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--gold); }
.timeline strong { display: block; font-family: var(--font-display); font-size: 19px; }
.timeline span { color: var(--muted); font-size: 15px; }
.quote { background: var(--accent); color: var(--white); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 48px); margin: 40px 0 0; }
.quote p { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; margin: 0; }
.quote footer { margin-top: 16px; color: var(--gold); font-size: 15px; font-weight: 600; }


/* Dark theme: token overrides only */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1efe8;
  --muted: #a7b3aa;
  --bg: #0e1712;
  --surface: #172219;
  --border: #2b3b31;
  --accent-lt: #1c2f24;
  --gold-lt: #2a2519;
  --sand: #121c16;
  --sand-2: #141f19;
  --accent-deep: #08110c;
  --accent-ink: #9dc7ae;
  --btn-bg: #2d5a41;
  --btn-bg-hover: #38714f;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.6);
}


/* Client palettes (from Sarah's shortlist). Each = main / accent / ivory ground, dark opening section, accent action colour.
   Light blocks first, then dark variants (higher specificity). data-palette="original" has no block: base tokens apply. */
:root[data-palette="navy"] {
  --ink: #16202B; --muted: #5A6470; --accent: #10243A; --accent-deep: #0B1A2B; --accent-lt: #E6EBF0;
  --gold: #C7A76C; --gold-lt: #F3EBDD; --sand: #F1EEE7; --sand-2: #ECE8DF; --bg: #F7F5F0; --surface: #FFFFFF;
  --border: #DED9CE; --accent-ink: #10243A;
  --btn-bg: #C7A76C; --btn-bg-hover: #D3B781; --btn-fg: #10243A;
  --hero-bg: #10243A; --page-hero-bg: #10243A; --hero-fg: #F7F5F0; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #C7A76C;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #C7A76C; --hero-btn-fg: #10243A; --hero-btn-hover: #D3B781;
}
:root[data-palette="forest"] {
  --ink: #17211F; --muted: #57655F; --accent: #123B35; --accent-deep: #0C2A26; --accent-lt: #E4EDEA;
  --gold: #C7AD7F; --gold-lt: #F3ECDD; --sand: #EFEBE2; --sand-2: #E9E4D9; --bg: #F6F3EC; --surface: #FFFFFF;
  --border: #DCD6C8; --accent-ink: #123B35;
  --btn-bg: #C7AD7F; --btn-bg-hover: #D3BC94; --btn-fg: #123B35;
  --hero-bg: #123B35; --page-hero-bg: #123B35; --hero-fg: #F6F3EC; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #C7AD7F;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #C7AD7F; --hero-btn-fg: #123B35; --hero-btn-hover: #D3BC94;
}
:root[data-palette="charcoal"] {
  --ink: #1B1D21; --muted: #5E6168; --accent: #22252A; --accent-deep: #17191D; --accent-lt: #ECEBE8;
  --gold: #C28B68; --gold-lt: #F5E9E1; --sand: #F3F1EC; --sand-2: #EDEAE4; --bg: #FAF9F6; --surface: #FFFFFF;
  --border: #DFDCD5; --accent-ink: #22252A;
  --btn-bg: #C28B68; --btn-bg-hover: #CF9D7E; --btn-fg: #17191D;
  --hero-bg: #22252A; --page-hero-bg: #22252A; --hero-fg: #FAF9F6; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #C28B68;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #C28B68; --hero-btn-fg: #17191D; --hero-btn-hover: #CF9D7E;
}
:root[data-palette="burgundy"] {
  --ink: #24161B; --muted: #6A5960; --accent: #5A1F33; --accent-deep: #3E1423; --accent-lt: #F3E9EC;
  --gold: #D7C9BE; --gold-lt: #F1EAE4; --sand: #F4EFE8; --sand-2: #EEE7DE; --bg: #FAF7F2; --surface: #FFFFFF;
  --border: #E2D8CE; --accent-ink: #5A1F33;
  --btn-bg: #5A1F33; --btn-bg-hover: #6E2A41; --btn-fg: #FAF7F2;
  --hero-bg: #5A1F33; --page-hero-bg: #5A1F33; --hero-fg: #FAF7F2; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #D7C9BE;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #D7C9BE; --hero-btn-fg: #3E1423; --hero-btn-hover: #E3D8CF;
}
:root[data-palette="navy"][data-theme="dark"] {
  color-scheme: dark;
  --ink: #F2EFE8; --muted: #A3AEBB; --accent: #173252; --accent-deep: #050C14; --accent-lt: #132335;
  --gold: #C7A76C; --gold-lt: #2B2518; --sand: #0B1724; --sand-2: #0D1A28; --bg: #08121D; --surface: #101D2C;
  --border: #24364B; --accent-ink: #D9C292;
  --btn-bg: #C7A76C; --btn-bg-hover: #D3B781; --btn-fg: #10243A;
  --hero-bg: #0B1A2B; --page-hero-bg: #0B1A2B; --hero-fg: #F2EFE8; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #C7A76C;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #C7A76C; --hero-btn-fg: #10243A; --hero-btn-hover: #D3B781;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.6);
}
:root[data-palette="forest"][data-theme="dark"] {
  color-scheme: dark;
  --ink: #F1EEE6; --muted: #A2B2AC; --accent: #17463F; --accent-deep: #050D0B; --accent-lt: #142822;
  --gold: #C7AD7F; --gold-lt: #2B2619; --sand: #0B1814; --sand-2: #0D1B17; --bg: #08130F; --surface: #10201C;
  --border: #243A34; --accent-ink: #D9C6A0;
  --btn-bg: #C7AD7F; --btn-bg-hover: #D3BC94; --btn-fg: #123B35;
  --hero-bg: #0C2A26; --page-hero-bg: #0C2A26; --hero-fg: #F1EEE6; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #C7AD7F;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #C7AD7F; --hero-btn-fg: #123B35; --hero-btn-hover: #D3BC94;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.6);
}
:root[data-palette="charcoal"][data-theme="dark"] {
  color-scheme: dark;
  --ink: #F3F2EE; --muted: #A9ACB2; --accent: #2C3037; --accent-deep: #08090A; --accent-lt: #1E2024;
  --gold: #C28B68; --gold-lt: #2C221B; --sand: #121316; --sand-2: #15161A; --bg: #0F1012; --surface: #1A1C20;
  --border: #303339; --accent-ink: #DDAF92;
  --btn-bg: #C28B68; --btn-bg-hover: #CF9D7E; --btn-fg: #17191D;
  --hero-bg: #17191D; --page-hero-bg: #17191D; --hero-fg: #F3F2EE; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #C28B68;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #C28B68; --hero-btn-fg: #17191D; --hero-btn-hover: #CF9D7E;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.6);
}
:root[data-palette="burgundy"][data-theme="dark"] {
  color-scheme: dark;
  --ink: #F5F0EA; --muted: #B7A8AE; --accent: #5A1F33; --accent-deep: #0C0508; --accent-lt: #2A1620;
  --gold: #D7C9BE; --gold-lt: #2A2420; --sand: #180C11; --sand-2: #1B0E14; --bg: #140A0E; --surface: #211319;
  --border: #3C2530; --accent-ink: #E0D3C9;
  --btn-bg: #D7C9BE; --btn-bg-hover: #E3D8CF; --btn-fg: #3E1423;
  --hero-bg: #3E1423; --page-hero-bg: #3E1423; --hero-fg: #F5F0EA; --hero-muted: color-mix(in srgb, var(--hero-fg) 82%, transparent); --hero-accent: #D7C9BE;
  --hero-blob: color-mix(in srgb, #ffffff 8%, transparent); --page-hero-blob: color-mix(in srgb, #ffffff 8%, transparent);
  --hero-blob-2: color-mix(in srgb, var(--gold) 28%, transparent);
  --hero-btn-bg: #D7C9BE; --hero-btn-fg: #3E1423; --hero-btn-hover: #E3D8CF;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Corners option: square boxes. Circles (icons, monogram) and the organic hero shapes stay as they are. */
:root[data-corners="square"] { --radius-card: 0px; --radius-pill: 0px; }
:root[data-corners="square"] :is(.hero-card, .mini, .urgent, .success-message, .memberships .tile, .design-options,
  .enquiry-form input, .enquiry-form select, .enquiry-form textarea, .menu-toggle) { border-radius: 0; }

/* Classic font pairing: Cormorant Garamond headings, Inter body */
:root[data-font="classic"] { --font-display: "Cormorant Garamond", Georgia, serif; }
:root[data-font="classic"] h1, :root[data-font="classic"] h2, :root[data-font="classic"] h3,
:root[data-font="classic"] .stats-head, :root[data-font="classic"] .stat strong, :root[data-font="classic"] .timeline strong,
:root[data-font="classic"] .cta-visual strong, :root[data-font="classic"] .urgent a, :root[data-font="classic"] .quote p { font-weight: 600; letter-spacing: 0; }
:root[data-font="classic"] h1 { font-size: clamp(44px, 6.6vw, 88px); }
:root[data-font="classic"] h3 { font-size: 27px; }
:root[data-font="classic"] .brand strong { font-family: var(--font-body); font-size: 17px; }

/* Capitals for headings (client choice, default). data-caps="off" restores sentence case. */
:root:not([data-caps="off"]) :is(h1, h2, h3) { text-transform: uppercase; letter-spacing: 0.02em; }
:root:not([data-caps="off"]) h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.1; }
:root:not([data-caps="off"]) h2 { font-size: clamp(26px, 3.1vw, 38px); line-height: 1.18; }
:root:not([data-caps="off"]) h3 { font-size: 19px; line-height: 1.3; }

/* Design options panel (demo review tool) */
.design-panel[hidden] { display: none; }
.design-panel { position: fixed; right: 16px; bottom: 16px; z-index: 60; font-family: var(--font-body); }
.design-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-body); box-shadow: var(--shadow-card); cursor: pointer; }
.design-toggle svg { width: 18px; height: 18px; fill: var(--accent-ink); }
.design-options { position: absolute; right: 0; bottom: calc(100% + 10px); width: 290px; max-height: calc(100vh - 96px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); padding: 16px 18px; display: grid; gap: 14px; }
.design-options[hidden] { display: none; }
.design-options fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.design-options legend { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 4px; }
.design-options label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 32px; }
.design-options input { accent-color: var(--accent-ink); width: 18px; height: 18px; margin: 0; }
.design-options small { color: var(--muted); font-size: 12px; }
.swatch { display: inline-flex; flex: none; margin-left: auto; }
.swatch i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.45); margin-left: -4px; }
@media print { .design-panel { display: none; } }


/* Motion: hover states (always on) */
.card, .feature, .mini, .chips li, .stat .icon, .card .icon, .hero-card .dot, .contact-rows a, .timeline strong, .design-toggle {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.card:hover .icon { background: var(--accent); color: var(--white); transform: scale(1.06); }
:root[data-theme="dark"] .card:hover .icon { background: var(--accent-ink); color: var(--accent-deep); }
.card-accent:hover { box-shadow: var(--shadow-lift); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.mini:hover { transform: translateY(-3px); border-color: var(--accent-ink); }
.chips li:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.stat:hover .icon { transform: scale(1.1) rotate(-4deg); }
.contact-rows a:hover { color: var(--accent-ink); }
.contact-rows a:hover svg { transform: translateX(2px); }
.contact-rows svg { transition: transform .25s ease; }
.timeline li:hover strong { color: var(--accent-ink); }
.link { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; padding-bottom: 2px; transition: background-size .3s ease; }
.link:hover { text-decoration: none; background-size: 100% 1.5px; }
.nav-links a { transition: color .2s ease, border-color .2s ease; }
.footer a { transition: color .2s ease; }
.design-toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.hero-photo img, .about-photo img { transition: transform .6s ease; }
.hero-visual:hover .hero-photo img, .about-photo:hover img { transform: scale(1.02); }

/* Motion: entrance and scroll reveal (only when motion is allowed and JS is running) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes drift {
    from { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; transform: translate(0, 0); }
    to   { border-radius: 45% 55% 42% 58% / 55% 45% 58% 45%; transform: translate(2%, -2%); }
  }
  .hero .hero-grid > div:first-child > * { animation: rise .7s ease both; }
  .hero .hero-grid > div:first-child > :nth-child(2) { animation-delay: .08s; }
  .hero .hero-grid > div:first-child > :nth-child(3) { animation-delay: .16s; }
  .hero .hero-grid > div:first-child > :nth-child(4) { animation-delay: .24s; }
  .hero-visual { animation: rise .8s .2s ease both; }
  .hero-card { animation: rise .7s .6s ease both; }
  .blob { animation: drift 14s ease-in-out infinite alternate; }
  .blob-gold { animation-duration: 18s; animation-direction: alternate-reverse; }
  /* Credentials motion sequence. .stats-anim is added by main.js and removed when the sequence ends. */
  .stats-anim .stat:nth-child(2), .stats-anim .stats-rail i:nth-child(2) { --s: 1; }
  .stats-anim .stat:nth-child(3), .stats-anim .stats-rail i:nth-child(3) { --s: 2; }
  .stats-anim .stat:nth-child(4), .stats-anim .stats-rail i:nth-child(4) { --s: 3; }
  .stats-anim .stats-head span { display: inline-block; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease; transition-delay: calc(var(--w, 0) * 50ms); }
  .stats-anim:not(.play) .stats-head span { opacity: 0; transform: translateY(.45em); filter: blur(6px); }
  .stats-anim .stats-rail::after { transition: transform 1.9s cubic-bezier(.45, 0, .2, 1) .45s; }
  .stats-anim:not(.play) .stats-rail::after { transform: scaleX(0); }
  .stats-anim .stats-rail i { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease; transition-delay: calc(.6s + var(--s, 0) * .42s); }
  .stats-anim:not(.play) .stats-rail i { transform: scale(0); opacity: 0; }
  .stats-anim .stat { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.6s + var(--s, 0) * .42s); }
  .stats-anim:not(.play) .stat { opacity: 0; transform: translateY(18px); }
  .stats-anim .stat .icon { transition: transform .7s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(.7s + var(--s, 0) * .42s); }
  .stats-anim:not(.play) .stat .icon { transform: scale(.5) rotate(-20deg); }
  .stats-anim.play .stat .icon { animation: stat-ring 1.1s ease-out calc(.9s + var(--s, 0) * .42s) 1; }
  @keyframes stat-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-ink) 35%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
  /* Sequenced sections ([data-seq]): main.js adds .seq-anim, then .play when the block scrolls into view, and removes both afterwards. */
  .seq-anim :is(.cap-step, .cap-card):nth-child(2) { --n: 1; }
  .seq-anim :is(.cap-step, .cap-card):nth-child(3) { --n: 2; }
  .seq-anim :is(.cap-step, .cap-card):nth-child(4) { --n: 3; }
  .seq-anim .cap-step:nth-child(5) { --n: 4; }
  .seq-anim .cap-step:nth-child(6) { --n: 5; }
  .seq-anim.cap-panel-head > *, .seq-anim .cap-track-label { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .seq-anim.cap-panel-head > :nth-child(2) { transition-delay: .1s; }
  .seq-anim.cap-panel-head > :nth-child(3) { transition-delay: .2s; }
  .seq-anim.cap-panel-head:not(.play) > *, .seq-anim:not(.play) .cap-track-label { opacity: 0; transform: translateY(14px); }
  .seq-anim .cap-track::after { transition: transform 1.9s cubic-bezier(.45, 0, .2, 1) .25s; }
  .seq-anim:not(.play) .cap-track::after { transform: scale(0); }
  .seq-anim .cap-step { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.4s + var(--n, 0) * .32s); }
  .seq-anim:not(.play) .cap-step { opacity: 0; transform: translateY(10px); }
  .seq-anim .cap-step .node { transition: transform .55s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.35s + var(--n, 0) * .32s); }
  .seq-anim:not(.play) .cap-step .node { transform: scale(0); }
  .seq-anim.play .cap-end .node { animation: cap-arrive 1.2s ease-out 2.3s 2; }
  @keyframes cap-arrive { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }
  .seq-anim .cap-card { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--n, 0) * .14s); }
  .seq-anim:not(.play) .cap-card { opacity: 0; transform: translateY(22px); }
  .seq-anim .cap-card .icon { transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(.3s + var(--n, 0) * .14s); }
  .seq-anim:not(.play) .cap-card .icon { transform: scale(.4) rotate(-20deg); }
  .seq-anim.cap-cta { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .seq-anim.cap-cta:not(.play) { opacity: 0; transform: translateY(18px); }
  html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; transition-delay: calc(var(--i, 0) * 70ms); }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .reveal.in.card, html.js .reveal.in.feature, html.js .reveal.in.mini { transition-property: opacity, transform, box-shadow, background-color, color, border-color; transition-duration: .65s, .65s, .25s, .25s, .25s, .25s; transition-delay: 0s; }
}

/* Responsive */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .stats-rail i { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px var(--gutter) 24px; z-index: 45; box-shadow: var(--shadow-card); }
  .mobile-menu.open { display: grid; gap: 4px; }
  .mobile-menu a:not(.btn) { display: block; padding: 14px 4px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 18px; border-bottom: 1px solid var(--border); }
  .mobile-menu .btn { margin-top: 16px; width: 100%; }
  .hero-grid, .page-hero .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin: 0 auto; max-width: 420px; width: 100%; }
  .about-grid, .cta-grid, .contact-grid, .profile-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 360px; }
  .cta-visual { justify-self: start; width: min(100%, 260px); }
  .glance { position: static; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid-3, .grid-2, .grid-4, .stats { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .card { padding: 24px; }
  .feature { padding: 28px 24px 32px; }
  .brand small { display: none; }
  .hero-card { max-width: 240px; padding: 12px 16px; }
  .badge-text img { height: 56px; }
  :root[data-badge="logo"] .hero-card { padding: 24px; }
  .badge-logo img { height: 48px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }