/* ============================================================
   BARBADOS SELLER CAMPAIGN — "Sell With Us"
   Concept 1: Private Sale, Global Reach.

   A vendor-acquisition landing page. The job is not to show
   property; it is to make an owner feel that handing over a
   valuable asset to these people is the safe, discreet choice.

   COLOUR SYSTEM
   The three client colours below are exact and are never
   approximated anywhere in this file:
     Turquoise  #0098B2   primary brand
     Gray       #878785   supporting UI
     Accent     #D66B0F   editorial emphasis, CTA highlights

   These are the CLAUDE.md values. The sibling property pages
   (honeycomb-house, sea-breeze) run a near-identical but not
   identical set — see README, "Palette".

   Everything else is a derived shade of those three or a
   structural neutral. The deep charcoal-navy surfaces, the warm
   ivory ground and the photography carry the luxury; the palette
   sits on top of them.

   Proportion, deliberately:
     neutrals + photography   dominant
     turquoise                interaction — CTAs, links, focus
     gray                     supporting information, borders
     accent                   editorial emphasis — step numerals,
                              trust figures, hairline details
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root{
  /* ====== CLIENT PALETTE — exact, never substituted ====== */
  --brand-turquoise:#0098B2;
  --brand-gray:#878785;
  --brand-accent:#D66B0F;

  /* ====== interaction shades of the palette ====== */
  --turquoise-hover:#007F98;
  --accent-hover:#BC5D0B;

  /* Derived turquoise. --turquoise-deep exists for a measured
     reason: #0098B2 on the ivory ground is 3.2:1 — fine for
     borders, icons and large shapes, short of the 4.5:1 that the
     small uppercase labels and text links need. #00647A carries
     the same hue at 6.3:1. */
  --turquoise-deep:#00647A;    /* turquoise text on light grounds  */
  --turquoise-light:#6FC8D9;   /* turquoise on dark grounds        */
  --turquoise-tint:#E2F1F5;    /* focus ring, selected chip        */
  --turquoise-line:#B4DCE6;    /* quiet branded rules              */

  /* Derived accent. #D66B0F on ivory is 3.26:1 — it clears the
     3:1 needed for large text and UI shapes, so the big serif
     numerals use it directly. The 11px uppercase labels need
     4.5:1, so they take --accent-deep (5.1:1) instead. On the
     dark surface #D66B0F reaches 5.3:1 and is used as-is. */
  --accent-deep:#A8500A;       /* small accent text on light       */
  --accent-line:#EBCBA9;       /* quiet accent hairlines           */

  /* Derived gray. #878785 is 3.6:1 on ivory, so it carries
     borders, dividers and inactive UI — not small light-ground
     text, which uses --text-muted (4.8:1). On the dark footer
     #878785 reaches 5.2:1 and is used directly. */
  --gray-line:#DFDEDB;
  --gray-line-2:#C8C6C2;

  /* ====== structural neutrals ====== */
  --text-primary:#1D1D1B;      /* headings and body                */
  --text-secondary:#54544F;    /* supporting copy           7.0:1  */
  --text-muted:#6E6E6C;        /* labels, metadata, captions 4.8:1 */

  --background-primary:#F8F6F1;  /* warm ivory, the resting ground */
  --background-alt:#F1EDE5;      /* one step deeper — sand         */
  --background-white:#FFFFFF;

  --dark-surface:#0C1820;      /* deep charcoal-navy               */
  --dark-surface-2:#081219;    /* footer, deepest ground           */

  --danger:#B3261E;
  --danger-bg:#FCEEEC;
  --success:#0F6B4F;

  --scrim:8,18,25;             /* deep charcoal-navy, for overlays */

  --sans:"Manrope","Inter","Segoe UI",system-ui,Arial,sans-serif;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --wide:82rem;
  --narrow:46rem;
  --gutter:clamp(1.25rem,4.5vw,4rem);

  --s1:.5rem;
  --s2:1rem;
  --s3:1.5rem;
  --s4:2.25rem;
  --s5:clamp(2.75rem,5vw,4.25rem);
  --s6:clamp(3.75rem,7vw,6rem);
  --s7:clamp(5rem,9vw,8rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:clamp(4rem,5.5vw,5rem);

  --z-content:1;
  --z-header:100;
  --z-modal:220;
}

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--background-primary);color:var(--text-primary);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(.95rem,.92rem + .13vw,1.0313rem);
  line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
