/* ============================================================
   Galicia & Green Spain — Property & Relocation
   Website preview stylesheet
   Palette grounded in the Galician Atlantic:
   eucalyptus, mist, granite, gorse-gold.
   Inherited from 05_Marketing_Drafts/Homepage_Concept.html
   ============================================================ */

:root {
  --ground: #E9EEE7;
  --surface: #F7F9F4;
  --surface-2: #FFFFFF;
  --ink: #16271E;
  --ink-soft: #3C4E44;
  --pine: #274A3B;
  --euc: #4C7C67;
  --mist: #89A69D;
  --gorse: #C8941E;
  --gorse-soft: #E4B84A;
  --granite: #6C685E;
  --line: #D3DBCE;
  --hero-sky-a: #D9E4DC;
  --hero-sky-b: #C3D6CE;

  --serif: "Fraunces", Constantia, "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Widened 26 Aug 2026 (S123). These three sat within ~14 points of each other,
       so section bands were indistinguishable in dark mode and every page read as
       one continuous field - the "they all look like the same page" fault. */
    --ground: #0A100D;
    --surface: #16221B;
    --surface-2: #24342B;
    --ink: #E9F0E9;
    --ink-soft: #B6C4BB;
    --pine: #6FA98E;
    --euc: #7FBB9F;
    --mist: #7E9890;
    --gorse: #E0B142;
    --gorse-soft: #F0C868;
    --granite: #ABA599;
    --line: #37493E;
    --hero-sky-a: #16241D;
    --hero-sky-b: #1C2E26;
  }
}
:root[data-theme="dark"] {
  --ground: #0A100D; --surface: #16221B; --surface-2: #24342B;
  --ink: #E9F0E9; --ink-soft: #B6C4BB; --pine: #6FA98E; --euc: #7FBB9F;
  --mist: #7E9890; --gorse: #E0B142; --gorse-soft: #F0C868; --granite: #ABA599;
  --line: #37493E; --hero-sky-a: #16241D; --hero-sky-b: #1C2E26;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.14; text-wrap: balance; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--euc);
  margin: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--sans); font-weight: 600; font-size: 0.98rem;
  padding: 0.82em 1.5em; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  min-height: 48px; /* comfortable thumb target on mobile */
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-primary { background: var(--gorse); color: #1c1403; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -10px var(--gorse); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--euc); color: var(--euc); transform: translateY(-2px); }
.btn-lg { padding: 0.95em 1.8em; font-size: 1.05rem; }
.btn-ghost.on-film { color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost.on-film:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); }
:focus-visible { outline: 2px solid var(--gorse); outline-offset: 3px; border-radius: 2px; }

/* ---------- preview banner ---------- */
.preview-flag {
  background: var(--gorse); color: #1c1403; text-align: center;
  font-size: 0.8rem; font-weight: 600; padding: 0.55em 1rem; letter-spacing: 0.01em;
  line-height: 1.45;
}
.preview-flag a { color: #1c1403; }

/* ---------- header / nav ---------- */
header.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand .mark { width: 30px; height: 30px; flex: none; }
/* Caroline's real monogram, supplied 21 Aug 2026. The full horizontal lockup was
   tried first and rejected: at nav height its wordmark is illegible and its
   near-black text vanishes on the dark header. Mark + live text instead. */
.brand-mark { width: auto; height: 32px; flex: none; }
@media (max-width: 900px) { .brand-mark { height: 28px; } }
.brand b { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; display: block; }
.brand small { display: block; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--granite); font-weight: 600; margin-top: -1px; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { text-decoration: none; font-size: 0.92rem; color: var(--ink-soft); font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--euc); }
.nav-links a[aria-current="page"] { font-weight: 700; }
.nav-cta { display: flex; align-items: center; gap: 0.9rem; }
.lang { font-size: 0.82rem; color: var(--granite); font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
.lang b { color: var(--ink); }

/* mobile menu — pure CSS, no JavaScript, so it can never be "slow" */
.menu-toggle { display: none; }
.menu-btn {
  display: none; width: 48px; height: 48px; border: 1px solid var(--line);
  border-radius: var(--radius); background: transparent; color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--pad) 1rem;
  }
  .nav-links a { padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .menu-btn { display: inline-flex; }
  .menu-toggle:checked ~ .nav-links { display: flex; }
  header.nav { position: sticky; }
  .nav-in { position: relative; }
  .nav-cta .btn { padding-inline: 1.1em; font-size: 0.9rem; }
}
@media (max-width: 480px) {
  .nav-cta .lang { display: none; }
  .brand b { font-size: 0.98rem; }
}

