/* ==========================================================================
   LARECO — Independent Buyer Advisory & Acquisition · Costa Blanca
   styles.css — production stylesheet (no framework, no build step)
   --------------------------------------------------------------------------
   Visual system inherited from the LARECO brand:
   warm limestone base · refined dark typography · single clay accent ·
   flat hairline depth · generous editorial whitespace.
   Tokens live in :root so the whole site re-themes from one place.
   ========================================================================== */

:root {
  /* — Surfaces & neutrals — */
  --ivory:#EFE8DB;        /* primary surface          */
  --travertine:#E7DECF;   /* secondary surface        */
  --sand:#D9CFBC;         /* hairlines & dividers     */
  --hairline:#DED4C2;     /* section hairline (light) */
  --slate:#8C8070;        /* muted text (large only)  */
  --stone:#4E4537;        /* body text                */
  --umber:#3A3327;        /* hairline on dark         */
  --ink:#221C15;          /* primary text             */
  --shadow:#1E1811;       /* inverse surface          */
  --bone:#ECE3D2;         /* text on dark             */
  --ash:#C5BAA3;          /* secondary text on dark   */

  /* — Accent — */
  --clay:#A8694A;         /* the single accent        */
  --clay-light:#C98A63;   /* accent on dark           */

  /* — Type — */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* — Rhythm — */
  --gutter:clamp(1.375rem, 5vw, 3.5rem);
  --section-y:clamp(3rem, 6.6vw, 7rem);
  --section-y-top:clamp(1.875rem, 3.8vw, 3.375rem);
  --maxw:1240px;
  --measure:64ch;
  --measure-narrow:58ch;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* Homepage only: the page ends on the black footer, so the document canvas —
   what iOS Safari shows in the bottom safe-area/overscroll region — must be the
   footer's black rather than body ivory. Setting a background on <html> stops
   body's from propagating to the canvas; body ivory still paints its own box, so
   no light section changes and nothing flashes black during load. */
html:has(.site-footer--home){background:#111111;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-kerning:normal;
  overflow-x:hidden;
}
/* Landscape safety net for viewport-fit=cover (index.html): with the full canvas
   opted into, notched iPhones expose left/right insets in landscape only. Portrait
   never matches this rule, and env() is 0 on desktop/Android — so the approved
   portrait and desktop layouts are provably untouched. */
@media (orientation:landscape){
  body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}
}
img,svg{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--clay);color:var(--ivory);}

/* ── Accessibility ─────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:1px;}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--shadow);color:var(--bone);
  font-family:var(--sans);font-size:.8rem;padding:12px 18px;
}
.skip-link:focus{left:12px;top:12px;}

/* ── Layout helpers ────────────────────────────────────────────────────── */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.container--narrow{max-width:920px;}
.container--reading{max-width:760px;}
.section{padding-top:var(--section-y-top);padding-bottom:var(--section-y);border-bottom:1px solid var(--hairline);}
.section--alt{background:var(--travertine);}
/* Our Approach — white/black colour-DNA trial (#our-approach only; .section--alt
   itself stays untouched for every other section that shares it). */
#our-approach{background:#FFFFFF;border-bottom-color:rgba(34,28,21,.12);}
#our-approach .eyebrow{color:var(--ink);}
#our-approach .why__prose p{color:var(--ink);}
/* Finding Your Place — black/white colour DNA trial (#territory + #areas only;
   merged intro+carousel block: true-white background, clay accent swapped
   for dark/neutral throughout). */
#territory,#areas{background:#FFFFFF;}
#territory .eyebrow{color:var(--ink);}
#territory .lead{color:var(--ink);}
#areas{border-bottom-color:rgba(34,28,21,.12);}
#areas .area-explorer__keyfacts dt,#areas .area-explorer__keyfacts dd,#areas .area-explorer__more>p,#areas .area-explorer__more dt{color:var(--ink);}
#areas .area-explorer__dots button.is-active{background:var(--ink);}
.section--dark{background:var(--shadow);color:var(--bone);border-bottom:1px solid var(--umber);}
/* Section rhythm modifiers — couple adjacent, related sections into one visual block */
.section--flush-bottom{padding-bottom:0;border-bottom:none;}
.section--tight-top{padding-top:var(--section-y-top);}

/* ── Typography ────────────────────────────────────────────────────────── */
.eyebrow{
  display:block;
  /* Restored to the original size, +3% (an intentionally barely-noticeable
     confidence bump) — labels stay clearly subordinate to the headlines. */
  font-family:var(--mono);font-weight:500;font-size:.742rem;
  letter-spacing:.22em;color:var(--clay);
}
.section--dark .eyebrow{color:var(--clay-light);}
.display{
  font-family:var(--serif);font-weight:300;
  /* desktop cap trimmed ~5.5% (6.5→6.14rem) for editorial balance on large screens; min & fluid vw unchanged so tablet/mobile hold */
  font-size:clamp(2.75rem,8vw,6.14rem);line-height:1.05;letter-spacing:-.018em;
  max-width:18ch;text-wrap:balance;
}
.h2{
  font-family:var(--serif);font-weight:300;
  /* section headings: uniform ~5% reduction across all clamp stops (was 2rem/5vw/4.02rem) — fluid responsive curve, weight, line-height & spacing preserved */
  font-size:clamp(1.9rem,4.75vw,3.82rem);line-height:1.06;letter-spacing:-.012em;
  margin-top:clamp(1.5rem,2.8vw,2.5rem);max-width:18ch;text-wrap:balance;
}
/* Component Headline level — shared by process-step titles, the rep-card
   statement and area-carousel names (h3's own existing size is the anchor). */
.h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.22;text-wrap:balance;}
/* Neighbourhood card headline sits right at the single-line width limit; a ~1.5% uniform
   reduction adds slack so it holds one line across Chrome/Safari/Edge/Firefox. */
.h3--fit{font-size:calc(clamp(1.3rem,2.2vw,1.75rem) * .985);}
em{font-style:italic;}
.display em,.h2 em{font-weight:400;}
.lead{
  font-family:var(--serif);font-weight:300;
  /* section intro paragraphs: ~6% smaller across all clamp stops (was 1.15rem/1.6vw/1.45rem) — width, line-height & colour unchanged */
  font-size:clamp(1.08rem,1.5vw,1.36rem);line-height:1.62;color:var(--stone);
  max-width:34em;margin-top:clamp(1.5rem,2.6vw,2.25rem);text-wrap:pretty;
}
.section--dark .lead{color:var(--ash);}
.body{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.72;color:var(--stone);max-width:var(--measure);text-wrap:pretty;}
.section--dark .body{color:var(--ash);}
/* In-content editorial links (e.g. within .body copy) — same treatment as .legal a,
   generalised so any prose block can carry natural inline links. */
.body a{color:var(--ink);border-bottom:1px solid var(--clay);}
.body a:hover{color:var(--clay);}
.section--dark .body a{color:var(--bone);border-bottom-color:var(--clay-light);}
.section--dark .body a:hover{color:var(--clay-light);}
.pull{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.95rem);line-height:1.36;color:var(--ink);
  text-wrap:balance;
}
.section--dark .pull{color:var(--bone);}

/* ── Links & buttons ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  cursor:pointer;background:transparent;
  border:1px solid rgba(236,227,210,.5);color:var(--bone);
  padding:0 26px;font-family:var(--sans);font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;border-radius:2px;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background:var(--bone);color:var(--shadow);border-color:var(--bone);transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(10,7,4,.4);}
.btn--on-light{border-color:rgba(34,28,21,.32);color:var(--ink);}
.btn--on-light:hover{background:var(--ink);color:var(--bone);border-color:var(--ink);box-shadow:0 10px 22px -12px rgba(34,28,21,.28);}
.section-cta{margin-top:clamp(2.75rem,5vw,4rem);}

/* ── Header / navigation ───────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(239,232,219,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .32s var(--ease);
}
.site-header.is-scrolled{border-bottom-color:var(--hairline);}
.nav{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  height:clamp(64px,8vw,76px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  column-gap:clamp(2rem,3vw,3.5rem);position:relative;
}
.brand{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.4rem);letter-spacing:.3em;color:var(--ink);grid-column:2;justify-self:center;}
.nav-links{display:flex;gap:clamp(1.1rem,2.1vw,2rem);align-items:center;list-style:none;}
.nav-links--left{justify-self:end;}
.nav-links--right{justify-self:start;}

/* Desktop-only symmetric header (index.html): nav-left / logo / nav-right as three
   independent flex containers so the logo sits at a mathematically fixed centre. */
.nav--split{display:flex;}
.nav-left,.nav-right{
  display:flex;flex:1;flex-basis:0;min-width:0;align-items:center;
  gap:clamp(0.99rem,1.89vw,1.8rem);
}
.nav-left{justify-content:flex-end;}
.nav-right{justify-content:flex-start;}
.logo{
  flex:none;font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.4rem);
  letter-spacing:.3em;color:var(--ink);
}
.nav-left a,.nav-right a{
  position:relative;white-space:nowrap;
  font-family:var(--sans);font-weight:500;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:#6E6353;
  transition:color .18s var(--ease);
}
.nav-left a::after,.nav-right a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:#000000;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-left a:hover,.nav-left a:focus-visible,.nav-right a:hover,.nav-right a:focus-visible{color:var(--ink);}
/* Hover shows no underline — the sweep is reserved for keyboard focus. */
.nav-left a:focus-visible::after,.nav-right a:focus-visible::after{transform:scaleX(1);}
.nav-links a{
  position:relative;white-space:nowrap;
  font-family:var(--sans);font-weight:500;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:#6E6353;
  transition:color .18s var(--ease);
}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:clamp(1rem,2vw,1.6rem);}
.nav-cta{
  font-family:var(--sans);font-weight:600;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--clay);
  padding-bottom:4px;transition:color .18s var(--ease);
}
.nav-cta:hover{color:var(--clay);}
.menu-toggle{
  display:none;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding:15px 8px;margin:-15px -8px;
  position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);
}
.mobile-menu{
  position:fixed;inset:0;z-index:120;background:var(--ivory);
  display:flex;flex-direction:column;padding:clamp(1.25rem,5vw,2.5rem);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s var(--ease);
}
.mobile-menu.is-open{opacity:1;visibility:visible;}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between;}
.mobile-menu__close{
  background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:500;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
  padding:15px 8px;margin:-15px -8px;
}
.mobile-menu nav{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.6rem);margin-top:clamp(3.75rem,8vw,5.25rem);}
.mobile-menu nav a{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,9vw,2.6rem);line-height:1.05;color:var(--ink);padding-block:.3rem;margin-block:-.3rem;}
.mobile-menu__cta{align-self:flex-start;margin-top:clamp(2.25rem,6vw,3rem);}
.mobile-menu__foot{margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--slate);}

/* ── Mobile language selector (index.html header only) ───────────────────── */
.lang-select{display:none;}
.lang-select__input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:transparent;border:none;cursor:pointer;text-align:left;
  font-family:var(--mono);font-weight:500;font-size:.784rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6E6353;padding:15px 8px;margin:-15px -8px;transition:color .18s var(--ease);
}
.lang-select__input:hover,.lang-select__input:focus-visible{color:var(--ink);}

/* ── Desktop / tablet-landscape language utility (index.html hero nav only) ──
   Hidden everywhere by default; only the ≥1100.02px block further down (the
   mirror of the ≤1100px compact-header block) reveals it. The horizontal nav
   keeps its mathematically centred logo because that block also adds an
   equal-width flex spacer before .nav-left. */
.lang-nav{display:none;}
/* Typography is the main nav's, 1:1 (var(--sans) 500 / .75rem / .16em / uppercase /
   inherited 1.62 line-height) — the selector belongs to the same navigation system;
   its distinction comes from the horizontal separation, not from smaller type. */
.lang-nav__toggle{
  background:none;border:none;cursor:pointer;text-align:left;flex:none;
  font-family:var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6E6353;padding:15px 8px;margin:-15px -8px;transition:color .18s var(--ease),opacity .22s ease;
}
.lang-nav__toggle:hover,.lang-nav__toggle:focus-visible{color:var(--ink);}
.lang-nav__list{
  position:absolute;top:calc(100% + 16px);left:0;z-index:2;
  display:flex;flex-direction:column;gap:.85rem;list-style:none;margin:0;padding:0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .2s var(--ease),visibility .2s var(--ease),transform .2s var(--ease);
}
.lang-nav.is-open .lang-nav__list{opacity:1;visibility:visible;transform:translateY(0);}
.lang-nav__list button{
  background:none;border:none;cursor:pointer;text-align:left;white-space:nowrap;
  font-family:var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6E6353;padding:4px 0;transition:color .18s var(--ease),opacity .22s ease;
}
.lang-nav__list button.is-current,.lang-nav__list button:hover,.lang-nav__list button:focus-visible{color:var(--ink);}

