/* ============================================================
   Webfonts — SELF-HOSTED. Do not replace these with an @import
   or a <link> to fonts.googleapis.com.

   Until 2026-07-31 these loaded from Google Fonts. They no longer
   do, and that is load-bearing: /privacy-policy/ now states that a
   page load contacts NO third party at all. Putting Google back
   makes that page false. See D-012 in docs/DECISIONS.md.

   Five faces are here, because five are all this site renders:

     Playfair Display  400 normal   headings, wordmark, cay names
     Playfair Display  400 italic   pull quotes, badges, hero sub
     Lato              400 normal   body copy
     Lato              400 italic   captions, photo notes
     Lato              700 normal   buttons, eyebrows, <strong>

   Playfair is NEVER bold anywhere on this site, and no bold text
   sits inside an italic element, so Playfair 700 and Lato bold-
   italic are deliberately absent.

   *** ADDING A WEIGHT OR STYLE TO THIS STYLESHEET MEANS ADDING A
   FILE HERE TOO. *** There is no fallback fetch any more. A missing
   face is silently faked by the browser — smeared synthetic bold,
   mechanically slanted obliques — which is easy to miss in review.

   Two subsets per face. `latin` is the only one this site's copy
   actually needs; `latin-ext` costs nothing at runtime because
   unicode-range keeps a browser from fetching a subset unless a
   codepoint on the page falls inside it. It is insurance for a
   future page that gains an accented name.

   Files came from fonts.gstatic.com, so they are byte-identical to
   what visitors received before this change. Both families are SIL
   Open Font License 1.1 — see fonts/OFL-Lato.txt and
   fonts/OFL-PlayfairDisplay.txt, which the licence requires be
   distributed alongside them.
   ============================================================ */

/* Lato 400 normal — latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-normal-latin.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;
}
/* Lato 400 normal — latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-normal-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lato 700 normal — latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-700-normal-latin.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;
}
/* Lato 700 normal — latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-700-normal-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lato 400 italic — latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-italic-latin.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;
}
/* Lato 400 italic — latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-italic-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display 400 normal — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400-normal-latin.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;
}
/* Playfair Display 400 normal — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400-normal-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display 400 italic — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400-italic-latin.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;
}
/* Playfair Display 400 italic — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400-italic-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Spinnaker Point — site stylesheet
   Ported from the Claude Design export's design system
   (_ds/spinnaker-point-design-system-…). The React components
   Button / Card / Badge / SectionHeader / WaveDivider /
   PullQuote / Input are reproduced here as plain CSS classes.
   Source of record: site-src/design-export/
   ============================================================ */

