:root{
  --ink:#183b42;
  --green:#075a73;
  --pale:#eaf4f3;
  --gold:#e8782e;
  --paper:#fffdf8;
  --sand:#faf6ed;
  --muted:#557278;
  --line:#d7e6e7;
  --deep:#043b4c;
  --orange:#e8782e;
  --orange-dark:#cf6120;
  --shadow:0 15px 40px #043b4c14
}

body{
  background:
    radial-gradient(circle at 100% 8%,#80bec11c 0 14rem,transparent 14.1rem),
    linear-gradient(180deg,var(--paper),var(--sand));
  background-attachment:fixed
}

.hero{
  min-height:198px;
  padding-top:18px;
  padding-bottom:27px;
  background:
    radial-gradient(circle at 88% 12%,#80bec12e 0 9rem,transparent 9.1rem),
    linear-gradient(130deg,var(--paper),var(--sand) 58%,var(--pale));
  color:var(--ink);
  border-bottom:1px solid #075a7317;
  border-radius:0 0 34px 34px;
  box-shadow:0 14px 34px #043b4c29
}

.brand{
  justify-content:flex-start;
  min-height:52px
}

.brand-logo{
  display:block;
  width:176px;
  max-width:58vw;
  height:52px;
  object-fit:contain;
  object-position:left center;
  filter:invert(27%) sepia(45%) saturate(1034%) hue-rotate(143deg) brightness(86%) contrast(94%)
}

.app-version{
  margin-left:auto;
  padding:6px 9px;
  color:var(--green);
  background:#ffffff8c;
  border:1px solid #075a732b;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.04em;
  white-space:nowrap
}

.hero h1{
  margin-top:19px;
  font-size:clamp(28px,6.5vw,38px)
}

.hero p{color:var(--muted);opacity:1}

.install{
  top:14px;
  right:14px;
  min-height:40px;
  backdrop-filter:blur(6px)
}

.install{
  color:var(--green);
  background:#ffffffb8;
  border-color:#075a7340
}

.install:not([hidden])~h1{margin-top:28px}

body:has(.install:not([hidden])) .app-version{display:none}

.notice{
  color:#674318;
  background:#fff3df;
  border-color:#f3c79b
}

h2,h3{color:var(--deep)}

.quick-card,
article,
.catalog-group{
  border:1px solid #075a7315;
  box-shadow:var(--shadow)
}

.quick-card{
  min-height:124px;
  padding:15px;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}

.quick-card:hover,
.quick-card:focus-visible{
  border-color:#075a7342;
  box-shadow:0 18px 38px #043b4c1c;
  transform:translateY(-2px);
  outline:none
}

.quick-card span,
.private-card>span,
.wifi-icon{color:var(--green)}

.round-icon{
  color:var(--orange);
  background:#fff0df
}

.private-card{
  background:linear-gradient(120deg,var(--pale),#fffefa)
}

.button-link{
  min-height:44px;
  border:0;
  background:var(--orange);
  box-shadow:0 9px 20px #e8782e28;
  cursor:pointer;
  transition:background-color .18s ease,transform .18s ease
}

.button-link:hover,
.button-link:focus-visible{
  background:var(--orange-dark);
  transform:translateY(-1px);
  outline:3px solid #e8782e2c;
  outline-offset:2px
}

.bottom-nav{
  height:76px;
  padding-bottom:max(6px,env(safe-area-inset-bottom));
  border-top:1px solid #075a7315;
  box-shadow:0 -8px 28px #043b4c14
}

.bottom-nav button.active{color:var(--green)}
.filter-row button.active{background:var(--green);border-color:var(--green)}
.catalog-group h3{background:var(--pale)}
.date-strip div{background:var(--pale)}
.credential{background:#fffefa}

.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus,
.access-form input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 4px #075a731f;
  outline:none
}

.access-gate{
  padding:22px;
  overflow:auto;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 10%,#e8782e21 0 9rem,transparent 9.1rem),
    radial-gradient(circle at 94% 90%,#80bec12b 0 14rem,transparent 14.1rem),
    linear-gradient(145deg,var(--paper),var(--sand) 58%,var(--pale))
}

.access-gate>.gate-card{
  width:min(100%,430px);
  max-width:430px;
  margin:auto;
  padding:30px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid #075a731f;
  border-radius:20px;
  box-shadow:0 24px 65px #043b4c20
}

.gate-logo{
  display:block;
  width:min(100%,210px);
  max-height:88px;
  margin:0 auto 19px;
  object-fit:contain;
  filter:invert(27%) sepia(45%) saturate(1034%) hue-rotate(143deg) brightness(86%) contrast(94%)
}

.gate-eyebrow{
  margin:0 0 7px!important;
  color:var(--orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.access-gate h1{
  margin:0 0 10px;
  color:var(--deep);
  font-size:clamp(30px,8vw,39px);
  line-height:1.08
}

.access-gate p{
  color:var(--muted)
}

.access-form{
  margin:18px 0 15px
}

.access-form label{
  color:var(--deep)
}

.access-form input{
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  text-transform:uppercase
}

.access-gate .button-link{
  color:#fff;
  background:var(--orange)
}

.access-gate .button-link:hover,
.access-gate .button-link:focus-visible{
  background:var(--orange-dark)
}

.access-error{
  margin-bottom:13px!important;
  padding:10px;
  color:#8b381c!important;
  background:#fff0e7;
  border-radius:9px
}

.gate-phone{
  display:inline-block;
  color:var(--green);
  font-size:14px;
  text-decoration:none
}

.gate-phone:hover{text-decoration:underline}

@media(max-width:520px){
  body{padding-bottom:79px}
  .hero{min-height:181px;padding:15px 17px 24px;border-radius:0 0 25px 25px}
  .brand{min-height:45px}
  .brand-logo{width:150px;height:45px}
  .app-version{font-size:9px;padding:5px 7px}
  .hero h1{margin-top:15px;font-size:28px}
  .hero p{font-size:14px}
  .install{top:15px;right:17px;min-height:38px;padding:7px 9px;font-size:12px}
  main{padding:16px 13px}
  .notice{margin-bottom:18px}
  .quick-grid{gap:10px}
  .quick-card{min-height:112px;padding:13px;border-radius:14px}
  .quick-card span{font-size:25px}
  .quick-card strong{font-size:15px}
  article{padding:15px;border-radius:15px}
  .access-gate{align-items:flex-start;padding:12px}
  .access-gate>.gate-card{margin:auto;padding:24px 19px;border-radius:17px}
  .gate-logo{width:min(100%,180px);max-height:76px;margin-bottom:16px}
  .gate-eyebrow{font-size:10px}
  .access-gate h1{font-size:31px}
  .access-gate p{font-size:14px;line-height:1.45}
  .access-form{margin:15px 0 13px}
  .bottom-nav{height:70px}
}

@media(max-width:350px){
  .app-version{display:none}
  .quick-grid{grid-template-columns:1fr}
  .quick-card{min-height:0}
}

@media(max-height:650px){
  .access-gate{padding-top:8px;padding-bottom:8px}
  .access-gate>.gate-card{padding-top:20px;padding-bottom:20px}
  .gate-logo{max-height:65px;margin-bottom:12px}
  .gate-eyebrow{margin-bottom:4px!important}
  .access-gate h1{font-size:29px}
  .access-form{margin-top:12px}
}

@media(prefers-reduced-motion:reduce){
  .page.active{animation:none}
  .quick-card,.button-link{transition:none}
}