/* ---- fonts.css ---- */
/* Self-hosted copies of the Google Fonts families the site uses (Latin and Latin Extended only),
   SIL Open Font License. Replaces the fonts.googleapis.com stylesheet: no third-party request, no render-blocking. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-latin-ext-f62989.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-latin-151a53.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-latin-ext-f62989.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-latin-151a53.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/libre-baskerville-normal-latin-ext-6a2aab.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/libre-baskerville-normal-latin-5e5b2d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-italic-latin-ext-b72d33.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-italic-latin-b96512.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-italic-latin-ext-b72d33.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-italic-latin-b96512.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-italic-latin-ext-b72d33.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-italic-latin-b96512.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-ext-840d42.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-2808bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-ext-840d42.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-2808bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-ext-840d42.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-2808bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-ext-840d42.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-2808bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-ext-840d42.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/open-sans-normal-latin-2808bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/poppins-normal-latin-ext-b24094.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/poppins-normal-latin-e1fdbc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/poppins-normal-latin-ext-aba1f5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/poppins-normal-latin-f8670f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens.css ---- */
/* BNS design tokens, sampled from the Canva PDF (see BNS-STAGE-1-PLAN.md §1).
   Sizes are tuned against the Canva frame (1423px wide) and scale down fluidly. */
:root {
  /* Colour */
  --navy: #192537;
  --navy-700: #24344c;          /* hover only; the Canva uses a single navy */
  --white: #ffffff;
  --grey-100: #efefef;          /* form fields, soft panels */
  --grey-200: #e8e8e8;          /* alternate tiles */
  --gold: #af9d7f;              /* heading rule, the one accent */
  --error: #bd554a;
  --text: var(--navy);
  --text-muted: rgba(25, 37, 55, 0.72);
  --line: var(--navy);
  --line-light: rgba(255, 255, 255, 0.9);
  --overlay: rgba(25, 37, 55, 0.45);

  /* Type: Canva fonts. Poppins stands in for Garet (commercial) on buttons. */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: "DM Sans", var(--font-sans);
  --font-button: "Garet", "Poppins", var(--font-sans);
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;

  --fs-hero: clamp(2.25rem, 1.2rem + 3vw, 3.25rem);       /* ~52px at Canva width */
  --fs-h2: clamp(2rem, 1rem + 3vw, 3.5rem);               /* ~56px "Our Services" */
  --fs-h2-sm: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  --fs-kicker: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  --fs-mission: clamp(2rem, 0.9rem + 3.4vw, 3.6rem);
  --fs-card-title: clamp(1.35rem, 1rem + 0.9vw, 1.75rem);
  --fs-card-name: clamp(1.3rem, 1.05rem + 0.7vw, 1.65rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.875rem;
  --fs-button: 1rem;
  --lh-tight: 1.15;
  --lh-body: 1.55;

  /* Layout */
  --maxw: 1440px;
  --gutter: clamp(20px, 5.6vw, 80px);          /* Canva: 80px margin on 1423px */
  --section-y: clamp(64px, 8vw, 120px);
  --grid-gap: clamp(16px, 2.1vw, 30px);        /* Canva: 30px between 401px cards */
  --rule-w: clamp(160px, 20vw, 284px);         /* Canva gold rule length */
  --header-h: 96px;
  --radius-pill: 40px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-input: 0 8px 14px -6px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1339px) {
  :root { --header-h: 80px; }
}

/* ---- base.css ---- */
/* Reset and base elements. Logical properties throughout so an RTL (Arabic) build needs no CSS fork. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }
img, picture, svg { display: block; max-inline-size: 100%; }
picture img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Image frames with a fixed aspect ratio: the picture fills the frame and crops. */
.frame > picture, .frame picture { display: block; block-size: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; line-height: var(--lh-tight); }
strong, b { font-weight: 700; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.on-navy { background: var(--navy); color: var(--white); }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; inset-inline-start: 16px; inset-block-start: -60px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 16px; }
.skip-link:focus { inset-block-start: 12px; }

/* ---- components.css ---- */
/* Shared components. Each mirrors a Canva element; the Canva page is noted where useful. */

/* ---------- Buttons: square, 1px outline, uppercase Garet (Canva "SHOP NOW", "CONTACT US") */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 58px; padding: 0 34px;
  border: 1px solid currentColor; border-radius: 0; background: transparent;
  font-family: var(--font-button); font-size: var(--fs-button); font-weight: 400;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; text-align: center;
  cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn .icon { inline-size: 18px; block-size: 18px; flex: none; }
.btn--outline { color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }
.btn--outline-light { color: var(--white); border-color: var(--white); }
.btn--outline-light:hover { background: var(--white); color: var(--navy); }
.btn--solid { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--solid:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn--sm { min-block-size: 44px; padding: 0 24px; font-size: 0.875rem; letter-spacing: 0.04em; }
/* Canva card "Enquire": thin box, sentence case. */
.btn--mini { min-block-size: 36px; padding: 0 20px; font-family: var(--font-sans); font-size: 0.9375rem; text-transform: none; letter-spacing: 0; }
@media (pointer: coarse) { .btn--mini { min-block-size: 44px; } }
.btn--wide { min-inline-size: 278px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Gold rule under headings */
.gold-rule { display: block; inline-size: var(--rule-w); block-size: 2px; background: var(--gold); }

/* ---------- Kicker + mixed-weight heading */
.section-heading { display: grid; gap: 4px; justify-items: start; }
.section-heading__kicker { font-size: var(--fs-kicker); line-height: 1.2; font-weight: 400; }
.section-heading__title { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 400; letter-spacing: -0.005em; }
.section-heading .gold-rule { margin-block-start: 18px; }

/* ---------- Italic tagline mixing bold and light italic (Canva "Elegance, Comfort…") */
.tagline { font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); line-height: 1.22; }
.tagline strong { font-weight: 700; }
.tagline--light { color: var(--white); }

/* ---------- Header */
.site-header { position: sticky; inset-block-start: 0; z-index: 40; background: var(--white); transition: box-shadow 0.2s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(25, 37, 55, 0.12); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; block-size: var(--header-h); }
/* Logo: Canva shows it ~175px wide; header keeps it at the Canva proportion (2.78:1). */
.site-header__logo { flex: none; }
.site-header__logo img { inline-size: clamp(150px, 12vw, 176px); block-size: auto; }
.nav-desktop ul { display: flex; align-items: center; gap: clamp(16px, 1.45vw, 28px); }
.nav-desktop li:last-child { margin-inline-start: clamp(4px, 0.6vw, 10px); }
.nav-desktop__link { position: relative; display: block; font-size: 0.90625rem; line-height: 1; white-space: nowrap; padding-block: 10px; }
.nav-desktop__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.nav-desktop__link:hover { text-decoration: none; }
.nav-desktop__link:hover::after, .nav-desktop__link[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; inline-size: 48px; block-size: 48px; padding: 0; border: 1px solid var(--navy); background: none; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; inline-size: 22px; block-size: 1.5px; margin-inline: auto; background: var(--navy); content: ""; position: relative; }
.nav-toggle__bars::before { position: absolute; inset-block-start: -7px; }
.nav-toggle__bars::after { position: absolute; inset-block-start: 7px; }
@media (max-width: 1339px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Mobile menu: full-screen navy */
.nav-mobile { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--navy); color: var(--white); overflow-y: auto; }
.nav-mobile[hidden] { display: none; }
.nav-mobile__top { display: flex; align-items: center; justify-content: space-between; block-size: var(--header-h); flex: none; }
.nav-mobile__logo img { inline-size: 150px; block-size: auto; }
.nav-close { inline-size: 48px; block-size: 48px; border: 1px solid var(--white); background: none; color: var(--white); font-size: 2rem; line-height: 1; cursor: pointer; }
.nav-mobile__links { padding-block: 24px; }
.nav-mobile__links li { border-block-end: 1px solid rgba(255, 255, 255, 0.35); }
.nav-mobile__links a { display: block; padding-block: 16px; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); }
.nav-mobile__links a[aria-current="page"] { font-weight: 700; }
.nav-mobile__contact { margin-block: auto 32px; }

/* ---------- Contact buttons (WhatsApp / Call / Email) */
.contact-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-buttons .btn { min-block-size: 50px; padding: 0 22px; }

/* ---------- Property card (Canva p5/p25) */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) var(--grid-gap); }
@media (max-width: 1023px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }
.property-card { display: flex; flex-direction: column; min-inline-size: 0; }
.property-card__media { position: relative; display: block; aspect-ratio: 401 / 372; overflow: hidden; background: var(--grey-100); }
.property-card__media img { transition: transform 0.7s var(--ease), filter 0.7s var(--ease); }
.property-card:hover .property-card__media img, .property-card:focus-within .property-card__media img { transform: scale(1.035); }
.property-card__status, .property-card__demo {
  position: absolute; inset-block-start: 14px; padding: 5px 10px;
  font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
}
.property-card__status { inset-inline-start: 14px; background: var(--navy); color: var(--white); }
.property-card__demo { inset-inline-end: 14px; background: rgba(255, 255, 255, 0.94); color: var(--navy); border: 1px dashed var(--navy); }
/* Canva: small label, 2px navy rule, Baskerville location, 2px rule, bold price. */
.property-card__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-start: 16px; padding-block-end: 10px; border-block-end: 2px solid var(--line); font-size: var(--fs-small); line-height: 1.35; }
.property-card__title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.property-card__facts { flex: none; font-family: var(--font-ui); color: var(--text-muted); }
.property-card__name { padding-block: 12px; border-block-end: 2px solid var(--line); font-family: var(--font-serif); font-size: var(--fs-card-name); font-weight: 400; line-height: 1.25; }
.property-card__name a { display: inline-block; padding-block: 8px; margin-block: -8px; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px; transition: background-size 0.3s var(--ease); }
.property-card:hover .property-card__name a, .property-card__name a:focus-visible { background-size: 100% 1px; }
.property-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-start: 14px; }
.property-card__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: 1.0625rem; line-height: 1.3; }
.property-card__qualifier { font-weight: 700; }
.property-card__price strong { font-size: 1.125rem; }

