/* =======================================================
   The Royal Castle — styles.css (Single Accent • Light)
   Pairs with the latest index.html + reserve.html
   ======================================================= */

/* -------------------- Design Tokens -------------------- */
:root{
  /* Accent (single colour family) */
  --accent: #d4a941;           /* saffron gold */
  --accent-ink: #382a07;        /* dark ink for contrast */
  --accent-10: rgba(212,169,65,.10);
  --accent-15: rgba(212,169,65,.15);
  --accent-20: rgba(212,169,65,.20);
  --accent-30: rgba(212,169,65,.30);

  /* Surfaces */
  --bg:#ffffff;
  --bg-soft:#fafbff;
  --surface:#f6f8fc;
  --card:#ffffff;

  /* Text */
  --text:#0b1220;
  --muted:#475569;

  /* Links */
  --link:#1a73e8;

  /* Shape + shadow */
  --radius-xs:10px; --radius:16px; --radius-lg:22px; --radius-xl:28px;
  --shadow-1:0 10px 26px rgba(3,15,41,.08);
  --shadow-2:0 18px 44px rgba(3,15,41,.12);
  --shadow-3:0 28px 70px rgba(3,15,41,.16);

  /* Layout */
  --container:1180px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Accent gradient (single colour depth) */
:root{
  --grad-accent: linear-gradient(90deg, rgba(212,169,65,1), rgba(212,169,65,.92));
  --chip: linear-gradient(90deg, var(--accent-10), var(--accent-15));
}

/* -------------------- Base -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body.theme-light{
  margin:0; color:var(--text);
  background:
    radial-gradient(900px 380px at 12% -10%, var(--accent-10), transparent 55%),
    radial-gradient(900px 420px at 100% 22%, rgba(11,18,32,.06), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--bg-soft) 60%, #eef3ff 100%);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1rem}
h1,h2,h3,h4{margin:0 0 .6rem; line-height:1.12; letter-spacing:-.01em}
h1{font-family:"Playfair Display", Georgia, serif; font-size:clamp(38px, 5.6vw, 62px)}
h2{font-family:"Playfair Display", Georgia, serif; font-size:clamp(26px, 3.1vw, 40px)}
h3{font-size:clamp(18px, 2vw, 22px)}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.container{width:min(100%, var(--container)); margin-inline:auto; padding:0 28px}
.section{padding:96px 0}
.section.surface{background:linear-gradient(180deg,#fff 0%,#fbfcff 60%,#f3f7ff 100%)}

/* Icons (inline SVGs) */
.ico{width:20px; height:20px; display:inline-block; vertical-align:-3px; fill:currentColor}
.ico.star{fill:var(--accent)}

/* Reveal animation */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  .tilt{transition: transform .28s var(--ease), box-shadow .28s var(--ease)}
  .tilt:hover{transform:translateY(-4px) rotate(.3deg); box-shadow:var(--shadow-2)}
}

/* Skip link */
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:12px; z-index:100; background:#0b1220; color:#fff; padding:10px 12px; border-radius:10px}

/* Decorative underline */
.decor{position:relative; padding-top:10px}
.decor::before{
  content:""; position:absolute; top:0; left:0; width:84px; height:6px; border-radius:10px;
  background:var(--grad-accent);
  box-shadow:0 6px 20px var(--accent-30);
}

/* -------------------- Background Shapes -------------------- */
.bg-shapes{position:fixed; inset:0; pointer-events:none; z-index:-1}
.shape{
  position:absolute; width:420px; height:420px; border-radius:50%;
  filter:blur(40px); opacity:.18; background:var(--accent);
}
.s1{left:-120px; top:-140px; animation:float 18s var(--ease) infinite}
.s2{right:-140px; top:80px; width:520px; height:520px; opacity:.12; animation:float 22s var(--ease) infinite reverse}
.s3{left:40%; bottom:-180px; width:460px; height:460px; opacity:.10; animation:float 26s var(--ease) infinite}
@keyframes float{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-12px) rotate(5deg)}
  100%{transform:translateY(0) rotate(0)}
}

