/* ============================================================
   0. TYPEFACES  —  SERVED FROM THIS SERVER, NOT GOOGLE'S
   ------------------------------------------------------------
   These were previously loaded from fonts.googleapis.com, which
   handed every visitor's IP address to Google before they had
   done anything on the site. They are now served from /fonts/,
   so no third party is involved in reading a page.

   Files are the upstream Google Fonts releases (SIL Open Font
   Licence 1.1) taken from the @fontsource packages.

   font-display:swap means text paints immediately in the
   fallback and reflows once the webfont arrives.
   ============================================================ */
@font-face{
  font-family:'Yellowtail';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/yellowtail-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/caveat-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/caveat-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/caveat-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/lora-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/lora-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/lora-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/lora-latin-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/nunito-sans-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/nunito-sans-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/nunito-sans-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/nunito-sans-latin-700-normal.woff2') format('woff2');
}

/* ============================================================
   1. DESIGN TOKENS
   Change a colour or a font here and it changes site-wide.
   ============================================================ */
:root{
  /* ---- COLOUR ---------------------------------------------
     The live scheme is deep teal. The accent is sampled from the
     bougainvillea itself (#D1094C averaged), which is why the
     flowers in the photographs sit so comfortably against it.
     A palm green alternative is kept in section 15.            */
  --brand:        #0F4D57;
  --brand-deep:   #0A3840;
  --brand-ink:    #0A3840;
  --accent:       #D01257;
  --accent-dark:  #A80D45;
  --cream:        #FAF8F5;
  --cream-2:      #EFEDE8;
  --tint:         #F0F6F6;
  --ink:          #2E3A3D;
  --muted:        #5F6E70;
  --line:         #DCE3E2;
  --white:        #FFFFFF;

  --font-mark:  'Yellowtail', 'Brush Script MT', cursive;      /* "Nadi Beach" wordmark */
  --font-hand:  'Caveat', 'Segoe Script', cursive;             /* handwritten accents   */
  --font-head:  'Lora', Georgia, 'Times New Roman', serif;     /* headings              */
  --font-body:  'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;


  /* ---- MOTIF ------------------------------------------------
     The little pineapple beside the tagline, in the footer and
     on the studio bullet list. The pineapple is the traditional
     symbol of hospitality and welcome.
     Alternative marks are kept in section 15.                  */
  --glyph: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M50%2C99%20C31%2C99%2022%2C88%2022%2C70%20C22%2C52%2032%2C42%2050%2C42%20C68%2C42%2078%2C52%2078%2C70%20C78%2C88%2069%2C99%2050%2C99%20ZM50%2C44%20C44%2C32%2044%2C14%2050%2C1%20C56%2C14%2056%2C32%2050%2C44%20ZM44%2C46%20C31%2C42%2021%2C32%2017%2C18%20C30%2C25%2041%2C34%2048%2C45%20ZM56%2C46%20C69%2C42%2079%2C32%2083%2C18%20C70%2C25%2059%2C34%2052%2C45%20ZM40%2C48%20C29%2C48%2019%2C43%2012%2C34%20C24%2C35%2035%2C40%2045%2C47%20ZM60%2C48%20C71%2C48%2081%2C43%2088%2C34%20C76%2C35%2065%2C40%2055%2C47%20ZM35.00%2C49.70%20L40.80%2C55.50%20L35.00%2C61.30%20L29.20%2C55.50%20ZM50.00%2C49.70%20L55.80%2C55.50%20L50.00%2C61.30%20L44.20%2C55.50%20ZM65.00%2C49.70%20L70.80%2C55.50%20L65.00%2C61.30%20L59.20%2C55.50%20ZM42.50%2C57.20%20L48.30%2C63.00%20L42.50%2C68.80%20L36.70%2C63.00%20ZM57.50%2C57.20%20L63.30%2C63.00%20L57.50%2C68.80%20L51.70%2C63.00%20ZM35.00%2C64.70%20L40.80%2C70.50%20L35.00%2C76.30%20L29.20%2C70.50%20ZM50.00%2C64.70%20L55.80%2C70.50%20L50.00%2C76.30%20L44.20%2C70.50%20ZM65.00%2C64.70%20L70.80%2C70.50%20L65.00%2C76.30%20L59.20%2C70.50%20ZM42.50%2C72.20%20L48.30%2C78.00%20L42.50%2C83.80%20L36.70%2C78.00%20ZM57.50%2C72.20%20L63.30%2C78.00%20L57.50%2C83.80%20L51.70%2C78.00%20ZM35.00%2C79.70%20L40.80%2C85.50%20L35.00%2C91.30%20L29.20%2C85.50%20ZM50.00%2C79.70%20L55.80%2C85.50%20L50.00%2C91.30%20L44.20%2C85.50%20ZM65.00%2C79.70%20L70.80%2C85.50%20L65.00%2C91.30%20L59.20%2C85.50%20Z%22/%3E%3C/svg%3E");

  --wrap: 1180px;
  --radius: 3px;
  --shadow-card: 0 1px 3px rgba(70,40,60,.07), 0 10px 30px rgba(70,40,60,.06);
  --shadow-photo: 0 2px 6px rgba(70,40,60,.10), 0 18px 44px rgba(70,40,60,.13);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--brand);font-weight:500;line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* small red/purple rule used under headings in the concept */