/* ---------- Search pill (Canva p10/p24)
   Desktop: the pill on top, then Rent/Sale switch + keyword input + Search in one row
   (the Canva places its white input under the pill). Mobile: switch first, then a stacked pill. */
.search {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 400px) auto 1fr;
  grid-template-areas: "pill pill pill pill" "modes input submit .";
  column-gap: 16px; row-gap: 18px;
}
.search__pill { grid-area: pill; }
.search__modes { grid-area: modes; }
.search__input { grid-area: input; }
.search__submit { grid-area: submit; }

.search__modes { display: inline-flex; margin: 0; padding: 0; border: 0; margin-inline-start: clamp(0px, 2.6vw, 40px); }
.search__modes label { cursor: pointer; }
.search__modes input { position: absolute; opacity: 0; pointer-events: none; }
.search__modes span {
  display: flex; align-items: center; block-size: 52px; padding: 0 22px; border: 1px solid var(--navy); background: var(--white);
  font-family: var(--font-button); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.search__modes label + label span { border-inline-start: 0; }
.search__modes label:hover input:not(:checked) + span { background: var(--grey-100); }
.search__modes input:checked + span { background: var(--navy); color: var(--white); }
.search__modes input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.search__pill {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #f5f5f5; border-radius: var(--radius-pill); padding-block: 16px; padding-inline: 12px;
}
.search__seg {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
  padding: 4px 10px; cursor: pointer; text-align: center; min-inline-size: 0;
}
.search__seg + .search__seg { border-inline-start: 1px solid rgba(25, 37, 55, 0.45); }
.search__seg .icon { inline-size: 36px; block-size: 36px; margin-block-end: 6px; stroke-width: 1.2; }
.search__seg-label { font-size: 1.0625rem; line-height: 1.2; }
.search__seg-value { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.search__seg-value.is-set { color: var(--navy); font-weight: 500; }
.search__seg select { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.search__seg:focus-within { background: rgba(25, 37, 55, 0.05); border-radius: 18px; }
.search__seg:hover .search__seg-label { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

.search__input {
  display: flex; align-items: center; gap: 12px; block-size: 52px; padding-inline: 16px;
  background: var(--white); border-radius: 0 26px 26px 26px; box-shadow: var(--shadow-input);
}
.search__input .icon { inline-size: 28px; block-size: 28px; color: #6b6b6b; stroke-width: 2; flex: none; }
.search__input input { flex: 1; min-inline-size: 0; border: 0; background: none; outline: none; font-size: 1rem; }
.search__input input::-webkit-search-cancel-button { cursor: pointer; }
.search__input:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.search__submit { min-block-size: 52px; }

@media (max-width: 899px) {
  .search { grid-template-columns: 1fr; grid-template-areas: "modes" "pill" "input" "submit"; row-gap: 14px; }
  .search__modes { margin-inline-start: 0; }
  .search__modes label { flex: 1; }
  .search__modes span { justify-content: center; block-size: 48px; }
  .search__pill { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; padding: 8px; gap: 0; }
  .search__seg { grid-template-columns: auto 1fr; justify-items: start; text-align: start; column-gap: 10px; padding: 12px; min-block-size: 60px; border-block-end: 1px solid rgba(25, 37, 55, 0.2); }
  .search__seg .icon { grid-row: span 2; inline-size: 28px; block-size: 28px; margin: 0; }
  .search__seg + .search__seg { border-inline-start: 0; }
  .search__seg:nth-child(even) { border-inline-start: 1px solid rgba(25, 37, 55, 0.2); }
  .search__seg:last-child { grid-column: 1 / -1; border-block-end: 0; border-inline-start: 0; }
}

/* ---------- Enquiry form: flat grey fields, label inside (Canva p27) */
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.enquiry-form__property { grid-column: 1 / -1; font-size: var(--fs-small); }
.field { position: relative; display: flex; flex-direction: column; background: var(--grey-100); }
.field--full { grid-column: 1 / -1; }
.field label { padding: 10px 30px 0; font-size: var(--fs-label); color: var(--navy); }
.field input, .field select, .field textarea {
  inline-size: 100%; padding: 2px 30px 12px; border: 0; background: transparent; font-size: 1rem; outline: none; border-radius: 0;
}
.field select { appearance: none; cursor: pointer; padding-inline-end: 52px; }
.field--select::after { content: ""; position: absolute; inset-inline-end: 26px; inset-block-start: 50%; inline-size: 9px; block-size: 9px; border-inline-end: 1.5px solid var(--navy); border-block-end: 1.5px solid var(--navy); transform: translateY(-30%) rotate(45deg); pointer-events: none; }
.field textarea { resize: vertical; min-block-size: 150px; }
.field:focus-within { box-shadow: inset 0 0 0 1.5px var(--navy); }
.field.is-invalid { box-shadow: inset 0 0 0 1.5px var(--error); }
.field__error { padding: 0 30px 10px; font-size: 0.8125rem; color: var(--error); }
.enquiry-form__consent { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-muted); }
.enquiry-form__consent a { text-decoration: underline; }
.enquiry-form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.enquiry-form__status { font-size: var(--fs-small); }
.enquiry-form__status.is-success { color: var(--navy); font-weight: 600; }
.enquiry-form__status.is-error { color: var(--error); }
@media (max-width: 599px) { .enquiry-form { grid-template-columns: 1fr; } .field label, .field input, .field select, .field textarea { padding-inline: 18px; } }

/* ---------- Contact details list (Canva "Email Address / Telephone Number") */
.contact-list { display: grid; gap: 18px; }
.contact-list dt { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 700; line-height: 1.2; }
.contact-list dd { font-family: var(--font-ui); font-size: 1.125rem; }

/* ---------- Direct contact routes: one row each, large tap target */
.contact-methods { display: grid; border-block-start: 1px solid rgba(25, 37, 55, 0.2); }
.contact-methods li { border-block-end: 1px solid rgba(25, 37, 55, 0.2); }
.contact-methods a { display: flex; align-items: center; gap: 18px; padding-block: 16px; text-decoration: none; }
.contact-methods__icon { display: grid; place-items: center; flex: none; inline-size: 48px; block-size: 48px; border: 1px solid var(--navy); transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.contact-methods__icon .icon { inline-size: 22px; block-size: 22px; }
.contact-methods a:hover .contact-methods__icon, .contact-methods a:focus-visible .contact-methods__icon { background: var(--navy); color: var(--white); }
.contact-methods__text { display: grid; gap: 2px; min-inline-size: 0; }
.contact-methods__label { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 700; line-height: 1.2; }
.contact-methods__value { font-family: var(--font-ui); font-size: 1.0625rem; overflow-wrap: anywhere; }
.contact-methods a:hover .contact-methods__value { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Checklist on navy (Canva p38) */
.checklist {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), auto);
  column-gap: clamp(20px, 2.8vw, 40px); padding: clamp(10px, 1.4vw, 20px) clamp(16px, 2vw, 28px);
  border: 4px solid var(--white);
}
.checklist li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 18px; border-block-end: 2px solid var(--line-light);
  font-family: var(--font-button); font-weight: 500; font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.0625rem);
}
.checklist li:last-child, .checklist li.is-col-end { border-block-end: 0; }
@media (max-width: 699px) { .checklist li.is-col-end { border-block-end: 2px solid var(--line-light); } }
.checklist .icon { inline-size: 42px; block-size: 42px; flex: none; color: var(--white); --icon-knockout: var(--navy); }
@media (max-width: 699px) {
  .checklist { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}

.quote-mark { font-weight: 800; font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: 0.6; letter-spacing: -0.04em; margin-block: 28px 6px; }

/* ---------- Footer (Canva v2, p30) */
.site-footer { padding-block: clamp(48px, 5.5vw, 80px) 32px; }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-end: 28px; }
.site-footer__heading { font-size: var(--fs-h2); }
.site-footer__logo { inline-size: clamp(130px, 12.5vw, 176px); block-size: auto; }
.site-footer__contact { display: grid; grid-template-columns: minmax(0, 632fr) minmax(0, 669fr); align-items: center; gap: clamp(24px, 6vw, 88px); }
.site-footer__photo { aspect-ratio: 632 / 400; overflow: hidden; }
.site-footer__details { display: grid; gap: 28px; }
.site-footer__details dt { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); font-weight: 700; line-height: 1.2; }
.site-footer__details dd { font-family: var(--font-ui); font-size: 1.125rem; }
.site-footer__columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-block-start: 30px; padding-block-start: 30px; border-block-start: 3px solid var(--white); }
.site-footer__columns h3 { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); font-weight: 700; margin-block-end: 6px; }
.site-footer__columns a { display: inline-block; font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.6; }
@media (pointer: coarse) { .site-footer__columns a, .site-footer__details a { padding-block: 6px; } }
.site-footer__legal { display: grid; gap: 4px; margin-block-start: 40px; font-family: var(--font-ui); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 899px) {
  .site-footer__contact { grid-template-columns: 1fr; }
  .site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* ---------- Draft-only review aids */
.is-draft .claim[data-claim-status="evidence-required"] { text-decoration: underline dotted var(--gold) 2px; text-underline-offset: 5px; }
.draft-notes { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 80; max-inline-size: min(560px, calc(100vw - 32px)); font-family: var(--font-ui); font-size: 0.875rem; }
.draft-notes__toggle { padding: 10px 14px; border: 1px dashed var(--navy); background: #fff8e6; color: var(--navy); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.draft-notes__panel { margin-block-start: 8px; padding: 16px 18px; max-block-size: 60vh; overflow-y: auto; background: var(--white); border: 1px solid var(--navy); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.draft-notes__panel li { padding-block: 6px; border-block-end: 1px solid var(--grey-200); }
.draft-flag { display: inline-block; margin-block-start: 12px; padding: 4px 10px; border: 1px dashed var(--navy); background: #fff8e6; font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.4; }
.demo-notice { margin-block-end: 24px; padding: 14px 18px; border: 1px dashed var(--navy); background: #fff8e6; font-family: var(--font-ui); }

/* ---------- Social links */
.social-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-block-start: 18px; font-family: var(--font-ui); }
.social-links a { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; text-decoration: none; }
.social-links a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.social-links .icon { inline-size: 22px; block-size: 22px; }
.social-links--light { margin-block-start: 28px; color: var(--white); }

/* ---------- Slideshow layers (hero photos). Slides cross-fade, with a slow, slight settle of the photo.
   Indicator lines sit bottom-right on the photo; they only show once main.js has started the slideshow. */
.slide-item { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.slide-item:first-child, .slide-item.is-active { opacity: 1; }
[data-slider].is-ready .slide-item:not(.is-active) { opacity: 0; }
.slide-item.is-active { z-index: 1; }
.slide-item picture { position: absolute; inset: 0; }
[data-slider] .slide-item img { transform: scale(1.045); transition: transform 8s linear; }
[data-slider] .slide-item.is-active img { transform: scale(1); }
.slider-dots { position: absolute; z-index: 3; inset-inline-start: 50%; translate: -50% 0; inset-block-end: clamp(12px, 1.6vw, 22px); display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
[data-slider]:not(.is-ready) .slider-dots { display: none; }
.slider-dots button { position: relative; inline-size: 30px; block-size: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.slider-dots button::after {
  content: ""; position: absolute; inset-inline: 4px; inset-block-start: 50%; block-size: 2px; translate: 0 -50%;
  background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 4px rgba(25, 37, 55, 0.55); transition: background-color 0.3s var(--ease);
}
.slider-dots button:hover::after { background: var(--white); }
.slider-dots button[aria-current="true"]::after { background: var(--gold); block-size: 3px; }
.slider-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .slide-item { transition: opacity 0.01s; }
  [data-slider] .slide-item img, [data-slider] .slide-item.is-active img { transform: none; transition: none; }
}

/* ---------- Footer accreditations strip (scheme logos, official files) */
.accreditations { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(32px, 6vw, 96px); margin-block-start: 36px; padding-block: 30px; border-block: 1px solid rgba(255, 255, 255, 0.18); }
.accreditations__heading { font-family: var(--font-ui); font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.05rem); text-transform: uppercase; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.72); }
.accreditations__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; margin: 0; padding: 0; list-style: none; }
.accreditations__logos img { display: block; inline-size: auto; block-size: clamp(44px, 4vw, 56px); opacity: 0.82; transition: opacity 0.3s var(--ease); }
.accreditations__logos a:hover img, .accreditations__logos a:focus-visible img { opacity: 1; }

/* ---------- Property dropdowns (Properties for Rent / for Sale). The parent link still opens the listings;
   the chevron beside it (or hovering) opens a full-width panel under the header. */
.nav-desktop__item--menu { display: flex; align-items: center; gap: 2px; }
.nav-desktop__chevron {
  display: grid; place-items: center; inline-size: 24px; block-size: 28px; padding: 0; border: 0; background: none;
  color: var(--navy); cursor: pointer;
}
.nav-desktop__chevron .icon { inline-size: 13px; block-size: 13px; transition: transform 0.35s var(--ease); }
.nav-desktop__chevron[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-desktop__chevron:hover, .nav-desktop__chevron[aria-expanded="true"] { color: var(--gold); }
.nav-desktop__chevron:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.mega {
  position: fixed; inset-inline: 0; inset-block-start: var(--header-h); z-index: 39;
  background: var(--white); border-block-start: 1px solid rgba(25, 37, 55, 0.1);
  box-shadow: 0 28px 48px -28px rgba(25, 37, 55, 0.38);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.28s var(--ease), transform 0.35s var(--ease);
}
.mega.is-open { opacity: 1; transform: none; }
.mega[hidden] { display: none; }
.mega__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(32px, 4vw, 72px); align-items: start; padding-block: 44px 48px; }
.mega__kicker { font-family: var(--font-ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
.mega__title { margin-block-start: 10px; font-size: clamp(1.8rem, 1.3rem + 1vw, 2.4rem); line-height: 1.15; }
.mega .gold-rule { inline-size: 120px; margin-block: 18px 16px; }
.mega__sub { max-inline-size: 22em; font-size: 1rem; color: var(--text-muted); }
.mega__all { margin-block-start: 24px; gap: 12px; }
.mega__arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.mega__all:hover .mega__arrow { transform: translateX(4px); }
.mega__head { display: flex; justify-content: space-between; padding-block-end: 12px; border-block-end: 1px solid var(--navy); font-family: var(--font-ui); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
.mega__areas ul { margin: 0; padding: 0; list-style: none; }
.mega__areas li a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 16px; border-block-end: 1px solid rgba(25, 37, 55, 0.14); text-decoration: none; }
.mega__area { font-family: var(--font-serif); font-size: clamp(1.15rem, 1rem + 0.35vw, 1.35rem); transition: transform 0.35s var(--ease), color 0.25s var(--ease); background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px; padding-block-end: 2px; }
.mega__count { min-inline-size: 2.5em; font-family: var(--font-ui); font-size: 0.9375rem; text-align: end; color: var(--text-muted); transition: color 0.25s var(--ease); }
.mega__areas li a:hover .mega__area, .mega__areas li a:focus-visible .mega__area { transform: translateX(6px); background-size: 100% 1px; transition: transform 0.35s var(--ease), background-size 0.45s var(--ease); }
.mega__areas li a:hover .mega__count, .mega__areas li a:focus-visible .mega__count { color: var(--navy); } /* gold text on white is too low-contrast; the gold accent is the underline */
.mega__areas li a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mega__empty { padding-block: 16px; border-block: 1px solid rgba(25, 37, 55, 0.14); font-size: 1rem; color: var(--text-muted); }
.mega__media { aspect-ratio: 4 / 5; max-block-size: 300px; inline-size: 100%; overflow: hidden; background: var(--grey-100); justify-self: end; }

/* Mobile and tablet: each property item gets its own expand button; the area list opens in place. */
.nav-mobile__row { display: flex; align-items: center; }
.nav-mobile__row > a { flex: 1; }
.nav-mobile__expand {
  display: grid; place-items: center; flex: none; inline-size: 52px; block-size: 52px; padding: 0;
  border: 0; border-inline-start: 1px solid rgba(255, 255, 255, 0.25); background: none; color: var(--white); cursor: pointer;
}
.nav-mobile__expand .icon { inline-size: 18px; block-size: 18px; transition: transform 0.35s var(--ease); }
.nav-mobile__expand[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--gold); }
.nav-mobile__expand:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.nav-mobile__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.nav-mobile__sub.is-open { grid-template-rows: 1fr; }
.nav-mobile__sub-inner { overflow: hidden; }
.nav-mobile__sub:not(.is-open) .nav-mobile__sub-inner { visibility: hidden; transition: visibility 0s linear 0.35s; }
.nav-mobile__links .nav-mobile__sub li { border-block-end: 0; border-block-start: 1px solid rgba(255, 255, 255, 0.14); }
.nav-mobile__links .nav-mobile__sub a { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0 13px 18px; font-size: 1.0625rem; }
.nav-mobile__count { font-family: var(--font-ui); font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); }
.nav-mobile__links .nav-mobile__sub a.nav-mobile__all { font-family: var(--font-button); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.nav-mobile__sub ul { padding-block-end: 8px; }
/* The panel sits inside the nav list for keyboard order; undo the nav's row layout for its own list. */
.nav-desktop .mega ul { display: block; }
.nav-desktop .mega li:last-child { margin-inline-start: 0; }

/* Listing status badges: Let Agreed (navy, set above) and Available (white with navy text);
   a label for galleries that show the development rather than the apartment. */
.property-card__status--available { background: var(--white); color: var(--navy); border: 1px solid var(--navy); }
.property-card__label-chip, .gallery__label {
  position: absolute; z-index: 1; inset-inline-start: 14px; inset-block-end: 14px; padding: 5px 10px;
  background: rgba(25, 37, 55, 0.85); color: var(--white); font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---- home.css ---- */
/* Homepage sections. */

/* ---------- 1. Hero: 50/50 split (Canva p1), search pill overlapping the split (Canva p10).
   Row 1 holds the copy (vertically centred against the photo); row 2 holds the search,
   which runs from the left margin across ~66% of the width, as in the Canva. */
.hero {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto;
  min-block-size: clamp(640px, calc(100svh - var(--header-h)), 800px);
}
.hero__text { grid-column: 1; grid-row: 1; display: flex; align-items: center; padding-inline: var(--gutter) clamp(24px, 4vw, 64px); padding-block: clamp(28px, 3.4vw, 48px) clamp(24px, 2.6vw, 36px); }
.hero__copy { max-inline-size: 580px; }
.hero__kicker { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem); line-height: 1.35; margin-block-end: 14px; }
.hero__title { font-size: var(--fs-hero); line-height: 1.12; font-weight: 400; letter-spacing: -0.012em; }
.hero__title span { display: block; }
.hero .gold-rule { margin-block: 26px 20px; }
.hero__lede { max-inline-size: 33em; font-size: var(--fs-body); line-height: 1.5; }
.hero__media { grid-column: 2; grid-row: 1 / -1; position: relative; overflow: hidden; background: var(--grey-100); }
.hero__media picture { position: absolute; inset: 0; }
.hero__search {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2;
  inline-size: min(66%, 960px); margin-inline-start: var(--gutter); padding-block-end: clamp(28px, 3.4vw, 48px);
}
@media (max-width: 1100px) { .hero__search { inline-size: calc(100% - 2 * var(--gutter)); } }
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; min-block-size: 0; }
  .hero__media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; max-block-size: 48svh; inline-size: 100%; }
  .hero__text { grid-row: 2; padding-inline: var(--gutter); padding-block: 32px 22px; }
  .hero__search { grid-row: 3; margin-inline: var(--gutter); inline-size: auto; padding-block-end: 48px; }
}

