/* Layout concept: "rail and drop" — content hangs from thin horizontal rails, like curtains from a track; one teal accent, technical mono for measurements. */
:root{
  --paper:#F1F3F0; --panel:#E4E9E5; --card:#FBFCFA; --ink:#172022; --muted:#4F5D5B; --rule:#C6CFCA;
  --accent:#0E5B57; --accent-ink:#FFFFFF; --accent-soft:#D3E5E1;
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  --radius:6px; --maxw:72rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#101618; --panel:#172024; --card:#1B2529; --ink:#E3EAE7; --muted:#9BA9A6; --rule:#2B383C;
  --accent:#6CC3B9; --accent-ink:#0A1918; --accent-soft:#163331; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#101618; --panel:#172024; --card:#1B2529; --ink:#E3EAE7; --muted:#9BA9A6; --rule:#2B383C;
  --accent:#6CC3B9; --accent-ink:#0A1918; --accent-soft:#163331; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,4.1rem);font-variation-settings:"opsz" 96}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
p{margin:0}
.mono,.eyebrow{font-family:var(--f-mono)}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.narrow{max-width:50rem}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 1rem/1 var(--f-display);background:var(--accent);color:var(--accent-ink);
  text-decoration:none;padding:.95rem 1.4rem;border-radius:var(--radius);border:1.5px solid var(--accent);cursor:pointer;transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-sm{padding:.65rem 1rem;font-size:.9rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-inv{background:var(--accent-ink);color:var(--accent);border-color:var(--accent-ink)}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s3)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.head-row{display:flex;align-items:center;gap:var(--s3);min-height:4.25rem}
.logo{font:800 1.55rem/1 var(--f-display);color:var(--ink);text-decoration:none;letter-spacing:-.03em}
.logo span{color:var(--accent)}
.nav-desk{display:flex;gap:1.25rem;margin-left:auto}
.nav-desk a{font:500 .95rem var(--f-display);color:var(--ink);text-decoration:none;padding-block:.4rem;border-bottom:2px solid transparent}
.nav-desk a:hover,.nav-desk a[aria-current]{border-color:var(--accent)}
.head-cta{display:flex;align-items:center;gap:1rem}
.head-phone{display:inline-flex;align-items:center;gap:.4rem;font:500 .95rem var(--f-mono);color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-mob{display:none;margin-left:auto}
.nav-mob summary{list-style:none;cursor:pointer;font:600 .95rem var(--f-display);padding:.55rem .9rem;border:1.5px solid var(--rule);border-radius:var(--radius)}
.nav-mob summary::-webkit-details-marker{display:none}
.nav-mob nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);display:grid;padding:var(--s1) clamp(1rem,4vw,2rem) var(--s2)}
.nav-mob nav a{font:500 1.1rem var(--f-display);color:var(--ink);text-decoration:none;padding:.7rem 0;border-bottom:1px solid var(--rule)}
@media (max-width:68rem){.nav-desk{display:none}.head-cta{margin-left:auto}}
@media (max-width:40rem){.head-cta .btn{display:none}.nav-mob{display:block;margin-left:0}.head-phone span{font-size:.85rem}}
@media (min-width:68.01rem){.nav-mob{display:none}}
@media (max-width:68rem) and (min-width:40.01rem){.nav-mob{display:block;margin-left:0}}

