/* Takwid Estates components, v2: minimal copy, big photographs, white space,
   square corners, house-shaped blocks at the logo's pitch, marigold for the critical actions. */

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--surface); color: var(--text); font: 400 var(--text-md) / 1.6 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); margin: 0 0 var(--space-s); line-height: 1.08; letter-spacing: var(--tracking-tight); text-wrap: balance; }
h1 { font-size: var(--h1); font-weight: 700; line-height: 1.02; }
h2 { font-size: var(--h2); font-weight: 700; }
h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-s); text-wrap: pretty; }
strong { font-weight: 600; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-s); top: -4rem; z-index: 100; padding: var(--space-2xs) var(--space-s); background: var(--forest-800); color: var(--white); font-weight: 600; }
.skip-link:focus { top: var(--space-s); }

/* ---- Layout -------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; overflow-x: clip; }
.section--linen { background: var(--linen); }
.section--tight { padding-block: calc(var(--space-section) * 0.55); }
.on-dark { background: var(--surface); color: var(--text); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.lead { font-size: var(--text-lg); color: var(--text-muted); max-width: 34rem; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.split { display: grid; gap: clamp(2.5rem, 1.5rem + 5vw, 6rem); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
  .split--form { grid-template-columns: 0.8fr 1.2fr; }
  .split--reverse > :first-child { order: 2; }
}

/* Eyebrow: the logo's stripe pair + tracked caps */
.eyebrow { display: inline-flex; align-items: center; gap: 0.65em; font: 600 var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--eyebrow); margin: 0 0 var(--space-m); }
.eyebrow::before { content: ""; width: 0.97em; height: 1.35em; flex: none; background: var(--leaf); -webkit-mask: url("/assets/brand/stripe-pair-full.svg") center / contain no-repeat; mask: url("/assets/brand/stripe-pair-full.svg") center / contain no-repeat; }