/* ---------- page hero (interior pages) ---------- */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); }
.page-hero-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.page-hero-in { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 5.5rem); max-width: 46rem; }
.page-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); margin-top: 0.6rem; }
.page-hero .lede { color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.2rem); margin-top: 1.2rem; max-width: 38rem; }
.crumb { font-size: 0.82rem; color: var(--granite); margin-bottom: 1.2rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--euc); }

/* ---------- cinematic hero (home) ---------- */
.hero { position: relative; overflow: hidden; min-height: 86vh; display: flex; align-items: center; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,18,13,.32), rgba(8,18,13,.10) 45%, rgba(8,18,13,.62)); }
.hero-in { position: relative; z-index: 2; width: 100%; padding-block: clamp(4rem, 10vw, 7rem); }
.hero-copy { max-width: 42rem; }
.hero .eyebrow { color: #D6E3DA; }
.hero h1 { font-size: clamp(2.3rem, 6.2vw, 4.5rem); margin: 0.5rem 0 0; color: #F4F8F3; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.hero .lede { font-size: clamp(1.02rem, 2.2vw, 1.3rem); color: #E7EEE8; margin-top: 1.4rem; max-width: 34rem; text-shadow: 0 1px 16px rgba(0,0,0,.4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; align-items: center; }
.play { display: inline-flex; align-items: center; gap: 0.65em; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.play .disc { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); display: grid; place-items: center; transition: background .2s ease, transform .2s ease; }
.play:hover .disc { background: rgba(255,255,255,.18); transform: scale(1.06); }
.trust-row { display: flex; align-items: center; gap: 1.1rem; margin-top: 2.2rem; flex-wrap: wrap; color: #E7EEE8; font-size: 0.9rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.stars { color: var(--gorse-soft); letter-spacing: 0.1em; }
.hero-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.1rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.7); }

@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: kenburns 34s ease-in-out infinite alternate; transform-origin: 55% 62%; }
  @keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.13) translateY(-1.5%); } }
  .mist-cloud.c1 { animation: mistdrift 44s linear infinite alternate; }
  .mist-cloud.c2 { animation: mistdrift2 56s linear infinite alternate; }
  @keyframes mistdrift { from { transform: translateX(-40px); } to { transform: translateX(70px); } }
  @keyframes mistdrift2 { from { transform: translateX(50px); } to { transform: translateX(-60px); } }
  .reveal { opacity: 0; transform: translateY(16px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- sections ---------- */
section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-head { max-width: 44rem; margin-bottom: 2.6rem; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0.55rem 0 0; }
.section-head p { color: var(--ink-soft); margin-top: 1rem; font-size: 1.05rem; }
.tint { background: var(--surface); border-block: 1px solid var(--line); }

/* ---------- hook ---------- */
.hook-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.hook-grid > p:first-child { font-family: var(--serif); font-size: clamp(1.3rem, 3.2vw, 2rem); line-height: 1.4; color: var(--ink); max-width: 30ch; }
.hook-grid .small { font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); max-width: 48ch; }
@media (max-width: 760px) { .hook-grid { grid-template-columns: 1fr; } }

/* ---------- guide ---------- */
.guide-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
@media (max-width: 820px) { .guide-grid { grid-template-columns: 1fr; } }
/* Caroline's actual photograph, added 23 Aug 2026 — this was a green gradient.
   Source: her own agent page. NOTE: the original is only 350x350, so it is
   being upscaled here. A larger portrait would visibly improve this block. */
.portrait {
  aspect-ratio: 4/5; border-radius: var(--radius); position: relative; overflow: hidden;
  background-image:
    linear-gradient(180deg, transparent 55%, rgba(8,18,13,.55)),
    url("img/caroline.jpg");
  background-size: cover, cover;
  background-position: center 22%, center 22%;
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; padding: 1.1rem;
}
.portrait .tag { font-size: 0.78rem; color: #fff; background: rgba(0,0,0,.34); padding: 0.35em 0.7em; border-radius: 2px; backdrop-filter: blur(3px); }
.guide h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.guide p { color: var(--ink-soft); margin-top: 1.1rem; font-size: 1.05rem; }
.guide .sig { font-family: var(--serif); font-style: italic; font-size: 1.45rem; color: var(--pine); margin-top: 1.4rem; }

/* ---------- value grid ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }
.value { background: var(--surface); padding: 1.6rem; display: flex; flex-direction: column; gap: 0.65rem; }
.value .ic { width: 30px; height: 30px; color: var(--euc); }
.value h3 { font-family: var(--sans); font-weight: 700; font-size: 1.03rem; }
.value p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }

/* ---------- plan / dark band ---------- */
.plan { background: var(--pine); color: #EAF3ED; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan { background: #1C3125; } }
:root[data-theme="dark"] .plan { background: #1C3125; }
.plan .eyebrow { color: var(--gorse-soft); }
.plan h2 { color: #fff; }
.plan .section-head p { color: #C4D6CB; }
.plan-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2.4rem; }
@media (max-width: 760px) { .plan-steps { grid-template-columns: 1fr; } }
.step { border-top: 2px solid var(--gorse); padding-top: 1.05rem; }
.step .n { font-family: var(--serif); font-size: 2.3rem; color: var(--gorse-soft); line-height: 1; }
.step h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; color: #fff; margin: 0.65rem 0 0.45rem; }
.step p { color: #C4D6CB; font-size: 0.97rem; }

/* ---------- property cards ---------- */
.props-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .cards-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.4); }
/* THE FIX Caroline asked for: a fixed 3:2 frame, image fills it, never squashed, never cropped oddly */
.card .photo {
  aspect-ratio: 3/2; position: relative; width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; padding: 0.8rem;
  background-size: cover; background-position: center;
}
/* 12 Sept 2026 (s97, §171): the "◈ her photo drops in here" ::after caption that sat here
   printed over EVERY card photo — real listings, success stories and both team cards —
   and was seen by Lucie and Caroline on 1 Sept. Removed. Real photographs go in via the
   .tm-* and .p* background rules below; nothing should ever print over them. */
.card .badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,.92); color: #274A3B; padding: 0.32em 0.62em; border-radius: 2px; }
.card .price { font-size: 0.85rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.36); padding: 0.32em 0.62em; border-radius: 2px; backdrop-filter: blur(3px); }
.card .body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.card .body h3 { font-family: var(--sans); font-weight: 700; font-size: 1.02rem; }
.card .body .loc { color: var(--granite); font-size: 0.9rem; }
.card .body .desc { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; margin-top: 0.5rem; }
.card .body .meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.75rem; color: var(--ink-soft); font-size: 0.85rem; border-top: 1px solid var(--line); }
.card .body .meta strong { color: var(--ink); }

/* photo tints — placeholders standing in for real photography */
/* Real photographs of her real listings, added 23 Aug 2026.
   These were flat CSS gradients until now — the single biggest thing making
   the page read as a mockup rather than a website. Sources are her own
   uploads on galiciagreenspainproperty.com. */
.p1 { background-image: url("img/prop1.jpg"); }
.p2 { background-image: url("img/prop2.jpg"); }
.p3 { background-image: url("img/prop3.jpg"); }
.card .photo { background-size: cover; background-position: center; }
.p4 { background-image: url("img/prop4.jpg"); }
.p5 { background-image: url("img/prop5.jpg"); }
.p6 { background-image: url("img/prop6.jpg"); }

/* Team and success-story frames, 23 Aug 2026.
   These deliberately do NOT reuse the property frames (.p1-.p6). A listing
   photo on a success story reads as "this is the house that family bought",
   and it is not — we do not have their photos. A landscape says "they moved
   HERE" without making a claim we cannot stand behind. Same reasoning for a
   team card: a house where a face belongs is worse than no face at all.
   ⚠ The real fix is photographs of the actual people and homes. */
.tm-caroline { background-image: url("img/caroline.jpg"); }
/* 13 Sept 2026 (s97): the photograph of the two of them on the About page — a plain figure,
   never cropped by a band, so both faces stay in frame at every width. */
.team-photo { margin: 0 0 2.2rem; }
.team-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); }
.team-photo figcaption { margin-top: .6rem; font-size: .85rem; color: var(--granite); font-style: italic; }