/* -------------------- Notice -------------------- */
.notice{
  display:flex; gap:.6rem; justify-content:center; align-items:center;
  padding:12px 16px; background:var(--chip);
  color:#1f2937; font-weight:800; border-bottom:1px solid rgba(2,6,23,.06);
}

/* -------------------- Header & Navigation -------------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(2,6,23,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:88px}
.brand{display:flex; align-items:center; gap:14px; color:var(--text)}
.brand .logo{
  width:56px; height:56px; object-fit:contain; border-radius:14px;
  background:#fff; border:1px solid rgba(2,6,23,.06); box-shadow:var(--shadow-1)
}
.wordmark{font-weight:900; letter-spacing:.2px}

.nav-links{position:relative; display:none; gap:18px; align-items:center}
.nav-links .nl{position:relative; padding:14px 10px; color:var(--text); font-weight:800}
.nav-links .nl:hover{color:#000; text-decoration:none}
.nav-links .nl.active{color:#000}
.nav-links .underline{
  position:absolute; bottom:0; left:0; width:0; height:3px; border-radius:4px;
  background:var(--grad-accent); box-shadow:0 6px 18px var(--accent-30);
  transition:left .28s var(--ease), width .28s var(--ease);
}
.burger{
  display:inline-flex; flex-direction:column; gap:5px; width:48px; height:48px;
  align-items:center; justify-content:center; border:1px solid rgba(2,6,23,.12);
  background:linear-gradient(180deg,#fff,#f6f7fb); color:var(--text); border-radius:14px; box-shadow:var(--shadow-1)
}
.burger span{display:block; width:20px; height:2px; background:#111}
@media (min-width:980px){ .nav-links{display:flex} .burger{display:none} }

/* -------------------- Mobile Drawer -------------------- */
.mobile-wrap[hidden]{display:none}
.mobile-wrap{position:fixed; inset:0; z-index:45}
.mobile-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.45); opacity:0; transition:opacity .25s}
.mobile-panel{
  position:absolute; right:0; top:0; bottom:0; width:min(86vw, 380px);
  background:linear-gradient(180deg,#fff,#fbfcff);
  border-left:1px solid rgba(2,6,23,.1);
  padding:22px; transform:translateX(100%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column; gap:12px
}
.mobile-wrap.show .mobile-backdrop{opacity:1}
.mobile-wrap.show .mobile-panel{transform:none}
.mobile-close{
  align-self:flex-end; font-size:28px; line-height:1; background:#fff; color:#0b1220;
  border:1px solid rgba(2,6,23,.14); border-radius:12px; width:42px; height:42px; box-shadow:var(--shadow-1)
}
.m-link{
  padding:14px 12px; border-radius:12px; color:#0b1220;
  background:linear-gradient(180deg,#fff,#f6f8fb);
  border:1px solid rgba(2,6,23,.10);
}
.m-link:hover{background:#fff}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  height:50px; padding:0 18px; border-radius:999px; font-weight:900; border:1px solid transparent;
  text-decoration:none; transition: transform .08s ease, box-shadow .18s var(--ease), background .25s var(--ease);
}
.btn.primary{
  background:var(--grad-accent); color:var(--accent-ink);
  box-shadow:0 12px 28px var(--accent-30);
}
.btn.primary:hover{box-shadow:0 16px 36px rgba(212,169,65,.38)}
.btn.outline{
  background:#fff; color:#0b1220; border-color:rgba(2,6,23,.14);
}
.btn:active{transform:translateY(1px)}
.ripple{position:relative; overflow:hidden}
.ripple::after{
  content:""; position:absolute; width:0; height:0; border-radius:50%;
  background:rgba(0,0,0,.08); transform:translate(var(--rx,50%), var(--ry,50%));
  pointer-events:none; opacity:0; transition:width .45s ease, height .45s ease, opacity .5s ease
}
.ripple:active::after{opacity:1; width:220px; height:220px}

/* -------------------- Hero -------------------- */
.hero{position:relative; overflow:hidden; padding:clamp(68px, 8vw, 112px) 0}
.hero.small{padding:72px 0}
.hero-light::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(700px 200px at 15% 6%, var(--accent-15), transparent 60%),
    radial-gradient(700px 220px at 85% 20%, var(--accent-10), transparent 60%);
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center}
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr; gap:28px} }
.eyebrow{
  color:var(--accent-ink);
  background:var(--accent-10);
  border:1px solid var(--accent-20);
  padding:7px 12px; border-radius:999px;
  font-weight:900; letter-spacing:.12em; text-transform:uppercase
}
.lead{font-size:clamp(16px,1.2vw,19px); color:#334155}
.pills{list-style:none; padding:0; margin:16px 0 22px; display:flex; gap:12px; flex-wrap:wrap}
.pills li{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid rgba(2,6,23,.1); border-radius:999px; background:#fff;
  box-shadow:0 2px 8px rgba(2,6,23,.06)
}
.hero-card{
  overflow:hidden; border-radius:24px; background:linear-gradient(180deg,#fff,#fbfcff);
  box-shadow:var(--shadow-3); border:1px solid rgba(2,6,23,.08);
}
.hero-card img{aspect-ratio:4/3; width:100%; object-fit:cover; transition: transform .9s var(--ease)}
.hero-card:hover img{transform:scale(1.035)}
.hero-card figcaption{padding:13px 16px; color:#475569; background:#fff; display:flex; align-items:center; gap:8px}

/* -------------------- About Collage -------------------- */
.about-collage{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.about-collage img{
  border-radius:18px; border:1px solid rgba(2,6,23,.08); box-shadow:var(--shadow-1);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), filter .4s var(--ease);
}
.about-collage img:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); filter:saturate(1.06)}

/* Two-column About layout (image left, text right) */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
.about-media img{border-radius:18px; border:1px solid rgba(2,6,23,.08); box-shadow:var(--shadow-1); width:100%; height:auto; object-fit:cover}
.about-content{padding:8px 4px}
.about-content .decor{margin-bottom:12px}
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr; gap:18px}
  /* Make the about image larger and more prominent on mobile */
  .about-media img{
    width:100%;
    aspect-ratio:16/9;
    height:clamp(240px, 36vw, 420px);
    object-fit:cover;
    border-radius:18px;
  }
  .about-content{padding-top:12px}
}

