:root { --ink:#17353a; --paper:#f7f5ef; --aqua:#397f88; --line:#c9d1cd; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:19px/1.55 Georgia, serif; text-align:center; }
.site-header { padding:8px 24px 10px; background:#fbfaf6; border-bottom:1px solid var(--line); }
.brand { display:block; width:324px; margin:0 auto 1px; }
.brand img { display:block; width:100%; height:122px; object-fit:contain; }
.place { margin:0; color:#657073; font:15px/1.2 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
nav { display:flex; justify-content:center; flex-wrap:wrap; gap:9px 30px; max-width:1280px; margin:7px auto 0; font:19px/1.35 system-ui,sans-serif; }
nav a, nav span { padding:9px 2px; color:var(--ink); text-decoration:none; }
nav .active { color:var(--aqua); border-bottom:2px solid var(--aqua); }
nav span { color:#748082; }
.hero { position:relative; isolation:isolate; overflow:hidden; min-height:620px; display:grid; place-items:end center; padding:55px 24px; color:#fff; background:#17353a; }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(8,31,38,.62),rgba(8,31,38,.07) 70%); }
.hero-slides { position:absolute; z-index:-2; inset:0; }
.hero-slides span { position:absolute; inset:0; opacity:0; background-position:center; background-size:cover; transition:opacity 900ms ease-in-out; }
.hero-slides span.is-active { opacity:1; }
.hero-copy { position:relative; max-width:800px; text-shadow:0 1px 18px rgba(0,0,0,.45); }
.hero-copy p { margin:0; font:16px/1.3 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:9px 0; font-size:clamp(54px,8vw,98px); line-height:1; font-weight:500; letter-spacing:.025em; }
.hero-copy .claim { font:clamp(23px,3vw,34px)/1.35 Georgia,serif; letter-spacing:0; text-transform:none; }
.introduction { padding:66px 24px 64px; }
.introduction p { margin:0; font-size:clamp(28px,3.5vw,42px); }
.introduction .small { max-width:700px; margin:22px auto 0; color:#546468; font-size:21px; }
.rule { width:54px; height:2px; margin:22px auto; background:var(--aqua); }
.surroundings { max-width:900px; margin:0 auto; padding:72px 24px 76px; color:#344b50; }
.surroundings p { margin:0 auto 18px; max-width:800px; font-size:21px; }
.booking-button { display:inline-block; margin-top:16px; padding:15px 34px; border:1px solid var(--aqua); background:var(--aqua); color:#fff; text-decoration:none; font:18px/1.2 system-ui,sans-serif; }
.booking-button:hover, .booking-button:focus-visible { background:#28636b; border-color:#28636b; }
footer { padding:34px 24px; background:#18343a; color:#f7f5ef; font:16px/1.55 system-ui,sans-serif; }
footer p { margin:0; }.preview-note { margin-top:9px; opacity:.7; font-size:13px; }
@media (max-width:760px) { body{font-size:18px}.site-header{padding-top:16px}.brand{width:152px}.brand img{height:72px} nav{gap:1px 16px;font-size:16px}.hero{min-height:470px}.introduction{padding:50px 24px}.surroundings{padding:52px 24px}.surroundings p{font-size:19px} }
@media (prefers-reduced-motion:reduce) { .hero-slides span { transition:none; } }
.surroundings .dogs-note { margin:28px auto 0; }.surroundings .dogs-note img { display:block; width:min(100%,270px); height:auto; margin:0 auto; }