/* ---------- 1b. Hero slideshow. Slides cross-fade (with a slow, slight settle of the photo);
   the copy for every slide shares one grid cell so the panel keeps the height of the longest. */
.hero__slides-copy { display: grid; }
.slide-copy { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s; }
.slide-copy.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s var(--ease) 0.5s, visibility 0s linear 0.45s; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }
@media (prefers-reduced-motion: reduce) { .slide-copy, .slide-copy.is-active { transition: opacity 0.01s; } }
@media (max-width: 899px) {
  .hero--slider .hero__media { min-block-size: 0; }
  .slide-copy { align-self: start; }
}

/* ---------- 2. Mission band (Canva p4) */
.mission { padding-block: var(--section-y); text-align: center; }
.mission__inner { display: grid; justify-items: center; gap: clamp(22px, 2.6vw, 40px); }
.mission__kicker { font-size: clamp(1rem, 0.85rem + 0.6vw, 1.5rem); font-weight: 300; text-transform: uppercase; letter-spacing: 0.1em; }
.mission__title { max-inline-size: 15em; font-size: var(--fs-mission); font-weight: 300; line-height: 1.18; text-transform: uppercase; }
.mission__sub { font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.45rem); font-weight: 300; text-transform: uppercase; letter-spacing: 0.12em; }

