/* Laura Giardina - modern visual layer (v2).
 *
 * Loaded AFTER site.css, which owns structure and the 55+ readability floor.
 * This file owns palette, surfaces, transitions and interaction.
 *
 * Direction: restraint. Warm ivory, near-black ink, one evergreen accent, a
 * stone neutral. No gradients-as-decoration, no glowing blobs. Depth comes
 * from hairline borders, typography and motion rather than colour.
 * The blue/orange logo is rendered monochrome so it never fights the palette.
 */

:root {
  --bg:        #F7F5F0;
  --surface:   #FFFFFF;
  --ink:       #1A1F1C;
  --ink-soft:  #333B36;
  --muted:     #5E6660;
  --dim:       #8A918C;
  --line:      #E4E0D7;
  --line-soft: #EEEBE4;

  --accent:    #2F5D4F;   /* evergreen */
  --accent-dk: #234639;
  --accent-lt: #E8EEEA;
  --stone:     #D9CBB0;
  --stone-lt:  #EFEBE3;
  --night:     #17221E;

  /* site.css components read these names */
  --blue: var(--accent); --blue-dk: var(--accent-dk); --blue-soft: var(--accent-lt);
  --orange: var(--accent); --orange-dk: var(--accent-dk); --orange-soft: var(--stone-lt);

  --r: 18px; --r-sm: 12px; --r-lg: 26px;
  --ease: cubic-bezier(.22,.8,.24,1);
  --shadow-sm: 0 1px 2px rgba(26,31,28,.04), 0 2px 8px rgba(26,31,28,.04);
  --shadow:    0 1px 2px rgba(26,31,28,.04), 0 18px 40px -20px rgba(26,31,28,.22);
  --shadow-lg: 0 2px 4px rgba(26,31,28,.04), 0 30px 70px -30px rgba(26,31,28,.32);
}