/* 12 Sept 2026 (s97): Lucie's real photograph, from Caroline's WhatsApp of 11 Sept 2026, identified
   as Lucie by Sophie on 12 Sept. 1086×1448, quality 82. Replaces the story5.jpg landscape. */
.tm-lucie    { background-image: url("img/lucie.jpg"); background-position: center 30%; }
.s1 { background-image: url("img/story1.jpg"); }
.s2 { background-image: url("img/story2.jpg"); }
.s3 { background-image: url("img/story3.jpg"); }
.s4 { background-image: url("img/story4.jpg"); }

.note { font-size: 0.85rem; color: var(--granite); margin-top: 1.3rem; font-style: italic; }
.note-center { text-align: center; }

/* ---------- search bar ---------- */
.searchbar {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; display: grid; gap: 0.8rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .searchbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .searchbar { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--granite); }
.field select, .field input {
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7em 0.8em; min-height: 48px; width: 100%;
}
.searchbar .btn { align-self: end; }

/* ---------- gallery (property page) ---------- */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 0.6rem; }
.gallery .shot { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 150px; background-size: cover; background-position: center; }
.gallery .shot.big { grid-row: span 2; min-height: 320px; }
.gallery .shot span {
  position: absolute; inset: auto 0 0.5rem 0; text-align: center;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery .shot.big { grid-column: span 2; grid-row: auto; min-height: 220px; }
}

