/* ============================================================
   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); }

/* Hamburger toggle (CR-1). Hidden by default and revealed only inside the
   900px block, and only when js/nav.js has added .sp-js to <html> — so with
   JavaScript off the button never appears at any width. 44x44 is the minimum
   comfortable touch target. The global :focus-visible outline above applies
   to it for free. */
.sp-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: #fff;
  cursor: pointer;
}
.sp-nav__toggle-icon { display: block; }
.sp-nav__toggle .sp-nav__toggle-icon--close { display: none; }
.sp-nav__toggle[aria-expanded="true"] .sp-nav__toggle-icon--menu { display: none; }
.sp-nav__toggle[aria-expanded="true"] .sp-nav__toggle-icon--close { display: block; }

.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; }   /* still the no-JS row's compaction */

  /* ---- CR-1: the nav collapses to a hamburger from here down --------------
     The desktop row needs about 870px (brand ~238 + links and pill ~562 + the
     24px padding above). Below that it could neither shrink — flex-shrink: 0
     on both children — nor wrap, since wrapping only started at 760, so it
     spilled outside the viewport. 900 rather than 880 because the wordmark
     renders in Georgia until Playfair loads (font-display: swap) and is wider
     than measured while it does.

     900 is duplicated as COLLAPSED in js/nav.js. No build step, no way to
     share it.

     .sp-nav__links IS the panel — there is no second copy of the links, so no
     second aria-current and nothing to keep in sync. Everything is gated on
     .sp-js so that a missing js/nav.js degrades to the old wrapping nav. */
  .sp-js .sp-nav__toggle { display: inline-flex; }

  .sp-js .sp-nav__links {
    /* .sp-nav is position: sticky and therefore already a containing block.
       Absolute inside it means the panel cannot escape the nav's z-index: 100
       stacking context — so it can never cover .sp-skip at 200, whatever
       value anyone gives it later. It also needs no body scroll lock, which
       is the whole iOS position:fixed bug class avoided. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px var(--sp-gutter-mobile) 20px;
    background: rgba(26,46,64,0.97);   /* matches .sp-nav's own literal */
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 24px rgba(0,0,0,0.28);
    /* Insurance for landscape phones: five rows plus the bar is ~356px and
       fits in 393px, but a longer menu later should scroll itself rather than
       the page behind it. */
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Closed. visibility rather than display so the panel can transition, and
       so the links genuinely leave the tab order and the accessibility tree
       instead of merely being invisible. The 0s-delayed visibility is what
       lets it fade out before it disappears. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--sp-duration) var(--sp-ease),
                transform var(--sp-duration) var(--sp-ease),
                visibility 0s linear var(--sp-duration);
  }
  .sp-js .sp-nav__toggle[aria-expanded="true"] + .sp-nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .sp-js .sp-nav__links .sp-nav__link {
    display: block;
    padding: 15px 12px;            /* 44px+ touch target */
    font-size: 12px;
    color: rgba(255,255,255,0.82);
    /* The desktop underline reads as a row divider once the links are full
       width, so the current page is marked down the left edge instead. */
    border-bottom: none;
    border-left: 3px solid transparent;
  }
  .sp-js .sp-nav__links .sp-nav__link[aria-current="page"] {
    color: #fff;
    border-left-color: var(--sp-seafoam);
    background: rgba(255,255,255,0.06);
  }
  .sp-js .sp-nav__links .sp-btn { margin-top: 8px; }
}

@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; }

  /* 🛑 CR-1: these two are now the JavaScript-off fallback, not general
     responsive rules — do not delete them as dead code. With .sp-js present
     the links are an absolutely positioned panel and centring here would drag
     the brand and the toggle together. Without it, this is exactly the
     wrapping nav the site shipped with, unchanged. */
  html:not(.sp-js) .sp-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
  }
  html:not(.sp-js) .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; }
  /* CR-1: brand + toggle + padding is ~330px at 20px, which overflows a
     320px viewport. Stepping the wordmark down clears it. */
  .sp-nav__wordmark { font-size: 17px; }
}

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