/* ============================================================
   The Oyster Bar - St. Petersburg, FL
   Shared design system. Coastal raw-bar. No em dashes in copy.
   ============================================================ */
:root{
  --ink:#0c1518; --ink2:#0f1f22; --deep:#10302e; --deep2:#0a2422;
  --brine:#1d4f4a; --foam:#9ad9cb; --foam-soft:#cfeae3;
  --gold:#d2a857; --gold-soft:#e7c98a; --gold-deep:#b78a3d;
  --shell:#f4eee2; --pearl:#ffffff; --muted:#9bb2ae; --muted-dim:#7c9591;
  --line:rgba(154,217,203,.16);
  --maxw:1180px;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --img-ice:url("https://images.unsplash.com/photo-1615141982883-c7ad0e69fd62?auto=format&fit=crop&w=2000&q=80");
  --img-interior:url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1300&q=80");
  --img-grouper:url("https://images.unsplash.com/photo-1485921325833-c519f76c4927?auto=format&fit=crop&w=900&q=80");
  --img-shrimp:url("https://images.unsplash.com/photo-1565680018434-b513d5e5fd47?auto=format&fit=crop&w=900&q=80");
  --img-salmon:url("https://images.unsplash.com/photo-1579584425555-c3ce17fd4351?auto=format&fit=crop&w=900&q=80");
  --img-dish:url("https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?auto=format&fit=crop&w=900&q=80");
  --img-waterfront:url("https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=900&q=80");
  --img-plated:url("https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=900&q=80");
  --img-brunch:url("https://images.unsplash.com/photo-1535140728325-a4d3707eee61?auto=format&fit=crop&w=900&q=80");
  --img-chef:url("https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&w=900&q=80");
  --img-wave:url("https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=1600&q=80");
  --img-cocktail:url("https://images.unsplash.com/photo-1556679343-c7306c1976bc?auto=format&fit=crop&w=1600&q=80");
  --img-oldfashioned:url("https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&w=900&q=80");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--shell);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--serif); font-weight:800; line-height:1.05; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.eyebrow{font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 18px}
.serif-it{font-style:italic; font-weight:600}
.accent{color:var(--gold)}
.foam{color:var(--foam)}

/* skip link (a11y) */
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:#1a1208;
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:4px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:15px 26px; border-radius:999px; border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;}
.btn-gold{background:var(--gold); color:#1a1208; box-shadow:0 14px 34px -14px rgba(210,168,87,.7)}
.btn-gold:hover{transform:translateY(-3px); background:var(--gold-soft); box-shadow:0 20px 40px -14px rgba(210,168,87,.85)}
.btn-ghost{border-color:rgba(244,238,226,.32); color:var(--shell)}
.btn-ghost:hover{border-color:var(--foam); color:var(--foam); transform:translateY(-3px)}
.btn-dark{background:rgba(8,18,18,.5); border-color:var(--line); color:var(--shell)}
.btn-dark:hover{border-color:var(--gold); color:var(--gold-soft); transform:translateY(-3px)}

/* header */
header.site-header{position:fixed; inset:0 0 auto 0; z-index:60; padding:20px 0;
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;}
header.site-header.solid{background:rgba(10,26,25,.86); backdrop-filter:blur(14px);
  border-bottom-color:var(--line); box-shadow:0 12px 40px -20px rgba(0,0,0,.8); padding:13px 0;}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:13px}
.brand .mark{flex:0 0 auto}
.brand .txt{line-height:1}
.brand .name{font-family:var(--serif); font-weight:800; font-size:20px; letter-spacing:.02em; color:var(--shell)}
.brand .sub{display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-top:4px}
.nav-links{display:flex; align-items:center; gap:30px; margin:0; padding:0; list-style:none}
.nav-links a{font-size:14px; font-weight:500; color:var(--shell); opacity:.86; letter-spacing:.02em; transition:color .2s, opacity .2s; position:relative}
.nav-links a:hover{opacity:1; color:var(--foam)}
.nav-links a.active{opacity:1; color:var(--gold-soft)}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--gold); border-radius:2px}
.nav-cta{display:flex; align-items:center; gap:18px}
.nav-phone{font-size:14px; font-weight:600; color:var(--shell); white-space:nowrap}
.nav-phone:hover{color:var(--gold-soft)}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
.burger span{width:24px; height:2px; background:var(--shell); border-radius:2px; transition:.3s}