/* ---------- detail layout ---------- */
.detail { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.panel h3 { font-size: 1.25rem; }
.panel .price-big { font-family: var(--serif); font-size: 2.1rem; color: var(--ink); line-height: 1; }
.sticky { position: sticky; top: 5.5rem; }
@media (max-width: 900px) { .sticky { position: static; } }

.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 520px) { .spec { grid-template-columns: 1fr; } }
.spec div { background: var(--surface); padding: 0.9rem 1.1rem; }
.spec .k { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--granite); font-weight: 700; }
.spec .v { font-size: 1.02rem; margin-top: 0.15rem; }

.prose p { color: var(--ink-soft); font-size: 1.04rem; margin-top: 1.1rem; }
.prose h3 { margin-top: 2.2rem; font-size: 1.4rem; }
.prose ul { color: var(--ink-soft); font-size: 1.02rem; padding-left: 1.2rem; margin-top: 1rem; }
.prose li { margin-bottom: 0.55rem; }
.prose li::marker { color: var(--euc); }
.prose blockquote {
  margin: 1.8rem 0 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--gorse);
  background: var(--surface); font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; color: var(--ink);
}

/* ---------- price table ---------- */
.table-wrap { overflow-x: auto; margin-top: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 480px; background: var(--surface); }
th, td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); font-size: 0.97rem; }
th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--granite); font-weight: 700; background: var(--surface-2); }
tr:last-child td { border-bottom: none; }
td strong { color: var(--ink); }

/* ---------- pricing cards ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; display: flex; flex-direction: column; }
.tier.featured { border-color: var(--gorse); box-shadow: 0 0 0 1px var(--gorse); }
.tier .ribbon { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gorse); margin-bottom: 0.5rem; }
.tier h3 { font-size: 1.35rem; }
.tier .from { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); margin-top: 0.8rem; line-height: 1; }
.tier .from small { font-family: var(--sans); font-size: 0.8rem; color: var(--granite); font-weight: 600; display: block; margin-top: 0.35rem; letter-spacing: 0.02em; }
.tier p { color: var(--ink-soft); font-size: 0.97rem; margin-top: 0.9rem; }
.tier ul { list-style: none; padding: 0; margin: 1.1rem 0 1.5rem; color: var(--ink-soft); font-size: 0.94rem; }
.tier li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; line-height: 1.5; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--euc); font-weight: 700; }
.tier .btn { margin-top: auto; }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .reviews { grid-template-columns: 1fr; } }
.review { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.review .stars { color: var(--gorse); font-size: 0.9rem; letter-spacing: 0.08em; }
.review p { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; margin-top: 0.7rem; font-style: italic; }
.review .who { font-size: 0.85rem; color: var(--granite); margin-top: 0.9rem; font-weight: 600; font-style: normal; }

/* ---------- stats ---------- */
.stats { display: flex; gap: clamp(1.5rem, 5vw, 3rem); flex-wrap: wrap; }
.stat .num { font-family: var(--serif); font-size: 2rem; color: var(--euc); line-height: 1; }
.stat .lab { font-size: 0.78rem; color: var(--granite); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.4rem; }