/* ---------- 3. Listings with live search */
.listings__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-block-end: clamp(32px, 3.6vw, 52px); }
.listings__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-family: var(--font-ui); }
.listings__count { font-size: var(--fs-small); color: var(--text-muted); }
.listings__sort { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); }
.listings__sort select { padding: 8px 32px 8px 12px; border: 1px solid var(--navy); border-radius: 0; background: var(--white); cursor: pointer; }
.listings__empty { display: grid; justify-items: center; gap: 14px; padding: 56px 24px; text-align: center; background: var(--grey-100); }
.listings__empty h3 { font-size: var(--fs-card-title); font-weight: 700; }
.listings__more { display: flex; justify-content: center; margin-block-start: clamp(40px, 4.5vw, 64px); }

/* ---------- 4. About split (Canva p2): photo left, navy right, logo top-right. */
.split { display: grid; grid-template-columns: 1fr 1fr; min-block-size: clamp(560px, 56vw, 800px); }
.split__media { position: relative; overflow: hidden; }
.split__media picture { position: absolute; inset: 0; }
.split__text { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: clamp(96px, 9vw, 140px) var(--gutter) clamp(56px, 6vw, 96px) clamp(32px, 7vw, 100px); }
.split__text p { max-inline-size: 31em; font-size: var(--fs-body); }
.split__logo { position: absolute; inset-block-start: clamp(28px, 4.8vw, 68px); inset-inline-end: var(--gutter); inline-size: clamp(120px, 12.5vw, 176px); block-size: auto; }
.split__title { font-size: var(--fs-h2); font-weight: 700; }
.split .gold-rule { margin-block: -4px 8px; }
.split .btn { margin-block-start: 14px; }
@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; }
  .split__media { aspect-ratio: 4 / 3; }
  .split__text { padding: 56px var(--gutter); }
  .split__logo { position: static; order: -1; margin-block-end: 8px; }
}

/* ---------- 5. Services (Canva p3), four cards */
.services .section-heading { margin-block-end: clamp(32px, 3.8vw, 56px); }
.services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.service-card a { display: grid; gap: 6px; text-align: center; }
.service-card a:hover { text-decoration: none; }
.service-card__media { display: block; aspect-ratio: 401 / 372; overflow: hidden; margin-block-end: 12px; }
.service-card__media img { transition: transform 0.6s var(--ease); }
.service-card a:hover img { transform: scale(1.03); }
.service-card__title { font-size: var(--fs-card-title); font-weight: 700; }
.service-card a:hover .service-card__title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.service-card__body { font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.4; }
@media (max-width: 1100px) { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } }
@media (max-width: 559px) { .services__grid { grid-template-columns: 1fr; } }

/* ---------- 6. Property management (Canva p38) */
.management { padding-block: var(--section-y); }
.management__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.management .section-heading { margin-block-end: 36px; }
.management .section-heading__title { font-size: var(--fs-h2-sm); }
.management__aside .section-heading { margin-block-end: 0; }
.management__aside .tagline { margin-block-end: 36px; }
@media (max-width: 999px) { .management__inner { grid-template-columns: 1fr; } }

/* ---------- 7. Contact (Canva p27): heading + direct routes left, tagline + grey form right. */
.contact-section__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.contact-section__details { display: grid; gap: 28px; align-content: start; }
.contact-section__details .section-heading__title { font-size: var(--fs-h2-sm); }
.contact-section__sub { font-size: 1.125rem; font-weight: 600; margin-block-end: -12px; }
.contact-section__form .contact-section__sub { margin-block-end: 16px; }
.contact-section__tagline { display: flex; align-items: flex-start; gap: 24px; margin-block-end: 32px; }
.contact-section__tagline .tagline { color: var(--navy); max-inline-size: 15em; }
.contact-section__mark { inline-size: 62px; block-size: auto; flex: none; margin-block-start: 8px; }
@media (max-width: 899px) { .contact-section__inner { grid-template-columns: 1fr; } .contact-section__mark { inline-size: 44px; } }

/* ---------- 5b. Renovation band (BNS renovation slides): large cover photo, slide wording, current projects. */
.home-reno { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); background: var(--grey-100); }
.home-reno__media { position: relative; overflow: hidden; min-block-size: clamp(520px, 48vw, 720px); }
.home-reno__media picture { position: absolute; inset: 0; }
.home-reno__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: clamp(56px, 6vw, 96px) var(--gutter) clamp(56px, 6vw, 96px) clamp(32px, 5vw, 80px); }
.home-reno__text > p { max-inline-size: 31em; font-size: var(--fs-body); }
.home-reno .gold-rule { margin-block: -4px 4px; }
.home-reno__label { margin-block-start: 8px; font-family: var(--font-ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.home-reno__projects { inline-size: 100%; list-style: none; padding: 0; border-block-start: 1px solid var(--navy); }
.home-reno__projects a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-block: 14px; border-block-end: 1px solid rgba(25, 37, 55, 0.3); }
.home-reno__projects a:hover { text-decoration: none; }
.home-reno__projects a:hover .home-reno__name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.home-reno__name { font-family: var(--font-serif); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); }
.home-reno__meta { font-family: var(--font-ui); font-size: 0.875rem; color: var(--text-muted); }
.home-reno .btn { margin-block-start: 10px; }
@media (max-width: 899px) {
  .home-reno { grid-template-columns: 1fr; }
  .home-reno__media { min-block-size: 0; aspect-ratio: 3 / 2; }
  .home-reno__text { padding: 48px var(--gutter) 56px; }
}

/* ---------- 4b. Locations: three tall photo cards with a navy caption over the foot of each. */
.locations__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); list-style: none; padding: 0; }
.location-card { position: relative; overflow: hidden; }
.location-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--grey-100); }
.location-card__media img { transition: transform 0.8s var(--ease); }
.location-card:hover .location-card__media img { transform: scale(1.03); }
.location-card__text { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: 4px; padding: 64px 24px 22px; background: linear-gradient(0deg, rgba(25, 37, 55, 0.9) 0%, rgba(25, 37, 55, 0.6) 60%, rgba(25, 37, 55, 0) 100%); color: var(--white); }
.location-card__label { font-family: var(--font-ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.location-card__title { font-family: var(--font-serif); font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem); font-weight: 400; }
@media (max-width: 899px) { .locations__grid { grid-template-columns: 1fr; } .location-card__media { aspect-ratio: 4 / 3; } }

/* ---- pages.css ---- */
/* Placeholder and interim pages (replaced in Stages 3–5). */
.placeholder-page__inner { display: grid; gap: 24px; justify-items: start; max-inline-size: 760px; min-block-size: 50vh; align-content: center; }
.placeholder-page__badge { display: inline-block; padding: 6px 12px; border: 1px dashed var(--navy); background: #fff8e6; font-family: var(--font-ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }

.property-interim__back { margin-block-end: 20px; font-family: var(--font-ui); }
.property-interim__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.property-interim__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey-100); }
.property-interim__facts { display: grid; gap: 12px; justify-items: start; }
.property-interim__ref { font-size: 1.125rem; }
.property-interim__title { font-size: var(--fs-h2-sm); }

.property-interim__price { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; }
@media (max-width: 899px) { .property-interim__grid { grid-template-columns: 1fr; } }