/* height:auto stops the width/height attributes — present to reserve
   space and prevent layout shift — from overriding CSS sizing. */
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{
  outline:2px solid var(--brand-turquoise);
  outline-offset:3px;border-radius:2px;
}

.skip{
  position:absolute;left:var(--gutter);top:-100vh;z-index:999;
  background:var(--background-white);color:var(--text-primary);
  padding:.75rem 1.25rem;border-radius:2px;
  box-shadow:0 8px 30px rgba(var(--scrim),.25);
}
.skip:focus{top:1rem}

.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--narrow)}

/* ------------------------------------------------------------
   TYPE PRIMITIVES
   ------------------------------------------------------------ */

/* The eyebrow. Small, wide-tracked, uppercase. It takes the
   accent on light grounds via --accent-deep so it clears AA. */
.eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-deep);
  line-height:1.4;
}
.eyebrow--light{color:var(--brand-accent)}   /* on dark: 5.3:1 */
/* In the hero the scrim is deliberately light where the eyebrow
   falls — directly over the lit pergola — so the accent cannot
   hold there. The accent moves to the rule above it and the label
   itself goes near-white, which is legible over any part of the
   frame. Same pattern, same hierarchy, one colour swapped. */
.eyebrow--hero{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(var(--scrim),.55)}

/* An accent hairline used sparingly to open a movement. */
.rule{
  width:2.5rem;height:1px;background:var(--brand-accent);
  border:0;margin:0 0 var(--s3);
}
.rule--centre{margin-inline:auto}

.display{
  font-family:var(--serif);font-weight:300;line-height:1.05;
  letter-spacing:-.005em;
  font-size:clamp(2.5rem,1.6rem + 4.2vw,4.75rem);
}
.h2{
  font-family:var(--serif);font-weight:300;line-height:1.12;
  font-size:clamp(1.95rem,1.4rem + 2.3vw,3.15rem);
  letter-spacing:-.005em;
}
.h3{
  font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.3rem,1.15rem + .7vw,1.7rem);
}
.lede{
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);
  line-height:1.65;color:var(--text-secondary);
  max-width:38ch;
}
.lede--wide{max-width:52ch}
.body{color:var(--text-secondary);max-width:60ch}
.body + .body{margin-top:var(--s2)}

/* Supporting copy on any dark ground. .lede and .body carry a dark
   grey by default, which is invisible on the deep surfaces — every
   dark context has to restate it, so they are listed together here
   rather than left to each section to remember. */
.sec--dark .lede,.sec--dark .body,
.private .lede,.private .body,
.final .lede,.final .body{color:rgba(255,255,255,.82)}

/* ------------------------------------------------------------
   SECTION SHELL
   ------------------------------------------------------------ */