/* ---- Buttons (square) ---------------------------------------------------- */
.btn {
  --btn-bg: var(--forest-800); --btn-fg: var(--white); --btn-border: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.1rem; padding: 0.75rem 1.5rem; border: 2px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 var(--text-sm) / 1.2 var(--font-display); letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.btn:hover { --btn-bg: var(--forest-700); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; transform: none; }
.btn--cta { --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg); }
.btn--cta:hover { --btn-bg: var(--cta-bg-hover); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--forest-800); --btn-border: var(--forest-800); }
.btn--outline:hover { --btn-bg: var(--forest-800); --btn-fg: var(--white); }
.on-dark .btn--outline { --btn-fg: var(--white); --btn-border: rgb(255 255 255 / 0.6); }
.on-dark .btn--outline:hover { --btn-bg: var(--white); --btn-fg: var(--forest-800); }
.btn--lg { min-height: 3.5rem; padding-inline: 1.9rem; font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn .arrow { transition: transform var(--dur-1) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.link-arrow { font: 600 var(--text-sm) var(--font-display); color: var(--forest-800); text-decoration: none; border-bottom: 2px solid var(--leaf-600); padding-bottom: 2px; }
.link-arrow::after { content: " →"; }
.on-dark .link-arrow { color: var(--white); border-color: var(--leaf-400); }

/* ---- Header (white) ------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / 0.97); border-bottom: 1px solid var(--stone-200); }
.site-header .container { display: flex; align-items: center; gap: var(--space-m); min-height: 4.75rem; }
.brand-lockup { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; margin-right: auto; }
.brand-lockup .logo { height: 2.25rem; width: auto; }
.brokerage-tag { display: none; padding-left: 0.9rem; border-left: 1px solid var(--stone-300); font: 600 0.68rem/1.25 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); }
.brokerage-tag b { display: block; color: var(--forest-800); font-size: 0.78rem; letter-spacing: 0.06em; }
.site-nav { display: none; gap: var(--space-l); }
.site-nav a { color: var(--forest-800); text-decoration: none; font: 500 var(--text-sm) var(--font-display); padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-color: var(--leaf-600); }
.site-header .btn { min-height: 2.7rem; padding: 0.5rem 1.1rem; }
@media (min-width: 640px) { .brokerage-tag { display: block; } }
.site-header .btn { white-space: nowrap; }
.nav-toggle { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1.5px solid var(--stone-300); background: var(--white); color: var(--forest-800); cursor: pointer; }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle svg path { transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1); transform-origin: 12px 12px; }
.nav-toggle[aria-expanded="true"] .bar1 { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar2 { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar3 { transform: translateY(-5px) rotate(-45deg); }
.nav-phone { display: none; }
@media (max-width: 1199px) {
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: var(--space-2xs) var(--gutter) var(--space-m); background: var(--white); border-bottom: 1px solid var(--stone-200); box-shadow: var(--shadow-2); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--stone-200); font-size: var(--text-md); }
  .nav-phone { display: block; }
}
@media (min-width: 1200px) { .site-nav { display: flex; } .nav-toggle { display: none; } }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) clamp(4.5rem, 2rem + 7vw, 9rem); overflow-x: clip; }
.hero h1 { max-width: 11ch; }
.hero .lead { margin-top: var(--space-m); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-l); }
.hero-guide { margin: var(--space-xl) 0 0; }
.trust { margin-top: var(--space-xl); display: flex; align-items: center; gap: 0.75rem; font-size: var(--text-sm); color: var(--text-muted); }
.trust strong { color: var(--forest-800); font-family: var(--font-display); }
.trust::before { content: ""; width: 2.25rem; height: 2px; background: var(--leaf-600); }
.trust-role { white-space: nowrap; }
.text-terms { margin-top: var(--space-l); font-weight: 500; }
.text-sender { margin-top: var(--space-xs); max-width: 34rem; }
/* On wide screens the open chat window sits where the photo is, so the photo steps aside. */
@media (min-width: 960px) { .page-text.chat-open .video-card { visibility: hidden; } }
/* IkniteOS chat widget: brand colours and type through the variables it exposes (page styles win over its defaults). */
chat-widget {
  --chat-widget-primary-color: var(--forest-800); --chat-widget-active-color: var(--forest-800);
  --chat-widget-bubble-color: var(--forest-800); --chat-widget-button-color: var(--forest-800);
  --chat-widget-header-color: var(--forest-800); --chat-widget-header-darken-color: var(--forest-900);
  --chat-widget-sender-message-color: var(--forest-800); --ion-color-primary: var(--forest-800); --color: var(--forest-800);
  --chat-widget-font-family: var(--font-text); --ion-font-family: var(--font-text);
}
@media (max-width: 479px) { .trust-role { display: block; } .trust-sep { display: none; } }

/* ---- Angular photo frames: a house-shaped block behind (logo pitch), stripes on top */
.frame { position: relative; margin: 0; container-type: inline-size; isolation: isolate; --block: var(--forest-800); --stripes: var(--leaf); --w: 64cqw; --rise: calc(var(--w) * var(--pitch)); }
.frame img { width: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; }
.frame::before { content: ""; position: absolute; z-index: -1; left: -7cqw; bottom: -7cqw; width: var(--w); height: calc(var(--rise) + 36cqw); background: var(--block); clip-path: polygon(0 var(--rise), 100% 0, 100% 100%, 0 100%); }
.frame::after { content: ""; position: absolute; z-index: 1; top: -6cqw; right: 8cqw; width: 9cqw; aspect-ratio: 108 / 150.486; background: var(--stripes); -webkit-mask: url("/assets/brand/stripe-pair-full.svg") center / contain no-repeat; mask: url("/assets/brand/stripe-pair-full.svg") center / contain no-repeat; }
.frame--right::before { left: auto; right: -7cqw; clip-path: polygon(0 0, 100% var(--rise), 100% 100%, 0 100%); }
.frame--right::after { right: auto; left: 8cqw; }
.frame--leaf { --block: var(--accent-leaf); }
.frame--marigold { --block: var(--accent-marigold); }
.frame--linen { --block: var(--linen); }
.frame--tall { --ratio: 4 / 5; }
.frame--wide { --ratio: 16 / 10; }
.frame--no-stripes::after { display: none; }

/* ---- Photo tiles: low, asymmetric house shapes in overlay blend; they rise on hover.
   The shape is two layers (brand green in overlay blend + a scrim for the text) so the
   photo shows through; the copy sits above both and moves with them. */
.tiles { display: grid; gap: var(--space-m); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; display: block; overflow: hidden; isolation: isolate; color: var(--white); text-decoration: none; background: var(--forest-800); container-type: inline-size; }
.tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
.tile-label {
  --run: 23cqw; --roof: calc(var(--run) * var(--pitch)); --title: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  --peek: calc(var(--title) + 1rem - var(--roof) * 0.2);
  --house: polygon(0 var(--roof), var(--run) 0, 100% 0, 100% 100%, 0 100%);
  position: absolute; left: 0; bottom: 0; width: 82cqw;
}
.tile-label::before, .tile-label::after { content: ""; position: absolute; inset: 0; clip-path: var(--house); }
.tile-label::before { background: var(--label, var(--forest-800)); mix-blend-mode: overlay; }
.tile-label::after { background: linear-gradient(to top, rgb(5 36 31 / 0.66), rgb(5 36 31 / 0.46)); }
.tile-copy { position: relative; z-index: 1; display: block; padding: calc(var(--roof) * 0.8) 1.4rem 1rem; }
.tile-label::before, .tile-label::after, .tile-copy { transform: translateY(calc(100% - var(--roof) - var(--peek))); transition: transform 0.55s var(--ease-out); }
.tile-copy b { display: block; font: 700 var(--title) / 1 var(--font-display); letter-spacing: -0.02em; text-shadow: 0 1px 14px rgb(5 36 31 / 0.35); }
.tile-copy span { display: block; margin-top: 0.6rem; font-size: var(--text-sm); color: var(--white); opacity: 0; transition: opacity 0.4s 0.1s; }
.tile-copy em { display: inline-flex; margin-top: 0.8rem; padding: 0.5rem 0.9rem; background: var(--cta-bg); color: var(--cta-fg); font: 600 var(--text-xs) var(--font-display); font-style: normal; opacity: 0; transition: opacity 0.4s 0.15s; }
.tile:hover .tile-label::before, .tile:hover .tile-label::after, .tile:hover .tile-copy,
.tile:focus-visible .tile-label::before, .tile:focus-visible .tile-label::after, .tile:focus-visible .tile-copy { transform: translateY(0); }
.tile:hover .tile-copy > :not(b), .tile:focus-visible .tile-copy > :not(b) { opacity: 1; }
.tile--mirror .tile-label { left: auto; right: 0; text-align: right; --house: polygon(0 0, calc(100% - var(--run)) 0, 100% var(--roof), 100% 100%, 0 100%); }
.tile:nth-child(2) { --label: var(--forest-600); }
.tile:nth-child(3) { --label: var(--forest-900); }
/* Touch screens: no hover, so keep the low shape and show an arrow instead of the extra copy. */
@media (hover: none) {
  .tile-copy > :not(b) { display: none; }
  .tile-copy b::after { content: "\2192" / ""; margin-left: 0.4em; font-size: 0.7em; vertical-align: 0.1em; }
}

/* ---- Steps with illustrations ------------------------------------------- */
.steps { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); list-style: none; padding: 0; margin: 0; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .steps--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps--four { grid-template-columns: repeat(4, 1fr); } }
.steps li { text-align: center; }
.steps .illo { width: 9.5rem; margin: 0 auto var(--space-m); }
.steps h3 { font-size: var(--h4); margin-bottom: 0.35rem; }
.steps h3::before { counter-increment: step; content: counter(step, decimal-leading-zero) "  "; color: var(--leaf-700); white-space: pre; }
.steps p { color: var(--text-muted); margin: 0 auto; max-width: 18rem; font-size: var(--text-sm); }
.illo { width: 7.5rem; height: auto; --illo-line: var(--forest-800); }
.illo .ln { fill: none; stroke: var(--illo-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illo .fill-line { fill: var(--illo-line); }
.illo .field { fill: var(--field, var(--accent-leaf)); }
.field--leaf { --field: var(--accent-leaf); }
.field--marigold { --field: var(--accent-marigold); }
.field--orchid { --field: var(--accent-orchid); }

/* ---- Lead form (square card) --------------------------------------------- */
.form-card { background: var(--white); color: var(--ink); border: 1px solid var(--stone-200); border-top: 4px solid var(--forest-800); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); --text: var(--ink); --text-muted: var(--ink-muted); --heading: var(--forest-800); --link: var(--forest-700); --focus: var(--forest-800); }
.form-card h2 { font-size: var(--h3); margin-bottom: var(--space-l); }
.steps-indicator { display: flex; gap: var(--space-2xs); list-style: none; padding: 0; margin: 0 0 var(--space-l); font: 600 0.7rem/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); }
.steps-indicator li { flex: 1; padding-top: 0.55rem; border-top: 3px solid var(--stone-200); }
.steps-indicator li[aria-current="step"] { color: var(--forest-800); border-color: var(--accent-marigold); }
.steps-indicator li.done { color: var(--leaf-700); border-color: var(--leaf-600); }
.field { display: grid; align-content: start; gap: 0.45rem; margin-bottom: 1.25rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-row .field { margin-bottom: 0; }
.field-row + .field, .field-row + .field-row { margin-top: 1.25rem; }
label, .label { font: 600 var(--text-sm) / 1.3 var(--font-display); color: var(--forest-800); }
.optional { font-weight: 400; color: var(--ink-subtle); font-family: var(--font-text); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; min-height: 3.1rem; padding: 0.7rem 0.9rem; border: 1.5px solid var(--stone-300); border-radius: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.3 var(--font-text); transition: border-color var(--dur-1), box-shadow var(--dur-1); }
select { appearance: none; padding-right: 2.6rem; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c3c34' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.95rem center / 0.75rem; cursor: pointer; }
input:hover, select:hover, textarea:hover { border-color: var(--forest-500); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--forest-800); box-shadow: 0 0 0 3px rgb(7 58 50 / 0.18); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { color: var(--danger); font-size: var(--text-xs); font-weight: 500; margin: 0; }
.field-error:empty { display: none; }
.chips { border: 0; padding: 0; margin: 0 0 1.75rem; }
.chips legend { margin-bottom: 0.7rem; padding: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.45rem 1rem; border: 1.5px solid var(--stone-300); background: var(--white); font: 500 var(--text-sm)/1.1 var(--font-display); color: var(--forest-800); transition: all var(--dur-1); }
.chip input:hover + span { border-color: var(--forest-500); }
.chip input:checked + span { background: var(--forest-800); border-color: var(--forest-800); color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--forest-800); outline-offset: 2px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; margin: var(--space-m) 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-muted); }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; accent-color: var(--forest-800); border-radius: 0; }
.check strong { display: block; color: var(--forest-800); font: 600 var(--text-sm) var(--font-display); margin-bottom: 0.15rem; }
.form-note { font-size: var(--text-xs); color: var(--ink-subtle); margin: var(--space-s) 0 0; }
.form-alert { padding: 0.75rem 0.9rem; font-size: var(--text-sm); margin-bottom: var(--space-s); }
.form-alert[data-kind="error"] { background: var(--danger-bg); color: var(--danger); }
.form-alert:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.step-panel[hidden] { display: none; }
.success-head { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: var(--space-m); }
.success-head .tick { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; background: var(--success-bg); color: var(--success); font-weight: 700; }
.success-head h2 { margin-bottom: 0.3rem; }
.embed-shell { display: grid; min-height: 420px; border: 1px solid var(--stone-200); background: var(--white); }
.embed-shell > * { grid-area: 1 / 1; }
.embed-loading { align-self: center; justify-self: center; margin: 0; color: var(--ink-subtle); font: 500 var(--text-sm) var(--font-display); }
.embed-frame { position: relative; z-index: 1; width: 100%; min-height: 640px; border: 0; background: var(--white); }
.next-step { display: flex; gap: var(--space-s); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-m); padding: var(--space-s) var(--space-m); background: var(--linen); }
.next-step p { margin: 0; font-size: var(--text-sm); color: var(--forest-800); }