/* -------------------- Reservation iframe -------------------- */
.reservation__iframe{background:linear-gradient(180deg,#fff,#fbfcff); border:1px solid rgba(2,6,23,.08); border-radius:18px; padding:20px}
.reservation__iframe h2{margin:0 0 6px}
.reservation__iframe p{margin:0 0 8px; color:var(--muted)}
.iframe-wrap{margin-top:14px; overflow:hidden; border-radius:14px; border:1px solid rgba(2,6,23,.06); background:#fff}
.iframe-wrap iframe{display:block; width:100%; max-width:520px; margin:0 auto; height:900px; border:0}
.iframe-loader{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4)); z-index:10}
.iframe-wrap{position:relative}
.spinner{width:56px; height:56px; border-radius:50%; border:6px solid rgba(0,0,0,.08); border-top-color:var(--accent); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Try to avoid iframe internal scroll by using square-ish viewport on mobile */
@media (max-width:1200px){ .iframe-wrap iframe{max-width:520px; height:760px} }
@media (max-width:900px){ .iframe-wrap iframe{max-width:720px; width:100%; height:620px} }
@media (max-width:560px){ .iframe-wrap iframe{max-width:100%; width:100%; height:540px} }

/* Fullscreen modal for booking widget */
.booking-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:9999}
.booking-modal.open{display:flex}
.booking-modal .modal-body{width:100%; height:100%; max-width:none; max-height:none; border-radius:0; box-shadow:none}
.booking-modal iframe{width:100%; height:100%; border:0}
.no-scroll{overflow:hidden !important}

/* Layout for reservation page: two-column on desktop, stacked on mobile */
.reservation__grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start}
.reservation__iframe{padding:20px}
.reservation__aside{padding:8px 6px}

