/* Rubicon Flood Control — site styles.
   Palette: Rubicon's navy + CTA red, extended with coastal teal ("dry/safe"),
   gulf blue (water) and warm sand neutrals. Tuned for older homeowners:
   18px base type, ≥4.5:1 contrast everywhere, 48px tap targets. */

:root {
  --navy-950: #071d30;  /* headings (brand) */
  --navy-800: #1c3145;  /* primary brand navy */
  --navy-600: #3a5470;
  --navy-100: #e3eaf2;
  --navy-50:  #f1f5f9;
  --red-600:  #dc0035;  /* brand CTA */
  --red-700:  #a3002a;
  --teal-700: #1d6556;  /* dry / safe / success */
  --teal-600: #247a68;
  --teal-50:  #e8f4f0;
  --gulf-500: #2f7fb5;  /* water */
  --gulf-100: #dcecf7;
  --sand-50:  #fbf8f4;
  --sand-100: #f4eee6;
  --sun-400:  #f2b64b;
  --ink:      #1f2a35;  /* body text */
  --muted:    #4a5b6c;  /* 6.6:1 on white */
  --line:     #d9e0e7;
  --white:    #ffffff;

  --font-display: "Mulish", "Muli", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale (4px base) and vertical rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --section-y: clamp(48px, 5.5vw, 76px);   /* padding at the top/bottom of a band */
  --head-gap: clamp(40px, 4.5vw, 56px);     /* page header → first content (≥ block gap) */
  --block-gap: clamp(36px, 4vw, 52px);      /* subsection → subsection inside a band */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(7, 29, 48, .07), 0 2px 8px rgba(7, 29, 48, .05);
  --wrap: 1180px;
  --gutter: 16px;
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font: 400 1.125rem/1.65 var(--font-body); color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-800); text-underline-offset: 3px; }
a:hover { color: var(--red-600); }
:focus-visible { outline: 3px solid var(--gulf-500); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, .h3 { font-family: var(--font-display); color: var(--navy-950); line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 800; letter-spacing: -.02em; }
h3, .h3 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0 0 1em; }
code { font-size: .9em; background: var(--navy-50); padding: .1em .35em; border-radius: 6px; word-break: break-word; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy-950); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow > * { max-width: 780px; }
.wrap.narrow > .related { max-width: 880px; }
.muted { color: var(--muted); }
.eyebrow { font: 800 .82rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); margin-bottom: .75rem; }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.35rem); color: #2c3a48; max-width: 62ch; }
.section { padding: var(--section-y) 0; }
.section:not(.alt) + .section:not(.alt), .section.alt + .section.alt { padding-top: 0; }
.section.alt { background: var(--sand-50); }
.section-lede { color: var(--muted); max-width: 60ch; margin-bottom: 0; }
.i { width: 1.25em; height: 1.25em; flex: none; }
.i-lg { width: 2rem; height: 2rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .8rem 1.5rem; border-radius: 999px; font: 800 1.02rem/1.1 var(--font-display); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red-600); color: #fff; box-shadow: 0 6px 18px rgba(220, 0, 53, .22); }
.btn-primary:hover { background: var(--red-700); color: #fff; }
.btn-secondary { background: #fff; color: var(--navy-800); border-color: var(--navy-800); }
.btn-secondary:hover { background: var(--navy-800); color: #fff; }
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-ghost-light:hover { background: #fff; color: var(--navy-950); }
.btn-small { min-height: 44px; padding: .5rem 1rem; font-size: .92rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 1rem; }
.brand img { height: 44px; width: auto; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.bars, .bars::before, .bars::after { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--navy-950); position: relative; transition: transform .25s, opacity .2s; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -8px; } .bars::after { top: 8px; }
.menu-btn[aria-expanded="true"] .bars { background: transparent; }
.menu-btn[aria-expanded="true"] .bars::before { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { transform: translateY(-8px) rotate(-45deg); }
.site-nav { display: none; position: absolute; inset: var(--header-h) 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; box-shadow: var(--shadow); }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0 0 12px; padding: 0; }
.site-nav li a { display: block; padding: 14px 4px; font: 700 1.15rem var(--font-display); color: var(--navy-950); text-decoration: none; border-bottom: 1px solid var(--navy-50); }
.site-nav a[aria-current="page"] { color: var(--red-600); }
.nav-phone { display: flex; align-items: center; gap: .5rem; padding: 12px 4px; font-weight: 700; text-decoration: none; }
.site-nav .btn { width: 100%; margin-top: 6px; }
@media (min-width: 1000px) {
  .menu-btn { display: none; }
  .site-nav { display: flex; position: static; align-items: center; gap: 1.25rem; padding: 0; border: 0; box-shadow: none; background: none; }
  .site-nav ul { display: flex; gap: .25rem; margin: 0; }
  .site-nav li a { padding: 8px 12px; border: 0; font-size: 1rem; border-radius: 999px; }
  .site-nav li a:hover { background: var(--navy-50); color: var(--navy-950); }
  .site-nav .btn { width: auto; margin: 0; }
  .nav-phone { padding: 0; }
}

/* Mobile action bar */
.action-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(7, 29, 48, .08); }
.action-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; border-radius: 999px; font: 800 1rem var(--font-display); text-decoration: none; border: 2px solid var(--navy-800); color: var(--navy-800); }
.action-bar a.primary { background: var(--red-600); border-color: var(--red-600); color: #fff; }
@media (min-width: 900px) { .action-bar { display: none; } }
.booking .action-bar { display: none; }
.booking { padding-bottom: 0; }

/* Hero */
.hero { background: linear-gradient(180deg, var(--sand-50), #fff 70%); padding: clamp(24px, 5vw, 64px) 0 var(--section-y); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }
.hero h1 em { font-style: normal; color: var(--teal-600); background: linear-gradient(transparent 70%, var(--teal-50) 70%); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
.page-head .hero-actions:last-child { margin-bottom: 0; }
.hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .hero-actions .btn { flex: 0 0 auto; } }
.trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-weight: 600; color: var(--navy-800); }
.trust li { display: flex; align-items: center; gap: .6rem; }
.trust .i { color: var(--teal-600); }
.hero-photo { margin: 0; position: relative; }
.hero-photo img { border-radius: 24px; box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; }
.hero-photo figcaption { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
.next-slots { margin: var(--s5) 0 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--teal-50); color: var(--teal-700); font-weight: 600; }
.next-slots a { color: var(--teal-700); font-weight: 800; }

/* Story scroll */
.story { background: linear-gradient(180deg, #fff, var(--navy-50) 12%, var(--navy-50) 88%, #fff); padding: var(--section-y) 0; }
.hero + .story { padding-top: 0; }
.story + .section { padding-top: var(--s6); }
.story-title { text-align: center; max-width: 22ch; margin: 0 auto var(--s6); }
.story-grid { display: grid; gap: 0; }
.stage { position: sticky; top: calc(var(--header-h) + 8px); z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--navy-50); padding-bottom: 10px; }
.scene { display: block; width: 100%; max-width: 560px; height: auto; max-height: 40vh; aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: var(--shadow); background: #fff; overflow: hidden; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 10vh; }
.step > * { max-width: 520px; }
.step h3 { font-size: clamp(1.45rem, 3vw, 2rem); }
.step p:last-child { background: #fff; padding: 18px 20px; border-radius: var(--radius); box-shadow: var(--shadow); }
.step-n { font: 800 .85rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gulf-500); margin-bottom: .4rem; }
.step h3, .step-n { background: var(--navy-50); align-self: flex-start; padding: 0 6px; border-radius: 6px; }
.step { opacity: .45; transition: opacity .4s; }
.step.on { opacity: 1; }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .stage { height: calc(100vh - var(--header-h) - 40px); max-height: 600px; top: calc(var(--header-h) + 20px); background: none; }
  .scene { max-height: none; }
  .step { min-height: 85vh; justify-content: center; padding-bottom: 0; }
}
/* Scene parts */
.sky-top { stop-color: #8aa2b8; transition: stop-color .8s; } .sky-bot { stop-color: #dfe7ee; transition: stop-color .8s; }
.roof { fill: var(--navy-800); } .wall { fill: #f6efe5; } .window { fill: #cfe2f0; stroke: var(--navy-800); stroke-width: 2; } .window-bar { stroke: var(--navy-800); stroke-width: 2; }
.garage { fill: #fff; stroke: #b8c4cf; stroke-width: 2; } .garage-lines { stroke: #d5dde5; stroke-width: 2; }
.ground { fill: #9fb39a; }
.palm { stroke: #8a6b4a; stroke-width: 6; stroke-linecap: round; } .fronds path { fill: #3f7d5a; }
.sun circle { fill: var(--sun-400); } .sun { opacity: 0; transition: opacity .8s, transform .8s; transform: translateY(20px); }
.clouds ellipse { fill: #6f8599; } .clouds { transition: opacity .8s; }
.rain line { stroke: #6aa6d3; stroke-width: 2.5; stroke-linecap: round; } .rain { opacity: 0; transition: opacity .5s; }
.water { opacity: .8; transform-box: fill-box; transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); transform: translateY(0); }
.seep { fill: var(--gulf-500); opacity: 0; transition: opacity .8s; }
.tape path { stroke: var(--red-600); stroke-width: 2.5; fill: none; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1s .2s; }
.tape text { font: 800 11px var(--font-display); fill: var(--red-600); opacity: 0; transition: opacity .6s .6s; }
.posts rect { fill: #8796a5; opacity: 0; transition: opacity .5s; }
.plank { fill: #c9d3dc; stroke: #6f8090; stroke-width: 1; opacity: 0; transform: translateY(-46px); transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.p1 { transition-delay: .12s; } .p2 { transition-delay: .24s; } .p3 { transition-delay: .36s; } .p4 { transition-delay: .48s; } .p5 { transition-delay: .6s; }
.dry-badge circle { fill: var(--teal-600); } .dry-badge path { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dry-badge { opacity: 0; transform: scale(.6); transform-origin: 214px 120px; transition: opacity .5s .5s, transform .5s .5s; }

.story[data-scene="forecast"] .rain, .story[data-scene="rising"] .rain, .story[data-scene="stack"] .rain { opacity: 1; }
.story[data-scene="forecast"] .sky-top, .story[data-scene="rising"] .sky-top, .story[data-scene="stack"] .sky-top { stop-color: #5d7286; }
.story[data-scene="rising"] .water { transform: translateY(-30px); }
.story[data-scene="rising"] .seep { opacity: .55; }
.story[data-scene="measure"] .tape path, .story[data-scene="stack"] .tape path { stroke-dashoffset: 0; }
.story[data-scene="measure"] .tape text { opacity: 1; }
.story[data-scene="measure"] .posts rect, .story[data-scene="stack"] .posts rect, .story[data-scene="dry"] .posts rect, .story:not([data-scene]) .posts rect { opacity: 1; }
.story[data-scene="stack"] .plank, .story[data-scene="dry"] .plank, .story:not([data-scene]) .plank { opacity: 1; transform: none; }
.story[data-scene="stack"] .water { transform: translateY(-28px); }
.story[data-scene="dry"] .water, .story:not([data-scene]) .water { transform: translateY(-10px); }
.story[data-scene="dry"] .sun, .story:not([data-scene]) .sun { opacity: 1; transform: none; }
.story[data-scene="dry"] .clouds, .story:not([data-scene]) .clouds { opacity: .35; }
.story[data-scene="dry"] .sky-top, .story:not([data-scene]) .sky-top { stop-color: #8cc3e6; }
.story[data-scene="dry"] .dry-badge, .story:not([data-scene]) .dry-badge { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene *, .step { transition: none !important; }
  .step { min-height: 0; opacity: 1; padding-bottom: 0; margin-bottom: var(--s6); justify-content: flex-start; }
  .step:last-child { margin-bottom: 0; }
  .stage { position: relative; top: 0; }
}

/* Cards */
.cards { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 640px) { .cards-2, .cards-4, .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card a { display: flex; flex-direction: column; height: 100%; padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: 0 2px 8px rgba(7, 29, 48, .04); transition: transform .2s, box-shadow .2s, border-color .2s; }
.card a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--navy-100); color: var(--ink); }
.card-icon { display: inline-flex; width: 60px; height: 60px; align-items: center; justify-content: center; border-radius: 18px; background: var(--teal-50); color: var(--teal-700); margin-bottom: 14px; }
.card h3, .card .h3 { margin-bottom: var(--s2); }
.card p { color: var(--muted); font-size: 1rem; margin-bottom: var(--s4); }
.card .h3 + .muted { margin-bottom: var(--s3); }
.card .more { margin-top: auto; align-self: flex-start; display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; color: var(--navy-800); }
.cards.compact { margin-top: var(--s4); }
.cards.compact .card a { padding: var(--s3) var(--s4); flex-direction: row; align-items: center; gap: var(--s3); }
.cards.compact .card-icon { margin: 0; width: 48px; height: 48px; }
.cards.compact h3 { margin: 0; font-size: 1.05rem; }
.card-book .price { font: 800 1.1rem var(--font-display); color: var(--teal-700); }
.card-book .btn { margin-top: auto; align-self: flex-start; }

.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s4); margin-top: var(--s6); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { font-size: .95rem; color: var(--muted); margin-top: .5rem; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.two-col figure { margin: 0; } .two-col figure img { border-radius: 20px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow); }
.ticks { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s3); }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; }
.ticks .i { color: var(--teal-600); margin-top: .25em; }
.ticks.small { font-size: 1rem; gap: 8px; }
.rating-line { font-size: 1rem; color: var(--muted); }

table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--font-display); color: var(--navy-950); }
tbody th { font-weight: 700; color: var(--navy-800); }
.compare-mini { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.table-scroll { overflow-x: auto; }
td:last-child { color: var(--teal-700); font-weight: 600; }

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) 10px; margin: var(--s5) 0; }
.chips a { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.chips a:hover { border-color: var(--navy-800); }
.chips .i { color: var(--red-600); width: 1.05em; }

/* Page heads + content */
.page-head { background: linear-gradient(180deg, var(--sand-50), #fff); padding: var(--s5) 0 var(--head-gap); }
.page-head .lede:last-child { margin-bottom: 0; }
.page-head + .section:not(.alt) { padding-top: 0; }
.page-head.compact { padding-bottom: var(--s5); }
.page-head figure { margin: 0; }
.crumbs { margin-bottom: var(--s4); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .92rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: #8a99a8; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-top: var(--block-gap); } .prose h2:first-child { margin-top: 0; }
.specs { display: grid; gap: 0; margin: 0 0 1rem; }
.specs div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 700; color: var(--navy-800); } .specs dd { margin: 0; }
.note { font-size: .95rem; color: var(--muted); }
.source { font-size: .92rem; color: var(--muted); margin-top: -.25rem; }
.reviews { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s3); }
.reviews li { padding: 14px 18px; border-left: 3px solid var(--teal-600); background: var(--sand-50); border-radius: 0 var(--radius) var(--radius) 0; }
.reviews q { quotes: "\201C" "\201D"; }
.timeline { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.timeline li { position: relative; padding: 0 0 24px 56px; counter-increment: s; }
.timeline li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-800); color: #fff; font: 800 1rem/40px var(--font-display); text-align: center; }
.timeline li::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--navy-100); }
.timeline li:last-child::after { display: none; }
.callout { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5); border-radius: var(--radius); background: var(--teal-50); margin-top: var(--s6); }
.callout h3 { margin-bottom: var(--s2); }
.callout .i { color: var(--teal-700); }
.fit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 900px) { .fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fit { padding: var(--s5); border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.fit h2 { font-size: 1.25rem; display: flex; gap: .5rem; align-items: center; }
.fit ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; }
.fit.good { border-top: 5px solid var(--teal-600); } .fit.warn { border-top: 5px solid var(--sun-400); } .fit.measure { border-top: 5px solid var(--navy-800); }
.tabs { margin-bottom: var(--s5); }
.tabs ul { list-style: none; display: flex; gap: var(--s2); overflow-x: auto; padding: 2px 2px 4px; margin: 0 -2px; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-weight: 700; background: #fff; }
.tabs a[aria-current="page"] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.faq .qa { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; margin-bottom: var(--s3); }
.faq h2 { margin-bottom: var(--s4); }
.faq .wrap > h2:not(:first-child) { margin-top: var(--block-gap); }
.qa summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; position: relative; min-height: 56px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 800 1.6rem var(--font-display); color: var(--navy-800); }
.qa[open] summary::after { content: "–"; }
.qa summary h3 { margin: 0; font-size: 1.1rem; }
.qa p { padding: 0 18px 18px; margin: 0; }
.topic-links { columns: 2 260px; column-gap: var(--s6); padding-left: 1.1rem; margin: 0; }
.topic-links li { margin-bottom: var(--s3); break-inside: avoid; }

.related { margin-top: var(--block-gap); }
.related:first-child { margin-top: 0; }
.related + .related { margin-top: var(--s6); }
.related h2 { font-size: 1.2rem; margin-bottom: var(--s3); }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
@media (min-width: 640px) { .related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related a { display: flex; flex-direction: column; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); text-decoration: none; min-height: 52px; }
.related a span { font-size: .92rem; color: var(--muted); }

.cta-band { background: radial-gradient(1200px 300px at 10% 0%, #23405c, var(--navy-950)); color: #e9eef3; padding: var(--section-y) 0; }
.cta-band h2 { margin-bottom: var(--s3); }
.cta-band p { margin: 0; }
.cta-band h2 { color: #fff; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .cta-actions { justify-content: flex-end; } }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Booking */
.facts { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.facts li { display: flex; align-items: center; gap: .5rem; padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 1rem; }
.facts strong { color: var(--teal-700); }
.page-head.compact + .booking-section { padding-top: var(--s2); }
.book-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 960px) { .book-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s6); align-items: start; } .book-aside { position: sticky; top: calc(var(--header-h) + 20px); } }
.book-aside { padding: var(--s5); border-radius: var(--radius); background: var(--sand-50); }
.book-aside .h3 { margin-bottom: var(--s3); }
.book-aside .ticks + .h3 { margin-top: var(--s5); }
.book-aside p { margin: var(--s3) 0 0; }
.book-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 var(--s4); counter-reset: b; }
.book-steps li { flex: 1; text-align: center; font: 700 .9rem var(--font-display); padding: 8px 4px; border-radius: 999px; background: var(--navy-50); color: var(--muted); counter-increment: b; }
.book-steps li::before { content: counter(b) ". "; }
.book-steps li.on { background: var(--navy-800); color: #fff; }
.book-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5) clamp(16px, 3vw, 24px); margin-bottom: var(--s4); box-shadow: 0 2px 10px rgba(7, 29, 48, .04); }
.book-panel h2 { font-size: 1.3rem; margin-bottom: var(--s4); }
.panel-head h2 { margin: 0; }
.book-form, .contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.book-form > *, .contact-form > *, .book-form > h2, .contact-form > h2 { margin: 0; }
.book-form > .turnstile:empty, .contact-form > .turnstile:empty { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s4) 0 var(--s3); }
.month-nav p { margin: 0; font-weight: 700; text-align: center; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--navy-800); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 66px; padding: 6px 2px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-family: var(--font-display); color: var(--navy-950); }
.day .dow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.day .num { font-size: 1.3rem; font-weight: 900; line-height: 1.1; }
.day .cnt { font-size: .68rem; color: var(--teal-700); font-weight: 700; }
.day:disabled { background: var(--navy-50); border-color: transparent; color: #9aa8b5; cursor: not-allowed; }
.day:disabled .dow, .day:disabled .cnt { color: #9aa8b5; }
.day[aria-selected="true"] { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }
.day[aria-selected="true"] .dow, .day[aria-selected="true"] .cnt { color: #dbe5ee; }
.tz { font: 600 .9rem var(--font-body); color: var(--muted); }
.times { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .times { grid-template-columns: repeat(4, 1fr); } }
.time { min-height: 56px; border-radius: 14px; border: 2px solid var(--navy-800); background: #fff; color: var(--navy-800); font: 800 1.1rem var(--font-display); cursor: pointer; }
.time[aria-selected="true"] { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.chosen { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--teal-50); color: var(--teal-700); font-weight: 700; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 560px) { .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span2 { grid-column: span 2; } }
label { display: grid; gap: 6px; font-weight: 700; color: var(--navy-950); font-size: 1rem; }
label .muted { font-weight: 600; }
input, select, textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1.1rem var(--font-body); color: var(--ink); background: #fff; border: 2px solid #c4ced8; border-radius: 12px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gulf-500); outline: 3px solid var(--gulf-100); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--red-600); }
.field-msg { color: var(--red-700); font-weight: 600; font-size: .92rem; }
.chip-set { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.chip-set legend { font-weight: 700; color: var(--navy-950); margin-bottom: var(--s2); font-size: 1rem; padding: 0; }
.chip { display: inline-flex; margin: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line); font-weight: 600; cursor: pointer; }
.chip input:checked + span { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-700); }
.chip input:focus-visible + span { outline: 3px solid var(--gulf-500); outline-offset: 2px; }
.turnstile { min-height: 70px; }
.form-error { color: #fff; background: var(--red-700); padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.fine { font-size: .88rem; color: var(--muted); }
.done { border-color: var(--teal-600); border-width: 2px; }
.done h2 { color: var(--teal-700); }
.done .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

.contact-cards { display: grid; gap: var(--s3); }
.contact-cards p { margin: var(--s2) 0 0; }
.contact-card { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none; }
.contact-card .i { color: var(--red-600); }
.contact-card span span { display: block; color: var(--muted); font-size: .95rem; }
.contact-card strong { word-break: break-word; }

/* Footer */
.site-footer { background: var(--navy-950); color: #c9d4de; padding: var(--s8) 0 calc(var(--s5) + 76px + env(safe-area-inset-bottom)); font-size: 1rem; }
@media (min-width: 900px) { .site-footer { padding-bottom: var(--s5); } }
.booking .site-footer { padding-bottom: var(--s5); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--s5); }
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } }
.site-footer h2 { color: #fff; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.foot-brand p { margin-bottom: var(--s4); }
.foot-name { font: 900 1.4rem var(--font-display); color: #fff; margin-bottom: var(--s2); }
.site-footer address { font-style: normal; line-height: 1.9; margin-bottom: var(--s4); }
.site-footer .rating { margin: 0; }
.foot-meta { display: grid; gap: var(--s2); border-top: 1px solid rgba(255, 255, 255, .12); margin-top: var(--s7); padding-top: var(--s5); font-size: .9rem; }
.foot-meta p { margin: 0; }
.machine a { color: #9ec7e6; }


/* Flow: no trailing margin at the end of any box; subsections inside a band get a consistent gap */
main :where(p, ul, ol, dl, table, figure):last-child { margin-bottom: 0; }
.narrow > :not(:first-child):is(h2) { margin-top: var(--block-gap); }
.two-col > div > h2 + .ticks, .two-col > div > h2 + .specs { margin-top: var(--s4); }
.compare-mini h3 { margin-bottom: var(--s3); }
.compare-mini .link { margin-top: var(--s4); }
.timeline { margin-top: var(--s5); }
.table-scroll { margin-top: var(--s4); }