/* ---- Dark band with signage graphics ------------------------------------- */
.band { position: relative; overflow: hidden; background: var(--forest-800); }
.band .supergraphic { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.band .container { position: relative; }
.band h2 { color: var(--white); }
.band .lead { color: var(--text-muted); }

/* ---- About ------------------------------------------------------------- */
.portrait { position: relative; margin: 0; overflow: hidden; background: var(--forest-800); aspect-ratio: 4 / 5; display: grid; place-items: center; }
.portrait .supergraphic { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait .mark { position: relative; width: 44%; --logo-house: var(--white); --logo-stripes: var(--leaf-400); }
.portrait figcaption { position: absolute; left: 0; bottom: 0; padding: 1rem 1.25rem; background: var(--white); color: var(--forest-800); font: 600 var(--text-sm)/1.3 var(--font-display); }
.portrait figcaption span { display: block; font: 400 var(--text-xs)/1.4 var(--font-text); color: var(--ink-subtle); }
.area-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: var(--space-l) 0 0; }
.area-list li > * { display: inline-flex; padding: 0.4rem 0.8rem; border: 1.5px solid var(--stone-300); font: 500 var(--text-xs) var(--font-display); color: var(--forest-800); text-decoration: none; }
.area-list a { border-color: var(--leaf-600); background: var(--forest-100); }
.area-list a:hover { background: var(--forest-800); color: var(--white); }

/* ---- Facts grid (city pages) ------------------------------------------- */
.facts { display: grid; gap: 1px; list-style: none; padding: 0; margin: 0; background: var(--stone-200); border: 1px solid var(--stone-200); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li { background: var(--white); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.facts h3 { font-size: var(--h4); margin-bottom: 0.4rem; }
.facts p { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: 0.75rem; }
.source { font: 600 var(--text-xs) var(--font-display); color: var(--leaf-700); }
.checklist { list-style: none; padding: 0; margin: var(--space-l) 0 0; display: grid; gap: 0.7rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: baseline; font-size: var(--text-md); }
.checklist li::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; background: var(--accent-marigold); transform: translateY(0.05rem); }

/* ---- Legal pages --------------------------------------------------------- */
.page-head { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 2vw, 3rem); border-bottom: 1px solid var(--stone-200); }
.page-head h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--h4); margin-top: var(--space-xl); }
.prose li { margin-bottom: 0.4rem; }
.optin-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); margin: var(--space-s) 0 var(--space-2xs); align-items: start; }
.optin-shots figure { margin: 0; }
.optin-shots .optin-wide { grid-column: 1 / -1; }
.optin-shots img { width: 100%; height: auto; border: 1px solid var(--stone-200); background: #fff; }
.optin-shots figcaption { margin-top: 0.4rem; font-size: var(--text-xs); color: var(--text-muted); }
.callout { border-left: 4px solid var(--accent-marigold); background: var(--linen); padding: var(--space-s) var(--space-m); color: var(--forest-800); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--forest-900); padding-block: var(--space-2xl) var(--space-l); font-size: var(--text-sm); --surface: var(--forest-900); }
.footer-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .logo { height: 2.5rem; width: auto; margin-bottom: var(--space-m); }
.site-footer h2 { font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--leaf-300); margin-bottom: var(--space-s); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--white); }
.social { display: flex; gap: 0.5rem; }
.social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(255 255 255 / 0.25); color: var(--white); }
.social a:hover { background: rgb(255 255 255 / 0.1); }
.social svg { width: 1.1rem; height: 1.1rem; }
.disclosure { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid rgb(255 255 255 / 0.12); display: grid; gap: var(--space-m); align-items: start; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.6; }
@media (min-width: 760px) { .disclosure { grid-template-columns: auto 1fr; } }
.disclosure p { margin-bottom: 0.4rem; }
.disclosure .brokerage { font: 700 1rem/1.3 var(--font-display); color: var(--white); }
.eho { display: flex; align-items: center; gap: 0.6rem; color: var(--white); font: 600 var(--text-xs)/1.2 var(--font-display); }
.eho svg { width: 2.2rem; height: 2.2rem; }
.legal-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: space-between; margin-top: var(--space-l); color: var(--text-muted); font-size: var(--text-xs); }
@media (min-width: 760px) { .legal-credit { margin-left: auto; } }