@media (max-width:980px){
  .reservation__grid{grid-template-columns:1fr; gap:18px}
  .reservation__aside{order:2}
  .reservation__iframe{order:1}
  /* make iframe take full width on narrow screens */
  .iframe-wrap iframe{max-width:100%; width:100%}
}

/* Tweak hero and type scale on reserve page for smaller viewports */
.reserve-page .hero.small .intro h1{font-size:clamp(22px,5vw,34px)}
.reserve-page .hero.small .intro .lead{font-size:clamp(13px,2.6vw,16px)}

@media (max-width:420px){
  .iframe-wrap iframe{height:520px}
  .reservation__iframe h2{font-size:1.05rem}
}

/* Further mobile refinements */
@media (max-width:560px){
  .container{padding:0 12px}
  .reservation__grid{gap:12px}
  .reservation__iframe{padding:12px}
  .reservation__aside{padding:6px}
  .pills li{font-size:13px; padding:8px 10px}
  .intro .eyebrow{font-size:13px}
  .intro h1{font-size:22px}
  .lead{font-size:14px}
  .iframe-wrap{border-radius:10px}
  .iframe-wrap iframe{height:620px}
}

@media (max-width:360px){
  .intro h1{font-size:20px}
  .lead{font-size:13px}
  .iframe-wrap iframe{height:560px}
}

/* -------------------- Menu + Slider -------------------- */
.menu-booklet{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.menu-card{
  cursor:zoom-in; border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--shadow-1);
  border:1px solid rgba(2,6,23,.10);
}
.menu-card img{aspect-ratio:4/5; width:100%; object-fit:cover}
.menu-card figcaption{text-align:center; padding:10px; color:var(--muted)}
@media (max-width:900px){ .menu-booklet{grid-template-columns:1fr} }

.menu-slider[hidden]{display:none}
.menu-slider{position:fixed; inset:0; z-index:60}
.ms-backdrop{position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter: blur(3px)}
.ms-panel{
  position:absolute; inset:40px; background:linear-gradient(180deg,#ffffffcc,#fff);
  border-radius:26px; border:1px solid rgba(2,6,23,.12);
  display:grid; grid-template-rows:auto 1fr auto; box-shadow:var(--shadow-3)
}
.ms-topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(2,6,23,.08)}
.ms-close{
  background:#fff; color:#111; border:1px solid rgba(2,6,23,.18);
  border-radius:12px; width:42px; height:42px; font-size:22px; box-shadow:var(--shadow-1)
}
.ms-viewport{overflow:hidden}
.ms-track{display:flex; transition:transform .38s var(--ease)}
.ms-slide{min-width:100%; display:flex; align-items:center; justify-content:center; padding:12px}
.ms-slide img{max-height:78vh; width:auto; border-radius:16px; border:1px solid rgba(2,6,23,.08); box-shadow:var(--shadow-1)}
.ms-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(2,6,23,.18); background:#fff; color:#111; box-shadow:var(--shadow-1)
}
.ms-arrow.left{left:26px} .ms-arrow.right{right:26px}
.ms-dots{display:flex; gap:8px; justify-content:center; padding:12px}
.ms-dots button{width:8px; height:8px; border-radius:999px; background:rgba(2,6,23,.25); border:none}
.ms-dots button.active{background:var(--accent)}

/* -------------------- Generic cards/panels -------------------- */
.card, .panel{
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
  border:1px solid rgba(2,6,23,.10);
  border-radius:18px; box-shadow:var(--shadow-1)
}
.panel.pad{padding:28px}