/* ── Menu icon — hamburger that morphs into a close mark, in place ───────── */
.menu-icon{position:relative;display:block;width:19px;height:1px;background:currentColor;transition:background-color .2s var(--ease);}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:19px;height:1px;background:currentColor;transition:transform .2s var(--ease),top .2s var(--ease);}
.menu-icon::before{top:-6px;}
.menu-icon::after{top:6px;}
.menu-toggle[aria-expanded="true"] .menu-icon{background:transparent;}
.menu-toggle[aria-expanded="true"] .menu-icon::before{top:0;transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-icon::after{top:0;transform:rotate(-45deg);}

/* ── index.html mobile nav — right-side drawer variant ─────────────────────
   Scoped to .site-header--home / .mobile-menu--home / .mobile-menu__scrim
   (unique to index.html) so every other page's mobile menu is untouched. */
.site-header--home{z-index:150;}
/* Transparent-over-Hero state — index.html's photographic Hero ONLY. Scoped to
   .site-header--photo-hero (set only on index.html's header), never
   .site-header--home alone, since buyers-guide.html also carries --home for the
   slide-in mobile drawer and has no photo Hero to sit on.
   Nav sits directly on the photography (no bar, no blur, no border) until the
   page scrolls past the Hero, when the existing .is-scrolled toggle (script.js)
   restores the normal solid/dark header for readability over lighter sections. */
.site-header--photo-hero{position:fixed;left:0;right:0;transition:opacity .25s var(--ease),visibility .25s var(--ease);}
.site-header--photo-hero:not(.is-scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
/* Once the page scrolls away from the very top, the nav simply disappears
   (no solid/replacement bar) — it returns only when scrolled back to top. */
.site-header--photo-hero.is-scrolled{opacity:0;visibility:hidden;pointer-events:none;}
.site-header--photo-hero:not(.is-scrolled)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 100%);
}
.site-header--photo-hero:not(.is-scrolled) .logo,
.site-header--photo-hero:not(.is-scrolled) .nav-left a,
.site-header--photo-hero:not(.is-scrolled) .nav-right a,
.site-header--photo-hero:not(.is-scrolled) .lang-select__input{color:#FFFFFF;text-shadow:0 1px 4px rgba(0,0,0,.28);}
.site-header--photo-hero:not(.is-scrolled) .menu-toggle{color:#FFFFFF;}
.site-header--photo-hero:not(.is-scrolled) .nav-left a:hover,
.site-header--photo-hero:not(.is-scrolled) .nav-left a:focus-visible,
.site-header--photo-hero:not(.is-scrolled) .nav-right a:hover,
.site-header--photo-hero:not(.is-scrolled) .nav-right a:focus-visible,
.site-header--photo-hero:not(.is-scrolled) .lang-select__input:hover,
.site-header--photo-hero:not(.is-scrolled) .lang-select__input:focus-visible{color:#FFFFFF;text-shadow:0 1px 4px rgba(0,0,0,.28);}
/* Hover underline follows the nav's own colour on the photo hero: white on the
   image, black everywhere else. Geometry, timing and animation are untouched. */
.site-header--photo-hero:not(.is-scrolled) .nav-left a::after,
.site-header--photo-hero:not(.is-scrolled) .nav-right a::after{background:#FFFFFF;}
/* Desktop/tablet language utility on the photographic hero — same white DNA and
   text-shadow as the nav links beside it. */
.site-header--photo-hero:not(.is-scrolled) .lang-nav__toggle,
.site-header--photo-hero:not(.is-scrolled) .lang-nav__list button{color:#FFFFFF;text-shadow:0 1px 4px rgba(0,0,0,.28);}
.site-header--photo-hero:not(.is-scrolled) .lang-nav__toggle:hover,
.site-header--photo-hero:not(.is-scrolled) .lang-nav__toggle:focus-visible,
.site-header--photo-hero:not(.is-scrolled) .lang-nav__list button:hover,
.site-header--photo-hero:not(.is-scrolled) .lang-nav__list button:focus-visible{color:#FFFFFF;text-shadow:0 1px 4px rgba(0,0,0,.28);}
/* Every option carries the main nav's own opacity (1) — the active language is
   named by the trigger label, so no de-emphasis is applied here. */
.site-header--photo-hero:not(.is-scrolled) .lang-nav__list button{opacity:1;}
/* Horizontal header nav (desktop/tablet) hover — intensity only, pointing
   devices only. Must sit after the photo-hero block above: that block's
   :hover colour is #FFFFFF, identical to its own default, so hover produced no
   visible change at all. Here the hovered link's colour hover is neutralised to
   its inherited value and only opacity moves, 1 → .58 over 220ms. The colour
   transition is preserved and opacity appended, since a bare `transition`
   shorthand would drop the existing color timing. :focus-visible is untouched. */
@media (hover:hover) and (pointer:fine){
  .nav-left a,.nav-right a{opacity:1;transition:color .18s var(--ease),opacity .22s ease;}
  .nav-left a:hover,.nav-right a:hover{opacity:.58;color:inherit;}
  /* Same intensity-only hover for the language utility, since its :hover colour on
     the photo hero is identical to its default. */
  .site-header--photo-hero:not(.is-scrolled) .lang-nav__toggle:hover{opacity:.58;}
  .site-header--photo-hero:not(.is-scrolled) .lang-nav__list button:hover{opacity:.58;}
}
.mobile-menu__scrim{
  position:fixed;inset:0;z-index:155;background:rgba(30,24,17,.4);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
.mobile-menu__scrim.is-open{opacity:1;visibility:visible;}
.mobile-menu--home{
  z-index:160;left:auto;width:min(70vw,700px);padding-inline:clamp(1.25rem,6vw,1.75rem);
  padding-top:0;overflow-y:auto;
  transform:translateX(100%);
  transition:transform .28s var(--ease),opacity .28s var(--ease),visibility .28s var(--ease);
}
.mobile-menu--home.is-open{transform:translateX(0);}
.mobile-menu__drawer-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:.4rem;
  height:clamp(64px,8vw,76px);flex-shrink:0;
}
.mobile-menu__drawer-head .lang-select{display:flex;grid-column:1;justify-self:start;}
.mobile-menu__drawer-head .logo{grid-column:2;justify-self:center;font-size:clamp(1.29rem,2.1vw,1.5rem);}
.mobile-menu__drawer-head .menu-toggle{grid-column:3;justify-self:end;position:static;display:inline-flex;align-items:center;justify-content:center;}
.menu-icon--close{background:transparent;}
.menu-icon--close::before{top:0;transform:rotate(45deg);}
.menu-icon--close::after{top:0;transform:rotate(-45deg);}
.mobile-menu--home nav{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(1rem,3.4vh,1.75rem);margin-top:0;}
.mobile-menu--home nav a{font-size:clamp(1.3rem,4.6vh,1.65rem);line-height:1.15;transition:color .2s var(--ease),transform .2s var(--ease);}
.mobile-menu--home .mobile-menu__drawer-head .logo,
.mobile-menu--home .mobile-menu__drawer-head .menu-toggle{color:var(--ink);}
.mobile-menu--home nav a:hover,.mobile-menu--home nav a:active,.mobile-menu--home nav a:focus-visible{color:var(--clay);transform:translateX(2px);}
/* index.html only — new black/white colour DNA for the home drawer. The shared
   --home rules above stay on the legacy warm palette for the Buyer's Guide pages. */
.mobile-menu--light{background:#FFFFFF;}
.mobile-menu__scrim--light{background:rgba(34,28,21,.4);}
.mobile-menu--light .mobile-menu__drawer-head .logo,
.mobile-menu--light .mobile-menu__drawer-head .menu-toggle{color:var(--ink);}
/* Close mark: a bare black X on white — no visible container, and the enlarged
   touch target stays invisible (no tap-highlight blob, no ring, no radius). */
.mobile-menu--light .mobile-menu__drawer-head .menu-toggle{
  background:none;border:none;box-shadow:none;border-radius:0;
  -webkit-tap-highlight-color:transparent;
}
.mobile-menu--light .mobile-menu__drawer-head .menu-toggle:focus-visible{outline:1px solid var(--ink);outline-offset:4px;}
.mobile-menu--light nav{margin-left:-12px;gap:clamp(.91rem,3.1vh,1.59rem);}
.mobile-menu--light nav a{font-size:clamp(1.21rem,4.3vh,1.54rem);}
.mobile-menu--light nav a:hover,.mobile-menu--light nav a:active,.mobile-menu--light nav a:focus-visible{color:rgba(34,28,21,.6);}
/* Open-drawer link hover — opacity only, and only on real pointing devices.
   Must sit after the --home/--light rules above: their `transition` shorthand
   drops any opacity transition declared earlier, and their :hover colour alpha
   (.6) would compound with opacity .6 into a ~.36 fade. Inside this query the
   individual hovered link therefore keeps its ink colour and position and only
   its opacity moves, 1 → .6 over 220ms. :active and :focus-visible are left
   exactly as they are, so touch and keyboard behaviour is unchanged. */
@media (hover:hover) and (pointer:fine){
  .mobile-menu--home nav a,
  .mobile-menu--light nav a{
    opacity:1;
    transition:color .2s var(--ease),transform .2s var(--ease),opacity .22s ease;
  }
  .mobile-menu--home nav a:hover,
  .mobile-menu--light nav a:hover{opacity:.6;transform:none;}
  .mobile-menu--home nav a:hover{color:var(--ink);}
  .mobile-menu--light nav a:hover{color:var(--ink);}
}
.mobile-menu--light .mobile-menu__lang-foot li:not(:last-child)::after{color:rgba(34,28,21,.25);}
.mobile-menu--light .mobile-menu__lang-foot button{color:rgba(34,28,21,.5);}
.mobile-menu--light .mobile-menu__lang-foot button.is-current,
.mobile-menu--light .mobile-menu__lang-foot button:hover,
.mobile-menu--light .mobile-menu__lang-foot button:focus-visible{color:var(--ink);}
.mobile-menu__lang-foot{display:flex;gap:1rem;list-style:none;padding:0;margin:0 0 36px;flex-shrink:0;}
.mobile-menu__lang-foot li{position:relative;}
.mobile-menu__lang-foot li:not(:last-child)::after{content:"·";position:absolute;right:-.72rem;color:var(--sand);}
.mobile-menu__lang-foot button{
  background:none;border:none;cursor:pointer;padding:4px 0;
  font-family:var(--mono);font-weight:500;font-size:.8064rem;letter-spacing:.16em;
  color:#6E6353;transition:color .18s var(--ease);
}
.mobile-menu__lang-foot button.is-current,.mobile-menu__lang-foot button:hover,.mobile-menu__lang-foot button:focus-visible{color:var(--ink);}

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* ── Hero — immersive (art-directed image with overlaid copy) ─────────── */
.hero-x{
  position:relative;isolation:isolate;width:100%;
  min-height:clamp(616px, calc(110svh - 83.6px), 1064.8px);
  display:flex;align-items:center;overflow:hidden;
  background:#7C5A38;
  border-bottom:none;
}
.hero-x__media{position:absolute;left:-2px;right:-2px;top:-48px;bottom:-48px;z-index:-2;will-change:transform;}
.hero-x__img{width:100%;height:100%;object-fit:cover;object-position:68% 58%;}
/* Warm, left-weighted scrim: copy stays legible on the left, the villa luminous on the
   right, and the sunset colour is preserved (~25% mean darkening). */
.hero-x__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(22,15,9,.62) 0%, rgba(22,15,9,.46) 30%, rgba(22,15,9,.18) 54%, rgba(22,15,9,0) 74%),
    radial-gradient(ellipse 63% 78% at 30% 56%, rgba(22,15,9,.38) 0%, rgba(22,15,9,0) 73%);
}
.hero-x__inner{
  position:relative;z-index:1;width:100%;
  padding-top:clamp(3.8rem,9.8vh,6.3rem);padding-bottom:clamp(.2rem,2.2vh,1.7rem);
}
/* Same visual language as .rep__cta (Your Next Step): shares the shared .btn component
   (dark-surface variant, since the hero sits on the image/scrim), just with hero-specific
   spacing above it. */
.hero-x__cta{
  margin-top:clamp(1.25rem,2.4vw,1.85rem);
  padding:0 20px;min-height:42px;border-color:#FFFFFF;color:#FFFFFF;text-shadow:0 1px 4px rgba(0,0,0,.18);
  font-size:.68rem;font-weight:500;letter-spacing:.12em;
}
/* Hover in the current monochrome system: white fill, black text. Only the
   colours change — dimensions, border, radius, type, transition and the shared
   .btn motion are inherited unchanged. */
.hero-x__cta:hover{background:#FFFFFF;color:#000000;border-color:#FFFFFF;text-shadow:none;}
.hero-x .eyebrow{color:#FFFFFF;font-size:.78rem;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.18);}
@media (min-width:768px){.hero-x .eyebrow{position:relative;top:-14px;}}
/* PL only — hero text contrast. The Polish eyebrow and headline are the longest of
   the four languages, so their right ends reach further into the sunlit façade on
   the right of the hero photograph: measured raw image luminance behind the tail of
   "· Costa Blanca" is 0.96 at 1440px, where white type alone falls to 1.09:1 (the
   shorter DE/ES eyebrows stop short of that band and stay at ~2.2:1). This lifts
   the alpha of the hero's own text-shadow from .18 to .28 on all three elements
   (the headline inherits it, and passes it on to the italic <em>). The geometry — 0 1px 4px — is the design's
   existing hero shadow, unchanged, so nothing reads as a drop shadow over the dark
   left side of the image. Contrast only: no typography, position, size, wording or
   line break is affected, and the CTA's border and dimensions are untouched. */
html[lang="pl"] .hero-x .eyebrow,
html[lang="pl"] .hero-x__title,
html[lang="pl"] .hero-x__cta{text-shadow:0 1px 4px rgba(0,0,0,.28);}
/* Specificity guard: the PL rule above outranks .hero-x__cta:hover, which clears
   the shadow when the button inverts to a white fill. */
html[lang="pl"] .hero-x__cta:hover{text-shadow:none;}
/* PL only — the eyebrow's tail. "Costa Blanca" is the one run of hero type that
   actually crosses the sunlit façade rather than the sky behind it (the final
   glyphs sit at x≈975–981 at 1440px, over raw luminance 0.96), so it needs more
   separation than the .28 that suits the rest of the line. A tighter, slightly
   stronger shadow on that existing span only — 2px blur instead of 4px, so the
   extra weight stays a close rim on the letter edges and reads as definition
   rather than a drop shadow. The rest of the eyebrow keeps its approved .28/4px. */
html[lang="pl"] .hero-x .eyebrow .eyebrow__loc{text-shadow:0 1px 2px rgba(0,0,0,.45);}
.hero-x__title{
  color:#FFFFFF;max-width:16ch;
  /* desktop cap trimmed ~5.5% (5.1→4.82rem); min & fluid vw unchanged so tablet/mobile hold */
  font-size:clamp(2.2rem,6.3vw,4.82rem);
  line-height:1.14;
  margin-top:clamp(1.1rem,2.4vw,1.75rem);
  text-shadow:0 1px 4px rgba(0,0,0,.18);
}
.hero-x__title em{color:#FFFFFF;}
/* Desktop-only H1 scale. Reduced a further exactly 12% (all three clamp stops
   scaled ×.88 again: 1.936→1.70368rem, 5.544→4.87872vw, 4.242→3.73296rem) —
   mobile untouched here, and the 768–1199.98px blocks below override this rule
   entirely, so the tablet ranges keep their own approved clamps. */
@media (min-width:768px){
  .hero-x__title{font-size:clamp(1.70368rem,4.87872vw,3.73296rem);}
}
.hero-x__dek{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;
  color:var(--ash);max-width:36ch;
  margin-top:clamp(.9rem,1.8vw,1.375rem);
  text-shadow:0 1px 2px rgba(18,12,6,.32);
  text-wrap:pretty;
}
@media (min-width:768px){
  /* Whole content block (eyebrow + stack) is centred as a unit within the hero's
     container: each is a shrink-to-fit box (width:fit-content) with margin-inline:auto,
     so both share the same horizontal centre-line — no left-anchoring, no manual nudge.
     Vertical position (padding-top/padding-bottom below) is unchanged. */
  .hero-x .eyebrow{width:fit-content;margin-inline:auto;text-shadow:0 1px 4px rgba(0,0,0,.18);}
  .hero-x__inner{padding-top:calc(clamp(3.8rem,9.8vh,6.3rem) - 33px);padding-bottom:calc(clamp(.2rem,2.2vh,1.7rem) + 30px);}
  .hero-x__stack{width:fit-content;display:flex;flex-direction:column;align-items:center;margin-inline:auto;}
  .hero-x__title{text-align:center;}
  /* Headline text is centred (see above), so the CTA centres directly under it with no
     manual offset needed — sized ~6% larger (min-height/padding/font-size), desktop only,
     same border/colour/uppercase treatment as .rep__cta, just a touch larger. */
  .hero-x__cta{
    min-height:45px;padding:0 21px;font-size:.72rem;
    margin-top:calc(clamp(1.25rem,2.4vw,1.85rem) + 4px);
  }
}
@media (max-width:767.98px){
  :root{--section-y:clamp(2rem,5.4vw,6rem);--section-y-top:clamp(1.75rem,4.2vw,3rem);}
  /* Content group (eyebrow + stack) is centred as one flex-aligned unit inside the
     real visible viewport. No vh-based padding driving the position, so the balance
     holds across aspect ratios instead of drifting on taller/shorter phones. */
  /* The header is fixed/overlaid — it consumes no document-flow height, so the
     hero must NOT subtract --header-h (doing so left it ~64px short and exposed
     the next section at scroll 0). */
  /* SINGLE SOURCE OF TRUTH for mobile hero height: 100lvh (large viewport).

     Why lvh and not dvh/svh/JS:
     Safari's compact floating bottom bar OVERLAYS the page — the canvas is painted
     edge-to-edge behind it — but the *dynamic* viewport still subtracts that bar's
     inset. So 100dvh resolves SHORTER than the area Safari actually paints, and the
     next (black) section fills the difference behind/around the floating pill. With
     the classic opaque toolbar the painted area really is reduced, so dvh happens to
     match — hence the same build looking right on one iPhone and wrong on another.
     svh is smaller still (chrome fully expanded) and fails in both states.
     lvh is the viewport with all retractable/overlaying chrome discounted: it is the
     upper bound of every height Safari reports (clientHeight, innerHeight,
     visualViewport.height), so the hero can never end above the painted canvas in
     ANY chrome configuration. It is also STATIC — unlike dvh it does not re-resolve
     when the chrome expands or collapses, so there is no reflow or layout shift
     mid-scroll, and no early-value freeze as the old JS snapshot had.
     100vh above is the fallback for engines without lvh — identical semantics
     (vh has always been defined against the large viewport).

     + env(safe-area-inset-bottom): iOS Safari PAINTS the page behind the
     home-indicator strip but excludes that strip from every CSS viewport unit, so
     100lvh alone still ends ~34px above the painted bottom edge — the residual
     black sliver. env() is the UA's own report of that region (0 everywhere it does
     not exist: Android, Chromium, desktop, non-notched devices), so this is a
     measured platform value, not a pixel compensation. It only reports non-zero
     because index.html now sets viewport-fit=cover.
     Three-step cascade: each line is dropped whole by engines that cannot parse it.
     No device queries, no fixed pixel heights, no UA sniffing, no JS. */
  .hero-x{
    min-height:100vh;
    min-height:max(480px,100lvh);
    min-height:max(480px,calc(100lvh + env(safe-area-inset-bottom,0px)));
    align-items:center;padding-bottom:0;
  }
  /* Dedicated portrait hero (1:2) on phones: centre the frame so villa, pool & Peñón all stay in view across phone aspect ratios. */
  .hero-x__img{object-position:50% 50%;}
  /* iOS Safari fix: <picture> defaults to inline, which can leave a hairline
     gap below the image from inline baseline spacing; forcing both the
     wrapper and the image to block removes it. A 2px bottom overlap (vs the
     -48px top/bottom parallax buffer used elsewhere) absorbs any remaining
     subpixel rounding at the Hero's lower edge — both fully clipped by
     .hero-x's own overflow:hidden, so neither affects the visible crop. */
  .hero-x__media{bottom:-50px;}
  .hero-x__media picture{display:block;width:100%;height:100%;}
  .hero-x__img{display:block;}
  .hero-x__scrim{
    background:
      linear-gradient(0deg, rgba(20,14,8,.68) 0%, rgba(20,14,8,.32) 34%, rgba(20,14,8,.09) 64%, rgba(20,14,8,0) 100%),
      linear-gradient(90deg, rgba(20,14,8,.28) 0%, rgba(20,14,8,0) 62%);
  }
  /* Small optical lift off dead-centre (not a device-specific value — scales with svh) to
     match the reference balance: breathing room above the eyebrow, CTA clear of the bottom edge. */
  .hero-x__inner{padding-top:0;padding-bottom:0;padding-inline:calc(var(--gutter) + 8px);text-align:center;transform:translateY(clamp(-16px,-2svh,-6px));}
  .hero-x .eyebrow{font-size:.76rem;font-weight:500;letter-spacing:.25em;display:block;width:fit-content;margin-inline:auto;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.18);}
  .hero-x .eyebrow .eyebrow__sep{display:none;}
  .hero-x .eyebrow .eyebrow__loc{display:block;margin-top:4px;}
  .hero-x__title{max-width:15ch;margin-inline:auto;margin-top:clamp(1.4rem,3.6vw,1.85rem);}
  .hero-x__cta{margin-top:calc(clamp(1.75rem,5vw,2.25rem) + 18px);font-weight:600;}
}

/* Tablet / intermediate layer — between the mobile system and the point where the
   desktop composition genuinely has the width it was tuned for. Desktop's 16ch
   title box plus 5.544vw scaling leaves the headline cramped over too many lines
   at these widths, so the measure follows the actual container and the type gets
   its own clamp. Width-driven only; nothing here is tied to a device. */
@media (min-width:768px) and (max-width:1199.98px){
  .hero-x__title{max-width:min(21ch,88%);font-size:clamp(2.15rem,4.5vw,3.6rem);line-height:1.16;}
}

/* ── Hero · TABLET PORTRAIT ────────────────────────────────────────────────
   Portrait tablets took the ≥768px composition plus the width-driven tablet
   type ramp above, and nothing accounted for the tall canvas. Two consequences,
   both measured: (a) .hero-x's min-height clamp tops out at 1064.8px while the
   content group only reaches 242–293px, and align-items:center then spends the
   whole surplus as sky — 317–339px between nav and eyebrow versus 158–163px on
   the approved phone and desktop compositions; (b) the 4.5vw term renders the
   H1 at 34.6–37.5px on a 768–834px canvas, i.e. phone-sized type (35.2px at
   390px wide) on three times the area.
   Fixed with one width+orientation rule, no device queries: the group is lifted
   by an svh-proportional translate — the same mechanism the phone branch already
   uses — and the type ramp is rebuilt to interpolate between the phone and
   desktop hierarchy. Hero height, image asset, crop, colours, wording, nav and
   the 100lvh phone solution are all untouched. */
@media (min-width:768px) and (max-width:1199.98px) and (orientation:portrait){
  .hero-x__title{font-size:clamp(2.6rem,6.1vw,4rem);}
  .hero-x__inner{transform:translateY(clamp(-150px,-11.5svh,-100px));}
}

/* ── Hero · TABLET PORTRAIT — scale system ────────────────────────────────
   Measured after the positioning pass: the eyebrow (12.48px) and the CTA
   (11.52px / 45px / 197px) rendered at *identical* values on 768, 820, 834 and
   1024 portrait — and identical to desktop at 1440 — because neither has any
   tablet-scaled rule; only the H1 responded to width. That is why the block
   still read as a phone hero dropped into a large canvas.
   One fluid scale for the whole group, width-driven so mini → Air → Pro
   interpolates continuously with no device queries. The H1 cap stays below the
   desktop maximum (4rem = 64px vs desktop 4.242rem = 67.9px) so it gains
   authority without overpowering the architecture, and its max-width stays in
   ch — it grows with the type, so the three-line structure is preserved at all
   four sizes. Eyebrow tracking stays in em, so its character is unchanged.
   translateY, hero height, image crop and object-position are NOT touched: the
   group is centred, so its centre-line stays exactly where it was approved. */
@media (min-width:768px) and (max-width:1199.98px) and (orientation:portrait){
  .hero-x__title{font-size:clamp(3.1rem,7vw,4rem);margin-top:clamp(1.5rem,2.9vw,2.2rem);}
  .hero-x .eyebrow{font-size:clamp(.82rem,1.7vw,1.06rem);}
  .hero-x__cta{
    min-height:clamp(48px,5.8vw,56px);
    padding-inline:clamp(26px,3.4vw,38px);
    font-size:clamp(.78rem,1.5vw,.95rem);
    margin-top:clamp(1.9rem,3.1vw,2.6rem);
  }
}

/* Homepage mobile only — calmer entrance for each chapter: 20px more air between the
   divider (previous section's border-bottom, unmoved) and this section's eyebrow.
   Scoped to the homepage's own section ids/footer class; every other page's .section
   rhythm is untouched, and desktop is untouched (mobile breakpoint only). */
@media (max-width:767.98px){
  #approach,#our-approach,#territory,#process,#transparency,#stories{padding-top:calc(var(--section-y-top) + 40px);}
  .site-footer.site-footer--home .container{padding-top:calc(var(--section-y-top) + 40px);}
  /* Balance the other side of each divider: previous section's bottom padding
     matches the next section's top padding above (same +40px formula), so each
     divider sits visually centred. #territory is excluded — its flush-bottom/
     no-divider pairing with #areas is an intentional merged block, untouched. */
  #approach,#our-approach,#areas,#process,#transparency,#stories{padding-bottom:calc(var(--section-y-top) + 40px);}
  /* "Your Next Step": first card's (Full Representation) whitespace below its
     CTA, down to the .rep__divider, matched to the section's own bottom padding
     above — the equivalent gap below the second card's (Independent Advisory)
     CTA, since that card's own padding-bottom is zeroed (last-child). */
  .rep__col:first-child{padding-bottom:calc(var(--section-y-top) + 40px);}
}

/* Full-bleed media */
.media{
  position:relative;width:100%;height:clamp(405px,68vh,810px);
  border-block:1px solid var(--hairline);overflow:hidden;background:var(--travertine);
}
.media img{width:100%;height:100%;object-fit:cover;}
.media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(30,24,17,.52),rgba(30,24,17,0));pointer-events:none;}
.media__cap{
  position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:22px;
  font-family:var(--mono);font-size:.68rem;line-height:1.55;letter-spacing:.06em;
  color:#E6DCC9;max-width:680px;
}

/* ── Two-column editorial ──────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);}
.split--top{align-items:start;}
@media (min-width:880px){.split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(3rem,6vw,6.5rem);}}

/* ── Grid (evaluation strip / story cards) — reused 3-col hairline grid ──── */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--sand);border:1px solid var(--sand);border-radius:2px;
  margin-top:clamp(3rem,5.5vw,5rem);
}
.section--alt .grid{background:#D2C6B0;border-color:#D2C6B0;}
.cell{background:var(--ivory);padding:clamp(1.75rem,2.8vw,2.6rem);transition:background .3s var(--ease),transform .3s var(--ease);}
.cell:hover{background:#F2ECE0;}
@media (hover:hover){.cell:hover{transform:translateY(-3px);}}
.section--alt .cell{background:var(--travertine);}
.section--alt .cell:hover{background:#EDE3D2;}
.cell__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--clay);}
/* Reserve a two-line headline area so body copy starts at the same vertical position
   across the row, whether a headline runs one or two lines. Absolute calc (not em) so the
   ~1.5%-smaller .h3--fit card reserves the identical height. Multi-column only. */
.cell h3{margin-top:1rem;color:var(--ink);min-height:calc(2.44 * clamp(1.3rem,2.2vw,1.75rem));}
.cell p{margin-top:.75rem;font-size:.98rem;line-height:1.6;color:var(--stone);text-wrap:pretty;}

/* ── The Bigger Picture — connected 4-step process (desktop: spacious 2x2
   editorial grid, numeral inline with heading; mobile: its own single-column
   stack, numeral inline with heading, spacing-only rhythm, no divider lines) ── */
/* The Bigger Picture, mobile only: editorial image + collapsible steps below
   it (closed by default, no reserved height while collapsed). Desktop is
   untouched — the three new wrapper elements collapse via display:contents
   there, so .process-flow renders exactly as it did before, always visible. */
.approach-editorial-img{display:none;}
.approach-editorial-img--desktop{display:none;}
.approach-explore__toggle{display:none;}
.approach-topic-toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;display:block;width:100%;cursor:pointer;}
@media (max-width:767.98px){
  .approach-editorial-img{display:block;margin:clamp(2rem,7vw,2.75rem) calc(var(--gutter) * -1) 0;}
  .approach-editorial-img img{display:block;width:100%;height:clamp(300px,100vw,390px);object-fit:cover;object-position:60% 55%;}
  .approach-explore{margin-top:2rem;}
  .approach-explore__toggle{
    display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
    background:none;border:none;padding:0;cursor:pointer;text-align:center;
    font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(255,255,255,.80);
  }
  .approach-explore__icon{position:relative;flex:none;width:.7em;height:.7em;}
  .approach-explore__icon::before,.approach-explore__icon::after{content:"";position:absolute;background:rgba(255,255,255,.80);}
  .approach-explore__icon::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
  .approach-explore__icon::after{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);transition:opacity .25s var(--ease);}
  .approach-explore__toggle[aria-expanded="true"] .approach-explore__icon::after,
  .approach-topic-toggle[aria-expanded="true"] .approach-explore__icon::after{opacity:0;}
  .approach-explore__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
  .approach-explore__panel[data-open="true"]{grid-template-rows:1fr;}
  .approach-explore__panel-in{overflow:hidden;min-height:0;}
  /* Editorial nav treatment for the four topics: no divider lines, whitespace-
     only rhythm, left-aligned to match Explore's own left edge, smaller/lighter
     type and +/- than the main Explore control so they read as subordinate. */
  .approach-explore .process-flow{margin-top:1.875rem;max-width:18rem;margin-inline:auto;}
  .approach-explore .process-flow__step{padding-block:0;}
  /* Labels centred, icons on ONE shared axis: a fixed label track (--acc-track,
     sized from the longest measured label in the group and capped by the button at
     narrow widths) plus the icon track, centred as a pair — so the icon X never
     moves with label length. Full-width click area kept. */
  .approach-topic-toggle{--acc-track:14.25rem;display:grid;grid-template-columns:minmax(0,min(var(--acc-track),100% - 2.25rem)) auto;justify-content:center;align-items:start;gap:.5rem;padding:.56rem 0;font-size:.74em;text-align:center;width:100%;}
  /* EN labels run ~32px shorter than ES/DE, so the shared axis is measured per
     language — otherwise EN sits with dead space its own longest label never uses. */
  html[lang="en"] .approach-topic-toggle{--acc-track:12.5rem;}
  /* Optical, not mathematical: geometric centring left the + ~1.7px below the
     cap-height centre. .37em first-line centre − .11em optical lift. */
  .approach-topic-toggle .approach-explore__icon{width:.48em;height:.48em;margin-top:.26em;}
  .approach-topic-toggle .approach-explore__icon::before,
  .approach-topic-toggle .approach-explore__icon::after{background:rgba(255,255,255,.65);}
  .approach-topic-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);}
  .approach-topic-panel[data-open="true"]{grid-template-rows:1fr;}
  .approach-topic-panel-in{overflow:hidden;min-height:0;}
  .approach-topic-panel-in p{padding-bottom:.64rem;margin-left:0;}
}
@media (min-width:768px){
  /* Desktop editorial image — dedicated landscape photograph, large but not full-bleed */
  .approach-editorial-img--desktop{display:block;width:72%;margin:clamp(2.5rem,4.3vw,3.75rem) auto 0;}
  .approach-editorial-img--desktop img{display:block;width:100%;height:auto;}

  /* Explore trigger — centred compact label+icon unit, same refined language as Mobile */
  .approach-explore{margin-top:clamp(2.75rem,4.5vw,3.75rem);text-align:center;}
  .approach-explore__toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:auto;
    background:none;border:none;padding:0;cursor:pointer;text-align:center;
    font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(255,255,255,.80);
  }
  .approach-explore__toggle .approach-explore__icon{position:relative;flex:none;width:.7em;height:.7em;display:block;}
  .approach-explore__toggle .approach-explore__icon::before,
  .approach-explore__toggle .approach-explore__icon::after{content:"";position:absolute;background:rgba(255,255,255,.80);}
  .approach-explore__toggle .approach-explore__icon::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
  .approach-explore__toggle .approach-explore__icon::after{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);transition:opacity .25s var(--ease);}
  .approach-explore__toggle[aria-expanded="true"] .approach-explore__icon::after{opacity:0;}
  .approach-explore__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);}
  .approach-explore__panel[data-open="true"]{grid-template-rows:1fr;}
  .approach-explore__panel-in{overflow:hidden;min-height:0;}

  /* Horizontal topic nav replacing the always-open 2-col grid; all four
     explanations stack in one shared cell (row2) so the row auto-sizes to the
     tallest paragraph and switching topics never shifts the layout. */
  .process-flow__step{display:contents;}
  #approach .approach-explore .process-flow{
    display:grid;grid-template-columns:repeat(4,auto);justify-content:center;
    column-gap:clamp(1.25rem,2.4vw,3.5rem);row-gap:clamp(2.25rem,3.6vw,3rem);
    max-width:none;width:auto;margin:clamp(1.75rem,3vw,2.5rem) auto 0;
  }
  .process-flow__step:nth-child(1) h3{grid-column:1;grid-row:1;}
  .process-flow__step:nth-child(2) h3{grid-column:2;grid-row:1;}
  .process-flow__step:nth-child(3) h3{grid-column:3;grid-row:1;}
  .process-flow__step:nth-child(4) h3{grid-column:4;grid-row:1;}
  .process-flow__step .approach-topic-panel{grid-column:1/-1;grid-row:2;}
  .approach-topic-toggle{cursor:pointer;padding:.5rem 0;}
  .approach-topic-toggle .approach-explore__icon{display:none;}
  #approach .approach-explore .process-flow h3{
    font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
    color:rgba(255,255,255,.45);transition:color .3s var(--ease);white-space:nowrap;
  }
  #approach .process-flow__step:has(.approach-topic-toggle[aria-expanded="true"]) h3{color:#FFFFFF;}
  .approach-topic-panel{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease);}
  .approach-topic-panel[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;}
  .approach-topic-panel-in{max-width:27em;margin-inline:auto;text-align:center;}
  .approach-topic-panel-in p{margin:0;}
}
.process-flow{
  list-style:none;margin:0 auto;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(3rem,5vw,5rem);row-gap:clamp(2.5rem,4vw,3.5rem);
  margin-top:clamp(3rem,5.5vw,5rem);
  width:100%;max-width:100%;
}
@media (min-width:768px){
  #approach .process-flow{max-width:84%;column-gap:clamp(2.5rem,4.2vw,4.25rem);}
}
.process-flow h3{color:var(--ink);}
.process-flow__step p{margin-top:.6rem;font-size:.98rem;line-height:1.6;color:var(--stone);text-wrap:pretty;}
@media (max-width:767.98px){
  .process-flow{
    display:block;text-align:center;
    margin-top:clamp(2.75rem,8vw,4rem);
  }
  .process-flow__step{padding-block:clamp(1.1rem,4vw,1.5rem);}
  .process-flow__step:first-child{padding-top:0;}
}

/* ── "The Bigger Picture" — black/white colour DNA trial (#approach only;
   .section--alt itself, shared with #our-approach, is untouched). Eyebrow
   keeps its existing warm accent colour on purpose. */
#approach{background:#111111;color:#FFFFFF;border-bottom-color:rgba(255,255,255,.15);}
/* Before You Sign — black/white colour DNA (#process only), same exact black/white
   as #approach. Cards (desktop) and accordion (mobile) share one override set. */
#process{background:#111111 url("assets/process-mobile.png") center/cover no-repeat;color:#FFFFFF;border-bottom-color:rgba(255,255,255,.15);}
/* WebP where supported (20KB vs 980KB); the PNG rule above stays as the fallback. */
#process{background-image:image-set(url("assets/process-mobile.webp") type("image/webp"),url("assets/process-mobile.png") type("image/png"));}
@media (min-width:768px){
  #process{background-image:url("assets/process-desktop.png");}
  #process{background-image:image-set(url("assets/process-desktop.webp") type("image/webp"),url("assets/process-desktop.png") type("image/png"));}
}
#process .eyebrow{color:#FFFFFF;}
#process .lead{color:rgba(255,255,255,.80);}
#process .questions{border-top-color:#FFFFFF;}
#process .questions__item,
#process .questions__item:hover{border-color:#FFFFFF;}
#process .questions__k{color:#FFFFFF;}
#process .questions__q{color:#FFFFFF;}
#process .questions__hint{color:rgba(255,255,255,.80);}
@media (max-width:767.98px){
  /* Mobile-only: guards against a sub-pixel compositing seam at the Hero→#approach
     boundary (the Hero's parallax layer can round to a hair off full-bleed on
     iOS Safari) by having the black section overlap the join by exactly 1px. */
  #approach{position:relative;z-index:1;margin-top:-1px;border-top:0;}
}
#approach .eyebrow{color:#FFFFFF;}
#approach .process-flow h3{color:#FFFFFF;}
#approach .process-flow__step p,
#approach .lead{color:rgba(255,255,255,.80);}

