/* ==========================================
   HOUJOU / Luxury beauty corporate site draft
   Palette: ivory / champagne gold / warm brown
   Fonts are optional web fonts, with local fallbacks.
   ========================================== */
:root {
  --paper:#f9f7f2;
  --ivory:#f3eee5;
  --white:#fffefa;
  --ink:#302922;
  --muted:#7b726a;
  --gold:#aa8654;
  --gold-light:#c8a872;
  --gold-deep:#86663e;
  --brown:#2b241f;
  --line:#e7dfd3;
  --container:1200px;
  --jp-serif:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif;
  --jp-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --en-serif:'Cormorant Garamond','Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp-sans);font-size:14px;font-weight:400;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
img{max-width:100%;height:auto}
::selection{background:#dbc9a9;color:#302922}
.container{width:min(calc(100% - 104px),var(--container));margin-inline:auto}
.section{padding-block:126px}
.skip-link{position:absolute;left:16px;top:-70px;padding:14px 20px;background:white;z-index:100}
.skip-link:focus{top:16px}
.section-kicker{font-family:var(--en-serif);font-size:17px;font-weight:600;letter-spacing:.18em;color:var(--gold);line-height:1.2}
.section-kicker span{font-family:var(--jp-sans);font-weight:300;font-size:10px;letter-spacing:.08em;color:#a9a096}
.headline{font-family:var(--jp-serif);font-size:clamp(30px,3vw,42px);line-height:1.8;letter-spacing:.06em;font-weight:400;margin:22px 0 0}
.headline--lg{font-size:clamp(30px,3.1vw,44px)}
.body-copy{font-size:14px;line-height:2.45;letter-spacing:.07em;font-weight:300;color:#6f6760}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
/* Nav */
.header{position:fixed;inset:0 0 auto;z-index:50;height:86px;background:rgba(250,248,244,.93);border-bottom:1px solid rgba(155,133,99,.18);transition:background .3s,box-shadow .3s}
.header.is-scrolled{background:rgba(250,248,244,.97);box-shadow:0 8px 26px rgba(44,35,24,.045);backdrop-filter:blur(16px)}
.header__inner{height:100%;width:min(calc(100% - 90px),1360px);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:30px}
.identity{display:inline-flex;gap:12px;align-items:center;white-space:nowrap;flex-shrink:0}
.identity__symbol{height:52px;width:45px;color:var(--gold)}
.identity__text{display:flex;flex-direction:column;gap:6px}
.identity__jp{font-size:16px;letter-spacing:.23em;font-family:var(--jp-serif);font-weight:400}
.identity__jp strong{font-size:24px;letter-spacing:.12em;font-weight:500}
.identity__en{font-family:var(--en-serif);font-size:10px;letter-spacing:.24em;color:var(--gold-deep)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.5vw,38px);font-family:var(--en-serif);font-size:14px;letter-spacing:.1em;font-weight:600}
.nav>a:not(.nav__button){padding:10px 0;transition:color .2s}
.nav>a:not(.nav__button):hover{color:var(--gold)}
.nav__button{border:1px solid var(--gold);padding:13px 20px 13px 24px;color:var(--gold-deep);font-family:var(--jp-sans);font-size:11px;letter-spacing:.1em;white-space:nowrap;transition:background .2s,color .2s}
.nav__button span{padding-left:20px;font-size:14px}
.nav__button:hover{color:white;background:var(--gold)}
.menu-toggle{display:none;position:relative;border:none;background:transparent;width:42px;height:42px;cursor:pointer;z-index:60}
.menu-toggle span{position:absolute;left:8px;right:8px;top:13px;height:1px;background:var(--ink);transition:transform .3s,top .3s,opacity .3s}
.menu-toggle span:nth-child(2){top:21px}
.menu-toggle span:nth-child(3){top:29px}
.menu-toggle.is-open span:first-child{top:21px;transform:rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){top:21px;transform:rotate(-45deg)}
/* Hero */
.hero{padding-top:86px;position:relative;background:#f9f6ef;overflow:hidden}
.hero__grain{pointer-events:none;position:absolute;inset:86px 0 0;background:radial-gradient(ellipse at 17% 21%,rgba(222,199,159,.15),transparent 43%),url('../images/ivory-texture.webp');background-position:center;background-size:cover;opacity:.7}
.hero__inner{min-height:min(760px,calc(100svh - 86px));display:grid;grid-template-columns:53% 47%;position:relative}
.hero__content{position:relative;align-self:center;z-index:3;padding:100px 7% 90px max(8vw,calc((100vw - var(--container))/2));min-width:0}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--en-serif);font-size:15px;font-weight:600;letter-spacing:.15em;color:var(--gold-deep)}
.eyebrow__line{height:1px;width:29px;background:var(--gold)}
.hero__script{font-family:var(--en-serif);font-size:27px;font-weight:500;font-style:italic;letter-spacing:.09em;color:#a18866;margin:28px 0 24px}
.hero h1{font-family:var(--jp-serif);font-size:clamp(37px,3.3vw,58px);font-weight:400;line-height:1.8;letter-spacing:.075em;margin:0;white-space:nowrap}
.text-gold{color:var(--gold)}
.hero__lead{font-family:var(--jp-serif);font-size:14px;line-height:2.6;letter-spacing:.1em;color:#6c625b;margin:33px 0 34px}
.button{min-width:232px;display:inline-flex;gap:24px;align-items:center;justify-content:space-between;padding:18px 22px 18px 29px;font-family:var(--en-serif);font-size:15px;letter-spacing:.13em;font-weight:600;transition:background .2s,transform .2s,color .2s}
.button:hover{transform:translateY(-3px)}
.button--dark{background:#45382b;color:white;border:1px solid #45382b}
.button--dark:hover{background:#6e5438}
.button__arrow{font-family:var(--jp-sans);font-size:17px;color:#d6bb94}
.hero__small{color:#9a8d7a;font-family:var(--en-serif);letter-spacing:.16em;font-size:12px;margin:35px 0 0}
.hero__visual{position:relative;min-width:0;overflow:hidden;isolation:isolate;background:#ae9880}
.hero__photo{position:absolute;inset:-2px;background-image:linear-gradient(90deg,rgba(246,234,213,.17),transparent 24%),url('../images/hero-beauty.webp');background-size:cover;background-position:53% 41%;transition:transform 8s ease}
.hero__visual:hover .hero__photo{transform:scale(1.045)}
.hero__visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,249,238,.35),transparent 19%),linear-gradient(0deg,rgba(47,29,17,.19),transparent 24%)}
.hero__visual-label{position:absolute;bottom:44px;right:37px;z-index:2;color:white;display:flex;align-items:center;gap:17px;font-family:var(--en-serif);font-size:13px;letter-spacing:.2em;text-shadow:0 1px 4px #33251f44}
.hero__visual-label i{width:46px;height:1px;background:rgba(255,255,255,.68)}
.scroll-cue{position:absolute;bottom:0;left:max(8vw,calc((100vw - var(--container))/2));height:70px;z-index:5;display:flex;align-items:center;gap:22px;color:#ab8c65;font-family:var(--en-serif);font-size:12px;font-weight:600;letter-spacing:.13em}
.scroll-cue i{height:1px;width:64px;background:#b69a72;transform-origin:left center}
/* Intro */
.intro{position:relative;background:#f9f7f3;overflow:hidden}
.intro__grid{display:grid;grid-template-columns:24% 70%;gap:6%;position:relative}
.intro__number{font-family:var(--en-serif);font-size:19px;color:var(--gold);letter-spacing:.13em;padding-top:8px}
.intro__number span{margin:0 13px;color:#c7bba6}
.intro__body{z-index:1}
.intro__body .body-copy{margin-top:28px}
.intro__flower{position:absolute;right:-34px;top:-110px;font:360px/.9 var(--en-serif);color:rgba(193,171,139,.075);pointer-events:none}
/* Brands */
.brands{background:#f2eee7;padding-top:116px;padding-bottom:120px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:42px;margin-bottom:48px}
.section-head__side{font-size:13px;font-weight:300;line-height:2.4;letter-spacing:.075em;color:#80786e;margin:0 0 10px}
.brand-card{display:grid;grid-template-columns:56% 44%;position:relative;min-height:498px;overflow:hidden;margin-bottom:24px;isolation:isolate;box-shadow:0 13px 38px rgba(68,51,35,.035)}
.brand-card__content{z-index:2;padding:42px clamp(36px,6vw,88px);display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.brand-card__index{font:500 16px var(--en-serif);letter-spacing:.17em;display:flex;gap:20px;align-items:center}
.brand-card__index i{height:1px;width:42px;background:currentColor;opacity:.55}
.brand-card__middle{padding:36px 0 32px}
.brand-card__mini{font-family:var(--jp-serif);letter-spacing:.16em;font-size:13px;margin:0 0 22px}
.brand-card__title{font-weight:400;margin:0;line-height:1.1}
.brand-card__title--villa{font:600 70px/.9 var(--en-serif);letter-spacing:-.035em}
.brand-card__title--villa small{font:500 29px/1.5 var(--en-serif);display:block;letter-spacing:.015em}
.brand-card__title--villa span{font-family:var(--jp-serif);font-size:20px;letter-spacing:.05em}
.brand-card__title--face{font-family:var(--jp-serif);font-size:clamp(28px,3vw,43px);letter-spacing:.015em;line-height:1.5}
.brand-card__copy{font-weight:300;line-height:2.25;letter-spacing:.07em;font-size:13px;margin:22px 0 23px}
.brand-card__link{min-width:190px;border:1px solid currentColor;padding:16px 20px;font-size:12px;letter-spacing:.12em;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;transition:background .3s,color .3s}
.brand-card__link:hover{background:#fff;color:#513a2a}
.brand-card__link span{font-size:17px}
.brand-card__foot{font:500 13px var(--en-serif);letter-spacing:.2em;opacity:.65}
.brand-card__visual{background-size:cover;background-repeat:no-repeat;min-height:390px;position:relative;z-index:1}
.brand-card__visual:after{content:'';position:absolute;inset:0;opacity:.7}
.brand-card--villa{background:#2e211a;color:#f9eee0}
.brand-card--villa .brand-card__index{color:#dfbd90}
.brand-card--villa .brand-card__mini{color:#ddc9ae}
.brand-card--villa .brand-card__copy{color:#ded0c3}
.brand-card--villa .brand-card__link{color:#e5c39a}
.brand-card__visual--villa{background-image:url('../images/villa-relaxation.webp');background-position:48% 48%}
.brand-card__visual--villa:after{background:linear-gradient(90deg,#2e211a 0%,transparent 29%,transparent 72%,#2e211a33)}
.brand-card--face{background:#e9dcd1;color:#543d34}
.brand-card--face .brand-card__content{order:2}
.brand-card--face .brand-card__visual{order:1}
.brand-card--face .brand-card__index{color:#a16d5f}
.brand-card--face .brand-card__mini{color:#946a5d}
.brand-card--face .brand-card__copy{color:#67534b}
.brand-card--face .brand-card__link{color:#775549}
.brand-card--face .brand-card__link:hover{background:#fff}
.brand-card__visual--face{background-image:url('../images/facelabo-beauty.webp');background-position:50% 48%}
.brand-card__visual--face:after{background:linear-gradient(270deg,#e9dcd1 0%,transparent 34%)}
.brands__note{font-size:11px;color:#958879;line-height:1.8;letter-spacing:.025em;text-align:right;margin:12px 0 0}
/* About */
.philosophy{display:grid;grid-template-columns:47% 53%;padding:0;min-height:680px;background:#f8f6f1}
.philosophy__image{position:relative;min-height:680px;background:#cdc1a8;overflow:hidden}
.philosophy__image-frame{position:absolute;inset:0;background:linear-gradient(0deg,rgba(47,39,28,.19),transparent 45%),url('../images/spa-atmosphere.webp') center 45%/cover no-repeat;transition:transform 10s ease}
.philosophy__image:hover .philosophy__image-frame{transform:scale(1.04)}
.philosophy__image:before{position:absolute;content:'';z-index:1;inset:24px;border:1px solid rgba(255,252,240,.6);pointer-events:none}
.philosophy__image-caption{position:absolute;bottom:50px;left:54px;z-index:2;color:white;font:500 16px var(--en-serif);letter-spacing:.2em;text-shadow:0 2px 8px #3f372e}
.philosophy__content{align-self:center;padding:90px 12% 92px 11%;max-width:700px}
.philosophy__content .headline{line-height:1.65}
.philosophy__content .body-copy{margin:31px 0}
.philosophy__after{font-family:var(--jp-serif);font-size:15px;color:var(--gold-deep);margin:34px 0 22px;line-height:2}
.philosophy__signature{padding-top:20px;border-top:1px solid #dbd1c3;display:flex;align-items:center;gap:22px;font-family:var(--jp-serif);letter-spacing:.12em;font-size:15px}
.philosophy__signature span{font:500 18px var(--en-serif);letter-spacing:.15em;color:var(--gold)}
/* Quote */
.manifesto{background:#2b2622;color:#f6eee2;padding:118px 0 125px;text-align:center;position:relative;overflow:hidden}
.manifesto:before,.manifesto:after{content:'';width:430px;height:430px;border:1px solid rgba(194,161,116,.12);border-radius:50%;position:absolute;top:50%;transform:translateY(-50%)}
.manifesto:before{left:-260px}.manifesto:after{right:-260px}
.manifesto__inner{position:relative;z-index:1}
.manifesto .section-kicker{color:#bc995f}
.manifesto__inner>p{font:400 clamp(36px,5.2vw,75px)/1.2 var(--en-serif);letter-spacing:.065em;margin:20px 0 25px}
.manifesto__inner>p em{font-style:italic;color:#c0a17b}
.manifesto h2{font:400 clamp(18px,2vw,25px)/2 var(--jp-serif);letter-spacing:.13em}
.manifesto__ornament{font-size:31px;color:#bb9c6f;display:inline-block;margin-top:18px}
/* Company */
.company{background:#faf8f4}
.company__grid{display:grid;grid-template-columns:37% 55%;justify-content:space-between;gap:7%}
.company__intro .body-copy{margin-top:25px}
.company__monogram{margin-top:64px;color:#bba27f;font:400 48px var(--en-serif);letter-spacing:.065em;line-height:1}
.company__monogram span{font-size:11px;display:block;letter-spacing:.22em;padding-top:14px}
.company__table{margin:0}
.company__table>div{display:grid;grid-template-columns:135px 1fr;gap:22px;border-bottom:1px solid var(--line);padding:24px 0;line-height:1.75;letter-spacing:.05em;font-size:13px}
.company__table>div:first-child{border-top:1px solid var(--line)}
.company__table dt{color:#806d57;font-weight:500}
.company__table dd{margin:0}
.company__table dd a{display:block;margin:0 0 7px;color:#886a46;text-decoration:underline;text-decoration-color:#c5b497;text-underline-offset:5px}
.company__table dd a:last-child{margin-bottom:0}
.is-placeholder{color:#b0a8a0}
.company__disclaimer{font-size:11px;line-height:2;color:#a89f94;margin:21px 0 0}
/* Closing banner */
.outro{position:relative;isolation:isolate;text-align:center;padding:109px 0 118px;overflow:hidden;background:#c4a884;color:#fff}
.outro__texture{position:absolute;inset:0;z-index:-2;background:url('../images/recruit-atmosphere.webp') center 47%/cover no-repeat;filter:saturate(.8)}
.outro:after{content:'';position:absolute;inset:0;background:rgba(36,27,19,.68);z-index:-1}
.outro .section-kicker{color:#dfc49a}
.outro h2{font:400 clamp(28px,3vw,43px)/1.8 var(--jp-serif);letter-spacing:.11em;margin:22px 0 16px}
.outro p{font-size:13px;letter-spacing:.07em;line-height:2.1;color:#e1d4c4}
.outro__actions{display:flex;justify-content:center;gap:17px;margin-top:38px}
.outro__actions a{border:1px solid rgba(243,219,184,.87);padding:16px 24px;min-width:195px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:28px;font-size:13px;transition:background .25s,color .25s}
.outro__actions a:hover{background:#f4ece2;color:#423229}
/* Footer */
.footer{background:#f4f0e9;color:#5b5249}
.footer__top{display:flex;align-items:center;justify-content:space-between;padding-block:60px 52px;gap:35px}
.identity--footer .identity__symbol{height:56px}
.footer nav{display:flex;gap:34px;font:600 14px var(--en-serif);letter-spacing:.11em}
.footer nav a:hover{color:var(--gold)}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;padding:19px 0 27px;border-top:1px solid #ddd3c6;color:#9c9082}
.footer__bottom small{font:500 12px var(--en-serif);letter-spacing:.09em}
.back-to-top{position:fixed;bottom:25px;right:23px;z-index:20;border:1px solid #c4ae8f;width:46px;height:46px;background:rgba(248,244,237,.93);color:#9d794a;font-size:21px;cursor:pointer;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .25s,transform .25s}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--gold);color:white}
@media(max-width:1200px){
  .container{width:calc(100% - 80px)}
  .hero__content{padding-left:5.5vw}
  .scroll-cue{left:5.5vw}
  .hero h1{font-size:clamp(33px,3.8vw,48px)}
  .brand-card__content{padding-inline:46px}
  .brand-card__title--villa{font-size:60px}
}
@media(max-width:900px){
  html{scroll-padding-top:72px}
  .header{height:72px}
  .header__inner{width:calc(100% - 42px)}
  .identity__symbol{width:34px;height:43px}
  .identity__jp{font-size:13px}.identity__jp strong{font-size:20px}
  .identity__en{font-size:9px}
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;inset:72px 0 auto;min-height:calc(100dvh - 72px);background:#f8f4ed;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:40px 18px 70px;box-shadow:0 22px 40px #32261922}
  .nav.is-open{display:flex}
  .nav a{font-size:21px}
  .nav__button{font-size:13px!important;padding:16px 24px}
  .hero{padding-top:72px}
  .hero__grain{top:72px}
  .hero__inner{min-height:690px;grid-template-columns:54% 46%}
  .hero__content{padding:80px 4% 86px 6%}
  .hero h1{font-size:clamp(28px,4vw,38px);line-height:1.9}
  .hero__lead{font-size:12px;margin:23px 0;line-height:2.5}
  .hero__script{font-size:21px;margin:18px 0}
  .hero__visual-label{bottom:25px;right:15px;font-size:11px}
  .scroll-cue{left:6%;height:36px}
  .section{padding-block:90px}
  .container{width:calc(100% - 64px)}
  .intro__grid{grid-template-columns:19% 76%;gap:5%}
  .brand-card{min-height:420px;grid-template-columns:58% 42%}
  .brand-card__content{padding:34px}
  .brand-card__title--villa{font-size:53px}
  .brand-card__title--face{font-size:30px}
  .brand-card__copy{font-size:12px}
  .brand-card__visual{min-height:420px}
  .philosophy,.philosophy__image{min-height:600px}
  .philosophy__content{padding:55px 8%}
  .company__grid{grid-template-columns:38% 56%;gap:5%}
  .footer nav{gap:18px}
}
@media(max-width:680px){
  .section{padding-block:80px}
  .container{width:calc(100% - 40px)}
  .hero__inner{min-height:auto;display:flex;flex-direction:column}
  .hero__content{order:1;padding:63px 28px 74px;min-height:550px}
  .hero__eyebrow{font-size:13px}
  .hero__script{font-size:21px;margin:18px 0}
  .hero h1{font-size:clamp(27px,7.1vw,36px);line-height:1.75;letter-spacing:.055em}
  .hero__lead{margin:23px 0 27px;font-size:12px;line-height:2.25}
  .hero__lead br{display:none}
  .hero__lead{max-width:370px}
  .hero__small{font-size:10px;margin-top:26px}
  .hero__visual{order:2;min-height:390px}
  .hero__photo{background-position:center 32%;background-size:cover}
  .scroll-cue{display:none}
  .headline,.headline--lg{font-size:clamp(26px,6.2vw,35px);line-height:1.85}
  .body-copy{font-size:12px;line-height:2.4}
  .intro__grid{display:block}
  .intro__number{font-size:13px;margin-bottom:26px}
  .intro__flower{font-size:210px;top:50px;right:-5px}
  .intro__body .body-copy br{display:none}
  .brands{padding-top:83px}
  .section-head{display:block;margin-bottom:34px}
  .section-head__side{margin-top:20px;font-size:12px}
  .brand-card{display:flex;flex-direction:column;min-height:auto;margin-bottom:22px}
  .brand-card__content{order:2!important;padding:32px 28px 35px}
  .brand-card__visual{order:1!important;height:290px;min-height:290px;background-position:center 43%}
  .brand-card__visual--villa:after{background:linear-gradient(0deg,#2e211a60,transparent 36%)}
  .brand-card__visual--face:after{background:linear-gradient(0deg,#e9dcd177,transparent 28%)}
  .brand-card__middle{padding:26px 0 25px}
  .brand-card__title--villa{font-size:62px}
  .brand-card__title--face{font-size:32px}
  .brand-card__copy{font-size:12px;line-height:2.15}
  .brand-card__foot{font-size:11px}
  .brands__note{font-size:10px;text-align:left}
  .philosophy{display:flex;flex-direction:column}
  .philosophy__image{min-height:370px}
  .philosophy__content{padding:70px 27px 78px}
  .philosophy__content .body-copy{font-size:12px}
  .philosophy__image-caption{font-size:13px;left:35px;bottom:36px}
  .manifesto{padding-block:79px}
  .manifesto__inner>p{font-size:clamp(34px,9vw,51px)}
  .manifesto h2{font-size:16px;letter-spacing:.07em}
  .company__grid{display:block}
  .company__intro .body-copy{margin-top:24px}
  .company__monogram{display:none}
  .company__table-wrap{margin-top:41px}
  .company__table>div{grid-template-columns:95px 1fr;gap:12px;padding:19px 0;font-size:12px}
  .company__disclaimer{font-size:10px}
  .outro{padding:81px 0 87px}
  .outro h2{font-size:29px}
  .outro__actions{flex-direction:column;align-items:center;margin-top:28px}
  .outro__actions a{width:min(100%,360px)}
  .footer__top{display:block;padding-block:50px 35px}
  .footer nav{flex-wrap:wrap;margin-top:34px;gap:17px 24px}
  .footer__bottom{flex-direction:column;gap:8px;padding-bottom:23px}
}
@media(max-width:370px){
  .hero__content{padding-left:20px;padding-right:18px}
  .hero h1{font-size:27px}
  .brand-card__title--villa{font-size:54px}
  .brand-card__title--face{font-size:28px}
  .brand-card__content{padding-inline:23px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* HOUJOU corporate edition / 2026-10-25 */
:root{--muted:#6e6257;--gold:#937042;--gold-deep:#7c5f36;--line:#dcd2c4}
body{font-size:15px;font-weight:400;line-height:1.8}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{width:min(calc(100% - 112px),1180px)}
p{margin-top:0}
.body-copy{font-size:14px;font-weight:400;color:#655c53;line-height:2.35}
.section-kicker{font-size:15px;color:#876739;font-weight:500;letter-spacing:.16em;margin:0 0 22px}
.headline{line-height:1.75;letter-spacing:.045em;margin-top:0}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;min-height:48px;padding:10px 0;border-bottom:1px solid #a58a66;font-size:13px;letter-spacing:.06em;color:#6d5030;transition:color .25s,gap .25s}
.text-link:hover{color:#302922;gap:60px}
.text-link span[aria-hidden]{font-size:19px}
.header__inner{max-width:1440px;width:calc(100% - 80px)}
.nav{gap:clamp(20px,3vw,44px);font-family:var(--jp-sans);font-weight:400;letter-spacing:.04em}
.nav>a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;padding:8px 0!important;position:relative}
.nav>a small{font-family:var(--en-serif);font-size:10px;color:#826943;letter-spacing:.14em;line-height:1}
.nav>a[aria-current=page]:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#b59b75}
.nav>a.nav__button{padding:12px 25px!important;background:var(--brown);color:var(--white);border-color:var(--brown)}
.nav__button small{color:#d3bb96!important}
.nav__button:hover{background:#66503c!important}
.nav__button[aria-current=page]:after{display:none}
.nav__button span{padding:0;font-size:12px}
.hero__inner{min-height:740px;grid-template-columns:51% 49%}
.hero__content{padding:75px 5% 78px max(6vw,calc((100vw - 1180px)/2));align-self:center}
.hero__eyebrow{font-size:13px}
.hero__script{font-size:24px;letter-spacing:.045em;margin:24px 0 26px}
.hero h1{font-size:clamp(38px,3.5vw,55px);line-height:1.62;letter-spacing:.07em;white-space:normal}
.hero__lead{font-size:14px;line-height:2.25;margin:25px 0 28px}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:51% 39%;background:none}
.hero__small{font-size:10px;margin:28px 0 0;color:#796b59}
.hero__visual-label{font-size:11px;letter-spacing:.12em;bottom:30px;right:26px}
.scroll-cue{left:max(6vw,calc((100vw - 1180px)/2));height:42px;font-size:10px;color:#7f6745}
.button{font-family:var(--jp-sans);font-size:12px;font-weight:400;min-height:56px;padding:16px 25px;letter-spacing:.09em}
.button--dark{background:#43362a;border-color:#43362a;cursor:pointer}
.button--dark span{color:#ddc49d;font-size:18px}
.hero .button{min-width:254px}
.intro__grid{grid-template-columns:23% 72%;gap:5%}
.intro__number{font-size:14px;white-space:nowrap}
.intro .headline{font-size:clamp(26px,2.8vw,37px)}
.intro__flower{right:0;top:-60px}
.intro .text-link{margin-top:16px}
.section-head .section-kicker{margin-bottom:22px}
.section-head__side{color:#685f56;font-weight:400}
.brands{background:#f0eae1}
.brand-card{margin-bottom:28px;box-shadow:none;min-height:535px;grid-template-columns:52% 48%}
.brand-card__content{padding:38px 54px}
.brand-card__middle{padding:32px 0}
.brand-card__index{font-size:13px}
.brand-card__mini{font-size:13px;margin-bottom:18px;letter-spacing:.11em}
.brand-card__title--villa{font-size:68px;font-weight:500}
.brand-card__title--villa small{font-size:25px;font-weight:400}
.brand-card__title--face{font-size:clamp(28px,3vw,39px)}
.brand-card__copy{font-size:13px;letter-spacing:.015em;font-weight:400;margin:24px 0 14px}
.brand-card__visual{background:none;overflow:hidden;min-height:535px}
.brand-card__visual img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .8s ease}
.brand-card__visual--villa img{object-position:50% 45%}
.brand-card__visual--face img{object-position:50% 47%}
.brand-card:hover .brand-card__visual img{transform:scale(1.025)}
.brand-card__visual:after{pointer-events:none}
.image-note{position:absolute;bottom:16px;right:18px;z-index:3;color:#fff;font:italic 12px var(--en-serif);text-shadow:0 1px 5px #302922}
.brand-tags{display:flex;gap:6px 14px;list-style:none;flex-wrap:wrap;padding:0;margin:0 0 22px;font-size:10px;letter-spacing:.04em}
.brand-tags li{padding:3px 0;border-bottom:1px solid #ffffff44}
.brand-card--face .brand-tags li{border-color:#785e4444}
.brand-card__link{font-size:12px;padding:13px 18px;min-height:50px}
.brand-card__foot{font-size:10px;opacity:1;color:#bda98f}
.brand-card--face .brand-card__foot{color:#816354}
.brand-card--face .brand-card__index,.brand-card--face .brand-card__mini{color:#805144}
.brands__note{font-size:11px;line-height:2;color:#716355}
.section-end{display:flex;justify-content:flex-end;margin-top:30px}
.philosophy,.philosophy__image{min-height:620px}
.philosophy__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.philosophy__image-caption{font-size:12px}
.philosophy__content{padding:80px 13% 80px 12%}
.philosophy .headline{font-size:clamp(27px,2.6vw,36px)}
.company-tease__inner{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.company-tease .headline{font-size:clamp(28px,2.7vw,38px)}
.contact-band{background:#302720;color:#f9f3e9;padding:75px 0;position:relative;overflow:hidden}
.contact-band:after{content:'H';font:400 300px/.8 var(--en-serif);position:absolute;right:30%;bottom:-60px;color:#ffffff05;pointer-events:none}
.contact-band__inner{display:flex;justify-content:space-between;align-items:center;gap:40px;position:relative;z-index:1}
.contact-band .section-kicker{color:#ccaf82;margin-bottom:15px;font-size:14px}
.contact-band h2{font-family:var(--jp-serif);font-weight:400;font-size:28px;letter-spacing:.06em;margin:0 0 12px}
.contact-band p:not(.section-kicker){font-size:12px;color:#d6c7b5;margin:0}
.button--outline{border:1px solid #c3ac8a;color:#f7ecdb;min-width:260px}
.button--outline:hover{background:#efe4d3;color:#302720}
.footer__top{padding-block:62px 44px;align-items:flex-start}
.footer nav{font-family:var(--jp-sans);font-weight:400;gap:12px 26px;font-size:12px;letter-spacing:.03em;flex-wrap:wrap;justify-content:flex-end;max-width:580px;padding-top:18px}
.footer nav a{padding-block:8px}
.footer__tagline{font:400 11px var(--jp-serif);letter-spacing:.09em;color:#71604b;margin:20px 0 0}
.footer__bottom{align-items:center;color:#736553;font-size:10px;line-height:1.8}
.footer__bottom>span{font:italic 13px var(--en-serif);letter-spacing:.05em}
.footer__bottom small{font-size:11px}
.footer__bottom>a{padding:8px 0}
.back-to-top{bottom:18px;right:16px;width:44px;height:44px;color:#795a31;border-color:#aa8c66}
/* Interior pages */
.page-top{padding-top:86px;background:#f1ebe2}
.breadcrumb{display:flex;align-items:center;gap:15px;font-size:10px;color:#766855;padding-top:25px}
.breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.page-hero{padding:40px 0 58px}
.page-hero__inner{display:flex;justify-content:space-between;align-items:center;gap:60px}
.page-hero__en{font:400 clamp(60px,7vw,100px)/1.05 var(--en-serif);letter-spacing:-.025em;color:#8c7150;margin:0 0 17px}
.page-hero h1{font:400 27px/1.5 var(--jp-serif);letter-spacing:.12em;margin:0 0 26px}
.page-hero__lead{font-size:13px;color:#675c50;letter-spacing:.07em;line-height:2.2;margin:0}
.page-hero img{width:30%;max-width:340px;height:242px;object-fit:cover;object-position:center 43%}
.about-statement__grid{display:grid;grid-template-columns:24% 71%;gap:5%}
.about-statement .headline{margin-bottom:36px}
.about-statement .body-copy{margin-bottom:26px}
.statement-sign{font-family:var(--jp-serif);font-size:14px;letter-spacing:.1em;margin:44px 0 0}
.statement-sign span{color:#896a43;font:500 19px var(--en-serif);margin-left:25px;letter-spacing:.13em}
.values{background:#f1ece4}
.values__list{margin-top:48px;border-top:1px solid #cfc1ad}
.values__list article{display:grid;grid-template-columns:65px 35% 1fr;gap:32px;border-bottom:1px solid #cfc1ad;padding:34px 0;align-items:center}
.values__list article>span{font:italic 27px var(--en-serif);color:#8b6b40}
.values__list h3{font:400 20px/1.8 var(--jp-serif);margin:0}
.values__list p{font-size:13px;line-height:2.2;color:#655b50;margin:0}
.brands-intro{padding-bottom:60px}
.brand-jump{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.brand-jump a{font-size:13px;padding:18px 0;border-top:1px solid #cfbfa9;border-bottom:1px solid #cfbfa9;display:flex;justify-content:space-between;gap:10px}
.brands--detail{padding:80px 0 90px}
.brands--detail [id]{scroll-margin-top:110px}
.brand-detail{display:grid;grid-template-columns:24% 70%;gap:6%;padding:30px 0 100px}
.brand-detail h3{font:400 26px/1.8 var(--jp-serif);margin:0 0 24px}
.brand-detail p:not(.section-kicker){font-size:14px;line-height:2.3;color:#655b50}
.brand-detail dl{margin:30px 0;font-size:12px;border-top:1px solid #cfc1ad}
.brand-detail dl>div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid #d7cbbb}
.brand-detail dt{color:#776046}
.brand-detail dd{margin:0}
.editor-note{font-size:11px;color:#776654;line-height:2.1;padding:18px 21px;border-left:2px solid #b79b73;background:#eee6db;margin:24px 0 0}
.company__intro .headline{font-size:32px}
.company__table>div{font-size:14px;padding:24px 0;grid-template-columns:115px 1fr}
.is-placeholder{color:#85786a;font-size:13px}
.company__table dd a{font-size:13px;line-height:2.2}
.company__table-wrap{margin-top:0}
.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #d9ccbb;margin-top:45px}
.contact-options article{padding:40px 38px;background:#f1ece4}
.contact-options article+article{border-left:1px solid #d9ccbb;background:#f7f3ed}
.contact-options article>span{font:400 13px var(--en-serif);letter-spacing:.13em;color:#80613c}
.contact-options h3{font:400 27px/1.6 var(--jp-serif);margin:25px 0 18px;min-height:74px;display:flex;flex-direction:column;justify-content:center}
.contact-options h3 small{font:500 18px var(--en-serif);letter-spacing:.025em}
.contact-options p{font-size:13px;color:#655b50;line-height:2.2}
.contact-options .text-link{font-size:12px;gap:28px}
.corporate-contact{margin-top:95px;padding-top:75px;border-top:1px solid #d9ccbb;display:grid;grid-template-columns:42% 52%;justify-content:space-between;gap:6%}
.corporate-contact .headline{font-size:27px}
.contact-status{font:400 17px/2 var(--jp-serif);color:#665039;border-bottom:1px solid #cfbfa9;padding-bottom:22px;margin:0 0 23px}
.contact-faq{padding-top:100px;max-width:850px;margin:auto}
.contact-faq .headline{font-size:27px;margin-bottom:38px}
.contact-faq details{border-top:1px solid #d6c8b5}
.contact-faq details:last-child{border-bottom:1px solid #d6c8b5}
.contact-faq summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;list-style:none;font-size:14px}
.contact-faq summary::-webkit-details-marker{display:none}
.contact-faq summary span{font-size:20px;color:#947349}
.contact-faq details[open] summary span{transform:rotate(45deg)}
.contact-faq details p{font-size:13px;color:#675c50;line-height:2.2;padding:0 25px 25px 0;margin:0}
.privacy-note{margin-top:85px;padding-top:40px;border-top:1px solid #d9ccbb;scroll-margin-top:110px}
.privacy-note h2{font:400 20px var(--jp-serif);margin:0 0 24px}
.privacy-note p:not(.section-kicker){font-size:12px;color:#716453;line-height:2.2;max-width:900px}
.form-field{margin-bottom:24px}
.form-field label{display:block;font-size:13px;margin-bottom:9px}
.form-field label>span{font-size:10px;color:#79582f;margin-left:10px}
.form-field label>small{font-size:10px;color:#726757;margin-left:10px}
input,select,textarea{font:400 16px/1.6 var(--jp-sans);color:#302922}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:13px 14px;border:1px solid #bdb09d;background:#fffdf9;border-radius:0;max-width:100%}
.form-field textarea{resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #937042;outline-offset:3px}
.form-note{font-size:12px;line-height:2.1;color:#6b5c49}
.consent{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:2;margin-bottom:26px}
.consent input{width:18px;height:18px;flex-shrink:0;margin-top:3px;accent-color:#80623f}
.consent a,.form-note a{text-decoration:underline;text-underline-offset:3px}
.form-review{outline:none}
.form-review h3{font:400 22px var(--jp-serif);margin:0 0 25px}
.form-review dl>div{border-bottom:1px solid #d6c8b5;padding:16px 0}
.form-review dt{font-size:11px;color:#76614a}
.form-review dd{font-size:14px;margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.form-review>p{font-size:12px;line-height:2.1}
.review-actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:20px}
.plain-button{background:none;border:0;border-bottom:1px solid #a58a66;color:#755331;padding:8px 0;font-size:12px;cursor:pointer}
#contact-email{overflow-wrap:anywhere}
@media(min-width:901px){
 .nav>a{min-height:44px}
}
@media(max-width:1100px){
 .header__inner{width:calc(100% - 48px)}
 .nav{gap:21px}
 .nav>a.nav__button{padding-inline:16px!important}
 .container{width:calc(100% - 80px)}
 .hero__content{padding-left:5vw}
 .hero h1{font-size:clamp(35px,3.8vw,44px)}
 .brand-card__content{padding-inline:34px}
 .brand-card__copy br{display:none}
 .brand-card__title--face{font-size:29px}
 .philosophy__content{padding:70px 10%}
 .footer nav{max-width:460px;gap:8px 21px}
 .values__list article{grid-template-columns:45px 35% 1fr;gap:20px}
 .contact-options article{padding:32px 28px}
}
@media(max-width:900px){
 .header__inner{width:calc(100% - 40px)}
 .hero__inner{min-height:690px;grid-template-columns:52% 48%}
 .hero__content{padding:60px 7% 60px 7%}
 .hero h1{font-size:clamp(30px,4.3vw,39px)}
 .hero__script{font-size:21px;margin:20px 0}
 .hero__lead{font-size:12px}
 .hero__visual-label{font-size:9px;gap:10px;right:18px;left:18px;justify-content:flex-end}
 .hero__visual-label i{width:25px}
 .nav{gap:26px;padding:40px 26px;justify-content:center;overflow-y:auto;max-height:calc(100dvh - 72px)}
 .nav>a{font-size:17px;min-height:52px;gap:9px}
 .nav>a small{font-size:11px}
 .nav>a.nav__button{padding:16px 40px!important}
 .nav__button span{font-size:16px}
 .nav>a[aria-current=page]:after{left:35%;right:35%}
 .container{width:calc(100% - 64px)}
 .intro__grid{grid-template-columns:22% 73%}
 .intro__number{font-size:12px;white-space:normal;max-width:110px;line-height:2.5}
 .intro__number span{margin:0 5px}
 .brand-card{grid-template-columns:52% 48%}
 .brand-card__content{padding:30px}
 .brand-card__title--villa{font-size:59px}
 .brand-card__title--villa small{font-size:21px}
 .brand-card__title--face{font-size:27px}
 .brand-card__copy{font-size:12px}
 .brand-tags{font-size:10px;gap:5px 8px}
 .philosophy .headline{font-size:27px}
 .philosophy .body-copy br{display:none}
 .page-top{padding-top:72px}
 .page-hero__inner{gap:30px}
 .page-hero__en{font-size:70px}
 .page-hero img{height:210px;width:30%}
 .page-hero__lead{font-size:12px}
 .about-statement__grid{grid-template-columns:23% 72%}
 .values__list article{grid-template-columns:35px 37% 1fr;gap:20px}
 .values__list h3{font-size:17px}
 .values__list p{font-size:12px}
 .company__grid{grid-template-columns:34% 60%;gap:6%}
 .company__table>div{font-size:13px;grid-template-columns:85px 1fr;gap:16px}
 .contact-band h2{font-size:25px}
 .button--outline{min-width:230px}
 .footer__top{gap:35px}
 .footer nav{max-width:330px;gap:6px 22px}
 .contact-options article{padding:30px 24px}
 .contact-options h3{font-size:23px}
 .contact-options .text-link{font-size:11px;gap:14px}
 .corporate-contact{grid-template-columns:40% 54%}
 .corporate-contact .headline{font-size:23px}
 .contact-status{font-size:16px}
 html:not(.js) .header{position:relative;height:auto}
 html:not(.js) .header__inner{display:block;padding-block:15px}
 html:not(.js) .nav{display:flex;position:static;min-height:0;max-height:none;flex-direction:row;flex-wrap:wrap;padding:20px 0 0;gap:12px 20px;box-shadow:none;background:none}
 html:not(.js) .nav a{font-size:12px;min-height:44px}
 html:not(.js) .menu-toggle{display:none}
 html:not(.js) .hero,html:not(.js) .page-top{padding-top:0}
}
@media(max-width:680px){
 .container{width:calc(100% - 48px)}
 .section{padding-block:72px}
 .body-copy{font-size:13px;line-height:2.2}
 .section-kicker{font-size:13px;line-height:1.6;margin-bottom:18px}
 .headline{font-size:27px;line-height:1.85}
 .header__inner{width:calc(100% - 36px)}
 .identity{gap:9px}
 .identity__symbol{width:30px;height:40px}
 .identity__jp{font-size:11px;letter-spacing:.14em}
 .identity__jp strong{font-size:20px}
 .hero__inner{display:flex;min-height:0}
 .hero__visual{order:1;min-height:330px;height:330px;width:100%}
 .hero__photo{object-position:50% 35%}
 .hero__visual:after{background:linear-gradient(0deg,#25170d33,transparent 40%)}
 .hero__visual-label{bottom:18px;font-size:9px}
 .hero__content{order:2;align-self:stretch;padding:38px 28px 46px;min-height:0}
 .hero__script{margin:17px 0 20px;font-size:21px}
 .hero__eyebrow{font-size:11px;gap:11px}
 .hero h1{font-size:36px;line-height:1.6;letter-spacing:.055em}
 .hero__lead{margin:23px 0 26px;font-size:12px;line-height:2.2;max-width:340px}
 .hero__lead br{display:block}
 .hero__small{font-size:9px;letter-spacing:.06em;margin:22px 0 0}
 .hero .button{min-width:252px}
 .hero__grain{inset:400px 0 0}
 .intro__grid{display:block}
 .intro__number{max-width:none;margin:0 0 24px;white-space:nowrap;line-height:1.5}
 .intro .headline{font-size:25px;line-height:1.85}
 .intro .body-copy br{display:none}
 .intro .text-link{margin-top:8px}
 .intro__flower{top:60px;right:-5px}
 .section-head{margin-bottom:32px}
 .section-head__side{font-size:12px;line-height:2.1;margin-top:22px}
 .brand-card{display:flex;min-height:0;margin-bottom:24px}
 .brand-card__visual{height:285px;min-height:285px;width:100%}
 .brand-card__visual--villa img{object-position:center 53%}
 .brand-card__visual--face img{object-position:center 45%}
 .brand-card__content{padding:28px 25px 30px}
 .brand-card__middle{padding:25px 0}
 .brand-card__mini{font-size:12px;letter-spacing:.07em}
 .brand-card__title--villa{font-size:61px}
 .brand-card__title--villa small{font-size:23px}
 .brand-card__title--face{font-size:29px}
 .brand-card__copy{font-size:12px;line-height:2.2;margin:21px 0 13px}
 .brand-tags{font-size:10px;gap:8px 12px;margin-bottom:23px}
 .brand-card__link{min-width:216px}
 .brand-card__foot{font-size:10px}
 .brands__note{font-size:11px;text-align:left}
 .section-end{justify-content:flex-start;margin-top:18px}
 .philosophy{min-height:0}
 .philosophy__image{min-height:370px;height:370px}
 .philosophy__content{padding:64px 28px 70px}
 .philosophy .headline{font-size:27px}
 .philosophy .body-copy{font-size:13px}
 .philosophy__image-caption{font-size:11px;left:34px}
 .company-tease__inner{display:block}
 .company-tease .headline{font-size:28px}
 .company-tease .body-copy{margin-top:24px}
 .contact-band{padding:56px 0 60px}
 .contact-band__inner{display:block}
 .contact-band h2{font-size:24px;letter-spacing:.04em}
 .contact-band .button{margin-top:30px;min-width:254px}
 .contact-band:after{right:0}
 .footer__top{padding:48px 0 30px}
 .footer nav{margin-top:27px;max-width:none;justify-content:flex-start;padding:0;gap:7px 20px;font-size:11px}
 .footer__tagline{font-size:11px}
 .footer__bottom{align-items:flex-start;gap:8px;padding:20px 0 30px}
 .footer__bottom>a{padding:3px 0}
 .page-hero{padding:32px 0 42px}
 .breadcrumb{font-size:10px;padding-top:22px;gap:12px}
 .page-hero__inner{display:block;position:relative}
 .page-hero__en{font-size:65px;margin-bottom:13px;line-height:1.1}
 .page-hero h1{font-size:23px;margin-bottom:20px}
 .page-hero__lead{font-size:12px;letter-spacing:.04em;max-width:320px}
 .page-hero img{width:100%;max-width:none;height:170px;margin-top:30px;display:block;object-position:center 45%}
 .about-statement__grid{display:block}
 .about-statement .headline{font-size:27px;margin:24px 0 26px}
 .about-statement .body-copy br{display:none}
 .statement-sign{margin-top:32px}
 .values__list{margin-top:32px}
 .values__list article{display:grid;grid-template-columns:30px 1fr;gap:12px 16px;padding:27px 0}
 .values__list h3{font-size:18px}
 .values__list p{grid-column:2;font-size:12px}
 .values .headline{font-size:25px}
 .brand-jump{grid-template-columns:1fr;margin-top:32px;gap:0}
 .brand-jump a{font-size:12px;min-height:60px;align-items:center;padding:15px 0}
 .brand-jump a+a{border-top:0}
 .brands--detail{padding:48px 0 65px}
 .brand-detail{display:block;padding:12px 0 65px}
 .brand-detail h3{font-size:23px;line-height:1.8}
 .brand-detail p:not(.section-kicker){font-size:13px;line-height:2.2}
 .brand-detail dl>div{grid-template-columns:95px 1fr;gap:15px}
 .brand-detail .text-link{font-size:12px;gap:20px}
 .company__grid{display:block}
 .company__intro .headline{font-size:28px}
 .company__table-wrap{margin-top:35px}
 .company__table>div{grid-template-columns:80px 1fr;gap:14px;padding:19px 0;font-size:12px}
 .company__table dd a{font-size:12px;overflow-wrap:anywhere}
 .editor-note{font-size:11px;padding:15px 16px}
 .is-placeholder{font-size:12px}
 .contact-main .headline{font-size:24px}
 .contact-options{grid-template-columns:1fr;margin-top:32px}
 .contact-options article{padding:30px 25px 34px}
 .contact-options article+article{border-left:0;border-top:1px solid #d9ccbb}
 .contact-options h3{min-height:0;font-size:25px;margin:22px 0 17px}
 .contact-options p{font-size:12px}
 .contact-options .text-link{font-size:12px;gap:24px}
 .corporate-contact{display:block;padding-top:45px;margin-top:58px}
 .contact-status{margin-top:28px;font-size:16px}
 #corporate-form-area{margin-top:35px}
 .contact-faq{padding-top:65px}
 .contact-faq summary{font-size:13px;line-height:2;padding:22px 0;gap:14px}
 .contact-faq details p{font-size:12px}
 .privacy-note{margin-top:60px;padding-top:32px}
 .form-field label{font-size:12px}
}
@media(max-width:370px){
 .container{width:calc(100% - 40px)}
 .hero__content{padding-inline:24px}
 .hero h1{font-size:32px}
 .hero__visual{height:300px;min-height:300px}
 .brand-card__title--face{font-size:26px}
 .brand-card__content{padding-inline:22px}
 .contact-options article{padding-inline:21px}
 .page-hero__en{font-size:57px}
 .hero .button{min-width:244px}
 .contact-band .button{min-width:244px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
/* Keep validation and keyboard focus scrolling immediate and predictable. */
html{scroll-behavior:auto}
#form-review{scroll-margin-top:110px}
input,select,textarea,summary{scroll-margin-top:110px}

/* Header business-location dropdown */
.nav__dropdown{position:relative}
.nav__dropdown summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;min-height:44px;padding:8px 0;cursor:pointer;list-style:none;font:400 12px/1.8 var(--jp-sans);letter-spacing:.04em;white-space:nowrap;scroll-margin-top:110px}
.nav__dropdown summary::-webkit-details-marker{display:none}
.nav__dropdown summary>span{display:flex;align-items:center;gap:8px}
.nav__dropdown summary>small{font:400 10px/1 var(--en-serif);color:#826943;letter-spacing:.14em}
.nav__chevron{width:10px;height:7px;transition:transform .2s ease;color:#927044}
.nav__dropdown[open] .nav__chevron{transform:rotate(180deg)}
.nav__dropdown summary:hover,.nav__dropdown[open] summary{color:var(--gold-deep)}
.nav__dropdown.is-current summary:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#b59b75}
.nav__dropdown-panel{position:absolute;top:calc(100% + 19px);left:50%;transform:translateX(-50%);width:310px;padding:12px 24px;background:#fcf9f3;border:1px solid #d7c8b3;box-shadow:0 16px 35px #30272018;z-index:55;white-space:normal}
.nav__dropdown-panel:before{content:'';position:absolute;left:0;right:0;top:-21px;height:21px}
.nav__dropdown-panel>a{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;min-height:88px;padding:20px 26px 20px 0;font:400 13px/1.6 var(--jp-sans);letter-spacing:.025em;transition:color .2s}
.nav__dropdown-panel>a+a{border-top:1px solid #e2d6c6}
.nav__dropdown-panel>a>small{font:400 10px/1.3 var(--en-serif);color:#83623a;letter-spacing:.12em}
.nav__dropdown-panel>a>i{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:17px;font-style:normal;color:#8a6a42}
.nav__dropdown-panel>a:hover{color:#8a6131}
@media(max-width:900px){
 .nav__dropdown{width:min(100%,340px)}
 .nav__dropdown summary{font-size:17px;gap:9px;min-height:52px;margin-inline:auto;width:max-content}
 .nav__dropdown summary>small{font-size:11px}
 .nav__dropdown-panel{position:static;transform:none;width:100%;margin-top:18px;padding:4px 18px;background:#eee5d8;box-shadow:none}
 .nav__dropdown-panel:before{display:none}
 .nav__dropdown-panel>a{min-height:76px;font-size:13px;padding-block:16px}
 .nav:has(.nav__dropdown[open]){justify-content:flex-start}
 .nav__dropdown-panel a:focus-visible{outline-offset:2px}
 html:not(.js) .nav__dropdown{width:auto}
 html:not(.js) .nav__dropdown summary{font-size:12px;min-height:44px}
 html:not(.js) .nav__dropdown-panel{width:280px}
}

/* Privacy policy */
.privacy-policy{max-width:900px;margin:28px 0;padding-left:1.6em}
.privacy-policy li{margin:0 0 22px;padding-left:.45em;color:#716453;font-size:13px}
.privacy-policy h3{margin:0 0 7px;color:#403429;font:500 15px var(--jp-serif);line-height:1.8}
.privacy-note .privacy-policy p{font-size:13px;margin:0;overflow-wrap:anywhere}

/* Contact request steps and delivery feedback */
.form-steps{display:flex;list-style:none;padding:0;margin:0 0 32px;border-bottom:1px solid #d9ccbb;gap:24px;font-size:12px;color:#8a7b68}
.form-steps li{padding:0 0 12px}
.form-steps li[aria-current="step"]{color:#5c4328;border-bottom:2px solid #8c6c43;font-weight:600}
.form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{font-size:13px;line-height:1.9;color:#923f32;padding:14px 16px;border:1px solid #d5a49a;background:#fff6f2;overflow-wrap:anywhere}
.form-complete{outline:none;scroll-margin-top:110px}
.form-complete h3{font:400 24px/1.8 var(--jp-serif);margin:16px 0 24px}
.form-complete>p{font-size:13px;line-height:2.2}
.form-complete .text-link{margin-top:24px}
button:disabled{opacity:.6;cursor:wait}
#inquiry-receipt{overflow-wrap:anywhere}
@media(max-width:600px){.form-steps{gap:20px;margin-top:32px}.form-complete h3{font-size:21px}.review-actions{align-items:flex-start;flex-direction:column}}
html:not(.js) #contact-form,html:not(.js) .form-steps{display:none}

/* Store names and reservation links */
.brand-card__title--face > span {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .05em;
}
.brand-card__actions {
  display: grid;
  gap: 4px;
  width: min(100%, 310px);
}
.brand-card__actions .brand-card__link {
  gap: 16px;
  width: 100%;
  min-width: 0;
  letter-spacing: .025em;
}
.brand-card__site-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  width: fit-content;
  min-height: 44px;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brand-card__site-link span { font-size: 17px; }
.salon-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 24px;
}
.salon-detail-actions .button { gap: 20px; font-size: 13px; }
@media (max-width: 680px) {
  .salon-detail-actions { align-items: flex-start; flex-direction: column; }
}

/* Store reservation selectors */
.reservation {
  width: min(100%, 310px);
  min-width: 0;
  border: 1px solid currentColor;
  color: #624a35;
  font-size: 13px;
}
.reservation summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 50px;
  padding: 13px 18px;
  list-style: none;
  cursor: pointer;
  line-height: 1.7;
}
.reservation summary::-webkit-details-marker { display: none; }
.reservation__chevron { flex-shrink: 0; }
.reservation[open] .reservation__chevron { transform: rotate(180deg); }
.reservation__options { padding: 4px 16px; border-top: 1px solid currentColor; }
.reservation__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 0;
  line-height: 1.8;
}
.reservation__link + .reservation__link { border-top: 1px solid #ad947b66; }
.reservation__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.brand-card--villa .reservation { color: #e5c39a; }
.brand-card--face .reservation { color: #775549; }
.brand-card__actions .reservation { width: 100%; }
.reservation--dark summary { background: #43362a; color: #fff; }
.reservation--dark .reservation__options { background: #fffdf8; }
.salon-detail-actions { align-items: flex-start; }
.salon-location .reservation { margin: 8px 0; font-size: 12px; }

/* Shared page grid and responsive type */
:root {
  --page-gutter: clamp(20px, 4.5vw, 68px);
  --content-width: 1180px;
  --section-space: clamp(52px, 7.2vw, 104px);
}
.container, .header__inner {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-width));
}
.section, .brands--detail { padding-block: var(--section-space); }
.headline, .brand-detail h3, .values__list h3 { text-wrap: balance; }
.body-copy, .brand-card__copy, .brand-detail p:not(.section-kicker),
.values__list p, .section-head__side, .page-hero__lead {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.95;
}
.intro .body-copy, .about-statement .body-copy, .brand-detail p { max-width: 45em; }
.section-head { gap: clamp(24px, 5vw, 72px); margin-bottom: clamp(28px, 3.5vw, 48px); }
.brand-tags { font-size: 12px; gap: 5px 14px; line-height: 1.6; }
.brand-tags li { white-space: nowrap; }
.brand-card__middle { padding-block: clamp(20px, 2.2vw, 32px); }
.brand-card__site-link, .reservation, .salon-location .reservation { font-size: 14px; }
.reservation__link > span, .text-link > span[aria-hidden] { flex-shrink: 0; }
.brand-detail { padding-bottom: clamp(44px, 6vw, 84px); }
.brand-detail:last-of-type { padding-bottom: 22px; }
.brand-detail dl { font-size: 14px; }
.brand-detail dl > div, .company__table > div { align-items: baseline; }
.company__table dd { min-width: 0; overflow-wrap: anywhere; }
.footer nav a, .footer__bottom > a { display: inline-flex; align-items: center; min-height: 44px; }
.menu-toggle { width: 44px; height: 44px; }
@media (min-width: 681px) {
  .hero__inner { min-height: clamp(540px, 75svh, 730px); grid-template-columns: 1fr 1fr; }
  .hero__content {
    padding: clamp(44px, 4vw, 68px) clamp(20px, 3vw, 44px) 54px
      max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  }
  .scroll-cue { left: max(var(--page-gutter), calc((100vw - var(--content-width)) / 2)); height: 36px; }
  .brand-card { grid-template-columns: 1fr 1fr; min-height: 0; }
  .brand-card__content { padding: clamp(26px, 3.6vw, 54px); }
  .brand-card__visual { min-height: 100%; }
  .philosophy, .philosophy__image { min-height: clamp(420px, 43vw, 590px); }
  .philosophy__content { padding: clamp(40px, 5vw, 76px) clamp(28px, 4.5vw, 72px); }
  .page-hero__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .page-hero img { width: 100%; max-width: none; height: clamp(186px, 20vw, 280px); }
}
@media (max-width: 900px) {
  .js .nav { justify-content: flex-start; min-height: 0; gap: 8px; padding-block: 18px 26px; }
  .js .nav > a, .js .nav__dropdown { flex-shrink: 0; }
}
@media (max-width: 680px) {
  .hero__visual { height: clamp(210px, 61vw, 320px); min-height: 0; }
  .hero__grain { inset: 72px 0 0; }
  .hero__content { padding: 28px var(--page-gutter) 40px; }
  .hero__script { margin: 12px 0 14px; }
  .hero h1 { font-size: clamp(30px, 8vw, 41px); line-height: 1.5; }
  .hero__lead { font-size: 14px; line-height: 1.95; max-width: 32em; margin-block: 18px 22px; }
  .hero__small { margin-top: 16px; font-size: 11px; }
  .hero .button, .contact-band .button { width: min(100%, 320px); min-width: 0; }
  .hero__lead br, .brand-card__copy br, .section-head__side br { display: none; }
  .brand-card__visual { height: auto; min-height: 0; aspect-ratio: 8 / 5; }
  .brand-card__content { padding: clamp(20px, 5.5vw, 32px); }
  .brand-card__copy { margin-top: 18px; }
  .brand-card__actions, .salon-detail-actions .reservation { width: 100%; }
  .brand-tags { gap: 5px 12px; margin-bottom: 20px; }
  .philosophy__image { height: clamp(220px, 70vw, 360px); min-height: 0; }
  .philosophy__content { width: 100%; padding: var(--section-space) var(--page-gutter); }
  .philosophy .body-copy { font-size: 14px; }
  .page-hero { padding-block: 20px 28px; }
  .page-hero__en { font-size: clamp(46px, 12vw, 66px); margin-bottom: 8px; }
  .page-hero h1 { margin-bottom: 12px; }
  .page-hero img { height: clamp(145px, 42vw, 220px); margin-top: 22px; }
  .values__list article { grid-template-columns: 26px minmax(0, 1fr); gap: 8px 12px; }
  .company__table > div, .brand-detail dl > div {
    grid-template-columns: minmax(62px, 23%) minmax(0, 1fr);
    gap: 12px;
    font-size: 14px;
  }
  .company__table dd a { font-size: 14px; }
  .footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .footer nav a { border-bottom: 1px solid var(--line); font-size: 13px; }
  .footer__bottom { padding-right: 48px; }
}

/* Preserve the complete About image composition across screen sizes. */
.page-hero .about-hero__image {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

/* Let mobile photographs determine their height from the original ratio. */
@media (max-width: 680px) {
  .hero__visual, .brand-card__visual, .philosophy__image {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .hero__photo, .brand-card__visual img, .philosophy__image img,
  .page-hero img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none;
  }
  .hero__visual:hover .hero__photo,
  .brand-card:hover .brand-card__visual img { transform: none; }
}

/* Preserve the bottom homepage photo's original proportions on desktop. */
@media (min-width: 681px) {
  .philosophy--home { align-items: center; min-height: 0; }
  .philosophy--home .philosophy__image { min-height: 0; }
  .philosophy--home .philosophy__image img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Show complete business and company header photographs at every width. */
.page-hero .page-hero__image--full {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}