/* ---- Consent banner (only when analytics is configured) ----------------- */
.consent { position: fixed; z-index: 60; left: var(--space-s); right: var(--space-s); bottom: var(--space-s); max-width: 34rem; padding: var(--space-m); background: var(--white); color: var(--ink); box-shadow: var(--shadow-2); border: 1px solid var(--stone-200); border-top: 4px solid var(--forest-800); font-size: var(--text-sm); }
.consent .actions { margin-top: var(--space-s); }

/* ---- Staging ribbon ------------------------------------------------------ */
.env-ribbon { background: var(--accent-marigold); color: var(--forest-900); text-align: center; font: 600 var(--text-xs)/1.3 var(--font-display); padding: 0.4rem var(--gutter); }

/* ---- Brand guide page ---------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: var(--stone-200); border: 1px solid var(--stone-200); }
.swatch { background: var(--white); font-size: var(--text-xs); }
.swatch i { display: block; height: 5.5rem; }
.swatch div { padding: 0.65rem 0.8rem; }
.swatch b { display: block; font: 600 var(--text-sm) var(--font-display); color: var(--forest-800); }
.logo-tiles { display: grid; gap: 1px; background: var(--stone-200); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); border: 1px solid var(--stone-200); }
.logo-tile { padding: var(--space-xl); display: grid; place-items: center; min-height: 12rem; }
.logo-tile img { max-height: 5rem; width: auto; }
.illo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-l); text-align: center; }
.illo-grid .illo { width: 8.5rem; margin: 0 auto 0.5rem; }
.label-green { font: 700 var(--text-sm) / 1.25 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--leaf-700); }

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

.hide-mobile { display: none; }
@media (min-width: 960px) { .hide-mobile { display: block; } }

/* ---- Frames and illustrations: the vector overlays move on hover ------- */
.frame::before, .frame::after { transition: transform 0.7s var(--ease-out); }
.frame:hover::before { transform: translate(-2cqw, 2cqw); }
.frame:hover::after { transform: translate(2cqw, -1.15cqw); }
.illo .field { transition: transform 0.6s var(--ease-out); transform-box: fill-box; }
li:hover > .illo .field, .illo:hover .field { transform: translate(4%, -3%); }