.rule{width:64px;height:2px;background:var(--accent);border:0;margin:14px 0 22px}
.rule.center{margin-left:auto;margin-right:auto}

/* buttons */
.btn{
  display:inline-block;font-family:var(--font-body);font-weight:700;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  padding:13px 26px;border-radius:var(--radius);border:2px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{text-decoration:none}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-dark)}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-deep)}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--accent);color:#fff}

/* ============================================================
   3. PREVIEW BANNER  —  DELETE THIS BLOCK BEFORE GOING LIVE
   ============================================================ */
.previewbar{
  background:#2B2530;color:#F3E7EE;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;text-align:center;padding:7px 14px;font-weight:600;
}
/* ========================= end preview banner ================ */

/* ============================================================
   4. HEADER  (Concept 2)
   ============================================================ */
.topbar{position:relative;background:var(--cream);z-index:30}
.topbar__inner{
  max-width:var(--wrap);margin:0 auto;padding:22px 28px 16px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
}
.brand{display:block;padding-left:96px}          /* padding leaves room for the bougainvillea */
.brand:hover{text-decoration:none}
.brand__name{
  font-family:var(--font-mark);font-size:3.1rem;line-height:.95;
  color:var(--brand);display:block;
}
/* "Apartments" under the wordmark. The size and the tracking are tuned so the
   word spans exactly the width of "Nadi Beach" — measured, not estimated:
   3.1rem wordmark = 204px, 1.32rem @ .293em = 204px. If the wordmark size ever
   changes, this one has to be re-solved or the lockup stops lining up.
   The negative margin-right cancels the trailing letter-space. */
.brand__sub{
  font-family:var(--font-body);font-size:1.32rem;font-weight:600;line-height:1;
  letter-spacing:.293em;margin-right:-.293em;text-transform:uppercase;
  color:var(--brand);display:block;margin-top:7px;padding-left:6px;
}
.brand__place{
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  display:block;margin-top:6px;padding-left:6px;
}
.tagline{
  font-family:var(--font-hand);font-size:1.42rem;line-height:1.28;
  color:var(--brand);text-align:center;
}
.headcta{display:flex;align-items:center;gap:22px;justify-self:end}
.headcta__phone{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--brand);font-weight:600;font-size:.98rem;white-space:nowrap;
}
.headcta__phone:hover{color:var(--accent);text-decoration:none}
.headcta__phone svg{width:15px;height:15px;fill:var(--accent);flex:none}

/* bougainvillea hanging from the top-left, over the nav and into the hero */
.boughang{
  position:absolute;top:-10px;left:-26px;width:210px;
  pointer-events:none;user-select:none;z-index:40;
}

/* ============================================================
   5. NAV  (Concept 2 purple bar)
   ============================================================ */
.mainnav{background:var(--brand);position:relative;z-index:35}
.mainnav__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:center;
}
.mainnav ul{list-style:none;display:flex;margin:0;padding:0;gap:6px;flex-wrap:wrap;justify-content:center}
.mainnav a{
  display:block;color:#fff;font-size:.8rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:15px 20px;
}
.mainnav a:hover{color:#F8C6DC;text-decoration:none}
.mainnav .is-current > a{color:#FF97BE}
.mainnav .is-current > a::after{
  content:"";display:block;height:2px;background:#FF97BE;margin-top:5px;
}
/* dropdown */
.hasdrop{position:relative}
.hasdrop > a::after{content:" \25BE";font-size:.7em;opacity:.85}
.hasdrop ul{
  position:absolute;top:100%;left:0;background:var(--brand-deep);
  flex-direction:column;gap:0;min-width:220px;padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  box-shadow:0 12px 30px rgba(40,10,50,.28);
}
.hasdrop:hover ul,.hasdrop:focus-within ul{opacity:1;visibility:visible;transform:translateY(0)}
.hasdrop ul a{padding:10px 22px;letter-spacing:.08em;font-size:.78rem;text-transform:none}
/* mobile toggle */
.navtoggle{
  display:none;width:100%;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 0;text-align:left;
}

/* ============================================================
   6. HERO  (Concept 2)
   ============================================================ */
.hero{position:relative;background:var(--cream-2);overflow:hidden}
.hero__img{
  width:100%;height:clamp(380px,50vw,620px);object-fit:cover;object-position:center 46%;
}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.90) 24%,
      rgba(255,255,255,.55) 38%,
      rgba(255,255,255,0)   52%);
}
.hero__body{position:absolute;inset:0;display:flex;align-items:center}
.hero__text{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
.hero__inner{max-width:520px}
.hero h1{font-size:clamp(2rem,3.5vw,2.95rem);margin-bottom:0}
.hero p{font-size:1.02rem;color:var(--ink);max-width:420px}
.hero__hand{
  font-family:var(--font-hand);font-size:1.32rem;color:var(--accent);
  margin:0 0 22px;line-height:1.35;
}

/* ============================================================
   6B. INTRO  —  the main body copy of the site.
   Two columns: photograph left, prose right. The text column is
   held to a readable line length rather than running full width.
   ============================================================ */
.intro{background:var(--cream);padding:70px 0 10px}
.intro__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.intro__photo img{
  width:100%;height:430px;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-photo);
}
.intro h2{font-size:2.1rem;margin-bottom:2px}
.intro__text{max-width:640px}
.intro__text p{font-size:1.005rem}
.intro__text p:last-child{margin-bottom:0}
/* small handwritten-feel divider between sections */
.markrule{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:52px auto 0;max-width:280px;color:var(--accent);
}
.markrule::before,.markrule::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.55}
.markrule span{font-size:1.05rem;line-height:1}

