:root{
    --bg: #FFFFFF;
    --cream: #F7F1E8;
    --white: #FFFFFF;
    --blue: #9EC4D9;
    --orange: #E89A4D;
    --orange-deep: #D8863A;
    --rose: #C9A088;
    --ink: #3A2E22;
    --ink-soft: #8B6F5C;
    --line: rgba(58,46,34,0.1);
    --radius: 16px;
  }
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
  body{ overflow-x: hidden; max-width: 100%; }
  a.reserve-btn.mobile-reserve-btn{ display: none; }
  body{
    margin:0; background: var(--bg); color: var(--ink);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 1.85; -webkit-font-smoothing: antialiased;
  }
  a{ color: inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width: 1200px; margin: 0 auto; padding: 0 32px; }
  .handwritten{ font-family: 'Yuji Syuku', serif; }

  /* Header */
  header{ background: var(--white); position: sticky; top:0; z-index:50; transition: transform .3s ease; }
  header.header-hidden{ transform: translateY(-100%); }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px 32px; max-width:1200px; margin:0 auto; gap: 24px;
  }
  .brand{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:inherit; }
  .brand-logo-img{ width:180px; height:auto; display:block; }
  .brand-text-group{ display:flex; flex-direction:column; align-items:center; gap:0px; }
  .brand-text{ font-size:1.65rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
  .brand-tagline{ font-size:1rem; color:#5c5c5c; white-space:nowrap; }
  .brand-text .blue{ color: var(--blue); }
  .navlinks{
    display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;
    font-size:0.95rem; color:#4a4a4a; white-space:nowrap;
  }
  .navlinks a{ text-decoration:none; }
  .navlinks a:hover{ color: var(--orange-deep); }
  .navlinks .active{ color: var(--orange-deep); }
  .insta-icon{ width:26px; height:26px; flex-shrink:0; }
  .header-right{ display:flex; align-items:center; gap:20px; }
  .menu-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:#2b2b2b; }

  .reserve-btn{
    display:inline-flex; align-items:center; gap:10px;
    background: var(--orange); color:#fff; padding: 15px 26px;
    border-radius: 40px; text-decoration:none; font-weight:700; font-size:0.98rem;
    box-shadow: 0 8px 18px -8px rgba(216,134,58,0.55);
    transition: background .2s, transform .2s;
  }
  .reserve-btn:hover{ background: var(--orange-deep); transform: translateY(-1px); }
  .reserve-btn .arrow{
    width:26px; height:26px; border-radius:50%; background: rgba(255,255,255,0.25);
    display:flex; align-items:center; justify-content:center; font-size:0.9rem;
  }

  .sub-brand{ padding: 0 32px 18px; max-width:1200px; margin: 0 auto; display:flex; justify-content:flex-end; align-items:flex-end; flex-wrap:wrap; gap:12px; }
  .sub-brand .left p{ margin:2px 0; color:#5c5c5c; font-size:0.95rem; }
  .sub-brand .right{ color:#3a3a3a; font-size:0.72rem; font-weight:500; max-width:none; white-space:nowrap; flex-shrink:0; margin-left:auto; line-height:1.6; }

  /* Hero */
  .hero-photo{ width:100%; height: 62vh; min-height:420px; max-height:620px; overflow:hidden; position:relative; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; object-position: 60% 35%; }
  .hero-caption{
    position:absolute; left:24px; bottom:36px; right:24px;
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  }
  .hero-caption span{
    background:#fff; color:#2b2320; font-weight:900;
    font-size:clamp(1.3rem,4.2vw,2.3rem); line-height:1.35;
    padding:2px 10px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  }

  /* Features / 3 experiences */
  .intro-story{ background: var(--bg); padding: 72px 0 64px; }
  .intro-story .wrap{ max-width:640px; text-align:center; }
  .intro-lead{
    font-size: clamp(1.15rem,2.8vw,1.5rem); font-weight:700; color: var(--ink);
    line-height:1.9; margin:0 0 40px;
  }
  .intro-body{
    font-size: clamp(1rem,2.4vw,1.15rem); color: var(--ink); line-height:2;
    margin:0 0 36px;
  }
  .intro-body:last-child{ margin-bottom:0; }

  .features{ background: var(--cream); padding: 90px 0 100px; }
  .features h2{
    text-align:center; font-size: clamp(0.85rem,4.2vw,2.1rem); font-weight:700;
    margin: 0 0 60px; color: var(--ink); line-height:1.5;
  }
  .features h2 .slash{ color: var(--rose); font-weight:400; margin: 0 4px; }
  .cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:32px; }
  .card{
    background: var(--white); border-radius: var(--radius); padding: 34px 30px 38px;
    text-align:center; box-shadow: 0 18px 40px -26px rgba(58,46,34,0.28);
  }
  .badge{
    width:52px; height:52px; border-radius:50%; background: var(--rose); color:#fff;
    display:flex; align-items:center; justify-content:center; margin: 0 auto 22px;
    font-weight:700; font-size:1.05rem;
  }
  .card h3{ font-size:1.15rem; margin: 0 0 22px; font-weight:700; }
  .card-photo{
    border-radius: 12px; overflow:hidden; height:230px; margin-bottom:24px;
    background: linear-gradient(155deg,#ece2d3,#ddcdb3);
    display:flex; align-items:center; justify-content:center;
    color:#a3907a; font-size:0.82rem; text-align:center; padding:14px;
    border: 1px dashed rgba(139,111,92,0.4);
  }
  .card-photo img{ width:100%; height:100%; object-fit:cover; }
  .card p.caption{ margin:0; color: var(--ink-soft); font-size:0.95rem; line-height:1.7; }

  /* ---- Sections reused from earlier build, restyled to match ---- */
  .section{ padding: 84px 0; }
  .section-head{ max-width: 640px; margin: 0 auto 52px; text-align:center; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px; font-size:0.78rem; letter-spacing:.2em;
    color: var(--orange-deep); text-transform:uppercase; margin-bottom:14px;
  }
  .section-head h2{ font-size: clamp(1.4rem,2.2vw,1.9rem); margin:0 0 14px; font-weight:700; }
  .section-head p{ color: var(--ink-soft); margin:0; }

  .profile{ display:grid; grid-template-columns: 300px 1fr; gap:48px; align-items:center; }
  .profile-photo{
    aspect-ratio:1/1; border-radius: var(--radius); background: linear-gradient(155deg,#ece2d3,#ddcdb3);
    display:flex; align-items:center; justify-content:center; color:#a3907a; font-size:0.85rem;
    text-align:center; padding:20px; border:1px dashed rgba(139,111,92,0.4);
  }
  .profile-info h3{ font-size:1.5rem; margin:0 0 8px; }
  .profile-info .sub{ color: var(--orange-deep); font-size:0.92rem; margin-bottom:20px; }
  .profile-table{ width:100%; border-collapse:collapse; margin-bottom:22px; }
  .profile-table td{ padding:9px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
  .profile-table td:first-child{ color: var(--ink-soft); width:110px; }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:30px; text-decoration:none; font-size:0.88rem; border:1px solid var(--line); }
  .btn:hover{ border-color: var(--orange); color: var(--orange-deep); }
  .media-note{ margin-top:26px; padding:18px 22px; background: var(--cream); border-left:3px solid var(--orange); border-radius:8px; font-size:0.88rem; color: var(--ink-soft); }

  .instagram-feed{ padding: 20px 0 88px; }
  .insta-follow-link{
    display:inline-flex; align-items:center; gap:12px; text-decoration:none; color: var(--ink);
    font-size:1.15rem; margin-bottom:36px;
  }
  .insta-follow-link span{ font-family:'Yuji Syuku', serif; }
  .insta-grid{
    display:grid; grid-template-columns: repeat(3,1fr); gap:6px; max-width:640px; margin:0 auto;
  }
  .insta-cell{ display:block; aspect-ratio:1/1; overflow:hidden; position:relative; }
  .insta-cell img{ width:100%; height:100%; object-fit:cover; transition: transform .3s; }
  .insta-cell:hover img{ transform: scale(1.05); }
  .insta-more{
    background: linear-gradient(155deg, var(--moss), var(--moss-deep));
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#fff;
  }
  .insta-more span{ font-size:0.85rem; }

  .line-heading{
    font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight:700;
    display:inline-flex; align-items:center; gap:18px; margin:0 0 40px; color:var(--ink);
  }
  .line-heading::after{ content:""; width:70px; height:1px; background:var(--ink); opacity:0.5; }

  .media-intro{ padding-top:20px; }
  .media-card{ background:var(--panel); border-radius:var(--radius); padding:36px 30px; box-shadow: 0 18px 40px -26px rgba(58,46,34,0.28); }
  .media-card p{ margin:0 0 20px; color:var(--ink); font-size:0.95rem; }
  .media-logo-placeholder{
    margin:0 0 24px; display:flex; align-items:center; justify-content:center;
  }

  .review-logo-placeholder{
    max-width:280px; margin:0 auto 28px; display:flex; align-items:center; justify-content:center;
  }
  .google-reviews-link{
    display:inline-block; margin:0 0 28px; color: var(--orange-deep); font-weight:700;
    text-decoration:none; font-size:0.95rem; border-bottom:1px solid var(--orange-deep); padding-bottom:2px;
  }
  .google-reviews-link:hover{ color: var(--ink); border-color: var(--ink); }
  .review-summary{ font-size:1.2rem; font-weight:700; margin:0 0 10px; color:var(--ink); }
  .review-score{ margin:0 0 32px; color:#e0a83c; font-size:1.1rem; }
  .review-score span{ color:var(--ink-soft); font-size:0.9rem; margin-left:8px; }
  .review-card{
    background:var(--white); border-radius:var(--radius); padding:28px; text-align:left;
    box-shadow: 0 18px 40px -26px rgba(58,46,34,0.28);
  }
  .review-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .review-avatar-placeholder{
    width:44px; height:44px; border-radius:50%; background:linear-gradient(155deg,#ece2d3,#ddcdb3);
    border:1px dashed rgba(139,111,92,0.4); flex-shrink:0;
  }
  .review-name{ font-weight:700; flex:1; }
  .review-stars{ color:#e0a83c; margin-bottom:10px; }
  .review-time{ color:var(--ink-soft); font-size:0.8rem; margin-left:8px; }

  .review-slideshow{ position:relative; max-width:560px; margin:0 auto; }
  .review-slide-track{ position:relative; min-height:260px; }
  .review-card{ display:none; }
  .review-card.active{ display:block; }
  .review-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    background: var(--white); border:1px solid var(--line); width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.95rem; color:var(--ink);
    box-shadow: 0 6px 16px -8px rgba(58,46,34,0.35); transition: background .2s;
  }
  .review-arrow:hover{ background: var(--cream); }
  .review-arrow.prev{ left:-19px; }
  .review-arrow.next{ right:-19px; }
  .review-dots{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
  .review-dot{
    width:9px; height:9px; border-radius:50%; background: rgba(58,46,34,0.25); cursor:pointer; transition: background .2s;
  }
  .review-dot.active{ background: var(--chestnut); }
  .review-text{ margin:0; color:var(--ink); font-size:0.92rem; line-height:1.8; }
  .review-note{ margin:24px 0 0; font-size:0.78rem; color:var(--ink-soft); }

  .room-intro{ padding: 84px 0; }
  .room-intro-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center; }
  .room-intro-text p{ color: var(--ink); font-size:0.98rem; line-height:1.9; margin:0 0 18px; }
  .room-slideshow{
    position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 3/4;
    box-shadow: 0 24px 48px -26px rgba(58,46,34,0.32); background:#000; max-height:720px;
  }
  .room-slide{
    position:absolute; inset:0; opacity:0; transition: opacity .5s ease; pointer-events:none;
  }
  .room-slide.active{ opacity:1; pointer-events:auto; }
  .room-slide img{ width:100%; height:100%; object-fit:cover; }
  .room-slide-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    background:rgba(255,255,255,0.85); border:none; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; color:var(--ink);
    transition: background .2s;
  }
  .room-slide-arrow:hover{ background:#fff; }
  .room-slide-arrow.prev{ left:14px; }
  .room-slide-arrow.next{ right:14px; }
  .room-slide-dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:5; }
  .room-dot{
    width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.55); cursor:pointer; transition: background .2s;
  }
  .room-dot.active{ background:#fff; }

  .column-heading{
    font-size: clamp(1.6rem,3vw,2.2rem); font-weight:400; letter-spacing:.15em; color: var(--chestnut);
    margin:0 0 20px; font-family: 'Zen Kaku Gothic New', sans-serif;
  }
  .column-heading::after{
    content:""; display:block; width:120px; height:1px; background:var(--chestnut); opacity:0.6;
    margin:20px auto 0;
  }
  .column-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:24px; max-width:760px; margin:44px auto 0;
  }
  .column-card{
    display:block; text-decoration:none; color:var(--ink); background:var(--white); border-radius: var(--radius);
    overflow:hidden; box-shadow: 0 18px 40px -26px rgba(58,46,34,0.28); text-align:left; transition: transform .2s;
  }
  .column-card:hover{ transform: translateY(-4px); }
  .column-thumb{ aspect-ratio:4/3; background-size:cover; background-position:center; }
  .column-thumb-1{ background-image: linear-gradient(155deg,#cfe0ec,#9fc2d6); }
  .column-thumb-2{ background-image: linear-gradient(155deg,#ece2d3,#ddcdb3); }
  .column-title{ margin:0; padding:18px 20px; font-size:0.92rem; line-height:1.6; }

  .flow{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; }
  .flow-step{ padding:0 24px; position:relative; }
  .flow-step:not(:last-child)::after{ content:"→"; position:absolute; right:-4px; top:12px; color: var(--orange); font-size:1.2rem; }
  .flow-step .fn{ width:40px; height:40px; border-radius:50%; background: var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:16px; }
  .flow-step h4{ margin:0 0 10px; font-size:1rem; }
  .flow-step p{ font-size:0.88rem; color: var(--ink-soft); margin:0; }
  .rules{ margin-top:56px; background: var(--cream); border-radius: var(--radius); padding:32px; }
  .rules h4{ margin:0 0 16px; }
  .rules ul{ margin:0; padding-left:1.2em; color: var(--ink-soft); font-size:0.9rem; }
  .rules li{ margin-bottom:8px; }

  .price-table{ width:100%; border-collapse:collapse; background: var(--white); border-radius: var(--radius); overflow:hidden; box-shadow: 0 18px 40px -30px rgba(58,46,34,0.3); }
  .price-table th,.price-table td{ padding:18px 22px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
  .price-table th{ background: var(--orange); color:#fff; font-weight:500; font-size:0.88rem; }
  .price-table tr:last-child td{ border-bottom:none; }
  .price-note{ margin-top:18px; font-size:0.82rem; color: var(--ink-soft); }
  .placeholder-flag{ display:inline-block; margin-top:14px; padding:6px 14px; font-size:0.76rem; background: rgba(216,134,58,0.12); color: var(--orange-deep); border-radius:20px; }

  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{ width:100%; text-align:left; background:none; border:none; padding:22px 0; font-size:0.98rem; font-weight:500; cursor:pointer; display:flex; justify-content:space-between; gap:16px; font-family:inherit; color:var(--ink); }
  .faq-q .icon{ color: var(--orange); font-size:1.3rem; flex-shrink:0; transition: transform .25s; }
  .faq-item.open .faq-q .icon{ transform: rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
  .faq-item.open .faq-a{ max-height:400px; }
  .faq-a p{ margin:0 0 20px; color: var(--ink-soft); font-size:0.9rem; }

  .safety-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .safety-card{ background: var(--white); border-radius: var(--radius); padding:32px; box-shadow: 0 18px 40px -30px rgba(58,46,34,0.3); }
  .safety-card h3{ margin:0 0 18px; color: var(--orange-deep); }
  .safety-card ul{ margin:0; padding-left:1.2em; color: var(--ink-soft); font-size:0.9rem; }
  .safety-card li{ margin-bottom:10px; }

  .access{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
  .access-info dt{ color: var(--ink-soft); font-size:0.82rem; margin-top:18px; }
  .access-info dd{ margin:4px 0 0; font-size:1rem; }
  .map-frame{ border-radius: var(--radius); overflow:hidden; height:320px; }
  .map-frame iframe{ width:100%; height:100%; border:0; }

  footer{ background: #33281C; color:#F0E6D8; padding:48px 0 28px; }
  .footer-grid{
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap:32px; align-items:start;
    text-align:left; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.12);
  }
  footer .brand-text{ color:#fff; font-size:1.2rem; white-space:nowrap; }
  footer .fine{ font-size:0.82rem; opacity:0.75; margin:0 0 8px; line-height:1.7; }
  .footer-policies{ list-style:none; display:flex; flex-direction:column; gap:12px; padding:0; margin:0; font-size:0.88rem; }
  .footer-policies a{ text-decoration:underline; }
  .footer-map-link{ display:inline-block; margin-top:6px; font-size:0.86rem; text-decoration:underline; color:#fff; }
  .footer-links{ list-style:none; padding:0; margin:0; }
  .footer-links a{ text-decoration:none; opacity:0.85; white-space:nowrap; }
  .footer-links a:hover{ opacity:1; }
  .footer-extra{ display:flex; flex-wrap:wrap; gap:16px 22px; font-size:0.8rem; margin-bottom:16px; }
  .footer-bottom{ margin-top:32px; padding-top:24px; font-size:0.78rem; opacity:0.6; }

  @media (max-width: 960px){
    .price-table th,.price-table td{ padding:14px 10px; font-size:0.9rem; }
    .review-slideshow{ padding:0 30px; }
    .review-arrow.prev{ left:-10px; }
    .review-arrow.next{ right:-10px; }
    .footer-grid{ grid-template-columns:1fr; gap:28px; }
    .footer-extra{ gap:10px 18px; }
    .nav{ position:relative; }
    .navlinks{
      display:flex; flex-direction:column; align-items:flex-start; gap:0;
      position:absolute; top:100%; left:0; right:0; background:#fff;
      max-height:0; overflow:hidden; transition:max-height .3s ease;
      box-shadow: 0 12px 20px -8px rgba(0,0,0,0.15); z-index:60; padding:0 20px;
    }
    .navlinks.open{ max-height:520px; padding:10px 20px 20px; }
    .navlinks li{ width:100%; }
    .navlinks a{ display:block; padding:13px 0; border-bottom:1px solid var(--line); width:100%; }
    .menu-toggle{ display:block; font-size:2rem; font-weight:bold; }
    .room-intro-grid{ grid-template-columns:1fr; gap:32px; }
    .insta-grid{ gap:3px; }
    .cards{ grid-template-columns:1fr; }
    .profile{ grid-template-columns:1fr; }
    .profile-photo{ max-width:260px; }
    .flow{ grid-template-columns:1fr; gap:32px; }
    .flow-step::after{ display:none; }
    .safety-grid{ grid-template-columns:1fr; }
    .access{ grid-template-columns:1fr; }
    .sub-brand{ flex-direction:row; align-items:center; padding:0 16px 8px; }
    .nav{ padding:10px 16px 6px; gap:8px; }
    .brand{ gap:2px; min-width:0; }
    .brand-logo-img{ width:100px; height:auto; }
    .brand-text{ font-size:0.85rem; }
    .brand-tagline{ font-size:0.65rem; }
    .brand-text{ font-size:0.85rem; line-height:1.3; }
    .header-right{ gap:8px; }
    .insta-icon{ width:20px; height:20px; }
    .reserve-btn{ padding:8px 12px; font-size:0.72rem; gap:5px; white-space:nowrap; }
    .reserve-btn .arrow{ width:18px; height:18px; font-size:0.7rem; }
    .header-right .desktop-reserve-btn{ display:none; }
    .header-right .insta-icon{ display:none; }
    .sub-brand{ flex-wrap:wrap; row-gap:6px; }
    .sub-brand a.reserve-btn.mobile-reserve-btn{ display:inline-flex; }
    .sub-brand .right{ flex-basis:100%; text-align:right; font-size:0.68rem; }
  }