/* ---------------- Tokens: colour ---------------- */
:root {
  --sp-ocean:        #2483FA;
  --sp-sky:          #68C5FA;
  --sp-seafoam:      #B6F2FB;
  --sp-blush:        #F5BFC3;
  --sp-deep-current: #1A3B4C;
  --sp-bone-sand:    #F4EEE3;

  --sp-ink:          #1A2E40;
  --sp-mid:          #3D5A73;
  --sp-periwinkle:   #B1D4FF;
  --sp-pale-rose:    #FCE6E3;
  --sp-light:        #F7FBFF;
  --sp-white:        #FFFFFF;

  --sp-color-primary:        var(--sp-ocean);
  --sp-color-primary-hover:  #1B6FE0;
  --sp-color-primary-active: #145CC0;
  --sp-color-secondary:      var(--sp-sky);
  --sp-color-accent:         var(--sp-seafoam);
  --sp-color-warm:           var(--sp-blush);

  --sp-text-strong:   var(--sp-ink);
  --sp-text-body:     var(--sp-mid);
  --sp-text-muted:    rgba(61, 90, 115, 0.6);
  --sp-text-on-dark:  rgba(255, 255, 255, 0.9);
  --sp-text-link:     var(--sp-ocean);

  --sp-surface-page:   var(--sp-light);
  --sp-surface-card:   var(--sp-white);
  --sp-surface-canvas: var(--sp-bone-sand);
  --sp-surface-dark:   var(--sp-ink);
  --sp-surface-soft:   var(--sp-pale-rose);

  --sp-border-hairline: rgba(36, 131, 250, 0.12);
  --sp-border-subtle:   rgba(36, 131, 250, 0.15);
  --sp-border-strong:   var(--sp-ocean);

  --sp-gradient-deep:   linear-gradient(160deg, #1A2E40 0%, #1a3a5c 40%, #0e2d4a 100%);
  --sp-gradient-ocean:  linear-gradient(135deg, var(--sp-ocean), var(--sp-sky));
  --sp-gradient-water:  linear-gradient(145deg, #2483FA 0%, #68C5FA 55%, #B6F2FB 100%);
  --sp-gradient-sunset: linear-gradient(160deg, #FCE6E3 0%, #F5BFC3 50%, #B1D4FF 100%);

  /* ---------------- Tokens: type ---------------- */
  --sp-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sp-font-sans:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* The export defined --sp-weight-light/regular/bold/black (300/400/700/900).
     All four were referenced by nothing, and since the fonts became self-hosted
     only 400 and 700 exist as real files — a var() reaching for 300 or 900
     would have got a silent synthetic fake. Removed rather than left as a trap.
     Use the literal 400 / 700, as the rest of this stylesheet does. */

  --sp-leading-tight: 1.15;
  --sp-leading-snug:  1.3;
  --sp-leading-body:  1.75;
  --sp-leading-loose: 1.8;

  --sp-tracking-eyebrow: 0.22em;
  --sp-tracking-caps:    0.12em;
  --sp-tracking-display: 0.04em;

  /* ---------------- Tokens: layout ---------------- */
  --sp-container:        960px;
  --sp-container-narrow: 680px;
  --sp-gutter:           40px;
  --sp-gutter-mobile:    24px;

  /* ---------------- Tokens: effects ---------------- */
  --sp-radius-sm:   8px;
  --sp-radius-md:   12px;
  --sp-radius-lg:   16px;
  --sp-radius-xl:   24px;
  --sp-radius-pill: 100px;

  --sp-shadow-xs:    0 1px 6px rgba(0, 0, 0, 0.04);
  --sp-shadow-sm:    0 2px 12px rgba(0, 0, 0, 0.08);
  --sp-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.06);
  --sp-shadow-lg:    0 4px 24px rgba(26, 46, 64, 0.12);
  --sp-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.13);

  --sp-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --sp-duration-fast: 0.15s;
  --sp-duration:      0.2s;
  --sp-duration-slow: 0.4s;
  --sp-lift:          translateY(-3px);
}

/* ---------------- Base ---------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sp-light);
  font-family: var(--sp-font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sp-ocean); text-decoration: none; }
a:hover { color: var(--sp-color-primary-hover); text-decoration: underline; }

img { max-width: 100%; }

/* Accessibility: skip link carried over from the legacy site */
.sp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--sp-ocean);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--sp-radius-sm) 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sp-skip:focus { left: 0; color: #fff; text-decoration: none; }

:focus-visible { outline: 3px solid var(--sp-sky); outline-offset: 2px; }

/* ============================================================
   Components
   ============================================================ */

/* ---------------- Button ---------------- */
.sp-btn {
  font-family: var(--sp-font-sans);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--sp-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  text-decoration: none;
  line-height: 1;
  transition: transform var(--sp-duration) var(--sp-ease),
              filter var(--sp-duration) var(--sp-ease),
              box-shadow var(--sp-duration) var(--sp-ease),
              background var(--sp-duration) var(--sp-ease);
  /* md is the default size */
  padding: 13px 28px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.sp-btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sp-shadow-lg); }

.sp-btn--sm { padding: 8px 18px; font-size: 12px; letter-spacing: 0.1em; }
.sp-btn--lg { padding: 17px 38px; font-size: 14px; letter-spacing: 0.14em; }
.sp-btn--full { width: 100%; }