body { background: var(--bg); color: var(--ink); }
::selection { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------ type */
h1, h2, h3 { letter-spacing: -.025em; font-weight: 500; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; }
.lead { color: var(--muted); }

.eyebrow {
  background: none; padding: 0; color: var(--accent);
  font-size: .78rem; letter-spacing: .18em; gap: 12px;
}
.eyebrow::before { width: 28px; height: 1px; background: currentColor; }
.center .eyebrow::before { display: inline-block; }

/* ----------------------------------------------- scroll progress bar */
.progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 80;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ------------------------------------------------------------ header */
.site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.site-header .header-inner { min-height: 92px; transition: min-height .4s var(--ease); }
.site-header .brand img { filter: brightness(0) invert(1); transition: filter .4s var(--ease); }
.site-header .brand-txt b { color: #fff; }
.site-header .brand-txt span { color: rgba(255,255,255,.66); }
.site-header .nav > a:not(.btn) {
  color: rgba(255,255,255,.86); background: none !important; border-radius: 0;
  position: relative; padding: 10px 14px;
}
/* underline that grows from the centre */
.site-header .nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transition: transform .35s var(--ease);
}
.site-header .nav > a:not(.btn):hover::after,
.site-header .nav > a.active::after { transform: scaleX(1); }
.site-header .nav > a:not(.btn):hover, .site-header .nav > a.active { color: #fff; }
.site-header .nav .btn { background: #fff; color: var(--ink); box-shadow: none; }
.site-header .nav .btn:hover { background: var(--stone); color: var(--ink); }
.site-header .nav-toggle { background: transparent; border-color: rgba(255,255,255,.4); }
.site-header .nav-toggle span { background: #fff; }

.site-header.is-solid {
  background: rgba(247,245,240,.86); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.site-header.is-solid .header-inner { min-height: 74px; }
.site-header.is-solid .brand img { filter: brightness(0); }
.site-header.is-solid .brand-txt b { color: var(--ink); }
.site-header.is-solid .brand-txt span { color: var(--muted); }
.site-header.is-solid .nav > a:not(.btn) { color: var(--ink-soft); }
.site-header.is-solid .nav > a:not(.btn):hover, .site-header.is-solid .nav > a.active { color: var(--ink); }
.site-header.is-solid .nav .btn { background: var(--ink); color: #fff; }
.site-header.is-solid .nav .btn:hover { background: var(--accent); }
.site-header.is-solid .nav-toggle { border-color: var(--line); background: #fff; }
.site-header.is-solid .nav-toggle span { background: var(--ink); }
/* hide on scroll down, return on scroll up */
.site-header.is-hidden { transform: translateY(-100%); }

@media (max-width: 1000px) {
  .site-header .nav { background: var(--bg); border-radius: 0 0 var(--r) var(--r); }
  .site-header .nav > a:not(.btn) { color: var(--ink-soft); }
  .site-header .nav > a:not(.btn)::after { display: none; }
  .site-header .nav .btn { background: var(--ink); color: #fff; }
}

/* -------------------------------------------------------------- hero */
.hero { background: var(--night); }
.hero-inner { padding: 190px 0 130px; }
@media (max-width: 760px) { .hero-inner { padding: 140px 0 84px; } }
.hero video, .hero .hero-img { filter: grayscale(.35) contrast(1.02); }
.hero::after {
  background:
    linear-gradient(95deg, rgba(23,34,30,.92) 0%, rgba(23,34,30,.78) 45%, rgba(23,34,30,.35) 100%),
    linear-gradient(180deg, rgba(23,34,30,.2) 0%, rgba(23,34,30,.7) 100%);
}
.hero::before { display: none; }
.hero h1 em { color: var(--stone); background: none; -webkit-text-fill-color: currentColor; font-style: italic; }
.hero .lead { color: rgba(255,255,255,.8); }
.hero .eyebrow { color: var(--stone); background: none; border: 0; }
.hero-free {
  background: transparent; border: 1px solid rgba(255,255,255,.22); backdrop-filter: none;
  font-weight: 500; color: rgba(255,255,255,.88);
}
.hero-free b { background: var(--stone); color: var(--ink); }

/* hero text arrives in sequence */
.hero-inner > * { animation: rise .9s var(--ease) both; }
.hero-inner > *:nth-child(2) { animation-delay: .08s; }
.hero-inner > *:nth-child(3) { animation-delay: .16s; }
.hero-inner > *:nth-child(4) { animation-delay: .24s; }
.hero-inner > *:nth-child(5) { animation-delay: .32s; }
.hero-inner > *:nth-child(6) { animation-delay: .40s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ buttons */
.btn { border-radius: 100px; font-weight: 500; letter-spacing: .005em; position: relative; overflow: hidden; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--accent-dk); box-shadow: 0 14px 30px -14px rgba(47,93,79,.7); }
.btn-blue { background: var(--ink); box-shadow: none; }
.btn-blue:hover { background: var(--accent); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.hero .btn-ghost, .btn-light {
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; backdrop-filter: none;
}
.hero .btn-ghost:hover, .btn-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero .btn-primary { background: #fff; color: var(--ink); }
.hero .btn-primary:hover { background: var(--stone); color: var(--ink); }
/* trailing arrow that slides in */
.btn-primary::after {
  content: "\2192"; display: inline-block; width: 0; opacity: 0; margin-left: 0;
  transition: width .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}
.btn-primary:hover::after { width: 1em; opacity: 1; margin-left: 2px; }
.btn { transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease),
       border-color .3s var(--ease), box-shadow .3s var(--ease); }

/* ------------------------------------------------------ quick actions */
.quick { background: transparent; border: 0; }
.quick-grid {
  margin-top: -56px; position: relative; z-index: 3;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
@media (max-width: 900px) { .quick-grid { margin-top: -36px; } }
.quick a { border-right: 1px solid var(--line-soft); padding: 28px 24px; position: relative;
  transition: background .35s var(--ease); }
.quick a:hover { background: var(--bg); }
.quick-ico { background: var(--accent-lt); color: var(--accent); border-radius: 50%; }
.quick a:hover .quick-ico { background: var(--accent); color: #fff; transform: translateY(-2px) rotate(-8deg); }
.quick a:nth-child(n) .quick-ico { background: var(--accent-lt); color: var(--accent); }
.quick a:nth-child(n):hover .quick-ico { background: var(--accent); color: #fff; }

/* ----------------------------------------------------------- sections */
section { padding: 120px 0; }
@media (max-width: 760px) { section { padding: 72px 0; } }
section.white { background: var(--surface); }
section.tint { background: var(--bg); }
section.tint::before, section.tint::after { display: none; }
section.warm { background: var(--stone-lt); }
.sec-head { margin-bottom: 64px; }

/* -------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 36px 32px; box-shadow: none; overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
/* cursor spotlight: --mx/--my set by site.js */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; height: auto; transform: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(47,93,79,.09), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover::before { opacity: 1; transform: none; }
.card:hover { border-color: #CFC8BA; box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.card h3 { font-size: 1.36rem; }
.card p { color: var(--muted); }
.card-ico { border-radius: 50%; background: var(--accent-lt); color: var(--accent); }
.card:hover .card-ico { background: var(--accent); color: #fff; transform: rotate(-8deg) scale(1.06); }
.grid > .card:nth-child(n) .card-ico { background: var(--accent-lt); color: var(--accent); }
.grid > .card:nth-child(n):hover .card-ico { background: var(--accent); color: #fff; }
.card.warm::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(217,203,176,.28), transparent 60%); }
a.card .more { color: var(--ink); font-weight: 500; }
section.tint .card { background: var(--surface); backdrop-filter: none; }

/* -------------------------------------------------------------- steps */
.step::before {
  background: transparent; border: 1px solid var(--ink); color: var(--ink); box-shadow: none;
  font-weight: 500;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.step:hover::before { background: var(--ink); color: #fff; transform: scale(1.08); }
.steps .step::after { background: var(--line); }

/* ----------------------------------------------------------- free band */
.free-band { background: var(--night); }
.free-band::before, .free-band::after { display: none; }
.free-band .big { color: var(--stone); background: none; -webkit-text-fill-color: currentColor; font-weight: 500; }
.free-band .eyebrow { color: var(--stone); }

/* -------------------------------------------------------------- quotes */
.quote { border: 1px solid var(--line); border-radius: var(--r); box-shadow: none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.quote::before { color: var(--stone); background: none; -webkit-text-fill-color: currentColor; opacity: 1; }
.quote footer .av { background: var(--ink); color: #fff; box-shadow: none; }
.stars { color: var(--accent); }

/* ----------------------------------------------------------------- faq */
.faq details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; margin: 0; }
.faq details[open] { box-shadow: none; }
.faq summary { padding: 26px 4px; font-weight: 500; font-size: 1.18rem; transition: color .3s var(--ease); }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  border: 0; width: 22px; height: 22px; transform: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center/14px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/1.5px 14px no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 4px 26px; }

/* --------------------------------------------------------------- table */
table.cmp { border: 1px solid var(--line); box-shadow: none; }
table.cmp thead th { background: var(--ink); color: #fff; font-weight: 500; }
table.cmp tbody tr:hover { background: var(--bg); }

/* --------------------------------------------------------------- pills */
.pill { border-color: var(--line); background: transparent; font-weight: 500; }
.pill:hover { border-color: var(--ink); box-shadow: none; }
.pill svg { color: var(--accent); }

/* -------------------------------------------------------------- photos */
.photo { border-radius: var(--r-lg); box-shadow: none; }
.photo img { transition: transform 1.2s var(--ease), filter .8s var(--ease); filter: saturate(.85); }
.photo:hover img { transform: scale(1.05); filter: saturate(1); }
.photo::after { display: none; }

/* ---------------------------------------------------------------- form */
.form-card { border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: var(--r-lg); }
.field input, .field select, .field textarea { background: var(--bg); border-color: var(--line); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47,93,79,.12); background: #fff;
}
.req { color: var(--accent); }

/* ----------------------------------------------------------------- cta */
.cta { background: var(--night); }
.cta::before, .cta::after { display: none; }
.cta h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

/* -------------------------------------------------------------- footer */
.site-footer { background: var(--night); }
.site-footer::before { display: none; }
.site-footer .brand img { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------- links */
main a:not(.btn):not(.card) { color: var(--accent); text-decoration-color: rgba(47,93,79,.3); text-underline-offset: 3px; }
main a:not(.btn):not(.card):hover { text-decoration-color: var(--accent); }

/* ------------------------------------------------------- scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; }
  .hero-inner > * { animation: none; }
  .card, .card:hover { transform: none !important; }
}

@media (max-width: 560px) {
  .eyebrow { font-size: .7rem; letter-spacing: .12em; line-height: 1.4; }
  .hero h1 { font-size: clamp(2.2rem, 9.5vw, 2.8rem); }
}

/* ================================================= glass buttons (v2.1) */
/* Semi-transparent throughout, as requested. Tinted glass on light
   backgrounds, white glass on dark, solidifying on hover so the target is
   never ambiguous for an older reader. */
.btn { backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); }
.btn-primary, .btn-blue {
  background: rgba(47,93,79,.82); color: #fff; border: 1px solid rgba(47,93,79,.35);
}
.btn-primary:hover, .btn-blue:hover { background: rgba(35,70,57,.96); }
.btn-ghost {
  background: rgba(255,255,255,.45); border: 1px solid rgba(26,31,28,.16); color: var(--ink);
}
.btn-ghost:hover { background: rgba(255,255,255,.9); border-color: rgba(26,31,28,.4); }
.hero .btn-primary, .cta .btn-primary, .free-band .btn-primary {
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.42);
}
.hero .btn-primary:hover, .cta .btn-primary:hover, .free-band .btn-primary:hover {
  background: rgba(255,255,255,.95); color: var(--ink);
}
.hero .btn-ghost, .btn-light, .cta .btn-ghost {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.26); color: #fff;
}
.hero .btn-ghost:hover, .btn-light:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.6); }
.site-header .nav .btn { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.site-header .nav .btn:hover { background: rgba(255,255,255,.95); color: var(--ink); }
.site-header.is-solid .nav .btn { background: rgba(47,93,79,.85); color: #fff; border-color: transparent; }
.site-header.is-solid .nav .btn:hover { background: rgba(35,70,57,.98); }

/* ====================================================== magazine layout */
/* Editorial presentation: each section is an "article" with a folio number,
   a rule above the head, a drop cap on the opening paragraph and oversized
   pull quotes. Folios are generated by CSS counters so no markup changes. */
main { counter-reset: folio; }
main > section:not(.hero):not(.quick):not(.cta):not(.free-band) .sec-head,
main > section:not(.hero):not(.quick):not(.cta):not(.free-band) .split > div:first-child {
  position: relative; padding-top: 34px;
}
main > section:not(.hero):not(.quick):not(.cta):not(.free-band) .sec-head::before,
main > section:not(.hero):not(.quick):not(.cta):not(.free-band) .split > div:first-child::before {
  counter-increment: folio;
  content: counter(folio, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font: 500 .82rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .2em;
  color: var(--dim); border-top: 1px solid var(--ink); padding-top: 12px; width: 56px;
}
.sec-head.center::before { left: 50% !important; transform: translateX(-50%); }

/* display headings get the editorial scale */
section .sec-head h2, section .split h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }

/* drop cap on the first lead paragraph of each article */
main > section:not(.hero) .split > div:first-child > .lead:first-of-type::first-letter,
main > section.white:not(.hero) .sec-head:not(.center) > .lead::first-letter {
  float: left; font: 500 4.6em/.82 ui-serif, Georgia, serif;
  margin: .06em .12em 0 0; color: var(--accent);
}

/* pull quotes: Laura's attributed quotes read as a magazine pull quote */
main blockquote.quote:only-child {
  border: 0; background: transparent; padding: 20px 0 20px 46px;
  border-left: 2px solid var(--accent); border-radius: 0;
}
main blockquote.quote:only-child::before { display: none; }
main blockquote.quote:only-child p {
  font: 400 italic clamp(1.5rem, 2.8vw, 2.2rem)/1.34 ui-serif, Georgia, serif;
  color: var(--ink); letter-spacing: -.01em;
}
main blockquote.quote:only-child:hover { transform: none; box-shadow: none; }

/* asymmetric split: text column wider, image offset like a spread */
@media (min-width: 901px) {
  .split.wide-left { grid-template-columns: 1.25fr .75fr; gap: 80px; }
  .split .photo.portrait { transform: translateY(40px); }
}

/* card grids read as a contents page */
.grid-3 > .card, .grid-2 > .card { border-radius: var(--r); }
.grid > .card h3::before {
  content: ""; display: block; width: 24px; height: 1px; background: var(--accent);
  margin-bottom: 14px; transition: width .5s var(--ease);
}
.grid > .card:hover h3::before { width: 56px; }
.grid > .card:has(.card-ico) h3::before { display: none; }

/* stats: the figure is the headline, set like a magazine stat */
section.tint .grid-2 > .card h3 { font-size: 1.5rem; line-height: 1.2; }

/* ===================================================== quick actions rail */
/* Modelled on McLaren: vertical tab on the left edge, panel slides out. */
.qa { position: fixed; left: 0; top: 160px; z-index: 950; display: flex; align-items: flex-start;
  transition: transform .4s var(--ease), opacity .4s var(--ease); }
.qa.is-tucked { transform: translateX(-130%); opacity: 0; pointer-events: none; }

.qa-tab {
  writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; align-items: center; gap: 8px;
  padding: 18px 11px; border: 0; border-radius: 0 12px 12px 0; cursor: pointer;
  background: rgba(23,34,30,.82); color: #fff;
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-right: 2px solid var(--stone);
  font: 600 .7rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 4px 0 24px -6px rgba(0,0,0,.35);
  transition: background .3s var(--ease), padding .3s var(--ease);
  animation: qa-nudge 5s var(--ease) 3s infinite;
}
.qa-tab:hover { background: rgba(47,93,79,.95); padding-right: 15px; }
.qa-tab svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .4s var(--ease); }
.qa.is-open .qa-tab { animation: none; }
.qa.is-open .qa-tab svg { transform: rotate(-90deg); }
/* a small periodic lean so people notice it exists */
@keyframes qa-nudge { 0%, 88%, 100% { transform: none; } 93% { transform: translateX(5px); } }

.qa-panel {
  width: 0; overflow: hidden; transition: width .45s var(--ease);
  max-height: calc(100vh - 190px);
}
.qa.is-open .qa-panel { width: 300px; }
.qa-panel > * { width: 300px; }
.qa-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px 14px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
  font: 600 1rem/1 ui-serif, Georgia, serif; color: var(--ink); letter-spacing: -.01em;
}
.qa-close { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 8px; display: grid; }
.qa-close:hover { background: var(--line-soft); color: var(--ink); }
.qa-close svg { width: 18px; height: 18px; }

.qa-list {
  list-style: none; margin: 0; padding: 6px 12px 12px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px); max-height: calc(100vh - 260px); overflow-y: auto;
  border-radius: 0 0 18px 0; box-shadow: 8px 18px 40px -18px rgba(26,31,28,.35);
}
.qa-list li { margin: 0; }
.qa-item {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 8px;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; font: inherit; cursor: pointer;
  border-radius: 10px; transition: background .25s var(--ease), padding .25s var(--ease);
}
.qa-list li:last-child .qa-item { border-bottom: 0; }
.qa-item:hover { background: var(--bg); padding-left: 12px; }
.qa-ico {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  background: var(--night); color: #fff; transition: background .25s var(--ease), transform .3s var(--ease);
}
.qa-ico svg { width: 18px; height: 18px; }
.qa-item:hover .qa-ico { background: var(--accent); transform: rotate(-6deg); }
.qa-accent .qa-ico { background: var(--stone); color: var(--ink); }
.qa-txt b { display: block; font-size: .96rem; font-weight: 600; line-height: 1.25; }
.qa-txt small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }

.qa-sharebox {
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); padding: 14px 16px 16px; border-radius: 0 0 18px 0;
}
.qa-sharelead { margin: 0 0 10px; font-weight: 600; font-size: .9rem; }
.qa-sharegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa-sh {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  text-decoration: none; font: 500 .72rem/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.qa-sh:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--accent); }
.qa-sh svg { width: 18px; height: 18px; }
.qa-copied { margin: 10px 0 0; font-size: .82rem; color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .qa { top: auto; bottom: 96px; }
  .qa-tab { padding: 14px 9px; font-size: .64rem; }
  .qa.is-open .qa-panel, .qa-panel > * { width: min(300px, calc(100vw - 60px)); }
}
@media (prefers-reduced-motion: reduce) { .qa-tab { animation: none; } }

/* ======================================================== person hero */
/* /about: portrait framed beside the headline, not a background behind it. */
.hero.hero-person .hero-inner {
  max-width: var(--wrap); display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 64px; align-items: center;
}
.hero.hero-person .hero-img {
  position: relative; inset: auto; z-index: 1; width: 100%; height: auto;
  aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); outline: 1px solid rgba(255,255,255,.12);
  outline-offset: 10px; transform: rotate(1.2deg); transition: transform .8s var(--ease);
}
.hero.hero-person .hero-img:hover { transform: rotate(0deg) scale(1.01); }
.hero.hero-person .hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  filter: none;
}
.hero.hero-person::after {
  background: radial-gradient(70% 90% at 80% 40%, rgba(47,93,79,.35), transparent 70%), var(--night);
}
@media (max-width: 900px) {
  .hero.hero-person .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero.hero-person .hero-img { max-width: 360px; transform: none; order: -1; }
}

/* Home: the video stays as atmosphere, but the scrim is kept (the person-hero
   rule paints a solid background, which would hide the video entirely). */
.hero.hero-video::after {
  background:
    linear-gradient(95deg, rgba(23,34,30,.94) 0%, rgba(23,34,30,.84) 50%, rgba(23,34,30,.62) 100%),
    linear-gradient(180deg, rgba(23,34,30,.25), rgba(23,34,30,.7));
}
.hero.hero-video video { filter: grayscale(.5) blur(2px); transform: scale(1.04); }
.hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-copy > *:nth-child(5) { animation-delay: .32s; }
.hero.hero-person .hero-img { animation: rise 1.1s var(--ease) .2s both; }

@media (prefers-reduced-motion: reduce) { .hero-copy > *, .hero.hero-person .hero-img { animation: none; } }

/* The hero padding shorthand zeroed the side gutters, so the copy touched the
   screen edge. Restore them. */
.hero .hero-inner { padding-left: var(--gut); padding-right: var(--gut); }
/* Home: the video is texture only. Darken it until the figures in it read as
   light and movement rather than as a man standing behind Laura. */
.hero.hero-video::after {
  background:
    linear-gradient(95deg, rgba(23,34,30,.97) 0%, rgba(23,34,30,.93) 55%, rgba(23,34,30,.86) 100%),
    linear-gradient(180deg, rgba(23,34,30,.5), rgba(23,34,30,.75));
}
.hero.hero-video video { filter: grayscale(1) blur(6px); opacity: .55; transform: scale(1.08); }

/* Inner-page heroes: photography is atmosphere, never a face behind a headline. */
.hero:not(.hero-video) .hero-img { border-radius: 0; box-shadow: none; inset: 0; }
.hero:not(.hero-video) .hero-img img { filter: grayscale(1) blur(5px); opacity: .45; transform: scale(1.08); }
.hero:not(.hero-video)::after {
  background:
    linear-gradient(95deg, rgba(23,34,30,.96) 0%, rgba(23,34,30,.9) 55%, rgba(23,34,30,.8) 100%),
    linear-gradient(180deg, rgba(23,34,30,.45), rgba(23,34,30,.75));
}
/* hero-inner is position:relative in site.css, so the absolutely positioned
   image filled the content column only and left a visible box. Anchor it to
   the full-width section instead. */
.hero:not(.hero-video) .hero-inner { position: static; }
.hero:not(.hero-video) .hero-inner > div:first-child { position: relative; z-index: 1; }

/* ====================================================== home feature hero */
/* A visible photograph: warm couple in a garden, the outcome Laura sells.
   Scrim is heavy on the left where the copy sits and opens up on the right so
   the people are actually seen. Slow push-in gives it life without a video. */
.hero.hero-feature { background: var(--night); }
.hero-feature .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-feature .hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%;
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.hero.hero-feature::after {
  background:
    linear-gradient(90deg, rgba(23,34,30,.92) 0%, rgba(23,34,30,.78) 38%, rgba(23,34,30,.25) 68%, rgba(23,34,30,.05) 100%),
    linear-gradient(180deg, rgba(23,34,30,.35) 0%, transparent 30%, transparent 70%, rgba(23,34,30,.55) 100%);
}
@media (max-width: 760px) {
  .hero-feature .hero-bg img { object-position: 75% 30%; }
  .hero.hero-feature::after { background: linear-gradient(180deg, rgba(23,34,30,.55), rgba(23,34,30,.9)); }
}
@media (prefers-reduced-motion: reduce) { .hero-feature .hero-bg img { animation: none; } }
/* The couple sit on the LEFT of the source photo, exactly where the copy goes.
   Mirror it so they land in the open right-hand side of the hero. */
.hero-feature .hero-bg img { object-position: 30% 35%; animation-name: kenburns-mirror; }
@keyframes kenburns-mirror {
  from { transform: scaleX(-1) scale(1.02); }
  to   { transform: scaleX(-1) scale(1.12) translate(1.5%, -1%); }
}
@media (max-width: 760px) { .hero-feature .hero-bg img { object-position: 22% 30%; } }
@media (prefers-reduced-motion: reduce) { .hero-feature .hero-bg img { transform: scaleX(-1); } }

/* ============================================ home hero: magazine split */
/* Photo by Unsplash (free licence): an older couple laughing outdoors.
   On desktop the photograph owns the right-hand side of the spread and the
   headline sits on a solid panel to its left, so no face is ever under text. */
.hero-feature .hero-bg img {
  animation-name: kenburns; object-position: 50% 30%;
}
@media (min-width: 901px) {
  .hero-feature .hero-bg { left: 42%; }
  .hero-feature .hero-bg::before {     /* soft seam where photo meets panel */
    content: ""; position: absolute; inset: 0 auto 0 0; width: 26%; z-index: 1;
    background: linear-gradient(90deg, var(--night) 0%, rgba(23,34,30,0) 100%);
  }
  .hero.hero-feature::after {
    background: linear-gradient(180deg, rgba(23,34,30,.3) 0%, transparent 22%);
  }
  .hero-feature .hero-inner { max-width: var(--wrap); }
  .hero-feature .hero-inner > .hero-copy { max-width: 520px; }
  .hero.hero-feature h1 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); }
}
@media (max-width: 900px) {
  .hero-feature .hero-bg img { object-position: 50% 22%; }
  .hero.hero-feature::after {
    background: linear-gradient(180deg, rgba(23,34,30,.35) 0%, rgba(23,34,30,.55) 35%, rgba(23,34,30,.92) 70%);
  }
}
@media (prefers-reduced-motion: reduce) { .hero-feature .hero-bg img { transform: none; } }

/* v16.1: the panel was too narrow for a two-person shot, cutting the woman in
   half under the seam. Wider panel, thinner seam, framed on both faces. */
@media (min-width: 901px) {
  .hero-feature .hero-bg { left: 36%; }
  .hero-feature .hero-bg::before { width: 14%; }
  .hero-feature .hero-bg img { object-position: 46% 28%; }
  .hero-feature .hero-inner > .hero-copy { max-width: 470px; }
}
/* Mobile: the photo becomes a band across the top and the copy sits beneath
   it on the dark panel - never text across a face. */
@media (max-width: 900px) {
  .hero-feature .hero-bg { bottom: auto; height: 52vh; min-height: 300px; }
  .hero-feature .hero-bg img { object-position: 50% 20%; }
  .hero-feature .hero-bg::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(180deg, transparent, var(--night));
  }
  .hero.hero-feature::after { background: linear-gradient(180deg, rgba(23,34,30,.45) 0%, transparent 18%); }
  .hero-feature .hero-inner { padding-top: calc(max(52vh, 300px) - 10px); }
}

/* v16.2: anchor the photo panel to the END of the text column rather than a
   fixed percentage, so the copy can never run onto a face at any width.
   Text column = wrap left edge + gutter + 480px. */
@media (min-width: 1200px) {
  .hero-feature .hero-bg { left: max(40%, calc(50% - (var(--wrap) / 2) + var(--gut) + 520px)); }
  .hero-feature .hero-inner > .hero-copy { max-width: 480px; }
}
/* Laptop widths: not enough room for a side-by-side spread, so use the
   stacked band layout that already works on phones. */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-feature .hero-bg { left: 0; bottom: auto; height: 56vh; min-height: 360px; }
  .hero-feature .hero-bg::before { display: none; }
  .hero-feature .hero-bg::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(180deg, transparent, var(--night));
  }
  .hero-feature .hero-bg img { object-position: 50% 22%; }
  .hero-feature .hero-inner { padding-top: calc(max(56vh, 360px) - 10px); }
  .hero-feature .hero-inner > .hero-copy { max-width: 720px; }
}