/* ============================================================
   7. CURRENTLY AVAILABLE  (Concept 1 — SWAP BLOCK)
   ============================================================ */
.available{background:var(--cream);padding:66px 0 56px}
.available__grid{
  display:grid;grid-template-columns:1fr 1.35fr;gap:52px;align-items:center;
}
.eyebrow{
  font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;
}
.available h2{font-size:2.15rem;margin-bottom:4px}
.ticks{list-style:none;margin:0 0 26px;padding:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:9px;font-size:.95rem;color:var(--ink)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.34em;width:15px;height:15px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23D01257' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.6l5.4 5.4L20 6.5'/%3E%3C/svg%3E");
}
.available__photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.available__photos img{
  width:100%;height:300px;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow-photo);
}

/* ============================================================
   8. THE THREE APARTMENTS  (Concept 1)
   ============================================================ */
.apts{background:var(--cream);padding:20px 0 70px;text-align:center}
.apts h2{font-size:2.1rem;margin-bottom:2px}
.apts__lede{color:var(--muted);max-width:640px;margin:0 auto 34px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 4px 10px rgba(70,40,60,.09),0 22px 50px rgba(70,40,60,.14)}
.card img{width:100%;height:190px;object-fit:cover}
.card__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.36rem;margin-bottom:8px}
.card h3 + .rule{margin:0 auto 14px}
.card p{font-size:.92rem;color:var(--muted);flex:1}
.card .btn{align-self:center;font-size:.72rem;padding:11px 20px}
.card__status{
  align-self:center;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 12px;border-radius:2px;margin-bottom:12px;
}
.card__status--free{background:#E6F4EA;color:#1E6B36}
.card__status--taken{background:var(--cream-2);color:var(--muted)}

/* ============================================================
   9. PURPLE FEATURE STRIP  (Concept 1 — three items)
   ============================================================ */
.strip{background:var(--brand);color:#fff}
.strip__inner{
  max-width:var(--wrap);margin:0 auto;padding:26px 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.strip__item{display:flex;align-items:center;justify-content:center;gap:16px}
.strip__item svg{width:40px;height:40px;flex:none;stroke:#fff;fill:none;stroke-width:1.4}
.strip__item span{
  font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.4;
}

/* ============================================================
   10. STUDIO TEASER  (Concept 1)
   ============================================================ */
.studio{background:var(--tint);position:relative;overflow:hidden;padding:62px 0}
.studio__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center;position:relative;z-index:2}
.studio__photos{position:relative;padding-bottom:34px}
.studio__photos img{
  border:7px solid #fff;border-radius:2px;box-shadow:var(--shadow-photo);
}
.studio__photos img:first-child{width:80%}
.studio__photos img:last-child{
  position:absolute;right:0;bottom:0;width:52%;transform:rotate(2.2deg);
}
.studio__new{
  font-family:var(--font-hand);font-size:1.75rem;color:var(--accent);
  line-height:1;margin:0 0 2px;
}
.studio h2{font-size:2.1rem;margin-bottom:12px}
.studio__pts{
  list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;
}
.studio__pts li{position:relative;padding-left:26px;font-size:.94rem}
.studio__pts li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;
  background:var(--accent);
  -webkit-mask:var(--glyph) no-repeat center/contain;
          mask:var(--glyph) no-repeat center/contain;
}
.studio__note{
  font-family:var(--font-hand);font-size:1.2rem;color:var(--brand);margin:-10px 0 20px;
}
.bougspray{
  position:absolute;right:-70px;bottom:-40px;width:420px;opacity:.95;
  pointer-events:none;user-select:none;z-index:1;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.foot{background:var(--cream-2);border-top:1px solid var(--line);padding:34px 0}
.foot__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:start;
}
.foot__brand{justify-self:start;padding-right:34px;text-align:left}
.foot__centre{border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 34px;text-align:center}
.foot__mark{font-family:var(--font-mark);font-size:1.85rem;color:var(--accent);line-height:1}
.foot__sub{
  font-family:var(--font-body);font-size:.79rem;font-weight:600;line-height:1;
  letter-spacing:.293em;margin-right:-.293em;text-transform:uppercase;
  color:var(--accent);margin-top:6px;padding-left:3px;width:max-content;
}
.foot__place{
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin-top:4px;
}
.foot__hand{font-family:var(--font-hand);font-size:.95rem;color:var(--brand);line-height:1.3;text-align:center;margin:0 0 18px}
.foot__contact{padding-left:34px;justify-self:end;text-align:right}
.foot__contact > a{
  display:grid;grid-template-columns:170px 28px;align-items:center;justify-content:end;
  gap:12px;color:var(--ink);font-size:.93rem;margin-bottom:9px;text-align:right;
}
.foot__contact a:hover{color:var(--accent);text-decoration:none}
.foot__contact > a > span{white-space:nowrap}
.foot__contact > a svg{width:28px;height:18px;fill:var(--accent)}
.foot__actions{display:grid;grid-template-columns:170px 28px;align-items:center;justify-content:end;gap:12px;margin-top:11px;text-align:right}
.foot__social{
  width:28px;height:28px;border:1px solid var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.foot__social:hover{background:var(--accent)}
.foot__social svg{width:15px;height:15px;fill:var(--accent)}
.foot__social:hover svg{fill:#fff}
.foot__enquire{
  display:block;background:var(--accent);border-radius:3px;color:#fff!important;
  font-size:.58rem;font-weight:700;letter-spacing:.12em;line-height:1;
  justify-self:end;padding:8px 11px;text-transform:uppercase;white-space:nowrap;
}
.foot__enquire:hover{background:var(--brand);color:#fff!important}
.foot__legal{
  max-width:var(--wrap);margin:26px auto 0;padding:16px 28px 0;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
}
.foot__legal > *{padding:0 34px}
.foot__legal-left{text-align:left}
.foot__legal-centre{justify-self:stretch;text-align:center!important}
.foot__legal-right{text-align:right}

/* "checked <date>" stamps beside availability. A rental site's most
   perishable fact is which apartment is free; dating it tells a reader
   and an assistant how much to trust it. Keep these in step with the
   card statuses and the swap block on index.html. */
.checked{
  display:inline-block;font-size:.72rem;font-weight:600;color:var(--muted);
  letter-spacing:.02em;white-space:nowrap;
}
.checked--block{
  display:block;font-size:.82rem;color:var(--muted);
  margin:-6px 0 18px;white-space:normal;
}

/* Back to top. A plain anchor to #top on the header — no JavaScript, so it
   works with JS off and is reachable by keyboard. html{scroll-behavior:smooth}
   in section 2 gives it the glide. Sits above the legal line, centred, where
   the eye lands after a long gallery. */
.totop{
  display:block;width:max-content;margin:0 auto;
  font-family:var(--font-body);font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
  padding:7px 11px;border:1px solid var(--line);border-radius:3px;
  background:var(--white);transition:border-color .18s ease,color .18s ease;
}
.totop:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.totop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.totop span{font-size:.9em;margin-right:7px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .intro{padding:52px 0 4px}
  .intro__grid{grid-template-columns:1fr;gap:34px}
  .intro__photo img{height:300px}
  .intro__text{max-width:100%}
  .markrule{margin-top:40px}
  .available__grid{grid-template-columns:1fr;gap:32px}
  .available__photos img{height:250px}
  .studio__grid{grid-template-columns:1fr;gap:40px}
  .studio__photos{max-width:520px}
  .bougspray{width:300px;right:-60px;bottom:-30px;opacity:.55}
  .foot__inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
}
/* ------------------------------------------------------------
   Tablet band, 821-1000px. The three-column top bar squeezes the
   strapline into a narrow middle column here and it broke onto
   four and five lines. Same stacked header as mobile, one band
   wider. (This band was already wrapping to 3-4 lines before the
   strapline was lengthened; this fixes it rather than papering
   over it.)
   ------------------------------------------------------------ */
@media (min-width:821px) and (max-width:1000px){
  .topbar__inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px;padding-top:16px}
  .brand{padding-left:0;text-align:center}
  .tagline br{display:none}
  .headcta{justify-self:center}
}

@media (max-width:820px){
  .topbar__inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding-top:16px}
  .brand{padding-left:0;text-align:center}
  .brand__name{font-size:2.7rem}
  /* 2.7rem wordmark = 179px; 1.15rem @ .293em = 179px. Scales with the wordmark. */
  .brand__sub{font-size:1.15rem}
  /* the header is three lines deep on mobile, so the strapline goes to one line
     to keep the whole block shorter than it was before "Apartments" was added */
  .tagline{font-size:1.1rem}
  .tagline br{display:none}
  .boughang{width:150px;left:-34px;top:-16px;opacity:.9}
  .headcta{justify-self:center}
  .cards{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .card img{height:220px}
  .strip__inner{grid-template-columns:1fr;gap:16px;padding:24px 28px}
  .strip__item{justify-content:flex-start;max-width:330px;margin:0 auto;width:100%}
  .hero__veil{
    background:linear-gradient(180deg,rgba(251,247,243,.96) 0%,rgba(251,247,243,.9) 46%,rgba(251,247,243,.35) 74%,rgba(251,247,243,.08) 100%);
  }
  .hero__img{height:clamp(420px,72vw,520px);object-position:center 60%}
  .hero__body{align-items:flex-start;padding-top:38px}
  .hero__inner{max-width:100%}
  .hero p{max-width:100%}
  /* mobile nav */
  .navtoggle{display:block}
  .mainnav__inner{display:block;padding:0 28px}
  .mainnav ul{display:none;flex-direction:column;gap:0;align-items:stretch}
  .mainnav.is-open > .mainnav__inner > ul{display:flex;padding-bottom:12px}
  .mainnav a{padding:11px 0;text-align:left}
  .mainnav .is-current > a::after{width:34px}
  .hasdrop ul{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;padding:0 0 0 18px;display:flex;
  }
  .hasdrop > a::after{content:""}
}

/* The narrowest phones, 320-359px. One notch down on the strapline keeps
   "Peaceful. Friendly. Five houses from the sand." on a single line instead
   of stranding "sand." on a line of its own. */
@media (max-width:359px){
  .tagline{font-size:1rem}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .available{padding:44px 0 38px}
  .available__photos{grid-template-columns:1fr}
  .available__photos img{height:230px}
  .apts{padding:8px 0 46px}
  .studio__pts{grid-template-columns:1fr}
  .studio__photos img:first-child{width:88%}
  .studio__photos img:last-child{width:56%}
  .foot__inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot__brand{padding:0 0 22px;text-align:center}
  .foot__sub{margin-left:auto;margin-right:auto}
  .foot__centre{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;width:100%}
  .foot__contact{padding:22px 0 0;margin:0 auto}
  .foot__hand{text-align:center}
  .foot__legal{grid-template-columns:1fr;gap:9px;text-align:center}
  .foot__legal > *{padding:0 8px;text-align:center}
}

/* ============================================================
   13. INNER PAGE BANNER  (used on faq.html and every inner page)
   ============================================================ */
.pagehead{background:var(--cream-2);border-bottom:1px solid var(--line);padding:46px 0 40px;text-align:center}
.pagehead h1{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:4px}
.pagehead p{color:var(--muted);max-width:620px;margin:0 auto}
.crumbs{
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 8px;opacity:.6}

/* ============================================================
   14. FAQ
   Answers are visible by default, not hidden behind toggles.
   Every question is a real <h3> so the page has a clean outline.
   ============================================================ */
.faq{background:var(--cream);padding:52px 0 70px}
.faq__layout{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start}
.faqnav{position:sticky;top:24px}
.faqnav h2{
  font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.faqnav ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.faqnav a{
  display:block;padding:8px 0 8px 16px;margin-left:-2px;
  border-left:2px solid transparent;color:var(--brand);
  font-size:.92rem;font-weight:600;line-height:1.35;
}
.faqnav a:hover{border-left-color:var(--accent);color:var(--accent);text-decoration:none}

.faq__group{margin-bottom:44px;scroll-margin-top:20px}
.faq__group > h2{font-size:1.62rem;margin-bottom:0}
.faq__group > h2 + .rule{margin:12px 0 26px}
.faq__item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px 6px;margin-bottom:14px;box-shadow:var(--shadow-card);
}
.faq__item h3{
  font-size:1.1rem;color:var(--brand);margin-bottom:8px;line-height:1.35;
  display:flex;gap:11px;
}
.faq__item h3::before{
  content:"?";font-family:var(--font-hand);font-size:1.5rem;line-height:.9;
  color:var(--accent);flex:none;
}
.faq__item p{font-size:.96rem;color:var(--ink)}
.faq__item p:last-child{margin-bottom:1.1em}

.faq__cta{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 32px;text-align:center;margin-top:34px;
}
.faq__cta h2{font-size:1.5rem;margin-bottom:6px}
.faq__cta p{color:var(--muted);max-width:460px;margin:0 auto 18px}
.faq__hand{font-family:var(--font-hand);font-size:1.25rem;color:var(--accent);margin:16px 0 0 !important}

@media (max-width:900px){
  .faq__layout{grid-template-columns:1fr;gap:30px}
  .faqnav{position:static}
  .faqnav ul{display:flex;flex-wrap:wrap;gap:6px;border-left:0}
  .faqnav a{
    border:1px solid var(--line);border-radius:2px;background:var(--white);
    padding:8px 14px;margin-left:0;font-size:.84rem;
  }
  .faqnav a:hover{border-color:var(--accent)}
}
@media (max-width:620px){
  .faq{padding:36px 0 48px}
  .faq__item{padding:18px 20px 4px}
}


/* ============================================================
   15. THE MARK, AND THE ALTERNATIVES KEPT ON FILE
   ------------------------------------------------------------
   The live scheme is DEEP TEAL with a PINEAPPLE mark. Both are
   set in section 1 at the top of this file. Nothing below is
   active unless you switch it on.

   TO SWITCH TO PALM GREEN
   Add class="theme-green" to the <body> tag of each page. To
   make it permanent instead, copy its values over the colour
   block in section 1 and delete the rule below.

   TO CHANGE THE MARK
   Paste one of the alternatives at the foot of this section
   over the --glyph line in section 1.
   ============================================================ */

/* --- the mark itself --------------------------------------- */
/* Sized at 1.22em because the pineapple is tall and narrow and
   needs more room than a round flower to read at equal weight. */
.glyph{
  display:inline-block;width:1.22em;height:1.22em;vertical-align:-.22em;
  background:currentColor;
  -webkit-mask:var(--glyph) no-repeat center/contain;
          mask:var(--glyph) no-repeat center/contain;
}
.glyph--accent{color:var(--accent)}
.tagline .glyph,.foot__hand .glyph,.faq__hand .glyph{font-size:.78em}
.foot__mark .glyph{font-size:.62em;vertical-align:.04em}
.markrule .glyph{font-size:1.05rem}

/* --- ALTERNATIVE PALETTE: deep palm green -------------------
   Same reasoning as the teal: near-complementary to the
   bougainvillea magenta, so the flowers stay a deliberate
   accent. Warmer and more literal than the teal, since it
   echoes the foliage in the photographs.
   Activate with class="theme-green" on <body>.                 */
body.theme-green{
  --brand:        #1E4D34;
  --brand-deep:   #143524;
  --brand-ink:    #143524;
  --accent:       #D01257;
  --accent-dark:  #A80D45;
  --cream:        #FBF8F4;
  --cream-2:      #F0EEE6;
  --tint:         #F1F6F0;
  --ink:          #313A33;
  --muted:        #637064;
  --line:         #DEE4DA;
}

/* --- ALTERNATIVE MARKS --------------------------------------
   Reference only. To use one, paste its url(...) value over the
   --glyph line in section 1. The round flower marks sit large at
   1.22em, so set .glyph width/height back to 1em and
   vertical-align to -.14em if you switch to one of them.

   Frangipani:
   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20transform='rotate(0%2050%2050)'%20d='M50,53%20C46,43%2038,38%2035,29%20C31,17%2040,7%2050,9%20C61,11%2067,21%2064,32%20C61,42%2054,46%2050,53%20Z'/%3E%3Cpath%20transform='rotate(72%2050%2050)'%20d='M50,53%20C46,43%2038,38%2035,29%20C31,17%2040,7%2050,9%20C61,11%2067,21%2064,32%20C61,42%2054,46%2050,53%20Z'/%3E%3Cpath%20transform='rotate(144%2050%2050)'%20d='M50,53%20C46,43%2038,38%2035,29%20C31,17%2040,7%2050,9%20C61,11%2067,21%2064,32%20C61,42%2054,46%2050,53%20Z'/%3E%3Cpath%20transform='rotate(216%2050%2050)'%20d='M50,53%20C46,43%2038,38%2035,29%20C31,17%2040,7%2050,9%20C61,11%2067,21%2064,32%20C61,42%2054,46%2050,53%20Z'/%3E%3Cpath%20transform='rotate(288%2050%2050)'%20d='M50,53%20C46,43%2038,38%2035,29%20C31,17%2040,7%2050,9%20C61,11%2067,21%2064,32%20C61,42%2054,46%2050,53%20Z'/%3E%3C/svg%3E")

   Bougainvillea bract:
   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20transform='rotate(0%2050%2050)'%20d='M50,54%20C44,44%2034,32%2037,20%20C39,11%2045,6%2050,4%20C55,6%2061,11%2063,20%20C66,32%2056,44%2050,54%20Z'/%3E%3Cpath%20transform='rotate(120%2050%2050)'%20d='M50,54%20C44,44%2034,32%2037,20%20C39,11%2045,6%2050,4%20C55,6%2061,11%2063,20%20C66,32%2056,44%2050,54%20Z'/%3E%3Cpath%20transform='rotate(240%2050%2050)'%20d='M50,54%20C44,44%2034,32%2037,20%20C39,11%2045,6%2050,4%20C55,6%2061,11%2063,20%20C66,32%2056,44%2050,54%20Z'/%3E%3C/svg%3E")

   Pineapple, solid (the first version, no cut-out texture):
   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50,97%20C36,97%2029,89%2028,74%20C27,59%2032,47%2050,47%20C68,47%2073,59%2072,74%20C71,89%2064,97%2050,97%20Z'/%3E%3Cpath%20d='M50,49%20C45,37%2045,18%2050,4%20C55,18%2055,37%2050,49%20Z'/%3E%3Cpath%20d='M43,51%20C29,46%2018,35%2014,20%20C28,27%2040,37%2047,49%20Z'/%3E%3Cpath%20d='M57,51%20C71,46%2082,35%2086,20%20C72,27%2060,37%2053,49%20Z'/%3E%3C/svg%3E")

   Heart (the original):
   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50,86%20C50,86%208,60%208,33%20C8,18%2019,10%2030,10%20C40,10%2046,16%2050,22%20C54,16%2060,10%2070,10%20C81,10%2092,18%2092,33%20C92,60%2050,86%2050,86%20Z'/%3E%3C/svg%3E")
   ------------------------------------------------------------ */

/* ============================================================
   16. APARTMENT PAGES
   ============================================================ */
/* --- page hero: shorter than the homepage, so the copy stays up --- */
.phero{position:relative;background:var(--cream-2);overflow:hidden}
.phero__img{width:100%;height:clamp(260px,34vw,420px);object-fit:cover;object-position:center 55%}
.phero__veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 26%,rgba(255,255,255,.45) 42%,rgba(255,255,255,0) 58%)}
.phero__body{position:absolute;inset:0;display:flex;align-items:center}
.phero__text{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
.phero__inner{max-width:540px}
.phero h1{font-size:clamp(1.8rem,3.1vw,2.7rem);margin-bottom:2px}
.phero .crumbs{margin-bottom:10px}

/* --- status pill on the page itself --- */
.status{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 13px;border-radius:2px;margin-bottom:14px;
}
.status--free{background:#E6F4EA;color:#1E6B36}
.status--taken{background:var(--cream-2);color:var(--muted)}

/* --- intro + key facts, side by side --- */
.aptintro{background:var(--cream);padding:58px 0 10px}
.aptintro__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.aptintro__text p:last-child{margin-bottom:0}
.facts{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-card)}
.facts h2{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.93rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0;color:var(--ink);font-weight:600}
.facts .btn{margin-top:20px;width:100%;text-align:center}

/* --- gallery: a plain grid, every image in the HTML --- */
.gallery{background:var(--cream);padding:52px 0}
.gallery h2{font-size:1.9rem;margin-bottom:2px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.shot{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-card)}
.shot button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shot img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .3s ease}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{padding:11px 14px 13px;font-size:.88rem;color:var(--muted)}
.shot figcaption b{display:block;color:var(--brand);font-weight:600;font-size:.94rem;margin-bottom:1px}

/* --- lightbox: capped at the file's own size, never upscaled --- */
.lb{position:fixed;inset:0;background:rgba(20,32,34,.94);display:none;z-index:200;
  align-items:center;justify-content:center;padding:36px 24px}
.lb.is-open{display:flex}
.lb img{max-width:min(100%,1800px);max-height:86vh;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb figcaption{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#EADFE3;font-size:.9rem}
.lb__x,.lb__prev,.lb__next{
  position:absolute;background:rgba(255,255,255,.10);border:0;color:#fff;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:1.4rem;line-height:1;display:grid;place-items:center}
.lb__x:hover,.lb__prev:hover,.lb__next:hover{background:rgba(255,255,255,.22)}
.lb__x{top:20px;right:22px}
.lb__prev{left:20px;top:50%;transform:translateY(-50%)}
.lb__next{right:20px;top:50%;transform:translateY(-50%)}

/* --- floor plan beside its written description --- */
.plan{background:var(--tint);padding:56px 0}
.plan__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.plan__fig{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-card)}
.plan__fig img{width:100%}
.plan__fig figcaption{font-size:.82rem;color:var(--muted);margin-top:10px;text-align:center}
.plan h2{font-size:1.9rem;margin-bottom:2px}
.plan__rooms{list-style:none;margin:22px 0 0;padding:0}
.plan__rooms li{padding:11px 0;border-top:1px solid var(--line);font-size:.94rem}
.plan__rooms li:last-child{border-bottom:1px solid var(--line)}
.plan__rooms b{color:var(--brand)}

/* --- the other two apartments --- */
.alsosee{background:var(--cream);padding:52px 0 66px;text-align:center}
.alsosee h2{font-size:1.7rem;margin-bottom:2px}
.alsosee .cards{margin-top:26px;grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}

@media (max-width:1000px){
  .aptintro__grid{grid-template-columns:1fr;gap:30px}
  .plan__grid{grid-template-columns:1fr;gap:32px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .alsosee .cards{grid-template-columns:1fr;max-width:420px}
  .lb{padding:16px 10px}
  .lb__prev{left:8px}.lb__next{right:8px}
}

/* ============================================================
   17. BOOKING / ENQUIRY FORM
   ============================================================ */
.formwrap{background:var(--cream);padding:56px 0 70px}
.formgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:52px;align-items:start}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 32px 34px;box-shadow:var(--shadow-card)}
.form h2{font-size:1.6rem;margin-bottom:2px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--brand);margin-bottom:5px}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:.96rem;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,77,87,.12)}
.field small{display:block;font-size:.78rem;color:var(--muted);margin-top:4px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .btn{margin-top:8px}
.form__note{font-size:.82rem;color:var(--muted);margin:14px 0 0}

/* the side panel beside the form */
.aside{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.aside h2{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.aside p{font-size:.94rem}
.aside a.big{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:700;
  color:var(--brand);margin-bottom:8px}
.aside a.big:hover{color:var(--accent);text-decoration:none}
.aside a.big svg{width:17px;height:17px;fill:var(--accent);flex:none}
.aside__hand{font-family:var(--font-hand);font-size:1.2rem;color:var(--brand);margin:16px 0 0}

/* ============================================================
   18. SIMPLE CONTENT SECTIONS (beach, studio, apartments index)
   ============================================================ */
.prose{background:var(--cream);padding:56px 0 14px}
.prose--home-location{padding:42px 0 30px}
.prose__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:52px;align-items:start}
.prose__text p:last-child{margin-bottom:0}
.prose__fig{margin:0}
.prose__fig img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-photo)}
.prose__fig figcaption{font-size:.82rem;color:var(--muted);margin-top:9px}