.sec{padding-block:var(--s7);position:relative}
.sec--tight{padding-block:var(--s6)}
.sec--ivory{background:var(--background-primary)}
.sec--sand{background:var(--background-alt)}
.sec--white{background:var(--background-white)}
.sec--dark{background:var(--dark-surface);color:#fff}

.sec-head{max-width:44rem;margin-bottom:var(--s5)}
.sec-head .h2{margin-top:var(--s2)}
.sec-head .lede{margin-top:var(--s3)}

/* A section head that shares its row with a photograph. The text
   column is intentionally short, so on wide viewports it would
   otherwise leave half the row empty. */
.head-split{
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr;margin-bottom:var(--s6);
}
@media (min-width:64em){
  .head-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.sec-head--flush{margin-bottom:0;max-width:34rem}
.head-media img{
  width:100%;border-radius:2px;
  box-shadow:0 24px 60px -30px rgba(var(--scrim),.4);
}

/* ------------------------------------------------------------
   BUTTONS

   NOTE ON CONTRAST — carried over from the sibling property
   pages so the family behaves identically. White on the exact
   brand #0098B2 measures 3.42:1. As a UI component boundary
   that passes the 3:1 requirement, but the label is small text,
   which needs 4.5:1. The exact client hex is preserved by
   instruction rather than substituted. Two one-line fixes, if
   the brand owner wants AA on the label:
     a) swap the resting fill to var(--turquoise-hover) #007F98
        (4.68:1) — already the sanctioned hover shade; or
     b) raise --btn-size to 1.1667rem so the label counts as
        large text.
   ------------------------------------------------------------ */
.btn{
  --btn-size:.78125rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:var(--btn-size);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  padding:1.05rem 2.1rem;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background-color .3s var(--ease),
    color .3s var(--ease),border-color .3s var(--ease),
    transform .3s var(--ease);
  text-align:center;line-height:1.1;
}
.btn:active{transform:translateY(1px)}

.btn--brand{background:var(--brand-turquoise);color:#fff}
.btn--brand:hover{background:var(--turquoise-hover)}

.btn--line{border-color:var(--gray-line-2);color:var(--text-primary);background:transparent}
.btn--line:hover{border-color:var(--text-primary);background:var(--text-primary);color:#fff}

.btn--line-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn--line-light:hover{border-color:#fff;background:#fff;color:var(--text-primary)}

.btn--solid-light{background:#fff;color:var(--text-primary)}
.btn--solid-light:hover{background:var(--background-alt)}

.btn--wide{width:100%}

.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.actions--centre{justify-content:center}

/* Stacked buttons of different label lengths read as ragged when
   they are centred, so below the wrap point they take the full
   column and become equal blocks. */
@media (max-width:37.5em){
  .actions--centre{flex-direction:column;align-items:stretch}
  .actions--centre .btn{width:100%}
}

/* ------------------------------------------------------------
   HEADER — deliberately minimal. This is a paid-traffic landing
   page: no site navigation, nothing that leads away except the
   phone number. It sits over the hero and turns solid on scroll.
   ------------------------------------------------------------ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:var(--z-header);
  height:var(--hdr-h);display:flex;align-items:center;
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.hdr[data-state="top"]{
  background:linear-gradient(to bottom,rgba(var(--scrim),.5),rgba(var(--scrim),0));
}
.hdr[data-state="solid"]{
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 0 var(--gray-line),0 6px 24px rgba(var(--scrim),.06);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}

/* The WD monogram, as used on the property landing pages. The two
   marks are stacked and cross-faded on opacity rather than swapped
   with display, so the change reads as part of the header settling
   rather than as a flicker. */
.brand{
  position:relative;display:block;flex:none;
  width:clamp(2.6rem,3.5vw,3rem);
  aspect-ratio:246/256;
  text-decoration:none;
}
.brand img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .4s var(--ease);
}
.brand .rev{filter:drop-shadow(0 1px 10px rgba(var(--scrim),.45))}
.brand .pos{opacity:0}
.hdr[data-state="solid"] .brand .rev{opacity:0}
.hdr[data-state="solid"] .brand .pos{opacity:1}

.hdr-right{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.5rem)}

.hdr-tel{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;font-size:.8125rem;font-weight:500;
  letter-spacing:.01em;transition:color .3s var(--ease);
}
.hdr-tel svg{width:1.05rem;height:1.05rem;flex:0 0 auto}
.hdr[data-state="top"] .hdr-tel{color:#fff}
.hdr[data-state="solid"] .hdr-tel{color:var(--text-secondary)}
.hdr[data-state="solid"] .hdr-tel:hover{color:var(--turquoise-deep)}

.hdr-cta{--btn-size:.71875rem;padding:.8rem 1.4rem;white-space:nowrap}
.hdr[data-state="top"] .hdr-cta{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.hdr[data-state="top"] .hdr-cta:hover{background:#fff;color:var(--text-primary);border-color:#fff}
.hdr[data-state="solid"] .hdr-cta{background:var(--brand-turquoise);color:#fff;border-color:transparent}
.hdr[data-state="solid"] .hdr-cta:hover{background:var(--turquoise-hover)}

@media (max-width:33.75em){
  .hdr-tel span{display:none}
  .hdr-tel{padding:.5rem}
  /* The label has to stay on one line, so the type comes down a step. */
  .hdr-cta{--btn-size:.6875rem;padding:.7rem .9rem;letter-spacing:.09em}
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero{
  position:relative;min-height:min(94svh,56rem);
  display:flex;align-items:center;
  background:var(--dark-surface);
  padding-top:calc(var(--hdr-h) + var(--s5));
  padding-bottom:var(--s5);
  overflow:hidden;
  text-align:center;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 55%)}
/* Centre-weighted scrim. This frame is a bright golden-hour beach —
   pale sand and low sun — so a bottom gradient alone would leave the
   headline sitting on the lightest part of the picture. A soft
   elliptical vignette darkens the middle where the copy lands and
   lets the corners keep their light, with a light top wash so the
   header mark holds before the page is scrolled. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 82% 72% at 50% 52%,
      rgba(var(--scrim),.70) 0%,
      rgba(var(--scrim),.56) 42%,
      rgba(var(--scrim),.34) 72%,
      rgba(var(--scrim),.20) 100%),
    linear-gradient(to bottom,rgba(var(--scrim),.42) 0%,rgba(var(--scrim),0) 26%);
}
.hero-in{position:relative;z-index:var(--z-content);width:100%}
.hero-copy{max-width:min(46rem,100%);margin-inline:auto}
/* Balanced so the headline resolves to two even lines rather than
   stranding a single short word. It is the largest type on the page
   and a ragged break is the first thing the eye finds. */
.hero .display{color:#fff;margin-top:var(--s3);text-wrap:balance}
.hero .lede{color:rgba(255,255,255,.85);margin-top:var(--s3);max-width:40rem;margin-inline:auto;text-wrap:pretty}
.hero .actions{margin-top:var(--s4)}
.hero .rule{background:var(--brand-accent)}

/* Short laptop viewports: stop the display type crowding the frame. */
@media (max-height:52rem) and (min-width:48em){
  .hero{min-height:min(94svh,46rem)}
  .hero .display{font-size:clamp(2.4rem,3.6vw,3.6rem)}
}
@media (max-height:44rem) and (min-width:48em){
  .hero{min-height:42rem;padding-bottom:var(--s5)}
}

/* A quiet reassurance line under the hero CTAs. */
.hero-note{
  margin-top:var(--s3);font-size:.8125rem;color:rgba(255,255,255,.78);
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  text-align:left;
}
.hero-note svg{width:1rem;height:1rem;flex:0 0 auto;color:var(--brand-accent)}

/* ------------------------------------------------------------
   VALUE PROPOSITION — three columns
   ------------------------------------------------------------ */
.cols3{
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.vcard{position:relative;padding-top:var(--s3);border-top:1px solid var(--gray-line)}
.vcard .h3{margin-top:var(--s2)}
.vcard .body{margin-top:.85rem;font-size:.96875rem}
.vcard-n{
  font-family:var(--serif);font-size:1.05rem;font-weight:400;
  color:var(--brand-accent);letter-spacing:.02em;
}
.vcard::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--brand-turquoise);transition:width .5s var(--ease);
}
.vcard:hover::before{width:3rem}

/* ------------------------------------------------------------
   TEAM — photograph one side, argument the other
   ------------------------------------------------------------ */
.split{
  display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:56em){
  .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.split-media{position:relative}
.split-media img{
  width:100%;border-radius:2px;
  box-shadow:0 24px 60px -28px rgba(var(--scrim),.45);
}
/* A hairline offset frame — a detail, not decoration: it gives the
   photograph an edge without a border sitting on the image itself. */
.split-media::before{
  content:"";position:absolute;inset:auto auto -.9rem -.9rem;
  width:45%;height:45%;border-left:1px solid var(--accent-line);
  border-bottom:1px solid var(--accent-line);pointer-events:none;
}
.split-body .h2{margin-top:var(--s2)}
.split-body .body{margin-top:var(--s3)}
.split-body .actions{margin-top:var(--s4)}

.byline{
  margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--gray-line);
}
.byline-name{font-family:var(--serif);font-size:1.25rem;line-height:1.3}
.byline-role{
  margin-top:.3rem;font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);
}
.byline-where{margin-top:.75rem;font-size:.90625rem;color:var(--text-secondary)}

/* ------------------------------------------------------------
   PROCESS — four steps
   ------------------------------------------------------------ */
.steps{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  border-top:1px solid var(--gray-line-2);
}
.step{
  padding:var(--s4) 0 var(--s4);
  border-bottom:1px solid var(--gray-line-2);
  position:relative;
}
@media (min-width:48em){
  .step{padding:var(--s5) var(--s4) var(--s5) 0}
  .step + .step{border-left:1px solid var(--gray-line-2);padding-left:var(--s4)}
}
.step-n{
  font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(2.25rem,1.8rem + 1.6vw,3rem);
  color:var(--brand-accent);        /* 3.26:1 — large text, clears 3:1 */
  display:block;
}
.step .h3{margin-top:var(--s2)}
.step .body{margin-top:.85rem;font-size:.9375rem;max-width:30ch}

/* ------------------------------------------------------------
   PRIVATE SALE — the most reassuring moment on the page
   ------------------------------------------------------------ */
.private{
  position:relative;background:var(--dark-surface);color:#fff;
  padding-block:var(--s7);overflow:hidden;
}
.private-media{position:absolute;inset:0;z-index:0}
.private-media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
/* The lamplit pavilion sits centre-right and is the brightest thing
   in the frame, so the scrim holds near-full strength across the
   whole column the copy occupies and only opens up beyond it. */
.private-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(var(--scrim),.95) 0%,rgba(var(--scrim),.92) 45%,rgba(var(--scrim),.74) 68%,rgba(var(--scrim),.5) 100%);
}
.private-in{position:relative;z-index:var(--z-content);max-width:40rem}
.private .h2{margin-top:var(--s2)}
.private .lede{margin-top:var(--s3);max-width:44ch}
.private .actions{margin-top:var(--s4)}

/* ------------------------------------------------------------
   TRUST METRICS STRIP
   ------------------------------------------------------------ */
.metrics{
  display:grid;gap:var(--s4) var(--s3);
  grid-template-columns:repeat(2,1fr);
  text-align:center;
}
@media (min-width:52em){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{padding-inline:.5rem;position:relative}
@media (min-width:52em){
  .metric + .metric::before{
    content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;
    width:1px;background:var(--gray-line);
  }
}
.metric-fig{
  font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(2.4rem,1.9rem + 1.8vw,3.25rem);
  color:var(--brand-accent);        /* large text — clears 3:1 */
}
.metric-fig--word{
  font-size:clamp(1.5rem,1.25rem + 1vw,2rem);
  line-height:1.15;color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(2.4rem,1.9rem + 1.8vw,3.25rem);
}
.metric-d{
  margin-top:.85rem;font-size:.78125rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);
  line-height:1.45;
}

/* ------------------------------------------------------------
   ADDRESSES — credibility, not listings.

   These are text-led cards by deliberate choice. Attaching a
   photograph to a named estate asserts that the photograph is
   that estate, and no per-estate photography has been supplied.
   See README, "Imagery and provenance".
   ------------------------------------------------------------ */
.addresses{
  display:grid;gap:1px;background:var(--gray-line);
  border:1px solid var(--gray-line);
  grid-template-columns:1fr;
}
@media (min-width:38em){.addresses{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64em){.addresses{grid-template-columns:repeat(4,1fr)}}
.addr{
  background:var(--background-white);padding:var(--s4) var(--s3) var(--s3);
  display:flex;flex-direction:column;gap:.75rem;min-height:13rem;
  text-decoration:none;position:relative;
  transition:background-color .35s var(--ease);
}
.addr:hover{background:var(--background-alt)}
/* --brand-gray is 3.6:1 on white, which is fine for a border but
   not for an 11px label, so this takes --text-muted (4.8:1) like
   every other small label on a light ground. */
.addr-n{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-muted);
}
.addr-name{
  font-family:var(--serif);font-weight:400;line-height:1.18;
  font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem);
  color:var(--text-primary);
}
.addr-d{font-size:.875rem;color:var(--text-secondary);line-height:1.6}
.addr-go{
  margin-top:auto;padding-top:var(--s2);
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.71875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--turquoise-deep);
}
.addr-go svg{width:.95rem;height:.95rem;transition:transform .3s var(--ease)}
.addr:hover .addr-go svg{transform:translateX(4px)}

/* Full-bleed photographic band. It runs taller than it needs to be
   because the assurance panel below rides up onto its lower third
   (see .sec--overlap), so the visible strip is what remains above
   the card rather than the whole height. */
.band{position:relative;height:clamp(20rem,44vw,32rem);overflow:hidden;background:var(--dark-surface)}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
/* The caption sits at the top of the band, not the bottom, because
   the assurance panel covers the bottom. */
.band-cap{
  position:absolute;left:0;right:0;top:0;
  padding:var(--s4) 0;
  background:linear-gradient(to bottom,rgba(var(--scrim),.6),rgba(var(--scrim),0));
}
.band-cap span{
  font-size:.71875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
}

/* ------------------------------------------------------------
   ASSURANCE — vendor confidence.

   No seller testimonial has been published by the business, and
   words are not attributed to people who have not said them.
   This panel therefore carries verifiable credentials instead,
   and the markup for a real quotation is ready above it.
   ------------------------------------------------------------ */
/* The panel lifts up onto the photograph above it, so the band reads
   as this panel's ground rather than as a separate strip of picture.
   The negative pull is a token so the band height and the overlap
   stay related to one another. */
.sec--overlap{padding-top:0}
.sec--overlap .assure{
  --overlap:clamp(3rem,7vw,7rem);
  margin-top:calc(var(--overlap) * -1);
  box-shadow:0 30px 70px -34px rgba(var(--scrim),.5);
}

.assure{
  position:relative;
  background:var(--background-white);
  border:1px solid var(--gray-line);
  padding:clamp(2rem,5vw,3.5rem);
  display:grid;gap:var(--s5);
  grid-template-columns:1fr;
}
@media (min-width:56em){.assure{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem)}}
.assure-q blockquote{margin:0}
.assure-q .qmark{
  font-family:var(--serif);font-size:3.5rem;line-height:.7;
  color:var(--accent-line);display:block;margin-bottom:.5rem;
}
.assure-q p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  line-height:1.4;color:var(--text-primary);
}
.assure-cite{
  margin-top:var(--s3);font-size:.78125rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);
  font-style:normal;
}
.creds{display:grid;gap:var(--s3)}
.cred{display:flex;gap:var(--s2);align-items:flex-start}
.cred-ic{
  flex:0 0 auto;width:1.75rem;height:1.75rem;color:var(--brand-turquoise);
}
.cred-ic svg{width:100%;height:100%}
.cred-t{font-weight:600;font-size:.96875rem;line-height:1.4}
.cred-d{margin-top:.25rem;font-size:.875rem;color:var(--text-secondary);line-height:1.6}