/* ---------- contact form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }
.field textarea {
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7em 0.8em; min-height: 130px; width: 100%; resize: vertical;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: none; }
.contact-list svg { width: 20px; height: 20px; color: var(--euc); flex: none; margin-top: 0.2rem; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { color: var(--euc); }
.contact-list .k { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--granite); font-weight: 700; }

/* ---------- final CTA ---------- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(1.9rem, 5vw, 3.1rem); max-width: 18ch; margin-inline: auto; }
.cta-final p { color: var(--ink-soft); margin: 1.1rem auto 0; max-width: 46ch; font-size: 1.06rem; }
.cta-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.cta-final .eyebrow { text-align: center; }

/* ---------- footer ---------- */
footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: 2.8rem 2rem; color: var(--granite); font-size: 0.88rem; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 820px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-cols h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin: 0 0 0.9rem; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin-bottom: 0.55rem; }
.foot-cols a { text-decoration: none; }

/* Footer links sat at 19px tall — under the 44px minimum a thumb needs, and
   stacked close enough to mis-tap. Only bite on touch screens, so the desktop
   footer keeps its tight spacing. */
@media (pointer: coarse) {
  .foot-cols li { margin-bottom: 0; }
  .foot-cols a { display: block; min-height: 44px; line-height: 44px; }
}
.foot-cols a:hover { color: var(--euc); }
.foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.82rem; }

/* Attribution for the one montage clip whose licence requires it (Freepik /
   Magnific). Deliberately quiet, but present — the licence is granted on the
   condition that the credit is visible, so this must not be display:none.
   If that clip ever leaves the montage, this line goes with it. */
.foot-bottom .credit { flex-basis: 100%; opacity: 0.62; font-size: 0.76rem; }
.foot-bottom .credit a { color: inherit; text-decoration: underline; }

/* Property location map (Leaflet + OSM/CARTO). Leaflet needs an explicit height
   or the container collapses to nothing and the map never appears. */
.propmap { margin-top: 1.2rem; height: 340px; border: 1px solid var(--line);
           border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.propmap .leaflet-container { height: 100%; width: 100%; background: var(--surface); font: inherit; }
.propmap .leaflet-control-attribution { background: rgba(0,0,0,.45); color: #E9F0E9; font-size: .68rem; }
.propmap .leaflet-control-attribution a { color: #E9F0E9; }
.map-note { margin-top: .5rem; font-size: .8rem; color: var(--granite); }

/* Regional flags on the Explore page. Inline SVG, so there is no image request
   and nothing to blur on a retina screen. The 1px stroke matters: Galicia and
   Cantabria are both mostly WHITE, and without an edge they dissolve into a
   light background. */
.regflag-wrap { display:flex; align-items:center; gap:.6rem; margin:0 0 .2rem; }
.regflag { width:34px; height:auto; display:block; flex:none; border-radius:2px; }
.regflag-name { font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
                color:var(--granite); font-weight:600; }
@media (max-width: 600px) { .propmap { height: 260px; } }

/* ---------- mobile safety net ----------
   Grid children default to min-width:auto, so one unbreakable string
   (an email address, a long URL) can widen a whole column and push the
   page sideways on a phone. These three rules stop that happening
   anywhere on the site, not just where we spotted it. */
.detail > *, .hook-grid > *, .guide-grid > *, .cards > *, .tiers > *, .form-grid > * { min-width: 0; }
.contact-list, .contact-list a, .card .body, .prose a, .foot-cols { overflow-wrap: anywhere; }
html, body { overflow-x: clip; }

/* ---------- utility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.pill { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--euc); border: 1px solid var(--line); border-radius: 999px; padding: 0.3em 0.85em; }

/* ---------- guide: quoted voices ---------- */
.letter-quote, .voice {
  margin: 1.4rem 0; padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--gorse); background: var(--surface-2);
  font-style: normal;
}
.letter-quote p, .voice p { margin: 0 0 .8rem; }
.letter-quote p:last-child, .voice p:last-child { margin-bottom: 0; }
.voice .sig, .letter-quote + .sig {
  font-family: var(--sans); font-size: .86rem; letter-spacing: .04em;
  color: var(--granite); font-style: normal;
}

/* ---------- guide: the keepable-copy offer ---------- */
.take-it {
  margin: 2.4rem 0; padding: 1.6rem 1.8rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); text-align: left;
}
.take-it h3 { margin: .5rem 0 .8rem; font-size: 1.35rem; }
.take-it p { margin-bottom: .9rem; }
.take-it .btn { margin-top: .4rem; }
@media print { .take-it { display: none; } }

/* ---- Hero film, added 23 Aug 2026 -------------------------------------
   Real footage replaces the drawn SVG placeholder. The SVG stays underneath
   as the fallback layer, so nothing breaks if the video fails to load.
   Deliberately NOT shown on small screens or under prefers-reduced-motion:
   an 18s autoplaying loop on mobile data is a cost the visitor didn't agree to. */
/* Layer order in the hero, lowest first:
     0  .hero-art     the drawn SVG, now the fallback beneath the film
     1  .hero-video   the film
     2  .hero-overlay the dark gradient that keeps the type legible
     3  .hero-in / .hero-caption   the words                              */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; pointer-events:none;
}
.hero .hero-overlay{ z-index:2; }
.hero .hero-in{ z-index:3; }
.hero .hero-caption{ position:relative; z-index:3; }


