/* 1's OPTION 2 / Dark x Warm — inner pages, stage 1 preview only.
 * Scope is explicit: this file is loaded ONLY on approved preview pages.
 * Never change actual copy, prices, URLs, metadata, link destinations or forms.
 * Existing styles.css handles breakpoints, user interactions and layout fallback. */
.option2-inner {
  --bg:#e9e0d4;
  --surface:#efe8de;
  --ink:#29231e;
  --muted:#625950;
  --line:#c6b9ab;
  --brand:#73020d;
  --brand-dark:#8a2732;
  --o2-black:#1b1918;
  --o2-deep:#24211e;
  --o2-paper:#efe8de;
  --o2-sand:#d8c8b5;
  background:var(--bg);
  color:var(--ink);
}
.option2-inner .section-title,
.option2-inner .subhero__title,
.option2-inner .subpage-cta h2 {
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  letter-spacing:-.045em;font-weight:500;line-height:1.35;
}
.option2-inner .eyebrow {
  font-size:11px;font-weight:600;letter-spacing:.20em;
  color:#704632;
}
.option2-inner .button {
  border-radius:0;font-size:13px;letter-spacing:.09em;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
.option2-inner .button:hover {transform:none}
.option2-inner .button--primary,
.option2-inner .button--header{
  background:#73020d;color:#fff;border-color:#73020d;
}
.option2-inner .button--primary:hover,
.option2-inner .button--header:hover{background:#92212f;border-color:#92212f}
.option2-inner .button--dark{background:#25211e;border-color:#25211e;color:#fff}
.option2-inner .button--dark:hover{background:#73020d;border-color:#73020d}
.option2-inner .text-link {text-underline-offset:6px;text-decoration-thickness:1px}
.option2-inner :focus-visible{outline:3px solid #c4a185;outline-offset:3px}

/* Same dark navigation system as the homepage preview, without changing markup. */
.option2-inner .site-header {color:#f3ede6}
.option2-inner .site-header:before{
  opacity:1!important;
  background:rgba(27,25,24,.96);
  border-bottom:1px solid rgba(250,245,238,.16);
}
.option2-inner .site-header__inner{width:min(calc(100% - 52px),1400px)}
.option2-inner .desktop-nav,.option2-inner .desktop-nav__all{color:#eee7df}
.option2-inner .desktop-nav a:after,
.option2-inner .desktop-nav__all:after{background:#bfa08b}
.option2-inner .desktop-all-menu{
  background:rgba(31,28,26,.985);
  color:#f1e8df;border-color:rgba(255,255,255,.14);
}
.option2-inner .desktop-all-menu__group a,
.option2-inner .desktop-all-menu__quick a{color:#f2e7db}
.option2-inner .desktop-all-menu__label{color:#d2b9a5}
.option2-inner .desktop-all-menu__group a:hover{color:#fff}
.option2-inner .menu-toggle{color:#f3e9df}
.option2-inner .menu-toggle__icon,
.option2-inner .menu-toggle__icon:before,
.option2-inner .menu-toggle__icon:after{background:#f3e9df}
.option2-inner .nav-jp{opacity:.86}

/* Unify page edges and footer, while keeping the navigation and booking functional. */
.option2-inner .subpage-cta{
  position:relative;overflow:hidden;
  padding:clamp(100px,11vw,166px) 0;
  background:#1b1918;color:#f5eee7;
  border-top:1px solid rgba(255,255,255,.12);
}
.option2-inner .subpage-cta:before{
  content:"";position:absolute;right:-15vw;bottom:-240px;
  width:60vw;height:60vw;max-height:700px;max-width:700px;
  border:1px solid rgba(236,216,200,.17);border-radius:50%;pointer-events:none;
}
.option2-inner .subpage-cta h2{font-size:clamp(38px,5.6vw,76px);line-height:1.3;color:#f7ede4}
.option2-inner .subpage-cta .eyebrow{color:#d2b09b}
.option2-inner .subpage-cta .button--ghost{border-color:rgba(255,255,255,.6)}
.option2-inner .site-footer{background:#151412;color:#e4d8cc}
.option2-inner .site-footer__sub,
.option2-inner .site-footer__bottom{color:#c1afa1}
.option2-inner .site-footer__bottom{border-color:rgba(255,255,255,.14)}
.option2-inner .footer-nav a:hover{color:#fff}

/* CUT — the real hairstylist stays here, never on the homepage cover.
 * Image and original text remain untouched. */
.option2-inner .haircut-hero{
  padding:var(--header-h) 0 0;
  background:#1b1918;color:#f1e9df;
}
.option2-inner .haircut-hero__grid{
  display:grid;grid-template-columns:49% 51%;gap:0;
  width:100%;max-width:none;align-items:stretch;
}
.option2-inner .haircut-hero__copy{
  padding:clamp(65px,8vw,135px) clamp(34px,5vw,110px);
  align-self:center;
}
.option2-inner .haircut-hero__title{
  font-size:clamp(48px,5.8vw,88px);line-height:1.24;
  letter-spacing:-.06em;color:#faf2ea;
}
.option2-inner .haircut-hero__lead{color:#d2c5b9;line-height:2.0}
.option2-inner .haircut-hero .eyebrow{color:#c3a78f}
.option2-inner .haircut-hero__visual{border:0;min-height:690px;margin:0;background:#332d28}
.option2-inner .haircut-hero__visual img{
  height:100%;min-height:690px;object-fit:cover;object-position:center 25%;
  filter:brightness(.77) saturate(.77);
}
.option2-inner .haircut-hero__visual figcaption{
  padding:55px 30px 30px;background:linear-gradient(0deg,rgba(16,14,13,.78),transparent);
}
.option2-inner .haircut-philosophy{background:#e9e0d4}
.option2-inner .haircut-values{background:#eee7dc}
.option2-inner .haircut-value-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:1px solid #c4b6a6;margin-top:62px;
}
.option2-inner .haircut-value-grid article{
  background:transparent;border:0;border-bottom:1px solid #c4b6a6;
  min-height:245px;padding:30px 36px 37px 0;
}
.option2-inner .haircut-value-grid article:nth-child(2n){padding-left:34px}
.option2-inner .haircut-value-grid span{margin-bottom:24px;color:#8d6554}
.option2-inner .haircut-value-grid h3{font-size:clamp(23px,2.4vw,32px)}
.option2-inner .haircut-gallery{background:#26221f;color:#f0e8dd}
.option2-inner .haircut-gallery .eyebrow{color:#cfaf9a}
.option2-inner .haircut-gallery__head>p{color:#cdbfb0}
.option2-inner .haircut-gallery__grid{gap:4px}
.option2-inner .haircut-gallery__grid img{filter:saturate(.75);aspect-ratio:3/4}
.option2-inner .haircut-gallery__grid figcaption{color:#d4c2b0}
.option2-inner .haircut-voice{background:#171615;color:#f1e9df}
.option2-inner .haircut-price{background:#e8ded1}
.option2-inner .haircut-price-grid{gap:1px;background:#c4b6a6}
.option2-inner .haircut-price-grid article{
  background:#f1e8db;border:0;padding:32px;
}
.option2-inner .haircut-guide{background:#f1eae0}
.option2-inner .haircut-nape-link{background:#e5d9cc}
.option2-inner .haircut-donation-link{background:#f1eae0}

/* HAIR DONATION — keeps the 31cm rule and every existing image/video intact. */
.option2-inner .donation-hero{padding:var(--header-h) 0 0;background:#1b1918;color:#f4e9dc}
.option2-inner .donation-hero__grid{
  width:100%;max-width:none;display:grid;
  grid-template-columns:48% 52%;gap:0;align-items:stretch;
}
.option2-inner .donation-hero__grid>div:first-child{
  padding:clamp(64px,8vw,128px) clamp(34px,5vw,100px);
  align-self:center;
}
.option2-inner .donation-hero__title{
  font-size:clamp(40px,4.65vw,70px);
  line-height:1.34;color:#f8f0e8;
  letter-spacing:-.055em;
}
.option2-inner .donation-hero__lead{color:#d8c7b9;line-height:2}
.option2-inner .donation-hero .eyebrow{color:#c6ab98}
.option2-inner .donation-hero__visual{
  min-height:700px;margin:0;border:0;
  background:#2a2b27;
}
.option2-inner .donation-hero__photo{
  filter:saturate(.7) contrast(1.06) brightness(.86);
}
.option2-inner .donation-hero__visual:before{inset:28px}
.option2-inner .donation-hero__overlay{padding:clamp(28px,4vw,62px)}
.option2-inner .donation-experience{background:#e9e0d4}
.option2-inner .donation-message{background:#f0e8dc}
.option2-inner .donation-condition{background:#e6dbcd}
.option2-inner .donation-card-grid{gap:1px;background:#c3b4a3}
.option2-inner .donation-card-grid article{
  background:#f3ebdf;border:0;min-height:300px;padding:31px;
}
.option2-inner .donation-card-grid span{margin-bottom:32px}
.option2-inner .donation-flow{background:#201e1b}
.option2-inner .donation-flow-grid{background:rgba(255,255,255,.14)}
.option2-inner .donation-flow-grid article{background:#292520;color:#f6eee6}
.option2-inner .donation-flow-grid p{color:#d4c6b8}
.option2-inner .donation-send{background:#f0e8dc}
.option2-inner .donation-send__box{background:#e8dfd2;border:1px solid #c6b8a8}
.option2-inner .donation-length{background:#e7dbcb}
.option2-inner .donation-style{background:#efe7db}
.option2-inner .donation-faq{background:#f2eae0}

/* MENU & PRICE — editorial service directory, not a grid of generated cards. */
.option2-inner.menu-price-page .subhero{
  padding:calc(var(--header-h) + clamp(76px,9vw,145px)) 0 clamp(100px,11vw,156px);
  background:#1b1918;color:#f5eae0;border:0;
}
.option2-inner.menu-price-page .subhero__inner{max-width:1200px}
.option2-inner.menu-price-page .subhero__title{
  font-size:clamp(48px,6.4vw,102px);line-height:1.3;letter-spacing:-.065em;
}
.option2-inner.menu-price-page .subhero .eyebrow{color:#c6a58f}
.option2-inner.menu-price-page .subhero__lead{color:#d3c5b7;line-height:2;max-width:670px}
.option2-inner.menu-price-page .section{background:#eae1d6}
.option2-inner.menu-price-page .service-list{max-width:1300px}
.option2-inner.menu-price-page .service-row{
  align-items:center;gap:30px;
  padding:clamp(36px,4.1vw,64px) 16px;
  border-color:#c9bcaf;background:transparent;
}
.option2-inner.menu-price-page .service-row:first-child{border-top:1px solid #c9bcaf}
.option2-inner.menu-price-page .service-row--accent{padding-inline:16px}
.option2-inner.menu-price-page .service-row__index{color:#97725e}
.option2-inner.menu-price-page .service-row h2{
  font-family:Georgia,serif;
  font-size:clamp(34px,4.5vw,70px);letter-spacing:-.035em;
  line-height:1.1;color:#29231f;
}
.option2-inner.menu-price-page .service-row p{font-size:15px;color:#64594f}
.option2-inner.menu-price-page .service-row__price strong{font-size:clamp(29px,3vw,40px)}
.option2-inner.menu-price-page .service-row__price .text-link{min-height:44px;display:inline-flex;align-items:center}

/* Breakpoints chosen for Japanese headings, existing hero images and links. */
@media(max-width:960px){
  .option2-inner .site-header__inner{width:calc(100% - 32px)}
  .option2-inner .mobile-menu{
    background:#23201d;border-top:1px solid rgba(255,255,255,.14);
  }
  .option2-inner .mobile-menu a{color:#f6ede3;border-bottom-color:rgba(255,255,255,.13)}
  .option2-inner .mobile-menu__label{color:#d0b3a0}
  .option2-inner .mobile-menu__group{border-top-color:rgba(255,255,255,.13)}
  .option2-inner .mobile-menu__reserve{background:#73020d;color:white}
  .option2-inner .mobile-fixed-cta__secondary{background:#ece2d5;color:#29221d}
  .option2-inner .mobile-fixed-cta__primary{background:#73020d;color:#fff}
  .option2-inner .haircut-hero__grid,
  .option2-inner .donation-hero__grid{
    grid-template-columns:1fr;gap:0;
  }
  .option2-inner .haircut-hero__copy,
  .option2-inner .donation-hero__grid>div:first-child{
    padding:70px 28px 75px;
  }
  .option2-inner .haircut-hero__visual,
  .option2-inner .haircut-hero__visual img{
    min-height:0;height:min(125vw,680px);
  }
  .option2-inner .donation-hero__visual{min-height:0;height:min(120vw,650px)}
  .option2-inner .haircut-hero__title{font-size:clamp(42px,8vw,68px)}
  .option2-inner .donation-hero__title{font-size:clamp(34px,6.8vw,55px)}
  .option2-inner .haircut-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .option2-inner .donation-card-grid{grid-template-columns:1fr}
  .option2-inner .donation-card-grid article{min-height:0}
}
@media(max-width:620px){
  .option2-inner .haircut-hero__copy,
  .option2-inner .donation-hero__grid>div:first-child{padding:58px 20px 70px}
  .option2-inner .haircut-hero__title{font-size:clamp(37px,9vw,49px)}
  .option2-inner .donation-hero__title{font-size:clamp(30px,8vw,42px)}
  .option2-inner .haircut-value-grid{grid-template-columns:1fr}
  .option2-inner .haircut-value-grid article,
  .option2-inner .haircut-value-grid article:nth-child(2n){padding:27px 0;min-height:0}
  .option2-inner .haircut-price-grid{grid-template-columns:1fr;gap:1px}
  .option2-inner .haircut-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .option2-inner .donation-hero__visual{height:520px}
  .option2-inner .donation-hero__overlay{padding:26px}
  .option2-inner .donation-flow-grid{grid-template-columns:1fr}
  .option2-inner .donation-flow-grid article{min-height:0}
  .option2-inner .subpage-cta{padding:82px 0 100px}
  .option2-inner .subpage-cta h2{font-size:clamp(34px,8vw,52px)}
  .option2-inner.menu-price-page .subhero__title{font-size:clamp(30px,7.5vw,47px)}
  .option2-inner.menu-price-page .service-row{padding:30px 0;grid-template-columns:1fr;gap:8px}
  .option2-inner.menu-price-page .service-row h2{font-size:clamp(33px,9.2vw,51px)}
  .option2-inner.menu-price-page .service-row__price{text-align:left;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .option2-inner .button{transition:none}
}