/* -------------------- Order Buttons -------------------- */
.order-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.order-btn{
  height:60px; border-radius:16px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border:1px solid rgba(2,6,23,.12); color:var(--text);
  background:linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
  box-shadow:var(--shadow-1);
}
.order-btn .ob-left{display:flex; align-items:center; gap:10px}
.order-btn:hover{transform:translateY(-2px); text-decoration:none; box-shadow:var(--shadow-2)}
.ob-label{font-weight:900}
.ob-arrow{opacity:.85}
@media (max-width:900px){ .order-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .order-grid{grid-template-columns:1fr} }

/* Toast */
.toast[hidden]{display:none}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111; color:#fff; padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow-2); z-index:90
}

/* -------------------- Gallery -------------------- */
.gallery.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; align-items:start}
.g-thumb{
  cursor:zoom-in; border-radius:16px; border:1px solid rgba(2,6,23,.1);
  background:#fff; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  width:100%; height:100%;
}
.g-thumb:hover, .g-thumb:focus{transform:translateY(-4px) scale(1.02); box-shadow:var(--shadow-2); filter:saturate(1.06)}

@media (max-width:560px){
  .gallery.grid{grid-template-columns:repeat(2, 1fr); gap:10px}
  .g-thumb{aspect-ratio:1/1}
}

.gal-slider[hidden]{display:none}
.gal-slider{position:fixed; inset:0; z-index:60}
.gal-backdrop{position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter: blur(3px)}
.gal-panel{
  position:absolute; inset:40px; background:linear-gradient(180deg,#ffffffcc,#fff);
  border-radius:26px; border:1px solid rgba(2,6,23,.12);
  display:grid; grid-template-rows:auto 1fr auto; box-shadow:var(--shadow-3)
}
.gal-topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(2,6,23,.08)}
.gal-close{
  background:#fff; color:#111; border:1px solid rgba(2,6,23,.18);
  border-radius:12px; width:42px; height:42px; font-size:22px; box-shadow:var(--shadow-1)
}
.gal-viewport{overflow:hidden}
.gal-track{display:flex; transition:transform .38s var(--ease)}
.gal-slide{min-width:100%; display:flex; align-items:center; justify-content:center; padding:12px}
.gal-slide img{max-height:78vh; width:auto; border-radius:16px; border:1px solid rgba(2,6,23,.08); box-shadow:var(--shadow-1)}
.gal-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(2,6,23,.18); background:#fff; color:#111; box-shadow:var(--shadow-1)
}
.gal-arrow.left{left:26px} .gal-arrow.right{right:26px}
.gal-dots{display:flex; gap:8px; justify-content:center; padding:12px}
.gal-dots button{width:8px; height:8px; border-radius:50%; background:rgba(2,6,23,.25); border:none}
.gal-dots button.active{background:var(--accent)}

/* -------------------- Reviews -------------------- */
.rev-carousel{position:relative}
.rev-viewport{overflow:hidden}
.rev-track{display:flex; gap:18px; transition:transform .38s var(--ease)}
.rev-slide{
  min-width:clamp(260px,46vw,420px); padding:22px; border-radius:18px;
  background:linear-gradient(180deg,#fff,#fbfcff);
  border:1px solid rgba(2,6,23,.1); box-shadow:var(--shadow-1)
}
.stars{color:var(--accent); display:flex; gap:4px; margin-bottom:8px}
.rev-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:12px;
  border:1px solid rgba(2,6,23,.15); background:#fff; color:#111; box-shadow:var(--shadow-1)
}
.rev-arrow.left{left:-6px} .rev-arrow.right{right:-6px}
.rev-dots{display:flex; gap:8px; justify-content:center; padding:12px}
.rev-dots button{width:8px; height:8px; border-radius:50%; background:rgba(2,6,23,.25); border:none}
.rev-dots button.active{background:var(--accent)}