/* ---- Blueprint background (all pages): grey plans on dotted white ------ */
.blueprint { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; color: #6c7a74; background-color: var(--white); background-image: radial-gradient(rgb(19 36 30 / 0.13) 1px, transparent 1.3px); background-size: 22px 22px; }
.blueprint .bp { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); }
.blueprint .ln { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.blueprint .dash { stroke-dasharray: 5 7; }
.blueprint .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bp-draw 4s var(--ease-out) 0.3s forwards; }
.bp--faint { opacity: 0.1; animation: bp-drift 80s ease-in-out infinite alternate; }
.bp--reveal { opacity: 0.75; color: #4c5c55; animation: bp-drift 80s ease-in-out infinite alternate;
  -webkit-mask-image: radial-gradient(circle 280px at calc(var(--mx, -900px) + 40px) calc(var(--my, -900px) + 40px), #000 0, rgb(0 0 0 / 0.35) 45%, transparent 75%);
  mask-image: radial-gradient(circle 280px at calc(var(--mx, -900px) + 40px) calc(var(--my, -900px) + 40px), #000 0, rgb(0 0 0 / 0.35) 45%, transparent 75%); }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-34px, -20px, 0); } }

/* ---- Home hero composite (house-cut photo, stripes, agent card) -------- */
.hero-visual { position: relative; container-type: inline-size; margin: 0 0 7rem; }
.hero-visual::before { content: ""; position: absolute; z-index: 0; left: -5cqw; bottom: -6cqw; width: 58cqw; height: calc(58cqw * var(--pitch) + 34cqw); background: var(--forest-800); clip-path: polygon(0 calc(58cqw * var(--pitch)), 100% 0, 100% 100%, 0 100%); transition: transform 0.8s var(--ease-out); }
.house-photo { position: relative; z-index: 1; margin: 0 0 0 4cqw; width: 92cqw; aspect-ratio: 92 / 100; overflow: hidden; clip-path: polygon(0 calc(54cqw * var(--pitch)), 54cqw 0, 100% 0, 100% 100%, 0 100%); background: var(--forest-100); }
.house-photo img, .house-photo video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.hero-stripes { position: absolute; z-index: 2; top: -9cqw; right: 6cqw; width: 26cqw; aspect-ratio: 108 / 150.486; background: var(--leaf-600); -webkit-mask: url("/assets/brand/stripe-pair-full.svg") center / contain no-repeat; mask: url("/assets/brand/stripe-pair-full.svg") center / contain no-repeat; transition: transform 0.8s var(--ease-out); }
.agent-card { position: absolute; z-index: 3; right: -3cqw; bottom: 14cqw; width: 40cqw; margin: 0; transition: transform 0.7s var(--ease-out); }
.agent-card img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow-2); }
.agent-tag { position: absolute; left: 14%; top: calc(100% - 1.1rem); white-space: nowrap; padding: 0.75rem 1.25rem; background: var(--cta-bg); color: var(--forest-900); font: 700 clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem)/1.1 var(--font-display); letter-spacing: -0.01em; transition: transform 0.7s var(--ease-out); }
.agent-tag small { display: block; margin-top: 0.25rem; font: 500 0.72rem/1.2 var(--font-text); letter-spacing: 0; color: var(--forest-800); }
.hero-visual:hover::before { transform: translate(-2cqw, 2cqw); }
.hero-visual:hover .house-photo img, .hero-visual:hover .house-photo video { transform: scale(1.05); }
.hero-visual:hover .hero-stripes { transform: translate(2.6cqw, -1.5cqw); }
.hero-visual:hover .agent-card { transform: translateY(-1.2cqw); }
.hero-visual:hover .agent-tag { transform: translateX(1.6cqw); }
@media (max-width: 959px) {
  .hero-visual { margin: var(--space-l) 0 3.5rem; }
  /* Keep the headshot and name tag inside the screen: the tag grows leftwards over the photo. */
  .agent-card { right: 0; width: 44cqw; }
  .agent-tag { left: auto; right: 0; }
  .video-card::before { right: -3cqw; }
  .video-card .agent-tag { right: 0; }
}