/* Gallery (shared; the Stage 5 property layout will reuse it). */
.gallery { display: grid; gap: 12px; min-inline-size: 0; }
.gallery__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey-100); }
.gallery__slide { position: absolute; inset: 0; }
.gallery__slide picture { display: block; block-size: 100%; }
.gallery__nav {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 48px; block-size: 48px;
  display: grid; place-items: center; border: 1px solid var(--navy); background: rgba(255, 255, 255, 0.92); color: var(--navy);
  font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.gallery__nav:hover { background: var(--navy); color: var(--white); }
.gallery__nav--prev { inset-inline-start: 14px; }
.gallery__nav--next { inset-inline-end: 14px; }
.gallery__count { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; padding: 4px 10px; background: rgba(25, 37, 55, 0.85); color: var(--white); font-family: var(--font-ui); font-size: 0.8125rem; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.gallery__thumbs button { display: block; inline-size: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; background: var(--grey-100); cursor: pointer; opacity: 0.6; outline-offset: 2px; transition: opacity 0.2s var(--ease); }
.gallery__thumbs button:hover, .gallery__thumbs button[aria-current="true"] { opacity: 1; }
.gallery__thumbs button[aria-current="true"] { box-shadow: 0 0 0 2px var(--navy); }
.property-interim__pricing { display: grid; gap: 2px; }
.property-interim__qualifier { font-size: var(--fs-small); margin-block-end: 0; }
.property-interim__list { display: grid; inline-size: 100%; border-block-start: 2px solid var(--line); }
.property-interim__list div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-block-end: 1px solid rgba(25, 37, 55, 0.25); }
.property-interim__list dt { font-weight: 600; }
.property-interim__list dd { font-family: var(--font-ui); text-align: end; }
.property-interim .property-card__status { z-index: 1; }

/* ======================================================================
   Stage 3 pages. Everything below reuses the Canva tokens in tokens.css:
   navy / white / gold / grey, Open Sans + DM Sans + Libre Baskerville.
   ====================================================================== */

.section--grey { background: var(--grey-100); }
.section-heading--spaced { margin-block-end: clamp(32px, 3.8vw, 56px); }
.section-note { margin-block-start: 32px; font-family: var(--font-ui); }
.section-note a, .legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Page hero (Canva p37 offset navy block / p17 framed on grey) */
.page-hero { display: grid; grid-template-columns: 1fr 1fr; min-block-size: clamp(560px, calc(100svh - var(--header-h)), 760px); }
.page-hero__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 96px) var(--gutter); }
.page-hero__title { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 400; }
.page-hero .gold-rule { margin-block: 10px 12px; }
.page-hero__sub { font-size: var(--fs-kicker); line-height: 1.3; }
.page-hero__body { max-inline-size: 34em; }
.page-hero .btn { margin-block-start: 14px; }
.page-hero__media { position: relative; }
.page-hero__frame { position: relative; z-index: 1; block-size: 100%; overflow: hidden; background: var(--grey-100); }
.page-hero__frame picture { position: absolute; inset: 0; }
/* p37: navy block sits behind the photo, up and to the right. */
.page-hero--offset .page-hero__media { padding: clamp(40px, 5.6vw, 80px) clamp(40px, 5.6vw, 80px) 0 0; }
.page-hero--offset .page-hero__media::before { content: ""; position: absolute; inset-block: 0 clamp(80px, 11vw, 160px); inset-inline: clamp(56px, 8vw, 112px) 0; background: var(--navy); }
/* p17: photo framed on a grey half-panel. */
.page-hero--framed .page-hero__media { display: grid; place-items: center; padding: clamp(32px, 5.6vw, 80px) clamp(32px, 10vw, 148px); background: var(--grey-100); }
.page-hero--framed .page-hero__frame { inline-size: 100%; block-size: auto; aspect-ratio: 416 / 640; max-block-size: 640px; }
@media (max-width: 899px) {
  .page-hero { grid-template-columns: 1fr; min-block-size: 0; }
  .page-hero__media { order: -1; aspect-ratio: 4 / 3; }
  .page-hero--offset .page-hero__media { padding: 24px 24px 0 0; }
  .page-hero--offset .page-hero__media::before { inset-block-end: 48px; inset-inline-start: 48px; }
  .page-hero--framed .page-hero__media { aspect-ratio: auto; padding: 32px var(--gutter); }
  .page-hero--framed .page-hero__frame { aspect-ratio: 4 / 3; }
  .page-hero__text { padding: 36px var(--gutter) 48px; }
}

/* ---------- Split: light variant and photo on the right */
.split--light { background: var(--white); color: var(--navy); }
.split--photo-right .split__media { order: 2; }
.split--photo-right .split__text { padding: clamp(64px, 7vw, 110px) clamp(32px, 7vw, 100px) clamp(64px, 7vw, 110px) var(--gutter); }
.split__title-regular { font-weight: 400; }
.split--light .split__title strong { font-weight: 700; }
@media (max-width: 899px) { .split--photo-right .split__media { order: 0; } .split--photo-right .split__text { padding: 56px var(--gutter); } }

/* ---------- Outlined boxes (Canva p6, on white) */
.boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 46px); }
.boxes__item { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 2.6vw, 36px); border: 2px solid var(--navy); background: var(--white); }
.boxes__num { font-family: var(--font-ui); font-size: 0.875rem; letter-spacing: 0.1em; color: var(--gold); }
.boxes__title { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); font-weight: 700; line-height: 1.3; }
@media (max-width: 899px) { .boxes { grid-template-columns: 1fr; } }

/* ---------- Navy ruled list + photo (Canva p13) */
.ruled-split { display: grid; grid-template-columns: 1fr 1fr; min-block-size: clamp(520px, 50vw, 760px); }
.ruled-split__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(56px, 7vw, 110px) clamp(32px, 6vw, 96px) clamp(56px, 7vw, 110px) var(--gutter); }
.ruled-split__title { font-size: var(--fs-h2-sm); font-weight: 400; line-height: var(--lh-tight); }
.ruled-split .gold-rule { margin-block: 6px 8px; }
.ruled-split .btn { margin-block-start: 24px; }
.ruled-split__media { position: relative; overflow: hidden; }
.ruled-split__media picture { position: absolute; inset: 0; }
.ruled-list { inline-size: min(100%, 470px); }
.ruled-list li { padding-block: 14px; border-block-end: 2px solid var(--line-light); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); }
.ruled-list--dark li { border-color: var(--navy); }
@media (max-width: 899px) { .ruled-split { grid-template-columns: 1fr; } .ruled-split__media { aspect-ratio: 4 / 3; order: -1; } .ruled-split__text { padding: 48px var(--gutter); } }

/* ---------- Tagline + full-width image strip (Canva p14) */
.image-band { padding-block-start: var(--section-y); }
.image-band__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-block-end: clamp(32px, 4vw, 56px); }
.image-band__inner .tagline { max-inline-size: 16em; color: var(--navy); }
.image-band__mark { inline-size: 62px; block-size: auto; flex: none; }
.image-band__media { aspect-ratio: 1423 / 384; overflow: hidden; }
@media (max-width: 599px) { .image-band__media { aspect-ratio: 16 / 9; } .image-band__mark { inline-size: 44px; } }

/* ---------- Team (Canva p19 leadership cards) */
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 26px); }
.team-card { display: flex; flex-direction: column; min-inline-size: 0; } /* fallback; see subgrid rules below */
.team-card__photo { aspect-ratio: 317 / 286; overflow: hidden; background: var(--white); }
.team-card__role { margin-block-start: 16px; padding-block-end: 10px; border-block-end: 1px solid var(--navy); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; }
.team-card__name { padding-block: 10px; border-block-end: 1px solid var(--navy); font-family: var(--font-serif); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem); font-weight: 400; }
.team-card__bio { padding-block-start: 10px; font-size: var(--fs-small); }
.team-card--pending { opacity: 0.85; }
.team-card__bio--pending { font-family: var(--font-ui); color: var(--text-muted); }
@media (max-width: 1023px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 499px) { .team__grid { grid-template-columns: 1fr; } }

/* ---------- Listing pages */
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 52px) clamp(16px, 1.7vw, 24px); }
.card-grid--4 .property-card__name { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); }
.card-grid--4 .property-card__foot { flex-wrap: wrap; }
@media (max-width: 1199px) { .card-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .card-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.search__modes a { text-decoration: none; }
.search__modes a + a span { border-inline-start: 0; }
.search__modes a:hover:not([aria-current]) span { background: var(--grey-100); }
.search__modes a[aria-current="page"] span { background: var(--navy); color: var(--white); }
.search__modes a:focus-visible { outline: none; }
.search__modes a:focus-visible span { outline: 2px solid var(--gold); outline-offset: 2px; }
.listings-cta__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 16px clamp(32px, 6vw, 96px); align-items: center; }
.listings-cta__inner .section-heading { grid-row: span 2; }
.listings-cta__body { max-inline-size: 30em; }
@media (max-width: 899px) { .listings-cta__inner { grid-template-columns: 1fr; } .listings-cta__inner .section-heading { grid-row: auto; } }