.sp-btn--primary   { background: var(--sp-color-primary); color: #fff; border: 1.5px solid transparent; }
.sp-btn--primary:hover { background: var(--sp-color-primary-hover); color: #fff; }

.sp-btn--gradient  { background: var(--sp-gradient-ocean); color: #fff; border: 1.5px solid transparent; }
.sp-btn--gradient:hover { filter: brightness(1.05); color: #fff; }

.sp-btn--secondary { background: transparent; color: var(--sp-ocean); border: 1.5px solid var(--sp-ocean); }
.sp-btn--secondary:hover { background: rgba(36,131,250,0.06); color: var(--sp-ocean); }

.sp-btn--ghost     { background: transparent; color: var(--sp-ocean); border: 1.5px solid transparent; }
.sp-btn--ghost:hover { background: rgba(36,131,250,0.06); color: var(--sp-ocean); }

.sp-btn--onDark    { background: #fff; color: var(--sp-ink); border: 1.5px solid transparent; }
.sp-btn--onDark:hover { filter: brightness(1.05); color: var(--sp-ink); }

.sp-btn:disabled,
.sp-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ---------------- Card ---------------- */
.sp-card {
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  box-shadow: var(--sp-shadow-lg);
  transition: transform var(--sp-duration) var(--sp-ease),
              box-shadow var(--sp-duration) var(--sp-ease);
  cursor: default;
  background: var(--sp-surface-card);
  color: var(--sp-text-body);
}
.sp-card--white { background: var(--sp-surface-card); color: var(--sp-text-body); }
.sp-card--sand  { background: var(--sp-surface-canvas); color: var(--sp-text-body); }
.sp-card--soft  { background: var(--sp-surface-soft); color: var(--sp-deep-current); }
.sp-card--dark  { background: var(--sp-surface-dark); color: var(--sp-text-on-dark); }

.sp-card--interactive { cursor: pointer; display: block; color: inherit; }
.sp-card--interactive:hover { transform: var(--sp-lift); box-shadow: var(--sp-shadow-hover); text-decoration: none; }

.sp-card__media {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sp-card__body { padding: 28px 30px; }

/* ---------------- Badge ---------------- */
.sp-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--sp-radius-pill);
  font-family: var(--sp-font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1;
}
.sp-badge--primary   { background: var(--sp-gradient-ocean); color: #fff; border: 1.5px solid transparent; }
.sp-badge--secondary { background: transparent; color: var(--sp-ocean); border: 1.5px solid var(--sp-ocean); }
.sp-badge--muted     { background: var(--sp-periwinkle); color: var(--sp-ink); border: 1.5px solid transparent; }
.sp-badge--warm      { background: var(--sp-pale-rose); color: var(--sp-deep-current); border: 1.5px solid rgba(245,191,195,0.7); }

/* ---------------- SectionHeader ---------------- */
.sp-sh { text-align: left; margin: 0; }
.sp-sh--center { text-align: center; max-width: var(--sp-container-narrow); margin: 0 auto; }

.sp-sh__eyebrow {
  font-family: var(--sp-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sp-ocean);
  margin: 0 0 10px;
}
.sp-sh__title {
  font-family: var(--sp-font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: var(--sp-leading-snug);
  color: var(--sp-ink);
  display: inline-block;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--sp-ocean);
}
.sp-sh__intro {
  font-family: var(--sp-font-sans);
  font-size: 15px;
  line-height: var(--sp-leading-loose);
  color: var(--sp-mid);
  max-width: var(--sp-container-narrow);
  margin: 20px 0 0;
}
.sp-sh--center .sp-sh__intro { margin: 20px auto 0; }

.sp-sh--on-dark .sp-sh__eyebrow { color: var(--sp-sky); }
.sp-sh--on-dark .sp-sh__title   { color: #fff; }
.sp-sh--on-dark .sp-sh__intro   { color: var(--sp-text-on-dark); }

/* ---------------- WaveDivider ---------------- */
.sp-wave { width: 100%; overflow: hidden; line-height: 0; }
.sp-wave svg { display: block; width: 100%; height: 60px; }
.sp-wave--flip { transform: rotate(180deg); }

/* ---------------- PullQuote ---------------- */
.sp-quote { margin: 0; padding-left: 24px; border-left: 3px solid var(--sp-ocean); }
.sp-quote--warm { border-left-color: var(--sp-blush); }
.sp-quote--dark { border-left-color: var(--sp-sky); }

.sp-quote__text {
  margin: 0;
  font-family: var(--sp-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  color: var(--sp-deep-current);
  text-wrap: pretty;
}
.sp-quote--dark .sp-quote__text { color: #fff; }

.sp-quote__cite {
  margin-top: 14px;
  font-family: var(--sp-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-mid);
}
.sp-quote--dark .sp-quote__cite { color: rgba(255,255,255,0.5); }

/* ---------------- Input ---------------- */
.sp-field { width: 100%; }
.sp-field__label {
  display: block;
  font-family: var(--sp-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-mid);
  margin-bottom: 8px;
}
.sp-field__input,
.sp-field textarea {
  width: 100%;
  font-family: var(--sp-font-sans);
  font-size: 15px;
  color: var(--sp-ink);
  background: #fff;
  padding: 13px 16px;
  border-radius: var(--sp-radius-sm);
  border: 1.5px solid var(--sp-border-subtle);
  outline: none;
  transition: border-color var(--sp-duration) var(--sp-ease),
              box-shadow var(--sp-duration) var(--sp-ease);
}
.sp-field textarea { resize: vertical; line-height: 1.6; }
.sp-field__input:focus,
.sp-field textarea:focus {
  border-color: var(--sp-ocean);
  box-shadow: 0 0 0 3px rgba(36,131,250,0.12);
}

/* ---------------- Form notes (contact form status) ----------------
   Three states below the form on /connect-with-us/. --info is the standing
   "here are the other ways to reach me" panel; --success and --error are
   written by /js/contact.js and only ever after a send has resolved.
   Colour alone does not carry the meaning — each message says in words
   whether it sent. */
.sp-formnote {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--sp-radius-sm);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sp-deep-current);
  border: 1.5px solid transparent;
}
.sp-formnote--info {
  background: var(--sp-light);
  border-color: var(--sp-border-subtle);
  color: var(--sp-mid);
}
.sp-formnote--success {
  background: rgba(182, 242, 251, 0.42);
  border-color: rgba(36, 131, 250, 0.28);
}
.sp-formnote--error {
  background: var(--sp-pale-rose);
  border-color: rgba(245, 191, 195, 0.95);
}

/* ============================================================
   Site chrome
   ============================================================ */

.sp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26,46,64,0.94);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 16px 40px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.sp-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sp-nav__brand:hover { text-decoration: none; }
.sp-nav__brand img { width: 40px; height: 40px; display: block; flex-shrink: 0; }
.sp-nav__wordmark {
  font-family: var(--sp-font-display);
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.08em;
}
.sp-nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sp-nav__link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sp-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--sp-duration) var(--sp-ease),
              border-color var(--sp-duration) var(--sp-ease);
}
.sp-nav__link:hover { color: #fff; text-decoration: none; }
.sp-nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--sp-seafoam); }

.sp-footer__wave { background: var(--sp-bone-sand); }
.sp-footer__body {
  background: var(--sp-ink);
  padding: 56px 40px 64px;
  text-align: center;
}
.sp-footer__body img { width: 68px; height: 68px; display: block; margin: 0 auto 18px; }
.sp-footer__name {
  font-family: var(--sp-font-display);
  font-size: 22px;
  color: #fff;
  letter-spacing: 0.08em;
}
.sp-footer__tagline {
  margin: 8px 0 0;
  font-family: var(--sp-font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--sp-seafoam);
}
.sp-footer__links {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin: 30px 0 0;
  flex-wrap: wrap;
}
.sp-footer__links a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.sp-footer__links a:hover { color: #fff; }
.sp-footer__legal {
  margin: 32px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
}

/* ============================================================
   Layout helpers
   ============================================================ */

.sp-wrap { max-width: 1000px; margin: 0 auto; }
.sp-narrow { max-width: 720px; margin: 0 auto; }
.sp-sand { background: var(--sp-bone-sand); }

.sp-grid { display: grid; }
.sp-grid--2 { grid-template-columns: 1fr 1fr; }
.sp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* asymmetric splits used by the design */
.sp-grid--media-left  { grid-template-columns: 1.05fr 0.95fr; }
.sp-grid--copy-left   { grid-template-columns: 0.9fr 1.1fr; }
.sp-grid--header-left { grid-template-columns: 0.85fr 1.15fr; }

/* Page hero shared by the five interior pages */
.sp-hero {
  position: relative;
  padding: 96px 40px 82px;
  text-align: center;
  overflow: hidden;
}
.sp-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sp-hero__scrim { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(26,46,64,0.74) 0%, rgba(14,45,74,0.62) 100%); }
.sp-hero__eyebrow {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sp-sky);
  margin: 0 0 20px;
}
.sp-hero__title {
  position: relative;
  font-family: var(--sp-font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.14;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0;
}
.sp-hero__sub {
  position: relative;
  margin: 20px auto 0;
  max-width: 600px;
  font-family: var(--sp-font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--sp-seafoam);
}

.sp-prose { margin: 0; font-size: 16px; line-height: 1.8; color: var(--sp-mid); }
.sp-prose--lg { font-size: 17px; line-height: 1.85; }

/* Bulleted "·" list used on The House */
.sp-ticks { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.sp-ticks li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.6; color: var(--sp-mid); }
.sp-ticks li::before { content: "·"; color: var(--sp-ocean); font-weight: 700; }

.sp-figure { border-radius: var(--sp-radius-lg); overflow: hidden; box-shadow: var(--sp-shadow-lg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.sp-tile { border-radius: var(--sp-radius-md); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ---------------- The Abacos: area picker ---------------- */
.sp-cay {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--sp-radius-md);
  overflow: hidden;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: left;
  font-family: inherit;
}
.sp-cay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,46,64,0.80) 0%, rgba(26,46,64,0) 62%);
}
.sp-cay__label { position: absolute; bottom: 16px; left: 18px; right: 18px; z-index: 1; }
.sp-cay__name { font-family: var(--sp-font-display); font-size: 19px; line-height: 1.25; color: #fff; }
.sp-cay__meta {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-seafoam);
}
.sp-cay__ring {
  position: absolute;
  inset: 0;
  border-radius: var(--sp-radius-md);
  pointer-events: none;
  border: 3px solid var(--sp-ocean);
  box-shadow: 0 0 0 3px rgba(36,131,250,0.18);
  opacity: 0;
  transition: opacity var(--sp-duration) var(--sp-ease);
  z-index: 2;
}
.sp-cay[aria-pressed="true"] .sp-cay__ring { opacity: 1; }

.sp-cay--cta {
  background: var(--sp-gradient-deep);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
}
.sp-cay--cta::after { content: none; }
.sp-cay--cta:hover { text-decoration: none; }

.sp-area__col-head {
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--sp-mid);
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--sp-ocean);
}
.sp-area__col-head--getting { border-bottom-color: var(--sp-sky); }
.sp-area__col-head--eat { border-bottom-color: var(--sp-blush); }
.sp-area__list { list-style: none; margin: 0; padding: 0; }
.sp-area__list li { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: var(--sp-mid); }