/* ── Areas — single-focus peek carousel ─────────────────────────────────── */
.area-explorer__nav{display:flex;justify-content:center;}
.area-explorer__name{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.75rem);color:var(--ink);line-height:1.22;}
.area-explorer__media-wrap{position:relative;padding-inline:var(--gutter);}
.area-explorer__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid var(--hairline);background:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1rem;color:var(--ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.area-explorer__arrow--prev{left:max(0px, calc(var(--gutter) * 0.64 + 18% - 52px));}
.area-explorer__arrow--next{right:max(0px, calc(var(--gutter) * 0.64 + 18% - 52px));}
.area-explorer__arrow:hover{border-color:var(--clay);color:var(--clay);background:rgba(168,105,74,.06);}
#areas .area-explorer__arrow{border-color:rgba(34,28,21,.18);}
#areas .area-explorer__arrow:hover{border-color:var(--ink);color:var(--ink);background:rgba(34,28,21,.05);}
@media (max-width:767.98px){
  .area-explorer__arrow{width:28px;height:28px;font-size:.85rem;}
  .area-explorer__arrow--prev{left:max(0px, calc(var(--gutter) * 0.87 + 6.5% - 44px));}
  .area-explorer__arrow--next{right:max(0px, calc(var(--gutter) * 0.87 + 6.5% - 44px));}
  /* Visual size stays minimal; the actual tap target quietly grows to ~44px via an
     invisible expanded hit area, so nothing looks bigger but everything is easier to hit. */
  .area-explorer__arrow::after{content:"";position:absolute;inset:-8px;}
  .area-explorer__dots button{position:relative;}
  .area-explorer__dots button::after{content:"";position:absolute;inset:-18.5px;}
}
.area-explorer__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-top:clamp(.75rem,1.5vw,1.25rem);
}
.area-explorer__track::-webkit-scrollbar{display:none;}
.area-explorer__slide{flex:0 0 100%;scroll-snap-align:center;opacity:.35;transition:opacity .5s var(--ease);}
.area-explorer__slide.is-active{opacity:1;}
.area-explorer__media{
  position:relative;aspect-ratio:4/3;border-radius:clamp(10px,1.4vw,18px);overflow:hidden;border:1px solid var(--hairline);
  background:repeating-linear-gradient(45deg,rgba(34,28,21,.03) 0 1px,transparent 1px 22px),linear-gradient(160deg,#E8DDC9,#D6CBB4);
  max-width:87%;margin-inline:auto;
}
@media (min-width:768px){
  .area-explorer__media{max-width:64%;aspect-ratio:3/2;}
}
.area-explorer__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.area-explorer__body{margin-top:clamp(1.5rem,2.8vw,2rem);}
.area-explorer__desc{font-family:var(--serif);font-weight:300;font-size:clamp(1.08rem,1.5vw,1.36rem);line-height:1.62;color:var(--ink);max-width:42ch;text-wrap:pretty;text-align:center;margin-inline:auto;}
.area-explorer__keyfacts{margin-top:clamp(1.25rem,2.2vw,1.75rem);border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,3vw,2.5rem);}
.area-explorer__keyfacts>div{display:flex;flex-direction:column;gap:.25rem;padding:clamp(.65rem,1.2vw,.85rem) 0;border-bottom:1px solid var(--hairline);}
.area-explorer__keyfacts dt{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);}
.area-explorer__keyfacts dd{font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.5;color:var(--stone);text-wrap:pretty;}
.area-explorer__explore{margin-top:clamp(1.5rem,2.6vw,2rem);border-top:1px solid var(--hairline);}
.area-explorer__explore summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;
  padding-block:clamp(1rem,1.8vw,1.3rem);font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);
}
#areas .area-explorer__explore summary{color:var(--ink);}
.area-explorer__explore summary::-webkit-details-marker{display:none;}
.area-explorer__explore summary .arrow{transition:transform .3s var(--ease);}
.area-explorer__explore[open] summary .arrow{transform:rotate(90deg);}
.area-explorer__more{padding-bottom:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;gap:clamp(1.25rem,2.2vw,1.75rem);animation:lr-fade .4s var(--ease) both;}
.area-explorer__more>p{font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7;color:var(--stone);max-width:60ch;text-wrap:pretty;}
.area-explorer__more dl{border-top:1px solid var(--hairline);}
.area-explorer__more dl>div{display:grid;grid-template-columns:1fr;gap:.35rem;padding:clamp(.85rem,1.5vw,1.05rem) 0;border-bottom:1px solid var(--hairline);}
@media (min-width:520px){.area-explorer__more dl>div{grid-template-columns:minmax(0,8.5rem) 1fr;gap:1.25rem;align-items:baseline;}}
.area-explorer__more dt{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);}
.area-explorer__more dd{font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.5;color:var(--ink);text-wrap:pretty;}
.area-explorer__more > dl > div:last-child dd{font-style:italic;}
.area-explorer__practical .area-explorer__keyfacts{margin-top:0;border-top:none;}
@media (min-width:768px){
  .area-explorer__explore summary{cursor:default;pointer-events:none;}
  .area-explorer__explore summary .arrow{display:none;}
}
.area-explorer__dots{display:flex;justify-content:center;gap:.6rem;margin-top:clamp(1.5rem,2.6vw,2rem);}
.area-explorer__dots button{width:7px;height:7px;border-radius:50%;border:none;padding:0;background:var(--sand);cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);}
.area-explorer__dots button.is-active{background:var(--clay);transform:scale(1.35);}
@media (max-width:520px){
  .area-explorer__nav{gap:1rem;}
  .area-explorer__heading{min-width:8rem;}
}
@keyframes lr-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.label{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-bottom:1.5rem;}
#areas .label{color:var(--ink);}
#areas .area-explorer__keyfacts,
#areas .area-explorer__keyfacts>div,
#areas .area-explorer__explore,
#areas .area-explorer__more dl,
#areas .area-explorer__more dl>div{border-color:rgba(34,28,21,.12);}
#areas .area-explorer__dots button{background:rgba(34,28,21,.16);}
#areas .area-explorer__dots button.is-active{background:var(--ink);}

/* ── Before You Sign — six questions a serious buyer should have answered
   (mobile: single-column stack, centered, top rules only; desktop ≥768px:
   3x2 ledger grid, hairline rules between cells, left-aligned) ── */
/* Before You Sign mobile — "one question at a time" stage (absolutely stacked,
   cross-fading, escapes the li via position so it never scrolls) over a native
   horizontally-scrolling topic strip (full-bleed peek, no snap — swipe only
   explores; tap selects). Two independent layers so the active question/hint
   never move during a swipe: .questions__stage (static, absolute-stacked
   crossfade) and .questions__nav-row (the only scrollable part). Desktop's
   own @media block below makes the two new wrappers display:contents, so its
   existing grid sees straight through to .questions__panel/__item exactly as
   before — desktop markup/CSS output is otherwise untouched. */
.questions{position:relative;margin:clamp(4rem,15vw,5.5rem) 0 0;}
.questions__stage{position:relative;min-height:clamp(12.5rem,48vw,14rem);padding:0 var(--gutter);}
.questions__panel{
  position:absolute;top:0;left:var(--gutter);right:var(--gutter);text-align:center;
  display:block;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.questions__panel[data-open="true"]{opacity:1;pointer-events:auto;}
.questions__panel-in{overflow:visible;}
.questions__q{margin:0 auto;font-style:normal;font-weight:300;font-size:clamp(1.35rem,7.2vw,1.6rem);line-height:1.3;max-width:23ch;text-wrap:pretty;}
.questions__hint{margin:.75rem auto 0;font-family:var(--serif);font-weight:300;font-size:clamp(1.08rem,1.5vw,1.36rem);line-height:1.62;max-width:28ch;text-wrap:pretty;}

/* Mobile nav-row (the desktop-style always-visible strip) is replaced below by
   .questions__carousel — a true one-state-at-a-time carousel matching
   .area-explorer's principle (fixed arrows, single centred slot, swipe/arrow
   both step exactly one state, looping — same as .area-explorer's modulo wrap,
   never a free-scroll strip). Desktop's own block re-enables this row. */
.questions__nav-row{display:none;}
.questions__carousel{
  margin:clamp(1.75rem,5vw,2.25rem) calc(var(--gutter) * -1) 0;
  padding:0 51px;display:flex;align-items:center;gap:.75rem;
}
.questions__topic-slot{position:relative;flex:1;height:28px;}
.questions__mobile-label{
  position:absolute;top:0;left:50%;transform:translateX(-50%);height:28px;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;font-family:var(--mono);font-weight:400;font-size:.74rem;letter-spacing:.1em;color:#FFFFFF;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.questions__mobile-label[data-open="true"]{opacity:1;}
.questions__strip{
  flex:1;min-width:0;display:flex;gap:clamp(1.1rem,4.4vw,1.5rem);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.questions__strip::-webkit-scrollbar{display:none;}
.questions__item{text-align:center;flex:0 0 auto;scroll-snap-align:start;}
.questions__k{
  display:block;width:auto;margin:0;padding:.9rem .1rem;
  background:none;border:none;color:#FFFFFF;cursor:pointer;
  font-family:var(--mono);font-weight:400;font-size:.74rem;letter-spacing:.1em;
}
.questions__item[data-open="true"] .questions__k{font-weight:500;}
.questions__label{display:block;white-space:nowrap;}

/* Arrows reuse the "Finding Your Place" (.area-explorer__arrow) circular
   language 1:1 — same size/radius/weight/hit-area trick — recoloured for this
   section's existing dark-mode tokens (#FFFFFF / rgba(255,255,255,.80)) only. */
.questions__arrow{
  position:relative;flex:none;width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.80);background:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:.85rem;color:rgba(255,255,255,.80);
  transition:opacity .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.questions__arrow::after{content:"";position:absolute;inset:-8px;}
.questions__arrow:hover{border-color:#FFFFFF;color:#FFFFFF;}
.questions__arrow:disabled{opacity:.35;cursor:default;}
/* Mobile stage sizing — one shared rule for every locale (was ES-only).
   Root cause: .questions__stage's height came solely from its min-height, because
   every .questions__panel is position:absolute and therefore out of flow — the box
   is blind to its own content. Longer localised questions/hints (ES, DE, PL) exceed
   that floor and run into .questions__carousel below. Remedy is the one the desktop
   block already relies on: stack the panels in a single grid cell so they stay in
   flow and the stage measures the TALLEST panel, with the existing min-height kept
   as a floor so shorter slides gain no blank space. Crossfade, typography, gutters,
   arrows and all copy are untouched; desktop is unaffected (media-query scoped). */
@media (max-width:767.98px){
  .questions__stage{display:grid;}
  .questions__panel{position:relative;top:auto;left:auto;right:auto;grid-area:1/1;}
}
@media (min-width:768px){
  /* Before You Sign desktop — "one question at a time": a shared stage (all six
     panels stacked in the same grid cell, cross-fading) over a slim editorial
     index row. Typography reuses the site's own serif/mono/body scale only —
     question size sits strictly between .lead and #process-h; nav distinguishes
     active/inactive by weight (400/500), never a new colour or opacity tier. */
  .questions__stage,.questions__nav-row,.questions__strip{display:contents;}
  .questions__carousel{display:none;}
  .questions{
    position:static;overflow:visible;
    display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;
    column-gap:clamp(.375rem,1vw,1.25rem);row-gap:clamp(3.5rem,5.5vw,4.5rem);
    margin:clamp(5.5rem,9vw,8rem) 0 0;padding:0;border-top:none;
    max-width:100%;
  }
  .questions__item{display:contents;}
  .questions__item:nth-child(1) .questions__k{grid-column:1;}
  .questions__item:nth-child(2) .questions__k{grid-column:2;}
  .questions__item:nth-child(3) .questions__k{grid-column:3;}
  .questions__item:nth-child(4) .questions__k{grid-column:4;}
  .questions__item:nth-child(5) .questions__k{grid-column:5;}
  .questions__item:nth-child(6) .questions__k{grid-column:6;}
  .questions__k{
    grid-row:2;width:auto;
    display:block;
    min-height:0;margin:0;padding:0;
    background:none;border:none;cursor:pointer;
    color:#FFFFFF;font-weight:400;
  }
  .questions__k:hover,.questions__k:focus-visible{font-weight:500;}
  .questions__item[data-open="true"] .questions__k{font-weight:500;}
  .questions__label{
    font-family:var(--mono);font-weight:inherit;font-size:clamp(.46rem,.9vw,.66rem);letter-spacing:.015em;
    line-height:1.35;text-align:center;white-space:nowrap;text-transform:uppercase;
  }
  .questions__plus{display:none;}
  .questions__panel{
    position:static;inset:auto;
    grid-row:1;grid-column:1/-1;justify-self:center;width:100%;max-width:34rem;
    display:block;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  }
  .questions__panel[data-open="true"]{opacity:1;pointer-events:auto;}
  .questions__panel-in{overflow:visible;}
  .questions__q{
    margin-left:auto;margin-right:auto;margin-top:0;
    font-style:normal;font-weight:300;font-size:clamp(1.3rem,2.1vw,2.25rem);line-height:1.32;max-width:32ch;
  }
  .questions__hint{
    margin-left:auto;margin-right:auto;margin-bottom:0;margin-top:.9rem;
    font-family:var(--serif);font-weight:300;font-size:clamp(1.08rem,1.5vw,1.36rem);line-height:1.62;color:var(--stone);max-width:34ch;
  }
}

/* ── Choose your level of representation — two premium entry points, not a pricing
   table. Reading order per card: quiet label → hero statement (the visual focal
   point, largest serif in the card) → supporting description → compensation →
   CTA. Mobile (default): single column, centered, stacked, 1px horizontal divider
   between the two options. Desktop ≥768px: 1fr/1px/1fr grid, left-aligned, the
   divider becomes a full-height vertical hairline in the gap. ── */
.rep{display:grid;grid-template-columns:1fr;margin-top:clamp(3rem,7vw,4.25rem);text-align:center;}
.rep__col{padding-top:clamp(1.9rem,5.25vw,2.25rem);padding-bottom:clamp(1.5rem,4.5vw,1.9rem);}
.rep__col:first-child{padding-top:0;}
.rep__col:last-child{padding-bottom:0;}
.rep__divider{height:1px;background:var(--hairline);}
.rep__title{font-family:var(--mono);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);}
.rep__hero{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.22;
  color:var(--ink);margin-top:clamp(1rem,2vw,1.3rem);text-wrap:balance;
}
.rep__desc{margin-top:clamp(1rem,2vw,1.4rem);font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.65;color:var(--stone);text-wrap:balance;}
.rep__row{margin-top:clamp(1.1rem,2vw,1.4rem);padding-top:clamp(1rem,1.6vw,1.15rem);border-top:1px solid var(--hairline);}
.rep__k{font-family:var(--mono);font-weight:600;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:var(--slate);}
.rep__v{margin-top:.65rem;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6;color:var(--ink);text-wrap:pretty;}
.rep__cta{margin-top:clamp(1.75rem,4vw,2.15rem);padding:0 20px;min-height:42px;font-size:.68rem;font-weight:600;letter-spacing:.12em;border-width:1.5px;}
.rep .btn--on-light{border-color:rgba(34,28,21,.5);}
/* ── "Your Next Step" — mobile-only editorial redesign. Desktop (≥768px, below)
   keeps its approved two-column subgrid and palette untouched. On mobile the
   "Compensation" labels and internal hairlines give way to typography + white
   space: Full Representation reads as the primary path, and the developer-paid
   statement becomes the section's commercial moment. */
.rep__v--mobile{display:none;}
@media (max-width:767.98px){
  #transparency{background:#FFFFFF;}
  #transparency .eyebrow{color:var(--ink);}
  .rep{margin-top:clamp(2.5rem,8vw,3.25rem);}
  .rep__title{color:var(--ink);font-weight:500;font-size:.8rem;letter-spacing:.18em;}
  .rep__hero{margin-top:clamp(1.1rem,4vw,1.4rem);font-size:clamp(1.42rem,5.6vw,1.68rem);line-height:1.24;}
  .rep__desc{margin-top:clamp(.85rem,3.2vw,1.1rem);font-size:1rem;line-height:1.66;color:rgba(34,28,21,.7);max-width:23rem;margin-inline:auto;}
  .rep__row{margin-top:clamp(2rem,7vw,2.6rem);padding-top:0;border-top:none;}
  .rep__k{display:none;}
  .rep__v--desktop{display:none;}
  .rep__v--mobile{
    display:block;margin-top:0;font-size:1rem;line-height:1.66;font-weight:500;color:var(--ink);
    max-width:20rem;margin-inline:auto;text-wrap:balance;
  }
  .rep__cta{margin-top:clamp(1.9rem,6.4vw,2.35rem);}
  /* Primary/secondary CTA step uses two real Hanken Grotesk faces (600/500) —
     no 700 face is loaded, so 700 would render as synthetic bold. */
  .rep__col:last-child .rep__cta{font-weight:500;}
  .rep__divider{background:rgba(34,28,21,.1);}
  /* Secondary path — identical typographic system, quieter only through order,
     placement and surrounding space. */
  .rep__col:last-child{padding-top:clamp(2.5rem,9vw,3.25rem);}
  .rep__col:last-child .rep__row{margin-top:clamp(1.5rem,5.4vw,1.9rem);}
  .rep__col:last-child .rep__v{font-size:1rem;line-height:1.66;font-weight:500;color:var(--ink);max-width:21rem;margin-inline:auto;}
  .rep__col:last-child .rep__cta{margin-top:clamp(1.6rem,5.6vw,2rem);}
}
/* ── "Your Next Step" — TABLET & DESKTOP (≥768px). The approved ≤767.98px
   mobile section is the source of truth and is untouched; everything below is
   that same composition given more space: centred eyebrow, centred two-line H1,
   centred label → serif statement → body → commercial line → outline CTA, one
   shared type scale for both services, black/white only, no cards, panels,
   icons or shadows. Three ranges: 768–899.98px keeps the mobile stack (with its
   hairline) at a wider measure, 900–1199.98px opens to two equal columns, and
   ≥1200px is the final centred 50/50 composition. Two selectors are id-boosted
   (#transparency #transparency-h, > p.eyebrow) purely to out-specify the later
   shared heading-system rules without reordering that locked block. */
@media (min-width:768px){
  /* Pure white reset after the dark "Before You Sign". */
  #transparency{background:#FFFFFF;}

  /* Centred intro — the same section language as every other major LARECO
     section. Only alignment and colour are set here: font-size, scale factor
     and the locked heading system are untouched; transform-origin stays top
     center so the scale anchors to the centred axis. */
  #transparency > .container > p.eyebrow{margin-inline:auto;text-align:center;color:#000000;}
  #transparency #transparency-h{margin-inline:auto;text-align:center;transform-origin:top center;color:#000000;}
  /* Narrow measure so the headline composes onto two balanced lines
     ("Choose your level" / "of representation") instead of running the width of
     the page. Measured: the first line is 12.84ch, "… level of" 14.72ch, so
     13.5ch is the break point. !important only because the h2 carries an inline
     max-width in the markup, which is not modified. */
  #transparency #transparency-h{max-width:13.5ch !important;}

  /* The approved mobile commercial line ("Paid by the developer. / No
     additional cost to you.") now runs at every breakpoint — the long desktop
     sentence in the markup is simply not shown. No copy was rewritten. */
  #transparency .rep__v--desktop{display:none;}
  #transparency .rep__v--mobile{display:block;}

  /* One centred composition, centred inside itself. */
  .rep{
    grid-template-rows:auto;align-items:start;
    margin-inline:auto;text-align:center;margin-top:clamp(2.65rem,4.4vw,3.95rem);
  }
  .rep__col{display:block;padding-block:0;}

  /* Both services share one type system — same label, same serif scale, same
     body and commercial scale. Hierarchy comes from order and content only. */
  .rep__title{
    font-family:var(--mono);font-weight:600;font-size:.76rem;
    letter-spacing:.2em;text-transform:uppercase;color:#000000;
  }
  .rep__hero{
    color:#000000;text-wrap:balance;margin-inline:auto;
    margin-top:clamp(.9rem,1.4vw,1.15rem);
    font-size:clamp(1.5rem,2.35vw,2.05rem);line-height:1.18;max-width:17ch;
  }
  .rep__desc{
    color:#000000;line-height:1.68;text-wrap:balance;margin-inline:auto;
    margin-top:clamp(1.35rem,2.1vw,1.75rem);font-size:1rem;max-width:32ch;
  }
  /* COMPENSATION label and its rule-line stay gone (as on mobile). */
  .rep__row{margin-top:clamp(1.6rem,2.5vw,2.15rem);padding-top:0;border-top:none;}
  .rep__k{display:none;}
  .rep__v{
    margin-top:0;margin-inline:auto;color:#000000;line-height:1.62;
    text-wrap:balance;font-size:1rem;font-weight:500;max-width:28ch;
  }

  /* CTAs — one component family: same height, same border, same type, same
     width, same invert on hover. No fill block, no shadow, no lift.
     Destinations and hooks (data-consult-open / data-advisory-open) untouched. */
  #transparency .rep__cta{
    margin-top:clamp(2.15rem,3.1vw,2.75rem);justify-self:center;align-self:start;
    min-height:44px;min-width:13.5rem;padding:0 26px;
    font-size:.7rem;font-weight:600;letter-spacing:.14em;
    border-width:1.5px;text-transform:uppercase;
    background:#FFFFFF;color:#000000;border-color:#000000;
  }
  #transparency .rep__cta:hover{
    background:#000000;color:#FFFFFF;border-color:#000000;transform:none;box-shadow:none;
  }
  #transparency .rep__cta:focus-visible{outline:2px solid #000000;outline-offset:3px;}
}

/* Tablet portrait (iPad) — the mobile stack at a tablet measure rather than a
   squeezed desktop grid: one centred column, the same hairline separation the
   mobile version uses between the two services. */
@media (min-width:768px) and (max-width:899.98px){
  .rep{grid-template-columns:minmax(0,1fr);max-width:34rem;}
  .rep__divider{display:block;background:rgba(0,0,0,.1);}
  .rep__col:first-child{padding-bottom:clamp(2.25rem,4.2vw,2.75rem);}
  .rep__col:last-child{padding-top:clamp(2.25rem,4.2vw,2.75rem);}
  .rep__hero{font-size:clamp(1.5rem,3.4vw,1.75rem);max-width:20ch;}
  .rep__desc{max-width:34ch;}
  .rep__v{max-width:30ch;}
}

/* Tablet landscape / small desktop — two equal columns, tighter measures. */
@media (min-width:900px) and (max-width:1199.98px){
  .rep{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,4.5vw,4rem);max-width:min(100%,860px);
  }
  .rep__divider{display:none;}
  .rep__hero{max-width:20ch;}
  .rep__desc{max-width:29ch;}
  .rep__v{max-width:26ch;}
}

/* Shared horizontal content levels. The five levels (label, statement, body,
   commercial line, CTA) are rows of the .rep grid, and each column adopts them
   with grid-template-rows:subgrid — so every row takes the height of whichever
   side needs more, and corresponding levels start on exactly the same Y-axis in
   both columns. No per-column margin hacks, no visible lines. Browsers without
   subgrid fall back to each column spanning all five rows with its own auto
   rows, i.e. the previous natural-flow behaviour. */
@media (min-width:900px){
  .rep{grid-template-rows:repeat(5,auto);row-gap:0;}
  .rep__col{display:grid;grid-template-rows:subgrid;grid-row:span 5;}
}

/* Desktop — the final centred 50/50 composition. The extra width goes to the
   serif statements only (≈22ch → two editorial lines each); body copy and the
   commercial line stay on deliberately narrower measures. */
@media (min-width:1200px){
  .rep{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:5rem;max-width:1000px;
  }
  .rep__divider{display:none;}
  .rep__hero{font-size:2.18rem;line-height:1.16;max-width:21ch;}
  .rep__desc{font-size:1rem;line-height:1.68;max-width:29ch;}
  .rep__v{font-size:1.05rem;max-width:26ch;}
}


/* ── Client stories — single-quote carousel ─────────────────────────────── */
.testimonial{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(.3rem,.7vw,.45rem);margin-top:clamp(3rem,5.5vw,5rem);}
.testimonial__track{flex:1;max-width:43rem;display:grid;align-items:center;overflow:hidden;}
.testimonial__slide{grid-area:1/1;text-align:center;opacity:0;pointer-events:none;transform:translateX(0);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.testimonial__slide.no-transition{transition:none;}
.testimonial__slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0);}
.testimonial__slide.enter-fwd{opacity:0;transform:translateX(2rem);}
.testimonial__slide.enter-back{opacity:0;transform:translateX(-2rem);}
.testimonial__slide.leave-fwd{opacity:0;transform:translateX(-2rem);}
.testimonial__slide.leave-back{opacity:0;transform:translateX(2rem);}
.testimonial__tag{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);opacity:.7;}
.testimonial__slide blockquote{margin-top:1.75rem;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.33rem,2.85vw,2.09rem);line-height:1.32;color:var(--ink);max-width:47ch;margin-inline:auto;text-wrap:balance;}
.testimonial__slide figcaption{margin-top:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--slate);}
.testimonial__arrow{
  flex:none;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--hairline);
  background:none;cursor:pointer;font-family:var(--serif);font-size:1.1rem;color:var(--slate);
  opacity:.55;transition:opacity .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.testimonial:hover .testimonial__arrow{opacity:1;}
.testimonial__arrow:hover{border-color:var(--clay);color:var(--clay);}
.testimonial__dots{display:flex;justify-content:center;gap:.6rem;margin-top:clamp(2rem,3.5vw,2.75rem);}
.testimonial__dots button{width:7px;height:7px;border-radius:50%;border:none;padding:0;background:var(--sand);cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);}
.testimonial__dots button.is-active{background:var(--clay);transform:scale(1.35);}
@media (max-width:700px){
  .testimonial{gap:.55rem;}
  .testimonial__arrow{width:2.25rem;height:2.25rem;font-size:.95rem;}
  .testimonial__track{align-items:start;transform:translateY(-20px);}
}
@media (min-width:700.02px){
  /* Desktop: same fix as mobile — start-align so every testimonial's name/
     location/date begins at the same position (previously centred, which
     let shorter quotes like Laura Méndez Pérez sit lower), then nudge the
     whole block 18px closer to the heading. */
  .testimonial__track{align-items:start;transform:translateY(-18px);}
}
/* ── "What Our Clients Say" — mobile-only migration into the black/white DNA:
   pure white surface, clay removed, a compact client-identity unit, a calmer
   quote size, and monochrome arrows/dots. Desktop is untouched. ── */