/* ---- Video: Meet Desmond card + guide montage -------------------------- */
.video-card { position: relative; margin: 0; container-type: inline-size; }
.video-card .media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--forest-800); }
.video-card .media img, .video-card .media video { width: 100%; height: 100%; object-fit: cover; }
.video-card::before { content: ""; position: absolute; z-index: -1; right: -6cqw; bottom: -6cqw; width: 64cqw; height: calc(64cqw * var(--pitch) + 40cqw); background: var(--leaf-600); clip-path: polygon(0 0, 100% calc(64cqw * var(--pitch)), 100% 100%, 0 100%); transition: transform 0.7s var(--ease-out); }
.video-card:hover::before { transform: translate(2cqw, 2cqw); }
.video-card .agent-tag { top: auto; bottom: -1.4rem; left: auto; right: -4cqw; }
.play-btn { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(transparent 55%, rgb(5 36 31 / 0.45)); cursor: pointer; }
.play-btn span { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; background: var(--cta-bg); color: var(--forest-900); transition: transform 0.3s var(--ease-out); }
.play-btn:hover span { transform: scale(1.08); }
.soon { position: absolute; left: 1rem; top: 1rem; padding: 0.35rem 0.7rem; background: var(--white); color: var(--forest-800); font: 600 var(--text-xs) var(--font-display); }
.video-toggle { position: absolute; z-index: 4; left: 8cqw; bottom: 3cqw; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border: 0; background: rgb(5 36 31 / 0.75); color: var(--white); font: 600 var(--text-xs) var(--font-display); cursor: pointer; }
.video-credit { position: absolute; z-index: 4; right: 3cqw; bottom: 3cqw; color: rgb(255 255 255 / 0.8); font-size: 0.68rem; }

/* ---- Header phone + one-line SMS consent ------------------------------- */
.header-phone { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--forest-800); font: 600 var(--text-sm) var(--font-display); text-decoration: none; }
.header-phone svg { width: 1.1rem; height: 1.1rem; }
.header-phone span { display: none; }
@media (min-width: 760px) { .header-phone span { display: inline; } }
.check--compact { grid-template-columns: auto 1fr; margin: var(--space-m) 0; }
.check--compact strong { font-size: var(--text-sm); margin: 0; }
.check--compact small { display: block; margin-top: 0.15rem; font-size: 0.72rem; line-height: 1.4; color: var(--ink-subtle); }
.check--compact small a { color: inherit; }
.hero-visual--video { margin-bottom: 3rem; }
.hero-visual--video .house-photo { aspect-ratio: 92 / 88; }
/* On the video the stripes sit up and out of the frame, clear of faces. */
.hero-visual--video .hero-stripes { width: 16cqw; top: -15cqw; right: -5cqw; }