/* ---------- Homepage featured row */
.featured__links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Legal pages */
.legal__inner { max-inline-size: 880px; }
.legal__head { display: grid; gap: 18px; margin-block-end: clamp(32px, 4vw, 48px); }
.legal__intro { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
.legal__updated { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text-muted); }
.legal__section { padding-block: 24px; border-block-start: 1px solid rgba(25, 37, 55, 0.2); }
.legal__section h2 { margin-block-end: 12px; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem); font-weight: 700; }
.legal__section p + p, .legal__section ul + p { margin-block-start: 12px; }
.legal__section ul { margin-block: 12px; padding-inline-start: 1.2em; list-style: disc; }
.legal__section li + li { margin-block-start: 6px; }
.legal__missing { margin-block-start: 16px; padding: 12px 16px; border: 1px dashed var(--navy); background: #fff8e6; font-family: var(--font-ui); font-size: 0.875rem; }
.legal__missing ul { margin: 6px 0 0; }
.legal__contact { display: grid; gap: 16px; margin-block-start: 40px; }

/* ---------- Contact page address */
.contact-section__address address { font-style: normal; font-family: var(--font-ui); font-size: 1.0625rem; line-height: 1.6; }

/* ---------- Image placeholder: hatched, clearly unfinished (brief §5) */
.img-placeholder {
  display: grid; place-items: center; inline-size: 100%; block-size: 100%; min-block-size: 120px;
  background: repeating-linear-gradient(-45deg, var(--grey-100) 0 12px, var(--grey-200) 12px 24px);
  color: var(--navy); font-family: var(--font-ui); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
.img-placeholder span { padding: 6px 10px; background: var(--white); border: 1px dashed var(--navy); }

/* ---------- Draft-only: copy awaiting BNS confirmation, and missing site.json values */
.is-draft .to-confirm[data-confirm] { position: relative; outline: 1px dashed var(--gold); outline-offset: 10px; }
.is-draft .to-confirm[data-confirm]::before {
  content: attr(data-confirm); display: block; margin-block-end: 14px; padding: 4px 10px; inline-size: fit-content; max-inline-size: 100%;
  border: 1px dashed var(--navy); background: #fff8e6; color: var(--navy); font-family: var(--font-ui); font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: 0;
}
.missing { padding: 0 4px; background: #fff8e6; border: 1px dashed var(--navy); font-family: var(--font-ui); font-size: 0.9em; }
.to-confirm > p + p, .split__text .to-confirm > p + p { margin-block-start: 1em; }
.split__text .to-confirm, .page-hero__text .to-confirm { display: grid; gap: 14px; }
.contact-section__address { display: grid; gap: 8px; }
.contact-section__address .contact-section__sub { margin-block-end: 0; }

/* ---------- Property detail (Canva p32) */
.property__back { margin-block-end: 20px; font-family: var(--font-ui); }
.property__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.property__facts { display: grid; gap: 12px; justify-items: start; }
.property__ref { justify-self: end; font-size: 1.0625rem; color: var(--text-muted); font-family: var(--font-ui); }
.property__title { font-size: var(--fs-h2-sm); line-height: var(--lh-tight); }
.property__pricing { display: grid; gap: 2px; margin-block-start: 6px; }
.property__qualifier { font-size: var(--fs-small); }
.property__price { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; line-height: 1.2; }
.property__rooms { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 700; font-size: 1.125rem; }
.property__rooms li { display: flex; align-items: center; gap: 8px; }
.property__rooms .icon { inline-size: 30px; block-size: 30px; color: #6b6b6b; }
.property__address { font-size: 1.125rem; }
.property__list { display: grid; inline-size: 100%; border-block-start: 2px solid var(--line); }
.property__list div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-block-end: 1px solid rgba(25, 37, 55, 0.25); }
.property__list dt { font-weight: 600; }
.property__list dd { font-family: var(--font-ui); text-align: end; }
.property__facts .btn { margin-block-start: 8px; }
.property__note { margin-block-start: 10px; padding: 10px 14px; background: var(--grey-100); font-family: var(--font-ui); font-size: var(--fs-small); }
.property__details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); margin-block-start: clamp(48px, 6vw, 88px); }
.property__col { display: grid; gap: 16px; align-content: start; }
.property__col p { max-inline-size: 38em; }
.property__h2 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem); font-weight: 700; margin-block-start: 8px; }
.property__subhead { margin-block-start: 24px; }
.property__subhead .section-heading__title { font-size: var(--fs-h2-sm); }
.property__features { display: grid; gap: 6px; font-size: 1.0625rem; }
.property__features li { padding-inline-start: 18px; position: relative; }
.property__features li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; inline-size: 8px; block-size: 2px; background: var(--gold); }
.property__features--two { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.property__floorplan { display: block; border: 1px solid rgba(25, 37, 55, 0.15); background: var(--white); }
.property__floorplan img { object-fit: contain; block-size: auto; }
.property__building { margin-block-start: clamp(48px, 6vw, 88px); }
.property__building-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-block-start: 16px; }
.property__building-grid .frame { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey-100); }
.property__building-grid figcaption { margin-block-start: 8px; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text-muted); }
.property__factcheck { margin-block-start: 48px; padding: 20px 24px; border: 1px dashed var(--navy); background: #fff8e6; font-family: var(--font-ui); font-size: 0.9375rem; }
.property__factcheck h2 { font-size: 1.125rem; font-weight: 700; margin-block-end: 8px; }
.property__factcheck h3 { font-size: 0.9375rem; font-weight: 700; margin-block: 12px 4px; }
.property__factcheck ul { padding-inline-start: 1.2em; list-style: disc; }
@media (max-width: 899px) {
  .property__top, .property__details { grid-template-columns: 1fr; }
  .property__ref { justify-self: start; }
  .property__features--two { grid-template-columns: 1fr; }
}

/* ---------- Five-person leadership row, social links, notes */
/* Leadership grid. Each card spans four shared rows (photo / role / name / note) through subgrid, so a role
   that wraps to two lines grows the role row for every card in that row: photos, dividers and names all stay
   aligned without per-card spacing. Rows of fewer cards are centred by placing cards on a doubled column grid. */
.team__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: clamp(16px, 1.8vw, 26px); row-gap: 0; }
.team-card { grid-column: span 2; grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; padding-block-end: 44px; }
.team-card__photo { aspect-ratio: 4 / 5; inline-size: 100%; }
.team-card__photo img { object-position: 50% 20%; }
/* Job title band: the same height on every card (room for two lines at the shared line-height), with the
   title centred in it, so one- and two-line titles start, and their dividers sit, at the same positions. */
.team-card__role {
  --role-lines: 2; --role-pad: 10px;
  display: flex; align-items: center; margin-block-start: 8px;
  padding-block: var(--role-pad); line-height: 1.35;
  min-block-size: calc(var(--role-lines) * 1.35em + 2 * var(--role-pad));
  text-wrap: balance;
}
.team-card__name { align-self: start; }
@media (max-width: 1199px) {
  .team__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .team-card:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 699px) {
  .team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team-card:nth-child(4) { grid-column: auto / span 2; }
  .team-card:nth-child(5) { grid-column: 2 / span 2; }
  .team-card { padding-block-end: 32px; }
}
@media (max-width: 339px) {
  .team__grid { grid-template-columns: 1fr; }
  .team-card, .team-card:nth-child(4), .team-card:nth-child(5) { grid-column: 1; }
}
@supports not (grid-template-rows: subgrid) {
  .team-card { display: flex; }
  .team-card__role { min-block-size: calc(2 * 1.35em + 20px); }
}
.ruled-split__note { max-inline-size: 30em; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); }
.section-note--lead { font-family: var(--font-sans); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
@media (max-width: 899px) {
  /* One swipeable row of thumbnails instead of a tall grid. */
  .gallery__thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84px; overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: 4px; }
  .gallery__thumbs li { scroll-snap-align: start; }
}
@media (max-width: 699px) { .team-card__name { font-size: 1.1rem; } .team-card__role { font-size: 0.75rem; } }
.ruled-split__body { max-inline-size: 32em; }

/* ======================================================================
   Renovation (BNS renovation slides 46–49): cover, introduction + collage,
   scope of work, stages, project showcase. Same tokens: navy, gold, greys.
   ====================================================================== */
.btn--light { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--light:hover { background: transparent; color: var(--white); }

/* Cover */
.reno-hero { position: relative; display: grid; align-items: end; min-block-size: clamp(560px, calc(100svh - var(--header-h)), 860px); overflow: hidden; isolation: isolate; }
.reno-hero__media { position: absolute; inset: 0; z-index: -1; }
.reno-hero__media picture { position: absolute; inset: 0; }
.reno-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(25, 37, 55, 0.86) 0%, rgba(25, 37, 55, 0.6) 42%, rgba(25, 37, 55, 0.12) 75%), linear-gradient(0deg, rgba(25, 37, 55, 0.55) 0%, rgba(25, 37, 55, 0) 45%); }
.reno-hero__inner { pointer-events: none; } /* lets clicks reach the slideshow indicators behind it */
.reno-hero__inner > * { pointer-events: auto; }
.reno-hero__inner { display: grid; justify-items: start; gap: 14px; padding-block: clamp(72px, 9vw, 140px); }
.reno-hero__kicker { font-size: var(--fs-kicker); font-weight: 300; }
.reno-hero__title { font-size: clamp(2.6rem, 1.3rem + 4.2vw, 5rem); line-height: 1.04; font-weight: 400; letter-spacing: -0.015em; }
.reno-hero .gold-rule { margin-block: 14px 6px; }
.reno-hero__sub { max-inline-size: 26em; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.45; }
.reno-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 18px; }
@media (max-width: 699px) {
  .reno-hero { min-block-size: 78svh; }
  .reno-hero__media::after { background: linear-gradient(0deg, rgba(25, 37, 55, 0.92) 0%, rgba(25, 37, 55, 0.72) 50%, rgba(25, 37, 55, 0.25) 100%); }
  .reno-hero__actions .btn { flex: 1 1 100%; }
}