/* Editorial opening for the mobile testimonial section: the wrapper collapses to
   display:contents on desktop, so the eyebrow + H1 flow exactly as before and the
   photograph never appears there. */
.stories-head,.stories-head__text{display:contents;}
.stories-head__img{display:none;}
@media (max-width:767.98px){
  #stories{background:#FFFFFF;border-bottom:none;padding-top:0;overflow-x:clip;}
  #stories .eyebrow{color:var(--ink);}
  .stories-head{display:block;position:relative;}
  .stories-head__img{
    display:block;margin:0 calc(var(--gutter) * -1);
    /* Long, progressive dissolve into the pure-white section below — begins while
       the table is still fully visible, keeps the keys (~82%) legible, and reaches
       full transparency exactly at the image edge so there is no visible ending. */
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.68) 82%,rgba(0,0,0,.36) 91%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.68) 82%,rgba(0,0,0,.36) 91%,rgba(0,0,0,0) 100%);
  }
  .stories-head__img img{display:block;width:100%;height:auto;}
  .stories-head__text{
    display:block;position:absolute;top:clamp(3rem,11vw,4rem);left:0;right:0;
    padding-inline:var(--gutter);
  }
  /* Arrows flank the quote at the outer edges instead of crowding it. */
  .testimonial{margin-top:clamp(1.75rem,6.5vw,2.5rem);margin-inline:calc(var(--gutter) * -1);padding-inline:.75rem;gap:0;justify-content:space-between;}
  /* Arrows stay pinned to the outer edges; the quote keeps its own clearance
     from the rings instead of filling the track edge-to-edge. */
  .testimonial__track{padding-inline:clamp(.85rem,4vw,1.4rem);}
  .testimonial__tag{font-size:.72rem;font-weight:500;color:var(--ink);opacity:1;}
  .testimonial__slide figcaption{margin-top:.28rem;font-size:.68rem;color:rgba(34,28,21,.55);}
  .testimonial__slide blockquote{margin-top:2rem;font-size:1.24rem;line-height:1.4;}
  .testimonial__arrow{
    border-color:rgba(34,28,21,.18);color:rgba(34,28,21,.7);opacity:1;
  }
  .testimonial__arrow:hover,.testimonial__arrow:active{border-color:rgba(34,28,21,.4);color:var(--ink);}
  .testimonial__dots button{background:rgba(34,28,21,.18);}
  .testimonial__dots button.is-active{background:var(--ink);}
  .testimonial__dots{margin-top:2.25rem;}
}

/* ── "What Our Clients Say" — TABLET & DESKTOP (≥768px). The approved mobile
   section is the reference, not a separate concept: the same cinematic opening,
   the same dissolve into pure white, the same black/white controls — given the
   landscape master and a wider (but still contained) editorial measure. The
   ≤767.98px mobile design above is untouched. ── */
@media (min-width:768px){
  #stories{background:#FFFFFF;padding-top:0;overflow-x:clip;}
  #stories .eyebrow{color:#000000;}
  .stories-head{display:block;position:relative;}
  .stories-head__img{
    display:block;margin:0 calc(var(--gutter) * -1);
    /* Same progressive dissolve as mobile, retimed for the landscape crop: the
       table and keys stay fully legible, and the image reaches full transparency
       exactly at its own edge, so there is no visible boundary against the white. */
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.66) 84%,rgba(0,0,0,.34) 93%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.66) 84%,rgba(0,0,0,.34) 93%,rgba(0,0,0,0) 100%);
  }
  .stories-head__img img{display:block;width:100%;height:auto;aspect-ratio:1694/929;}
  .stories-head__text{
    display:block;position:absolute;top:clamp(2.25rem,4.2vw,3.75rem);left:0;right:0;
    padding-inline:var(--gutter);
  }
  /* Controlled editorial measure — the quote gains presence from the wider
     canvas without stretching across it; arrows sit just outside the quote
     block rather than at the viewport edges. */
  .testimonial{margin-top:clamp(1.5rem,3vw,2.5rem);gap:clamp(1rem,2.2vw,2rem);}
  /* The track shrink-wraps the quote instead of filling the flex line, so the
     arrows frame the testimonial itself rather than floating out near the
     section edges. Its max-width is unchanged. */
  .testimonial__track{flex:0 1 auto;max-width:36rem;}
  .testimonial__tag{font-size:.72rem;font-weight:500;color:#000000;opacity:1;}
  .testimonial__slide figcaption{margin-top:.3rem;font-size:.7rem;color:rgba(0,0,0,.55);}
  .testimonial__slide blockquote{
    margin-top:clamp(1.6rem,2.4vw,2.1rem);font-size:clamp(1.28rem,1.95vw,1.72rem);
    line-height:1.42;max-width:32ch;color:#000000;
  }
  .testimonial__arrow{border-color:rgba(0,0,0,.14);color:rgba(0,0,0,.5);opacity:1;}
  .testimonial:hover .testimonial__arrow{opacity:1;}
  .testimonial__arrow:hover{border-color:rgba(0,0,0,.45);color:#000000;}
  .testimonial__dots{margin-top:clamp(1.75rem,2.8vw,2.5rem);}
  .testimonial__dots button{background:rgba(0,0,0,.18);}
  .testimonial__dots button.is-active{background:#000000;}
}
/* Tablet — same composition at tablet proportions, not a shrunken desktop. */
@media (min-width:768px) and (max-width:1199.98px){
  .stories-head__text{top:clamp(1.75rem,3.6vw,2.75rem);}
  .testimonial{gap:clamp(.85rem,1.9vw,1.5rem);}
  .testimonial__track{max-width:31rem;}
  .testimonial__slide blockquote{font-size:clamp(1.2rem,2.2vw,1.5rem);max-width:30ch;}
  .testimonial__arrow{width:2.5rem;height:2.5rem;font-size:1rem;}
}

.sign{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--slate);margin-top:1.75rem;}
#approach .lead{max-width:31em;}
@media (min-width:768px){
  #approach .lead{margin-top:clamp(2.25rem,3.6vw,3rem);line-height:1.74;}
}
#territory-h{max-width:22ch;}

/* Section intros — centered heading + paragraph at every breakpoint (desktop is the
   primary reference). Why LARECO and Contact keep their asymmetric two-column
   composition and stay mobile-only centered via .center-mobile. */
/* Visual-only scale (not font-size) so the original line breaks/composition stay
   byte-for-byte identical — the headline lays out at full size, then paints ~9%
   smaller. transform-origin:top keeps the eyebrow→headline gap above it untouched. */
.approach-h-headline{max-width:24ch;}
@media (max-width:767.98px){
  /* Full-bleed to the viewport edge (same technique as the Our Approach mobile H1)
     so the existing copy naturally reflows from 5 lines to 4 at the same font-size.
     Centred via left:50%/translateX(-50%) rather than auto margins: once this box is
     wider than its container, browsers resolve auto margins to 0 instead of splitting
     the overflow evenly, which was pushing the whole headline visibly to the right. */
  #approach-h.approach-h-headline{
    max-width:403px;width:calc(100% + var(--gutter) * 2 + 24px);
    position:relative;left:50%;transform:translateX(-50%) scale(.8372);
  }
  #territory-h{transform:scale(.8372);}
}
@media (min-width:768px){
  .approach-h-headline{max-width:38ch;}
}
#approach-h,#territory-h,#transparency-h,#stories-h,#faq-h,#process-h,
#approach>.container>.eyebrow,#territory>.container>.eyebrow,
#transparency>.container>.eyebrow,#stories>.container>.eyebrow,#faq>.container>.eyebrow,#process>.container>.eyebrow,
#stories .stories-head__text>.eyebrow,
#approach>.container>.lead,#territory>.container>.lead,#process>.container>.lead{
  margin-inline:auto;text-align:center;
}
.territory-lead--mobile{display:none;}
@media (max-width:767.98px){
  .territory-lead--desktop{display:none;}
  .territory-lead--mobile{display:block;}
}
/* Unified section-heading system, reflow-safe: every major homepage section
   heading (Bigger Picture, Costa Blanca, Before You Sign, Choose Your
   Representation, Why LARECO, Client Stories, FAQ) is visually scaled to match
   the "Bigger Picture" reference size via transform, never font-size — so each
   heading still lays out (and wraps) at its own original, already-tuned
   font-size and max-width, and every existing line break is byte-for-byte
   locked. transform-origin's top edge keeps the spacing above each heading
   exactly where it was; margin-bottom compensates for transform not shrinking
   the box's own reserved space, so the gap to whatever follows also stays as
   originally designed. transparency-h's own font-size was already smaller than
   the others (by original design), so it scales up instead of down to reach
   the same visual result; why__heading is centered on mobile but left-aligned
   in the desktop two-column grid, so its scale origin follows suit. */
#transparency-h{
  font-size:clamp(1.6rem,3.7vw,2.9rem);
  transform:scale(1.2);transform-origin:top center;margin-bottom:1.85em;
}
#approach-h,#territory-h,#process-h,#stories-h,#faq-h,.why__heading{
  transform:scale(.91);transform-origin:top center;
}
/* "Beautiful properties…" headline — controlled 9% size-reduction test,
   scoped to desktop only (mobile's own scale is set in its full-bleed rule
   above); layered on top of the existing .91 wrap-preserving scale so line
   breaks stay exactly as they are, only the painted size shrinks further. */
@media (min-width:768px){
  #approach-h.approach-h-headline{transform:scale(.8281);transform-origin:top center;}
  #territory-h,#process-h{transform:scale(.8281);}
}
/* Compensation is proportional to each heading's own line count (≈-.19em per
   line), not one flat value — approach-h wraps 3 lines, territory-h/process-h/
   faq-h wrap 2, stories-h wraps 1, why__heading wraps ~5 at its narrow 20ch. */
#approach-h{margin-bottom:-.286em;}
#territory-h,#process-h{margin-bottom:-.191em;}
#faq-h{margin-bottom:-.191em;}
#stories-h{margin-bottom:-.095em;}
.why__heading{margin-bottom:-.382em;}
@media (min-width:768px){
  .why__heading{transform-origin:top left;}
}

/* ── Our Approach — centred label/headline, two-column body/portrait below ── */
.approach-intro{text-align:center;}
.approach-intro .h2{margin-inline:auto;max-width:34ch;}
@media (max-width:767.98px){
  /* Full-bleed just this headline to the viewport edge — the extra width (vs. the
     container's normal gutter inset) is what lets "outcome. Confidence comes" fit
     on one line at the existing font-size, keeping the forced 3-line break intact. */
  #our-approach .approach-intro .h2{max-width:none;width:calc(100% + var(--gutter) * 2 + 40px);margin-inline:calc(-1 * var(--gutter) - 20px);}
}
/* H1 typography matched to "The Bigger Picture" (#approach-h): same .h2 base
   font-size/line-height already shared via the .h2 class; only the extra
   display scale is aligned — .8372 mobile / .8281 desktop, same as #approach-h.
   margin-bottom stays this headline's own line-count compensation (geometry,
   not typography), untouched. */
#our-approach .approach-intro .h2{transform:scale(.8372);transform-origin:top center;margin-bottom:-.509em;}
.approach-h-break--desktop{display:none;}
@media (min-width:768px){
  .approach-intro .h2{max-width:38ch;}
  #our-approach .approach-intro .h2{transform:scale(.8281);transform-origin:top center;margin-bottom:calc(-.339em - 20px);}
  .approach-h-break{display:none;}
  .approach-h-break--desktop{display:inline;}
}
/* CTA sits centred, full-width, as its own row after the story/portrait row — the
   conclusion of the section rather than an appendage of the left text column. */
.approach-cta{display:flex;width:fit-content;margin-inline:auto;border-color:#000;}
@media (max-width:879.98px){
  .why__prose{max-width:22rem;margin-inline:auto;text-align:center;}
}
@media (min-width:880px){
  .approach-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(3.25rem,6.25vw,6.25rem);row-gap:clamp(3.5rem,6vw,5.5rem);align-items:center;}
  .approach-intro{grid-column:1 / -1;grid-row:1;}
  .approach-grid__body{grid-column:1;grid-row:2;}
  .approach-grid .why__portrait{grid-column:2;grid-row:2;margin-top:0;width:calc((300px + 100%) / 2);justify-self:start;}
  .approach-cta{grid-column:1;grid-row:3;margin-top:calc(clamp(2rem,3vw,2.75rem) - clamp(3.5rem,6vw,5.5rem));}
  /* Header-to-body gap is moved fully onto the h2 (row 1, outside the centred
     row-2 box) so approach-grid__body's height matches the prose exactly —
     otherwise the prose's own top margin skews it off-centre against the portrait. */
  #our-approach .approach-intro .h2{margin-bottom:calc(-.339em - 20px + clamp(1.75rem,3vw,2.5rem));}
  .approach-grid__body .why__prose{margin-top:0;}
}

/* ── Why LARECO ────────────────────────────────────────────── */
.why__grid{display:grid;grid-template-columns:1fr;row-gap:0;align-items:start;}
.why__portrait{margin:0;position:relative;aspect-ratio:4/5;border:1px solid var(--hairline);overflow:hidden;background:var(--travertine);border-radius:2px;}
.why__portrait img{width:100%;height:100%;object-fit:cover;}
.why__heading{max-width:20ch;}
.why__prose{margin-top:clamp(1.75rem,3vw,2.5rem);display:flex;flex-direction:column;gap:clamp(1.1rem,1.8vw,1.55rem);max-width:62ch;}
.why__prose--desktop{display:none;}
.why__prose--mobile{margin-top:clamp(1.4rem,2.4vw,2rem);gap:clamp(.97rem,1.58vw,1.36rem);}
.why__prose--desktop p:last-child{margin-top:clamp(1.75rem,3vw,2.5rem);font-style:italic;font-weight:400;font-size:clamp(1.2rem,1.7vw,1.5rem);}
.why__prose--mobile p:last-child{margin-top:.44rem;}
@media (min-width:880px){
  .why__prose--desktop{display:flex;gap:clamp(1.35rem,2.1vw,1.85rem);}
  .why__prose--mobile{display:none;}
  #our-approach .why__prose--desktop p{line-height:1.8;}
}
.why__prose p{font-family:var(--serif);font-weight:300;font-size:clamp(1.08rem,1.5vw,1.36rem);line-height:1.72;color:var(--stone);text-wrap:pretty;}
.why__quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.32;color:var(--ink);margin-top:clamp(2rem,3.5vw,3rem);max-width:26ch;text-wrap:balance;hanging-punctuation:first last;}
.why__sign{margin-top:clamp(1.25rem,2.4vw,1.75rem);max-width:62ch;}
/* Mobile-only order becomes: heading → founder text → portrait → name/title
   (see index.html source order). A contained, centred portrait — not
   edge-to-edge — reads as a considered editorial photograph, with generous
   air above/below rather than a heavy full-bleed block. Prepared for the
   final professional portrait; swapping assets/founder.jpg needs no layout
   change. */
@media (max-width:879.98px){
  .why__portrait{width:100%;max-width:17rem;margin-inline:auto;margin-top:clamp(2.5rem,7vw,3.5rem);}
  .why__sign{margin-top:clamp(1.75rem,4vw,2.25rem);}
  #our-approach .approach-cta{margin-top:clamp(2.4rem,4.4vw,3.5rem);}
}
@media (min-width:880px){
  .why__grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);column-gap:clamp(3rem,6vw,6rem);}
  .why__portrait{grid-column:2;grid-row:2 / span 3;margin-top:0;}
  .why__eyebrow{grid-column:1;grid-row:1;}
  .why__heading{grid-column:1;grid-row:2;}
  .why__prose{grid-column:1;grid-row:3;}
  .why__sign{grid-column:1;grid-row:4;}
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(2.75rem,4.5vw,4rem);border-top:1px solid var(--hairline);counter-reset:faq-i;}
.faq details{border-bottom:1px solid var(--hairline);}
.faq summary{
  display:grid;grid-template-columns:2.25rem 1fr auto;gap:1.25rem;align-items:baseline;
  padding-block:clamp(1.5rem,2.6vw,2.1rem);cursor:pointer;list-style:none;
}
.faq summary::before{
  counter-increment:faq-i;content:counter(faq-i,decimal-leading-zero);
  font-family:var(--serif);font-weight:300;font-size:1.05rem;color:var(--clay-light);
  font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.3;color:var(--ink);transition:color .24s var(--ease);}
.faq summary:hover h3,.faq details[open] summary h3{color:var(--clay);}
.faq .sign-toggle{font-family:var(--sans);font-weight:300;font-size:1.6rem;line-height:1;color:var(--clay);flex-shrink:0;transition:transform .32s var(--ease);}
.faq details[open] .sign-toggle{transform:rotate(45deg);}
.faq__a{padding-bottom:clamp(1.375rem,2.4vw,1.875rem);padding-left:calc(2.25rem + 1.25rem);max-width:64ch;}
.faq__a p{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.72;color:var(--stone);text-wrap:pretty;}
.faq details[open] .faq__a{animation:lr-fade .42s var(--ease) both;}

/* ── Contact form ──────────────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.1rem,3.4vw,2.75rem) clamp(1.5rem,3vw,2.25rem);}
.field{display:flex;flex-direction:column;}
.field--full{grid-column:1 / -1;}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:rgba(255,255,255,.55);margin-bottom:10px;transition:color .2s var(--ease);}
.field:focus-within label{color:#FFFFFF;}
.field label .req{color:rgba(255,255,255,.55);}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.28);
  padding:9px 0;font-family:var(--serif);font-weight:300;font-size:1.18rem;
  color:#FFFFFF;outline:none;border-radius:0;transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.38);opacity:1;font-style:italic;}
.field textarea{resize:none;min-height:3.2em;}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5L6%206.5L11%201.5'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .15rem center;background-size:.72rem;padding-right:1.6rem;}
.field select option{background:#111111;color:#FFFFFF;}
.chip-select{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2px;}
.chip-select input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;}
.chip-select .chip{
  cursor:pointer;padding:10px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;text-align:center;
  font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.02em;
  color:rgba(255,255,255,.72);transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.chip-select .chip:hover{transform:translateY(-1px);}
.chip-select input:checked + .chip{background:#FFFFFF;border-color:#FFFFFF;color:#111111;}
.chip-select .chip:hover{border-color:#FFFFFF;color:#FFFFFF;}
.chip-select input:focus-visible + .chip{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;}
.field--error .chip-select .chip{border-color:#FFFFFF;}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:#FFFFFF;background:rgba(255,255,255,.04);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;}
.field--error input,.field--error select,.field--error textarea{border-bottom-color:#FFFFFF;}
.field__err{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#FFFFFF;margin-top:8px;min-height:1em;opacity:0;transition:opacity .18s var(--ease);}
.field--error .field__err{opacity:1;}
.form__submit{grid-column:1 / -1;}
.contact-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:rgba(255,255,255,.6);margin-top:clamp(1.75rem,3vw,2.5rem);line-height:2;}
.contact-meta a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.28);}
.contact-meta a:hover{border-bottom-color:#FFFFFF;}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer{background:var(--shadow);color:var(--bone);}
.site-footer .container{padding-top:var(--section-y-top);padding-bottom:clamp(1.75rem,3vw,2.5rem);}
.footer__line{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,5vw,4rem);line-height:1.06;letter-spacing:-.012em;color:var(--bone);max-width:18ch;text-wrap:balance;}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(3.5rem,6vw,6rem);padding-top:clamp(2.25rem,4vw,3.25rem);border-top:1px solid var(--umber);}
.site-footer .container>.footer__grid:first-child{margin-top:0;border-top:none;padding-top:0;}
.footer__brand{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.28em;color:var(--bone);}
.footer__tag{font-family:var(--serif);font-style:italic;font-weight:300;font-size:.97rem;line-height:1.5;color:var(--slate);margin-top:1rem;max-width:28ch;}
/* The brand wordmark (1.5rem) sits taller than the other columns' mono h3 label
   (.66rem), so without correction the tagline starts visibly lower than Navigate/
   Contact/Legal's first list item. Nudges the whole first column up so all four
   columns' actual body content begins on the same line — same logic at both
   breakpoints, since mobile pairs Brand+Navigate in one row too. */
.footer__col:first-child{margin-top:-22px;}
/* Home footer only (.site-footer--home): brand column removed, so the grid is now
   the first visual block and Navigate needs none of the brand-column offset above. */
