/* HUSH MODERN RESTAURANT — sushi dark + orange vif */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --h-dark: #1a1a1a;
    --h-dark-soft: #252525;
    --h-orange: #ff5e3a;
    --h-orange-dark: #e54a26;
    --h-white: #ffffff;
    --h-cream: #faf8f5;
    --h-text-mute: #8a8a8a;
    --h-line: rgba(255,255,255,.08);
    --h-font-display: 'Caveat', cursive;
    --h-font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--h-dark); color: var(--h-white); font-family: var(--h-font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .25s ease; }
button { background: 0; border: 0; cursor: pointer; font: inherit; color: inherit; }

/* HEADER */
.h-header { background: var(--h-dark); padding: 1.25rem 2.5rem; border-bottom: 1px solid var(--h-line); position: sticky; top: 0; z-index: 100; }
.h-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto; gap: 2rem; }
.h-logo { font-family: var(--h-font-display); font-size: 1.85rem; color: var(--h-white); font-weight: 600; }
.h-nav ul { display: flex; gap: 1.85rem; list-style: none; }
.h-nav a { font-size: .82rem; color: rgba(255,255,255,.7); font-weight: 500; transition: color .2s; }
.h-nav a:hover, .h-nav a.is-active { color: var(--h-white); }

/* BUTTONS */
.h-btn { display: inline-flex; align-items: center; padding: .75rem 1.5rem; font-size: .82rem; font-weight: 600; border-radius: 6px; transition: all .25s ease; cursor: pointer; border: 0; }
.h-btn--orange { background: var(--h-orange); color: var(--h-white); }
.h-btn--orange:hover { background: var(--h-orange-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,94,58,.3); }
.h-btn--lg { padding: 1rem 2rem; font-size: .9rem; }

.h-eyebrow { display: inline-block; font-family: var(--h-font-display); font-size: 1.25rem; color: var(--h-orange); margin-bottom: .5rem; font-weight: 600; }
.h-eyebrow--light { color: var(--h-orange); }

.h-section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--h-dark); margin-bottom: 1rem; letter-spacing: -.02em; }
.h-section-title--light { color: var(--h-white); }
.h-link { display: inline-block; color: var(--h-orange); font-size: .82rem; font-weight: 600; padding-top: .5rem; }

/* HERO */
.h-hero { position: relative; background: var(--h-dark); padding: 3rem 2.5rem 0; overflow: hidden; }
.h-hero__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; padding-bottom: 6rem; }
.h-hero__title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.05; color: var(--h-white); margin-bottom: 1.5rem; letter-spacing: -.02em; }
.h-hero__lead { color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.7; max-width: 480px; margin-bottom: 2rem; }
.h-hero__plate { aspect-ratio: 1; max-width: 540px; margin-left: auto; }
.h-hero__plate img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.h-hero__plate-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--h-orange) 0%, var(--h-dark-soft) 100%); border-radius: 12px; }
.h-hero__wave { position: absolute; bottom: -1px; left: 0; right: 0; width: 100%; height: 80px; }
@media (max-width: 800px) { .h-hero__inner { grid-template-columns: 1fr; } }

/* BEST MENU (light) */
.h-bestmenu { background: var(--h-white); padding: clamp(3rem, 6vw, 5rem) 2.5rem; color: var(--h-dark); }
.h-bestmenu__inner { max-width: 1300px; margin: 0 auto; }
.h-bestmenu__head { text-align: center; margin-bottom: 3rem; }
.h-bestmenu__lead { color: var(--h-text-mute); }
.h-bestmenu__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.25rem; }
.h-bestmenu__photo { aspect-ratio: 4/5; overflow: hidden; border-radius: 12px; background: var(--h-cream); }
.h-bestmenu__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-bestmenu__card { background: var(--h-white); border: 1px solid #eee; border-radius: 14px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,.04); display: flex; flex-direction: column; justify-content: space-between; }
.h-bestmenu__card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.h-bestmenu__card p { color: var(--h-text-mute); font-size: .88rem; line-height: 1.6; flex: 1; }
@media (max-width: 900px) { .h-bestmenu__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .h-bestmenu__grid { grid-template-columns: 1fr; } }

/* OUR MENU (dark) */
.h-ourmenu { background: var(--h-dark); padding: clamp(3rem, 6vw, 5rem) 2.5rem; }
.h-ourmenu__inner { max-width: 1300px; margin: 0 auto; }
.h-ourmenu__head { text-align: center; margin-bottom: 3rem; }
.h-ourmenu__head .h-section-title { color: var(--h-white); }
.h-ourmenu__grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr; gap: 1.25rem; align-items: center; }
.h-ourmenu__card { background: var(--h-white); padding: 1.75rem 1.5rem; border-radius: 14px; color: var(--h-dark); }
.h-ourmenu__card h3 { font-size: 1rem; margin: .5rem 0; }
.h-ourmenu__card p { color: var(--h-text-mute); font-size: .85rem; line-height: 1.55; }
.h-ourmenu__icon { display: inline-block; width: 40px; height: 40px; background: rgba(255,94,58,.12); border-radius: 8px; line-height: 40px; text-align: center; font-size: 1.2rem; }
.h-ourmenu__center { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--h-dark-soft); }
.h-ourmenu__center img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .h-ourmenu__grid { grid-template-columns: 1fr 1fr; } .h-ourmenu__center { grid-column: span 2; aspect-ratio: 16/9; } }