/* Introduction with the slide-48 collage. The source photos are small (about 300 px), so the tiles stay modest. */
.reno-intro__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.reno-intro__text { display: grid; justify-items: start; gap: 18px; }
.reno-intro__text .gold-rule { margin-block: 6px 6px; }
.reno-intro__body { max-inline-size: 32em; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.6; }
.reno-intro__text .btn { margin-block-start: 10px; }
.reno-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, clamp(52px, 5.6vw, 80px)); gap: clamp(10px, 1.2vw, 16px); max-inline-size: 600px; justify-self: end; inline-size: 100%; list-style: none; padding: 0; }
.reno-mosaic__item { overflow: hidden; background: var(--grey-100); }
.reno-mosaic__item--1 { grid-column: 1; grid-row: 1 / 5; }
.reno-mosaic__item--2 { grid-column: 2; grid-row: 1 / 4; }
.reno-mosaic__item--3 { grid-column: 2; grid-row: 4 / 7; }
.reno-mosaic__item--4 { grid-column: 1; grid-row: 5 / 7; }
@media (max-width: 899px) {
  .reno-intro__inner { grid-template-columns: 1fr; }
  .reno-mosaic { justify-self: stretch; max-inline-size: none; grid-template-rows: repeat(6, clamp(44px, 12vw, 72px)); }
}

/* Scope of work */
.reno-scope__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.4vw, 20px); list-style: none; padding: 0; }
.reno-scope__item { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; min-block-size: 112px; padding: 26px 28px; background: var(--white); border-block-end: 2px solid var(--gold); }
.reno-scope__item .icon { inline-size: 34px; block-size: 34px; color: var(--gold); }
.reno-scope__label { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); font-weight: 600; line-height: 1.3; }
.reno-scope__num { position: absolute; inset-block-start: 12px; inset-inline-end: 16px; font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.06em; }

/* Stages */
.reno-stages { padding-block: var(--section-y); }
.reno-stages__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.reno-stages__sub { max-inline-size: 26em; margin-block-start: 14px; font-size: var(--fs-body); color: rgba(255, 255, 255, 0.88); }
/* Timeline: a 12px gold marker per stage. Each stage draws the line from its marker's centre to the next
   marker's centre, and the last stage draws none, so the line ends exactly at the fourth marker. */
.reno-stages__list { --marker: 12px; --line: 2px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; }
.reno-stages__list li { position: relative; display: grid; align-content: start; gap: 14px; padding: 30px 16px 0 0; }
.reno-stages__list li::before { content: ""; position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--marker); block-size: var(--marker); background: var(--gold); }
.reno-stages__list li:not(:last-child)::after {
  content: ""; position: absolute; inset-block-start: calc((var(--marker) - var(--line)) / 2); inset-inline-start: calc(var(--marker) / 2);
  inline-size: 100%; block-size: var(--line); background: rgba(255, 255, 255, 0.85);
}
.reno-stages__num { font-family: var(--font-ui); font-size: 0.875rem; color: var(--gold); letter-spacing: 0.08em; }
.reno-stages__name { font-family: var(--font-serif); font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem); line-height: 1.25; }
@media (max-width: 999px) { .reno-stages__inner { grid-template-columns: 1fr; } }
/* Mobile: the same timeline, vertical. */
@media (max-width: 599px) {
  .reno-stages__list { grid-template-columns: 1fr; }
  .reno-stages__list li { gap: 8px; padding: 0 0 30px 32px; }
  .reno-stages__list li:last-child { padding-block-end: 0; }
  .reno-stages__list li:not(:last-child)::after { inset-block-start: calc(var(--marker) / 2); inset-inline-start: calc((var(--marker) - var(--line)) / 2); inline-size: var(--line); block-size: 100%; }
  .reno-stages__num { line-height: var(--marker); }
}