.site-footer--home .footer__grid{margin-top:0;padding-top:0;border-top:none;}
.site-footer--home .footer__col:first-child{margin-top:0;}
.footer__intro-mobile{display:none;font-family:var(--serif);font-style:italic;font-weight:300;font-size:.97rem;line-height:1.5;color:var(--slate);}
.footer__langs-band__brand{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:.75rem;}
.footer__langs-band{margin-top:clamp(1.75rem,3.5vw,2.75rem);padding-block:clamp(1.1rem,2.2vw,1.5rem);border-top:1px solid var(--umber);text-align:center;}
.site-footer .container>.footer__langs-band:first-child{margin-top:0;}
.footer__langs-band__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);}
.footer__langs-band__list{margin-top:.85rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;list-style:none;padding:0;}
.footer__langs-band__sentence{display:none;font-family:var(--serif);font-weight:300;font-size:1.05rem;color:var(--bone);}
.footer__langs-band__list li{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--bone);position:relative;}
.footer__langs-band__list li:not(:last-child)::after{content:"·";position:absolute;right:-1.05rem;color:var(--clay-light);}
.footer__col h3{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;color:#7C7058;margin-bottom:1rem;text-transform:uppercase;}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:.625rem;padding:0;}
.footer__col a,.footer__col span{font-family:var(--sans);font-size:.85rem;color:var(--ash);transition:color .18s var(--ease);}
.footer__col a:hover{color:var(--bone);}
.footer__bar{border-top:1px solid #2C271D;margin-top:clamp(1.75rem,3.5vw,2.75rem);padding-top:1rem;display:flex;flex-wrap:wrap;gap:.875rem;justify-content:space-between;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:#7C7058;}
.footer__bar--single{justify-content:center;}
.footer__copyright-line{display:inline;}
.footer__copyright-line+.footer__copyright-line::before{content:" · ";}

/* ── Mobile home footer — migration into the black/white DNA (#111111 + #FFFFFF,
   matching #approach / #process). Divider lines give way to spacing, navigation
   steps back, Contact steps forward. Desktop is untouched. ── */
.footer__langs-band__k-in{display:none;}
@media (max-width:767.98px){
  .site-footer--home{background:#111111;color:#FFFFFF;}
  .site-footer--home .container{padding-top:clamp(3.25rem,11vw,4.25rem);padding-bottom:clamp(2rem,7vw,2.5rem);}
  /* Same exact white as the Contact email — pinned with text-fill-color so no
     later rule or inherited fill can soften it. */
  .site-footer--home .container>.footer__intro-mobile{color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;}
  .site-footer--home .footer__intro-mobile{color:#FFFFFF;font-weight:400;font-size:1rem;line-height:1.55;}
  .site-footer--home .footer__grid{margin-top:clamp(2.75rem,9.5vw,3.5rem);gap:clamp(2.25rem,8vw,2.75rem);}
  .site-footer--home .footer__col h3{color:rgba(255,255,255,.45);font-size:.63rem;letter-spacing:.18em;margin-bottom:.85rem;}
  .site-footer--home .footer__col a,
  .site-footer--home .footer__col span{color:rgba(255,255,255,.80);}
  .site-footer--home .footer__col ul{gap:.5rem;}
  .site-footer--home .footer__col:first-child a{font-size:.79rem;line-height:1.4;color:rgba(255,255,255,.72);}
  /* Contact: the email is the footer's key functional line */
  .site-footer--home .footer__contact a{font-size:.95rem;color:#FFFFFF;}
  .site-footer--home .footer__contact span{font-size:.82rem;color:rgba(255,255,255,.62);}
  .site-footer--home .footer__legal-links a{font-size:.79rem;color:rgba(255,255,255,.62);}
  /* Service languages — a trust statement, not a switcher. No hairline. */
  .site-footer--home .footer__langs-band{margin-top:clamp(2.75rem,9.5vw,3.5rem);padding-block:0;border-top:none;}
  .site-footer--home .footer__langs-band__brand{display:none;}
  .site-footer--home .footer__langs-band__k{color:rgba(255,255,255,.45);font-size:.63rem;letter-spacing:.18em;}
  .footer__langs-band__k-in{display:inline;}
  .site-footer--home .footer__langs-band__list{margin-top:.9rem;gap:1.4rem;}
  .site-footer--home .footer__langs-band__list li{color:#FFFFFF;font-size:1.08rem;}
  .site-footer--home .footer__langs-band__list li:not(:last-child)::after{color:rgba(255,255,255,.35);}
  .site-footer--home .footer__bar{margin-top:clamp(2.75rem,9.5vw,3.5rem);padding-top:0;border-top:none;color:rgba(255,255,255,.45);}
  /* Carry the footer's black through the iOS home-indicator inset. */
  .site-footer--home .container{padding-bottom:calc(clamp(2rem,7vw,2.5rem) + env(safe-area-inset-bottom,0px));}
}

/* ── Home footer — TABLET & DESKTOP (≥768px). Same DNA as the approved mobile
   footer: the site's black surface, white type, hierarchy from opacity only, no
   divider hairlines, and a compact vertical footprint. Desktop keeps its own
   horizontal three-column structure rather than restating the mobile stack.
   Mobile ≤767.98px is untouched. ── */
@media (min-width:768px){
  .site-footer--home{background:#111111;color:#FFFFFF;}
  .site-footer--home .container{
    padding-top:clamp(3.35rem,5.3vw,4.25rem);
    padding-bottom:clamp(2.1rem,3.4vw,2.85rem);
  }
  .site-footer--home .footer__grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:center;gap:clamp(1.5rem,3vw,3rem);max-width:820px;margin-inline:auto;
  }
  .site-footer--home .footer__col{text-align:center;}
  .site-footer--home .footer__col h3{
    color:rgba(255,255,255,.45);font-size:.63rem;letter-spacing:.18em;margin-bottom:.9rem;
  }
  .site-footer--home .footer__col ul{gap:.55rem;}
  .site-footer--home .footer__col a,
  .site-footer--home .footer__col span{color:rgba(255,255,255,.80);font-size:.82rem;line-height:1.45;}
  .site-footer--home .footer__col a:hover{color:#FFFFFF;}
  .site-footer--home .footer__col:first-child a{color:rgba(255,255,255,.72);}
  .site-footer--home .footer__contact a{font-size:.95rem;color:#FFFFFF;}
  .site-footer--home .footer__contact span{font-size:.82rem;color:rgba(255,255,255,.62);}
  .site-footer--home .footer__legal-links a{color:rgba(255,255,255,.62);}

  /* Closing band — positioning line, label, then the languages as the strongest
     element, exactly as on mobile. No hairline, no padding block. */
  .site-footer--home .footer__langs-band{
    margin-top:clamp(3rem,4.8vw,3.9rem);padding-block:0;border-top:none;
  }
  .site-footer--home .footer__langs-band__brand{
    color:rgba(255,255,255,.80);font-size:.66rem;letter-spacing:.16em;line-height:1.5;margin-bottom:1.35rem;
  }
  .site-footer--home .footer__langs-band__k{
    color:rgba(255,255,255,.45);font-size:.63rem;letter-spacing:.18em;line-height:1.2;
  }
  .site-footer--home .footer__langs-band__k-in{display:inline;}
  .site-footer--home .footer__langs-band__sentence{display:none;}
  .site-footer--home .footer__langs-band__list{display:flex;margin-top:.95rem;gap:1.5rem;}
  .site-footer--home .footer__langs-band__list li{color:#FFFFFF;font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.2;}
  .site-footer--home .footer__langs-band__list li:not(:last-child)::after{color:rgba(255,255,255,.35);}

  .site-footer--home .footer__bar{
    margin-top:clamp(2.85rem,4.5vw,3.65rem);padding-top:0;border-top:none;
    color:rgba(255,255,255,.45);
  }
}

/* ── Section scroll offsets (sticky header) ────────────────────────────── */
/* --header-h is kept in sync with the live .site-header height by script.js,
   so every anchor link (desktop nav, mobile nav, footer, direct hash loads)
   lands a section at exactly the same offset, at any breakpoint. */
[id]{scroll-margin-top:var(--header-h,90px);}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .nav-links,.nav-actions,.nav-left,.nav-right{display:none;}
  .menu-toggle{display:inline-flex;position:static;right:auto;top:auto;transform:none;}
  .nav{display:flex;justify-content:space-between;}
  .brand{grid-column:auto;justify-self:auto;}
}
@media (max-width:1100px){
  /* index.html header only: language selector / LARECO / menu icon as a three-
     column grid so the wordmark stays mathematically centered regardless of
     how wide the selector or icon are. */
  .nav--split{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:.5rem;}
  .nav--split .lang-select{display:flex;grid-column:1;justify-self:start;}
  .nav--split .logo{grid-column:2;justify-self:center;}
  .nav--split .menu-toggle{grid-column:3;justify-self:end;align-items:center;justify-content:center;}
}
@media (min-width:1100.02px){
  /* index.html hero header only: "EN" as a utility item at the far right of the
     horizontal nav — LARECO ——— nav ——— EN. The equal-width ::before spacer keeps
     the wordmark on the exact same centre it had before this item existed, so no
     nav link moves; only the unused free space at each outer edge shrinks. */
  .nav--split{
    --lang-nav-w:1.1rem;                                  /* intrinsic width of "EN" — no dead padding to eat the gap */
    --lang-nav-sep:clamp(1rem,1.7vw,1.75rem);
    /* 1100–1160px is the one band where the horizontal nav is intrinsically full:
       .nav-right's nowrap links overflow their flex box, so no margin can hold the
       gap open. This continuous nudge (14px → 0px, fully dissolved by 1160px) lets
       "EN" sit a touch into the outer gutter there, keeping it clearly separate from
       "Contact"; from 1160px up it is exactly 0 and EN aligns with the nav's edge. */
    --lang-nav-pull:clamp(0px,(1160px - 100vw) * .25,14px);
  }
  /* Spacer mirrors the item's TOTAL consumed width, so the wordmark centre is
     mathematically identical to what it was before this item existed. */
  .nav--split::before{
    content:"";flex:none;
    width:calc(var(--lang-nav-w) + var(--lang-nav-sep) - var(--lang-nav-pull));
  }
  .nav--split .lang-nav{
    /* flex + centre, not block: an inline formatting context sat the label ~1.1px
       below the nav links' optical centre via the line-box strut. */
    display:flex;align-items:center;flex:none;position:relative;
    width:var(--lang-nav-w);
    margin-left:var(--lang-nav-sep);margin-right:calc(-1 * var(--lang-nav-pull));
  }
  /* DE only: the German nav-right labels ("Ihr nächster Schritt") are ~27px wider
     than the English ones, so their nowrap overflow eats the gap that separates
     "DE" from "Kontakt". A fixed outward pull restores that separation. It is
     symmetric — the ::before spacer subtracts the same amount — so the wordmark's
     centre is unchanged. */
  html[lang="de"] .nav--split{--lang-nav-pull:24px;}
  /* ES only: same cause as DE, deeper. The Spanish nav-right ("Su siguiente paso")
     overflows .nav-right by ~46px at 1104px, so "ES" was left sitting ~40px inside
     the frame while "Costa Blanca" sat 15px from the opposite edge. Same clamp shape
     and the same 1160px dissolve point as the base rule — only steeper and deeper, so
     it reaches the crowded end of the band and is exactly 0 from 1160px up, leaving
     every wider desktop width byte-identical to today. 36px is the ceiling: past it
     the nav is intrinsically full and the ::before spacer can no longer mirror the
     pull, which would shift the wordmark off centre. */
  html[lang="es"] .nav--split{--lang-nav-pull:clamp(0px,(1160px - 100vw) * .64,36px);}
  /* PL only: same cause and same mechanism as DE/ES above, one step further. After
     "Przewodnik kupującego" moved to nav-right, that group is the widest of the four
     languages, so its nowrap links overflowed their flex box and "Kontakt" collided
     with "PL" (measured −11.4px at 1920px, −6.9px at 1101px). A flat 34px pull — the
     DE treatment, deeper — restores the separation at every desktop width (RtoLang
     13.1–80.5px). Symmetric: the ::before spacer subtracts the same amount, so the
     wordmark centre stays at exactly 0px deviation. 34px is the working ceiling here;
     at 40px the nav is intrinsically full, the spacer can no longer mirror the pull
     and the wordmark drifts off centre (measured 1.8px at 1101px). */
  html[lang="pl"] .nav--split{--lang-nav-pull:34px;}
}
/* PL only, 1100.02–1279.98px — Polish nav spacing in the tightest desktop band.
   Polish carries the widest label mass of the four languages, and after the
   nav-right swap the pressure sits on the right group: with the shared fluid gaps
   this band leaves "Kontakt" overlapping "PL" (measured −16.4px at 1160px,
   −25.9px at 1101px, even with the 34px pull applied). Taking the two gap values
   to the design's own floors for this band only — the item gap to .99rem (exactly
   the existing clamp(.99rem,1.89vw,1.8rem) floor) and the wordmark gap to 1.5rem —
   narrows nav-right enough to clear it (RtoLang 13.1–80.5px). Both gaps are
   mirrored either side of the wordmark, so its centre is untouched; no typography,
   copy or nav order changes; at 1280px and up every language including PL is
   identical to before. */
@media (min-width:1100.02px) and (max-width:1279.98px){
  html[lang="pl"] .nav--split{column-gap:1.5rem;}
  html[lang="pl"] .nav-left,
  html[lang="pl"] .nav-right{gap:.99rem;}
}
@media (max-width:767.98px){
  /* Mobile content layout — slightly more breathing room on the outer edges and a
     touch less width on running text, so the left-aligned editorial layout reads as
     more deliberately composed within the viewport (alignment itself is unchanged). */
  :root{
    --gutter:calc(clamp(1.375rem, 5vw, 3.5rem) + 10px);
    --measure:60ch;
  }
  .lead{max-width:32em;}

  /* Buyer's Guide hub (both layout options) — mobile-only micro refinement: a touch
     more room between the section indicator ("02 / 03") and its heading. Scoped to
     this class only — desktop and every other section (incl. the shared .h2 rule
     elsewhere) are untouched. (The matching intro-paragraph-to-first-card spacing
     rule lives further down, after the base .guide-cat__grid rule it overrides —
     same specificity, so source order decides the cascade.) */
  .guide-cat__head .h2{margin-top:34px;}

  p.eyebrow.center-mobile{display:flex;width:fit-content;margin-inline:auto;}
  .h2.center-mobile{margin-inline:auto;text-align:center;}
  #territory-h{max-width:none;}

  /* Mobile polish pass — CTA consistency, targeted re-centring on Areas/strip/trust/
     footer, and extra breathing room in the form. Desktop is untouched throughout. */
  .btn{display:flex;width:fit-content;margin-inline:auto;}
  .why__closing{text-align:center;}
  #contact .lead{margin-inline:auto;text-align:center;}
  .contact-meta{margin-inline:auto;text-align:center;}
  .form__consent{margin-inline:auto;text-align:center;}
  label[for="f-message"]{text-align:center;}
  .footer__line{text-align:center;margin-inline:auto;}
  .footer__grid{text-align:center;}
  .footer__tag{margin-inline:auto;}
  .footer__intro-mobile{display:block;text-align:center;margin-inline:auto;max-width:30ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);}
  .footer__langs-band__brand{display:none;}
  .footer__col ul{align-items:center;}
  .form{gap:clamp(2.25rem,7vw,2.75rem);}
  .field input,.field select,.field textarea{padding:12px 0;}
  .split{gap:clamp(2.5rem,8vw,3.25rem);}
  .footer__bar{flex-direction:column;gap:.5rem;text-align:center;margin-top:0;}

  /* Single-column footer hierarchy: full-width text blocks read more evenly than a
     cramped 2-up grid (long Navigate labels no longer wrap unevenly), each block
     separated by the same hairline rhythm the copyright bar already uses. */
  .footer__grid{grid-template-columns:1fr;row-gap:0;}
  .footer__col{padding-block:.45rem;border-bottom:1px solid #2C271D;}
  .footer__col:first-child{margin-top:0;padding-top:0;}
  .footer__col:last-child{border-bottom:none;padding-block:.45rem;}
  /* Home footer only: no internal hairlines — spacing separates the groups. */
  .site-footer--home .footer__col,
  .site-footer--home .footer__col:last-child{padding-block:0;border-bottom:none;}
  .footer__col h3{margin-bottom:.5rem;}

  .site-footer .container{padding-top:var(--section-y-top);padding-bottom:clamp(1.5rem,4vw,2rem);}
  .footer__contact ul{gap:.4rem;}
  /* Legal row: the intended 1.25rem row gap was being out-specified by
     `.site-footer--home .footer__col ul{gap:.5rem}`, so the row rendered at 8px and
     — with nowrap — long DE/ES labels shrank and broke inside their own item.
     Qualified selector + explicit column/row gap + wrap; no fixed widths. */
  .footer__col ul.footer__legal-links{flex-flow:row wrap;justify-content:center;column-gap:1.1rem;row-gap:.5rem;}
  .footer__col ul.footer__legal-links>li{flex:0 0 auto;}
  .footer__langs-band{margin-top:0;padding-block:.45rem;}
  .footer__langs-band__list{margin-top:.5rem;}
  .footer__copyright{display:flex;flex-direction:column;gap:.45rem;}
  .footer__copyright-line{display:block;}
  .footer__copyright-line+.footer__copyright-line{text-transform:capitalize;}
  .footer__copyright-line+.footer__copyright-line::before{content:none;}

  .consult-head__desktop-copy{display:none;}
  .consult-head__mobile-copy{display:block;}
}
@media (max-width:700px){
  /* Evaluation grid becomes a horizontally swipeable, snap-scrolling row on mobile —
     same mechanics as the territory chip selector — instead of a long static stack,
     so browsing the six criteria is a considered interaction, not a scroll slog. */
  .grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;
    background:transparent;border:none;border-radius:0;
    margin-inline:calc(var(--gutter) * -1);padding:.2rem var(--gutter) .35rem;
  }
  .grid::-webkit-scrollbar{display:none;}
  .cell{
    flex:0 0 auto;width:min(80vw,360px);scroll-snap-align:start;
    border:1px solid var(--sand);border-radius:10px;
  }
  .section--alt .cell{border-color:#D2C6B0;}
  .cell h3{min-height:0;}
}
@media (max-width:620px){
  .form{grid-template-columns:1fr;}
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
}

/* ── Hero entrance — pure CSS, transform-only (never touches opacity, so it
   can never strand content invisible), runs once on load, motion-safe ────── */
@media (prefers-reduced-motion: no-preference){
  .hero-x [data-reveal]{animation:lr-rise .9s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--rd,0ms);}
}
@keyframes lr-rise{from{transform:translateY(18px);}to{transform:none;}}

/* Section reveal — quiet, once-only entrance for every section below the hero (hero
   has its own hairline-timed reveal above). script.js adds .reveal-init only when
   the visitor allows motion, then flips .is-visible via IntersectionObserver the
   first time each section nears the viewport — one considered arrival per screen,
   not a flurry of per-element animation. */
.reveal-init{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal-init.is-visible{opacity:1;transform:none;}

/* Contact form: status, consent & success */
.form__status{
  grid-column:1 / -1;
  font-family:var(--sans);font-weight:500;font-size:.85rem;line-height:1.55;
  color:#FFFFFF;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28);border-radius:2px;
  padding:12px 16px;
}
.form__consent{
  margin-top:clamp(1.25rem,2.4vw,1.75rem);
  font-family:var(--mono);font-size:.68rem;line-height:1.75;letter-spacing:.02em;
  color:rgba(255,255,255,.5);max-width:54ch;
}
.form__consent a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.4);}
.form__consent a:hover{color:#FFFFFF;border-bottom-color:#FFFFFF;}
/* Completion state. The enclosing card is gone: a boxed panel read as a generic
   confirmation widget, and it is not a container the rest of the site uses. What
   remains is an editorial block in the existing system — one hairline above (the
   same weight as .consult-foot), then mono eyebrow → serif headline → reply
   promise, carried by space and hierarchy rather than a frame. */
.form-success{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:clamp(2.5rem,5vw,3.75rem);
  animation:lr-fade .7s var(--ease) both;
}
.form-success[hidden]{display:none;}
.form-success__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.form-success__h{font-family:var(--serif);font-weight:300;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.14;letter-spacing:-.01em;color:#FFFFFF;margin-top:clamp(1.1rem,2vw,1.5rem);text-wrap:balance;}
.form-success__p{font-family:var(--serif);font-weight:300;font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.7;color:rgba(255,255,255,.68);margin-top:clamp(1.25rem,2.2vw,1.7rem);max-width:44ch;}
.form-success__p a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.4);}
.form-success__p a:hover{border-bottom-color:#FFFFFF;}
/* In the overlays the head, submit and consent all sit on the centre axis, so the
   completion state follows it and inherits the top space the form held (that space
   came from .consult-head+.form, which dies with the hidden form). The standalone
   page keeps its left axis, matching its left-aligned form. */
.consult-overlay--form .form-success{text-align:center;margin-top:clamp(3.25rem,6vw,4.75rem);}
.consult-overlay--form .form-success__p{margin-inline:auto;}
.consult-page .form-success{margin-top:clamp(2.75rem,5vw,4rem);}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none;}
/* Root cause of the stuck "Sending…" state: all three forms live inside
   .consult-overlay, whose `.consult-overlay .form{display:flex}` matches with the
   same specificity as `.form[hidden]` but later in the file — so setting
   form.hidden never hid them and the busy submit button stayed on screen beside
   the confirmation. Descendant-scoped guards outrank both surface rules. */
.form[hidden],
.consult-overlay .form[hidden],
.consult-page .form[hidden]{display:none;}

/* ── Cookie consent — full-bleed dark banner, editorial category layout ──── */
.cookie-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:#111111;border-top:1px solid rgba(255,255,255,.15);
  box-shadow:0 -8px 30px rgba(10,7,4,.25);
  transform:translateY(100%);transition:transform .5s var(--ease);
  pointer-events:none;
}
/* The old clay accent line is removed outright, per the current DNA — the banner's
   top hairline is now its only edge. */
.cookie-consent[hidden]{display:none;}
.cookie-consent.is-visible{transform:translateY(0);pointer-events:auto;}
.cookie-consent__container{position:relative;padding-block:clamp(1.6rem,2.8vw,2rem);}

.cookie-consent__icons{position:absolute;top:clamp(1.5rem,2.8vw,2rem);right:var(--gutter);display:flex;align-items:center;gap:.85rem;}
.cookie-consent__icon{display:inline-flex;align-items:center;justify-content:center;color:#FFFFFF;}
.cookie-consent__icon svg{width:1.3rem;height:1.3rem;display:block;flex:none;}
.cookie-consent__close{background:none;border:none;cursor:pointer;padding:12px;margin:-12px;color:rgba(255,255,255,.7);line-height:0;transition:color .2s var(--ease);}
.cookie-consent__close:hover{color:#FFFFFF;}

.cookie-consent__row{display:flex;align-items:center;justify-content:space-between;gap:clamp(2rem,5vw,4.5rem);}
.cookie-consent__content{flex:1;min-width:0;}
.cookie-consent__h{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,1.15vw,1.05rem);color:#FFFFFF;}
.cookie-consent__p{margin-top:.6rem;max-width:46rem;font-family:var(--sans);font-weight:400;font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.72);text-wrap:pretty;}
.cookie-consent__link{color:#FFFFFF;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease);}
.cookie-consent__link:hover{border-bottom-color:#FFFFFF;}

.cookie-consent__cats{display:flex;flex-wrap:wrap;column-gap:clamp(1.5rem,2.6vw,2.25rem);row-gap:.8rem;align-items:center;margin-top:clamp(1.15rem,2vw,1.4rem);}
.cc-check{display:inline-flex;flex:0 0 auto;align-items:center;gap:.55rem;cursor:pointer;padding-block:.15rem;}
.cc-check input{position:absolute;opacity:0;width:1px;height:1px;}
.cc-check__box{
  position:relative;flex:none;width:1.15rem;height:1.15rem;border-radius:5px;
  border:1.5px solid rgba(255,255,255,.45);background:transparent;color:#111111;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.cc-check__box svg{width:.65rem;height:.5rem;opacity:0;transition:opacity .15s var(--ease);}
.cc-check input:checked + .cc-check__box{background:#FFFFFF;border-color:#FFFFFF;}
.cc-check input:checked + .cc-check__box svg{opacity:1;}
.cc-check input:disabled + .cc-check__box{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.35);}
.cc-check input:disabled + .cc-check__box svg{opacity:1;}
.cc-check input:focus-visible + .cc-check__box{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;}
.cc-check__label{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#FFFFFF;white-space:nowrap;}

.cookie-consent__details{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(1rem,1.8vw,1.25rem);
  background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);
  transition:color .2s var(--ease);
}
.cookie-consent__details:hover{color:#FFFFFF;}
.cookie-consent__details svg{width:.95rem;height:.95rem;flex:none;}

.cookie-consent__actions{flex:none;display:flex;gap:1rem;}
.cc-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;
  background:transparent;border:1.5px solid #FFFFFF;border-radius:999px;color:#FFFFFF;cursor:pointer;
  padding:0 1.75rem;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.cc-btn:hover{background:#FFFFFF;color:#111111;border-color:#FFFFFF;}
.cc-link{background:none;border:none;cursor:pointer;padding:0;font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:color .2s var(--ease),border-color .2s var(--ease);}
.cc-link:hover{color:#FFFFFF;border-color:#FFFFFF;}

.cookie-consent__view[data-cookie-view="prefs"]{padding-right:clamp(2.5rem,5vw,3.5rem);}
.cookie-pref{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-block:.9rem;border-top:1px solid rgba(255,255,255,.15);}
.cookie-pref:first-of-type{margin-top:1.1rem;}
.cookie-pref__t{font-family:var(--sans);font-weight:700;font-size:.8rem;color:#FFFFFF;}
.cookie-pref__d{margin-top:.3rem;font-family:var(--sans);font-weight:400;font-size:.78rem;color:rgba(255,255,255,.65);line-height:1.5;max-width:26rem;}
.cookie-pref__locked{flex:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.cookie-toggle{position:relative;flex:none;display:inline-block;width:2.5rem;height:1.5rem;}
.cookie-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.cookie-toggle span{position:absolute;inset:0;background:rgba(255,255,255,.22);border-radius:999px;transition:background-color .25s var(--ease);}
.cookie-toggle span::before{content:"";position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;background:#FFFFFF;border-radius:50%;transition:transform .25s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.cookie-toggle input:checked + span{background:#FFFFFF;}
.cookie-toggle input:checked + span::before{background:#111111;}
.cookie-toggle input:checked + span::before{transform:translateX(1rem);}
.cookie-toggle input:focus-visible + span{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;}
.cookie-consent__view[data-cookie-view="prefs"] .cookie-sheet__actions{margin-top:1.4rem;display:flex;align-items:center;gap:1.5rem;}

@media (max-width:767.98px){
  .cookie-consent__row{flex-direction:column;align-items:stretch;}
  .cookie-consent__h{font-size:1.05rem;padding-right:4.5rem;}
  .cookie-consent__p{font-size:.88rem;max-width:none;}
  .cookie-consent__cats{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1.1rem;row-gap:.85rem;margin-top:1.25rem;}
  .cookie-consent__cats .cc-check:first-child{grid-column:1 / -1;margin-bottom:.15rem;}
  .cookie-consent__actions{margin-top:1.5rem;width:100%;gap:.75rem;}
  .cookie-consent__actions .cc-btn{flex:1;padding:0 1rem;}
  .cookie-consent__view[data-cookie-view="prefs"]{padding-right:0;}
}

/* ── Consultation overlay — full-screen, entered only via "Book a Consultation".
   Reuses .section--dark's existing colour cascade verbatim (eyebrow/lead/links all
   already themed for dark). Desktop settles in place (a quiet editorial reveal);
   mobile rises from the bottom, same gesture as the existing cookie sheet — the two
   devices get deliberately different entrances rather than one scaled layout. ── */
.consult-overlay{
  position:fixed;inset:0;z-index:250;background:var(--shadow);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.consult-overlay[hidden]{display:none;}
.consult-overlay.is-open{opacity:1;visibility:visible;}
/* overscroll-behavior:contain — reaching the end of the form must not chain the
   gesture into the page behind it (that chaining is what let a touch scroll carry
   on past the form into the main site's footer). */
.consult-overlay__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.consult-overlay__inner{
  border-bottom:none;padding-block:clamp(5.5rem,11vh,7.5rem) clamp(3rem,7vh,4.5rem);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .05s,transform .5s var(--ease) .05s;
}
.consult-overlay.is-open .consult-overlay__inner{opacity:1;transform:none;}
.consult-overlay__close{
  position:fixed;top:clamp(1.5rem,3vw,2rem);right:clamp(1.25rem,3vw,2rem);z-index:2;
  background:none;border:none;cursor:pointer;min-height:44px;min-width:44px;
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);padding:15px;margin:-15px;
  transition:color .2s var(--ease);
}
.consult-overlay__close:hover{color:var(--bone);}

/* Unified content system: centred header + form, reused desktop/mobile alike.
   Scoped to .consult-overlay so consultation.html's own split layout (same base
   .form/.chip-select/.chip classes) is completely untouched. */
.consult-overlay .consult-head{text-align:center;}
.consult-overlay .consult-head .h2,.consult-overlay .consult-head .lead{margin-inline:auto;}
.consult-overlay .consult-head+.form{margin-top:clamp(3.25rem,6vw,4.75rem);}
.consult-overlay .form{display:flex;flex-direction:column;gap:clamp(2.1rem,3.4vw,2.75rem);}
.consult-overlay .form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.25rem);}
.consult-overlay .form__row--triple{grid-template-columns:repeat(3,1fr);}
/* Chip system: every option gets identical, content-independent dimensions via a
   2-column grid (all three groups happen to hold exactly four options each, so
   this also keeps every chip the same size across groups, not just within one). */
.consult-overlay .chip-select{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;}
.consult-overlay .chip-select .chip{
  width:100%;height:3.25rem;padding:0 .5rem;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;
}
/* Consultation/Advisory overlay micro-fix (all four languages; not the
   Main/Footer Contact overlay): centred group label + extra label-to-chip
   breathing room for Budget/Property Intention/Purchase Timeline and Current
   Stage/How We Help/Property Type. */
html[lang="de"] [data-consult-overlay] .chip-select,
html[lang="de"] [data-advisory-overlay] .chip-select,
html[lang="en"] [data-consult-overlay] .chip-select,
html[lang="en"] [data-advisory-overlay] .chip-select,
html[lang="es"] [data-consult-overlay] .chip-select,
html[lang="es"] [data-advisory-overlay] .chip-select,
html[lang="pl"] [data-consult-overlay] .chip-select,
html[lang="pl"] [data-advisory-overlay] .chip-select{margin-top:21px;}
html[lang="de"] [data-consult-overlay] #cf-budget-label,
html[lang="de"] [data-consult-overlay] #cf-intention-label,
html[lang="de"] [data-consult-overlay] #cf-timeline-label,
html[lang="de"] [data-advisory-overlay] #af-stage-label,
html[lang="de"] [data-advisory-overlay] #af-review-label,
html[lang="de"] [data-advisory-overlay] #af-type-label,
html[lang="en"] [data-consult-overlay] #cf-budget-label,
html[lang="en"] [data-consult-overlay] #cf-intention-label,
html[lang="en"] [data-consult-overlay] #cf-timeline-label,
html[lang="en"] [data-advisory-overlay] #af-stage-label,
html[lang="en"] [data-advisory-overlay] #af-review-label,
html[lang="en"] [data-advisory-overlay] #af-type-label,
html[lang="es"] [data-consult-overlay] #cf-budget-label,
html[lang="es"] [data-consult-overlay] #cf-intention-label,
html[lang="es"] [data-consult-overlay] #cf-timeline-label,
html[lang="es"] [data-advisory-overlay] #af-stage-label,
html[lang="es"] [data-advisory-overlay] #af-review-label,
html[lang="es"] [data-advisory-overlay] #af-type-label,
html[lang="pl"] [data-consult-overlay] #cf-budget-label,
html[lang="pl"] [data-consult-overlay] #cf-intention-label,
html[lang="pl"] [data-consult-overlay] #cf-timeline-label,
html[lang="pl"] [data-advisory-overlay] #af-stage-label,
html[lang="pl"] [data-advisory-overlay] #af-review-label,
html[lang="pl"] [data-advisory-overlay] #af-type-label{text-align:center;}
.consult-overlay .form__submit{display:flex;justify-content:center;margin-top:.25rem;}
.consult-overlay .form__consent{margin-inline:auto;text-align:center;}
.consult-overlay .consult-foot{
  margin-top:clamp(2.25rem,4vw,3rem);padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid rgba(255,255,255,.15);text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:rgba(255,255,255,.55);line-height:1.9;
}
.consult-overlay .consult-foot a{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.28);}
.consult-overlay .consult-foot a:hover{color:#FFFFFF;border-bottom-color:#FFFFFF;}
.consult-overlay .consult-head .body{margin-inline:auto;margin-top:1em;max-width:42em;}
.consult-overlay .consult-head__desktop-copy .body{margin-top:1.75em;}
@media (min-width:768px){.consult-head__mobile-copy{display:none;}}
/* Advisory overlay only: "What Would You Like Us To Review?" runs to two lines where
   its "Current Stage"/"Property Type" neighbours stay on one — reserve equal label
   height so all three chip grids still start on exactly the same line beneath them. */
.consult-overlay--advisory .form__row--triple>.field>label{min-height:2.3rem;}
/* EN advisory labels are now all single-line ("Your current stage" / "How can we
   help?" / "Property Type"), so the reservation above only adds dead space below
   the label before the chip grid — neutralise it for EN so the effective label-to-
   chip gap matches the Private Consultation reference exactly. DE keeps the base
   rule (its own labels/wording are unaffected by this override). */
html[lang="en"] .consult-overlay--advisory .form__row--triple>.field>label{min-height:0;}
/* Main/Footer Contact overlay — bring to the Private Consultation group-label
   treatment (all four languages). */
html[lang="en"] [data-contact-overlay] .chip-select,
html[lang="de"] [data-contact-overlay] .chip-select,
html[lang="es"] [data-contact-overlay] .chip-select,
html[lang="pl"] [data-contact-overlay] .chip-select{margin-top:21px;}
html[lang="en"] [data-contact-overlay] #ctf-budget-label,
html[lang="en"] [data-contact-overlay] #ctf-intention-label,
html[lang="en"] [data-contact-overlay] #ctf-timeline-label{text-align:center;}
/* DE/ES/PL Main/Footer Contact overlay — centred labels + matching label-to-chip
   breathing room, bringing it in line with the Private Consultation/Advisory
   overlays' already-correct vertical rhythm. */
html[lang="de"] [data-contact-overlay] #ctf-budget-label,
html[lang="de"] [data-contact-overlay] #ctf-intention-label,
html[lang="de"] [data-contact-overlay] #ctf-timeline-label,
html[lang="es"] [data-contact-overlay] #ctf-budget-label,
html[lang="es"] [data-contact-overlay] #ctf-intention-label,
html[lang="es"] [data-contact-overlay] #ctf-timeline-label,
html[lang="pl"] [data-contact-overlay] #ctf-budget-label,
html[lang="pl"] [data-contact-overlay] #ctf-intention-label,
html[lang="pl"] [data-contact-overlay] #ctf-timeline-label{text-align:center;}

@media (max-width:767.98px){
  .consult-overlay{
    opacity:1;visibility:visible;transform:translateY(100%);
    transition:transform .5s var(--ease);
  }
  .consult-overlay.is-open{transform:translateY(0);}
  .consult-overlay__inner{transform:none;transition:opacity .4s var(--ease) .1s;}
  .consult-overlay .form__row,.consult-overlay .form__row--triple{grid-template-columns:1fr;gap:clamp(1.75rem,6vw,2.25rem);}
  .consult-overlay .field--optional-link{display:none;}
}

/* Legal & simple content pages */
.page-head{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(1.25rem,2.5vw,2rem);}
.page-head .h2{margin-top:clamp(1rem,2vw,1.5rem);}
.legal{padding-bottom:clamp(4rem,9vw,8rem);}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.25;color:var(--ink);margin-top:clamp(2.25rem,4vw,3rem);}
.legal h3{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-top:clamp(1.5rem,2.5vw,2rem);}
.legal p,.legal li{font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.72;color:var(--stone);text-wrap:pretty;}
.legal p{margin-top:1rem;max-width:68ch;}
.legal ul{margin-top:1rem;padding-left:1.1rem;display:flex;flex-direction:column;gap:.5rem;max-width:68ch;}
.legal li{padding-left:.35rem;}
.legal a{color:var(--ink);border-bottom:1px solid var(--clay);}
.legal a:hover{color:var(--clay);}
.legal .updated{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--slate);margin-top:.6rem;}
.legal .placeholder{color:var(--clay);background:rgba(168,105,74,.09);padding:0 .3em;border-radius:2px;}
.legal .note{font-family:var(--serif);font-style:italic;color:var(--slate);font-size:.98rem;border-left:2px solid var(--sand);padding-left:1rem;margin-top:1.5rem;}

/* ── Legal pages (Imprint / Privacy) — the current black/white DNA. Scoped to
   .legal-page on <body>, so no other page or section inherits any of it: pure
   white surface, pure black headings, hierarchy from black opacity only, and
   none of the legacy clay/stone/slate tokens. Layout, measure and vertical
   rhythm come from the shared .page-head / .legal rules above, unchanged. ── */
.legal-page{background:#FFFFFF;}
.legal-page .page-head>.eyebrow{color:rgba(0,0,0,.5);}
.legal-page .page-head .h2{color:#000000;}
.legal-page .legal h2{color:#000000;}
.legal-page .legal h3{color:rgba(0,0,0,.5);}
.legal-page .legal p,
.legal-page .legal li{color:rgba(0,0,0,.74);}
.legal-page .legal a{color:#000000;border-bottom-color:rgba(0,0,0,.35);}
.legal-page .legal a:hover{color:#000000;border-bottom-color:#000000;}
.legal-page .legal .updated{color:rgba(0,0,0,.5);}
.legal-page .legal .note{color:rgba(0,0,0,.6);border-left-color:rgba(0,0,0,.14);}
.legal-page .legal .placeholder{color:#000000;background:rgba(0,0,0,.06);}
/* Header chrome on the legal pages: white bar, black type — the same page-scoped
   pattern .consult-page uses. The shared base header rules are untouched. */
.legal-page .site-header{background:#FFFFFF;backdrop-filter:none;-webkit-backdrop-filter:none;}
.legal-page .site-header.is-scrolled{border-bottom-color:rgba(0,0,0,.12);}
.legal-page .logo,
.legal-page .site-header .menu-toggle{color:#000000;}
.legal-page .nav-left a,
.legal-page .nav-right a,
.legal-page .lang-select__input,
.legal-page .lang-nav__toggle,
.legal-page .lang-nav__list button{color:rgba(0,0,0,.66);}
.legal-page .nav-left a:hover,
.legal-page .nav-left a:focus-visible,
.legal-page .nav-right a:hover,
.legal-page .nav-right a:focus-visible,
.legal-page .lang-select__input:hover,
.legal-page .lang-select__input:focus-visible,
.legal-page .lang-nav__toggle:hover,
.legal-page .lang-nav__toggle:focus-visible,
.legal-page .lang-nav__list button.is-current,
.legal-page .lang-nav__list button:hover,
.legal-page .lang-nav__list button:focus-visible{color:#000000;}

/* ==========================================================================
   Buyer's Guide — knowledge library system
   Hub, category sections, guide cards/rows, and the reusable guide template.
   Reuses existing tokens, section rhythm and component patterns throughout;
   no new colours, no new type scale.
   ========================================================================== */

/* Small strip marking a page as scaffolding/reference rather than live content. */
.template-banner{
  background:var(--shadow);color:#9A8C70;text-align:center;
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px;
}

/* Generic "not yet filled in" tag — same clay-tint treatment as .legal .placeholder,
   generalised so it can be used anywhere in the guide system. */
.ph-tag{
  display:inline-block;color:var(--clay);background:rgba(168,105,74,.09);
  padding:.15em .5em;border-radius:2px;font-family:var(--mono);font-size:.85em;letter-spacing:.02em;
}

/* ── Hub hero — text only, no image, no CTA ─────────────────────────────── */
.guide-hero{padding-block:clamp(4.5rem,10vw,8rem) clamp(2.25rem,4vw,3rem);}
.guide-hero__intro{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.02rem,1.35vw,1.2rem);
  line-height:1.72;color:var(--stone);max-width:56ch;margin-top:clamp(1.5rem,2.6vw,2.1rem);text-wrap:pretty;
}

/* ── Category sections (hub) ────────────────────────────────────────────── */
.guide-cat__head{max-width:64ch;}
.guide-cat__grid,.guide-cat__list{margin-top:clamp(3.5rem,6vw,5.5rem);}
/* Mobile-only: a touch more room before the first card/row (44px effective floor of
   the clamp above → 68px). Placed after the base rule it overrides — same (0,1,0)
   specificity, so it must come later in source order to win the cascade. */
@media (max-width:767.98px){
  .guide-cat__grid,.guide-cat__list{margin-top:76px;}
}
/* Buyer's Guide hub — the three category sections (Practical Guides / Smarter
   Buying / Costa Blanca Knowledge) get slightly more air between them than the
   site-wide --section-y default, so the library reads a touch more open and
   luxurious. Scoped to these three ids only — every other page's .section
   rhythm (incl. the homepage) is untouched. Typography and grid layout unchanged. */
#before-you-start,#essential-knowledge{padding-block:clamp(4.5rem,9vw,9.5rem);}

/* ── Shared card anatomy — numeral, title, status, arrow ────────────────── */
.guide-num{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;color:var(--clay);}
.guide-status{font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);}
.guide-arrow{color:var(--slate);font-family:var(--sans);line-height:1;}

/* Layout option A — tile grid (three-column hairline grid, matches .grid/.cell) */
.guides-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--sand);border:1px solid var(--sand);border-radius:2px;
}
.section--alt .guides-grid{background:#D2C6B0;border-color:#D2C6B0;}
@media (max-width:700px){.guides-grid{grid-template-columns:1fr;}}
.guide-card{
  background:var(--ivory);padding:clamp(1.75rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;gap:clamp(1.75rem,4vw,3rem);min-height:190px;
  transition:background .3s var(--ease);
}
.guide-card:hover{background:#F2ECE0;}
.section--alt .guide-card{background:var(--travertine);}
.section--alt .guide-card:hover{background:#EDE3D2;}
.guide-card__top{display:flex;flex-direction:column;gap:.85rem;}
.guide-card__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.28;color:var(--ink);text-wrap:pretty;}
.guide-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.guide-card--filler{pointer-events:none;}

/* Layout option B — editorial row list (Notion-style index) */
.guides-list{border-top:1px solid var(--hairline);}
.section--alt .guides-list{border-top-color:#D2C6B0;}
.guide-row{
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.75rem);
  padding-block:clamp(1.15rem,2.2vw,1.6rem);border-bottom:1px solid var(--hairline);
  transition:background .3s var(--ease);
}
.guide-row:hover{background:#F2ECE0;}
.section--alt .guide-row{border-bottom-color:#D2C6B0;}
.section--alt .guide-row:hover{background:#EDE3D2;}
.guide-row .guide-num{flex:none;width:2.4ch;}
.guide-row__title{flex:1;min-width:0;font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--ink);text-wrap:pretty;}
.guide-row__meta{flex:none;display:flex;align-items:center;gap:clamp(.85rem,2vw,1.5rem);}

/* ── Reusable guide template — structural placeholders ──────────────────── */
.gt-breadcrumb{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:var(--slate);}
.gt-breadcrumb a{color:var(--slate);border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease);}
.gt-breadcrumb a:hover{color:var(--clay);border-color:var(--clay);}

.gt-content-ph{
  margin-top:clamp(1.75rem,3vw,2.5rem);border:1px dashed var(--sand);border-radius:2px;
  padding:clamp(2rem,3.5vw,2.75rem);
}
.section--alt .gt-content-ph{border-color:#C7BAA0;}
.gt-content-ph__cap{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--slate);line-height:1.7;text-transform:uppercase;}

.gt-facts{margin-top:clamp(2rem,3.2vw,2.75rem);border-top:1px solid var(--hairline);display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));column-gap:clamp(1.5rem,3vw,2.75rem);}
.section--alt .gt-facts{border-top-color:#D2C6B0;}
.gt-facts>div{display:flex;flex-direction:column;gap:.4rem;padding:clamp(1.15rem,2vw,1.5rem) 0;border-bottom:1px solid var(--hairline);}
.section--alt .gt-facts>div{border-bottom-color:#D2C6B0;}

.gt-mistakes,.gt-takeaways{border-top:1px solid var(--hairline);margin-top:clamp(1.5rem,2.5vw,2.25rem);}
.section--alt .gt-mistakes,.section--alt .gt-takeaways{border-top-color:#D2C6B0;}
.gt-mistakes>div,.gt-takeaways>div{padding-block:clamp(1.1rem,2vw,1.5rem);border-bottom:1px solid var(--hairline);display:flex;gap:1.1rem;align-items:baseline;}
.section--alt .gt-mistakes>div,.section--alt .gt-takeaways>div{border-bottom-color:#D2C6B0;}

.gt-journey{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(2rem,3.5vw,2.75rem);margin-top:clamp(2.5rem,4.5vw,3.75rem);}
.gt-journey__item{border-top:1px solid #D2C6B0;padding-top:clamp(1.25rem,2.2vw,1.75rem);}
.gt-journey__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--ink);line-height:1.3;margin-top:.9rem;}
.gt-journey__why{font-family:var(--serif);font-weight:300;font-style:italic;font-size:.98rem;color:var(--stone);margin-top:.6rem;line-height:1.5;}
.gt-journey__arrow{margin-top:1.15rem;display:inline-block;color:var(--clay);}

.gt-cta{max-width:56ch;}
@media (min-width:768px){.gt-cta{max-width:64ch;}}
.gt-cta .body:first-child{margin-top:clamp(1.75rem,3.2vw,2.75rem);}
.gt-cta .body+.body{margin-top:clamp(1.25rem,2.4vw,1.75rem);}
.gt-cta .pull{margin-top:clamp(2rem,4vw,3rem);}
.gt-cta .btn{margin-top:clamp(1.25rem,2.4vw,2rem);}

/* Discreet firm attribution — closes the article body before related guides/CTA. */
.gt-author{margin-top:clamp(2.5rem,4.5vw,3.75rem);padding-top:clamp(1.5rem,2.5vw,2rem);border-top:1px solid var(--hairline);}
.section--alt .gt-author{border-top-color:#D2C6B0;}
.gt-author__k{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);}
.gt-author__name{font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:.02em;color:var(--ink);margin-top:.5rem;}
.gt-author__role{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--slate);margin-top:.35rem;line-height:1.6;}

/* ── Editorial guide entries — title + description + "Read Guide →" only, no
   cards, no metadata. Shared anatomy (.guide-entry__title/__desc/__link) is
   reused by the hub's ledger grid (.guide-entries) and the guide template's
   three-column Related Guides (.related-guides). ── */
/* Chapter rhythm — generous, consistent section spacing so every part of a
   guide (and the hub's categories) reads as a clearly separated chapter. */
@media (min-width:768px){
  #gt-section-h{max-width:none;font-size:calc(clamp(1.9rem,4.75vw,3.82rem) * .95);}
}
#gt-cta-h{max-width:38ch;margin-inline:auto;text-align:center;}
section[aria-labelledby="gt-cta-h"]{padding-bottom:calc(var(--section-y) * 1.5);}
@media (min-width:768px){section[aria-labelledby="gt-cta-h"]{padding-bottom:calc(var(--section-y) * 1.25);}}
[data-guide-overlay] .container--reading,[data-guide-overlay] .gt-cta{text-align:center;margin-inline:auto;}
[data-guide-overlay] .h2,[data-guide-overlay] .lead,[data-guide-overlay] .body,[data-guide-overlay] .footer__line{margin-inline:auto;}
[data-guide-overlay] .gt-important>div,[data-guide-overlay] .gt-takeaways>div{display:block;padding-top:calc(clamp(1.4rem,2.4vw,1.85rem) + 12px);}
[data-guide-overlay] .kl__panel{text-align:center;}
[data-guide-overlay] .kl__list{display:inline-flex;text-align:left;}
[data-guide-overlay] .gt-compare__col .kl__list{align-self:center;}
[data-guide-overlay] .gt-important,[data-guide-overlay] .gt-takeaways{border-top-color:transparent!important;position:relative;}
[data-guide-overlay] .gt-important::before,[data-guide-overlay] .gt-takeaways::before{content:"";position:absolute;top:0;left:9%;right:9%;height:1px;background:var(--hairline);}
[data-guide-overlay] .section--alt .gt-important::before,[data-guide-overlay] .section--alt .gt-takeaways::before{background:#D2C6B0;}
[data-guide-overlay] .gt-important>div,[data-guide-overlay] .gt-takeaways>div{border-bottom-color:transparent!important;position:relative;}
[data-guide-overlay] .gt-important>div::after,[data-guide-overlay] .gt-takeaways>div::after{content:"";position:absolute;left:9%;right:9%;bottom:0;height:1px;background:var(--hairline);}
[data-guide-overlay] .section--alt .gt-important>div::after,[data-guide-overlay] .section--alt .gt-takeaways>div::after{background:#D2C6B0;}
[data-guide-overlay] .gt-takeaways,[data-guide-overlay] .gt-important{text-align:center;}

/* Desktop only — Buyer's Guide topic cards reuse the "Before You Sign" card
   grid (.questions/.questions__item @768px) verbatim: same grid, card border,
   radius, shadow, hover and kicker/headline/hint type scale. Mobile accordion
   (.kl) markup and styling are untouched below 768px. */
@media (min-width:768px){
  [data-guide-overlay] .gt-takeaways,
  [data-guide-overlay] .gt-important{
    display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
    gap:clamp(1.5rem,2.4vw,2rem);margin-top:clamp(3.5rem,5.5vw,4.5rem);border-top:none;
  }
  [data-guide-overlay] .gt-takeaways::before,
  [data-guide-overlay] .gt-important::before{display:none;}
  [data-guide-overlay] .gt-takeaways>div,
  [data-guide-overlay] .gt-important>div{
    display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
    padding:clamp(1.5rem,2vw,1.85rem) clamp(1.5rem,2vw,1.85rem) clamp(1.65rem,2.2vw,2rem);
    border:1px solid var(--hairline);border-color:var(--hairline)!important;border-radius:6px;
    box-shadow:0 1px 2px rgba(34,28,21,.04);
    transition:box-shadow .5s var(--ease),border-color .5s var(--ease),transform .4s var(--ease);
  }
  [data-guide-overlay] .gt-compare{grid-template-columns:1fr;column-gap:0;margin-top:.5rem!important;}
  [data-guide-overlay] .gt-compare__col{gap:.4rem;padding-block:clamp(.3rem,.6vw,.45rem);}
  [data-guide-overlay] .gt-compare__col:first-child{padding-top:0;}
  [data-guide-overlay] .gt-compare__col:last-child{padding-bottom:0;}
  [data-guide-overlay] .gt-compare__divider{display:none;}
  [data-guide-overlay] .gt-compare__title{max-width:fit-content;margin-inline:auto;border-bottom:none;padding-bottom:.2rem;font-size:.7rem;font-weight:500;letter-spacing:.08em;color:var(--slate);}
  [data-guide-overlay] .gt-takeaways>div::after,
  [data-guide-overlay] .gt-important>div::after{display:none;}
  [data-guide-overlay] .section--alt .gt-takeaways>div,
  [data-guide-overlay] .section--alt .gt-important>div{border-color:#D2C6B0!important;}
  [data-guide-overlay] .gt-takeaways>div:hover,
  [data-guide-overlay] .gt-important>div:hover{
    border-color:#C9BCA1!important;
    box-shadow:0 10px 22px -16px rgba(34,28,21,.24),0 2px 7px -2px rgba(34,28,21,.1);
  }
  [data-guide-overlay] .section--alt .gt-takeaways>div:hover,
  [data-guide-overlay] .section--alt .gt-important>div:hover{border-color:#BCAC88!important;}

  [data-guide-overlay] .gt-takeaways h3.h3,
  [data-guide-overlay] .gt-important h3.h3{
    font-size:clamp(1.18rem,1.7vw,1.45rem);line-height:1.36;font-style:normal;
    max-width:26ch;margin-inline:auto;
  }

  [data-guide-overlay] .kl__toggle{display:none;}
  [data-guide-overlay] .kl__panel,
  [data-guide-overlay] .kl__toggle[aria-expanded="true"] + .kl__panel{grid-template-rows:1fr;}
  [data-guide-overlay] .kl__panel-inner{overflow:visible;}
  [data-guide-overlay] .gt-takeaways .kl,
  [data-guide-overlay] .gt-important .kl{margin-top:.5rem!important;}
  [data-guide-overlay] .kl__list{display:flex;max-width:none;gap:.32rem;padding-top:calc(2.246rem + clamp(.4rem,.8vw,.55rem));width:fit-content;margin-inline:auto;text-align:left;}
  [data-guide-overlay] #kl-nie .kl__list{gap:.68rem;padding-top:calc(2.246rem + clamp(.4rem,.8vw,.55rem) - (clamp(1.18rem,1.7vw,1.45rem) * 1.36));}
  section[aria-labelledby="gt-important-h"] .kl__list{padding-top:1rem;}
  section.gt-chapter--intro .kl__list{padding-top:1rem;}
  [data-guide-overlay] .kl__list li{font-size:.8rem;line-height:1.4;padding-left:.85em;}
  [data-guide-overlay] .gt-takeaways{grid-template-columns:repeat(6,1fr);}
  [data-guide-overlay] .gt-takeaways>div{grid-column:span 2;}
  [data-guide-overlay] .gt-takeaways>div:nth-child(4){grid-column:2/4;}
  [data-guide-overlay] .gt-takeaways>div:nth-child(5){grid-column:4/6;}
}
@media (min-width:768px) and (hover:hover){
  [data-guide-overlay] .gt-takeaways>div:hover,
  [data-guide-overlay] .gt-important>div:hover,
  .questions__item:hover{transform:translateY(-3px);}
}

/* ══ Chapter 04 closing — DESKTOP/TABLET colour alignment ═════════════════
   Brings the last chapter onto the same pure black/white language as the rest
   of the guide (the ≤767.98px block above is already correct and untouched).
   Colour only: the desktop composition — measure, margins, type scale and the
   centred CTA — is left exactly as it is. ════════════════════════════════════ */
@media (min-width:768px){
  [data-guide-overlay] section[aria-labelledby="gt-cta-h"]{background:#000000;border-bottom-color:rgba(255,255,255,.15);}
  [data-guide-overlay] section[aria-labelledby="gt-cta-h"] .h2{color:#FFFFFF;}
  [data-guide-overlay] .gt-cta .body{color:#FFFFFF;}
  [data-guide-overlay] .gt-cta .pull{color:#FFFFFF;}
  [data-guide-overlay] .gt-cta .btn{background:transparent;color:#FFFFFF;border-color:#FFFFFF;}
  [data-guide-overlay] .gt-cta .btn:hover{background:#FFFFFF;color:#000000;border-color:#FFFFFF;}
}

.guide-entries{border-top:1px solid var(--hairline);}
.section--alt .guide-entries{border-top-color:#D2C6B0;}
.guide-entry{
  display:grid;grid-template-columns:1fr;gap:1rem;
  padding-block:clamp(2.25rem,4.5vw,3.5rem);border-bottom:1px solid var(--hairline);
  transition:opacity .3s var(--ease);
}
.section--alt .guide-entry{border-bottom-color:#D2C6B0;}
@media (min-width:768px){
  .guide-entry{grid-template-columns:minmax(0,1.05fr) minmax(0,1.7fr);column-gap:clamp(2.5rem,5vw,4rem);align-items:baseline;gap:.75rem;}
}
.guide-entry__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.28;color:var(--ink);text-wrap:pretty;}
.guide-entry__desc{font-family:var(--serif);font-weight:300;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6;color:var(--stone);text-wrap:pretty;}
.guide-entry__link{display:inline-flex;align-items:center;gap:.5em;margin-top:.9rem;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);}
.guide-entry__time{display:block;margin-top:.5rem;font-family:var(--sans);font-weight:400;font-size:.66rem;color:var(--slate);}
.guide-entry__link span{display:inline-block;transition:transform .3s var(--ease);}
@media (hover:hover){
  .guide-entry:hover,.related-guides__item:hover{opacity:.7;}
  .guide-entry:hover .guide-entry__link span,.related-guides__item:hover .guide-entry__link span{transform:translateX(3px);}
}

/* Related Guides — three-column variant of the same editorial anatomy */
.related-guides{display:grid;grid-template-columns:1fr;gap:clamp(2.75rem,5vw,3.25rem);margin-top:clamp(3rem,5vw,4.25rem);}
@media (min-width:768px){.related-guides{grid-template-columns:repeat(3,1fr);column-gap:clamp(2.25rem,4vw,3.25rem);}}
.related-guides__item{border-top:1px solid var(--hairline);padding-top:clamp(1.5rem,2.5vw,2rem);display:flex;flex-direction:column;gap:.75rem;transition:opacity .3s var(--ease);}
.section--alt .related-guides__item{border-top-color:#D2C6B0;}

/* ── Comparison — reusable two-option comparison (e.g. Off-Plan vs Turnkey
   Ready, Developer vs Resale). A single rule under each option's label, then
   quiet label/value pairs with generous rhythm — an editorial comparison,
   not a spreadsheet: no per-row grid lines, no table structure. ── */
.gt-compare{display:grid;grid-template-columns:1fr;margin-top:clamp(2.5rem,4vw,3.25rem);}
.gt-compare__col{display:flex;flex-direction:column;gap:clamp(.6rem,1.3vw,.85rem);padding-block:clamp(1.1rem,2vw,1.4rem);}
.gt-compare__col:first-child{padding-top:0;}
.gt-compare__col:last-child{padding-bottom:0;}
.gt-compare__divider{height:1px;background:var(--hairline);}
.section--alt .gt-compare__divider{background:#D2C6B0;}
.gt-compare__title{font-family:var(--mono);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding-bottom:clamp(.55rem,1.1vw,.75rem);border-bottom:1px solid var(--hairline);}
.section--alt .gt-compare__title{border-bottom-color:#D2C6B0;}
.gt-compare__row{display:flex;flex-direction:column;gap:.5rem;}
.gt-compare__k{font-family:var(--mono);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);}
.gt-compare__v{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--ink);text-wrap:pretty;}
@media (min-width:768px){
  .gt-compare{grid-template-columns:1fr 1px 1fr;column-gap:clamp(2.75rem,5vw,4.5rem);align-items:stretch;}
  .gt-compare__col{padding-block:0;}
  .gt-compare__divider{height:auto;}
}

/* ── Important Information — flagged short statements; same anatomy as
   .gt-mistakes, generalised name so it reads correctly wherever it's used. ── */
.gt-important{border-top:1px solid var(--hairline);margin-top:clamp(2rem,3.2vw,2.75rem);}
.section--alt .gt-important{border-top-color:#D2C6B0;}
.gt-important>div{padding-block:clamp(1.4rem,2.4vw,1.85rem);border-bottom:1px solid var(--hairline);display:flex;gap:1.1rem;align-items:baseline;}
.section--alt .gt-important>div{border-bottom-color:#D2C6B0;}

/* ── Knowledge layers — compact "Key Considerations" disclosure beneath a
   Buyer's Guide topic. Ships collapsed; a plain toggle (no accordion chrome)
   reveals a short list. Independent — opening one never closes another. ── */
.kl__toggle{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);background:none;border:none;padding:0;cursor:pointer;}
.kl__label{}
.kl__icon{position:relative;width:.65em;height:.65em;flex:none;}
.kl__icon::before,.kl__icon::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--clay);transform:translateY(-50%);}
.kl__icon::after{transition:transform .3s var(--ease);transform:translateY(-50%) rotate(90deg);}
.kl__toggle[aria-expanded="true"] .kl__icon::after{transform:translateY(-50%) rotate(0deg);}
@media (hover:hover){
  .kl__toggle:hover{color:var(--ink);}
  .kl__toggle:hover .kl__icon::before,.kl__toggle:hover .kl__icon::after{background:var(--ink);}
}
.kl__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
.kl__toggle[aria-expanded="true"] + .kl__panel{grid-template-rows:1fr;}
.kl__panel-inner{overflow:hidden;}
.kl__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:.85rem 0 0;list-style:none;}
.kl__list li{font-family:var(--serif);font-weight:300;font-size:.95rem;line-height:1.5;color:var(--stone);padding-left:1em;position:relative;text-wrap:pretty;}
.kl__list li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:1px;background:var(--clay);}

/* Spanish legal term — sits between the guide title and the standfirst */
.gt-hero__term{margin-top:.75rem;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--clay);}

/* ==========================================================================
   Insights — dated article system
   Hub (filters, featured story, chronological list) + the per-article meta
   row. Shares every token, the .guide-hero/.gt-*/.faq/.body components and
   the section rhythm above; only the pieces below are new. Scales to
   20–50 articles without a build step — see README.md for the two-weekly
   authoring workflow.
   ========================================================================== */

/* Category label + date/read-time meta, reused on the hub and every article */
.insight-tag{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);}
.insight-dot{font-family:var(--mono);color:var(--sand);}
.insight-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--slate);}
.insight-meta time{color:var(--slate);}

/* Category filters — text underline pills, same vocabulary as .nav-links */
.insight-filters{display:flex;flex-wrap:wrap;column-gap:clamp(1.5rem,3vw,2.5rem);row-gap:.75rem;}
.insight-filter{
  position:relative;background:none;border:0;cursor:pointer;padding:0 0 7px;
  font-family:var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);transition:color .2s var(--ease);
}
.insight-filter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.insight-filter:hover{color:var(--ink);}
.insight-filter.is-active{color:var(--ink);}
.insight-filter.is-active::after{transform:scaleX(1);}

/* Featured (most recent) story — a single, larger lead treatment, no image needed */
.insight-featured{display:block;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--ink);border-bottom:1px solid var(--hairline);}
.insight-featured__title{
  font-family:var(--serif);font-weight:300;color:var(--ink);
  font-size:clamp(1.65rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.01em;
  margin-top:1.1rem;max-width:24ch;text-wrap:balance;transition:color .2s var(--ease);
}
.insight-featured:hover .insight-featured__title{color:var(--clay);}
.insight-featured__dek{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--stone);margin-top:1rem;max-width:56ch;text-wrap:pretty;}
.insight-featured__cta{display:inline-flex;align-items:center;gap:.55em;margin-top:clamp(1.5rem,2.5vw,2rem);font-family:var(--sans);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);}

/* Inline link inside the hub/guide intro paragraph (e.g. hub → Buyer's Guide) */
.guide-hero__intro a{color:var(--ink);border-bottom:1px solid var(--clay);}
.guide-hero__intro a:hover{color:var(--clay);}

/* Chronological list — the pattern that scales to many articles */
.insight-row{
  display:grid;grid-template-columns:minmax(150px,.85fr) minmax(0,2.5fr) auto auto;
  gap:clamp(.5rem,2vw,1.75rem);align-items:baseline;
  padding-block:clamp(1.15rem,2.2vw,1.6rem);border-bottom:1px solid var(--hairline);
  transition:background .3s var(--ease);
}
.insight-row:hover{background:#F2ECE0;}
.insight-row:hover .insight-row__title{color:var(--clay);}
.insight-row__title{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.32;color:var(--ink);text-wrap:pretty;transition:color .2s var(--ease);}
.insight-row__read{font-family:var(--mono);font-size:.68rem;color:var(--slate);white-space:nowrap;}
.insight-row__arrow{color:var(--clay);font-family:var(--sans);line-height:1;}
@media (max-width:700px){
  .insight-row{grid-template-columns:1fr auto;grid-template-areas:"meta meta" "title title" "read arrow";row-gap:.5rem;}
  .insight-row__meta{grid-area:meta;}
  .insight-row__title{grid-area:title;}
  .insight-row__read{grid-area:read;}
  .insight-row__arrow{grid-area:arrow;justify-self:end;}
}

/* Buyer's Guide cards that now point at a live Insights article — tag/arrow
   pick up the accent automatically by virtue of being a real link (<a>),
   vs. the still-muted "Coming soon" <article> cards. No extra class needed. */
a.guide-card .guide-status,a.guide-card .guide-arrow{color:var(--clay);}

/* ── Article header meta + inline body links (article pages only) ──────── */
.insight-article-head{max-width:none;}
.insight-article-head .insight-meta{margin-top:1.1rem;}
.insight-article-head h1{margin-top:.85rem;max-width:none;}


/* ── Contact / consultation experiences — current LARECO colour DNA ────────────
   The three form overlays (.consult-overlay--form) and the standalone
   consultation page (.consult-page) run on the same black and white already used
   by #approach, #process and the home footer: #111111 surface, #FFFFFF type,
   white-alpha hairlines. Scoped deliberately, so .section--dark everywhere else
   and the Buyer's Guide overlay keep their own treatment. ── */
.consult-overlay--form{background:#111111;}
.consult-page{background:#111111;color:#FFFFFF;}
.consult-overlay--form .consult-overlay__inner,
.consult-page .section--dark{background:#111111;color:#FFFFFF;border-bottom:none;}
.consult-overlay--form .eyebrow,
.consult-page .eyebrow{color:rgba(255,255,255,.55);}
.consult-overlay--form .h2,
.consult-page .h2{color:#FFFFFF;}
.consult-overlay--form .lead,.consult-overlay--form .body,
.consult-page .lead,.consult-page .body{color:rgba(255,255,255,.72);}
.consult-overlay--form .body a,
.consult-page .body a{color:#FFFFFF;border-bottom-color:rgba(255,255,255,.4);}
.consult-overlay--form .body a:hover,
.consult-page .body a:hover{color:#FFFFFF;border-bottom-color:#FFFFFF;}
/* Quiet white focus ring in place of the site's clay one, inside these surfaces only. */
.consult-overlay--form :focus-visible,
.consult-page :focus-visible,
.cookie-consent :focus-visible{outline-color:rgba(255,255,255,.65);}

/* Text selection inside these surfaces: the global clay highlight would be the last
   warm accent left in the forms. */
.consult-overlay--form ::selection,
.consult-page ::selection{background:#FFFFFF;color:#111111;}
.consult-page .skip-link{background:#111111;color:#FFFFFF;}

/* Standalone page header: brand + close only, on the same black as the form. */
.consult-page .site-header{background:#111111;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.consult-page .site-header.is-scrolled{border-bottom-color:rgba(255,255,255,.15);}
.consult-page .site-header .brand{color:#FFFFFF;}
.consult-page .footer__langs-band{border-top-color:rgba(255,255,255,.15);}
.consult-page .footer__langs-band__k,
.consult-page .footer__langs-band__brand{color:rgba(255,255,255,.5);}
.consult-page .footer__langs-band__list li{color:#FFFFFF;}
.consult-page .footer__langs-band__list li:not(:last-child)::after{color:rgba(255,255,255,.35);}

/* One close language across every contact experience: understated uppercase text,
   no box, 44px tap target, white DNA. */
.consult-overlay--form .consult-overlay__close{color:rgba(255,255,255,.62);}
.consult-overlay--form .consult-overlay__close:hover{color:#FFFFFF;}
/* Keyboard focus reads as an underline, never a box. */
.consult-overlay--form .consult-overlay__close:focus-visible{outline:none;color:#FFFFFF;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;}
.consult-overlay--form:focus-visible,.consult-overlay--form:focus{outline:none;}
.consult-page__close{
  grid-column:3;justify-self:end;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding:12px;margin-right:-12px;
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);transition:color .2s var(--ease);
}
.consult-page__close:hover{color:#FFFFFF;}
.consult-page__close:focus-visible{outline:none;color:#FFFFFF;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;}

/* Submit button inside these forms: true white rather than the warm bone default. */
.consult-overlay--form .form__submit .btn,
.consult-page .form__submit .btn{border-color:rgba(255,255,255,.5);color:#FFFFFF;}
.consult-overlay--form .form__submit .btn:hover,
.consult-page .form__submit .btn:hover{background:#FFFFFF;color:#111111;border-color:#FFFFFF;box-shadow:0 10px 22px -10px rgba(0,0,0,.5);}


/* ══ Buyer's Guide · Chapter 01 "Seeing Beyond the Property" ═══════════════
   The chapter now speaks the landing page's mobile "The Bigger Picture"
   language: pure black on pure white, serif titles, a quiet plus/minus
   accordion with no cards, boxes, borders or beige. Everything is scoped to
   .gt-chapter--intro / .gt1-* inside the guide overlay — chapters 02–04 and
   every landing-page component (including the .kl accordion they use) are
   untouched. Base styles are deliberately neutral so the chapter holds up at
   any width; the ≤767.98px block below carries the mobile-specific tuning.
   ══════════════════════════════════════════════════════════════════════════ */
[data-guide-overlay] .gt-chapter--intro{background:#FFFFFF;color:#000000;}
[data-guide-overlay] .gt-chapter--intro .eyebrow{color:rgba(0,0,0,.45);}
[data-guide-overlay] .gt-chapter--intro .h2{color:#000000;}
[data-guide-overlay] .gt-chapter--intro .lead{color:rgba(0,0,0,.72);}

/* Full-bleed editorial image — the same structural role the landing page's
   large photograph plays, with its own Costa Blanca terrace rather than a
   reuse of the villa/pool shot. */
.gt1-figure{margin:clamp(2.5rem,7vw,3.25rem) 0 0;}
.gt1-figure img{display:block;width:100%;height:clamp(360px,118vw,540px);object-fit:cover;object-position:center 42%;}

.gt1-explore__k{
  margin-top:clamp(2.5rem,7vw,3.25rem);text-align:center;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(0,0,0,.45);
}
.gt1-acc{margin-top:clamp(1.25rem,3.5vw,1.75rem);}
.gt1-acc__h{margin:0;}
.gt1-acc__toggle{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;width:100%;
  background:none;border:none;padding:.95rem 0;cursor:pointer;
  font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.3;
  color:#000000;text-align:center;
}
.gt1-acc__icon{position:relative;flex:none;width:.58em;height:.58em;}
.gt1-acc__icon::before,.gt1-acc__icon::after{content:"";position:absolute;background:rgba(0,0,0,.55);}
.gt1-acc__icon::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
.gt1-acc__icon::after{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);transition:opacity .25s var(--ease);}
.gt1-acc__toggle[aria-expanded="true"] .gt1-acc__icon::after{opacity:0;}
.gt1-acc__toggle:focus-visible{outline:2px solid #000000;outline-offset:3px;}
.gt1-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);}
.gt1-acc__panel[data-open="true"]{grid-template-rows:1fr;}
.gt1-acc__panel-in{overflow:hidden;min-height:0;}
.gt1-acc__list{
  list-style:none;margin:0;padding:.15rem 0 1.35rem;display:grid;gap:.62rem;
  text-align:center;max-width:34ch;margin-inline:auto;
}
.gt1-acc__list li{font-size:.95rem;line-height:1.6;color:rgba(0,0,0,.68);}

@media (max-width:767.98px){
  /* Explore label matches Chapter 02's mobile treatment (.88rem / .08em). */
  /* Both explore labels compute .88rem; black-on-white reads optically smaller
     than Chapter 02's white-on-black, so this one carries a hair more size to
     match its perceived prominence. */
  .gt1-explore__k{font-size:.94rem;letter-spacing:.08em;color:#000000;}
  .gt1-acc__toggle{font-size:1.22rem;padding:1.05rem 0;}
  /* Expanded content uses the full container measure — the container's own
     gutter is the only side inset, so longer lines sit on one line instead of
     wrapping. Font size unchanged; spacing tightened a touch. */
  .gt1-acc__list{max-width:none;gap:.5rem;padding:.1rem 0 1.2rem;}
  .gt1-acc__list li{font-size:.94rem;line-height:1.5;text-wrap:balance;}
}

/* ══ Buyer's Guide · Chapter 02 "What You Need to Know" ════════════════════
   Composed the way Chapter 01 is composed: a spacious white editorial opening,
   then one full-bleed field carrying the interactive content — Chapter 01 uses
   a photograph in that structural position, Chapter 02 uses black. The field is
   deliberately tall and the accordion measure deliberately narrow, so the black
   reads as the chapter's ground with air on every side rather than as a boxed
   UI panel dropped under the intro. Hierarchy is space and type only: no cards,
   boxes, rounded containers, borders, dividers or decorative rules; pure
   #000000 / #FFFFFF throughout. Chapter 01, chapters 03–04, "What Professionals
   Notice" and every landing-page component are untouched. ══════════════════ */
[data-guide-overlay] .gt2-intro{
  background:#000000;color:#FFFFFF;border-bottom:none;
  padding-bottom:clamp(3.5rem,9vw,5.5rem);
  /* Chapter 01's own 1px section hairline is drawn by the preceding section, so
     it cannot be removed from here without restyling Chapter 01 (locked). The
     black field is pulled up 1px instead, covering the rule so the chapter
     begins on pure black. */
  margin-top:-1px;
}
[data-guide-overlay] .gt2-intro .eyebrow{color:rgba(255,255,255,.5);}
[data-guide-overlay] .gt2-intro .h2{color:#FFFFFF;}
[data-guide-overlay] .gt2-intro .lead{color:rgba(255,255,255,.72);margin-top:clamp(1.25rem,2.2vw,1.75rem);}

/* One uninterrupted black chapter: the intro and the accordion field are the
   same surface, so the top padding of the lower half is dropped and the pair
   reads as a single editorial spread rather than two stacked sections. */
[data-guide-overlay] .gt2-dark{
  background:#000000;color:#FFFFFF;border-bottom:none;border-top:none;
  padding-top:0;padding-bottom:clamp(4.25rem,13vw,7.5rem);
}
/* Tablet/desktop keep the pre-polish eyebrow: mono, 500, .66rem, .2em, white at
   .5, no plus. The landing-page explore treatment is mobile-only, below. */
.gt2-dark__k{
  text-align:center;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.gt2-dark__k-icon{display:none;}
/* Desktop/tablet: reads a touch more clearly as the heading for the interactive
   area — subtly larger and pure white. Position and alignment unchanged. */
@media (min-width:768px){
  .gt2-dark__k{font-size:.76rem;color:#FFFFFF;}
}

/* Mobile — the landing page's explore-label treatment (mono, 500, .08em,
   uppercase) in full-strength pure white, one clear level above the accordion
   item titles. No plus: the label is not an interactive control. */
@media (max-width:767.98px){
  .gt2-dark__k{
    display:flex;align-items:center;justify-content:center;
    font-size:.88rem;letter-spacing:.08em;color:#FFFFFF;
  }
  .gt2-dark__k-icon{display:none;}
  /* Interactive +/− controls read a little clearer, still secondary to titles. */
  .gt2-acc .gt1-acc__icon::before,
  .gt2-acc .gt1-acc__icon::after{background:rgba(255,255,255,.78);}
}

/* Narrow architectural measure — the accordion sits in the field, it does not
   fill it. Title and +/− share one grid, so the control never shifts with
   title length and long titles (NIE Number & Spanish Bank Account) wrap in the
   first column with the control pinned right. */
.gt2-acc{
  margin-top:clamp(2.75rem,7vw,4rem);
  max-width:29rem;margin-inline:auto;
}
.gt2-acc .gt1-acc__toggle{color:#FFFFFF;align-items:start;padding:1.15rem 0;}
.gt2-acc .gt1-acc__toggle>span:first-child{text-wrap:balance;}
.gt2-acc .gt1-acc__icon{margin-top:.42em;}
.gt2-acc .gt1-acc__icon::before,
.gt2-acc .gt1-acc__icon::after{background:rgba(255,255,255,.55);}
.gt2-acc .gt1-acc__toggle:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;}
.gt2-acc .gt1-acc__list li{color:rgba(255,255,255,.72);}
.gt2-acc .gt1-acc__list{padding-bottom:1.6rem;}

/* Purchase Options — two quiet subheadings, no cards and no divider. */
.gt2-options{display:grid;gap:clamp(1.75rem,4.5vw,2.25rem);padding-bottom:1.6rem;}
.gt2-options__k{
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45);text-align:center;
}
.gt2-options .gt1-acc__list{padding-top:.75rem;padding-bottom:0;}

/* Desktop/tablet: one centred 760px accordion container. Titles share a single
   left edge, the +/− icons a single right edge, and the opened content aligns to
   that same left edge instead of centring itself. Mobile is untouched. */
@media (min-width:768px){
  .gt2-acc{width:500px;max-width:calc(100vw - 64px);margin-inline:auto;}
  .gt2-acc .gt1-acc__toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;gap:1.25rem;text-align:left;padding:1.25rem 0;
  }
  .gt2-acc .gt1-acc__icon{margin-top:0;}
  .gt2-acc .gt1-acc__list{
    max-width:none;margin-inline:0;text-align:left;justify-items:start;
  }
  .gt2-acc .gt2-options__k{text-align:left;}
  .gt2-options{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);}
  .gt2-options .gt1-acc__list{max-width:none;}
}
@media (max-width:767.98px){
  /* Same shared-axis treatment as the Bigger Picture topics. Track per group and per
     language, from the measured longest label: gt1 ES 238px / DE 233px → 15.5rem,
     EN 134px → 9.5rem; gt2 EN 169px / ES 166px → 11.25rem, DE 135px → 9.5rem. */
  .gt1-acc{--acc-track:15.5rem;}
  .gt2-acc{--acc-track:11.25rem;}
  html[lang="en"] .gt1-acc{--acc-track:9.5rem;}
  html[lang="en"] .gt2-acc{--acc-track:11.25rem;}
  html[lang="de"] .gt2-acc{--acc-track:9.5rem;}
  .gt1-acc__toggle{display:grid;grid-template-columns:minmax(0,min(var(--acc-track,15.5rem),100% - 2.25rem)) auto;justify-content:center;align-items:start;gap:.55rem;}
  .gt1-acc__icon,
  .gt2-acc .gt1-acc__icon{margin-top:.255em;}
  .gt2-acc{max-width:22rem;}
  .gt2-acc .gt1-acc__toggle{font-size:1.16rem;}
  .gt2-acc .gt1-acc__list{max-width:none;}
}

/* ══ Buyer's Guide · "What Professionals Notice" — MOBILE ONLY ═════════════
   The white counterpart to Chapter 02: pure #FFFFFF ground, pure #000000 type,
   the same centred header rhythm, the same section-level explore label (without
   a plus — it is not a control) and the same quiet one-open-at-a-time accordion.
   Closed rows show only their title and +; each item's existing secondary label
   now lives inside its expanded panel as a small editorial eyebrow. All copy is
   unchanged. Tablet/desktop are held at their existing presentation by the
   ≥768px block at the end. ═════════════════════════════════════════════════ */
@media (max-width:767.98px){
  [data-guide-overlay] section[aria-labelledby="gt-important-h"]{
    background:#FFFFFF;color:#000000;border-bottom:none;
  }

  /* Full-width portrait image block between the intro and the explore label —
     the same treatment as Chapter 01's .gt1-figure on mobile. */
  .gt3-figure{margin:clamp(2.5rem,7vw,3.25rem) 0 0;}
  .gt3-figure img{display:block;width:100%;height:clamp(360px,118vw,540px);object-fit:cover;object-position:center 50%;}
  [data-guide-overlay] section[aria-labelledby="gt-important-h"] .h2{color:#000000;}
  [data-guide-overlay] section[aria-labelledby="gt-important-h"] .lead{color:rgba(0,0,0,.72);}

  /* Section-level explore label — Chapter 02's mobile treatment, in black. */
  .gt3-explore__k{
    margin-top:clamp(2.5rem,7vw,3.25rem);text-align:center;
    font-family:var(--mono);font-weight:500;font-size:.88rem;letter-spacing:.08em;
    text-transform:uppercase;color:#000000;
  }

  /* Every legacy hairline and beige rule in this section is removed. */
  [data-guide-overlay] .gt-important{margin-top:clamp(1.5rem,4vw,2rem)!important;border-top:none;}
  [data-guide-overlay] .gt-important::before,
  [data-guide-overlay] .gt-important>div::after{display:none;}
  /* Item spacing matches Chapter 02 exactly: no padding on the item wrapper, so
     the only gap is the two 1.15rem title-row paddings meeting between rows. */
  [data-guide-overlay] .gt-important>div{border:none!important;background:none;padding-block:0;}
  /* Title row and panel are separate grid rows; .kl uses display:contents so the
     toggle can share row 1 with the title while the panel keeps row 2 to itself
     (the control therefore never covers the expanded list). */
  [data-guide-overlay] .gt-important>div>div{display:grid;grid-template-columns:1fr;}
  [data-guide-overlay] .gt-important .kl{display:contents;}
  [data-guide-overlay] .gt-important h3.h3{grid-area:1/1;}
  [data-guide-overlay] .gt-important .kl__panel{grid-area:2/1;}

  /* Closed row: label centred on the row centre, + on the same shared axis as the
     01/04 and 02/04 accordions (track from the longest measured label per language:
     ES 198px → 13rem, EN 178px → 11.5rem, DE 138px → 9.5rem). Row padding stays
     1.15rem — the 61px pitch already matches 02/04 exactly. The toggle is laid over
     the row so the whole title line is the control, at full width and touch height. */
  [data-guide-overlay] .gt-important{--acc-track:13rem;}
  html[lang="en"] [data-guide-overlay] .gt-important{--acc-track:11.5rem;}
  html[lang="de"] [data-guide-overlay] .gt-important{--acc-track:9.5rem;}
  [data-guide-overlay] .gt-important h3.h3{
    margin:0;padding:1.15rem calc(.55rem + .58rem) 1.15rem 0;color:#000000;
    font-family:var(--serif);font-weight:400;font-size:1.16rem;line-height:1.3;
    text-align:center;text-wrap:balance;
  }
  [data-guide-overlay] .gt-important .kl__toggle{
    grid-area:1/1;width:100%;
    display:grid;grid-template-columns:minmax(0,min(var(--acc-track,13rem),100% - 2.25rem)) auto;
    justify-content:center;align-items:start;gap:.55rem;
    padding:1.15rem 0 0;background:none;border:none;cursor:pointer;
  }
  [data-guide-overlay] .gt-important .kl__icon{
    grid-column:2;position:relative;flex:none;width:.58rem;height:.58rem;margin:.34rem 0 0;
    border:none;background:none;
  }
  [data-guide-overlay] .gt-important .kl__icon::before,
  [data-guide-overlay] .gt-important .kl__icon::after{
    content:"";position:absolute;background:rgba(0,0,0,.78);
  }
  [data-guide-overlay] .gt-important .kl__icon::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
  [data-guide-overlay] .gt-important .kl__icon::after{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);transition:opacity .25s var(--ease);}
  [data-guide-overlay] .gt-important .kl__toggle[aria-expanded="true"] .kl__icon::after{opacity:0;}
  [data-guide-overlay] .gt-important .kl__toggle:focus-visible{outline:2px solid #000000;outline-offset:2px;}

  /* Expanded content: the item's own eyebrow, then its existing list. */
  [data-guide-overlay] .gt-important .kl__panel-inner{padding-top:0;}
  .gt3-k{
    font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(0,0,0,.5);text-align:center;margin:0 0 .8rem;
  }
  [data-guide-overlay] .gt-important .kl__list{
    display:grid!important;gap:.6rem;padding:0 0 1.5rem;max-width:30ch;
    margin-inline:auto;text-align:center;list-style:none;
  }
  [data-guide-overlay] .gt-important .kl__list li{
    font-size:.94rem;line-height:1.55;color:rgba(0,0,0,.68);padding:0;
  }
  [data-guide-overlay] .gt-important .kl__list li::before{display:none;}
}
/* Tablet/desktop hold their existing presentation: neither the new explore label
   nor the relocated eyebrow paints there (the secondary label was already hidden
   at ≥768px, where .kl__toggle is display:none). */
@media (min-width:768px){
  .gt3-explore__k,
  .gt3-figure,
  [data-guide-overlay] .gt-important .gt3-k{display:none;}
}

/* ══ Buyer's Guide · Chapter 04 conclusion — MOBILE ONLY ═══════════════════
   The closing chapter joins the black/white DNA: pure #000000 ground, pure
   #FFFFFF type, no legacy brown or beige. The copy is now much shorter, so the
   rhythm is rebalanced around it — headline, air, two paragraphs, stronger air,
   the italic closing statement, then the CTA — with height left to the content.
   Scoped to this one section at ≤767.98px, so chapters 01–03 and every desktop
   rule are untouched. ══════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  [data-guide-overlay] section[aria-labelledby="gt-cta-h"]{
    background:#000000;
    padding-top:clamp(3.5rem,11vw,5rem);
    padding-bottom:clamp(3.75rem,12vw,5.5rem);
  }
  [data-guide-overlay] section[aria-labelledby="gt-cta-h"] .h2{color:#FFFFFF;}
  [data-guide-overlay] .gt-cta{margin-top:clamp(2.25rem,7vw,3rem);}
  [data-guide-overlay] .gt-cta .body{
    color:#FFFFFF;max-width:34ch;margin-inline:auto;
    font-size:1rem;line-height:1.68;
  }
  [data-guide-overlay] .gt-cta .body + .body{margin-top:1.15rem;}
  [data-guide-overlay] .gt-cta .pull{
    color:#FFFFFF;margin-top:clamp(2.5rem,8vw,3.25rem);
    max-width:28ch;margin-inline:auto;
  }
  [data-guide-overlay] .gt-cta .btn{
    margin-top:clamp(2.5rem,8vw,3.25rem);
    background:transparent;color:#FFFFFF;border-color:#FFFFFF;
  }
  [data-guide-overlay] .gt-cta .btn:hover{background:#FFFFFF;color:#000000;border-color:#FFFFFF;}
}

/* ══ Buyer's Guide · Chapter 01 image — TABLET & DESKTOP ONLY ══════════════
   From 768px the landscape master replaces the portrait crop (swapped in the
   <picture> media sources, so mobile never fetches it). The image keeps its own
   1672:941 ratio at full section width — no fixed height, no vertical crop, no
   zoom — so it reads as a wide cinematic editorial plate rather than an enlarged
   mobile asset. Mobile's clamp()-based height crop is untouched. ════════════ */
@media (min-width:768px){
  .gt1-figure img{height:auto;aspect-ratio:1672/941;object-fit:cover;object-position:center;}
}

/* ══ Buyer's Guide · Chapter 01 "Explore beyond the property" — ≥768px ══════
   Desktop and tablet follow the three-level composition of the landing page's
   "Before You Sign": a small centred section identifier, one compact active
   information block in the centre, and all five topics on ONE wide horizontal
   navigation line anchoring the bottom. The width contrast is deliberate — the
   active content stays a controlled reading measure while the navigation spans
   the section. Structure borrowed, dark cinematic styling not: pure #FFFFFF /
   #000000, no boxes, borders, pills, underlines, plus signs, arrows or icons.
   Everything is inside the ≥768px query; the locked mobile accordion below it
   (.gt1-acc, its plus controls and auto-close) is untouched. ════════════════ */
.gt1d{display:none;}
@media (min-width:768px){
  [data-guide-overlay] .gt-chapter--intro .gt1-acc{display:none;}
  /* Same strengthening as Chapter 03's intro copy: colour to #000 and one
     Newsreader weight step. Size, measure, line-height and position unchanged. */
  [data-guide-overlay] .gt-chapter--intro .lead{color:#000000;font-weight:400;}
  /* Full section width — the stage narrows itself, the navigation does not. */
  .gt1d{display:block;width:100%;margin-top:clamp(3.25rem,5.5vw,4.5rem);}

  /* One compact active information block. All panels share a single grid cell,
     so the stage is as tall as the longest topic and the navigation never moves. */
  /* The stage is wide enough for the five-across row; the two-column grid caps
     itself narrower. Panels share one grid cell, so the stage stays as tall as
     the tallest topic and the title and navigation never move. */
  .gt1d__stage{display:grid;grid-template-columns:minmax(0,1fr);width:100%;margin-inline:auto;}
  .gt1d__panel{
    grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease);text-align:center;
  }
  .gt1d__panel{min-width:0;}
  .gt1d__panel[data-active="true"]{opacity:1;visibility:visible;pointer-events:auto;}
  .gt1d__title{
    font-family:var(--serif);font-weight:400;color:#000000;
    font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.2;
  }
  /* One two-column system for every topic: three rows, filled column by column,
     so items 1–3 sit left and 4–6 (or 4–5) right. Three rows are always
     reserved, so switching topics never moves anything below. */
  .gt1d__list{
    list-style:none;margin:clamp(1.35rem,2.2vw,1.75rem) auto 0;padding:0;
    display:grid;grid-template-columns:max-content max-content;grid-template-rows:repeat(3,auto);
    grid-auto-flow:column;column-gap:48px;row-gap:.55rem;
    width:max-content;max-width:100%;align-items:start;text-align:left;
  }
  /* Five-item topics: one balanced centred row of five, all sharing the same
     top baseline. No isolated final item, no 2 + 2 + 1. */
  .gt1d__list li{
    display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline;
    font-size:1rem;line-height:1.5;color:#000000;font-weight:500;
  }
  /* A short typographic dash — no bullet, icon or marker. */
  .gt1d__list li::before{content:"—";color:rgba(0,0,0,.55);font-size:.85em;}

  /* One wide line, evenly distributed across the section. Typography and
     opacity carry the active state — nothing else. */
  /* The five-across row and the navigation share ONE width (--gt1d-band), so the
     component reads as a single centred system. The band is derived from the
     widest unbreakable word: 5 columns must each give ~120px of text measure,
     i.e. 5 × (120 + 8.4 dash + 7.2 gap) + 4 column gaps ≈ 48rem. */
  .gt1d{--gt1d-band:48rem;}
  .gt1d__nav{
    display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;
    gap:clamp(.7rem,1.2vw,1.15rem);width:min(100%,var(--gt1d-band));margin-inline:auto;
    margin-top:clamp(3rem,5vw,4rem);
  }
  /* One navigation-label system across the guide: the Chapter 03 category-label
     treatment (mono 500, .015em, fluid size). The cap is set by Chapter 01's own
     48rem band — the five labels must stay on one line without the band moving. */
  .gt1d__k{
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    background:none;border:none;padding:0;cursor:pointer;white-space:nowrap;
    font-family:var(--mono);font-weight:500;font-size:min(.86rem,1.2vw);letter-spacing:.015em;
    text-transform:uppercase;color:rgba(0,0,0,.58);
    transition:color .3s var(--ease);
  }
  .gt1d__k:hover{color:rgba(0,0,0,.8);}
  .gt1d__k.is-active{color:#000000;}
  .gt1d__k:focus-visible{outline:2px solid #000000;outline-offset:3px;}
  /* The explore label is the heading for that navigation — same size and weight. */
  .gt1-explore__k{font-size:min(.86rem,1.2vw);letter-spacing:.015em;color:#000000;}
}
/* Tablet — same one-line navigation, held there by reducing size and tracking
   rather than by wrapping or rearranging. */
@media (min-width:768px) and (max-width:1023.98px){
  .gt1d{margin-top:clamp(2.5rem,4.5vw,3.5rem);}
  .gt1d__list{row-gap:.5rem;}
  .gt1d{--gt1d-band:46rem;}
  /* One body size for both layout systems — switching topics never resizes copy. */
  .gt1d__list li{font-size:.9rem;gap:.45rem;line-height:1.45;}
  /* Same centred band as desktop, capped to ~72% of the tablet content width. */
  .gt1d__nav{gap:.7rem;margin-top:clamp(2.5rem,4.5vw,3.25rem);}
  .gt1d__k{font-size:min(.86rem,1.2vw);letter-spacing:.015em;}
  .gt1-explore__k{font-size:min(.86rem,1.2vw);letter-spacing:.015em;}
}
@media (min-width:1024px) and (max-width:1199.98px){
  .gt1d__k{font-size:min(.86rem,1.2vw);letter-spacing:.015em;}
}

/* ══ Chapter 02 "What You Need to Know" — DESKTOP/TABLET interaction ═══════
   The vertical accordion is replaced from 768px by a two-part editorial layout:
   topic navigation left, active topic content right. All panels share one grid
   cell, so the section height is set by the tallest topic and never changes when
   switching. No cards, borders, boxes, backgrounds or +/− icons. The ≤767.98px
   accordion (with its plus controls and auto-close) is untouched. ═══════════ */
.gt2d{display:none;}
@media (min-width:768px){
  .gt2-acc{display:none;}
  /* Same strengthening principle as Chapter 01, inverted for the black surface:
     intro copy to full white plus one Newsreader weight step. Size, measure,
     line-height and position unchanged, and it stays well below the heading. */
  [data-guide-overlay] .gt2-intro .lead{color:#FFFFFF;font-weight:400;}
  .gt2d{
    display:grid;grid-template-columns:max-content minmax(0,max-content);
    justify-content:center;column-gap:clamp(3rem,6vw,5.5rem);
    align-items:start;margin-top:clamp(2.25rem,4vw,3rem);
  }
  /* Navigation — typography and opacity only. */
  .gt2d__nav{display:grid;gap:.15rem;justify-items:start;}
  .gt2d__k{
    display:block;background:none;border:none;padding:.6rem 0;cursor:pointer;
    text-align:left;font-family:var(--serif);font-weight:400;font-size:1.05rem;
    line-height:1.3;color:rgba(255,255,255,.62);transition:color .3s var(--ease);
  }
  .gt2d__k:hover{color:rgba(255,255,255,.82);}
  .gt2d__k.is-active{color:#FFFFFF;}
  .gt2d__k:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;}

  /* Stage — one cell, so the reserved height is the tallest topic's. Because
     every topic shares that one height, centring the stage against the six-item
     navigation holds the same vertical position for all topics. */
  .gt2d__stage{display:grid;grid-template-columns:minmax(0,1fr);align-self:center;}
  .gt2d__panel{
    grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  .gt2d__panel[data-active="true"]{opacity:1;visibility:visible;pointer-events:auto;}

  /* Bullets as one compact two-column block, filled column by column. */
  .gt2d__list{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;
    grid-template-columns:max-content max-content;column-gap:48px;row-gap:.55rem;
    width:max-content;max-width:100%;align-items:start;
  }
  .gt2d__list--single{grid-template-columns:max-content;grid-template-rows:repeat(3,auto);}
  .gt2d__list li{
    display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline;
    font-size:1rem;line-height:1.5;color:#FFFFFF;font-weight:500;
  }
  .gt2d__list li::before{content:"—";color:rgba(255,255,255,.55);font-size:.85em;}

  .gt2d__options{display:grid;grid-template-columns:max-content max-content;column-gap:48px;}
  .gt2d__options-k{
    font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.9rem;
  }
}
/* Optical centring — the stage column reserves the WIDEST topic's width, so a
   narrower active topic makes the pair read left-of-centre. The whole grid is
   nudged right as one unit (transform, so no layout or height change and the
   internal nav/content spacing is untouched). */
@media (min-width:1024px){
  .gt2d{transform:translateX(clamp(2rem,3.5vw,4rem));}
}
/* ══ Chapter 03 "What Professionals Notice" — DESKTOP/TABLET interaction ═══
   The six cards are replaced from 768px by the "Before You Sign" principle:
   one shared stage above, six horizontal labels below, one topic active at a
   time. Active label = pure black, inactive = reduced opacity. No cards, boxes,
   borders, plus icons or numbers. The construction-site photograph carries the
   whole section behind a white veil, so the chapter keeps its white/black
   identity and black typography stays fully legible. The ≤767.98px accordion is
   untouched. ═══════════════════════════════════════════════════════════════ */
.gt3d{display:none;}
@media (min-width:768px){
  [data-guide-overlay] section[aria-labelledby="gt-important-h"]{
    background-color:#FFFFFF;
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.76) 66%,rgba(255,255,255,.88) 100%),
      url("assets/guide-ch03-desktop.jpg");
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.76) 66%,rgba(255,255,255,.88) 100%),
      image-set(url("assets/guide-ch03-desktop.webp") type("image/webp"),url("assets/guide-ch03-desktop.jpg") type("image/jpeg"));
    background-position:center;background-size:cover;background-repeat:no-repeat;
  }
  [data-guide-overlay] section[aria-labelledby="gt-important-h"] .gt-important{display:none;}
  /* Colour stays #000; the single smallest available weight step (Newsreader 300
     → 400 for the intro, 400 → 500 for the bullets) is what lifts these two text
     levels off the photograph. Size, line-height and spacing are untouched. */
  [data-guide-overlay] section[aria-labelledby="gt-important-h"] .lead{color:#000000;font-weight:400;}

  .gt3d{
    display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;
    align-items:end;row-gap:clamp(2.75rem,4.5vw,3.75rem);
    margin-top:clamp(3.5rem,5.5vw,4.5rem);max-width:100%;
  }
  /* Stage — all six topics share one cell, so the height is the tallest topic's
     and never changes when switching. */
  .gt3d__stage{grid-row:1;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;}
  .gt3d__panel{
    grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease);text-align:center;
  }
  .gt3d__panel[data-active="true"]{opacity:1;visibility:visible;pointer-events:auto;}
  .gt3d__title{
    margin:0;font-family:var(--serif);font-weight:400;font-style:normal;
    font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.3;color:#000000;
  }
  .gt3d__list{
    list-style:none;margin:clamp(1.35rem,2.4vw,1.9rem) auto 0;padding:0;
    display:grid;row-gap:.62rem;justify-items:start;width:max-content;max-width:100%;text-align:left;
  }
  .gt3d__list li{
    display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline;
    font-size:1rem;line-height:1.5;color:#000000;font-weight:500;
  }
  .gt3d__list li::before{content:"—";color:rgba(0,0,0,.55);font-size:.85em;}

  /* Label row — the Before You Sign strip: six evenly distributed mono labels. */
  .gt3d__nav{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;align-items:end;}
  .gt3d__k{
    display:block;width:auto;padding:.2rem .1rem;background:none;border:none;cursor:pointer;
    color:rgba(0,0,0,.58);font-weight:400;transition:color .3s var(--ease);
  }
  .gt3d__k:hover,.gt3d__k:focus-visible{color:rgba(0,0,0,.8);}
  .gt3d__k.is-active{color:#000000;font-weight:500;}
  .gt3d__k:focus-visible{outline:2px solid #000000;outline-offset:3px;}
  .gt3d__label{
    display:block;font-family:var(--mono);font-weight:inherit;
    /* Matches the bullet body size (1rem); the vw term only engages on viewports
       too narrow to fit six nowrap labels across the row at that size. */
    font-size:min(1rem,1.2vw);letter-spacing:.015em;line-height:1.35;
    text-align:center;white-space:nowrap;text-transform:uppercase;
  }
}
@media (min-width:768px) and (max-width:1023.98px){
  .gt3d__list li{font-size:.94rem;}
  .gt3d__label{font-size:min(.94rem,1.2vw);}
  .gt2d{transform:translateX(clamp(.75rem,2vw,1.5rem));}
  .gt2d{column-gap:clamp(2rem,4vw,3rem);}
  .gt2d__k{font-size:.98rem;padding:.5rem 0;}
  .gt2d__list{column-gap:2rem;}
  .gt2d__list li{font-size:.94rem;}
  .gt2d__options{column-gap:2rem;}
}

/* ══ Buyer's Guide — DESKTOP/TABLET final polish ══════════════════════════
   Chapter headlines a uniform 10% quieter, static chapter indicators, and a
   CLOSE label that takes the tone of the chapter behind it. Mobile untouched. */
@media (min-width:768px){
  /* One reusable chapter-headline rule — every chapter (01–04 and any future
     chapter) inherits it. The id selector only outranks the older #gt-section-h
     size further up the sheet; the value is identical. */
  [data-guide-overlay] .gt-chapter .h2,
  [data-guide-overlay] #gt-section-h{font-size:calc(clamp(1.9rem,4.75vw,3.82rem) * .855);}
  /* Chapter 04's closing statement holds a compact three-line block. The cap is
     em-based, so the wrap stays identical at every size the headline takes. */
  [data-guide-overlay] #gt-cta-h{max-width:min(100%,15.6em);}

  /* Chapter indicators: fixed per chapter, never dynamic. */
  [data-guide-overlay] .gt-chapter--intro .eyebrow{color:#000000;}
  [data-guide-overlay] .gt2-intro .eyebrow{color:#FFFFFF;}
  /* Chapters 03 and 04 reuse the 01/02 indicator verbatim — colour only. */
  [data-guide-overlay] section[aria-labelledby="gt-important-h"] .gt-chapter__k{color:#000000;}
  [data-guide-overlay] section[aria-labelledby="gt-cta-h"] .gt-chapter__k{color:#FFFFFF;text-align:center;}

  /* CLOSE follows the chapter under it — colour only. */
  [data-guide-overlay][data-tone="light"] .consult-overlay__close{color:#000000;}
  [data-guide-overlay][data-tone="light"] .consult-overlay__close:hover{color:rgba(0,0,0,.6);}
  [data-guide-overlay][data-tone="dark"] .consult-overlay__close{color:#FFFFFF;}
  [data-guide-overlay][data-tone="dark"] .consult-overlay__close:hover{color:rgba(255,255,255,.7);}
}
/* ══ Buyer's Guide — MOBILE: chapter indicators 03/04 + adaptive CLOSE ══════
   Chapters 03 and 04 now show their indicator on mobile too, in the exact
   .eyebrow treatment chapters 01/02 already use — colour only per ground, and
   centred like 01/02. CLOSE takes the tone of the chapter behind it (the tone
   observer already sets data-tone on the overlay). Nothing else changes. */
@media (max-width:767.98px){
  [data-guide-overlay] section[aria-labelledby="gt-important-h"] .gt-chapter__k{color:rgba(0,0,0,.45);}
  [data-guide-overlay] section[aria-labelledby="gt-cta-h"] .gt-chapter__k{color:rgba(255,255,255,.5);text-align:center;}

  [data-guide-overlay][data-tone="light"] .consult-overlay__close{color:#000000;}
  [data-guide-overlay][data-tone="dark"] .consult-overlay__close{color:#FFFFFF;}
}

/* ══ FINAL PASS · Landing-page headline consistency (MOBILE) + body-copy
   contrast (all breakpoints) ═══════════════════════════════════════════════
   1) Mobile: every major section headline paints at the shared .h2 mobile size
      (1.9rem). The section-specific display scales (.8372 / .91) and the
      line-count margin compensations that existed only to close the gap those
      scales left behind are neutralised. transform is paint-only, so the
      approved line breaks are computed unchanged; the two headlines whose
      layout box was widened past the viewport return to the container so the
      now full-size text cannot bleed off-screen. Hero, tablet and desktop
      typography are untouched.
   2) Readable landing-page copy resolves to pure #000 on light grounds and pure
      #FFFFFF on dark grounds — colour only. No font-size, weight, line-height,
      measure or spacing is touched, and secondary/interactive hierarchy
      (eyebrows, labels, dt keys, captions, dots, arrows, plus icons, hovers)
      keeps its existing subordinate tone. The Buyer's Guide is scoped out. */
@media (max-width:767.98px){
  #approach-h.approach-h-headline{
    max-width:24ch;width:auto;position:static;left:auto;
    transform:none;margin-bottom:0;
  }
  #territory-h,#process-h,#stories-h{transform:none;margin-bottom:0;}
  #our-approach .approach-intro .h2{
    max-width:34ch;width:auto;margin-inline:auto;
    transform:none;margin-bottom:0;
  }
}
#territory .lead,
#our-approach .why__prose p,
#areas .area-explorer__desc,
#areas .area-explorer__keyfacts dd,
#areas .area-explorer__more>p,
#transparency .rep__hero,
#transparency .rep__desc,
#transparency .rep__v,
#stories .testimonial__slide blockquote{color:#000000;}
#approach .lead,
#approach .process-flow__step p,
#process .lead,
#process .questions__q,
#process .questions__hint{color:#FFFFFF;}

/* ══ Language utility on the two older-header page types ═══════════════════
   consultation.html and the Insight pages use the .nav/.brand header, not
   .nav--split, so they never matched the Landing Page's reveal rule. They reuse
   the same .lang-nav component and the same router; only placement — and, on
   consultation's black header, the surface colours — are set here.
   The .nav grid keeps the wordmark in its own centre column, so nothing moves. */
@media (min-width:1100.02px){
  /* Insight pages: the site's compact composition — EN left / LARECO centred /
     nav right. It takes row 1 / column 1, which this header leaves EMPTY (the
     wordmark is pinned to column 2 and the nav list lands in column 3), so no
     existing item moves by a pixel. The nav list itself is already at capacity
     at this width, and .nav-actions is auto-placed into a second grid row — both
     pre-existing traits of this page type, deliberately left alone. */
  .nav:not(.nav--split) > .lang-nav{display:block;position:relative;grid-column:1;justify-self:start;}
}
/* Insight pages below 1100px hide .nav-actions with the rest of the horizontal
   nav, so the drawer's language row (same component as the Landing Page's) is
   what carries the switch there. */
.mobile-menu__foot + .mobile-menu__lang-foot{margin-top:1.25rem;}
/* consultation.html has no hamburger and no drawer, so its selector is visible at
   every width: EN left / LARECO centred / Close right — the compact-header
   composition the rest of the site already uses. */
.consult-page .nav .lang-nav{display:block;position:relative;grid-column:1;justify-self:start;}
@media (max-width:1100px){
  /* The global ≤1100px rule flattens .nav to flex; with a third item that would
     leave the wordmark ~19px off-centre, so this page keeps the 3-column grid. */
  .consult-page .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
  .consult-page .nav .brand{grid-column:2;justify-self:center;}
}
.consult-page .lang-nav__toggle,
.consult-page .lang-nav__list button{color:rgba(255,255,255,.62);}
.consult-page .lang-nav__toggle:hover,
.consult-page .lang-nav__toggle:focus-visible,
.consult-page .lang-nav__list button.is-current,
.consult-page .lang-nav__list button:hover,
.consult-page .lang-nav__list button:focus-visible{color:#FFFFFF;}