/* MAKE (dark split) */
.h-make { background: var(--h-dark); padding: clamp(3rem, 6vw, 5rem) 2.5rem; border-top: 1px solid var(--h-line); }
.h-make__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.h-make__text p { color: rgba(255,255,255,.7); margin: 1.5rem 0 2rem; line-height: 1.7; }
.h-make__visual { aspect-ratio: 1; max-width: 480px; }
.h-make__visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
@media (max-width: 800px) { .h-make__inner { grid-template-columns: 1fr; } }

/* TABS */
.h-tabs { background: var(--h-white); padding: 2rem 2.5rem; }
.h-tabs__inner { max-width: 700px; margin: 0 auto; }
.h-tabs__pills { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; padding: .75rem; background: var(--h-cream); border-radius: 999px; }
.h-tabs__pill { padding: .85rem 1.85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--h-dark); background: transparent; transition: all .25s; }
.h-tabs__pill:hover { background: rgba(0,0,0,.04); }
.h-tabs__pill.is-active { background: var(--h-orange); color: var(--h-white); box-shadow: 0 6px 16px rgba(255,94,58,.3); }

/* CONTACT (light) */
.h-contact { background: var(--h-white); color: var(--h-dark); padding: clamp(3rem, 6vw, 5rem) 2.5rem; }
.h-contact__inner { max-width: 1300px; margin: 0 auto; }
.h-contact__head { text-align: center; margin-bottom: 3rem; }
.h-contact__head p { color: var(--h-text-mute); }
.h-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.h-contact__col h3 { font-size: 1.1rem; margin-bottom: 1.25rem; font-weight: 700; }
.h-contact__photo { aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; margin-bottom: 1.5rem; background: var(--h-cream); }
.h-contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-contact__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.h-contact__list li { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--h-cream); border-radius: 12px; font-size: .9rem; }
.h-contact__list li > span:nth-child(2) { flex: 1; }
.h-contact__bullet { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.h-contact__bullet--1 { background: #ff5e3a; }
.h-contact__bullet--2 { background: #4caf50; }
.h-contact__bullet--3 { background: #ffc107; }
.h-contact__bullet--4 { background: #2196f3; }
.h-contact__bullet--5 { background: #9c27b0; }
.h-contact__arrow { color: var(--h-text-mute); }
.h-contact__col .h-btn { margin-top: 1.5rem; }
@media (max-width: 800px) { .h-contact__grid { grid-template-columns: 1fr; } }

/* FOOTER */
.h-footer { background: var(--h-dark); color: rgba(255,255,255,.65); padding: 3rem 2.5rem 1.5rem; border-top: 1px solid var(--h-line); }
.h-footer__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.h-footer__brand { font-family: var(--h-font-display); font-size: 1.85rem; color: var(--h-orange); margin-bottom: .75rem; }
.h-footer h5 { color: var(--h-white); font-size: .85rem; margin-bottom: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.h-footer p { font-size: .9rem; line-height: 1.7; }
.h-footer__bottom { border-top: 1px solid var(--h-line); padding-top: 1.5rem; text-align: center; font-size: .82rem; color: rgba(255,255,255,.4); }
@media (max-width: 700px) { .h-footer__inner { grid-template-columns: 1fr; } }

.preview-banner { background: var(--h-orange); color: #fff; text-align: center; padding: .5rem; font-weight: 600; font-size: .82rem; }
[x-cloak] { display: none !important; }