/* Static content first; delivery and Facility pin briefly, the product chapters reveal as they scroll in. */
.is-home { background:#06366b; }
/* Homepage backgrounds span the viewport; chapter content keeps its own limits. */
.is-home main { max-width:none; overflow:clip; }
.chapter-hero { color:#fcfaf6; padding:0 var(--content-gutter); background:radial-gradient(ellipse at 70% 0%,#0b4d90 0%,transparent 65%); }
/* Continue the hero glow up behind the header so no seam shows where they meet. Along that
   edge the colour depends only on the horizontal radius: the hero's farthest-corner ellipse
   is 0.7 x sqrt(2) = 98.995% wide, so the header uses the same width from its bottom edge. */
.is-home .header-shell { background:radial-gradient(ellipse 98.995% 2000px at 70% 100%,#0b4d90 0%,transparent 65%),#06366b; }
/* The contact row above the header adds height; give the same space back above the heading so
   the delivery image shows as much of itself in the first screen as before. */
@media(min-width:1000px) { .is-home .chapter-masthead { padding-top:calc(clamp(40px,6vh,72px) - 14px); } }
@media(min-width:761px) and (max-width:999px) { .is-home .chapter-masthead { padding-top:24px; } }
.chapter-masthead { max-width:1448px; margin:auto; padding:clamp(40px,6vh,72px) var(--content-gutter) 32px; }
.chapter-label { font-size:14px; line-height:1.4; font-weight:500; letter-spacing:.15em; text-transform:uppercase; margin-bottom:28px; }
.chapter-masthead .chapter-label { margin-bottom:20px; }
.chapter-masthead h1 { font-size:clamp(40px,6.3vw,96px); font-weight:500; letter-spacing:-.045em; line-height:1.08; margin:0; max-width:100%; }
.chapter-title-service { display:inline-block; white-space:nowrap; }
/* The header carries the quote button, so the hero keeps only its introduction (owner request). */
.chapter-intro { display:flex; justify-content:flex-start; align-items:center; gap:32px; margin-top:24px; font-size:18px; line-height:1.5; }
.chapter-intro p { max-width:550px; margin:0; color:#d6e7f5; }
.chapter-delivery-stage { margin-inline:calc(-1 * var(--content-gutter)); }
.chapter-delivery-stage .chapter-panel { display:block; min-height:0; }
.chapter-delivery { position:relative; width:100%; margin:0; overflow:hidden; background:#06366b; }
.chapter-values { display:flex; justify-content:space-between; gap:20px; max-width:1050px; margin:0 auto; padding:28px 0 42px; list-style:none; color:#d6e7f5; font-size:14px; }
/* The service promises read as a trust strip: an icon in a soft disc and a firm label. They are
   statements, not links, so they carry no hover state. */
.chapter-values li { display:flex; align-items:center; gap:14px; color:#fcfaf6; font-size:17px; font-weight:600; letter-spacing:-.005em; }
.value-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:#ffffff14; box-shadow:inset 0 0 0 1px #ffffff2e; color:#cfe3f5; }
.value-icon svg { width:22px; height:22px; }
/* The icons pop in once, one after another, as the strip scrolls into view (home-chapters.js). */
.chapter-values.will-animate .value-icon { opacity:0; transform:scale(.6); }
.chapter-values.will-animate.is-in .value-icon { animation:value-pop .55s cubic-bezier(.3,1.5,.5,1) forwards; }
.chapter-values.is-in li:nth-child(2) .value-icon { animation-delay:.12s; }
.chapter-values.is-in li:nth-child(3) .value-icon { animation-delay:.24s; }
@keyframes value-pop { to { opacity:1; transform:none; } }
.chapter-panel { display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); align-items:center; min-height:680px; }
.chapter-copy { padding:clamp(44px,7vw,110px) clamp(28px,5vw,80px); }
.chapter-copy h2 { font-size:clamp(42px,4.5vw,72px); line-height:1.04; font-weight:500; margin-bottom:26px; }
.chapter-copy p:not(.chapter-label) { max-width:370px; font-size:18px; line-height:1.55; }
.chapter-copy em,.chapter-facility em { font-family:'Instrument Serif',Georgia,serif; font-weight:400; }
.chapter-link { display:inline-flex; gap:24px; align-items:center; justify-content:space-between; min-height:48px; padding:10px 0; border-bottom:1px solid currentColor; font-size:16px; line-height:1.4; font-weight:500; }
.chapter-media { min-width:0; position:relative; margin:0; overflow:hidden; background:#06366b; }
.chapter-media img { width:100%; height:100%; object-fit:cover; }
.chapter-delivery img { display:block; width:100%; height:clamp(310px,55svh,650px); object-fit:cover; object-position:50% 0%; }
/* Service cards (owner request 2026-10-07): Accommodation leads as a wide card, with End of Trip
   and Spa side by side beneath it, their photos facing outwards. Copy and photo share one framed
   card, so they read together and no wide empty bands open between them. */
.chapter-services { background:#06366b; border-top:1px solid #ffffff24; display:grid; gap:24px; padding:clamp(48px,6vw,96px) max(var(--content-gutter),calc((100% - 1320px) / 2)); }
/* isolation keeps each product's soft shadow above its own card background, with or without the
   scroll reveal's transform. */
.chapter-accommodation,.chapter-end-of-trip,.chapter-wellness { position:relative; isolation:isolate; color:#fcfaf6; border:1px solid #ffffff1f; border-radius:28px; background:radial-gradient(ellipse 55% 70% at 74% 55%,#0e58a0,#0e58a000),#0a417a; transition:border-color .3s ease; }
.chapter-end-of-trip { background:radial-gradient(ellipse 55% 70% at 26% 55%,#0e58a0,#0e58a000),#0a417a; }
.chapter-services > section:hover { border-color:#ffffff4d; }
.chapter-accommodation .chapter-copy h2 { font-size:clamp(34px,3.8vw,61px); }
.chapter-link .arrow-icon { filter:brightness(0) invert(1); }
.chapter-reverse { grid-template-columns:minmax(0,52fr) minmax(0,48fr); }
.chapter-reverse .chapter-copy { grid-column:2; grid-row:1; }
.chapter-reverse .chapter-media { grid-column:1; grid-row:1; }
/* The inline SVG converts matte luminance to alpha and clamps faint background
   noise to zero. Original product pixels stay intact, with no backing or shadow. */
.chapter-mask-definitions { position:absolute; pointer-events:none; }
.chapter-product { overflow:visible; background:transparent; }
.chapter-product img { display:block; width:100%; height:auto; -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-mode:alpha; mask-size:100% 100%; mask-repeat:no-repeat; }
/* Keep the complete bed image inside its chapter without clipping the fabric. */
/* Accommodation uses a room photo rather than a floating cutout (owner, 2026-10-16): the folded-sheet
   product shot read as thin, and no clean silhouette can be cut from white linen on a light
   background. A framed photo needs no mask, so it also drops the floating-object shadow. */
.chapter-bed { width:100%; margin:0; align-self:end; aspect-ratio:4/3; }
.chapter-bed img { width:100%; height:100%; object-fit:cover; border-radius:20px; }
.chapter-bed::after { display:none; }
.chapter-towels { width:100%; margin:-7% 0; }
.chapter-towels img { -webkit-mask-image:url('#home-towels-cutout'); mask-image:url('#home-towels-cutout'); }
.chapter-robes { width:100%; margin:-8% 0; }
.chapter-robes img { -webkit-mask-image:url('#home-robes-cutout'); mask-image:url('#home-robes-cutout'); }
.chapter-service-links { display:grid; max-width:370px; gap:5px; }
.chapter-facility { background:#06366b; color:#fcfaf6; }
.chapter-facility .chapter-panel { display:flex; flex-direction:column; align-items:stretch; }
.chapter-facility-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; padding:64px max(var(--content-gutter),calc((100% - 1320px) / 2)) 42px; }
.chapter-facility-heading h2 { font-size:clamp(40px,4.6vw,74px); line-height:1.02; margin:0; }
.chapter-facility-heading .chapter-link { flex-shrink:0; }
.chapter-facility .chapter-media { height:clamp(400px,63svh,780px); }
.chapter-facility .chapter-media img { object-position:50% 53%; }
.chapter-story { background:#06366b; color:#fcfaf6; padding:clamp(90px,12vw,180px) var(--content-gutter) 64px; }
.chapter-story .chapter-panel { max-width:1320px; margin:auto; min-height:0; grid-template-columns:1fr 1fr; gap:5vw; }
.chapter-story .chapter-copy { padding:30px 0; }
.chapter-story .chapter-copy h2 { font-size:clamp(40px,4.3vw,68px); }
.chapter-story .chapter-personal-note { font-weight:500; }
.chapter-story .chapter-media { aspect-ratio:1.1; border-radius:4px; }
.chapter-story .chapter-media img { object-position:61% center; }
/* Closing invitation: a heading and one sentence with the quote button, in place of the earlier
   oversized "Get a quote" line. Phone and email follow directly below in the footer. */
.chapter-close { background:#06366b; color:#fcfaf6; padding:clamp(24px,3vw,40px) max(var(--content-gutter),calc((100% - 1320px) / 2)) clamp(64px,8vw,112px); }
.chapter-close-inner { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:end; gap:clamp(32px,5vw,80px); padding-top:clamp(40px,5vw,64px); border-top:1px solid #ffffff2e; }
.chapter-close h2 { font-size:clamp(36px,4.2vw,64px); line-height:1.05; font-weight:500; letter-spacing:-.035em; margin:0 0 20px; }
.chapter-close-copy p:not(.chapter-label) { max-width:440px; margin:0; font-size:18px; line-height:1.55; color:#d6e7f5; }
.chapter-close-actions { display:flex; justify-content:flex-end; }
.chapter-close .button.light { min-width:0; gap:12px; padding:14px 26px 14px 30px; background:#e2eef7; font-size:17px; font-weight:700; }
.chapter-close .button.light:hover { background:#fff; }
/* No text opacity or clipping: the entire paragraph and CTA are always readable. */
@media(min-width:1000px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
  .chapter-stage.is-motion { height:145svh; }
  .chapter-fullscreen.is-motion { height:160svh; }
  .chapter-stage.is-motion .chapter-panel { position:sticky; top:0; height:100svh; min-height:0; }
  .chapter-stage.is-motion .chapter-media { transform:scale(var(--chapter-scale,.78)); will-change:transform; }
  /* At rest both full-screen photos sit inside the page column on large screens, then grow to fill
     the screen as they scroll. */
  .chapter-delivery-stage.is-motion { --chapter-inset:max(var(--content-gutter),calc((100% - var(--content-width)) / 2)); --chapter-start-height:min(55svh,calc(100svh - var(--chapter-copy-height))); }
  .chapter-facility.is-motion { --chapter-inset:max(11vw,calc((100% - var(--content-width)) / 2)); --chapter-start-height:calc(100svh - var(--chapter-copy-height)); }
  /* Owner request 2026-10-15: no scrim is drawn over either photograph, so neither one grows
     under its own copy. Each keeps its top edge below the heading and grows sideways to the
     screen edges and down to the foot of the screen. The heading stays on paper and stays
     readable; the photograph is never tinted. */
  .chapter-fullscreen.is-motion .chapter-media { position:absolute; top:var(--chapter-copy-height); left:calc(var(--chapter-inset) * (1 - var(--chapter-progress,0))); width:calc(100% - 2 * var(--chapter-inset) * (1 - var(--chapter-progress,0))); height:calc(var(--chapter-start-height) + (100svh - var(--chapter-copy-height) - var(--chapter-start-height)) * var(--chapter-progress,0)); margin:0; border-radius:var(--chapter-radius,24px); transform:none; will-change:auto; }
  .chapter-delivery-stage.is-motion .chapter-masthead { position:relative; z-index:2; }
  .chapter-delivery-stage.is-motion .chapter-delivery img { height:100%; }
  .chapter-facility.is-motion .chapter-facility-heading { position:relative; z-index:2; flex:0 0 auto; padding-top:44px; padding-bottom:32px; transform:translateY(calc(20px * var(--chapter-progress,0))); }
}
/* Card insides: content height, the photo beside the copy. */
.chapter-services .chapter-panel { min-height:0; padding:clamp(28px,3.4vw,52px); column-gap:clamp(24px,3vw,48px); }
.chapter-services .chapter-copy { padding:0; }
@media(min-width:1000px) {
  .chapter-services { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chapter-accommodation { grid-column:1 / -1; }
  .chapter-accommodation .chapter-panel { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .chapter-end-of-trip .chapter-panel { grid-template-columns:auto minmax(0,1fr); }
  .chapter-wellness .chapter-panel { grid-template-columns:minmax(0,1fr) auto; }
  .chapter-end-of-trip .chapter-copy h2,.chapter-wellness .chapter-copy h2 { font-size:clamp(30px,2.7vw,40px); margin-bottom:18px; }
  .chapter-end-of-trip .chapter-copy p:not(.chapter-label),.chapter-wellness .chapter-copy p:not(.chapter-label) { font-size:16px; }
  .chapter-bed { width:min(100%,520px); justify-self:center; }
  .chapter-towels,.chapter-robes { width:clamp(150px,15vw,230px); margin:0; justify-self:center; }
}
@media(min-width:701px) and (max-width:999px) {
  .chapter-services .chapter-panel { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); }
  .chapter-services .chapter-reverse { grid-template-columns:minmax(0,.8fr) minmax(0,1fr); }
  .chapter-bed { width:100%; margin:0; }
  .chapter-towels,.chapter-robes { width:min(100%,220px); margin:0; justify-self:center; }
}
/* Each product rests on a soft shadow, as if on a counter, so photo and copy share one stage. */
.chapter-product::after { content:""; position:absolute; left:14%; right:14%; bottom:-2%; height:8%; border-radius:50%; background:radial-gradient(closest-side,#00102a99,#00102a00); z-index:-1; pointer-events:none; transition:transform .45s ease,opacity .45s ease; }
.chapter-bed::after { bottom:4%; }
/* The portrait cut-outs have clear space under the fabric; lift their shadows to meet it. */
.chapter-towels::after { bottom:15%; }
.chapter-robes::after { bottom:11%; }
.chapter-product.is-linked { cursor:pointer; }
/* Reveal: the photo rises and grows from 84% as its chapter scrolls in; the heading lifts a
   little. Applied only while clientJs runs and reduced motion is off. */
/* The rise stays smaller than the card padding, so a product never crosses its card edge. */
.is-reveal .chapter-media { transform:translateY(calc(22px * (1 - var(--reveal,1)))) scale(calc(.84 + .16 * var(--reveal,1))); transform-origin:center bottom; will-change:transform; }
.is-reveal .chapter-copy h2 { transform:translateY(calc(18px * (1 - var(--reveal,1)))); }
/* Linked hover: anywhere over a product chapter, the product lifts off its shadow while the
   chapter link's line grows and its arrow slides, so copy and photo respond as one. */
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .chapter-product img { transition:transform .45s ease; }
  :is(.chapter-accommodation,.chapter-end-of-trip,.chapter-wellness) .chapter-panel:hover .chapter-product img { transform:translateY(-8px) scale(1.03); }
  :is(.chapter-accommodation,.chapter-end-of-trip,.chapter-wellness) .chapter-panel:hover .chapter-product::after { transform:scale(.86); opacity:.7; }
  :is(.chapter-accommodation,.chapter-end-of-trip) .chapter-panel:hover a.chapter-link::after { transform:scaleX(1); }
  :is(.chapter-accommodation,.chapter-end-of-trip) .chapter-panel:hover a.chapter-link .arrow-icon { transform:translateX(4px); }
}
@media(max-width:1100px) {
  .chapter-intro { font-size:16px; }
  .chapter-panel { min-height:580px; }
  .chapter-copy { padding:48px 32px; }
}
@media(max-width:999px) {
  .chapter-masthead { padding:38px var(--content-gutter) 30px; }
  .chapter-masthead h1 { font-size:clamp(34px,6.3vw,63px); }
  .chapter-intro p { max-width:430px; }
  .chapter-panel { grid-template-columns:1fr 1fr; }
  .chapter-copy h2 { font-size:44px; }
  .chapter-accommodation .chapter-copy h2 { font-size:clamp(30px,3.8vw,38px); }
  .chapter-copy p:not(.chapter-label) { font-size:17px; }
  .chapter-facility-heading { display:block; }
  .chapter-facility-heading .chapter-link { margin-top:24px; }
}
@media(max-width:700px) {
  .chapter-hero { padding-inline:20px; }
  .chapter-masthead { padding-inline:20px; }
  .chapter-masthead h1 { font-size:clamp(32px,7.8vw,52px); }
  .chapter-intro { display:block; margin-top:20px; }
  .chapter-intro p { margin-bottom:20px; }
  .chapter-label { font-size:14px; margin-bottom:24px; }
  .chapter-delivery-stage { margin-inline:-20px; }
  .chapter-delivery img { height:auto; aspect-ratio:1.4; object-position:60% center; }
  .chapter-values { gap:12px; padding:22px 0 30px; font-size:12px; line-height:1.5; }
  .chapter-values li { flex:1; flex-direction:column; align-items:flex-start; gap:10px; font-size:14px; line-height:1.35; }
  .value-icon { width:38px; height:38px; }
  .value-icon svg { width:20px; height:20px; }
  .chapter-panel { display:flex; flex-direction:column; align-items:stretch; min-height:0; }
  .chapter-copy { padding:48px 24px; }
  .chapter-copy h2 { font-size:clamp(38px,10vw,58px); }
  .chapter-accommodation .chapter-copy h2 { font-size:clamp(30px,8vw,54px); }
  .chapter-copy p:not(.chapter-label) { max-width:470px; }
  .chapter-media { width:100%; }
  .chapter-product { width:min(100%,520px); margin:-34px auto -26px; align-self:center; }
  .chapter-bed { width:100%; max-width:640px; margin:0 auto; }
  .chapter-towels,.chapter-robes { max-width:430px; }
  .chapter-facility-heading { padding:48px 24px 36px; }
  .chapter-facility-heading h2 { font-size:clamp(33px,8.8vw,54px); }
  .chapter-facility .chapter-media { height:auto; aspect-ratio:1.25; }
  .chapter-story { padding:90px 24px 44px; }
  .chapter-story .chapter-panel { gap:26px; }
  .chapter-story .chapter-copy { padding:0; }
  .chapter-story .chapter-copy h2 { font-size:clamp(39px,10vw,58px); }
  .chapter-story .chapter-media { aspect-ratio:1.2; }
  .chapter-close { padding:16px 24px 56px; }
  .chapter-close-inner { grid-template-columns:1fr; align-items:start; }
  .chapter-close-actions { justify-content:flex-start; }
  .chapter-services { padding:40px 20px; gap:20px; }
  .chapter-services > section { border-radius:22px; }
  .chapter-services .chapter-panel { padding:28px 22px 24px; gap:20px; }
  .chapter-services .chapter-product { margin:0 auto; }
  .chapter-services .chapter-towels,.chapter-services .chapter-robes { max-width:260px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }


/* Light homepage (owner request 2026-10-07): the same light palette as the inner pages. Paper
   background and navy type, with the inner-page pale blue for the service cards and Our story.
   Everything is scoped to .home-light, so removing that class restores the navy homepage. */
.home-light.is-home { background:var(--paper); }
.home-light .header-shell { background:#fff; }
.home-light .header-utility a { color:var(--blue); }
.home-light .chapter-hero { color:var(--blue); background:none; }
.home-light .chapter-intro p { color:var(--muted); }
.home-light .chapter-delivery,.home-light .chapter-media { background:var(--soft); }
.home-light .chapter-product { background:transparent; }
.home-light .chapter-values { color:var(--blue); }
.home-light .chapter-values li { color:var(--blue); }
.home-light .value-icon { background:#e3edf7; box-shadow:inset 0 0 0 1px #06366b1a; color:var(--blue); }
.home-light .chapter-services { background:var(--paper); border-top:1px solid #06366b14; }
.home-light .chapter-accommodation,.home-light .chapter-end-of-trip,.home-light .chapter-wellness { color:var(--blue); border-color:#06366b14; background:var(--soft); }
.home-light .chapter-services > section:hover { border-color:#06366b40; }
.home-light .chapter-services .chapter-copy p:not(.chapter-label) { color:var(--muted); }
.home-light .chapter-link .arrow-icon { filter:none; }
.home-light .chapter-product::after { background:radial-gradient(closest-side,#0a2a4d52,#0a2a4d00); }
.home-light .chapter-facility { background:var(--paper); color:var(--blue); }
.home-light .chapter-story { background:var(--soft); color:var(--blue); }
.home-light .chapter-story .chapter-copy p:not(.chapter-label):not(.chapter-personal-note) { color:var(--muted); }
.home-light .chapter-close { background:var(--paper); color:var(--blue); }
.home-light .chapter-close-inner { border-top-color:#06366b1f; }
.home-light .chapter-close-copy p:not(.chapter-label) { color:var(--muted); }
.home-light .chapter-close .button.light { background:var(--blue); color:#fff; }
.home-light .chapter-close .button.light:hover { background:#0b4d90; }
.home-light .chapter-close .button.light .arrow-icon { filter:invert(1); }
.home-light .float-cta { background:var(--blue); color:#fff; box-shadow:0 0 0 2px #fcfaf6e6,0 12px 28px #021c3a59; }
.home-light .float-cta:hover { background:#0b4d90; box-shadow:0 0 0 2px #fcfaf6e6,0 16px 32px #021c3a66; }
.home-light .float-cta .arrow-icon { filter:invert(1); }