/* ---------------- Legal / long-form prose ---------------- */
.sp-legal { max-width: var(--sp-container-narrow); margin: 0 auto; }

.sp-legal h2 {
  font-family: var(--sp-font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: var(--sp-leading-snug);
  color: var(--sp-ink);
  margin: 48px 0 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sp-border-hairline);
}
.sp-legal h2:first-child { margin-top: 0; }

.sp-legal h3 {
  font-family: var(--sp-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-ocean);
  margin: 28px 0 0;
}

.sp-legal p { font-size: 16px; line-height: var(--sp-leading-body); color: var(--sp-mid); margin: 16px 0 0; }
.sp-legal ul { margin: 16px 0 0; padding-left: 22px; }
.sp-legal li { font-size: 16px; line-height: var(--sp-leading-body); color: var(--sp-mid); margin: 0 0 10px; }
.sp-legal strong { font-weight: 700; color: var(--sp-ink); }

.sp-legal__meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
  margin: 0 0 40px;
}

/* The plain-language summary that opens the policy */
.sp-legal__summary {
  background: var(--sp-bone-sand);
  border-left: 3px solid var(--sp-ocean);
  border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0;
  padding: 26px 30px;
  margin: 0 0 8px;
}
.sp-legal__summary p:first-child { margin-top: 0; }