/* v16.3: back to the full-bleed hero with a fade (Zac preferred it to the
   split). Photo covers the whole hero; a left-to-right fade carries the copy. */
.hero-feature .hero-bg,
.hero-feature .hero-bg { left: 0 !important; right: 0; top: 0; bottom: 0 !important; height: auto !important; min-height: 0 !important; }
.hero-feature .hero-bg::before, .hero-feature .hero-bg::after { display: none !important; }
.hero-feature .hero-bg img { object-position: 60% 30% !important; }
.hero.hero-feature::after {
  background:
    linear-gradient(90deg, rgba(23,34,30,.94) 0%, rgba(23,34,30,.82) 30%, rgba(23,34,30,.4) 55%, rgba(23,34,30,.08) 78%, rgba(23,34,30,0) 100%),
    linear-gradient(180deg, rgba(23,34,30,.4) 0%, transparent 25%, transparent 75%, rgba(23,34,30,.5) 100%) !important;
}
.hero-feature .hero-inner { padding-top: 190px !important; }
.hero-feature .hero-inner > .hero-copy { max-width: 560px !important; }
@media (max-width: 900px) {
  .hero-feature .hero-inner { padding-top: 140px !important; }
  .hero-feature .hero-bg img { object-position: 62% 25% !important; }
  .hero.hero-feature::after {
    background: linear-gradient(180deg, rgba(23,34,30,.45) 0%, rgba(23,34,30,.6) 40%, rgba(23,34,30,.92) 75%) !important;
  }
}

