// OTA NOW Resort Hotel — Banquet & Meetings (宴会・会議室)
// Same editorial system as the main site. Honest: no fabricated capacities/photos.
// Layout diagrams are drawn (SVG); ambiance photos are the real exterior/lounge.

const IMG = (typeof window !== 'undefined' && window.__IMG_BASE) || 'images';
// Standalone-bundle resolver: blob URLs when inlined, else normal paths.
const RES = (typeof window !== 'undefined' && window.__resources) || {};
const L = (f) => RES[f] || `${IMG}/${f}`;
const CDN = 'https://cdn.r-corona.jp/prd.jln.r-corona.jp/assets/site_files/6s8l8evh';
const RES_URL = 'index.html#tripla-slot'; // ホームの予約バー（tripla）へ誘導

const HOTEL = {
  nameJa:'太田ナウリゾートホテル', addr:'〒373-0851 群馬県太田市飯田町1267',
  tel:'0276-49-2111', fax:'0276-50-1171', access:'東武伊勢崎線 太田駅 南口より徒歩5分',
};

const NAV = [
  { ja:'トップ',        en:'Top',      href:'index.html' },
  { ja:'客室',          en:'Rooms',    href:'index.html#rooms' },
  { ja:'サウナスイート', en:'Sauna',    href:'sauna.html' },
  { ja:'朝食',          en:'Breakfast',href:'index.html#breakfast' },
  { ja:'館内・施設',    en:'Facility', href:'index.html#facility' },
  { ja:'宴会・会議',    en:'Banquet',  href:'#top' },
  { ja:'宿泊プラン',    en:'Plans',    href:'index.html#plans' },
  { ja:'アクセス',      en:'Access',   href:'index.html#access' },
];

// Use-cases
const USES = [
  { en:'Meeting', ja:'会議・研修',     d:'駅徒歩5分。日帰り会議から泊まり込みの研修合宿まで。プロジェクター・Wi-Fi完備。' },
  { en:'Banquet', ja:'会食・宴会',     d:'歓送迎会、忘年会・新年会、懇親会に。着席のコースから立食パーティーまで。' },
  { en:'Memorial',ja:'同窓会・法要',   d:'同窓会、ご法要やお斎（とき）の席にも。落ち着いた空間でお集まりいただけます。' },
  { en:'Private', ja:'記念日・顔合わせ',d:'ご結納・両家顔合わせ、誕生日や記念日のお食事会など、少人数の特別な席に。' },
];

// Seating layouts (drawn, not photographed). Capacity intentionally left to inquiry.
const LAYOUTS = [
  { key:'theater',  en:'Theater', ja:'シアター形式',   d:'前方に向け椅子のみを並べる、説明会・講演向け。' },
  { key:'school',   en:'School',  ja:'スクール形式',   d:'長机＋椅子。研修・セミナーなど書き物を伴う会に。' },
  { key:'banquet',  en:'Banquet', ja:'円卓・着席',     d:'円卓を囲む着席スタイル。会食・宴会の定番。' },
  { key:'ushape',   en:'U-shape', ja:'ロの字・コの字', d:'対面で議論する会議・役員会に。' },
  { key:'buffet',   en:'Buffet',  ja:'立食',           d:'歓談中心のパーティー。多人数の懇親会に。' },
];

// Catering
const CATERING = [
  { t:'会席・コース',   d:'お集まりの趣旨に合わせた、着席のお食事。' },
  { t:'オードブル',     d:'立食・歓談向けの取り分けスタイル。' },
  { t:'お弁当・仕出し', d:'会議・研修の昼食に。お席までお届けします。' },
  { t:'お飲み物',       d:'ビール・ソフトドリンクの飲み放題もご用意。' },
];

// Equipment
const EQUIP = [
  { ic:'projector', t:'プロジェクター\n＆スクリーン' },
  { ic:'mic',       t:'マイク・音響' },
  { ic:'board',     t:'ホワイトボード' },
  { ic:'wifi',      t:'高速 Wi-Fi' },
  { ic:'host',      t:'司会・進行\nサポート' },
  { ic:'parking',   t:'提携駐車場' },
];

// === ICONS =================================================================
const Icon = ({name}) => {
  const p = {fill:'none', stroke:'currentColor', strokeWidth:1.4, strokeLinecap:'round', strokeLinejoin:'round'};
  const g = {
    projector:<g {...p}><rect x="3" y="7" width="18" height="10" rx="2"/><circle cx="10" cy="12" r="3"/><path d="M17 11h.01"/></g>,
    mic:      <g {...p}><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4M9 21h6"/></g>,
    board:    <g {...p}><rect x="3" y="4" width="18" height="12" rx="1.5"/><path d="M8 20l2-4M16 20l-2-4M12 16v4"/><path d="M7 9h6M7 12h4"/></g>,
    wifi:     <g {...p}><path d="M2 9.5a15 15 0 0 1 20 0M5 13a10 10 0 0 1 14 0M8 16.5a5 5 0 0 1 8 0"/><circle cx="12" cy="20" r=".6" fill="currentColor"/></g>,
    host:     <g {...p}><circle cx="12" cy="8" r="3.2"/><path d="M5.5 20a6.5 6.5 0 0 1 13 0"/></g>,
    parking:  <g {...p}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 17V8h3.5a2.5 2.5 0 0 1 0 5H9"/></g>,
  };
  return <svg viewBox="0 0 24 24" width="34" height="34" aria-hidden="true">{g[name]}</svg>;
};