/* hero (home) */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:150px 0 90px; overflow:hidden}
.hero-bg{position:absolute; inset:0; background:var(--deep2) var(--img-ice) center/cover no-repeat; transform:scale(1.06); animation:slowzoom 22s ease-in-out infinite alternate}
@keyframes slowzoom{to{transform:scale(1.16)}}
.hero-veil{position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(12,21,24,.18), transparent 55%),
    linear-gradient(180deg, rgba(8,16,18,.78) 0%, rgba(8,16,18,.46) 38%, rgba(8,16,18,.82) 100%),
    linear-gradient(90deg, rgba(8,16,18,.86) 0%, rgba(8,16,18,.30) 70%);}
.hero-inner{position:relative; z-index:3; max-width:760px}
.hero h1{font-size:clamp(42px,7.2vw,84px); letter-spacing:-.01em; text-shadow:0 10px 40px rgba(0,0,0,.4)}
.hero h1 em{font-style:italic; color:var(--gold-soft); font-weight:600}
.hero p.lead{font-size:clamp(17px,2.1vw,21px); color:#e8efec; max-width:560px; margin:26px 0 36px; font-weight:300}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:42px; padding-top:26px; border-top:1px solid rgba(244,238,226,.14)}
.hero-meta span{font-size:13px; letter-spacing:.04em; color:var(--muted); display:flex; align-items:center; gap:9px}
.hero-meta b{color:var(--shell); font-weight:600}
.star{color:var(--gold)}

/* page hero (sub-pages, compact) */
.page-hero{position:relative; padding:188px 0 92px; overflow:hidden; border-bottom:1px solid var(--line)}
.page-hero-bg{position:absolute; inset:0; background:var(--deep2) center/cover no-repeat; transform:scale(1.05)}
.page-hero-veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,16,18,.86) 0%, rgba(8,16,18,.62) 45%, rgba(8,16,18,.9) 100%);}
.page-hero-inner{position:relative; z-index:3; max-width:760px}
.page-hero h1{font-size:clamp(38px,6vw,68px); letter-spacing:-.01em}
.page-hero h1 em{font-style:italic; color:var(--gold-soft); font-weight:600}
.page-hero p{font-size:clamp(16px,1.9vw,19px); color:#dbe6e2; max-width:560px; margin:22px 0 0; font-weight:300}
.page-hero .hero-cta{margin-top:34px}

/* breadcrumbs */
.crumbs{position:relative; z-index:3; margin:0 0 24px; font-size:12.5px; letter-spacing:.04em}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; align-items:center}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--foam)}
.crumbs li[aria-current]{color:var(--gold-soft)}
.crumbs .sep{color:var(--muted-dim)}

/* section base */
section{position:relative}
.pad{padding:108px 0}
.pad-sm{padding:74px 0}
.center{text-align:center}
.h2{font-size:clamp(30px,4.6vw,52px); letter-spacing:-.01em; color:var(--shell)}
.h3{font-size:clamp(22px,3vw,30px); color:var(--shell); font-family:var(--serif); font-weight:800; line-height:1.1}
.lede{font-size:17px; color:var(--muted); max-width:640px; font-weight:300; line-height:1.75}
.center .lede{margin:18px auto 0}
.sec-ink{background:var(--ink)}
.sec-ink2{background:var(--ink2)}
.sec-deep{background:var(--deep2)}
.sec-grad{background:linear-gradient(180deg,var(--deep2),var(--ink))}

