/* DS-19 Coastal Open Air */


:root {
  --bg: #F5F3EA; --ink: #18323D; --act: #2D7B88; --acc: #D29B5A; --hi: #C9D8D5;
  --sea: #E0E6E0; --deep: #142932; --on-act: #FFFFFF; --on-deep: #FFFFFF;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --max:1320px; --measure:68ch; --measure-s:52ch; --radius:16px;
  --head-h:var(--catalog-font-heading); --band-pad:72px; --gutter:16px;
  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);
  --focus-ring:var(--hi); --focus-width:3px; --focus-offset:3px;
  --t:220ms cubic-bezier(.2,.8,.2,1); --t-long:600ms cubic-bezier(.2,.8,.2,1);
}
@media(min-width:360px){:root{--gutter:18px}}
@media(min-width:375px){:root{--gutter:20px}}
@media(min-width:414px){:root{--gutter:24px}}
@media(min-width:768px){:root{--gutter:36px;--band-pad:112px;--head-h:var(--catalog-font-heading)}}
@media(min-width:1024px){:root{--gutter:48px;--band-pad:144px}}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--font-b)}
@media(min-width:768px){body{font-size:1.0625rem}}
h1,h2,h3,.mark__h,.price__v,.gal__no,.how__no{font-family:var(--font-h)}
h1{font-size:clamp(2.25rem,11vw,3.75rem);line-height:.98;letter-spacing:-.035em}
@media(min-width:768px){h1{font-size:clamp(3.25rem,7vw,7rem);line-height:.94}}
h2{font-size:clamp(2rem,4vw,4rem);line-height:1.02} h3{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.15}
.measure{max-width:var(--measure)} .measure-s{max-width:var(--measure-s)}
a{color:#18323D} a:hover{color:var(--ink)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:var(--band-pad);border-top:1px solid color-mix(in srgb,var(--ink) 24%,transparent)}
.sec::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);pointer-events:none}
.svcp,.how,.prin,.rev,.faqg{background:var(--sea)}
.appr,.note,.limit,.alt{background:color-mix(in srgb,var(--bg) 82%,var(--acc))}
.hd{position:relative;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent);backdrop-filter:blur(12px)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--head-h);max-width:var(--max);margin:auto;padding-inline:var(--gutter)}
.mark{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.mark__emblem{width:28px;height:28px;border:1px solid currentColor;border-radius:50%;position:relative;flex:none}
.mark__emblem::before{content:"";position:absolute;left:4px;right:4px;top:13px;border-top:1px solid currentColor}
.mark__emblem::after{content:"";position:absolute;width:7px;height:7px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg);left:9px;top:7px}
.mark__h{font-weight:700}.mark__sub{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.nav{display:none}.nav__list{display:flex;align-items:center;gap:clamp(18px,2.5vw,42px)}
.nav__link{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid transparent}
.nav__link[aria-current=page]{border-color:var(--acc)}
.drawer{position:relative}.drawer__toggle{min-width:44px;border:1px solid var(--ink);background:var(--bg);border-radius:50%}
.drawer__panel{position:absolute;right:0;top:calc(100% + 8px);width:min(20rem,calc(100vw - var(--gutter)*2));padding:12px;background:var(--bg);border:1px solid var(--ink);box-shadow:0 18px 50px rgb(24 50 61 / .18)}
.drawer__link{display:block;min-height:44px;padding:12px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hi)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border:1px solid transparent;border-radius:999px;font-weight:700;text-decoration:none;transition:transform var(--t),background var(--t),color var(--t)}
.btn--primary,.btn--book{background:var(--act);color:var(--on-act);border-color:var(--act)}
.btn--primary:hover,.btn--book:hover{background:var(--ink);color:var(--on-deep);transform:translateY(-2px)}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}.btn--ghost:hover{background:var(--ink);color:var(--on-deep)}
.field label,.sub-band label{display:block;margin-bottom:8px;font-size:.875rem;font-weight:700}
.field input,.field select,.field textarea,.sub-band input{width:100%;min-height:44px;padding:12px;border:1px solid color-mix(in srgb,var(--ink) 42%,transparent);border-radius:8px;background:#fff;color:var(--ink)}
.field textarea{min-height:168px}.field input:focus,.field select:focus,.field textarea:focus,.sub-band input:focus{border-color:var(--act)}
.sub-band{background:var(--ink);color:var(--on-deep);padding-block:48px}.sub-band__in{display:grid;gap:24px}.sub-form{display:grid;gap:12px}.btn--sub{background:var(--acc);color:var(--ink);border-radius:999px;border:0;padding:12px 24px;font-weight:700}
.ft{position:relative;background:var(--deep);color:var(--on-deep);padding-top:64px;border-top:1px solid var(--acc)}
.ft::before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:linear-gradient(90deg,transparent,var(--hi),var(--acc),var(--hi),transparent)}
.ft a{color:var(--on-deep)}.ft__mark{display:flex;align-items:center;gap:14px;padding-bottom:32px}.ft__mark-line{height:1px;flex:1;background:color-mix(in srgb,var(--hi) 60%,transparent)}
.ft__mark-name{font-family:var(--font-h);font-size:clamp(1.5rem,3vw,2.5rem)}
.ft__in{display:grid;gap:32px;padding-bottom:48px}.ft__h{font-size:1rem;margin-bottom:12px;color:var(--hi)}.ft__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px}.ft__list{columns:2}.ft__list a{display:inline-flex;min-height:44px;align-items:center}.ft__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:24px;border-top:1px solid rgb(255 255 255 / .16)}
@media(min-width:768px){.sub-band__in{grid-template-columns:1fr 1fr;align-items:end}.sub-form{grid-template-columns:1fr auto;align-items:end}.ft__in{grid-template-columns:1.1fr .9fr 1fr}}
@media(min-width:1200px){.nav{display:block}.drawer{display:none}}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}