/* -------------------- Contact & Map -------------------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.contact-card{padding:20px}
.addr{font-style:normal; color:var(--muted); display:grid; grid-template-columns:auto 1fr; align-items:start; gap:8px}
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.contact-list li{display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:8px}
.contact-list a{margin-left:10px; color:var(--link)}
.map-card.single{
  margin-top:18px; border-radius:20px; overflow:hidden;
  border:1px solid rgba(2,6,23,.1); box-shadow:var(--shadow-1); background:#fff
}
.map-head{padding:12px 16px; border-bottom:1px solid rgba(2,6,23,.08); background:#fff}
.map-head h4{display:flex; align-items:center; gap:8px}
.map-embed iframe{display:block; width:100%; height:420px; border:0}
@media (max-width:980px){ .contact-grid{grid-template-columns:1fr} }
.hours{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.hours li{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid rgba(2,6,23,.1); padding:12px 14px; border-radius:14px; box-shadow:var(--shadow-1)
}

/* -------------------- Footer -------------------- */
.footer.footer-light{
  margin-top:56px; background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
  border-top:1px solid rgba(2,6,23,.10); color:var(--text);
}
.foot{display:grid; grid-template-columns:1.2fr 1fr 1.1fr; gap:30px; padding:44px 0}
.foot-brand{display:flex; gap:14px; align-items:center}
.foot-brand .logo{
  width:58px; height:58px; object-fit:contain; border-radius:14px; border:1px solid rgba(2,6,23,.06); box-shadow:var(--shadow-1)
}
.foot-brand .wordmark{
  font-weight:900; font-size:1.24rem; letter-spacing:.1px;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.foot-links{display:flex; flex-direction:column; gap:10px; text-align:center}
.foot-links a{color:#1f2937}

/* Footer layout */
.footer{margin-top:64px}
.foot{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; padding:44px 0}
.foot-contact{display:flex; flex-direction:column; gap:8px}
.foot-contact p{margin:0}

/* Social buttons */
.foot-social{display:flex; gap:10px; margin-top:8px}
.social-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; background:#fff; border:1px solid rgba(2,6,23,.08); box-shadow:var(--shadow-1); color:var(--text)}
.social-btn svg{width:18px; height:18px; fill:currentColor}
.social-btn.fb{color:#1877F2}
.social-btn.ig{color:#C13584}

/* Legal bar */
.legal{border-top:1px solid rgba(2,6,23,.06); background:linear-gradient(180deg,#fff,#fbfcff); padding:12px 0}
.legal-inner{display:flex; justify-content:space-between; gap:20px; align-items:center}
.legal small{color:var(--muted)}

@media (max-width:980px){
  .foot{grid-template-columns:1fr; text-align:left; padding:32px 0}
  .foot-links{flex-direction:row; justify-content:space-between}
  .legal-inner{flex-direction:column; gap:6px; align-items:flex-start}
}
.foot-links a:hover{color:#000; text-decoration:none}
.foot-contact{font-size:1rem; display:flex; flex-direction:column; gap:8px}
.foot-contact a{color:var(--link)}
.foot-social{display:flex; gap:10px; margin-top:10px}
.social-btn{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; border:1px solid rgba(2,6,23,.14); background:#fff; box-shadow:var(--shadow-1)
}
.social-btn svg{width:22px; height:22px; fill:#111}
.fb{background:linear-gradient(180deg, rgba(66,103,178,.10), #fff)}
.ig{background:linear-gradient(180deg, rgba(225,48,108,.10), #fff)}
.legal{
  border-top:1px solid rgba(2,6,23,.10);
  padding:14px 0; font-size:.92rem; color:#475569; background:#fff;
}
.legal-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px}
.legal a{color:#475569}
.legal a:hover{color:#111}
@media (max-width:980px){
  .foot{grid-template-columns:1fr; text-align:center}
  .foot-links{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px 18px}
  .foot-contact{align-items:center}
}

/* -------------------- FAB (Floating Action Button) -------------------- */
:root{ --fab-size:60px; --fab-radius:18px; --fab-gap:10px; }
.fab-wrap{
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:65;
}
.fab{position:relative}
.fab-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.35);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease)
}
.fab-open .fab-backdrop{opacity:1; pointer-events:auto}
.fab-main{
  width:var(--fab-size); height:var(--fab-size); display:grid; place-items:center; cursor:pointer;
  border-radius:var(--fab-radius); border:1px solid rgba(2,6,23,.12);
  background:var(--grad-accent); color:var(--accent-ink);
  box-shadow:0 14px 28px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.10);
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .25s var(--ease)
}
.fab-main:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.20)}
.fab-main:active{transform:translateY(0)}
.fab-main svg{width:28px; height:28px}
.fab-main::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%); mix-blend-mode:screen;
}
.fab-menu[hidden]{display:none}
.fab-menu{
  position:absolute; bottom:calc(var(--fab-size) + 12px); right:0;
  display:flex; flex-direction:column; gap:var(--fab-gap);
  transform-origin:100% 100%; transform:translateY(8px) scale(.96);
  opacity:0; transition:transform .28s var(--ease), opacity .28s var(--ease)
}
.fab-open .fab-menu{transform:none; opacity:1}
.fab-item{
  display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 12px;
  border-radius:14px; border:1px solid rgba(2,6,23,.12); background:#fff; color:#0b1220;
  text-decoration:none; font-weight:800; box-shadow:0 8px 20px rgba(16,24,40,.12);
  transform:translateY(6px); opacity:0;
  transition:transform .32s var(--ease), opacity .32s var(--ease), box-shadow .25s var(--ease), background .25s
}
.fab-open .fab-item{transform:none; opacity:1}
.fab-item:hover{background:linear-gradient(180deg,#fff,#f6f8fb); box-shadow:0 12px 26px rgba(16,24,40,.16)}
.fab-item:active{transform:translateY(1px)}
.fab-menu .fab-item:nth-child(1){transition-delay:.02s}
.fab-menu .fab-item:nth-child(2){transition-delay:.06s}
.fab-menu .fab-item:nth-child(3){transition-delay:.10s}
.fab-menu .fab-item:nth-child(4){transition-delay:.14s}
.fab-item .fi-ico{
  width:28px; height:28px; flex:0 0 auto; border-radius:10px;
  background:var(--grad-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px var(--accent-30)
}
.fab-item .fi-label{line-height:1}

/* -------------------- Hours Bottom Sheet -------------------- */
.hours-sheet[hidden]{display:none}
.hours-sheet{position:fixed; inset:0; z-index:70}
.hs-backdrop{position:absolute; inset:0; background:rgba(2,6,23,.45)}
.hs-panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff;
  border-radius:22px 22px 0 0; border:1px solid rgba(2,6,23,.12);
  box-shadow:0 -10px 30px rgba(16,24,40,.12); transform:translateY(100%); transition:transform .28s var(--ease)
}
.hours-sheet.show .hs-panel{transform:none}
.hs-top{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(2,6,23,.08)}
.hs-close{
  width:40px; height:40px; border-radius:12px; background:#fff; color:#111;
  border:1px solid rgba(2,6,23,.14); font-size:20px; box-shadow:var(--shadow-1)
}
.hs-body{padding:16px}

/* -------------------- Forms -------------------- */
.form{display:grid; gap:16px}
.form-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.form label{display:grid; gap:6px; color:#556070}
.form input,.form textarea,.form select{
  height:48px; padding:0 12px; border-radius:14px; border:1px solid rgba(2,6,23,.14);
  background:#fff; color:#111; box-shadow:var(--shadow-1)
}
.form textarea{height:auto; padding:12px; resize:vertical; min-height:120px}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:2px solid var(--accent-20); border-color:transparent; box-shadow:0 0 0 4px var(--accent-10)
}
@media (max-width:980px){ .form-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .form-grid{grid-template-columns:1fr} }

/* -------------------- Utilities -------------------- */
.split{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px}
.grid{display:grid; gap:16px}
.single{grid-template-columns:1fr}
#year{opacity:.9}

/* Scrollbar */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:#eef2f7}
::-webkit-scrollbar-thumb{background:#cfd8e3; border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#a8b3c5}

/* Focus ring */
:focus-visible{outline:2px solid var(--accent-20); outline-offset:2px; border-radius:10px}