// Seating layout diagrams (simple, geometric — not fake photos)
const Layout = ({type}) => {
  const dot = (x,y,k) => <circle key={k} cx={x} cy={y} r="3.4" fill="currentColor" />;
  const seat = (x,y,k) => <rect key={k} x={x-3.5} y={y-3.5} width="7" height="7" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.4" />;
  const els = [];
  if (type==='theater'){
    for(let r=0;r<3;r++) for(let c=0;c<6;c++) els.push(dot(22+c*16, 40+r*16, `t${r}${c}`));
    els.push(<rect key="st" x="34" y="14" width="52" height="8" rx="1" fill="currentColor" opacity=".35"/>);
  } else if (type==='school'){
    for(let r=0;r<3;r++){ els.push(<rect key={`d${r}`} x="24" y={36+r*18} width="72" height="6" rx="1" fill="currentColor" opacity=".3"/>);
      for(let c=0;c<4;c++) els.push(dot(33+c*20, 32+r*18, `s${r}${c}`)); }
    els.push(<rect key="st" x="38" y="14" width="44" height="7" rx="1" fill="currentColor" opacity=".35"/>);
  } else if (type==='banquet'){
    const tables=[[40,42],[80,42],[40,82],[80,82]];
    tables.forEach((t,i)=>{ els.push(<circle key={`c${i}`} cx={t[0]} cy={t[1]} r="13" fill="none" stroke="currentColor" strokeWidth="1.4" opacity=".5"/>);
      for(let a=0;a<6;a++){ const ang=a/6*Math.PI*2; els.push(dot(t[0]+Math.cos(ang)*20, t[1]+Math.sin(ang)*20, `b${i}${a}`)); } });
  } else if (type==='ushape'){
    const pts=[];
    for(let c=0;c<6;c++) pts.push([26+c*14,30]);
    for(let r=1;r<4;r++){ pts.push([26,30+r*16]); pts.push([96,30+r*16]); }
    els.push(<path key="u" d="M22 24 H100 V92 M22 24 V92" fill="none" stroke="currentColor" strokeWidth="6" opacity=".25" strokeLinejoin="round"/>);
    pts.forEach((q,i)=>els.push(seat(q[0],q[1],`u${i}`)));
  } else if (type==='buffet'){
    els.push(<rect key="bt" x="46" y="50" width="28" height="20" rx="2" fill="currentColor" opacity=".3"/>);
    const ring=[[24,30],[44,22],[72,22],[96,32],[26,64],[20,46],[100,56],[96,80],[64,92],[36,90]];
    ring.forEach((q,i)=>els.push(dot(q[0],q[1],`f${i}`)));
  }
  return <svg viewBox="0 0 120 110" className="lo-svg">{els}</svg>;
};

// === SHARED ================================================================
const OHead = ({num, en, ja, title, lead, light}) => (
  <div className={`oh ${light?'oh-light':''}`}>
    <div className="oh-kicker">
      {num && <span className="oh-num">№ {num}</span>}
      {ja && <span className="oh-ja">{ja}</span>}
    </div>
    {en && <h2 className="oh-en">{en}</h2>}
    {title && <div className="oh-title">{title}</div>}
    {lead && <p className="oh-lead">{lead}</p>}
  </div>
);

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  return (
  <nav className={`nav ${open ? 'open' : ''}`}>
    <a className="brand" href="index.html">
      <strong>OTA <em>now</em></strong>
      <span className="brand-tag">Resort Hotel — Ota, Gunma</span>
    </a>
    <ul className={open ? 'open' : ''}>
      {NAV.map((n,i)=>(
        <li key={i}><a href={n.href} className={n.en==='Banquet'?'on':''} onClick={()=>setOpen(false)}><span className="nl-en">{n.en}</span>{n.ja}</a></li>
      ))}
    </ul>
    <div className="nav-right">
      <span className="lang">JP / EN</span>
      <a href={RES_URL} className="res">ご予約</a>
      <button className="nav-burger" onClick={()=>setOpen(o=>!o)} aria-label="メニュー">{open ? '✕' : '☰'}</button>
    </div>
  </nav>
  );
};

const Hero = () => (
  <header className="hero" id="top">
    <img className="hero-img" src={L('exterior.jpg')} alt="太田ナウリゾートホテル" />
    <div className="hero-grad"></div>
    <div className="hero-frame"></div>
    <div className="hero-coverlines">
      <span>Banquet &amp; Meetings</span><span>太田駅 徒歩 5 分</span><span>2 — 着席 / 立食</span>
    </div>
    <div className="hero-center">
      <div className="hc-eyebrow">Banquet · Meetings · Memorials</div>
      <h1>Gather<br/><em>here.</em></h1>
      <div className="hc-jp">宴 会 ・ 会 議 ・ ご 会 食</div>
    </div>
    <div className="hero-scroll"><span>Scroll to explore</span></div>
  </header>
);

const Intro = () => (
  <section className="intro">
    <div className="oh-kicker oh-c"><span className="oh-en sm">Feature</span><span className="oh-ja">特集 — はじめに</span></div>
    <h2 className="intro-h">人が集まる夜を、<br/>駅前の上質な空間で。</h2>
    <p className="intro-p">太田駅 南口より徒歩5分。会議・研修から、歓送迎会や懇親会、同窓会、ご法要、ご結納まで——人が集まるあらゆる席を、宿泊と一体でおもてなしします。遠方からのお客さまは、そのままご宿泊いただける利便性も魅力です。</p>
    <div className="intro-facts">
      <div><span>Access</span>太田駅 徒歩 5 分</div>
      <div><span>Style</span>着席 / 立食 / 会議</div>
      <div><span>With</span>ご宿泊と一体手配</div>
      <div><span>Contact</span>{HOTEL.tel}</div>
    </div>
  </section>
);

const UsesSection = () => (
  <section className="usesband">
    <OHead num="01" en="Occasions" ja="ご利用シーン"
      title="どんな集まりにも、ちょうどいい。"
      lead="ビジネスからプライベートまで。目的に合わせて、お部屋・レイアウト・お料理をご提案します。" />
    <div className="uses">
      {USES.map((u,i)=>(
        <div className="uc" key={i}>
          <div className="uc-no">№ {String(i+1).padStart(2,'0')}</div>
          <div className="uc-en">{u.en}</div>
          <h3>{u.ja}</h3>
          <p>{u.d}</p>
        </div>
      ))}
    </div>
  </section>
);

const VENUES = [
  { floor:'2F', name:'プリズム',  cap:'150', note:'立食' },
  { floor:'3F', name:'ノーブル',  cap:'250', note:'立食' },
  { floor:'2F', name:'チェリー',  cap:'60',  note:'立食' },
  { floor:'3F', name:'ライラック', cap:'30', note:'立食' },
  { floor:'3F', name:'ドリーム / ホープ', cap:'80', note:'立食' },
  { floor:'4F', name:'アゼリア / コスモス / アイリス', cap:'30', note:'立食' },
];