.crumbs{font:.8rem var(--f-mono);color:var(--muted);padding-top:var(--s2);display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs a{color:var(--muted)}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) var(--s4)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-copy{min-width:0}
.hero h1{margin-top:var(--s2)}
.lede{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--muted);margin-top:var(--s3);max-width:38rem}
.facts{list-style:none;padding:0;margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.8rem;color:var(--muted)}
.facts li::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;border:1.5px solid var(--accent);margin-right:.5rem;vertical-align:.05em}
.sketch{margin:0;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s3);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.sketch figcaption{font:.8rem/1.5 var(--f-mono);color:var(--muted);margin-top:var(--s2);background:var(--card);padding:.5rem .75rem;border-radius:4px}
.bay{width:100%;height:auto;display:block;overflow:visible}
.b-wall{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:miter}
.b-glass{fill:none;stroke:var(--accent-soft);stroke-width:3;stroke-dasharray:22 4}
.b-track{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.b-glider{fill:var(--accent)}
.b-bend{fill:var(--card);stroke:var(--accent);stroke-width:2}
.b-dim{stroke:var(--muted);stroke-width:1;marker-start:none}
.b-txt{font:500 12px var(--f-mono);fill:var(--ink)}
.b-acc{fill:var(--accent)}
.b-note{font-size:8.5px;letter-spacing:.08em;fill:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .b-track{stroke-dasharray:900;stroke-dashoffset:0;animation:draw 1.6s ease-out .2s both}
  @keyframes draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
}

/* ratings */
.ratings{border-block:1px solid var(--rule);background:var(--card)}
.ratings-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rating{display:flex;align-items:center;gap:.9rem;padding:1.25rem 1rem;text-decoration:none;color:var(--ink);border-left:1px solid var(--rule)}
.rating:first-child{border-left:0}
.rating:hover .r-score{color:var(--accent)}
.r-score{font:700 1.9rem/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.r-meta{font:.78rem/1.35 var(--f-mono);color:var(--muted)}
.r-meta b{color:var(--ink);font-weight:500}
@media (max-width:52rem){.ratings-row{grid-template-columns:repeat(2,minmax(0,1fr))}.rating{flex-direction:column;align-items:flex-start;gap:.35rem}.r-meta br{display:none}.rating:nth-child(3){border-left:0}.rating:nth-child(n+3){border-top:1px solid var(--rule)}}

/* sections */
.sec{padding-block:clamp(3rem,7vw,5.5rem)}
.sec-tint{background:var(--panel)}
.sec-head{display:grid;gap:var(--s2);margin-bottom:var(--s4);max-width:44rem}
.sec-head>p:not(.eyebrow){color:var(--muted)}
.sec-head .btn{justify-self:start}
.h-small{font-size:1.3rem;margin-bottom:var(--s3)}
.more-link{margin-top:var(--s4);font-family:var(--f-display);font-weight:600}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.split .sec-head{margin-bottom:0;position:sticky;top:6rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem)}
.two>div{display:grid;gap:var(--s2);align-content:start}
.two p:not(.eyebrow){color:var(--muted)}
@media (max-width:52rem){.split,.two,.hero-grid{grid-template-columns:minmax(0,1fr)}.split .sec-head{position:static}}

/* service cards: hang from a rail */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.svc{position:relative;display:grid;gap:.6rem;align-content:start;padding:var(--s3) var(--s3) var(--s3);text-decoration:none;color:var(--ink);
  border-top:3px solid var(--ink);background:var(--card);transition:border-color .15s ease}
.svc::before{content:"";position:absolute;top:-7px;left:var(--s3);width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.svc:hover{border-top-color:var(--accent)}
.svc:hover::before{border-color:var(--accent)}
.svc p{color:var(--muted);font-size:1rem}
.svc .more{font:600 .9rem var(--f-display);color:var(--accent);margin-top:.25rem}
.svc-feat{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:end;column-gap:var(--s4);background:var(--accent);color:var(--accent-ink);border-top-color:var(--accent)}
.svc-feat::before{background:var(--accent);border-color:var(--accent-ink)}
.svc-feat .eyebrow,.svc-feat p,.svc-feat .more{color:var(--accent-ink)}
.svc-feat h3{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);grid-row:2;grid-column:1}
.svc-feat .eyebrow{grid-column:1/-1}
.svc-feat p{grid-row:2;grid-column:2;opacity:.92}
.svc-feat .more{grid-row:2;grid-column:3;white-space:nowrap}
@media (max-width:60rem){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-feat{grid-template-columns:minmax(0,1fr)}.svc-feat h3,.svc-feat p,.svc-feat .more{grid-column:1;grid-row:auto}}
@media (max-width:36rem){.svc-grid{grid-template-columns:minmax(0,1fr)}}

/* process: a real sequence */
.process{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:0}
.process li{counter-increment:step;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:var(--s2);padding-block:var(--s3);border-top:1px solid var(--rule)}
.process li:first-child{border-top:0;padding-top:0}
.process li::before{content:counter(step,decimal-leading-zero);grid-row:1/3;font:500 .85rem var(--f-mono);color:var(--accent);padding-top:.25rem}
.process h3{font-size:1.15rem}
.process p{color:var(--muted);margin-top:.35rem}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.reviews-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.review{margin:0;display:grid;gap:var(--s2);align-content:space-between;padding-top:var(--s2);border-top:1px solid var(--ink)}
.review blockquote{margin:0}
.review blockquote p{font:italic 400 1.2rem/1.45 var(--f-body);font-variation-settings:"opsz" 30}
.review figcaption{font-size:.95rem;display:grid;gap:.15rem}
.review figcaption .mono{font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.review figcaption a{color:var(--muted)}
@media (max-width:60rem){.reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:36rem){.reviews,.reviews-2{grid-template-columns:minmax(0,1fr)}}

/* credentials */
.creds{list-style:none;margin:0;padding:0;display:grid}
.creds li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s2);padding-block:.85rem;border-top:1px solid var(--rule)}
.creds b{font:600 1rem var(--f-display)}
.creds span{color:var(--muted)}
@media (max-width:30rem){.creds li{grid-template-columns:minmax(0,1fr);gap:.1rem}}