.band{background:var(--tint);padding:52px 0}
.band__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.band img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-photo)}
.band h2{font-size:1.8rem;margin-bottom:2px}

.nearby{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:9px 24px}
.nearby li{position:relative;padding-left:26px;font-size:.94rem}
.nearby li::before{content:"";position:absolute;left:0;top:.34em;width:15px;height:15px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23D01257' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.6l5.4 5.4L20 6.5'/%3E%3C/svg%3E")}
.nearby b{color:var(--brand)}

/* a soft "coming soon" panel for the studio */
.soon{background:var(--white);border:1px dashed var(--accent);border-radius:var(--radius);
  padding:26px 30px;margin-top:26px}
.soon h2{font-size:1.4rem;margin-bottom:4px}
.soon p:last-child{margin-bottom:0}

@media (max-width:1000px){
  .formgrid,.prose__grid,.band__grid{grid-template-columns:1fr;gap:32px}
  .nearby{grid-template-columns:1fr}
}
@media (max-width:620px){
  .fieldrow{grid-template-columns:1fr;gap:0}
  .form{padding:24px 20px 28px}
}

/* price line on the apartment cards */
.card__price{font-size:.95rem;color:var(--muted);margin:-4px 0 14px}
.card__price b{font-family:var(--font-head);font-size:1.25rem;color:var(--brand);font-weight:600}

/* ============================================================
   19. LEGAL, SITEMAP AND ERROR PAGES
   ============================================================ */
.legal{background:var(--cream);padding:50px 0 70px}
.legal__grid{display:grid;grid-template-columns:210px 1fr;gap:48px;align-items:start}
.legal__toc{position:sticky;top:18px;background:var(--tint);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px}
.legal__toc h2{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.legal__toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.legal__toc li{counter-increment:t;margin-bottom:8px;font-size:.86rem;line-height:1.35}
.legal__toc li::before{content:counter(t) ".";color:var(--muted);margin-right:6px}
.legal__toc a{color:var(--ink)}
.legal__toc a:hover{color:var(--accent)}

.legal__body{max-width:70ch}
.legal__body h2{font-size:1.35rem;margin:34px 0 2px;scroll-margin-top:18px}
.legal__body h2:first-child{margin-top:0}
.legal__body h3{font-size:1rem;margin:20px 0 6px;color:var(--brand)}
.legal__body p,.legal__body li{font-size:.95rem}
.legal__body ul{margin:0 0 16px;padding-left:20px}
.legal__body li{margin-bottom:7px}
.legal__body dl{margin:0 0 16px;display:grid;grid-template-columns:auto 1fr;gap:7px 16px}
.legal__body dt{font-weight:700;color:var(--brand);font-size:.9rem}
.legal__body dd{margin:0;font-size:.95rem}
.legal__updated{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);
  padding-top:14px;margin-top:34px}
.callout{background:var(--tint);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;margin:0 0 18px}
.callout p:last-child{margin-bottom:0}

/* --- human sitemap --- */
.smap{background:var(--cream);padding:50px 0 70px}
.smap__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.smap__col h2{font-size:1.15rem;margin-bottom:2px}
.smap__col ul{list-style:none;margin:16px 0 0;padding:0}
.smap__col li{border-top:1px solid var(--line);padding:10px 0}
.smap__col li:last-child{border-bottom:1px solid var(--line)}
.smap__col a{font-weight:600;font-size:.95rem}
.smap__col span{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}

/* --- 404 --- */
.err{background:var(--cream);padding:70px 0 80px;text-align:center}
.err__mark{font-family:var(--font-head);font-size:clamp(4rem,12vw,7rem);line-height:1;
  color:var(--brand);opacity:.16;margin:0}
.err h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:-14px 0 4px}
.err__lede{color:var(--muted);max-width:540px;margin:0 auto 26px}
.err__links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:820px;
  margin:0 auto;text-align:left}
.err__links a{display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-card);
  transition:transform .15s ease,box-shadow .15s ease}
.err__links a:hover{transform:translateY(-3px);text-decoration:none;
  box-shadow:0 4px 10px rgba(70,40,60,.09),0 18px 40px rgba(70,40,60,.12)}
.err__links--3{grid-template-columns:repeat(3,1fr);max-width:640px}
.err__links b{display:block;color:var(--brand);font-family:var(--font-head);font-size:1.02rem}
.err__links span{color:var(--muted);font-size:.84rem}

@media (max-width:900px){
  .legal__grid{grid-template-columns:1fr;gap:26px}
  .legal__toc{position:static}
  .smap__grid{grid-template-columns:1fr 1fr;gap:26px}
  .err__links,.err__links--3{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .smap__grid,.err__links,.err__links--3{grid-template-columns:1fr}
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* error returned by enquiry.php */
.formerr{background:#FDECEF;border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:12px 16px;margin:0 0 18px;font-size:.9rem;color:var(--accent-dark)}