@media (prefers-reduced-motion: reduce){ .hero-video{ display:none; } }




/* ---- Typeface, added 23 Aug 2026 --------------------------------------
   Until now the site loaded NO web font: it rendered in Constantia on
   Windows, Iowan Old Style on a Mac and Georgia/Times on Android. The most
   distinctive thing on the page — the big serif headline — was whatever the
   visitor's operating system happened to own.
   Fraunces is a variable face with an optical-size axis, so the headline can
   use its display cut and small text its text cut. Inter carries the UI. */
h1, h2, .hero h1{ font-optical-sizing:auto; letter-spacing:-0.015em; }
.hero h1{ font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0; font-weight:600; line-height:1.02; }
h2{ font-variation-settings:"opsz" 72; font-weight:600; }
h3{ font-variation-settings:"opsz" 36; font-weight:600; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.eyebrow{ letter-spacing:.14em; }

/* ---- Film in the inner-page hero bands, 23 Aug 2026 ---------------------
   These bands were a light surface with dark text. Putting film behind them
   means the text has to invert, so `.has-film` flips the type to light and
   lays a gradient over the footage to keep it readable.
   A separate 2.2 MB / 12s loop is used here, not the 21 MB homepage one —
   it is cached once and then costs nothing on every later page. */
.page-hero.has-film{ background: var(--pine); border-bottom: 0; }
.page-hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; pointer-events:none;
}
.page-hero-overlay{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(8,18,13,.62), rgba(8,18,13,.42) 45%, rgba(8,18,13,.72));
}
.page-hero.has-film .page-hero-in{ position:relative; z-index:3; }
.page-hero.has-film h1{ color:#F4F8F3; text-shadow:0 2px 26px rgba(0,0,0,.45); }
.page-hero.has-film .lede{ color:#E7EEE8; text-shadow:0 1px 14px rgba(0,0,0,.4); }
.page-hero.has-film .eyebrow{ color:#D6E3DA; }
.page-hero.has-film .crumb, .page-hero.has-film .crumb a{ color:#C4D3C8; }
.page-hero.has-film .page-hero-art{ z-index:0; }


@media (prefers-reduced-motion: reduce){ .page-hero-video{ display:none; } }

/* ---- Film on phones, 23 Aug 2026 ---------------------------------------
   It was hidden below 780px to spare mobile data. Sophie asked for it on the
   phone, so instead of hiding it the homepage now serves the light 4.85 MB
   cut to small screens and the 20 MB one only to desktops.
   prefers-reduced-motion still wins — that is accessibility, not bandwidth. */
@media (max-width: 780px){
  .hero-video, .page-hero-video{ display:block; }
  /* phone heroes are tall: bias the crop upward so the horizon isn't lost */
  .hero-video{ object-position: center 40%; }
  .page-hero-video{ object-position: center 45%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-video, .page-hero-video{ display:none; }
}