/* areas */
.area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.area-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.area{display:grid;gap:.5rem;align-content:start;text-decoration:none;color:var(--ink);padding-top:var(--s2);border-top:3px solid var(--ink)}
.area:hover{border-color:var(--accent)}
.area:hover h3{color:var(--accent)}
.area p{color:var(--muted);font-size:.95rem}
@media (max-width:60rem){.area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:36rem){.area-grid,.area-grid-2{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faqs{display:grid;border-top:1px solid var(--rule)}
.faqs details{border-bottom:1px solid var(--rule)}
.faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s2);padding-block:1.1rem;font:600 1.1rem/1.35 var(--f-display)}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";font:400 1.4rem/1 var(--f-mono);color:var(--accent);transition:transform .2s ease}
.faqs details[open] summary::after{transform:rotate(45deg)}
.faqs details>div{padding-bottom:1.2rem;color:var(--muted);max-width:42rem}

/* cta band */
.cta-band{background:var(--accent);color:var(--accent-ink);padding-block:clamp(2.5rem,6vw,4rem)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.cta-row p{opacity:.9;margin-top:.5rem;max-width:34rem}
.cta-acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.cta-phone{display:inline-flex;align-items:center;gap:.45rem;color:var(--accent-ink);font:500 1.1rem var(--f-mono);text-decoration:none}

/* inner page heroes */
.phero{padding-block:clamp(2rem,5vw,4rem) clamp(1.5rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.phero h1{margin-top:var(--s2);max-width:20ch}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:end}
@media (max-width:52rem){.phero-grid{grid-template-columns:minmax(0,1fr)}}
.spec{margin:0;display:grid;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius)}
.spec div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--s2);padding:.8rem 1rem;border-top:1px solid var(--rule)}
.spec div:first-child{border-top:0}
.spec dt{font:500 .72rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:0;font-weight:500}

/* article */
.article{display:grid;gap:var(--s4);padding-block:var(--s5)}
.article section{display:grid;gap:var(--s2);max-width:42rem}
.article p{max-width:65ch}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticks li{padding-left:1.6rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.9rem;height:2px;background:var(--accent)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{font:.85rem var(--f-mono);padding:.35rem .7rem;border:1px solid var(--rule);border-radius:999px;background:var(--card)}

/* booking */
.book-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:56rem){.book-grid{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:var(--s3);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2.25rem)}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (max-width:36rem){.f2{grid-template-columns:minmax(0,1fr)}}
.form label{display:grid;gap:.4rem;font:600 .95rem var(--f-display)}
.form label span{color:var(--accent);margin-left:.15rem}
.form input,.form select,.form textarea{font:400 1rem var(--f-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--radius);padding:.75rem .85rem;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form input[type=file]{padding:.6rem;font-size:.9rem}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fine{font-size:.85rem;color:var(--muted)}
.pv{color:var(--accent);font-weight:600}
.book-side{display:grid;gap:var(--s2)}
.big-phone{font:700 clamp(1.6rem,1.2rem + 1.5vw,2.2rem)/1 var(--f-display)}
.big-phone a{color:var(--ink);text-decoration:none}
.hours{font:.85rem/1.6 var(--f-mono);color:var(--muted)}

/* footer */
.site-foot{background:var(--panel);padding-bottom:var(--s3)}
.wave{display:block;width:100%;height:24px}
.wave path{fill:none;stroke:var(--accent);stroke-width:1.5}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s4);padding-block:var(--s4)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot-grid a{color:var(--ink);text-decoration:none}
.foot-grid a:hover{color:var(--accent)}
.foot-brand{display:grid;gap:var(--s2);align-content:start}
.foot-brand p{color:var(--muted);max-width:28rem}
.foot-brand .mono{font-size:.8rem}
.foot-h{font:500 .75rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
address{font-style:normal;line-height:1.8}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s3);border-top:1px solid var(--rule);padding-top:var(--s2);font:.78rem var(--f-mono);color:var(--muted)}
.foot-base a{color:var(--muted)}
@media (max-width:56rem){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:30rem){.foot-grid{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}