/* ------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------ */
.final{background:var(--dark-surface);color:#fff;padding-block:var(--s7);text-align:center}
.final .h2{margin-top:var(--s2)}
.final .lede{margin-top:var(--s3);margin-inline:auto;max-width:46ch}
.final .actions{margin-top:var(--s5)}
.final-note{
  margin-top:var(--s3);font-size:.8125rem;color:rgba(255,255,255,.66);
}
.final .rule{margin-inline:auto;background:var(--brand-accent)}

/* ------------------------------------------------------------
   FOOTER — compact
   ------------------------------------------------------------ */
.ftr{background:var(--dark-surface-2);color:#fff;padding-block:var(--s5)}
.ftr-top{
  display:grid;gap:var(--s4);align-items:start;
  grid-template-columns:1fr;
  padding-bottom:var(--s4);border-bottom:1px solid rgba(255,255,255,.1);
}
/* The link area needs room for three 14rem columns before the brand
   block gets its share, otherwise auto-fit drops it to two and the
   footer looks lopsided against the wide logo. */
@media (min-width:52em){.ftr-top{grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:var(--s5)}}
.ftr-brand img{width:clamp(10rem,18vw,13rem)}
.ftr-tag{margin-top:var(--s2);font-size:.875rem;color:rgba(255,255,255,.62);max-width:30ch}

/* 14rem, not 11rem: the email address is the widest single string in
   the footer and at 11rem the column was narrower than the text, so
   the three columns ran into one another at tablet widths. At 14rem
   they drop to two columns before that can happen. */
.ftr-cols{display:grid;gap:var(--s4) var(--s3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.ftr-h{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin-bottom:var(--s2);
}
.ftr-l{display:grid;gap:.7rem}
.ftr-l a,.ftr-l span{
  font-size:.875rem;color:rgba(255,255,255,.72);text-decoration:none;
  transition:color .3s var(--ease);
  /* Belt and braces: a long address can still break rather than
     push past its column on a narrow phone. */
  overflow-wrap:anywhere;line-height:1.5;
}
.ftr-l a:hover{color:var(--turquoise-light)}
.ftr-bot{
  padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);
  align-items:center;justify-content:space-between;
}
.ftr-bot p,.ftr-bot a{font-size:.78125rem;color:var(--brand-gray)}  /* 5.2:1 on this ground */
.ftr-bot a{text-decoration:none;transition:color .3s var(--ease)}
.ftr-bot a:hover{color:#fff}
.ftr-legal{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ------------------------------------------------------------
   MODAL — the enquiry form
   ------------------------------------------------------------ */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s2);
}
.modal[hidden]{display:none}
.modal-scrim{
  position:absolute;inset:0;background:rgba(var(--scrim),.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s var(--ease);
}
.modal.is-open .modal-scrim{opacity:1}
.modal-box{
  position:relative;background:var(--background-white);
  width:min(42rem,100%);max-height:calc(100svh - 2rem);
  overflow-y:auto;border-radius:3px;
  box-shadow:0 40px 90px -30px rgba(var(--scrim),.55);
  opacity:0;transform:translateY(14px) scale(.99);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.modal.is-open .modal-box{opacity:1;transform:none}

.modal-head{
  padding:clamp(1.75rem,4vw,2.5rem) clamp(1.5rem,4vw,2.75rem) var(--s3);
  border-bottom:1px solid var(--gray-line);position:relative;
}
.modal-head .h3{margin-top:.6rem;font-size:clamp(1.5rem,1.3rem + .9vw,2rem)}
.modal-head p{margin-top:.75rem;font-size:.9375rem;color:var(--text-secondary);max-width:44ch}

.modal-x{
  position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;
  display:grid;place-items:center;background:transparent;border:0;
  border-radius:50%;cursor:pointer;color:var(--text-muted);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.modal-x:hover{background:var(--background-alt);color:var(--text-primary)}
.modal-x svg{width:1.1rem;height:1.1rem}

.modal-body{padding:var(--s4) clamp(1.5rem,4vw,2.75rem) clamp(1.75rem,4vw,2.5rem)}

.fgrid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:34em){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .f-full{grid-column:1/-1}
}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field label{
  font-size:.71875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);
}
.field .opt{text-transform:none;letter-spacing:.02em;font-weight:400;color:var(--brand-gray)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.96875rem;color:var(--text-primary);
  background:var(--background-white);
  border:1px solid var(--gray-line-2);border-radius:2px;
  padding:.8rem .9rem;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:6rem;line-height:1.6}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6C' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
  background-size:1.1rem;padding-right:2.4rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-turquoise);
  box-shadow:0 0 0 3px var(--turquoise-tint);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:var(--danger)}
.field-err{font-size:.8125rem;color:var(--danger);min-height:0}
.field-err:empty{display:none}

/* Honeypot — off-screen, never shown, never announced. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.modal-foot{margin-top:var(--s4)}
.consent{
  margin-top:var(--s3);font-size:.8125rem;color:var(--text-muted);
  line-height:1.6;display:flex;gap:.6rem;align-items:flex-start;
}
.consent svg{width:1rem;height:1rem;flex:0 0 auto;margin-top:.15rem;color:var(--brand-turquoise)}

.btn[data-busy="true"]{pointer-events:none;opacity:.75}
.btn-spin{
  width:1rem;height:1rem;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Success state replaces the form in place — no reload. */
.modal-done{text-align:center;padding:var(--s4) 0 var(--s2)}
.modal-done-ic{
  width:3.5rem;height:3.5rem;margin:0 auto var(--s3);
  border-radius:50%;display:grid;place-items:center;
  background:var(--turquoise-tint);color:var(--turquoise-deep);
}
.modal-done-ic svg{width:1.6rem;height:1.6rem}
.modal-done .h3{margin-bottom:.75rem}
.modal-done p{color:var(--text-secondary);max-width:38ch;margin-inline:auto}
.modal-done .btn{margin-top:var(--s4)}

/* ------------------------------------------------------------
   REVEALS — a short, calm rise. Nothing bounces.
   ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-2{transition-delay:.09s}
.rv-3{transition-delay:.18s}
.rv-4{transition-delay:.27s}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
}

/* ------------------------------------------------------------
   NO JAVASCRIPT — the page must be complete without it.
   Every CTA that opens the modal is a <button>, so nothing
   becomes a dead link; only the reveal states need resolving.
   ------------------------------------------------------------ */
.no-js .rv{opacity:1;transform:none}