:root { --ink:#15201c; --cream:#fbfbf8; --lime:#cfdf66; --orange:#ed6532; --sand:#edf0eb; --muted:#607068; }
* { font-family:Arial,Helvetica,sans-serif; }
body { background:var(--cream); color:var(--ink); }
.announcement { height:35px; background:var(--lime); color:var(--ink); font-size:10px; letter-spacing:1px; font-weight:700; }
header { height:76px; padding:0 7vw; }
.logo { display:block; font-size:19px; line-height:1; letter-spacing:-.8px; font-weight:800; }.brand-logo { display:block; width:154px; height:auto; background:#000; }
.logo span,.logo em { font:inherit; margin:0; letter-spacing:inherit; }.logo em { font-weight:400; margin-left:4px; }
nav { gap:25px; font-size:13px; } nav a { white-space:nowrap; }
.nav-book { padding:10px 15px; border:1px solid rgba(255,255,255,.85); font-size:13px; }.nav-book span { display:none; }
.hero { height:625px; }.hero-content { padding:174px 9vw 0; max-width:720px; }.hero-image { background-position:center; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.9px; margin-bottom:16px; }
.hero h1,h2,.hero h1 i,h2 i { font-family:Arial,Helvetica,sans-serif; font-style:normal; letter-spacing:-3px; font-weight:800; }.hero h1 { font-size:clamp(52px,6.3vw,82px); line-height:.96; }
.hero-copy { max-width:510px; font-size:16px; line-height:1.58; margin:24px 0; }.button { border-radius:2px; font:700 13px Arial,Helvetica,sans-serif; letter-spacing:.1px; padding:15px 19px; text-transform:none; }.hero-note { display:block; font:700 11px Arial,Helvetica,sans-serif; letter-spacing:.4px; bottom:30px; }.hero-stamp { display:none; }
.intro { padding:98px 10vw; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:8vw; }.intro-side { display:none; }.intro-copy { max-width:590px; }.intro-copy h2,.section-heading h2,.steps h2,.booking h2,.locations-preview h2,.faq h2 { font-size:clamp(38px,4.7vw,60px); line-height:1.03; }.intro-copy>p:not(.eyebrow),.section-heading>p:last-child { font-size:16px; line-height:1.6; }.intro-photo { height:320px; margin:0; }
.numbers { background:var(--ink); padding:39px 10vw; }.numbers div { padding:0 4vw; }.numbers strong { font:800 35px Arial,Helvetica,sans-serif; letter-spacing:-1px; }.numbers span { font-size:12px; padding-top:7px; }
.menus { padding:98px 7vw; }.section-heading { margin-bottom:45px; }.menu-grid { gap:16px; }.menu-card { min-height:365px; padding:31px; background:#fff; border:1px solid #e0e4df; }.menu-card.dark { background:var(--ink); }.menu-label,.price,.menu-card a { font-family:Arial,Helvetica,sans-serif; }.menu-label { margin-bottom:50px; font-weight:700; }.menu-card h3 { font:800 30px Arial,Helvetica,sans-serif; letter-spacing:-1px; }.menu-card ul { font-size:13px; }.image-card { border:0; }.pricing-note { margin:24px auto 0; max-width:1180px; color:var(--muted); font-size:13px; text-align:center; }
.steps { padding:94px 10vw; background:var(--sand); column-gap:9vw; }.steps h3 { font:800 22px Arial,Helvetica,sans-serif; letter-spacing:-.5px; }.steps li p { font-size:14px; }.steps>.button { margin-top:35px; }
.locations-preview { display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; padding:100px 10vw; background:#fff; }.locations-preview>div { max-width:610px; }.locations-preview>div>p:not(.eyebrow) { font-size:16px; line-height:1.6; max-width:500px; }.locations-preview ul { list-style:none; margin:28px 0 0; padding:0; border-top:1px solid #cbd2cc; }.locations-preview li { border-bottom:1px solid #cbd2cc; }.locations-preview a { display:flex; justify-content:space-between; padding:19px 0; font-size:18px; font-weight:700; }.locations-preview a span { color:var(--orange); }
.faq { display:grid; grid-template-columns:.85fr 1.15fr; gap:9vw; padding:95px 10vw; }.faq-list { border-top:1px solid #aab4ad; }.faq details { border-bottom:1px solid #aab4ad; padding:19px 0; }.faq summary { display:flex; justify-content:space-between; cursor:pointer; font-size:17px; font-weight:700; list-style:none; }.faq summary::-webkit-details-marker { display:none; }.faq summary span { color:var(--orange); }.faq details[open] summary span { transform:rotate(45deg); }.faq details p { max-width:590px; color:#46534d; font-size:14px; line-height:1.6; margin:13px 28px 2px 0; }
.booking-photo { min-height:700px; }.booking-content { padding:72px 9vw; }.booking-content>p:not(.eyebrow) { font-size:15px; }.booking textarea { display:block; width:100%; resize:vertical; min-height:92px; border:0; border-bottom:1px solid #89908d; background:transparent; color:#fff; padding:11px 0 9px; font:14px Arial,Helvetica,sans-serif; }.booking textarea::placeholder { color:#a3aaa6; }label,input,select { font-family:Arial,Helvetica,sans-serif; }.booking form .button { margin-top:30px; }.form-success { color:var(--lime); font-size:14px; line-height:1.5; }
footer { padding:43px 7vw 20px; }footer p,footer div,footer small { font-family:Arial,Helvetica,sans-serif; }footer div { flex-wrap:wrap; }
body.homepage .announcement { display:none; } body.homepage header { position:relative; height:100px; background:#050505; color:#fff; padding:0 5.8vw; } body.homepage .brand-logo { width:184px; } body.homepage .home-hero { height:620px; background:#080909; } body.homepage .home-hero .hero-image { background-image:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.03) 58%,rgba(0,0,0,.08) 100%),url('assets/gethibachi-hero-fire.png'); background-size:100% 100%,auto 92%; background-position:center,right 3.8vw center; background-repeat:no-repeat; } body.homepage .hero-content { margin:86px 0 0 7.5vw; padding:27px 30px 30px; max-width:490px; background:rgba(4,7,6,.72); border:1px solid rgba(255,255,255,.15); box-shadow:0 14px 42px rgba(0,0,0,.28); backdrop-filter:blur(5px); } body.homepage .hero h1 { font-size:clamp(43px,4.7vw,62px); line-height:1.02; letter-spacing:-2px; } body.homepage .hero-copy { font-size:17px; line-height:1.5; max-width:385px; margin:18px 0 22px; } body.homepage .button-light { background:#df2b1d; color:#fff; } body.homepage .hero-note { display:none; }
@media(max-width:800px) { header { padding:0 7vw; } .hero { height:590px; }.hero-content { padding:150px 7vw 0; }.intro { grid-template-columns:1fr; padding:74px 7vw; gap:36px; }.intro-photo { height:270px; }.numbers { padding:30px 7vw; }.menus { padding:74px 7vw; }.steps,.faq { padding:74px 7vw; }.locations-preview { grid-template-columns:1fr; gap:24px; padding:74px 7vw; }.faq { grid-template-columns:1fr; gap:32px; }.booking-content { padding:62px 7vw; }.booking-photo { min-height:350px; } }
@media(max-width:800px) { body.homepage header { height:82px; padding:0 7vw; } body.homepage .brand-logo { width:142px; } body.homepage .home-hero { height:570px; } body.homepage .home-hero .hero-image { background-image:linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.06) 100%),url('assets/gethibachi-hero-fire.png'); background-size:100% 100%,100% auto; background-position:center,center bottom 20px; } body.homepage .hero-content { position:absolute; top:18px; left:6vw; right:6vw; margin:0; padding:0; max-width:none; display:flex; align-items:center; justify-content:space-between; gap:14px; background:transparent; border:0; box-shadow:none; } body.homepage .hero-content .eyebrow,body.homepage .hero-copy { display:none; } body.homepage .hero h1 { margin:0; max-width:190px; font-size:29px; line-height:1; letter-spacing:-1.2px; color:rgba(255,255,255,.78); } body.homepage .hero-content .button { flex:0 0 auto; padding:11px 12px; font-size:11px; background:rgba(223,43,29,.88); } }
@media(max-width:430px) { .hero h1 { font-size:51px; }.hero-copy { font-size:15px; }.hero-note { bottom:22px; font-size:10px; }.form-row { grid-template-columns:1fr; gap:0; }.locations-preview a { font-size:16px; } }