/* prose */
.prose{max-width:720px; margin-left:auto; margin-right:auto; text-align:center}
.prose p{color:#cdd9d6; font-weight:300; font-size:16.5px; margin:0 0 18px; line-height:1.8}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--shell); font-weight:600}
.prose a{color:var(--foam); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(154,217,203,.4)}
.prose a:hover{color:var(--gold-soft)}

/* about */
.about{background:linear-gradient(180deg,var(--ink) 0%, var(--ink2) 100%)}
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.about-grid > div:first-child{text-align:center}
.about p{color:#cdd9d6; font-weight:300; font-size:16.5px; margin:0 0 18px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; justify-content:center}
.chip{font-size:13px; letter-spacing:.03em; color:var(--foam); border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:rgba(154,217,203,.05)}
.about-img{position:relative; border-radius:14px; overflow:hidden; min-height:440px;
  background:var(--deep2) var(--img-interior) center/cover no-repeat;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9); border:1px solid var(--line)}
.about-img::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg,transparent 40%, rgba(8,16,18,.5))}
.about-badge{position:absolute; z-index:2; left:22px; bottom:22px; background:rgba(10,26,25,.82); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:12px; padding:16px 20px; display:flex; align-items:center; gap:14px}
.about-badge .big{font-family:var(--serif); font-size:30px; font-weight:800; color:var(--gold-soft); line-height:1}
.about-badge .lab{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

/* feature split (image + text, alternating) */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.feature.rev .feature-media{order:2}
.feature-media{position:relative; border-radius:14px; overflow:hidden; min-height:400px; border:1px solid var(--line);
  background:var(--deep2) center/cover no-repeat; box-shadow:0 40px 80px -44px rgba(0,0,0,.9)}
.feature-body{text-align:center}
.feature-body .eyebrow{margin-bottom:14px}

/* raw bar */
.rawbar{background:radial-gradient(120% 80% at 50% -10%, rgba(29,79,74,.4), transparent 60%), var(--deep2)}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px}
.ocard{background:rgba(13,30,29,.6); border:1px solid var(--line); border-radius:14px; padding:34px 30px; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease}
.ocard:hover{transform:translateY(-7px); border-color:rgba(210,168,87,.45); box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.ocard .oi{margin-bottom:20px}
.ocard h3{font-size:23px; color:var(--shell); margin-bottom:10px}
.ocard p{color:var(--muted); font-size:14.5px; font-weight:300; margin:0}
.ocard .price{margin-top:18px; font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:15px}
.raw-feature{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:46px; flex-wrap:wrap;
  background:rgba(210,168,87,.08); border:1px solid rgba(210,168,87,.28); border-radius:999px; padding:16px 34px; max-width:760px; margin-left:auto; margin-right:auto}
.raw-feature b{font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:19px; font-weight:600}
.raw-feature span{color:var(--muted); font-size:14.5px}

/* dish grid (teasers) */
.menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px}
.dish{border-radius:14px; overflow:hidden; background:var(--ink2); border:1px solid var(--line); transition:transform .35s ease, box-shadow .35s ease}
.dish:hover{transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.dish .ph{height:188px; background:var(--deep) center/cover no-repeat; position:relative}
.dish .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(15,31,34,.85))}
.dish .body{padding:22px 24px 26px}
.dish .row{display:flex; justify-content:space-between; align-items:baseline; gap:14px}
.dish h3{font-size:20px; color:var(--shell)}
.dish .pr{font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:18px; white-space:nowrap}
.dish p{color:var(--muted); font-size:14px; font-weight:300; margin:9px 0 0}
.menu-cta{margin-top:48px; text-align:center}

/* full menu (menu page) */
.menu-board{display:grid; grid-template-columns:1fr 1fr; gap:30px 64px; margin-top:8px}
.menu-cat{margin-top:50px; break-inside:avoid}
.menu-cat-head{display:flex; align-items:baseline; gap:14px; margin-bottom:8px}
.menu-cat-head h2,.menu-cat-head h3{font-family:var(--serif); font-size:26px; font-weight:800; color:var(--gold-soft); white-space:nowrap}
.menu-cat-head .rule{flex:1; height:1px; background:var(--line)}
.menu-cat .cat-note{font-size:13.5px; color:var(--muted); font-style:italic; margin:0 0 18px}
.mlist{list-style:none; margin:0; padding:0}
.mitem{padding:15px 0; border-bottom:1px dashed rgba(154,217,203,.14)}
.mitem:last-child{border-bottom:0}
.mitem .mtop{display:flex; align-items:baseline; gap:10px}
.mitem .mname{font-weight:600; color:var(--shell); font-size:16.5px}
.mitem .dots{flex:1; border-bottom:1px dotted rgba(154,217,203,.3); transform:translateY(-4px)}
.mitem .mprice{font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:16px; white-space:nowrap}
.mitem .mdesc{color:var(--muted); font-size:14px; font-weight:300; margin:6px 0 0; max-width:48ch}
.mitem .tagm{display:inline-block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--foam); border:1px solid var(--line); border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:middle}
.menu-note{margin-top:42px; text-align:center; color:var(--muted-dim); font-size:13px; font-style:italic}