/* ---------------- Amenity grid ---------------- */
.sp-amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(26,46,64,0.13);
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.sp-amenities li {
  background: var(--sp-bone-sand);
  padding: 22px 24px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--sp-ink);
}

/* ============================================================
   Responsive
   The Design export was authored desktop-only; these breakpoints
   are additions, not part of the original mockup.
   ============================================================ */

@media (max-width: 900px) {
  .sp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sp-amenities { grid-template-columns: repeat(2, 1fr); }
  .sp-nav { gap: 20px; padding: 14px 24px; }
  .sp-nav__links { gap: 16px; }
}

@media (max-width: 760px) {
  .sp-grid--2,
  .sp-grid--3,
  .sp-grid--media-left,
  .sp-grid--copy-left,
  .sp-grid--header-left { grid-template-columns: 1fr; }

  .sp-amenities { grid-template-columns: 1fr; }

  /* Media blocks that sit beside copy read better after it on mobile */
  .sp-grid--media-left > .sp-figure { order: 2; }

  .sp-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
  }
  .sp-nav__links { flex-wrap: wrap; justify-content: center; gap: 14px; }

  section, .sp-hero { padding-left: var(--sp-gutter-mobile) !important; padding-right: var(--sp-gutter-mobile) !important; }
  .sp-footer__body { padding-left: var(--sp-gutter-mobile); padding-right: var(--sp-gutter-mobile); }
  .sp-footer__links { gap: 18px; }

  /* Long review copy is set in two columns on desktop */
  .sp-review-columns { columns: 1 !important; }
}

@media (max-width: 560px) {
  .sp-grid--4 { grid-template-columns: 1fr; }
  .sp-hero { padding-top: 64px; padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .sp-btn:hover, .sp-card--interactive:hover { transform: none; }
}