
:root {
  --royal:#1224ff;
  --blue:#075fe9;
  --navy:#07115a;
  --ink:#101528;
  --muted:#646b7c;
  --line:#e8ebf4;
  --soft:#f6f7fb;
  --radius:28px;
  --shadow:0 20px 55px rgba(7,17,90,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.45;
  padding-bottom:92px;
}
a{color:inherit}
.shell{width:min(1120px,100%);margin:auto}

.hero{
  overflow:hidden;
  background:linear-gradient(145deg,#07115a 0%,#071e9d 48%,#1028ff 100%);
  color:#fff;
}
.hero-copy{padding:78px 54px 46px}

.open-status{
  display:none;
  width:max-content;
  max-width:calc(100vw - 28px);
  margin:0;
  padding:13px 18px;
  border-radius:999px;
  background:#eaf2ff;
  color:#0b2f8f;
  border:1px solid rgba(11,47,143,.20);
  font-size:16px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.open-status.is-open{
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  right:14px;
  left:auto;
  z-index:2000;
  animation:openBadgePulse 1.15s ease-in-out infinite;
}
.open-status-dot{
  width:11px;height:11px;border-radius:50%;background:#126ee7;
  box-shadow:0 0 0 5px rgba(18,110,231,.18);
  flex:0 0 auto;
}
@keyframes openBadgePulse{
  0%,100%{transform:scale(1);box-shadow:0 10px 24px rgba(0,0,0,.10)}
  50%{transform:scale(1.10);box-shadow:0 16px 36px rgba(18,110,231,.30)}
}
@media (prefers-reduced-motion:reduce){
  .open-status.is-open{animation:none}
}
.kicker{
  margin:0 0 18px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#d8b9b4;
}
h1{
  max-width:780px;
  margin:0 0 24px;
  font-size:clamp(46px,7vw,78px);
  line-height:.98;
  letter-spacing:-.05em;
}
.hero-copy>p{
  max-width:690px;
  margin:0 0 30px;
  font-size:20px;
  color:#f5f7ff;
}

.hygiene-badge{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  margin:0;
  padding:12px 18px;
  border-radius:16px;
  background:#f1fff4;
  color:#11632c;
  border:1px solid rgba(17,99,44,.18);
  font-size:15px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.hygiene-badge .rating{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border-radius:10px;
  background:#1b8d43;
  color:#fff;
  font-size:18px;
  line-height:1;
}
.hygiene-badge small{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#2e7443;
  line-height:1.15;
}

.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  min-height:58px;
  padding:0 22px;
  border-radius:18px;
  text-decoration:none;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid transparent;
  transition:transform .16s ease,filter .16s ease;
}
.btn:active{transform:scale(.98)}
.btn-call{background:#fff;color:var(--navy)}
.btn-review{background:linear-gradient(135deg,#126ee7,#0751d2);color:#fff;border-color:#89bafc}
.hero-photo{
  width:100%;
  aspect-ratio:4/5;
  background:url("../images/shop-interior.png") center 37%/cover no-repeat;
}

.section{padding:64px 28px}
.section-title{margin:0 0 10px;font-size:clamp(30px,4vw,46px);letter-spacing:-.035em}
.section-intro{margin:0 0 28px;color:var(--muted);font-size:18px;max-width:740px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  padding:28px;
  box-shadow:0 12px 30px rgba(10,20,70,.06);
}
.card h2{margin:0 0 10px;font-size:26px;letter-spacing:-.025em}
.card p{margin:0 0 18px;color:var(--muted)}
.info-row{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--line)}
.info-row:first-of-type{border-top:0}
.icon{width:40px;height:40px;border-radius:12px;background:#eff2ff;display:grid;place-items:center;flex:0 0 auto}
.info-row strong,.info-row span{display:block}
.info-row span{color:var(--muted);font-size:15px;margin-top:2px}

.shop-front{
  margin:0;
  position:relative;
  min-height:560px;
  background:url("../images/shop-front.png") center center/cover no-repeat;
  overflow:hidden;
}
.shop-front::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,10,44,.82),rgba(3,10,44,0) 55%)}
.shop-caption{position:absolute;z-index:1;left:44px;right:44px;bottom:38px;display:flex;align-items:end;justify-content:space-between;gap:20px;color:white}
.shop-caption strong{display:block;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.04em}
.shop-caption span{display:block;margin-top:8px;color:#eef1ff}
.shop-caption .btn{background:white;color:var(--navy);flex:0 0 auto}

.feature{
  border-radius:26px;
  padding:34px;
  background:linear-gradient(135deg,#eef2ff,#f9fbff);
  display:flex;justify-content:space-between;gap:24px;align-items:center;
}
.feature h2{margin:0 0 8px;font-size:30px;letter-spacing:-.03em}
.feature p{margin:0;color:var(--muted);max-width:650px}
.btn-blue{background:var(--royal);color:#fff}
.hygiene-section{padding-top:0}
footer{padding:28px;text-align:center;color:var(--muted);font-size:14px}

.mobile-dock{
  position:fixed;z-index:50;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:660px;margin:auto;padding:8px;
  border-radius:25px;background:rgba(4,13,77,.96);
  backdrop-filter:blur(16px);display:flex;gap:8px;
  box-shadow:0 18px 40px rgba(4,13,77,.28);
}
.mobile-dock a{
  flex:1;min-height:58px;border-radius:18px;text-decoration:none;font-weight:900;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.dock-call{background:#fff;color:var(--navy)}
.dock-review{background:var(--royal);color:#fff}

@media (min-width:900px){
  body{padding-bottom:0}
  .hero{margin:24px;border-radius:34px;box-shadow:var(--shadow)}
  .hero-photo{aspect-ratio:4/3}
  .mobile-dock{display:none}
  .shop-front{margin:0 24px;border-radius:30px}
  .open-status.is-open{right:max(24px, calc((100vw - 1120px) / 2 + 54px));left:auto}
}

@media (max-width:720px){
  .hero-copy{padding:72px 28px 36px}
  .kicker{font-size:13px;margin-bottom:14px}
  h1{font-size:clamp(49px,14vw,67px);margin-bottom:24px}
  .hero-copy>p{font-size:18px;line-height:1.55;margin-bottom:28px}
  .hero-copy .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-copy .btn{min-height:58px;padding:0 12px;font-size:16px;white-space:nowrap}
  .hero-photo{aspect-ratio:4/3;background-position:center center}
  .section{padding:44px 18px}
  .grid{grid-template-columns:1fr}
  .card{padding:23px}
  .shop-front{
    min-height:540px;
    background-size:112% auto;
    background-position:center 47%;
    background-repeat:no-repeat;
  }
  .shop-caption{left:20px;right:20px;bottom:22px;align-items:flex-start;flex-direction:column}
  .shop-caption strong{font-size:34px}
  .shop-caption .btn{width:100%}
  .feature{padding:26px;display:block}
  .feature .actions{margin-top:20px}
  .feature .btn{width:100%}
}

@media (max-width:390px){
  .hero-copy{padding-left:22px;padding-right:22px}
  .hero-copy .btn{font-size:15px}
  .open-status{font-size:15px;padding:11px 15px;max-width:calc(100vw - 20px)}
  .hygiene-badge{font-size:14px;padding:11px 14px;margin:0;width:100%}
  .open-status.is-open{right:10px;left:auto;top:calc(env(safe-area-inset-top, 0px) + 8px)}
  .mobile-dock{left:8px;right:8px}
}

/* Anniversary rosette and header rating retained from the current project. */
.anniversary-badge{
  position:absolute;top:28px;right:28px;
  width:288px;height:288px;isolation:isolate;
  display:grid;place-items:center;color:var(--navy);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.25));
  line-height:1;pointer-events:none;
}
.anniversary-badge::before{
  content:"";position:absolute;z-index:-2;
  left:16%;top:68%;width:68%;height:60%;
  background:linear-gradient(100deg,#b47820 0%,#f7d67c 22%,#c38c2d 43%,#ffe6a0 57%,#c38c2d 78%,#f4ca64 100%);
  clip-path:polygon(13% 0,48% 8%,35% 100%,19% 80%,0 91%,15% 0,85% 0,100% 91%,81% 80%,65% 100%,52% 8%);
}
.anniversary-badge::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-conic-gradient(from 0deg,#a56d1e 0deg,#f8d887 5.625deg,#c38d32 11.25deg);
  clip-path:polygon(50.00% 0.00%,54.51% 4.22%,59.75% 0.96%,63.35% 5.98%,69.13% 3.81%,71.68% 9.43%,77.78% 8.43%,79.18% 14.44%,85.36% 14.64%,85.56% 20.82%,91.57% 22.22%,90.57% 28.32%,96.19% 30.87%,94.02% 36.65%,99.04% 40.25%,95.78% 45.49%,100.00% 50.00%,95.78% 54.51%,99.04% 59.75%,94.02% 63.35%,96.19% 69.13%,90.57% 71.68%,91.57% 77.78%,85.56% 79.18%,85.36% 85.36%,79.18% 85.56%,77.78% 91.57%,71.68% 90.57%,69.13% 96.19%,63.35% 94.02%,59.75% 99.04%,54.51% 95.78%,50.00% 100.00%,45.49% 95.78%,40.25% 99.04%,36.65% 94.02%,30.87% 96.19%,28.32% 90.57%,22.22% 91.57%,20.82% 85.56%,14.64% 85.36%,14.44% 79.18%,8.43% 77.78%,9.43% 71.68%,3.81% 69.13%,5.98% 63.35%,0.96% 59.75%,4.22% 54.51%,0.00% 50.00%,4.22% 45.49%,0.96% 40.25%,5.98% 36.65%,3.81% 30.87%,9.43% 28.32%,8.43% 22.22%,14.44% 20.82%,14.64% 14.64%,20.82% 14.44%,22.22% 8.43%,28.32% 9.43%,30.87% 3.81%,36.65% 5.98%,40.25% 0.96%,45.49% 4.22%);
}
.anniversary-medallion{
  width:76%;height:76%;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 25%,#fff4c5,#f4cf70 65%,#c99232);
  border:3px solid #9c691d;
  box-shadow:0 0 0 5px #ffe5a0,0 0 0 7px #aa7825,inset 0 0 0 5px #fbe5a3,inset 0 0 0 6px #ae7a27;
}
.anniversary-medallion strong{font-family:Georgia,serif;font-size:94px;letter-spacing:-.065em;font-weight:700}
.anniversary-stars{display:flex;justify-content:center;gap:.24em;font-size:18px;margin-bottom:3px;color:#8a5c19}
.anniversary-stars span{display:block}
.anniversary-stars span:nth-child(1){transform:translateY(.4em) rotate(-24deg)}
.anniversary-stars span:nth-child(2){transform:translateY(-.05em) rotate(-12deg)}
.anniversary-stars span:nth-child(3){transform:translateY(-.2em)}
.anniversary-stars span:nth-child(4){transform:translateY(-.05em) rotate(12deg)}
.anniversary-stars span:nth-child(5){transform:translateY(.4em) rotate(24deg)}
.anniversary-years{font-family:Georgia,serif;font-size:32px;font-style:italic}
.anniversary-dates{font-size:13px;letter-spacing:.15em;font-weight:800;margin-top:13px}
.anniversary-badge[hidden]{display:none}

.hero-copy{position:relative}
.anniversary-badge{top:100px}
.hero-copy:has(.anniversary-badge:not([hidden])){min-height:530px;padding-right:355px}
.hero-copy:has(.anniversary-badge:not([hidden])) h1{font-size:clamp(46px,5.4vw,66px)}
.header-actions{align-items:center}
.hygiene-rating{display:block;flex:0 0 auto;width:180px;max-width:100%;background:transparent}
.hygiene-rating img{display:block;width:100%;height:auto}
.hygiene-rating:focus-visible{outline:3px solid #f5d47d;outline-offset:4px}
@media(max-width:1000px){
 .hero-copy:has(.anniversary-badge:not([hidden])){padding:485px 54px 46px}
 .hero-copy:has(.anniversary-badge:not([hidden])) h1{font-size:clamp(46px,7vw,78px)}
}
@media(max-width:720px){
 .anniversary-badge{top:95px;right:20px;width:228px;height:228px}
 .anniversary-medallion strong{font-size:72px}
 .anniversary-stars{font-size:14px}
 .anniversary-years{font-size:26px}
 .anniversary-dates{font-size:11px;margin-top:10px}
 .hero-copy:has(.anniversary-badge:not([hidden])){padding:415px 28px 36px}
 .hero-copy:has(.anniversary-badge:not([hidden])) h1{font-size:clamp(49px,14vw,67px)}
 .header-actions .hygiene-rating{grid-column:2;justify-self:end}
 .shop-front{background-size:cover}
}
@media(max-width:390px){.hero-copy:has(.anniversary-badge:not([hidden])){padding-left:22px;padding-right:22px}}
.visit-actions{margin-top:18px}
.button-outline{border-color:var(--line)}
.card .about-closing{margin-bottom:0}
.button-white{background:white;border-color:var(--line)}