/* ---- Touch targets: at least 24px (WCAG 2.5.8) without changing the look */
.header-phone { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
.link-arrow, a.source, .source a { position: relative; }
.link-arrow::before, a.source::before, .source a::before { content: ""; position: absolute; inset: -0.6rem -0.25rem; }
.check--compact small { text-wrap: balance; }

/* ---- Campaign banners (form headers, brand page) ------------------------- */
.form-banner { margin: 0 0 var(--space-m); }
.form-banner img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.banner-grid { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.banner-grid--tall { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.banner-item { margin: 0; }
.banner-item img { width: 100%; height: auto; border: 1px solid var(--stone-200); }
.banner-item figcaption { margin-top: 0.5rem; font: 500 var(--text-xs) var(--font-display); color: var(--ink-muted); }

/* ---- Affordability calculator ------------------------------------------- */
.calc { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 960px) { .calc { grid-template-columns: 1.1fr 0.9fr; } }
.hint { margin: 0; font-size: var(--text-xs); color: var(--ink-subtle); }
.money, .percent { position: relative; display: block; }
.money input { padding-left: 1.75rem; }
.percent input { padding-right: 2rem; }
.money::before, .percent::after { position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-subtle); font-weight: 500; pointer-events: none; }
.money::before { content: "$"; left: 0.9rem; }
.percent::after { content: "%"; right: 0.9rem; }
.calc-years { margin: 0; }
.calc-more { margin-top: var(--space-xs); padding-top: var(--space-s); border-top: 1px solid var(--stone-200); }
.calc-more summary { cursor: pointer; font: 600 var(--text-sm) var(--font-display); color: var(--forest-800); }
.calc-more[open] summary { margin-bottom: var(--space-m); }
.calc-result { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 960px) { .calc-result { position: sticky; top: 6.5rem; } }
.calc-prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.calc-prices p { margin: 0; }
.calc-prices span { display: block; font: 600 var(--text-xs) var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--leaf-300); }
.calc-prices b { display: block; margin-top: 0.35rem; font: 700 clamp(1.8rem, 1.2rem + 2vw, 2.6rem) / 1 var(--font-display); letter-spacing: -0.02em; color: var(--white); }
.calc-prices p + p b { color: var(--text-muted); }
.calc-status { margin: var(--space-m) 0; font-weight: 500; }
.calc-bar { display: flex; gap: 2px; height: 0.75rem; margin-bottom: var(--space-s); }
.calc-bar .seg { flex-basis: 0; }
.seg--pi { background: var(--white); }
.seg--tax { background: var(--leaf-400); }
.seg--ins { background: var(--leaf-300); }
.seg--pmi { background: var(--forest-200); }
.seg--hoa { background: var(--stone-300); }
.calc-breakdown { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin: 0 0 var(--space-s); font-size: var(--text-sm); }
.calc-breakdown dt { display: flex; align-items: center; gap: 0.55rem; color: var(--text-muted); }
.calc-breakdown dt i { display: inline-block; width: 0.7rem; height: 0.7rem; }
.calc-breakdown dd { margin: 0; text-align: right; font-weight: 600; }
.calc-breakdown .total { padding-top: 0.55rem; border-top: 1px solid rgb(255 255 255 / 0.2); color: var(--white); font-weight: 700; }
.calc-note { font-size: var(--text-xs); color: var(--text-muted); }
.calc-legal { max-width: 62rem; margin-top: var(--space-m); }

/* Phones: logo, "Book a call" and the menu button; the phone number moves into the menu. */
@media (max-width: 639px) {
  .site-header .header-phone { display: none; }
  .site-header .container { gap: var(--space-xs); }
  .brand-lockup { flex: none; }
}
@media (max-width: 359px) {
  .brand-lockup .logo { height: 1.8rem; }
  .site-header .btn { padding-inline: 0.8rem; }
}
.swatches--brand { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.swatches--brand .swatch i { height: 8rem; }
.colorways { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: var(--space-m); }
.colorways > div { display: grid; place-items: center; aspect-ratio: 4 / 5; border: 1px solid var(--stone-200); }
.colorways .mark { width: 56%; height: auto; }

/* ---- Brand guide: IkniteOS forms and surveys ---------------------------- */
.form-compare { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
@media (min-width: 760px) { .form-compare { grid-template-columns: 1fr 1fr; } }
.form-compare figure { margin: 0; padding: var(--space-m); background: var(--linen); }
.form-compare img { width: 100%; height: auto; background: var(--white); }
.form-compare figcaption { margin-top: 0.6rem; font: 600 var(--text-sm) var(--font-display); color: var(--forest-800); }
.spec { display: grid; gap: 1px; margin: var(--space-l) 0 0; background: var(--stone-200); border: 1px solid var(--stone-200); }
@media (min-width: 760px) { .spec { grid-template-columns: 1fr 1fr; } }
.spec > div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-s); padding: 0.85rem 1rem; background: var(--white); }
.spec dt { font: 600 var(--text-sm) var(--font-display); color: var(--forest-800); }
.spec dd { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
.apply-steps { margin: var(--space-s) 0 var(--space-m); padding-left: 1.3rem; }
.apply-steps li { margin-bottom: 0.4rem; }
.code-block { margin-top: var(--space-s); border: 1px solid var(--stone-200); background: var(--white); }
.code-block summary { cursor: pointer; padding: 0.85rem 1rem; font: 600 var(--text-sm) var(--font-display); color: var(--forest-800); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: 0.6rem 1rem; border-bottom: 1px solid var(--stone-200); font: 600 var(--text-xs) var(--font-display); color: var(--ink-muted); }
.code-block pre { margin: 0; padding: 1rem; max-height: 22rem; overflow: auto; background: var(--forest-900); color: #e4f1ef; font: 400 0.8rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.btn--sm { min-height: 2.25rem; padding: 0.35rem 0.9rem; font-size: var(--text-xs); }

/* ---- SMS consent: two separate boxes (informational, marketing) sit close together */
.check--compact:has(+ .check--compact) { margin-bottom: var(--space-s); }

/* ---- Chat call-to-action (in place of the intake forms while the chat widget is the only intake) */
.chat-cta { display: grid; gap: var(--space-m); align-content: start; }
.chat-cta h2 { margin: 0; }
.chat-cta p { margin: 0; }
.chat-cta-note a { color: inherit; }
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--forest-800); text-decoration: underline; cursor: pointer; }

/* ---- Buyer journey (2026-10-08): hero path picker, entry points, journey card, DPA, FAQ, blog, welcome ------- */
.hero--home .split { align-items: start; }
@media (min-width: 960px) { .hero--home .split { grid-template-columns: 1fr 1fr; } }
.hero--home h1 { max-width: 15ch; font-size: clamp(2.2rem, 1.4rem + 2.7vw, 3.6rem); }
.path-picker { display: grid; gap: var(--space-s); margin-top: var(--space-l); padding: clamp(1rem, 0.8rem + 1vw, 1.5rem); background: var(--white); color: var(--ink); border: 1px solid var(--stone-200); border-top: 4px solid var(--forest-800); box-shadow: var(--shadow-2); }
.path-picker .label { margin: 0; }
.path-picker .btn { width: 100%; }
@media (min-width: 560px) { .path-picker .btn { width: auto; justify-self: start; } }
.hero--home .hero-guide { margin-top: var(--space-m); }
.entry-points { display: grid; gap: var(--space-m); }
@media (min-width: 860px) { .entry-points { grid-template-columns: repeat(3, 1fr); } }
.entry-point { display: grid; align-content: start; gap: var(--space-s); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); background: var(--white); border: 1px solid var(--stone-200); border-top: 4px solid var(--forest-800); }
.entry-point--primary { border-top-color: var(--accent-marigold); }
.entry-point .illo { width: 6.5rem; margin-bottom: var(--space-2xs); }
.entry-point h3 { margin: 0; }
.entry-point p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.entry-point .btn { justify-self: start; margin-top: var(--space-2xs); }
.journey-cta { display: grid; gap: var(--space-m); align-content: start; }
.journey-cta h2, .journey-cta p { margin: 0; }
.pillars li p { margin-bottom: 0; }
.pillars li .source { display: block; margin-top: 0.75rem; }
.dpa-list li p { margin-bottom: 0.75rem; }
.dpa-note { max-width: 52rem; margin-top: var(--space-l); }
.faq { display: grid; gap: 1px; max-width: 52rem; background: var(--stone-200); border: 1px solid var(--stone-200); }
.faq details { background: var(--white); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-s); padding: 1rem 1.25rem; cursor: pointer; list-style: none; font: 600 var(--text-md) / 1.3 var(--font-display); color: var(--forest-800); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1.5rem; text-align: center; color: var(--leaf-700); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 1.25rem 1.25rem; color: var(--ink-muted); }
.faq .faq-body p { margin: 0; }
.footer-sub { margin-top: var(--space-m); }
.footer-newsletter p { color: var(--text-muted); }
.footer-newsletter .link-arrow { display: inline-block; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.3fr 0.9fr 1fr 1.2fr; } }
.newsletter { display: grid; gap: var(--space-s); align-content: start; }
.newsletter h2, .newsletter p { margin: 0; }
.newsletter .btn { justify-self: start; }
.embed-shell--form { min-height: 320px; }
.post-list { display: grid; gap: var(--space-l); list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
.post-card { display: grid; align-content: start; background: var(--white); border: 1px solid var(--stone-200); border-top: 4px solid var(--forest-800); }
.post-card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { display: grid; gap: 0.6rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.post-card h2 { font-size: var(--h3); margin: 0; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; }
.post-card p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.post-card .link-arrow { justify-self: start; margin-top: 0.4rem; }
.post-date { margin: 0; font: 600 var(--text-xs) / 1.2 var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--leaf-700); }
.page-head .post-date { margin-top: var(--space-s); }
.eyebrow-link { color: inherit; text-decoration: none; }
.eyebrow-link:hover { text-decoration: underline; }
.post-container { max-width: 48rem; }
.post-hero { margin: 0 0 var(--space-xl); }
.post-body h2 { font-size: var(--h3); margin-top: var(--space-xl); }
.post-body h3 { font-size: var(--h4); margin-top: var(--space-l); }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li { margin-bottom: 0.4rem; }
.post-body blockquote { margin: var(--space-m) 0; padding: var(--space-s) var(--space-m); border-left: 4px solid var(--accent-marigold); background: var(--linen); }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body hr { border: 0; border-top: 1px solid var(--stone-200); margin: var(--space-xl) 0; }
.post-body code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--linen); padding: 0.1em 0.3em; }
.post-sources { margin-top: var(--space-xl); padding: var(--space-m); background: var(--linen); border-left: 4px solid var(--leaf); }
.post-sources h2 { font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--leaf-700); margin-bottom: var(--space-xs); }
.post-sources ul { margin: 0; padding-left: 1.2rem; }
.post-sources li { margin-bottom: 0.3rem; font-size: var(--text-sm); }
.welcome-note p { max-width: 34rem; }
.welcome-video { position: relative; aspect-ratio: 16 / 9; background: var(--forest-800); }
.welcome-video iframe, .welcome-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.link-button.source { font: 600 var(--text-xs) var(--font-display); color: var(--leaf-700); text-decoration: none; }
@media (min-width: 1200px) and (max-width: 1399px) { .site-nav { gap: var(--space-m); } }
/* Header between 1200 and 1499px: the seven links fit on one line with a tighter gap and the phone as an icon. */
.site-nav a { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1499px) { .site-nav { gap: 1.1rem; } .header-phone span { display: none; } }
@media (min-width: 640px) { .facts--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .facts--four { grid-template-columns: repeat(4, 1fr); } }