/* specials list (happy hour band) */
.hh{position:relative; padding:118px 0; overflow:hidden}
.hh-bg{position:absolute; inset:0; background:var(--ink) var(--img-cocktail) center/cover no-repeat}
.hh-veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,16,18,.92) 0%, rgba(8,16,18,.7) 50%, rgba(8,16,18,.55) 100%)}
.hh-inner{position:relative; z-index:3; max-width:620px}
.hh h2{font-size:clamp(34px,5.4vw,60px); color:var(--shell); margin-bottom:8px}
.hh h2 em{font-style:italic; color:var(--gold-soft); font-weight:600}
.hh-list{list-style:none; padding:0; margin:30px 0 38px; display:grid; gap:14px}
.hh-list li{display:flex; align-items:center; gap:16px; font-size:17px; color:#e3ece9}
.hh-list .k{font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:19px; min-width:84px; font-weight:600}
.hh-list .dotmark{width:7px; height:7px; border-radius:50%; background:var(--foam); flex:0 0 auto}

/* deal cards (happy hour page) */
.deals{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:54px}
.deal{flex:0 1 calc(33.333% - 15px); position:relative; border:1px solid var(--line); border-radius:16px; padding:34px 28px; background:rgba(13,30,29,.55); overflow:hidden; text-align:center}
.deal .dprice{font-family:var(--serif); font-weight:800; font-size:40px; color:var(--gold-soft); line-height:1}
.deal h3{font-size:21px; color:var(--shell); margin:14px 0 8px}
.deal p{color:var(--muted); font-size:14.5px; font-weight:300; margin:0}
.deal .when{margin-top:16px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--foam)}

/* values / info cards */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px}
.vcard{border:1px solid var(--line); border-radius:14px; padding:30px 28px; background:rgba(13,30,29,.45); text-align:center}
.vcard .vi{margin-bottom:16px; color:var(--gold)}
.vcard h3{font-size:20px; color:var(--shell); margin-bottom:9px}
.vcard p{color:var(--muted); font-size:14.5px; font-weight:300; margin:0}

/* timeline */
.timeline{margin-top:50px; max-width:760px; border-left:2px solid var(--line); padding-left:30px}
.tl-item{position:relative; padding:0 0 36px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-39px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(210,168,87,.15)}
.tl-item .yr{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--gold-soft)}
.tl-item h3{font-size:19px; color:var(--shell); margin:4px 0 8px}
.tl-item p{color:var(--muted); font-size:14.5px; font-weight:300; margin:0}

/* gallery */
.gallery{background:var(--ink2)}
.strip{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:48px}
.strip .g{aspect-ratio:3/4; border-radius:11px; background:var(--deep) center/cover no-repeat; border:1px solid var(--line);
  transition:transform .4s ease, filter .4s ease; filter:saturate(.92)}
.strip .g:hover{transform:scale(1.04); filter:saturate(1.08)}