const VenuesSection = () => (
  <section className="venuesband">
    <OHead num="02" en="Venues" ja="会場一覧"
      title="最大250名の大宴会場から、30名の小会場まで。"
      lead="ご宴会は、用途と人数に合わせて会場をお選びいただけます。ご会議・研修は最大270名（シアター）まで対応し、会議室専用の高速インターネット回線（1Gbps）も完備しています。" />
    <div className="venues">
      {VENUES.map((v,i)=>(
        <div className="ve" key={i}>
          <div className="ve-fl">{v.floor}</div>
          <div className="ve-nm">{v.name}</div>
          <div className="ve-cap">最大 <b>{v.cap}</b> 名<span>{v.note}</span></div>
        </div>
      ))}
    </div>
    <div className="note">※ 上記はご宴会（立食）時の目安人数です。着席・スクール・シアター等、形式により定員は異なります。詳しい会場・お料金は、ご希望の形式・人数をお伺いのうえご案内します。</div>
  </section>
);

const LayoutsSection = () => (
  <section>
    <OHead num="03" en="Layouts" ja="レイアウト"
      title="席のかたちは、自由に。"
      lead="ご人数と目的に応じて、レイアウトを組み替えます。下記は代表的なスタイルです。" />
    <div className="layouts">
      {LAYOUTS.map((l,i)=>(
        <div className="lc" key={i}>
          <div className="lo"><Layout type={l.key} /></div>
          <div className="lc-en">{l.en}</div>
          <div className="lc-ja">{l.ja}</div>
          <p>{l.d}</p>
        </div>
      ))}
    </div>
    <div className="note">※ お部屋の広さ・最大収容人数など詳細は、ご希望の形式・人数をお伺いのうえご案内します。お気軽にお問い合わせください。</div>
  </section>
);

const CateringSection = () => (
  <section className="catering">
    <OHead num="04" en="Catering" ja="お料理・お飲み物" light
      title="席にあわせて、料理を仕立てる。"
      lead="着席のコースから、立食のオードブル、会議のお弁当まで。ご予算に合わせてご相談ください。" />
    <div className="cat">
      {CATERING.map((c,i)=>(
        <div className="ct" key={i}>
          <div className="ct-k">№ {String(i+1).padStart(2,'0')}</div>
          <div>
            <div className="ct-t">{c.t}</div>
            <div className="ct-d">{c.d}</div>
          </div>
        </div>
      ))}
    </div>
  </section>
);

const EquipSection = () => (
  <section>
    <OHead num="05" en="Equipment" ja="設備・備品"
      title="必要なものは、ひと通り。"
      lead="プロジェクターやマイク、Wi-Fiなど、会の進行に必要な設備をご用意しています。" />
    <div className="equip">
      {EQUIP.map((e,i)=>(
        <div className="eq" key={i}>
          <Icon name={e.ic} />
          <div className="eq-t">{e.t.split('\n').map((l,j)=>(<span key={j}>{l}<br/></span>))}</div>
        </div>
      ))}
    </div>
  </section>
);

const StayCta = () => (
  <section className="staycta">
    <div className="sc-inner">
      <div className="sc-left">
        <div className="oh-kicker"><span className="oh-en sm">With stay</span><span className="oh-ja">ご宿泊と一緒に</span></div>
        <h3>遠方のゲストは、<br/>そのままお泊まりに。</h3>
        <p>全77室のご宿泊と一体でご手配いただけます。二次会やご歓談のあとも、移動なくお部屋へ。幹事様の負担を軽くします。</p>
        <a className="morebtn" href="index.html#rooms"><span>客室を見る</span><i>→</i></a>
      </div>
      <div className="sc-img"><img src={L('western-suite-night.jpg')} alt="客室" /></div>
    </div>
  </section>
);

const Inquiry = () => (
  <section className="inquiry" id="contact">
    <OHead en="Inquiry" ja="お問い合わせ"
      title="まずは、ご相談ください。"
      lead="ご利用日・おおよその人数・ご予算をお伺いし、最適なプランをご提案します。" />
    <div className="iq">
      <a className="iq-tel" href={`tel:${HOTEL.tel.replace(/-/g,'')}`}>
        <span className="iq-k">Tel — お電話で</span>
        <span className="iq-v">{HOTEL.tel}</span>
        <span className="iq-s">受付 9:00 – 20:00 / 宴会・会議のご相談</span>
      </a>
      <a className="iq-form" href={RES_URL}>
        <span className="iq-k">Form — フォームで</span>
        <span className="iq-v">お問い合わせフォーム <i>→</i></span>
        <span className="iq-s">24時間受付・翌営業日までにご返信</span>
      </a>
    </div>
    <div className="iq-info">
      <div><span>Hotel</span>{HOTEL.nameJa}</div>
      <div><span>Address</span>{HOTEL.addr}</div>
      <div><span>Access</span>{HOTEL.access}</div>
      <div><span>Fax</span>{HOTEL.fax}</div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="f-cta">
      <div className="oh-kicker oh-c"><span className="oh-en sm">Banquet &amp; Meetings</span><span className="oh-ja">宴会・会議のご相談</span></div>
      <h4>Let's <em>gather.</em></h4>
      <a className="f-resbtn" href="#contact">お問い合わせ <i>→</i></a>
    </div>
    <div className="f-top">
      <div className="f-brand">
        <strong>OTA <em>now</em></strong>
        <div className="ja">大人の街・太田で、ととのう非日常を。</div>
        <div className="f-addr">{HOTEL.addr}<br/>TEL {HOTEL.tel} ／ FAX {HOTEL.fax}</div>
      </div>
      <div className="col">
        <h5>Stay</h5>
        <a href="index.html#rooms">客室一覧</a><a href="index.html#sauna">サウナスイート</a><a href="index.html#plans">宿泊プラン</a>
      </div>
      <div className="col">
        <h5>Event</h5>
        <a href="#top">宴会・会議</a><a href="#contact">お問い合わせ</a><a href="index.html#access">アクセス</a>
      </div>
      <div className="col">
        <h5>Reserve</h5>
        <a href={RES_URL}>空室検索</a><a href="reservation-update.html">予約確認・キャンセル</a>
      </div>
    </div>
    <div className="f-bot">
      <span>© {new Date().getFullYear()} 太田ナウリゾートホテル</span>
      <span>Ota · Gunma — JP</span>
      <span>宿泊約款 · プライバシーポリシー</span>
    </div>
  </footer>
);