/* Project showcase */
.reno-projects { padding-block-end: 0; }
.reno-projects__sub { margin-block-start: 14px; font-size: var(--fs-body); }
.reno-projects__index { display: flex; flex-wrap: wrap; gap: 10px 0; margin-block-end: clamp(40px, 5vw, 72px); border-block: 1px solid var(--navy); }
.reno-projects__index a { flex: 1 1 220px; display: flex; align-items: baseline; gap: 10px; padding: 18px 20px; border-inline-start: 1px solid rgba(25, 37, 55, 0.25); font-family: var(--font-serif); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); }
.reno-projects__index a span { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--gold); }
.reno-projects__index a:first-child { border-inline-start: 0; padding-inline-start: 0; }
.reno-projects__index a em { font-family: var(--font-ui); font-style: normal; font-size: 0.875rem; color: var(--text-muted); }
.reno-projects__index a:hover { text-decoration: none; color: var(--navy-700); }
.reno-project { padding-block-end: clamp(64px, 8vw, 120px); scroll-margin-block-start: calc(var(--header-h) + 16px); }
.reno-project__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.reno-project--image-right .reno-project__media { order: 2; }
.reno-project--image-right .reno-project__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.reno-project__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey-100); }
.reno-project__text { display: grid; justify-items: start; gap: 18px; }
.reno-project__count { font-family: var(--font-ui); font-size: 0.875rem; letter-spacing: 0.1em; color: var(--gold); }
.reno-project__name { font-family: var(--font-serif); font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); font-weight: 400; line-height: 1.12; padding-block-end: 18px; border-block-end: 1px solid var(--navy); inline-size: 100%; }
.reno-project__place { display: block; margin-block-start: 8px; font-family: var(--font-sans); font-size: 0.42em; letter-spacing: 0.16em; text-transform: uppercase; }
.reno-project__facts { display: grid; inline-size: 100%; }
.reno-project__facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding-block: 12px; border-block-end: 1px solid rgba(25, 37, 55, 0.22); }
.reno-project__facts dt { font-family: var(--font-ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding-block-start: 3px; }
.reno-project__facts dd { margin: 0; font-weight: 700; font-size: 1.0625rem; }
.reno-project__link { font-family: var(--font-button); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; }
/* The Cove: wide image with an overlapping navy caption panel. */
.reno-project__wide { position: relative; inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.reno-project--wide .reno-project__media { aspect-ratio: 16 / 7; }
.reno-project--wide .reno-project__text {
  position: relative; z-index: 1; inline-size: min(560px, 100%); margin-block-start: clamp(-180px, -12vw, -96px); margin-inline-start: auto; margin-inline-end: clamp(0px, 4vw, 64px);
  padding: clamp(28px, 3.4vw, 48px); background: var(--navy); color: var(--white);
}
.reno-project--wide .reno-project__name { border-color: rgba(255, 255, 255, 0.8); }
.reno-project--wide .reno-project__facts div { border-color: rgba(255, 255, 255, 0.25); }
.reno-project--wide .reno-project__facts dt { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 899px) {
  .reno-project__inner, .reno-project--image-right .reno-project__inner { grid-template-columns: 1fr; }
  .reno-project--image-right .reno-project__media { order: 0; }
  .reno-project--wide .reno-project__media { aspect-ratio: 3 / 2; }
  .reno-project--wide .reno-project__text { margin: -48px 16px 0; inline-size: auto; }
}
@media (max-width: 759px) {
  .reno-projects__index { display: grid; gap: 0; }
  .reno-projects__index a, .reno-projects__index a:first-child { padding: 14px 0; border-inline-start: 0; }
  .reno-projects__index a + a { border-block-start: 1px solid rgba(25, 37, 55, 0.2); }
  .reno-project__facts div { grid-template-columns: 6em 1fr; }
}
/* Stage and project descriptions (copy update, 28 Oct 2026). */
.reno-stages__body { font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.reno-project__desc { font-size: var(--fs-body); line-height: 1.55; }

/* ======================================================================
   Full-screen property photos (lightbox.js). Near-black navy backdrop, white controls, gold on hover/focus.
   ====================================================================== */
.gallery__slide img { cursor: zoom-in; }
.gallery__expand {
  position: absolute; z-index: 2; inset-block-start: 14px; inset-inline-end: 14px; display: grid; place-items: center;
  inline-size: 40px; block-size: 40px; padding: 0; border: 0; background: rgba(25, 37, 55, 0.78); color: var(--white); cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.gallery__expand .icon { inline-size: 20px; block-size: 20px; }
.gallery__expand:hover { background: var(--navy); color: var(--gold); }
.gallery__expand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

html.lightbox-open, html.lightbox-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0b1019; color: var(--white); opacity: 0; transition: opacity 0.25s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(12px, 2vw, 24px); }
.lightbox__count { font-family: var(--font-ui); font-size: 0.9375rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); }
.lightbox__tools { display: flex; gap: 6px; }
.lightbox__btn, .lightbox__nav {
  display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(10, 15, 24, 0.55);
  color: var(--white); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox__btn { inline-size: 44px; block-size: 44px; }
.lightbox__btn .icon { inline-size: 20px; block-size: 20px; }
.lightbox__btn .icon--zoom-out, .lightbox.is-zoomed .lightbox__btn .icon--zoom-in { display: none; }
.lightbox.is-zoomed .lightbox__btn .icon--zoom-out { display: block; }
.lightbox__btn:hover, .lightbox__nav:hover { color: var(--gold); border-color: var(--gold); }
.lightbox__btn:focus-visible, .lightbox__nav:focus-visible, .lightbox__thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lightbox__stage { position: relative; overflow: hidden; touch-action: none; padding-inline: clamp(0px, 6vw, 88px); }
.lightbox__frame { inline-size: 100%; block-size: 100%; transform-origin: 50% 50%; will-change: transform; }
.lightbox__frame.is-animating { transition: transform 0.28s var(--ease); }
.lightbox__frame.is-in picture { animation: fade-in 0.35s var(--ease) both; }
.lightbox__frame picture { display: block; inline-size: 100%; block-size: 100%; }
.lightbox__frame .lightbox__img {
  inline-size: 100%; block-size: 100%; object-fit: contain; object-position: 50% 50%;
  user-select: none; -webkit-user-drag: none; cursor: zoom-in;
}
.lightbox.is-zoomed .lightbox__img { cursor: grab; }
.lightbox__stage.is-panning .lightbox__img { cursor: grabbing; }
.lightbox__nav { position: absolute; z-index: 1; inset-block-start: 50%; translate: 0 -50%; inline-size: 52px; block-size: 52px; }
.lightbox__nav .icon { inline-size: 24px; block-size: 24px; }
.lightbox__nav--prev { inset-inline-start: clamp(8px, 1.5vw, 24px); }
.lightbox__nav--next { inset-inline-end: clamp(8px, 1.5vw, 24px); }
.lightbox.is-zoomed .lightbox__nav { opacity: 0.35; }
.lightbox__thumbs { display: flex; gap: 8px; margin: 0; padding: 12px clamp(12px, 2vw, 24px) 16px; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.lightbox__thumbs li { flex: none; }
.lightbox__thumb { display: block; inline-size: 88px; block-size: 60px; padding: 0; border: 0; background: rgba(255, 255, 255, 0.06); cursor: pointer; opacity: 0.5; transition: opacity 0.2s var(--ease); }
.lightbox__thumb picture, .lightbox__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 699px) {
  .lightbox__nav { inline-size: 42px; block-size: 42px; background: rgba(10, 15, 24, 0.6); }
  .lightbox__thumb { inline-size: 64px; block-size: 46px; }
}

/* ---- motion.css ---- */
/* Interaction and motion polish. Loaded last; it only refines transitions on existing components
   (no layout, colour or content changes). Everything here animates transform, opacity, colour or
   box-shadow, so nothing shifts the layout. base.css switches all of it off for prefers-reduced-motion. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.25s;
  --t-med: 0.45s;
}

/* ---------- 1. Navigation: gold rule sweeps in from the left and out to the right; mobile menu eases open and closed. */
.nav-desktop__link { transition: color var(--t-fast) var(--ease); }
.nav-desktop__link::after { transform-origin: right; transition: transform var(--t-med) var(--ease-out); }
.nav-desktop__link:hover::after, .nav-desktop__link:focus-visible::after { transform-origin: left; transform: scaleX(1); }
.nav-desktop__link:focus-visible { outline: none; }
.site-header .btn--outline:hover { border-color: var(--navy); }

.nav-mobile:not([hidden]) { animation: nav-open 0.4s var(--ease-out) both; }
.nav-mobile.is-closing { animation: nav-close 0.22s ease-in both; }
.nav-mobile:not([hidden]):not(.is-closing) .nav-mobile__links li { animation: rise-in 0.55s var(--ease-out) both; }
.nav-mobile__links li:nth-child(2) { animation-delay: 40ms; }
.nav-mobile__links li:nth-child(3) { animation-delay: 80ms; }
.nav-mobile__links li:nth-child(4) { animation-delay: 120ms; }
.nav-mobile__links li:nth-child(5) { animation-delay: 160ms; }
.nav-mobile__links li:nth-child(6) { animation-delay: 200ms; }
.nav-mobile__links li:nth-child(7) { animation-delay: 240ms; }
.nav-mobile__links a { transition: color var(--t-fast) var(--ease), padding-inline-start var(--t-med) var(--ease-out); }
.nav-mobile__links a:hover { color: var(--gold); text-decoration: none; }
@keyframes nav-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes nav-close { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 2. Slideshows: the copy's lines settle in one after another; the active indicator fills
   with gold over the time the slide is shown. */
.slide-copy > * { transform: translateY(8px); transition: transform 0.6s var(--ease-out); }
.slide-copy.is-active > * { transform: none; transition: transform 1s var(--ease-out) 0.5s; }
.slide-copy.is-active > :nth-child(2) { transition-delay: 0.56s; }
.slide-copy.is-active > :nth-child(3) { transition-delay: 0.62s; }
.slide-copy.is-active > :nth-child(4) { transition-delay: 0.68s; }
.slide-copy.is-active > :nth-child(5) { transition-delay: 0.74s; }
.slide-copy.is-active > :nth-child(6) { transition-delay: 0.8s; }
/* Before the slideshow starts (and without JavaScript) slide 1 simply shows. */
[data-slider]:not(.is-ready) .slide-copy > * { transform: none; transition: none; }
[data-slider] .slide-item img { transition: transform 7.5s var(--ease-out); }
.slide-item { transition: opacity 1.6s var(--ease); }
.slider-dots button::before {
  content: ""; position: absolute; z-index: 1; inset-inline: 4px; inset-block-start: 50%; block-size: 3px; translate: 0 -50%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
}
.slider-dots button[aria-current="true"]::after { background: rgba(255, 255, 255, 0.6); block-size: 3px; }
[data-slider].is-ready .slider-dots button[aria-current="true"]::before { animation: dot-fill var(--slide-interval, 6s) linear both; }
[data-slider].is-held .slider-dots button[aria-current="true"]::before { animation-play-state: paused; }
@keyframes dot-fill { to { transform: scaleX(1); } }

/* ---------- 3. Property cards: a slow, very slight zoom. */
.property-card__media img { transition: transform 0.9s var(--ease-out); }
.property-card:hover .property-card__media img, .property-card:focus-within .property-card__media img { transform: scale(1.04); }
.property-card__name a { transition: background-size var(--t-med) var(--ease-out); }

/* ---------- 4. Buttons, links and arrows */
.btn { transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--outline:hover, .btn--solid:hover { box-shadow: 0 10px 22px -16px rgba(25, 37, 55, 0.7); }
/* Gold underline that draws in on hover (footer links, project links). */
.site-footer__columns a, .reno-project__link {
  text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px;
  transition: background-size var(--t-med) var(--ease-out), color var(--t-fast) var(--ease);
}
.site-footer__columns a:hover, .site-footer__columns a:focus-visible { background-size: 100% 1px; text-decoration: none; }
.reno-project__link { background-size: 100% 1px; padding-block-end: 4px; }
.reno-project__link:hover { background-size: 0 1px; background-position: 100% 100%; text-decoration: none; }
/* Arrow glyphs nudge in the direction they point. */
.gallery__nav span { display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.gallery__nav--prev:hover span { transform: translateX(-3px); }
.gallery__nav--next:hover span { transform: translateX(3px); }
.gallery__nav { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.gallery__nav:hover { border-color: var(--navy); }
.reno-projects__index a, .home-reno__projects a { transition: color var(--t-fast) var(--ease); }
.reno-projects__index a span, .reno-projects__index a em { transition: transform var(--t-med) var(--ease-out); display: inline-block; }
.reno-projects__index a:hover span { transform: translateX(3px); }
.contact-methods__icon { transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.social-links a .icon { transition: color var(--t-fast) var(--ease); }
.social-links a:hover .icon { color: var(--gold); }

/* ---------- 5. Galleries and renovation projects */
.gallery__slide:not([hidden]) { animation: fade-in 0.5s var(--ease) both; }
.gallery__thumbs button { transition: opacity 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.reno-project__media img, .reno-mosaic__item img, .home-reno__media img, .location-card__media img, .service-card__media img { transition: transform 1.1s var(--ease-out); }
.reno-project:hover .reno-project__media img, .reno-mosaic__item:hover img, .home-reno:hover .home-reno__media img { transform: scale(1.025); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 6. One-time reveals on scroll (main.js adds .reveal / .is-revealed; nothing is hidden without it). */
.has-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.has-reveal .reveal.is-revealed { opacity: 1; transform: none; }

/* ---------- 7. Leadership cards: the rules warm to gold; photographs are untouched. */
.team-card__role, .team-card__name { transition: border-color 0.4s var(--ease), color 0.4s var(--ease); }
.team-card:hover .team-card__role, .team-card:hover .team-card__name { border-color: var(--gold); }

/* ---------- 8. Forms: a gold rule along the field in focus; errors fade in. */
.field { transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); }
.field:hover { background-color: #eaeaea; }
.field:focus-within { background-color: #f4f4f4; box-shadow: inset 0 0 0 1px rgba(25, 37, 55, 0.28), inset 0 -2px 0 var(--gold); }
.field.is-invalid, .field.is-invalid:focus-within { box-shadow: inset 0 0 0 1px var(--error), inset 0 -2px 0 var(--error); }
.field label { transition: color var(--t-fast) var(--ease); }
.field.is-invalid label { color: var(--error); }
.field__error { animation: fade-in 0.3s var(--ease) both; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }

/* ---------- Navigation: one gold rule that glides between items (main.js). Without JavaScript the
   per-link underline above still works. */
.nav-desktop ul { position: relative; }
.nav-desktop__indicator {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; background: var(--gold);
  transform-origin: left; pointer-events: none; opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease);
}
.nav-desktop.has-indicator .nav-desktop__link::after { display: none; }

/* ---------- Renovation projects: title, facts and link follow the project in, one after another. */
.has-reveal .reno-project__text.reveal > * { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.has-reveal .reno-project__text.reveal.is-revealed > * { opacity: 1; transform: none; }
.reno-project__text.reveal > :nth-child(2) { transition-delay: 0.08s; }
.reno-project__text.reveal > :nth-child(3) { transition-delay: 0.16s; }
.reno-project__text.reveal > :nth-child(4) { transition-delay: 0.24s; }

/* ---------- Leadership photos: a very slight lift inside the existing frame (proportions unchanged). */
.team-card__photo img { transition: transform 0.9s var(--ease-out); }
.team-card:hover .team-card__photo img { transform: scale(1.03); }

/* ---------- Form dropdowns: the chevron turns as the list opens. */
.field--select::after { transition: transform 0.3s var(--ease-out); }
.field--select:focus-within::after { transform: translateY(-10%) rotate(225deg); }