/* reviews */
.reviews{background:linear-gradient(180deg,var(--ink2),var(--ink))}
.rgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:54px}
.rev{background:rgba(13,30,29,.5); border:1px solid var(--line); border-radius:14px; padding:28px 26px; display:flex; flex-direction:column}
.rev p{font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.5; color:var(--shell); margin:0 0 18px; flex:1}
.rev .src{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.rating-badge{display:inline-flex; align-items:center; gap:16px; margin:26px auto 0; padding:14px 26px;
  border:1px solid rgba(210,168,87,.3); border-radius:999px; background:rgba(210,168,87,.07)}
.rating-badge .rnum{font-family:var(--serif); font-weight:800; font-size:30px; color:var(--gold-soft); line-height:1}
.rating-badge .rstars{color:var(--gold); letter-spacing:2px; font-size:16px}
.rating-badge .rcount{font-size:13px; letter-spacing:.04em; color:var(--muted); text-align:left}
.rating-badge .rcount b{display:block; color:var(--shell); font-weight:600; font-size:14px; letter-spacing:0}

/* FAQ (AEO) */
.faq{max-width:820px; margin:48px auto 0}
.faq-item{border:1px solid var(--line); border-radius:12px; margin-bottom:14px; background:rgba(13,30,29,.4); overflow:hidden}
.faq-item[open]{border-color:rgba(210,168,87,.35)}
.faq-item summary{list-style:none; cursor:pointer; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-family:var(--serif); font-weight:700; font-size:18px; color:var(--shell)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{flex:0 0 auto; width:26px; height:26px; position:relative; transition:transform .3s ease}
.faq-item summary .ic::before,.faq-item summary .ic::after{content:""; position:absolute; background:var(--gold); border-radius:2px}
.faq-item summary .ic::before{top:12px; left:5px; right:5px; height:2px}
.faq-item summary .ic::after{left:12px; top:5px; bottom:5px; width:2px; transition:opacity .3s ease}
.faq-item[open] summary .ic::after{opacity:0}
.faq-item .faq-a{padding:0 24px 24px; color:var(--muted); font-weight:300; font-size:15.5px; line-height:1.75}
.faq-item .faq-a p{margin:0 0 12px}
.faq-item .faq-a p:last-child{margin-bottom:0}
.faq-item .faq-a a{color:var(--foam)}

/* contact / reservations */
.visit{background:var(--deep2)}
.visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:stretch}
.hours{list-style:none; padding:0; margin:26px 0 0}
.hours li{display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-size:15.5px}
.hours li .day{color:var(--shell); font-weight:500}
.hours li .tm{color:var(--muted)}
.hours li.today{color:var(--gold-soft)}
.hours li.today .day,.hours li.today .tm{color:var(--gold-soft)}
.hours li.closed .tm{color:var(--muted-dim)}
.visit-info{font-size:15.5px; color:#cdd9d6; margin-top:28px; line-height:1.8}
.visit-info a{color:var(--foam)}
.visit-info a:hover{color:var(--gold-soft)}
.visit-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.map-card{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); min-height:440px;
  display:flex; align-items:flex-end; box-shadow:0 40px 80px -44px rgba(0,0,0,.9);
  background:radial-gradient(80% 60% at 50% 38%, rgba(29,79,74,.55), transparent 70%), linear-gradient(160deg,#0c2422,#081a19);}
.map-grid{position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(154,217,203,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,217,203,.10) 1px, transparent 1px),
    linear-gradient(rgba(210,168,87,.16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(210,168,87,.16) 2px, transparent 2px);
  background-size:34px 34px, 34px 34px, 170px 170px, 170px 170px;}
.map-diag{position:absolute; inset:0; opacity:.4; background:repeating-linear-gradient(58deg, transparent 0 70px, rgba(154,217,203,.10) 70px 72px);}
.map-pin{position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); text-align:center}
.map-pin .pulse{position:absolute; left:50%; top:14px; width:46px; height:46px; margin-left:-23px; border-radius:50%; background:rgba(210,168,87,.3); animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.4);opacity:0}}
.map-pin .lbl{position:relative; margin-top:8px; font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:15px; white-space:nowrap}
.map-meta{position:relative; z-index:3; width:100%; padding:26px 28px; background:linear-gradient(0deg, rgba(8,18,18,.92), rgba(8,18,18,.4) 70%, transparent)}
.map-meta .a{font-family:var(--serif); font-size:21px; color:var(--shell); font-weight:700}
.map-meta .b{font-size:14px; color:var(--muted); margin:4px 0 16px}
.map-meta a.btn{width:100%; justify-content:center}
.map-card .map-grid,.map-card .map-diag,.map-card .map-pin{z-index:0}
.map-iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; display:block; background:#0a2422}
.map-card.has-embed .map-meta{z-index:2; background:linear-gradient(0deg, rgba(8,18,18,.96), rgba(8,18,18,.55) 72%, transparent)}

/* contact cards */
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px}
.ccard{border:1px solid var(--line); border-radius:14px; padding:24px 22px; background:rgba(13,30,29,.45); text-align:center}
.ccard .ci{color:var(--gold); margin-bottom:12px}
.ccard h3{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:var(--sans); font-weight:600; margin-bottom:8px}
.ccard a,.ccard p{color:var(--shell); font-size:15.5px; font-weight:400; margin:0}
.ccard a:hover{color:var(--gold-soft)}