// === ESTIMATE CALCULATOR — 料金は館内資料（ご宴会プラン）に準拠 ======
const COURSES = [
  { id:'casual', ja:'カジュアルコース',   en:'Casual',   price:4500, dishes:'計5品', d:'サラダ（or前菜）・魚料理・肉料理・お食事（巻き寿司）・デザート' },
  { id:'std',    ja:'スタンダードコース', en:'Standard', price:5500, dishes:'計5品', d:'サラダ（or前菜）・魚料理・肉料理・お食事（握り寿司）・デザート' },
  { id:'prm',    ja:'プレミアムコース',   en:'Premium',  price:6500, dishes:'計6品', d:'オードブル・点心3種・魚料理・肉料理（ローストビーフ）・お食事（握り寿司）・デザート' },
];
const DRINKS = [
  { id:'none', ja:'なし',     price:0 },
  { id:'free', ja:'飲み放題', price:2000, note:'税込' },
];
const yen = n => '¥' + n.toLocaleString('ja-JP');

const Calculator = () => {
  const [guests, setGuests] = React.useState(20);
  const [course, setCourse] = React.useState('std');   // 中間（スタンダード）を初期選択
  const [drink, setDrink]   = React.useState('free');  // 飲み放題を初期選択

  const c = COURSES.find(x=>x.id===course);
  const dk = DRINKS.find(x=>x.id===drink);
  const perPerson = c.price + dk.price;
  const total = perPerson * guests;

  // upsell: next course up
  const idx = COURSES.findIndex(x=>x.id===course);
  const upCourse = idx < COURSES.length-1 ? COURSES[idx+1] : null;

  return (
    <section className="calc" id="estimate">
      <OHead num="06" en="Estimate" ja="かんたんお見積り"
        title="その場で、概算がわかる。"
        lead="人数とコースを選ぶだけ。1名あたりの料金とともに、特典もご確認いただけます。" />

      <div className="cl">
        <div className="cl-controls">
          {/* guests */}
          <div className="cl-block">
            <div className="cl-label">ご人数<span>Guests</span></div>
            <div className="cl-guests">
              <button onClick={()=>setGuests(g=>Math.max(2,g-1))} aria-label="減らす">–</button>
              <div className="cl-gnum">{guests}<small>名</small></div>
              <button onClick={()=>setGuests(g=>Math.min(250,g+1))} aria-label="増やす">+</button>
            </div>
            <input type="range" min="2" max="250" value={guests} onChange={e=>setGuests(+e.target.value)} className="cl-range" />
          </div>

          {/* course */}
          <div className="cl-block">
            <div className="cl-label">お料理コース<span>Course / 1名</span></div>
            <div className="cl-courses">
              {COURSES.map(o=>(
                <button key={o.id} className={`cc cc-${o.id} ${course===o.id?'on':''}`} onClick={()=>setCourse(o.id)}>
                  {o.rec && <span className="cc-rec">人気 No.1</span>}
                  <span className="cc-ja">{o.ja}</span>
                  <span className="cc-p">{yen(o.price)}</span>
                  <span className="cc-dish">{o.dishes}</span>
                  <span className="cc-d">{o.d}</span>
                </button>
              ))}
            </div>
          </div>

          {/* drinks */}
          <div className="cl-block">
            <div className="cl-label">お飲み物<span>Drinks / 1名</span></div>
            <div className="cl-drinks">
              {DRINKS.map(o=>(
                <button key={o.id} className={`dk ${drink===o.id?'on':''}`} onClick={()=>setDrink(o.id)}>
                  <span className="dk-ja">{o.ja}{o.rec && <em>幹事人気</em>}</span>
                  <span className="dk-p">{o.price?('+'+yen(o.price)):'—'}{o.note && <small>{o.note}</small>}</span>
                </button>
              ))}
            </div>
            <div className="cl-hint">※ 飲み放題はお一人様 ¥2,000（税込）です。</div>
          </div>
        </div>

        {/* summary */}
        <aside className="cl-summary">
          <div className="cs-top">
            <div className="cs-k">1名あたり</div>
            <div className="cs-per">{yen(perPerson)}<small>(税込)</small></div>
            <div className="cs-break">{c.ja} {yen(c.price)}{dk.price?` + ${dk.ja} ${yen(dk.price)}`:''}</div>
          </div>
          <div className="cs-total">
            <div className="cs-tk">合計概算 <span>{guests}名</span></div>
            <div className="cs-tv">{yen(total)}</div>
          </div>

          {upCourse && (
            <button className="cs-up" onClick={()=>setCourse(upCourse.id)}>
              <span className="cs-up-k">＋{yen(upCourse.price - c.price)}/名 で</span>
              <span className="cs-up-v">「{upCourse.ja}」へ — {upCourse.dishes}</span>
              <i>グレードアップ →</i>
            </button>
          )}

          <a className="cs-cta" href="#contact">この内容で相談する <i>→</i></a>
          <div className="cs-note">表示はお料理・お飲み物の概算（税込）です。会場のご料金・空き状況を含む正式なお見積りはお問い合わせください。</div>
        </aside>
      </div>
    </section>
  );
};


const MobileCTA = () => (
  <div className="mcta" role="navigation" aria-label="予約">
    <a className="mcta-tel" href="tel:0276-49-2111" aria-label="電話で予約・相談">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3A19.5 19.5 0 0 1 5.2 13 19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z"></path></svg>
      <span>電話</span>
    </a>
    <a className="mcta-res" href="#contact">見積り・空きを相談 <i>→</i></a>
  </div>
);

