.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  
x-dc{display:none!important}
html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/65b879af-620e-498e-9af6-f7b6c10f0b66.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cee63179-4e99-47f1-bee1-58a2b187b98b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/d8a7a43a-1fbf-4691-9ffa-88b40d813960.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/d9b76f73-a422-4ce4-98f0-575e46ae89ea.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ea88d25b-dbb2-418e-b761-268b0505768d.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/81491a0a-6bc3-456e-9100-9ce18c922f29.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/1d3d8aa1-1080-4774-90d6-a7d5747da9cb.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/e8eae647-3eed-4da7-84aa-88d71ed87c9b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/845c1f6a-72f3-4bea-a811-1e20aef00442.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/439adaa7-07a6-44f2-a40e-875dfbb546fc.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/f8b8c2e2-f1da-442f-b776-4656789f2c57.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/14cd1962-ad02-4c9d-ab69-4702c1bc5bf3.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/46045e26-cc3a-46f4-9a71-d2d2a5f274fc.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/2c8b927b-d802-4041-897b-4d833a2b7568.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;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/afe1a055-823e-4ff7-8999-dde9e8f39c60.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;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/d8ff5699-6366-45cd-917b-6d6b73e29bf2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/afe1a055-823e-4ff7-8999-dde9e8f39c60.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;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/d8ff5699-6366-45cd-917b-6d6b73e29bf2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/afe1a055-823e-4ff7-8999-dde9e8f39c60.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;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/d8ff5699-6366-45cd-917b-6d6b73e29bf2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/afe1a055-823e-4ff7-8999-dde9e8f39c60.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;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/d8ff5699-6366-45cd-917b-6d6b73e29bf2.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;
}


  html, body { margin: 0; padding: 0; background: #F6F2EA; }
  * { box-sizing: border-box; }
  a { color: #0A5E80; text-decoration: none; }
  a:hover { color: #B4603A; }
  input::placeholder, textarea::placeholder { color: #8A8F8B; opacity: 1; }
  img { cursor: zoom-in; }
  img[data-nolight] { cursor: zoom-out; }
  input, textarea, select, button { font-family: inherit; font-size: inherit; }
  img { max-width: 100%; }

/* progressive enhancement for the live availability calendar */
/* A heading that belongs in the document outline but not in the design. */
.sv-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sv-cal-status{font-size:15px;color:#666B67;font-family:Karla,system-ui,sans-serif}

/* ---------------------------------------------------------------------------
   Responsive layer.

   The pages carry inline styles from the original desktop design, and inline
   styles beat stylesheet rules, so the phone overrides below need !important.
   Everything here is scoped to narrow screens; desktop is untouched.
   --------------------------------------------------------------------------- */

/* The hero photograph is three times as wide as it is tall, which leaves a
   letterbox on a phone. Narrow screens get a taller box instead, and
   object-fit crops to the middle of the frame — the pool and the ocean. */
@media (max-width: 860px) {
  #sv-hero { aspect-ratio: 2 / 1 !important; }
}
@media (max-width: 620px) {
  #sv-hero { aspect-ratio: 4 / 3 !important; }
}

.sv-navtoggle { display: none; }

/* Between about 1000px and 1370px the navigation no longer fits beside the
   logo at full size and the header stacked into two rows. Slightly smaller
   type, tighter gaps and narrower side padding keep it on one line, without
   changing anything on a full-size screen. */
@media (min-width: 1081px) and (max-width: 1150px) {
  .sv-header { padding-left: 22px !important; padding-right: 22px !important;
               gap: 14px !important; flex-wrap: nowrap !important; }
  .sv-nav { font-size: 17px !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .sv-nav a { white-space: nowrap !important; }
  .sv-hdr-btn { font-size: 14.5px !important; padding: 9px 16px !important; }
}

/* ---------------------------------------------------------------------------
   The two enquiry buttons, in the middle of the header.

   A three-column grid, 1fr / auto / 1fr, puts the middle column on the
   header's true centre no matter what the logo and the navigation measure —
   which a row of flex items cannot do without resizing one side or the other.
   minmax(0, 1fr) lets the navigation column shrink rather than shove the
   buttons off centre.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Header height. Mark asked for half an inch off it -- 48px, since CSS counts
   an inch as 96px -- taking the sticky header from 176px to 128px.

   Most of it comes out of space rather than content: the padding above and
   below drops from 20px to 10px, and the gap between the two rows from 22px to
   5px, which is 37 of the 48. The wordmark gives up the last 11, from 70px to
   59px. There is no other 11px in there: the two rows are what let the Booking
   Request button sit on the centre line, the navigation is a single line of
   17.5px type, and the tagline is 18px.

   Phones are untouched -- that header is already 78px, and half an inch out of
   it would leave nothing.
   --------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  /* One row: logo left, menu in the middle, one button right. Mark chose this
     over the two-band alternative on 18 September, from mock-ups of both.

     It replaces a two-row header that had three different alignment rules in
     it -- logo hard left, Booking Request centred on the page, menu centred in
     the gap between them -- which is why it never quite sat right however the
     pieces were nudged. One row has one rule, and the header comes down from
     171px to about 97px, which is 74px given back on every page.

     The wordmark drops from 72px to 48px to make the room. At 48px the tagline
     is the wider of the two, so it sets the logo's footprint and the mark reads
     as smaller and tidier rather than shrunken. */
  .sv-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav cta";
    align-items: center;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .sv-logo [role="img"] { height: 48px !important; }
  /* grid-area first: it sets the column from the named area. Dropping it
     auto-placed the logo into an implicit fourth column on the right, which
     quietly pushed the centre 144px off. */
  .sv-header > .sv-logo { grid-area: logo; justify-self: start; align-self: center; }
  .sv-hdr-cta { grid-area: cta; justify-self: end; align-self: center; }
  /* One call to action, not two. Booking Request and Inquire were two dark
     pills of near-equal weight asking for much the same thing, so neither led.
     Inquire becomes the last item in the menu, where it reads as the
     lower-commitment choice it is -- and the ~95px it frees is part of what
     lets the row fit at a narrow laptop. The button is gone from the header,
     not from the page: the menu link carries the same data-sv-open="question",
     so the form still opens. */
  .sv-hdr-end { display: none !important; }
  /* The two-line shape. A full pill at this height reads as a lozenge, so the
     corners come in to 14px and it sits as a block. 15px type on 8px/16px of
     padding -- Mark picked this size from four (18 September); smaller started
     to look like a secondary control rather than the one action in the header,
     and it is also the tap target on a tablet. */
  .sv-hdr-cta .sv-hdr-btn {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.12 !important;
    font-size: 15px !important;
    padding: 8px 16px !important;
    border-radius: 14px !important;
  }
  .sv-header > .sv-nav {
    grid-area: nav;
    justify-self: center;
    justify-content: center;
  }
  /* The type and the gaps both track the viewport, because the row is tight at
     the bottom of the range: at 1081 the content is 1037px and the logo, menu
     and button want 1015px of it, so 39px of clearance each side. At 1440 there
     is 98px. Fixed sizes would either overflow at 1081 or look mean at 1600. */
  /* Raised on 18 September with the width the two-line button gave back: 19px
     at a laptop against 16.1px before, and 15px at the narrowest desktop
     against 14px. Close to the 20px the menu carried in the two-row header.

     The floor and the ceiling are tuned against different widths. The floor
     binds at 1081, where the row is tightest; the ceiling only ever applies
     where there is room to spare. A ceiling of 20px measures fine at 1081 and
     1440 and still collides at 1160, which is the band where the menu grows
     with the viewport faster than the margins give room back -- the whole
     reason the sweep runs every 20px rather than checking three widths. */
  .sv-nav { font-size: clamp(16px, 1.45vw, 20px) !important;
            gap: clamp(9px, 1.1vw, 18px) !important;
            flex-wrap: nowrap !important; }
  /* and the links themselves do not break mid-label. Without this the menu
     still went to two lines -- not by wrapping the row, which nowrap prevents,
     but by squeezing individual links until their own text wrapped inside. */
  .sv-nav a { white-space: nowrap !important; }
  /* A soft box marks the page you are on, and follows the cursor. Mark asked on
     18 September for demarcation between the menu items; boxes that sit there
     permanently need padding, and padding is width, which the row does not have
     -- roomier boxes on all six overlapped the logo by 25px at 1161. So the box
     appears only where it earns its place: under the pointer, and under the
     current page.

     It costs nothing in layout because the padding is cancelled by an equal
     negative margin, so the box paints larger than the space it occupies. 4px
     is the horizontal limit: the menu's own gap is what separates two boxes,
     and at 4px they still clear each other by 3.9px at the narrowest desktop
     (7.8px at a laptop). At 6px they touch. */
  .sv-nav > a {
    padding: 7px 4px !important;
    margin: -7px -4px !important;
    border-radius: 8px !important;
  }
  .sv-nav > a:hover,
  .sv-nav > a[aria-current] { background: rgba(27, 29, 28, .06) !important; }
  @media (prefers-reduced-motion: no-preference) {
    .sv-nav > a { transition: background .12s ease !important; }
  }
  /* Neither of the menu's own pair is shown at desktop. Inquire was put into
     the menu on 18 September when the header went to one row, and taken out
     again the same day (Mark's call) -- the menu reads as places on the site,
     and an action sitting at the end of it was the odd one out. The pair stays
     in the markup for the hamburger menu, which is the only route to the
     question form on a phone. */
  .sv-nav-cta { display: none !important; }
}

.sv-hdr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px;
  background: #10323D; color: #F6F2EA !important;
  font-family: Karla, system-ui, sans-serif; font-size: 16px; font-weight: 600;
  line-height: 1.2; white-space: nowrap; border-bottom: 0 !important;
  transition: background .14s ease;
}
.sv-hdr-btn:hover { background: #17475A; }

/* A free Saturday on the availability calendar starts a booking request for
   that week. The affordance is deliberately quiet: most Saturdays in a
   twelve-month calendar are free, so anything stronger than a weight change
   would turn the calendar into a field of buttons. The ring appears on hover
   and on keyboard focus, which is where it is actually needed. */
.sv-cal-pick { cursor: pointer; font-weight: 600; }
.sv-cal-pick:hover { box-shadow: 0 0 0 2px #10323D; }
.sv-cal-pick:focus-visible { box-shadow: 0 0 0 2px #10323D; outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .sv-cal-pick { transition: box-shadow .12s ease; }
}

@media (max-width: 1080px) {
  .sv-hdr-cta, .sv-hdr-end { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .sv-hdr-btn { transition: none; } }

/* ---------------------------------------------------------------------------
   The header stays at the top of the window as the page scrolls. It needs its
   own background, because the page runs underneath it, and it shrinks once you
   have scrolled past the first screen so it does not eat a phone's viewport:
   the tagline steps aside and the wordmark comes down a size.
   --------------------------------------------------------------------------- */
/* The exported page wrapper sets overflow-x: hidden, which makes it a scroll
   container and stops the sticky header sticking. clip on the body gives the
   same protection against a stray wide element without that side effect. */
html { scroll-padding-top: 100px; }
@media (min-width: 1081px) { html { scroll-padding-top: 128px; } }
body { overflow-x: clip; }
.sv-page { overflow-x: visible !important; }


.sv-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #F6F2EA;
  transition: box-shadow 0.18s ease;
}
/* Only a shadow appears once the page has scrolled. Nothing here may change the
   header's height: that would change the document height, which nudges the
   scroll position, which re-runs the whole thing — the header visibly shakes. */
.sv-header.is-stuck { box-shadow: 0 2px 14px rgba(27, 29, 28, 0.10); }

@media (prefers-reduced-motion: reduce) {
  .sv-header { transition: none; }
}

/* The navigation no longer fits beside the logo below about 980px, so the
   header collapses behind the menu button from there down. With two buttons
   in it rather than one, that point is 1080px. The type scale
   below is a separate question and still changes at 860px. */
@media (max-width: 1080px) {
  .sv-header {
    position: sticky !important;
    top: 0 !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 12px clamp(16px, 4vw, 24px) !important;
  }
  .sv-logo { flex-direction: column !important; align-items: flex-start !important; }
  .sv-logo [role="img"] { height: 37.4px !important; }
  .sv-logo span { font-size: 12.1px !important; letter-spacing: .04em !important; }

  .sv-navtoggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    margin-left: auto;
    padding: 10px;
    border: 1px solid rgba(27,29,28,.22);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .sv-navtoggle span { display: block; height: 2px; width: 100%; background: #1B1D1C; border-radius: 2px; }

  .sv-nav { display: none !important; }
  .sv-nav.is-open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 6px clamp(16px, 4vw, 24px) 14px !important;
    background: #F6F2EA !important;
    border-bottom: 1px solid rgba(27,29,28,.12) !important;
    box-shadow: 0 10px 24px rgba(27,29,28,.10) !important;
    z-index: 60 !important;
  }
  .sv-nav.is-open > a.sv-nav-cta {
    margin-top: 12px !important;
    padding: 13px 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #10323D !important;
    color: #F6F2EA !important;
    font-weight: 600 !important;
    text-align: center !important;
  }
  .sv-nav.is-open > a.sv-nav-cta + a { margin-top: 8px !important; }

  .sv-nav.is-open > a {
    padding: 13px 2px !important;
    border-bottom: 1px solid rgba(27,29,28,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1B1D1C !important;
    font-size: 17px !important;
    text-align: left !important;
    display: block !important;
  }
  .sv-nav.is-open > a:last-child {
    margin-top: 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #10323D !important;
    color: #F6F2EA !important;
    text-align: center !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 860px) {
  /* Type and rhythm: the desktop scale is simply too large at this width. */
  h1 { font-size: clamp(29px, 8.4vw, 40px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(23px, 6vw, 32px) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(18px, 4.6vw, 22px) !important; }
  p, li, label { font-size: 17.5px !important; line-height: 1.6 !important; }

  section { padding-left: 16px !important; padding-right: 16px !important; }
  section > div { max-width: 100% !important; }

  /* Nothing may be wider than the screen. */
  /* height:auto would break the images that fill a fixed-ratio box with
     object-fit:cover — they'd shrink and leave the container showing. */
  img:not([style*="object-fit"]), video, table { max-width: 100% !important; height: auto !important; }
  img[style*="object-fit"] { max-width: 100% !important; }
}

@media (max-width: 620px) {
  section { padding-top: 34px !important; padding-bottom: 34px !important; }

  /* Multi-column grids become single column rather than squeezing. */
  [style*="grid-template-columns"]:not(#sv-calendar):not([style*="repeat(7"]):not(.sv-nav) {
    grid-template-columns: 1fr !important;
  }
  /* Gallery items carry grid-column: span 2. Against a single column that
     forces a phantom second column, which is what made the photographs come
     out at three different widths. */
  [style*="grid-column"] { grid-column: auto !important; }

  /* ...except the stat row (8 guests / $550 / Sat-Sat / 45 seconds), which
     reads better two-up than as four stacked rows. */
  div[style*="minmax(150px"]:not(#sv-calendar):not(#sv-nav) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* The calendar keeps two months across; its day grid stays seven wide. */
  #sv-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  #sv-calendar [style*="repeat(7"] { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  #sv-calendar div { font-size: 11px !important; }

  /* Stat rows (8 / $550 / Sat-Sat) read better side by side than stacked. */
  .sv-stats { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 12px !important; }

  input, select, textarea { font-size: 16px !important; }  /* stops iOS zooming on focus */

  /* A 3:1 banner with min-height:160px forces a 480px width, which overflows a
     390px phone. Let the ratio go taller instead of letting the box go wider. */
  [style*="aspect-ratio"] { min-height: 0 !important; }
  [style*="aspect-ratio: 3 / 1"] { aspect-ratio: 3 / 2 !important; }
}

@media (max-width: 420px) {
  #sv-calendar { grid-template-columns: 1fr !important; }
  #sv-calendar div { font-size: 13px !important; }
}


/* ---------------------------------------------------------------------------
   The wordmark and its tagline. The design shipped them at 64px and 13.5px;
   they went to 70 and 14.85, back down to 59 when the header had to lose half
   an inch, and are now 72 and 16.5 at Mark's request (18 September).

   That last step costs height, and there is nowhere left to take it from: the
   padding is 9px, the gap between the rows is 4px, and the menu is the size
   Mark asked for. So the header grows with the logo -- 128px to 141px -- and
   is still 35px shorter than the 176px it started at.

   The size is inline on the markup in every view, so it is overridden here.

   This block used to carry a shine sweeping across the letters and three
   sparkles behind it. Removed at Mark's request, 18 September 2026. The
   wordmark's flat accent fill is set inline on the element, so nothing has to
   be put back.
   --------------------------------------------------------------------------- */

/* The wordmark carried #059DD9, five points of lightness below the site accent,
   from an earlier round. Reverted on 18 September: Mark wants the wordmark and
   the italic "backyard." in the home page headline to be one colour, and wants
   the brighter of the two, because it glows where the darker one sits flat. So
   the override is gone and the mark takes --sv-accent (#06AFF2) like everything
   else. Nothing else changes -- that variable was already filling the headline
   italic and the two quote rules on Planning Your Trip.

   The trade this makes, knowingly: #06AFF2 on the cream measures 2.23:1. A
   logotype is exempt from the contrast rules, so the wordmark is not a
   compliance question, but the headline word is still below the 3:1 that large
   text needs, and choosing the brighter blue leaves that finding open. */

@media (min-width: 1081px) {
  /* 64px, up from 48px. The ceiling for a single row: the mark is 3.69 times as
     wide as it is tall, so 64px is 236px of the row, and 72px collides with the
     menu at a narrow laptop however the menu is tuned. */
  .sv-logo [role="img"] { height: 64px !important; }
  .sv-logo > span { font-size: 15px !important; }
}


/* ---------------------------------------------------------------------------
   The enquiry forms. Each opens in a panel over the page; the openers are real
   links first, so the buttons still lead somewhere without JavaScript.
   --------------------------------------------------------------------------- */

.sv-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 22px 46px; border-radius: 999px; border: 0;
  background: #10323D; color: #F6F2EA;
  font-family: Karla, system-ui, sans-serif; font-size: 21px; font-weight: 600;
  letter-spacing: .01em; line-height: 1.25; text-align: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(27,29,28,.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sv-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(27,29,28,.16); }
.sv-cta:active { transform: none; }
/* The line under the button reads at the size of the note boxes elsewhere on
   the site -- 18.5px on a 1.65 line -- rather than a size below body text.
   Mark's call, 18 September. It keeps its quieter colour. */
/* The line under the question button, at the foot of every page. Larger and in
   the body's own near-black rather than the muted grey (Mark's call, 18
   September): it is the promise that someone real answers, which is the point
   of the button above it, and grey was reading as small print. */
.sv-cta-note {
  font-family: Karla, system-ui, sans-serif; font-size: 21px; line-height: 1.6;
  color: #1B1D1C; margin: 16px 0 0;
}

.sv-modal[hidden] { display: none; }
.sv-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(12px, 4vh, 48px) 16px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* scrolling the panel does not drag the page */
}
.sv-modal-backdrop { position: fixed; inset: 0; background: rgba(27,29,28,.55); }
.sv-modal-panel {
  position: relative; width: 100%; max-width: 680px;
  background: #F6F2EA; border-radius: 22px;
  padding: clamp(24px, 3.4vw, 42px);
  box-shadow: 0 18px 50px rgba(27,29,28,.30);
}
.sv-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(27,29,28,.20); background: #FFFDF8;
  color: #1B1D1C; font: 400 24px/1 Karla, system-ui, sans-serif;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sv-modal-x:hover { background: #EFEADF; }
.sv-modal-title {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); margin: 0 0 10px; padding-right: 52px;
}
/* the same sentence appears inside the panel, and matches */
/* Matched to .sv-cta-note above (Mark's call, 18 September) -- the question
   panel opens on the same sentence that sits under the button that opened it,
   and the two looked different. The rule covers the booking panel's lead too,
   because the two panels are siblings and it would be worse for them to differ
   from each other than for both to move. */
.sv-modal-lead {
  font-size: 21px; line-height: 1.6; color: #1B1D1C; margin: 0 0 22px; max-width: 52ch;
}
.sv-modal-signoff {
  font-family: Karla, system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  color: #666B67; margin: -12px 0 22px;
}
.sv-modal-signoff a { color: #10323D; text-decoration: underline; text-underline-offset: 3px; }
/* "All photos" and "See the availability calendar" are standalone links rather
   than links inside a sentence, and both measured 22px tall on a phone --
   under the 32px that is comfortable to hit with a thumb. Vertical padding
   fixes it without changing how they look; the negative margin keeps the
   surrounding spacing exactly as it was. An inline link inside a paragraph is
   a different case and is left alone: padding there would overlap the lines
   above and below, and WCAG exempts links in a block of text for that reason.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .sv-tap { display: inline-block; padding: 7px 0 !important; margin: -7px 0 !important; }
}

/* The line under the two date fields: the night count, and the rule when the
   dates are outside it. Quiet -- it explains, it does not scold. */
.sv-date-note {
  font-family: Karla, system-ui, sans-serif;
  font-size: 15px; line-height: 1.45; color: #666B67;
  margin: -4px 0 0; max-width: 46em;
}
.sv-modal form { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

/* ---------------------------------------------------------------------------
   The enquiry forms. The design shipped them at 14.5px labels over 16.5px
   fields, which is smaller than the body text around them. Labels go to 16.5
   and everything a visitor types into goes to 18.5, the size the note boxes
   use. All three forms, so they match wherever one is met.
   --------------------------------------------------------------------------- */
.sv-modal form label,
form[name="contact"] label { font-size: 16.5px !important; }

.sv-modal form input,
.sv-modal form select,
.sv-modal form textarea,
.sv-modal form button,
form[name="contact"] input,
form[name="contact"] select,
form[name="contact"] textarea,
form[name="contact"] button { font-size: 18.5px !important; }

/* Both submit buttons sit centred under their form. */
.sv-modal form button { justify-self: center !important; }

/* One blue for every note on the site. These boxes started at the accent,
   #06AFF2, went to #6EB3CF when Mark asked for less saturation, and now match
   the notices on Planning Your Trip and Rates, which were already #E6F3FB --
   his call, 18 September, so that a note looks like a note wherever it turns
   up. Contrast against the dark teal type goes from 5.8 to 1 up to 15 to 1. */
.sv-note { background: #E6F3FB !important; }

@media (prefers-reduced-motion: reduce) { .sv-cta { transition: none; } }

/* ---------------------------------------------------------------------------
   The photo gallery: photographs as cards, laid out square.

   The card is the whole of the treatment -- a white border around each
   photograph with a deeper margin under it, the way a print is trimmed, a soft
   shadow so the cards sit ON the page rather than in it, and the caption
   inside the border. No tape, no pins, no paper texture, no second typeface.

   The tilts and the trimmed, offset widths are gone (Mark's call, 18
   September). Every card is the full width of its column, so the left and
   right edges run straight down the page and nothing sits at an angle. The
   sizes still vary, but only in the way the photographs themselves vary: each
   box carries its own picture's shape, so a 16:9 is shorter than a 4:3 and a
   portrait is taller than either, and the two panoramas run the full width.
   Nothing is cropped to make anything line up.

   Two columns rather than three: the photographs are the page, so they get the
   room -- about 620px a card on a full screen.
   --------------------------------------------------------------------------- */
.sv-gallery { max-width: 1320px !important; display: grid !important;
  grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

.sv-gallery > figure {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 14px 14px 0;
  background: #FFFDF8;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(27, 29, 28, .10), 0 8px 24px rgba(27, 29, 28, .10);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease;
}
/* the photograph itself: square corners, because prints have square corners */
.sv-gallery > figure > div { border-radius: 1px !important; }

.sv-gallery > figure > figcaption {
  text-align: center;
  padding: 13px 4px 15px !important;
  font-style: italic;
  font-size: 13.5px !important;
  letter-spacing: .015em !important;
}

/* A card lifts when you reach for it. That is the only movement left. */
.sv-gallery > figure:hover,
.sv-gallery > figure:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(27, 29, 28, .12), 0 18px 38px rgba(27, 29, 28, .16);
  position: relative;
  z-index: 2;
}

/* The two panoramas run the full width of the frame. */
.sv-gallery > figure.sv-gal-lead {
  grid-column: 1 / -1;
  margin-bottom: 12px !important;
  padding: 16px 16px 0;
}

@media (max-width: 1100px) {
  .sv-gallery { gap: 32px; }
  .sv-gallery > figure { padding: 11px 11px 0; }
}
@media (max-width: 760px) {
  .sv-gallery { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-gallery > figure { transition: none; }
}