/* landscape section photo (Laura with residents) */
.photo.landscape { aspect-ratio: 3 / 2; }
.photo.landscape img { object-position: 45% 30%; }

/* v16.4: park-bench couple (Unsplash, free licence). They sit centre-frame, so
   on wide screens the photo is zoomed and nudged right to keep them clear of
   the faded copy column. The push-in keeps the same offset. */
@media (min-width: 901px) {
  .hero-feature .hero-bg img { object-position: 50% 45% !important; animation-name: kenburns-right; }
}
@keyframes kenburns-right {
  from { transform: scale(1.22) translateX(9%); }
  to   { transform: scale(1.3) translateX(10%) translateY(-1%); }
}
@media (max-width: 900px) { .hero-feature .hero-bg img { object-position: 45% 40% !important; } }
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .hero-feature .hero-bg img { transform: scale(1.22) translateX(9%) !important; }
}

/* ================================================== booking wizard */
.form-card.wz-host { padding: 34px 32px 26px; }
.wz-top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.wz-count { font: 600 .78rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.wz-bar { flex: 1; height: 4px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.wz-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .5s var(--ease); }

.wz-q { font: 500 clamp(1.45rem, 2.4vw, 1.85rem)/1.2 ui-serif, Georgia, serif; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.wz-hint { color: var(--muted); font-size: .98rem; margin: 0 0 18px; }
.wz-lead { font-size: 1.12rem; color: var(--ink-soft); }
.wz-opts { display: grid; gap: 10px; margin: 18px 0 6px; }
.wz-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 17px 18px; font: 500 1.06rem/1.3 ui-sans-serif, system-ui, sans-serif; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.wz-opt:hover { border-color: var(--accent); background: var(--accent-lt); transform: translateX(3px); }
.wz-opt.on { border-color: var(--accent); background: var(--accent-lt); }
.wz-tick {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid #B9C5BE;
  display: grid; place-items: center; transition: background .25s var(--ease), border-color .25s var(--ease);
}
.wz-multi .wz-tick { border-radius: 6px; }
.wz-opt.on .wz-tick { background: var(--accent); border-color: var(--accent); }
.wz-opt.on .wz-tick::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.wz-next, .wz-send { margin-top: 18px; width: 100%; }
.wz-input {
  width: 100%; padding: 15px 16px; margin-top: 6px; font: inherit; font-size: 1.05rem;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink);
}
.wz-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(47,93,79,.12); }
.wz-other { margin-top: 12px; }
.wz-fields { display: grid; gap: 14px; margin-top: 14px; }
.wz-fields label { font-weight: 600; font-size: 1rem; color: var(--ink-soft); }
.wz-fields label span { font-weight: 400; color: var(--dim); }
.wz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.wz-err { color: #8A3113; background: #FDF0EC; border: 1px solid #F0B3A0; border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; }
.wz-urgent {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--stone);
  background: var(--stone-lt); color: var(--ink); font-size: 1rem;
}
.wz-urgent a { font-weight: 700; }
.wz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.wz-back { background: none; border: 0; color: var(--muted); font: 500 1rem/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; padding: 8px 4px; }
.wz-back:hover { color: var(--ink); }
.wz-free { font-size: .88rem; color: var(--dim); }

.wz-done { text-align: left; }
.wz-check { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.wz-check svg { width: 28px; height: 28px; }
.wz-guess { background: var(--accent-lt); border-radius: 12px; padding: 14px 16px; color: var(--ink); }
.wz-next-steps { padding-left: 22px; margin: 18px 0 0; }
.wz-next-steps li { margin-bottom: 10px; color: var(--ink-soft); }

/* step transitions */
.wz-in-fwd  { animation: wzfwd .4s var(--ease) both; }
.wz-in-back { animation: wzback .4s var(--ease) both; }
@keyframes wzfwd  { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes wzback { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-in-fwd, .wz-in-back { animation: none; } }
@media (max-width: 560px) { .form-card.wz-host { padding: 24px 18px 18px; } .wz-opt { padding: 15px 14px; } }
/* display:flex beats the [hidden] attribute (same trap as the chat panel) */
.wz-nav[hidden], .wz [hidden] { display: none !important; }