const App = () => (
  <div className="va">
    <style>{css}</style>
    <Nav /><Hero /><Intro /><UsesSection /><VenuesSection /><LayoutsSection />
    <CateringSection /><EquipSection /><Calculator /><StayCta /><Inquiry /><Footer /><MobileCTA />
  </div>
);

const css = `
  .va{font-family:'Noto Sans JP',system-ui,sans-serif;background:var(--paper);color:var(--ink);
      --paper:#F7F3EC;--paper2:#EFE9DD;--ink:#1C1A17;--rule:rgba(28,26,23,.13);--muted:#8A8378;
      --accent:#B68A53;--gold:#E0B274;--dark:#13110F;max-width:1440px;margin:0 auto;position:relative;overflow-x:clip}
  .va a{color:inherit;text-decoration:none}

  /* MOBILE FIXED BOTTOM CTA */
  .va .mcta{display:none}
  @media(max-width:640px){
    .va .mcta{position:fixed;left:0;right:0;bottom:0;z-index:85;display:grid;grid-template-columns:92px 1fr;gap:10px;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
      background:rgba(19,17,15,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(224,178,116,.3)}
    .va .mcta a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px}
    .va .mcta-tel{border:1px solid #F7F3EC59;color:#F7F3EC;font-family:'Shippori Mincho',serif;font-size:13px}
    .va .mcta-res{background:var(--gold);color:#1F1B16;font-family:'Shippori Mincho',serif;font-weight:600;font-size:14px;letter-spacing:.04em}
    .va .mcta-res i{font-style:normal}
    .va{padding-bottom:74px}
  }

  /* tripla — hide the auto-injected floating header search bar so it doesn't overlap the hero. Booking via the ご予約 buttons + tripla's floating launcher. */
  #tripla-searching-app [class*="search-widget-wrapper"]{display:none !important}
  .va h1,.va h2,.va h3,.va h4{margin:0}
  .va img{display:block}

  /* VENUES */
  .va .venues{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:8px}
  .va .ve{background:var(--paper);padding:30px 28px;display:flex;flex-direction:column;gap:11px}
  .va .ve-fl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
  .va .ve-nm{font-family:'Shippori Mincho',serif;font-size:21px;font-weight:600;color:var(--ink);letter-spacing:.03em;line-height:1.4}
  .va .ve-cap{font-family:'Shippori Mincho',serif;font-size:15px;color:var(--ink2,#4a443c);display:flex;align-items:baseline;gap:10px;margin-top:auto}
  .va .ve-cap b{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:30px;color:var(--ink)}
  .va .ve-cap span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
  @media(max-width:900px){ .va .venues{grid-template-columns:1fr 1fr} }
  @media(max-width:560px){ .va .venues{grid-template-columns:1fr} }

  /* NAV */
  .va .nav{position:absolute;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 48px}
  .va .brand strong{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;letter-spacing:.04em;color:#fff;font-weight:500;line-height:1}
  .va .brand-tag{display:block;margin-top:5px;font-size:9px;letter-spacing:.28em;color:rgba(255,255,255,.7);text-transform:uppercase}
  .va .nav ul{display:flex;gap:30px;list-style:none;padding:0;margin:0;justify-content:center}
  .va .nav ul a{font-size:13px;color:#fff;letter-spacing:.06em;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.92}
  .va .nav ul a.on{opacity:1}
  .va .nav ul a.on .nl-en{color:var(--gold)}
  .va .nl-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.7)}
  .va .nav-right{display:flex;gap:16px;justify-content:flex-end;align-items:center}
  .va .lang{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.78);letter-spacing:.18em}
  .va .res{font-size:12px;letter-spacing:.18em;padding:12px 24px;border:1px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;transition:.2s}
  .va .res:hover{background:#fff;color:var(--ink)}
  .va .nav-burger{display:none;background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:6px 8px;text-shadow:0 1px 10px rgba(0,0,0,.5)}

  /* HERO */
  .va .hero{position:relative;height:78vh;min-height:560px;max-height:820px;overflow:hidden;background:var(--dark)}
  .va .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.82);animation:herodrift 26s ease-in-out infinite alternate;will-change:transform}
  @keyframes herodrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(1.2%,-.8%)}}
  @media (prefers-reduced-motion: reduce){ .va .hero-img{animation:none} }
  .va .hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,17,15,.5) 0%,rgba(19,17,15,.2) 38%,rgba(19,17,15,.62) 100%)}
  .va .hero-frame{position:absolute;inset:22px;border:1px solid rgba(255,255,255,.26);z-index:2;pointer-events:none}
  .va .hero-coverlines{position:absolute;top:104px;left:50px;right:50px;z-index:2;display:flex;justify-content:space-between;color:rgba(255,255,255,.82);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
  .va .hero-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;z-index:2}
  .va .hc-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:22px}
  .va .hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:118px;line-height:.92;letter-spacing:.01em}
  .va .hero h1 em{font-style:italic}
  .va .hc-jp{font-family:'Shippori Mincho',serif;font-size:16px;letter-spacing:.5em;margin-top:24px;padding-left:.5em;color:rgba(255,255,255,.95)}
  .va .hero-scroll{position:absolute;right:48px;bottom:50px;z-index:2;color:#fff;writing-mode:vertical-rl;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
  .va .hero-scroll:after{content:"";display:block;width:1px;height:48px;background:linear-gradient(rgba(255,255,255,.7),transparent);margin-top:10px}

  /* SECTION + HEAD */
  .va section{padding:120px 56px}
  .va .oh{text-align:center;margin:0 auto 70px;max-width:840px}
  .va .oh-kicker{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}
  .va .oh-kicker.oh-c{margin-bottom:18px}
  .va .oh-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.2em}
  .va .oh-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:70px;line-height:.95;color:var(--ink)}
  .va .oh-en.sm{font-size:20px;font-weight:400;color:var(--accent)}
  .va .oh-ja{font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.34em;color:var(--muted)}
  .va .oh-title{font-family:'Shippori Mincho',serif;font-size:30px;font-weight:600;margin-top:20px;letter-spacing:.08em;line-height:1.55;color:var(--ink)}
  .va .oh-lead{font-size:14.5px;line-height:2.05;color:#5b544b;margin:22px auto 0;max-width:580px;text-wrap:pretty}
  .va .oh-light .oh-en,.va .oh-light .oh-title{color:#F7F3EC}
  .va .oh-light .oh-ja{color:rgba(247,243,236,.6)}
  .va .oh-light .oh-lead{color:rgba(247,243,236,.78)}
  .va .oh-light .oh-num{color:var(--gold)}

  .va .morebtn{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--ink);padding:15px 36px;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.08em;transition:.2s}
  .va .morebtn i{font-style:normal;transition:transform .2s}
  .va .morebtn:hover{background:var(--ink);color:var(--paper)}
  .va .morebtn:hover i{transform:translateX(5px)}

  /* INTRO */
  .va .intro{text-align:center;padding:130px 56px}
  .va .oh-c{justify-content:center}
  .va .intro-h{font-family:'Shippori Mincho',serif;font-size:42px;font-weight:600;line-height:1.5;letter-spacing:.05em}
  .va .intro-p{font-size:15px;line-height:2.2;color:#5b544b;max-width:660px;margin:30px auto 0;text-wrap:pretty}
  .va .intro-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:820px;margin:56px auto 0;border-top:1px solid var(--rule);padding-top:40px}
  .va .intro-facts div{display:flex;flex-direction:column;gap:7px;font-family:'Shippori Mincho',serif;font-size:15px}
  .va .intro-facts span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

  /* USES */
  .va .usesband{background:var(--paper2)}
  .va .uses{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule);border:1px solid var(--rule)}
  .va .uc{background:var(--paper2);padding:40px 30px}
  .va .uc-no{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--accent);margin-bottom:18px}
  .va .uc-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:26px;color:var(--ink)}
  .va .uc h3{font-family:'Shippori Mincho',serif;font-size:19px;font-weight:600;margin:6px 0 14px;letter-spacing:.04em}
  .va .uc p{font-size:13px;line-height:1.95;color:#5b544b;margin:0}

  /* LAYOUTS */
  .va .layouts{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
  .va .lc{text-align:center}
  .va .lo{aspect-ratio:1.1/1;border:1px solid var(--rule);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:18px}
  .va .lo-svg{width:78%;height:78%}
  .va .lc-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px}
  .va .lc-ja{font-family:'Shippori Mincho',serif;font-size:14px;font-weight:600;margin:2px 0 8px}
  .va .lc p{font-size:12px;line-height:1.8;color:#5b544b;margin:0}
  .va .note{margin:60px auto 0;max-width:760px;text-align:center;font-family:'Shippori Mincho',serif;font-size:13px;line-height:1.95;color:var(--muted);border-top:1px solid var(--rule);padding-top:28px}

  /* CATERING */
  .va .catering{background:var(--dark);color:#F7F3EC}
  .va .cat{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 48px;max-width:900px;margin:0 auto 56px}
  .va .ct{display:grid;grid-template-columns:46px 1fr;gap:14px;padding-top:18px;border-top:1px solid rgba(247,243,236,.18)}
  .va .ct-k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:.2em}
  .va .ct-t{font-family:'Shippori Mincho',serif;font-size:18px;font-weight:600;margin-bottom:6px}
  .va .ct-d{font-size:13px;line-height:1.7;color:rgba(247,243,236,.75)}
  .va .cat-photo{position:relative;max-width:1000px;margin:0 auto;height:360px;overflow:hidden}
  .va .cat-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.92)}
  .va .cat-photo .cap{position:absolute;left:16px;bottom:14px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;mix-blend-mode:difference}

  /* EQUIPMENT */
  .va .equip{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;border:1px solid var(--rule);background:var(--rule);max-width:1100px;margin:0 auto}
  .va .eq{background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:42px 12px;text-align:center;color:var(--ink)}
  .va .eq-t{font-family:'Shippori Mincho',serif;font-size:13px;line-height:1.5;letter-spacing:.04em}
  .va .eq-t br:last-child{display:none}

  /* STAY CTA */
  .va .staycta{background:var(--paper2);padding:0}
  .va .sc-inner{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .va .sc-left{padding:110px 64px;align-self:center}
  .va .sc-left .oh-kicker{justify-content:flex-start;margin-bottom:18px}
  .va .sc-left h3{font-family:'Shippori Mincho',serif;font-size:34px;font-weight:600;line-height:1.45;letter-spacing:.05em;margin-bottom:20px}
  .va .sc-left p{font-size:14.5px;line-height:2.05;color:#5b544b;margin:0 0 32px;max-width:440px}
  .va .sc-img{min-height:520px;overflow:hidden}
  .va .sc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)}

  /* INQUIRY */
  .va .iq{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
  .va .iq>a{display:flex;flex-direction:column;gap:10px;padding:44px 40px;border:1px solid var(--rule);transition:.2s}
  .va .iq-tel{background:var(--dark);color:#F7F3EC}
  .va .iq-tel:hover{background:#000}
  .va .iq-form:hover{background:var(--paper2)}
  .va .iq-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
  .va .iq-tel .iq-v{font-family:'Cormorant Garamond',serif;font-size:46px;font-weight:300;letter-spacing:.01em}
  .va .iq-form .iq-v{font-family:'Shippori Mincho',serif;font-size:24px;font-weight:600;display:flex;align-items:center;gap:12px}
  .va .iq-form .iq-v i{font-style:normal;color:var(--accent);transition:transform .2s}
  .va .iq-form:hover .iq-v i{transform:translateX(5px)}
  .va .iq-s{font-size:12px;color:var(--muted)}
  .va .iq-tel .iq-s{color:rgba(247,243,236,.6)}
  .va .iq-info{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1000px;margin:48px auto 0;border-top:1px solid var(--rule);padding-top:36px}
  .va .iq-info div{display:flex;flex-direction:column;gap:6px;font-family:'Shippori Mincho',serif;font-size:14px}
  .va .iq-info span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

  /* FOOTER */
  .va footer{background:var(--dark);color:#F7F3EC}
  .va .f-cta{text-align:center;padding:90px 56px;border-bottom:1px solid rgba(247,243,236,.14)}
  .va .f-cta .oh-en{color:#F7F3EC}.va .f-cta .oh-ja{color:rgba(247,243,236,.6)}
  .va footer h4{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:60px;font-weight:300;margin:6px 0 26px}
  .va footer h4 em{font-style:italic;color:var(--gold)}
  .va .f-resbtn{display:inline-flex;align-items:center;gap:12px;background:#F7F3EC;color:var(--dark);padding:17px 38px;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.08em;transition:.2s}
  .va .f-resbtn i{font-style:normal;transition:transform .2s}
  .va .f-resbtn:hover{background:var(--gold)}.va .f-resbtn:hover i{transform:translateX(5px)}
  .va .f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding:78px 56px 60px}
  .va .f-brand strong{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;font-weight:500;display:block}
  .va .f-brand .ja{font-family:'Shippori Mincho',serif;color:rgba(247,243,236,.78);font-size:14px;margin:14px 0 20px;line-height:1.8}
  .va .f-addr{font-size:12px;line-height:1.9;color:rgba(247,243,236,.55);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
  .va .col h5{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(247,243,236,.5);letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
  .va .col a{display:block;color:#F7F3EC;font-size:14px;margin-bottom:11px;font-family:'Shippori Mincho',serif;transition:.15s}
  .va .col a:hover{color:var(--gold)}
  .va .f-bot{display:flex;justify-content:space-between;border-top:1px solid rgba(247,243,236,.14);padding:26px 56px;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(247,243,236,.5);letter-spacing:.18em;text-transform:uppercase}

  /* CALCULATOR */
  .va .calc{background:var(--paper2)}
  .va .cl{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;max-width:1180px;margin:0 auto;align-items:start}
  .va .cl-controls{display:flex;flex-direction:column;gap:36px}
  .va .cl-label{font-family:'Shippori Mincho',serif;font-size:17px;font-weight:600;letter-spacing:.04em;margin-bottom:16px;display:flex;align-items:baseline;gap:12px}
  .va .cl-label span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .va .cl-guests{display:flex;align-items:center;gap:20px}
  .va .cl-guests button{width:48px;height:48px;border:1px solid var(--ink);background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--ink);transition:.15s;font-family:'Cormorant Garamond',serif}
  .va .cl-guests button:hover{background:var(--ink);color:var(--paper)}
  .va .cl-gnum{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:300;min-width:120px;text-align:center;line-height:1}
  .va .cl-gnum small{font-family:'Shippori Mincho',serif;font-size:16px;margin-left:6px}
  .va .cl-range{width:100%;margin-top:20px;accent-color:var(--accent)}
  .va .cl-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .va .cc{position:relative;text-align:left;background:#fff;border:1px solid rgba(28,26,23,.16);padding:22px 18px 20px;cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:.18s}
  .va .cc:hover{border-color:var(--accent)}
  .va .cc.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#fff}
  .va .cc-rec{position:absolute;top:-9px;left:14px;background:var(--accent);color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;padding:4px 9px;text-transform:uppercase}
  .va .cc-ja{font-family:'Shippori Mincho',serif;font-size:16px;font-weight:600;margin-top:4px}
  .va .cc-p{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:300;line-height:1}
  .va .cc-dish{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
  .va .cc-d{font-size:11.5px;line-height:1.7;color:#5b544b}
  /* 松竹梅 — tier color differentiation (steer toward 竹/Premium) */
  .va .cl-courses{align-items:stretch}
  .va .cc-std{background:#F3EFE7}
  .va .cc-std .cc-p{color:#6b6359}
  .va .cc-std .cc-dish{color:var(--muted)}
  .va .cc-prm{background:linear-gradient(165deg,#FBF4E6 0%,#F5E8CE 100%);border-color:var(--gold);box-shadow:0 18px 40px -22px rgba(182,138,83,.7);transform:translateY(-12px)}
  .va .cc-prm .cc-ja{color:#6e4f23}
  .va .cc-prm .cc-p{color:#a9772f}
  .va .cc-prm .cc-dish{color:#b07d34}
  .va .cc-prm .cc-d{color:#6b5836}
  .va .cc-prm.on{border-color:#a9772f;box-shadow:0 18px 40px -20px rgba(182,138,83,.85),inset 0 0 0 1px #a9772f}
  .va .cc-grand{background:linear-gradient(165deg,#221f1b 0%,#13110F 100%);border-color:#3a342c}
  .va .cc-grand .cc-ja{color:#F3ECDD}
  .va .cc-grand .cc-p{color:var(--gold)}
  .va .cc-grand .cc-dish{color:var(--gold)}
  .va .cc-grand .cc-d{color:rgba(243,236,221,.62)}
  .va .cc-grand.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
  .va .cc-grand:hover{border-color:var(--gold)}
  .va .cl-drinks{display:flex;flex-direction:column;gap:10px}
  .va .dk{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid rgba(28,26,23,.16);padding:16px 20px;cursor:pointer;transition:.15s}
  .va .dk:hover{border-color:var(--accent)}
  .va .dk.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .va .dk-ja{font-family:'Shippori Mincho',serif;font-size:15px;display:flex;align-items:center;gap:10px}
  .va .dk-ja em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:#fff;background:var(--accent);padding:3px 8px;text-transform:uppercase}
  .va .dk-p{font-family:'Shippori Mincho',serif;font-size:15px;color:var(--ink)}
  .va .dk-p small{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);margin-left:8px;letter-spacing:.06em}
  .va .cl-hint{font-size:11.5px;color:var(--muted);margin-top:12px;font-family:'Shippori Mincho',serif}
  .va .cl-summary{position:sticky;top:24px;background:var(--dark);color:#F7F3EC;padding:34px 30px}
  .va .cs-top{text-align:center;padding-bottom:24px;border-bottom:1px solid rgba(247,243,236,.18)}
  .va .cs-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .va .cs-per{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:300;line-height:.95}
  .va .cs-per small{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:rgba(247,243,236,.55);margin-left:8px}
  .va .cs-break{font-family:'Shippori Mincho',serif;font-size:12px;color:rgba(247,243,236,.7);margin-top:10px}
  .va .cs-total{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid rgba(247,243,236,.18)}
  .va .cs-tk{font-family:'Shippori Mincho',serif;font-size:14px}
  .va .cs-tk span{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(247,243,236,.5);letter-spacing:.08em;margin-top:4px}
  .va .cs-tv{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:300}
  .va .cs-up{width:100%;display:flex;flex-direction:column;gap:4px;text-align:left;background:rgba(224,178,116,.12);border:1px solid rgba(224,178,116,.4);padding:16px 18px;margin:20px 0 0;cursor:pointer;transition:.15s}
  .va .cs-up:hover{background:rgba(224,178,116,.2)}
  .va .cs-up-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--gold)}
  .va .cs-up-v{font-family:'Shippori Mincho',serif;font-size:14px;color:#F7F3EC}
  .va .cs-up i{font-style:normal;font-size:11px;color:var(--gold);align-self:flex-end}
  .va .cs-perks{margin-top:22px}
  .va .cs-pk-h{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,243,236,.5);margin-bottom:12px}
  .va .cs-pk{display:flex;align-items:center;gap:10px;font-family:'Shippori Mincho',serif;font-size:13.5px;padding:5px 0}
  .va .cs-pk i{font-style:normal;color:var(--gold)}
  .va .cs-pk.muted{color:rgba(247,243,236,.5)}
  .va .cs-next{font-family:'Shippori Mincho',serif;font-size:12.5px;color:rgba(247,243,236,.8);margin-top:12px;padding-top:14px;border-top:1px dashed rgba(247,243,236,.2);line-height:1.7}
  .va .cs-next strong{color:var(--gold);font-size:15px}
  .va .cs-next button{display:inline-block;margin-top:6px;background:none;border:0;color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
  .va .cs-cta{display:flex;align-items:center;justify-content:center;gap:10px;background:#F7F3EC;color:var(--dark);padding:17px;margin-top:24px;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.08em;transition:.18s}
  .va .cs-cta i{font-style:normal;transition:transform .2s}
  .va .cs-cta:hover{background:var(--gold)}.va .cs-cta:hover i{transform:translateX(5px)}
  .va .cs-note{font-size:10.5px;line-height:1.7;color:rgba(247,243,236,.5);margin-top:16px;font-family:'Shippori Mincho',serif}

  @media(max-width:1080px){
    .va .nav{padding:18px 24px}
    .va .nav-burger{display:flex}
    .va .nav ul{display:none}
    .va .nav ul.open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:rgba(19,17,15,.97);backdrop-filter:blur(8px);padding:6px 0;border-top:1px solid rgba(224,178,116,.2);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
    .va .nav ul.open li{width:100%}
    .va .nav ul.open a{flex-direction:row;justify-content:flex-start;align-items:baseline;gap:12px;padding:15px 24px;width:100%}
    .va .nav ul.open .nl-en{min-width:74px}
    .va .hero h1{font-size:78px}
    .va .uses,.va .layouts,.va .equip,.va .cat,.va .iq,.va .iq-info,.va .intro-facts{grid-template-columns:1fr 1fr}
    .va .cl{grid-template-columns:1fr}
    .va .cl-summary{position:static}
    .va .cl-courses{grid-template-columns:1fr}
    .va .cc-prm{transform:none}
    .va .sc-inner{grid-template-columns:1fr}.va .sc-left{padding:64px 40px}
  }

  @media(max-width:640px){
    .va{overflow-x:hidden}
    .va .nav{padding:16px 16px}
    .va .brand-tag,.va .lang{display:none}
    .va .brand strong{font-size:20px}
    .va .hero{height:auto;min-height:0;aspect-ratio:3/4;max-height:none}
    .va .hero h1{font-size:52px}
    .va .hc-eyebrow{font-size:10px;letter-spacing:.24em;margin-bottom:16px}
    .va .hc-jp{font-size:13px;letter-spacing:.3em;margin-top:18px}
    .va .hero-frame{inset:12px}
    .va .hero-coverlines,.va .hero-scroll{display:none}

    .va section,.va .intro{padding:60px 18px}
    .va .oh{margin:0 auto 40px}
    .va .oh-kicker{gap:10px;flex-wrap:wrap}
    .va .oh-en{font-size:38px}
    .va .oh-en.sm{font-size:16px}
    .va .oh-title{font-size:20px;margin-top:14px;line-height:1.5}
    .va .oh-lead{font-size:13px;line-height:1.9;margin-top:16px}
    .va .intro-h{font-size:26px;line-height:1.5}
    .va .intro-p{font-size:13.5px;line-height:1.95;margin-top:24px}
    .va .intro-facts{grid-template-columns:1fr 1fr;gap:18px;margin-top:36px;padding-top:28px}

    .va .uses{grid-template-columns:1fr}
    .va .uc{padding:30px 24px}
    .va .layouts{grid-template-columns:1fr 1fr;gap:18px}
    .va .note{margin-top:40px}

    .va .cat{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
    .va .cat-photo{height:240px}
    .va .equip{grid-template-columns:repeat(2,1fr)}
    .va .eq{padding:30px 10px}

    .va .sc-inner{grid-template-columns:1fr}
    .va .sc-left{padding:48px 18px}
    .va .sc-left h3{font-size:26px}
    .va .sc-img{min-height:260px}

    .va .iq{grid-template-columns:1fr;gap:16px}
    .va .iq>a{padding:32px 24px}
    .va .iq-tel .iq-v{font-size:38px}
    .va .iq-info{grid-template-columns:1fr 1fr;gap:18px;margin-top:36px;padding-top:28px}

    .va .cl{gap:28px}
    .va .cl-controls{gap:30px}
    .va .cl-courses{grid-template-columns:1fr}
    .va .cl-summary{padding:28px 22px}
    .va .cs-per{font-size:54px}

    .va .f-cta{padding:56px 18px}
    .va footer h4{font-size:38px}
    .va .f-resbtn{width:100%;justify-content:center;box-sizing:border-box}
    .va .f-top{grid-template-columns:1fr 1fr;gap:28px 24px;padding:48px 18px 40px}
    .va .f-brand{grid-column:1/-1}
    .va .f-bot{flex-direction:column;gap:8px;padding:24px 18px;text-align:center}
  }
`;

ReactDOM.createRoot(document.getElementById('root')).render(<App />);