:root{
  --bg:#fbfaf6;
  --bg-soft:#f4f2eb;
  --white:#ffffff;
  --ink:#171b1b;
  --text:#4d5552;
  --muted:#79817c;
  --line:#dbddd7;
  --accent:#cfb86d;
  --max:1180px;
  --radius:22px;
  --sans:"Helvetica Neue","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-feature-settings:"palt" 1}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto;filter:none!important;image-rendering:auto}
figure,p,h1,h2,h3{margin:0}
p{text-wrap:pretty}

.header{position:fixed;inset:0 0 auto 0;z-index:50;height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(24px,4vw);background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72),rgba(255,255,255,0));backdrop-filter:blur(9px);transition:.25s}
.header.scrolled{height:62px;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(23,27,27,.06)}
.header-logo img{width:114px}
.header-nav{display:flex;gap:30px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4e5753}
.header-nav a{position:relative}
.header-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:.25s}
.header-nav a:hover::after{right:0}
.header-status{justify-self:end;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(23,27,27,.12);border-radius:999px;background:rgba(255,255,255,.84);font-size:10px;letter-spacing:.08em;color:#5f6864;white-space:nowrap}
.header-status span{width:7px;height:7px;border-radius:50%;background:#b6a96f}

.hero{position:relative;height:100svh;min-height:720px;overflow:hidden;background:#eef0eb}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(252,251,246,.92) 0%,rgba(252,251,246,.78) 28%,rgba(252,251,246,.26) 54%,rgba(252,251,246,0) 74%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 38%,rgba(255,255,255,.04) 100%)}
.hero-content{position:absolute;left:max(32px,8.2vw);top:50%;transform:translateY(-50%);z-index:2;width:min(540px,42vw)}
.hero-logo{width:min(330px,74%);margin-bottom:42px}
.hero h1{font-size:clamp(42px,4.4vw,68px);line-height:1.34;letter-spacing:.01em;font-weight:700;text-wrap:balance}
.hero-copy{margin-top:24px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#626a66}
.hero-scroll{position:absolute;left:max(24px,4.4vw);bottom:28px;z-index:3;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.24em;color:#69716d}
.hero-scroll i{display:block;width:48px;height:1px;background:#69716d;position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--bg);animation:scrollLine 2.2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:translateX(-105%)}55%,100%{transform:translateX(105%)}}

.section{padding:124px 24px}
.section-shell{width:min(var(--max),100%);margin:0 auto}
.section-label{padding-top:22px;border-top:1px solid var(--line);margin-bottom:56px}
.section-label span{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#5f6763}
.section-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.intro-copy h2,.product-copy h2,.feature-copy h2,.fragrance-copy h2,.multi-head h2,.howto-heading h2,.shop-copy h2{font-size:clamp(31px,3vw,46px);line-height:1.42;letter-spacing:.01em;text-wrap:balance}
.intro-copy p:not(.section-kicker),.feature-copy p:not(.section-kicker),.fragrance-copy p:not(.section-kicker),.multi-head p:not(.section-kicker),.product-note,.product-pause,.howto-step p,.howto-footnote,.shop-sub,.shop-status p,.details p{font-size:15px;line-height:2.02;letter-spacing:.01em;color:var(--text)}

.intro{background:var(--white)}
.intro-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:7.5%;align-items:center}
.intro-photo{position:relative;padding:0 0 24px 24px}
.intro-photo::before{content:"";position:absolute;left:0;bottom:0;width:70%;height:70%;background:#edf0e7;border-radius:0 0 var(--radius) 0}
.intro-photo img{position:relative;z-index:1;width:100%;aspect-ratio:1.18/1;object-fit:cover;border-radius:0 0 var(--radius) 0}
.intro-copy{max-width:500px}
.intro-copy p:not(.section-kicker){margin-top:14px}

.product{background:var(--bg-soft)}
.product-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:7.5%;align-items:center}
.product-copy{max-width:430px}
.product-scent{margin-top:18px;font-size:16px;line-height:1.8;color:#5b6460}
.product-meta{margin:24px 0 0;border-top:1px solid #cfd3cd}
.product-meta div{display:grid;grid-template-columns:82px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid #cfd3cd}
.product-meta dt{font-size:12px;color:#6e7672}
.product-meta dd{margin:0;font-size:14px;color:#242a28}
.product-pause{margin-top:18px;font-size:14px;color:#434a48}
.product-note{margin-top:8px;font-size:12.5px;line-height:1.9;color:#6b7370}
.store-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.store-links a{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:#fff;border:1px solid rgba(23,27,27,.16);font-size:11px;letter-spacing:.05em;transition:.25s}
.store-links a:hover{background:#232826;color:#fff;border-color:#232826}
.product-photo{position:relative;min-height:620px;display:grid;place-items:center;background:#fff;border-radius:var(--radius);overflow:hidden}
.product-photo::before{content:"NATURAL\A STYLING\A OIL";white-space:pre;position:absolute;left:34px;top:34px;font-size:10px;line-height:1.95;letter-spacing:.26em;color:#a1a7a2}
.product-photo img{position:relative;z-index:2;width:90%;max-width:620px;object-fit:contain}
.sun-ring{position:absolute;z-index:1;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(247,224,116,.38),rgba(247,224,116,.15) 43%,rgba(247,224,116,0) 72%)}

.feature{background:#fff}
.feature-texture{background:#f4f4ef}
.feature-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:8.5%;align-items:center}
.feature-grid.reverse{grid-template-columns:.88fr 1.12fr}
.feature-visual{position:relative;padding:0 18px 18px 0}
.feature-visual::after{content:"";position:absolute;inset:22px 0 0 22px;border:1px solid rgba(23,27,27,.10);border-radius:var(--radius);pointer-events:none}
.feature-visual img{position:relative;z-index:1;width:100%;aspect-ratio:1.24/1;object-fit:cover;border-radius:var(--radius)}
.feature-copy{max-width:500px}
.feature-copy p:not(.section-kicker){margin-top:14px}

.fragrance{background:#fff}
.fragrance-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:8%;align-items:center}
.fragrance-photo img{width:100%;aspect-ratio:1/1.16;object-fit:cover;border-radius:var(--radius)}
.fragrance-copy{max-width:500px}
.fragrance-copy p:not(.section-kicker){margin-top:14px}
.scent-notes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scent-notes div{padding:18px 16px 18px 0;border-right:1px solid var(--line)}
.scent-notes div:last-child{border-right:0}
.scent-notes small{display:block;margin-bottom:8px;font-size:10px;letter-spacing:.16em;color:#8a918d}
.scent-notes strong{font-size:14px;font-weight:600;line-height:1.6;color:#242a28}

.multi{background:var(--bg-soft)}
.multi-head{max-width:760px;margin-bottom:52px}
.multi-head p:not(.section-kicker){margin-top:16px}
.multi-grid{display:grid;grid-template-columns:1fr 1fr;gap:6.5%;align-items:start}
.multi-main img{width:100%;aspect-ratio:1/1.06;object-fit:cover;border-radius:var(--radius)}
.multi-cards{display:grid;grid-template-rows:repeat(3,1fr);gap:16px}
.mini-card{display:grid;grid-template-columns:124px 1fr;align-items:center;gap:18px;min-height:176px;padding:18px;background:#fff;border:1px solid rgba(23,27,27,.08);border-radius:18px}
.mini-image{width:124px;height:124px;border-radius:50%;overflow:hidden;background:#f4f3ed}
.mini-image img{width:100%;height:100%;object-fit:cover}
.mini-copy h3{font-size:17px;line-height:1.5;letter-spacing:.01em}
.mini-copy p{margin-top:8px;font-size:12.5px;line-height:1.9;color:#6b7370}

.howto{background:#fff}
.howto-visual img{width:100%;border-radius:var(--radius)}
.howto-heading{max-width:760px;margin:46px auto 0;text-align:center}
.howto-steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:54px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.howto-step{padding:36px 34px 40px;border-right:1px solid var(--line)}
.howto-step:last-child{border-right:0}
.howto-step span{display:block;font-size:38px;font-weight:300;color:#c0c4bd;letter-spacing:.02em}
.howto-step h3{margin-top:18px;font-size:17px;line-height:1.5;letter-spacing:.01em}
.howto-step p{margin-top:10px;font-size:12.5px;line-height:1.9;color:#6b7370}
.howto-footnote{margin-top:16px;font-size:11px;line-height:1.7;color:#808783;text-align:right}

.shop{position:relative;overflow:hidden;background:#f3efe5;padding:0}
.shop-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.shop-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,250,246,.95) 0%,rgba(251,250,246,.88) 32%,rgba(251,250,246,.44) 58%,rgba(251,250,246,.15) 78%,rgba(251,250,246,0) 100%)}
.shop-shell{position:relative;z-index:1;width:min(var(--max),100%);margin:0 auto;min-height:720px;display:flex;align-items:center;padding:96px 24px}
.shop-copy{width:min(450px,100%)}
.shop-logo{width:min(360px,88%);margin:0 0 26px}
.shop-copy h2{margin-top:8px;font-size:clamp(28px,2.6vw,42px)}
.shop-sub{margin-top:14px;font-size:14px;line-height:1.8;color:#5b6460}
.shop-status{margin-top:32px;padding-left:22px;position:relative}
.shop-status::before{content:"";position:absolute;left:0;top:3px;width:3px;height:66px;background:var(--accent)}
.shop-status strong{display:block;font-size:16px;line-height:1.6;color:#232826}
.shop-status p{margin-top:8px;font-size:12.5px;line-height:1.9;color:#6b7370}
.shop-links{width:min(420px,100%);margin-top:24px}

.details{background:#fff}
.details-shell{max-width:980px}
.details details{border-top:1px solid var(--line)}
.details details:last-child{border-bottom:1px solid var(--line)}
.details summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:24px 0;cursor:pointer;font-size:14px;line-height:1.6;color:#202624}
.details summary::-webkit-details-marker{display:none}
.details summary span{font-size:18px;transition:.2s}
.details details[open] summary span{transform:rotate(45deg)}
.details p{padding:0 0 28px;font-size:13px;line-height:2;color:#5b6460}

.footer{background:#232826;padding:62px 24px 34px}
.footer-shell{width:min(var(--max),100%);margin:0 auto}
.footer img{width:120px;filter:invert(1)!important}
.footer-shell>p{margin-top:18px;color:#d5d7d2;font-size:16px;letter-spacing:.08em}
.footer-meta{margin-top:42px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:18px;font-size:11px;color:#afb4b0}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.reveal.in-view{opacity:1;transform:none}
.delay{transition-delay:.12s}
.delay2{transition-delay:.24s}

@media (max-width: 920px){
  .header{height:64px;padding:0 18px;grid-template-columns:1fr 1fr}
  .header-logo img{width:100px}
  .header-nav{display:none}
  .header-status{font-size:9px;padding:8px 10px}

  .hero{height:820px;min-height:0}
  .hero-photo{object-position:62% center}
  .hero-wash{background:linear-gradient(180deg,rgba(252,251,246,.96) 0%,rgba(252,251,246,.80) 36%,rgba(252,251,246,.14) 72%)}
  .hero-content{left:22px;right:22px;top:112px;transform:none;width:auto}
  .hero-logo{width:210px;margin-bottom:26px}
  .hero h1{font-size:34px;line-height:1.4}
  .hero-copy{font-size:11px;margin-top:18px}
  .hero-scroll{left:22px;bottom:20px}

  .section{padding:92px 22px}
  .section-label{margin-bottom:44px;padding-top:18px}

  .intro-grid,.product-grid,.feature-grid,.feature-grid.reverse,.fragrance-grid,.multi-grid{grid-template-columns:1fr;gap:40px}
  .intro-photo{padding:0 0 18px 18px}
  .intro-copy,.product-copy,.feature-copy,.fragrance-copy{max-width:none}
  .intro-copy h2,.product-copy h2,.feature-copy h2,.fragrance-copy h2,.multi-head h2,.howto-heading h2,.shop-copy h2{font-size:29px;line-height:1.48}
  .intro-copy p:not(.section-kicker),.feature-copy p:not(.section-kicker),.fragrance-copy p:not(.section-kicker),.multi-head p:not(.section-kicker),.product-note,.product-pause,.shop-status p,.details p{font-size:14px;line-height:1.95}

  .product-photo{grid-row:1;min-height:420px}
  .product-copy{grid-row:2}
  .product-photo::before{left:20px;top:22px}
  .store-links{grid-template-columns:1fr}

  .feature-visual{padding:0 12px 12px 0}
  .feature-visual::after{inset:14px 0 0 14px}
  .feature-visual img,.fragrance-photo img,.multi-main img{aspect-ratio:auto}
  .fragrance-photo img{max-height:620px}
  .scent-notes{grid-template-columns:1fr}
  .scent-notes div{padding:14px 0;border-right:0;border-bottom:1px solid var(--line)}
  .scent-notes div:last-child{border-bottom:0}

  .multi-head{margin-bottom:38px}
  .multi-cards{grid-template-rows:auto}
  .mini-card{grid-template-columns:96px 1fr;gap:14px;min-height:0;padding:14px}
  .mini-image{width:96px;height:96px}
  .mini-copy h3{font-size:15px}
  .mini-copy p{font-size:11.5px;line-height:1.8}

  .howto-heading{margin-top:34px}
  .howto-steps{grid-template-columns:1fr;margin-top:42px}
  .howto-step{padding:26px 0;border-right:0;border-bottom:1px solid var(--line)}
  .howto-step:last-child{border-bottom:0}
  .howto-step span{font-size:32px}
  .howto-step h3{margin-top:14px;font-size:16px}
  .howto-step p{font-size:11.5px}
  .howto-footnote{text-align:left}

  .shop-shell{min-height:720px;align-items:flex-start;padding:76px 22px 84px}
  .shop-overlay{background:linear-gradient(180deg,rgba(251,250,246,.96) 0%,rgba(251,250,246,.92) 44%,rgba(251,250,246,.42) 76%,rgba(251,250,246,.10) 100%)}
  .shop-bg{object-position:64% center}
  .shop-copy{width:auto}
  .shop-logo{width:260px}
  .shop-copy h2{font-size:27px}
  .shop-sub{font-size:13px}
  .shop-status::before{height:58px}

  .footer{padding:52px 22px 28px}
  .footer-meta{font-size:10px;flex-direction:column;align-items:flex-start}
}