/* ---- Link-in-bio page /links (2026-10-10): photo, name, one line, large stacked buttons ---------------------- */
.links-page { padding-block: clamp(2rem, 1.2rem + 4vw, 4.5rem) clamp(3rem, 2rem + 5vw, 6rem); }
.links-card { display: grid; justify-items: center; max-width: 30rem; margin-inline: auto; text-align: center; }
.links-photo { position: relative; isolation: isolate; container-type: inline-size; width: 8rem; margin: 0 0 var(--space-m); }
.links-photo::before { content: ""; position: absolute; z-index: -1; right: -8cqw; bottom: -8cqw; width: 70cqw; height: calc(70cqw * var(--pitch) + 42cqw); background: var(--leaf); clip-path: polygon(0 0, 100% calc(70cqw * var(--pitch)), 100% 100%, 0 100%); }
.links-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; }
.links-card h1 { margin-bottom: var(--space-3xs); font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem); }
.links-role { margin: 0 0 var(--space-s); font: 500 var(--text-sm) / 1.4 var(--font-display); color: var(--text-muted); }
.links-card .lead { margin: 0 auto var(--space-l); }
.links-list { display: grid; gap: var(--space-xs); width: 100%; margin: 0; padding: 0; list-style: none; }
.links-list .btn { width: 100%; min-height: 3.75rem; justify-content: space-between; padding-inline: 1.25rem; text-align: left; }