/* Two-color visual system: petrol and white, with neutral text. */
:root {
    --ink: #213332;
    --muted: #586967;
    --paper: #ffffff;
    --surface: #ffffff;
    --soft: #edf5f4;
    --sand: #edf5f4;
    --cream: #ffffff;
    --sky: #edf5f4;
    --line: #cedddb;
    --sea: #176b68;
    --sea-dark: #115653;
    --reed: #176b68;
    --coral: #176b68;
    --gold: #176b68;
}
body { background: var(--paper); }
/* Frame the approved artwork without changing its lettering or proportions. */
.approved-logo { display: block; position: relative; overflow: hidden; width: 300px; aspect-ratio: 1640 / 407; }
.approved-logo img { position: absolute; width: 118.414635%; max-width: none; height: auto; left: -10.731707%; top: -47.665848%; }
.footer-brand .approved-logo { width: 270px; max-width: 100%; }
@media (max-width: 1200px) { .brand .approved-logo { width: 245px; } }
@media (max-width: 600px) { .brand .approved-logo { width: min(240px, 64vw); } }
h1, h2, h3, .eyebrow, .script-note, .brand-place { letter-spacing: 0; }
.brand-signet img { width: 100%; height: 100%; object-fit: contain; }
.brand-name, .brand-place, .script-note, .hero .script-note, .hero .eyebrow { color: var(--sea-dark); }
.intro-band, .comfort-band, .booking-strip, .location-band, .weather-ideas, .discover-region, .booking-launch-panel, .booking-modal-header, .booking-modal-loader { background: var(--soft); }
.tip-icon { background: var(--soft); }
.tip-icon img { filter: grayscale(1); }
.site-footer { background: #edf5f4; color: var(--ink); border-top: 1px solid var(--line); }
.site-footer .brand-name, .site-footer .brand-place, .site-footer p, .site-footer a, .site-footer strong, .footer-contact, .footer-bottom, .footer-made, .footer-heart { color: var(--sea-dark); }
.footer-bottom { border-color: var(--line); }
.site-footer .footer-inner > div:first-child p { color: var(--muted); }
.hero { height: 670px; min-height: 590px; max-height: none; }
.hero::after { background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.88) 34%, rgba(255,255,255,.08) 72%); }
.hero-content { width: min(var(--max), calc(100% - 64px)); padding: 4rem 0 8rem; }
.hero-content h1 { max-width: 600px; font-size: 4rem; }
.hero-aside { bottom: 7rem; right: max(32px, calc((100% - var(--max)) / 2)); width: min(410px, 38%); }
.hero-description { text-shadow: 0 1px 5px #213332; }
.hero-playback { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: white; background: rgba(17,86,83,.6); border: 1px solid white; border-radius: 50%; cursor: pointer; font-size: 15px; }
.hero-aside .hero-dots { align-items: center; min-height: 36px; }
.hero .hero-slide figcaption { bottom: 2rem; }
.booking-launch-panel { box-shadow: none; border-radius: 8px; }
.booking-search-copy h2 { font-size: 1.65rem; }
.booking-launch-panel .booking-search-copy { display: block; grid-column: auto; border-bottom: 0; padding-bottom: 0; min-width: 0; }
.booking-launch-panel .booking-search-copy h2 { max-width: none; margin: .35rem 0 .6rem; }
.intro-band::before, .intro-band::after, .comfort-band::before, .comfort-band::after { display: none; }
.booking-launch-actions { flex-shrink: 0; }
.booking-launch-panel { grid-template-columns: minmax(0, 1fr) auto; }
.booking-launch-actions { flex-direction: column; align-items: stretch; }
.home-page .quick-availability {
    width: 100%;
    margin: 0;
    padding: 24px max(20px, calc((100% - var(--max)) / 2));
    background: var(--soft);
}
.home-page .quick-availability .booking-launch-panel { background: var(--paper); }
.home-page .quick-availability + .intro-band { padding-top: 1.5rem; padding-bottom: 3rem; }
.apartments-page .page-hero { padding-top: 3rem; padding-bottom: 2rem; }
.apartments-page .page-hero > p:last-child { margin-bottom: 0; }
.apartments-page .availability-panel { padding-top: 0; padding-bottom: 0; }
.apartments-page #unterkuenfte { padding-top: 2.5rem; }
@media (max-width: 1000px) {
    .booking-launch-panel { grid-template-columns: minmax(0, 1fr); }
    .booking-launch-actions { flex-direction: row; justify-content: flex-start; }
}
@media (max-width: 600px) {
    .booking-launch-actions { flex-direction: column; }
    .booking-launch-actions .button { white-space: normal; }
    .home-page .quick-availability { padding: 20px 16px; }
}
.booking-info-grid { margin-top: 3rem; padding-bottom: 3rem; }
.booking-info-grid h2 { font-size: 1.6rem; }
.booking-choice-card { border-radius: 8px; }
.booking-choice-card strong { font-size: 1.35rem; overflow-wrap: anywhere; }
.booking-modal-dialog { border-radius: 8px; height: min(94dvh, 980px); }
.booking-modal-heading h2 { font-size: 1.6rem; }
.booking-modal-actions { min-width: 0; }
.booking-modal-frame-wrap iframe { background: white; }
.booking-modal-loader-graphic { color: var(--sea); }
.inquiry-embedded { background: #fff; }
.inquiry-page { width: min(1120px, 100%); margin: 0 auto; padding: 28px; }
.inquiry-intro { max-width: 850px; margin-bottom: 1.5rem; }
.inquiry-intro h1 { font-size: 2.3rem; }
.inquiry-intro .eyebrow { font-size: .8rem; }
.inquiry-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.inquiry-form section { min-width: 0; }
.inquiry-form h2 { font-size: 1.6rem; margin-bottom: 1.1rem; }
.inquiry-form label { font-size: .95rem; margin-bottom: .9rem; }
.inquiry-form input, .inquiry-form textarea { border-radius: 6px; padding: 11px; min-width: 0; max-width: 100%; font: inherit; }
.inquiry-form .form-grid { gap: 0 16px; }
.inquiry-form .button { white-space: normal; min-height: 48px; width: 100%; }
.inquiry-details { border-left: 1px solid var(--line); padding-left: 24px; }
.checkbox-label { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; font-weight: 400; }
.checkbox-label input { width: 18px; height: 18px; margin: 5px 0 0; accent-color: var(--sea); }
.inquiry-form a { text-decoration: underline; }
.inquiry-quote { margin: 20px 0 28px; padding: 18px 0; border-block: 1px solid var(--line); }
.inquiry-quote dl { margin: 0 0 12px; }
.inquiry-quote dl > div { display: flex; justify-content: space-between; gap: 16px; }
.inquiry-quote dd { margin: 0; white-space: nowrap; }
.inquiry-quote dl > div:last-child { font-weight: 700; margin-top: 10px; }
.inquiry-quote .small-text:last-child { margin: 0; }
.inquiry-success { max-width: 700px; margin: 40px auto; }
.inquiry-success h1 { font-size: 2.6rem; }
.availability-calendar { margin-bottom: 24px; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.calendar-arrow { height: 40px; width: 40px; border: 1px solid var(--line); background: white; color: var(--sea); border-radius: 6px; font: 28px/1 sans-serif; cursor: pointer; }
.calendar-arrow:disabled { opacity: .35; cursor: default; }
.calendar-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.calendar-month h3 { font: 600 1rem/1.4 var(--font-body); color: var(--sea-dark); min-height: 24px; margin-bottom: 12px; }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekday { font-size: .7rem; text-align: center; padding-bottom: 7px; }
.calendar-day { min-width: 0; width: 100%; height: 34px; border: 1px solid transparent; border-radius: 3px; font: 500 .85rem var(--font-body); padding: 0; color: var(--sea-dark); background: var(--soft); cursor: pointer; }
.calendar-day:hover:not(:disabled) { border-color: var(--sea); }
.calendar-day.is-unknown { background: #f4f5f5; color: var(--muted); }
.calendar-day.is-occupied { background: repeating-linear-gradient(135deg, #e1e6e5 0, #e1e6e5 3px, #f5f7f6 3px, #f5f7f6 7px); color: #596360; text-decoration: line-through; }
.calendar-day:disabled { cursor: default; opacity: .5; }
.calendar-day.is-in-range { background: #c9e4e1; color: var(--sea-dark); }
.calendar-day.is-endpoint { background: var(--sea); color: #fff; text-decoration: none; opacity: 1; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 8px; font-size: .8rem; }
.calendar-legend > span { display: flex; align-items: center; gap: 6px; }
.calendar-key { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line); background: #f4f5f5; }
.calendar-key.occupied { background: repeating-linear-gradient(135deg, #ced5d3 0, #ced5d3 2px, white 2px, white 4px); }
.calendar-key.selected { background: var(--sea); border-color: var(--sea); }
.inquiry-form .small-text { font-size: .85rem; line-height: 1.5; }
.area-story .location-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; overflow: visible; }
.area-story .location-photo-grid > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.pier-photo { display: block; min-width: 0; grid-column: 1 / -1; grid-row: 2; overflow: hidden; border-radius: 18px; }
.area-story .location-photo-grid .pier-photo img { display: block; width: 100%; height: auto; aspect-ratio: auto; min-height: 0; border-radius: 0; }
.leisure-options { grid-template-columns: minmax(0, 1fr); }
.leisure-options ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .leisure-options ul { grid-template-columns: minmax(0, 1fr); }
}
.notice-error { background: #f4f5f5; border: 2px solid var(--sea); }
@media (max-width: 1100px) {
    .hero-content h1 { max-width: 520px; font-size: 3.5rem; }
    .hero-description { display: none; }
    .hero-aside { bottom: 5rem; width: auto; }
}
@media (max-width: 800px) {
    .inquiry-form { grid-template-columns: 1fr; gap: 20px; }
    .inquiry-details { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
    .inquiry-page { padding: 20px; }
    .calendar-day { height: 38px; }
    .booking-modal-select-label { max-width: calc(100% - 55px); }
    .booking-modal-select-label select { min-width: 0; width: 100%; }
    .booking-modal-header { gap: 8px; }
}
@media (max-width: 760px) {
    .hero { height: 550px; min-height: 550px; }
    .hero-content { width: calc(100% - 40px); padding: 36px 0 130px; align-self: start; }
    .hero-content h1 { font-size: 3rem; max-width: 420px; }
    .hero .script-note { font-size: 1.75rem; }
    .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78) 45%, rgba(255,255,255,.1) 80%); }
    .hero-aside { bottom: 34px; right: 24px; left: 24px; width: auto; }
    .hero .hero-slide figcaption { display: none; }
    .hero .button-row { flex-wrap: wrap; gap: 10px; }
    .hero .button { width: auto; max-width: 100%; padding-inline: 20px; }
    .quick-availability { margin-top: 20px; }
    .booking-launch-panel { padding: 24px; }
    .booking-search-copy h2 { font-size: 1.5rem; }
    .booking-modal { padding: 6px; }
    .booking-modal-dialog { width: 100%; height: calc(100dvh - 12px); }
    .booking-modal-heading h2 { font-size: 1.3rem; }
    .booking-modal-heading p:last-child { display: none; }
    .booking-modal-close { width: 40px; height: 40px; }
    .booking-modal-select-label { font-size: .72rem; }
    .booking-modal-select-label select { max-width: 100%; font-size: .9rem; }
    .inquiry-intro h1 { font-size: 1.9rem; }
    .location-photo-grid > .pier-photo { flex: 0 0 86%; scroll-snap-align: start; }
}
@media (max-width: 440px) {
    .calendar-months { grid-template-columns: 1fr; }
    .calendar-month:nth-child(2) { display: none; }
    .calendar-day { height: 40px; font-size: .95rem; }
    .inquiry-form .form-grid.two { grid-template-columns: minmax(0, 1fr); }
    .inquiry-page { padding: 16px; }
    .hero-content h1 { font-size: 2.8rem; }
    .booking-modal-header { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-dot, .booking-modal-dialog { animation: none; transition: none; }
}

/* September content and layout refinements. */
.inquiry-form { grid-template-areas: "dates guests" "dates details"; row-gap: 0; }
.inquiry-guests { grid-area: guests; padding-left: 24px; border-left: 1px solid var(--line); }
.inquiry-dates { grid-area: dates; }
.inquiry-details { grid-area: details; }
.inquiry-linen { padding-top: 1rem; border-top: 1px solid var(--line); }
.inquiry-linen label { font-size: .88rem; }
.inquiry-linen input { display: block; width: 100px; margin-top: .4rem; }
.inquiry-linen .linen-toggle { align-items: center; cursor: pointer; font-weight: 600; }
.inquiry-linen .linen-toggle input { width: 18px; height: 18px; margin: 0; padding: 0; }
.linen-toggle small { display: block; margin-top: .2rem; color: var(--muted); font-weight: 400; }
.linen-details { margin-bottom: 1rem; font-size: .85rem; color: var(--muted); }
.linen-details summary { cursor: pointer; color: var(--sea-dark); }
.linen-details p { margin-top: .7rem; }
@media (max-width: 800px) {
    .inquiry-form { grid-template-areas: "guests" "dates" "details"; row-gap: 1.25rem; }
    .inquiry-guests { padding-left: 0; border-left: 0; }
    .inquiry-guests .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inquiry-guests h2 { margin-bottom: .7rem; }
}
.section.weather-ideas { grid-template-columns: minmax(0, 1fr); padding: clamp(1.5rem, 4vw, 3.4rem); gap: 2rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.weather-ideas h2 { max-width: none; margin-bottom: 0; }
.weather-ideas .idea-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.weather-ideas .idea-grid article { padding: 1.5rem; }
.weather-ideas .idea-grid p:last-child { margin-bottom: 0; }
.section.discover-region { padding: clamp(1.5rem, 4vw, 3.4rem); border-radius: 32px; }
@media (max-width: 760px) { .weather-ideas .idea-grid { grid-template-columns: minmax(0, 1fr); } }
.content-block.area-callout { padding: clamp(1.25rem, 3vw, 2rem); gap: clamp(1.5rem, 3vw, 2rem); border-top: 0; }
.content-block.area-callout img { display: block; border-radius: 16px; }
.content-block.area-callout > div { min-width: 0; }
.detail-jumpnav { top: 122px; margin-block: 1.5rem 3rem; }
.apartment-grid, .apartment-grid.large { align-items: stretch; }
.apartment-card { display: flex; flex-direction: column; }
.apartment-card .card-content { display: flex; flex-direction: column; flex: 1; }
.apartment-card .card-actions { margin-top: auto; padding-top: 1rem; }
img[src$="bungalow/2228423.jpg"]:not(.detail-hero > img) { object-fit: contain; background: var(--soft); }
.pier-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.pier-feature img { width: 100%; height: auto; max-height: 650px; object-fit: contain; border-radius: 16px; }
.price-basis, .linen-choice { padding: 1rem 1.25rem; background: var(--soft); border-radius: 8px; }
.linen-choice p { margin: 0; }
.site-footer .footer-brand { color: var(--sea-dark); }
@media (max-width: 760px) { .pier-feature { grid-template-columns: 1fr; } }