/* form */
.form{margin-top:28px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; background:rgba(8,18,18,.6); border:1px solid var(--line); border-radius:10px;
  color:var(--shell); font-family:var(--sans); font-size:15px; padding:13px 15px; transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.field textarea{min-height:120px; resize:vertical}
.form-note{font-size:12.5px; color:var(--muted-dim); margin-top:8px}
.form-success{display:none; margin-top:18px; padding:16px 20px; border-radius:12px; background:rgba(154,217,203,.1); border:1px solid rgba(154,217,203,.35); color:var(--foam-soft); font-size:15px}
.form-success.show{display:block}

/* CTA band */
.cta-band{position:relative; overflow:hidden; padding:96px 0; text-align:center}
.cta-band-bg{position:absolute; inset:0; background:var(--ink) var(--img-wave) center/cover no-repeat; opacity:.5}
.cta-band-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,16,18,.86), rgba(8,16,18,.78))}
.cta-band-inner{position:relative; z-index:3; max-width:680px; margin:0 auto}
.cta-band h2{font-size:clamp(30px,5vw,52px); color:var(--shell)}
.cta-band h2 em{font-style:italic; color:var(--gold-soft); font-weight:600}
.cta-band p{color:#d4e0dc; font-weight:300; font-size:17px; margin:18px auto 32px; max-width:520px}
.cta-band .hero-cta{justify-content:center}

/* footer */
footer.site-footer{background:var(--ink); border-top:1px solid var(--line); padding:64px 0 34px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; align-items:start}
.foot-brand .name{font-family:var(--serif); font-weight:800; font-size:24px; color:var(--shell)}
.foot-brand p{color:var(--muted); font-size:14.5px; font-weight:300; margin:14px 0 0; max-width:300px}
.foot-col h4,.foot-col .foot-h{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; font-family:var(--sans); font-weight:600}
.foot-col a, .foot-col p{display:block; color:#bccac7; font-size:14.5px; font-weight:300; margin:0 0 10px}
.foot-col a:hover{color:var(--foam)}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted-dim)}
.foot-bottom a{color:var(--muted)}
.foot-bottom a:hover{color:var(--gold-soft)}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .hero-bg{transform:none}
}

/* responsive */
@media(max-width:980px){
  .about-grid,.visit-grid,.feature{grid-template-columns:1fr; gap:38px}
  .feature.rev .feature-media{order:0}
  .trio,.menu-grid,.vgrid{grid-template-columns:1fr 1fr}
    .deal{flex-basis:calc(50% - 11px)}
  .rgrid{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:repeat(3,1fr)}
  .menu-board{grid-template-columns:1fr; gap:0}
  .contact-cards{grid-template-columns:1fr}
}
@media(max-width:720px){
  .nav-links,.nav-phone{display:none}
  .burger{display:flex}
  .brand .name{font-size:17px; white-space:nowrap}
  .brand .sub{font-size:9px; letter-spacing:.18em; white-space:nowrap}
  .brand{gap:10px}
  .nav-cta .btn{padding:11px 18px; font-size:14px}
  .pad{padding:78px 0}
  .pad-sm{padding:60px 0}
  .hero{padding:130px 0 70px}
  .page-hero{padding:150px 0 70px}
  .hero-meta{gap:8px 18px}
  .trio,.menu-grid,.rgrid,.vgrid{grid-template-columns:1fr}
    .deal{flex-basis:100%}
  .strip{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .marquee-track{font-size:14px}
  .hh{padding:84px 0}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr}
}

/* marquee */
.marquee{background:var(--gold); color:#241803; overflow:hidden; padding:13px 0; border-top:2px solid var(--gold-deep); border-bottom:2px solid var(--gold-deep)}
.marquee-track{display:flex; white-space:nowrap; width:max-content; animation:scroll 30s linear infinite; font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.04em}
.marquee-track span{padding:0 26px}
.marquee-track .d{color:var(--brine)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* mobile menu */
.mobile-menu{position:fixed; inset:0; z-index:55; background:rgba(8,18,18,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; pointer-events:none; transition:opacity .3s ease}
.mobile-menu.open{opacity:1; pointer-events:auto}
.mobile-menu a{font-family:var(--serif); font-size:26px; color:var(--shell)}
.mobile-menu a.active{color:var(--gold-soft)}
.mobile-menu a.accent{color:var(--gold-soft); font-style:italic}