/* ==================================================================
   MALIBU Holistic Beauty Salon — Hero Section
   v2: brand-visual background (Apple / Aesop / Hoshinoya quality)
   Design tokens sourced from MALIBU Design System v1.0
================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Color */
  --color-bg:        #FAF9F7; /* Warm White */
  --color-primary:   #0B6B6B; /* MALIBU Green */
  --color-accent:    #2F8DA8; /* Ocean Blue */
  --color-text:      #2E2E2E; /* Dark Charcoal */
  --color-wood:      #B58A63; /* Natural Oak */
  --color-sand:      #F5EFE6; /* Sand Beige */
  --color-sage:      #A9BFA9; /* Soft Sage — Mind */
  --color-pale-ocean:#AFD3DE; /* Pale Ocean Blue — Body */
  --color-olive:     #BCA96F; /* Warm Olive — Lifestyle */
  --color-morning:   #FFF6E9; /* 8:30am warm morning glow */

  /* Type */
  --font-heading: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-body:    'Noto Sans JP', sans-serif;

  /* Motion */
  --ease-apple: cubic-bezier(.22, .61, .36, 1);
  --dur-fade:   1000ms;
}

/* ---------- Reset (scoped to what this section needs) ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==================================================================
   HERO — 100vh, centered, generous whitespace
================================================================== */
.hero{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-bg);
  overflow:hidden;
}

/* Mobile only: 100svh reads as too tall/empty-feeling on phones once
   the photo's own framing is accounted for. 86svh keeps the mirror,
   plant and chair fully visible with no crop, all text/buttons clear
   of each other, and the scroll cue visible — without the extra
   empty breathing room 100svh left at this width. PC/tablet
   untouched. */
@media (max-width: 640px){
  .hero{
    min-height:86vh;
    min-height:86svh;
  }
}

/* ==================================================================
   Background — brand visual, not illustration.
   Soft, out-of-focus light and colour suggesting sunlit wood,
   foliage and glass, the way a shallow depth-of-field photograph
   would render them. No linework, no icon shapes.
================================================================== */
.hero-bg{
  position:absolute;
  inset:-4%;
  z-index:0;
  will-change:transform;
}

/* Real photo layer — sits at the back of .hero-bg, everything else
   (grain, vignette) still renders on top of it. */
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}

/* Soft light scrim so the centred wordmark/headline (dark charcoal /
   MALIBU green text) stay legible over the photo. The brand's text
   colours were designed for the warm-white background, so this washes
   the photo gently toward that same tone behind the text — strongest
   in the vertical middle, fading out top/bottom/sides — rather than
   darkening the image. */
.hero-photo-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(250,249,247,0.30) 0%, rgba(250,249,247,0.12) 22%, rgba(250,249,247,0.28) 58%, rgba(250,249,247,0.42) 100%),
    radial-gradient(ellipse 68% 62% at 50% 46%, rgba(250,249,247,0.38) 0%, rgba(250,249,247,0) 72%);
}

/* Previously the only visuals — now superseded by the real photo.
   Kept in the markup (not deleted) but hidden, so the photo can be
   swapped out again later without losing this brand-visual work. */
.hero-bg .bg-light,
.hero-bg .bg-sunbeam,
.hero-bg .bg-blob,
.hero-bg .bg-glass-plane{
  display:none;
}

@media (max-width: 640px){
  .hero-photo{ object-position:26% 40%; }
  .hero-photo-scrim{
    background:
      linear-gradient(180deg, rgba(250,249,247,0.36) 0%, rgba(250,249,247,0.16) 22%, rgba(250,249,247,0.34) 58%, rgba(250,249,247,0.52) 100%),
      radial-gradient(ellipse 90% 58% at 50% 46%, rgba(250,249,247,0.42) 0%, rgba(250,249,247,0) 74%);
  }
}

/* Overhead natural light — soft, golden, 8:30am quality.
   Slightly off-center, the way morning sun rarely falls dead-centre. */
.bg-light{
  position:absolute;
  top:-22%;
  left:46%;
  width:95vw;
  height:75vw;
  max-width:1300px;
  max-height:950px;
  transform:translateX(-50%);
  background:radial-gradient(
    ellipse at center,
    rgba(255,246,233,0.95) 0%,
    rgba(255,240,219,0.5) 40%,
    rgba(250,249,247,0) 72%
  );
}

/* A single low, warm sunbeam — as if morning light is crossing
   the room through a window. Barely-there, never literal. */
.bg-sunbeam{
  position:absolute;
  top:-10%;
  left:8%;
  width:55%;
  height:120%;
  transform:rotate(18deg);
  background:linear-gradient(
    180deg,
    rgba(255,244,224,0.42) 0%,
    rgba(255,244,224,0.12) 45%,
    rgba(255,244,224,0) 75%
  );
  filter:blur(18px);
}

/* Soft colour blobs — foliage / wood / ocean, rendered as bokeh,
   not as recognisable shapes. Irregular radii keep them organic. */
.bg-blob{
  position:absolute;
  filter:blur(100px);
  opacity:0.34;
}

.bg-blob--jade{
  width:46vw;
  height:46vw;
  min-width:380px;
  min-height:380px;
  left:-12%;
  bottom:-14%;
  border-radius:44% 56% 62% 38% / 48% 42% 58% 52%;
  background:radial-gradient(circle at 35% 35%, rgba(11,107,107,0.20), rgba(11,107,107,0) 70%);
  animation:breathe 12s ease-in-out infinite;
}

.bg-blob--oak{
  width:34vw;
  height:34vw;
  min-width:280px;
  min-height:280px;
  right:-8%;
  bottom:4%;
  border-radius:58% 42% 48% 52% / 40% 52% 48% 60%;
  background:radial-gradient(circle at 60% 40%, rgba(181,138,99,0.20), rgba(181,138,99,0) 70%);
  animation:breathe 15s ease-in-out infinite;
  animation-delay:-4s;
}

.bg-blob--ocean{
  width:30vw;
  height:30vw;
  min-width:240px;
  min-height:240px;
  right:6%;
  top:-8%;
  border-radius:50% 50% 46% 54% / 54% 46% 54% 46%;
  background:radial-gradient(circle at 45% 45%, rgba(47,141,168,0.13), rgba(47,141,168,0) 70%);
  animation:breathe 18s ease-in-out infinite;
  animation-delay:-9s;
}

/* Leaves stirred by the faintest breath of air — never more than 2px. */
@keyframes breathe{
  0%   { transform:translate(0, 0) rotate(0deg); }
  25%  { transform:translate(1.5px, -1px) rotate(0.2deg); }
  50%  { transform:translate(-1px, 1.5px) rotate(-0.2deg); }
  75%  { transform:translate(-1.5px, -0.5px) rotate(0.15deg); }
  100% { transform:translate(0, 0) rotate(0deg); }
}

/* A single soft "pane of glass" — refracted light band, evokes glass
   without depicting an object. Subtle diagonal streak + blur. */
.bg-glass-plane{
  position:absolute;
  top:0;
  left:0;
  width:140%;
  height:60%;
  transform:rotate(-6deg) translate(-8%, -18%);
  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.35) 47%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.35) 53%,
    rgba(255,255,255,0) 70%
  );
  mix-blend-mode:soft-light;
  filter:blur(1px);
}

/* Fine photographic grain for CG-realism, blended subtly */
.bg-grain{
  position:absolute;
  inset:0;
  opacity:0.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Gentle vignette for depth, unmistakably premium/quiet */
.bg-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(
    ellipse at center,
    rgba(250,249,247,0) 60%,
    rgba(46,46,46,0.035) 100%
  );
}

/* ==================================================================
   Foreground content — large whitespace, minimal information
================================================================== */
.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 32px;
  max-width:600px;
}

.hero-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.55);
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
  animation:reveal var(--dur-fade) var(--ease-apple) forwards;
  animation-delay:150ms;
}

.hero-wordmark{
  margin-top:28px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(64px, 13.5vw, 156px);
  letter-spacing:0.15em;
  text-indent:0.15em;
  color:var(--color-primary);
  line-height:1;
  text-shadow:0 6px 60px rgba(11,107,107,0.16);
  opacity:0;
  transform:translateY(18px);
  animation:reveal 1300ms var(--ease-apple) forwards;
  animation-delay:480ms;
}

.hero-headline{
  margin-top:88px;
  font-family:var(--font-heading);
  font-weight:400;
  font-size:clamp(24px, 3.4vw, 34px);
  line-height:1.85;
  letter-spacing:0.06em;
  color:var(--color-text);
  opacity:0;
  transform:translateY(14px);
  animation:reveal 1300ms var(--ease-apple) forwards;
  animation-delay:980ms;
}

.hero-copy{
  margin-top:30px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  line-height:2.2;
  letter-spacing:0.1em;
  color:rgba(46,46,46,0.6);
  opacity:0;
  transform:translateY(10px);
  animation:reveal 1300ms var(--ease-apple) forwards;
  animation-delay:1420ms;
}

/* ---------- CTA — a quiet invitation, not a demand ---------- */
.hero-cta{
  margin-top:96px;
  display:flex;
  align-items:center;
  gap:40px;
  opacity:0;
  transform:translateY(10px);
  animation:reveal 1300ms var(--ease-apple) forwards;
  animation-delay:1900ms;
}

.btn{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.14em;
  padding:17px 44px;
  border-radius:12px;
  text-decoration:none;
  display:inline-block;
  border:1px solid transparent;
  transition:
    background-color 300ms var(--ease-apple),
    color 300ms var(--ease-apple),
    border-color 300ms var(--ease-apple),
    box-shadow 300ms var(--ease-apple);
}

/* Primary CTA rendered as frosted glass — an invitation standing
   quietly in the light, not a block of colour demanding attention */
.btn--glass{
  background:rgba(255,255,255,0.32);
  color:var(--color-primary);
  border-color:rgba(11,107,107,0.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 30px rgba(11,107,107,0.06);
}
.btn--glass:hover{
  background:rgba(11,107,107,0.9);
  color:var(--color-bg);
  border-color:transparent;
}

.hero-cta__link{
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--color-text);
  opacity:0.5;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:opacity 300ms var(--ease-apple);
}
.hero-cta__link:hover{ opacity:0.9; }

.btn:focus-visible,
.hero-cta__link:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

/* ---------- Scroll indicator — Apple style, no label ---------- */
.hero-scroll{
  position:absolute;
  bottom:44px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:22px;
  height:36px;
  border:1px solid rgba(46,46,46,0.32);
  border-radius:12px;
  display:flex;
  justify-content:center;
  padding-top:7px;
  opacity:0;
  animation:reveal 1300ms var(--ease-apple) forwards;
  animation-delay:2500ms;
  text-decoration:none;
}
.hero-scroll:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:4px;
}

.hero-scroll__dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--color-primary);
  animation:scrollDot 1.8s ease-in-out infinite;
}

/* ---------- Keyframes ---------- */
@keyframes reveal{
  to{ opacity:1; transform:translateY(0); }
}

@keyframes scrollDot{
  0%   { transform:translateY(0);   opacity:1; }
  70%  { transform:translateY(14px); opacity:0; }
  71%  { transform:translateY(0);   opacity:0; }
  100% { transform:translateY(0);   opacity:1; }
}

/* ==================================================================
   Responsive
================================================================== */
@media (max-width: 600px){
  .hero-content{ max-width:100%; }
  .hero-wordmark{ letter-spacing:0.06em; text-indent:0.06em; margin-top:20px; }
  .hero-headline{ margin-top:56px; }
  .hero-copy{ margin-top:24px; }
  .hero-cta{ flex-direction:column; gap:22px; margin-top:64px; }
  .bg-blob--jade,
  .bg-blob--oak,
  .bg-blob--ocean{ filter:blur(60px); }
  .bg-sunbeam{ opacity:0.6; }
}

@media (min-width: 601px) and (max-width: 1024px){
  .hero-content{ max-width:560px; }
}

@media (min-width: 1600px){
  .hero-content{ max-width:720px; }
}

/* ==================================================================
   ABOUT SECTION
   Continues the Hero's tokens; visual language is contained/framed
   rather than ambient, so the two sections read as siblings, not twins.
================================================================== */

.about{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
}

.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  max-width:1320px;
  margin:0 auto;
  align-items:center;
}

@media (min-width: 1024px){
  .about-grid{
    grid-template-columns:minmax(0, 5fr) minmax(0, 4fr);
    gap:clamp(48px, 8vw, 140px);
  }
}

/* ---------- Text column ---------- */
.about-text{
  max-width:560px;
}

.about-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.about-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.6vw, 44px);
  line-height:1.65;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.about-body{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.about-body p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:2.1;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.78);
}

/* ---------- Visual column ---------- */
.about-visual{
  position:relative;
  width:100%;
}

.about-visual__panel{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:24px;
  overflow:hidden;
  background:var(--color-sand);
  box-shadow:0 30px 60px -30px rgba(46,46,46,0.16);
}

.about-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
}

/* Superseded by the real photo above — kept in the markup, hidden
   here rather than deleted. av-grain still adds a nice subtle
   texture over the photo, so that one stays active. */
.about-visual__panel .av-light,
.about-visual__panel .av-blob,
.about-visual__panel .av-glass{
  display:none;
}

.av-light{
  position:absolute;
  top:-20%;
  left:10%;
  width:110%;
  height:80%;
  background:radial-gradient(
    ellipse at center,
    rgba(255,248,236,0.95) 0%,
    rgba(245,239,230,0.4) 45%,
    rgba(245,239,230,0) 75%
  );
}

.av-blob{
  position:absolute;
  filter:blur(70px);
  opacity:0.4;
  animation:breathe 14s ease-in-out infinite;
}

.av-blob--oak{
  width:60%;
  height:46%;
  left:-10%;
  bottom:-8%;
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
  background:radial-gradient(circle at 40% 40%, rgba(181,138,99,0.38), rgba(181,138,99,0) 70%);
}

.av-blob--jade{
  width:44%;
  height:38%;
  right:-8%;
  top:8%;
  border-radius:44% 56% 58% 42% / 52% 44% 56% 48%;
  background:radial-gradient(circle at 55% 45%, rgba(11,107,107,0.22), rgba(11,107,107,0) 70%);
  animation-duration:17s;
  animation-delay:-5s;
}

.av-glass{
  position:absolute;
  top:0;
  left:-10%;
  width:120%;
  height:55%;
  transform:rotate(-10deg) translateY(-10%);
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 65%
  );
  mix-blend-mode:soft-light;
}

.av-grain{
  position:absolute;
  inset:0;
  opacity:0.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Handwritten accent — a quiet swing-tag note, not a headline */
.about-note{
  position:absolute;
  bottom:-18px;
  right:24px;
  font-family:'Caveat', cursive;
  font-weight:600;
  font-size:26px;
  color:var(--color-wood);
  opacity:0.85;
  transform:rotate(-4deg);
  pointer-events:none;
}

/* ---------- Feature cards ---------- */
.about-features{
  list-style:none;
  margin:clamp(80px, 10vw, 140px) auto 0;
  padding:0;
  max-width:1320px;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

@media (min-width: 640px){
  .about-features{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (min-width: 1024px){
  .about-features{ grid-template-columns:repeat(4, 1fr); gap:24px; }
}

.feature-card{
  background:var(--color-bg);
  border:1px solid rgba(46,46,46,0.08);
  border-radius:24px;
  padding:clamp(32px, 3vw, 40px) clamp(28px, 3vw, 32px);
  box-shadow:0 20px 40px -32px rgba(46,46,46,0.14);
}

.feature-card__num{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.1em;
  color:var(--color-accent);
  opacity:0.7;
}

.feature-card__title{
  margin-top:18px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:19px;
  letter-spacing:0.02em;
  color:var(--color-text);
}

.feature-card__text{
  margin-top:14px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  line-height:1.9;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.68);
}

/* ---------- Scroll reveal ---------- */
.reveal-el{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1000ms var(--ease-apple), transform 1000ms var(--ease-apple);
}
.reveal-section.is-visible .reveal-el[data-reveal="0"]{ transition-delay:0ms; }
.reveal-section.is-visible .reveal-el[data-reveal="1"]{ transition-delay:120ms; }
.reveal-section.is-visible .reveal-el[data-reveal="2"]{ transition-delay:280ms; }
.reveal-section.is-visible .reveal-el[data-reveal="3"]{ transition-delay:200ms; }
.reveal-section.is-visible .reveal-el[data-reveal="4"]{ transition-delay:460ms; }
.reveal-section.is-visible .reveal-el[data-reveal="5"]{ transition-delay:640ms; }
.reveal-section.is-visible .reveal-el[data-reveal="6"]{ transition-delay:820ms; }
.reveal-section.is-visible .reveal-el[data-reveal="7"]{ transition-delay:1000ms; }
.reveal-section.is-visible .reveal-el[data-reveal="8"]{ transition-delay:1180ms; }
.reveal-section.is-visible .reveal-el{
  opacity:1;
  transform:translateY(0);
}

/* Cards themselves step in with a small internal stagger */
.feature-card{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 800ms var(--ease-apple), transform 800ms var(--ease-apple);
}
.about.is-visible .feature-card{ opacity:1; transform:translateY(0); }
.about.is-visible .feature-card:nth-child(1){ transition-delay:460ms; }
.about.is-visible .feature-card:nth-child(2){ transition-delay:540ms; }
.about.is-visible .feature-card:nth-child(3){ transition-delay:620ms; }
.about.is-visible .feature-card:nth-child(4){ transition-delay:700ms; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px){
  .about-note{ right:12px; bottom:-14px; font-size:22px; }
}

/* ==================================================================
   CONCEPT SECTION
   Diagrammatic rather than photographic — a four-circle Venn diagram
   stands in for the framed brand visual used in About, so the two
   sections read distinctly while sharing the same design language.
================================================================== */

.concept{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.concept-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:72px;
  max-width:1320px;
  margin:0 auto;
  align-items:center;
}

@media (min-width: 1024px){
  .concept-grid{
    grid-template-columns:minmax(0, 4fr) minmax(0, 5fr);
    gap:clamp(48px, 7vw, 120px);
  }
}

/* ---------- Text column ---------- */
.concept-text{
  max-width:520px;
}

.concept-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.concept-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.6vw, 44px);
  line-height:1.65;
  letter-spacing:0.03em;
  color:var(--color-text);
}

.concept-body{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.concept-body p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:2.1;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.78);
}

/* ---------- Visual column — Venn diagram ---------- */
.concept-visual{
  display:flex;
  justify-content:center;
}

.venn{
  width:100%;
  max-width:440px;
  height:auto;
  overflow:visible;
}

/* Soft, semi-transparent fills; multiply blend lets overlaps
   darken naturally instead of needing hand-mixed colours. */
.venn-circle{
  fill-opacity:0.55;
  mix-blend-mode:multiply;
  stroke-width:1;
  opacity:0;
  transition:opacity 900ms var(--ease-apple);
}
.reveal-section.is-visible .venn-circle{ opacity:1; }
.reveal-section.is-visible .venn-circle:nth-of-type(1){ transition-delay:220ms; }
.reveal-section.is-visible .venn-circle:nth-of-type(2){ transition-delay:340ms; }
.reveal-section.is-visible .venn-circle:nth-of-type(3){ transition-delay:460ms; }
.reveal-section.is-visible .venn-circle:nth-of-type(4){ transition-delay:580ms; }
.venn-circle--hair{      fill:var(--color-sand);       stroke:rgba(181,138,99,0.4); }
.venn-circle--mind{      fill:var(--color-sage);       stroke:rgba(11,107,107,0.3); }
.venn-circle--body{      fill:var(--color-pale-ocean);  stroke:rgba(47,141,168,0.35); }
.venn-circle--lifestyle{ fill:var(--color-olive);        stroke:rgba(181,138,99,0.4); }

.venn-icon{
  color:rgba(46,46,46,0.5);
}
.venn-icon path,
.venn-icon circle{
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.venn-label__en{
  font-family:var(--font-body);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.14em;
  fill:var(--color-text);
  opacity:0.75;
}

.venn-label__ja{
  font-family:var(--font-body);
  font-weight:300;
  font-size:12px;
  letter-spacing:0.08em;
  fill:var(--color-text);
  opacity:0.55;
}

.venn-center-clear{
  fill:var(--color-bg);
  opacity:0.86;
}

.venn-center__en{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:19px;
  letter-spacing:0.05em;
  fill:var(--color-primary);
}

/* ---------- Supplementary note ---------- */
.concept-note{
  margin:clamp(80px, 10vw, 140px) auto 0;
  max-width:520px;
  text-align:center;
}

.concept-note__lead{
  font-family:var(--font-heading);
  font-weight:500;
  font-style:italic;
  font-size:clamp(18px, 2vw, 22px);
  letter-spacing:0.04em;
  color:var(--color-primary);
}

.concept-note__sub{
  margin-top:18px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  line-height:1.9;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.65);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .venn{ max-width:340px; }
}

/* ==================================================================
   EXPERIENCE SECTION
   Not a menu — four cards conveying how time at MALIBU feels.
   CG brand visuals reuse the same light/blob/grain language as
   Hero/About/Concept, recoloured per card, never real photography.
================================================================== */

.experience{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.experience-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.experience-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.experience-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.5;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.experience-subcopy{
  margin-top:18px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.9;
  letter-spacing:0.05em;
  color:rgba(46,46,46,0.62);
}

.experience-body{
  margin-top:52px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.experience-body p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:2.1;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.78);
}

/* ---------- Cards ---------- */
.experience-cards{
  list-style:none;
  margin:clamp(88px, 10vw, 140px) auto 0;
  padding:0;
  max-width:1180px;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}

@media (min-width: 720px){
  .experience-cards{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
}

.experience-card{
  background:var(--color-bg);
  border:1px solid rgba(46,46,46,0.08);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 48px -34px rgba(46,46,46,0.16);

  opacity:0;
  transform:translateY(18px);
  transition:opacity 800ms var(--ease-apple), transform 800ms var(--ease-apple);
}
.reveal-section.is-visible .experience-card{ opacity:1; transform:translateY(0); }
.reveal-section.is-visible .experience-card:nth-child(1){ transition-delay:200ms; }
.reveal-section.is-visible .experience-card:nth-child(2){ transition-delay:320ms; }
.reveal-section.is-visible .experience-card:nth-child(3){ transition-delay:440ms; }
.reveal-section.is-visible .experience-card:nth-child(4){ transition-delay:560ms; }

.experience-card__visual{
  position:relative;
  aspect-ratio:6 / 5;
  overflow:hidden;
  background:var(--color-sand);
}

.ev-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.experience-card__visual--drink .ev-photo{ object-position:center 55%; }
.experience-card__visual--spa .ev-photo{ object-position:center 62%; }
.experience-card__visual--care .ev-photo{ object-position:center 58%; }
.experience-card__visual--space .ev-photo{ object-position:center 42%; }

/* Superseded by the four real photos above (Drink / Spa / Care /
   Private Space) — kept in the markup, hidden here rather than
   deleted. The small line-icon (.ev-accent) and grain still read
   nicely as a quiet brand touch over a photo, so those stay active
   for all four cards. */
.experience-card__visual--drink .ev-light,
.experience-card__visual--drink .ev-blob,
.experience-card__visual--spa .ev-light,
.experience-card__visual--spa .ev-blob,
.experience-card__visual--care .ev-light,
.experience-card__visual--care .ev-blob,
.experience-card__visual--space .ev-light,
.experience-card__visual--space .ev-blob{
  display:none;
}

.experience-card__body{
  padding:clamp(28px, 3vw, 36px) clamp(28px, 3vw, 36px) clamp(32px, 3.4vw, 40px);
}

.experience-card__title{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:20px;
  letter-spacing:0.03em;
  color:var(--color-text);
}

.experience-card__text{
  margin-top:14px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  line-height:1.95;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.68);
}

/* ---------- Card visual — shared CG layers, recoloured per card ---------- */
.ev-light{
  position:absolute;
  top:-25%;
  left:-10%;
  width:120%;
  height:90%;
  background:radial-gradient(
    ellipse at center,
    rgba(255,248,236,0.9) 0%,
    rgba(245,239,230,0.35) 45%,
    rgba(245,239,230,0) 75%
  );
}

.ev-blob{
  position:absolute;
  filter:blur(50px);
  opacity:0.42;
  animation:breathe 15s ease-in-out infinite;
}
.ev-blob--b{ animation-duration:19s; animation-delay:-6s; }

.ev-grain{
  position:absolute;
  inset:0;
  opacity:0.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

.ev-accent{
  position:absolute;
  bottom:20px;
  left:20px;
  width:34px;
  height:34px;
  color:rgba(46,46,46,0.45);
}
.ev-accent path,
.ev-accent circle,
.ev-accent line,
.ev-accent rect{
  stroke:currentColor;
  stroke-width:1.3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Welcome Drink — warm oak morning light */
.experience-card__visual--drink .ev-blob--a{
  width:60%; height:55%; left:-10%; bottom:-15%;
  border-radius:48% 52% 44% 56% / 50% 44% 56% 50%;
  background:radial-gradient(circle at 40% 40%, rgba(181,138,99,0.4), rgba(181,138,99,0) 70%);
}
.experience-card__visual--drink .ev-blob--b{
  width:40%; height:38%; right:-6%; top:0%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(11,107,107,0.14), rgba(11,107,107,0) 70%);
}

/* Head Spa — calm sage / pale ocean */
.experience-card__visual--spa{ background:var(--color-sand); }
.experience-card__visual--spa .ev-blob--a{
  width:58%; height:55%; right:-12%; bottom:-12%;
  border-radius:52% 48% 46% 54% / 46% 54% 46% 54%;
  background:radial-gradient(circle at 55% 45%, rgba(47,141,168,0.28), rgba(47,141,168,0) 70%);
}
.experience-card__visual--spa .ev-blob--b{
  width:42%; height:40%; left:-8%; top:-4%;
  border-radius:50%;
  background:radial-gradient(circle at 45% 45%, rgba(169,191,169,0.4), rgba(169,191,169,0) 70%);
}

/* Care Products — sand + oak, product-still calm */
.experience-card__visual--care .ev-blob--a{
  width:50%; height:48%; left:6%; bottom:-16%;
  border-radius:46% 54% 50% 50% / 54% 46% 50% 50%;
  background:radial-gradient(circle at 45% 45%, rgba(181,138,99,0.3), rgba(181,138,99,0) 70%);
}
.experience-card__visual--care .ev-blob--b{
  width:38%; height:36%; right:2%; top:2%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(245,239,230,0.9), rgba(245,239,230,0) 70%);
}

/* Private Space — green + morning light through a window */
.experience-card__visual--space .ev-blob--a{
  width:60%; height:55%; left:-10%; top:-10%;
  border-radius:46% 54% 56% 44% / 50% 46% 54% 50%;
  background:radial-gradient(circle at 40% 40%, rgba(11,107,107,0.22), rgba(11,107,107,0) 70%);
}
.experience-card__visual--space .ev-blob--b{
  width:44%; height:42%; right:-8%; bottom:-10%;
  border-radius:50%;
  background:radial-gradient(circle at 55% 55%, rgba(181,138,99,0.26), rgba(181,138,99,0) 70%);
}

/* ---------- Closing & note ---------- */
.experience-closing{
  margin:clamp(88px, 11vw, 150px) auto 0;
  max-width:520px;
  text-align:center;
  font-family:var(--font-heading);
  font-weight:500;
  font-style:italic;
  font-size:clamp(19px, 2.2vw, 25px);
  line-height:1.8;
  letter-spacing:0.04em;
  color:var(--color-primary);
}

.experience-note{
  margin:28px auto 0;
  max-width:420px;
  text-align:center;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13px;
  line-height:1.9;
  letter-spacing:0.06em;
  color:rgba(46,46,46,0.5);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .experience-intro{ padding:0 8px; }

  /* "MALIBUで過ごす時間。" was wrapping to 2 lines at the base
     clamp(30px,4vw,46px) minimum. A single vw-based clamp left gaps
     around 341–375px where it still wrapped, so this uses three
     fixed tiers instead — each verified line-by-line at 5px
     increments across the full 320–640px range with zero wraps.
     Body copy (.experience-subcopy) is untouched. */
  .experience-heading{
    font-size:28px;
  }
}

@media (max-width: 420px){
  .experience-heading{
    font-size:24px;
  }
}

@media (max-width: 340px){
  .experience-heading{
    font-size:22px;
  }
}

/* ==================================================================
   SERVICE SECTION
   Seven services as quiet, concierge-style cards. No pricing here —
   Menu Section will carry that. Row 2 (3 cards) self-centers via
   flexbox wrap rather than being forced into a rigid 4-col grid.
================================================================== */

.service{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.service-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.service-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.service-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  line-height:1.55;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.service-lead{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.service-lead p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.95;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.72);
}

/* ---------- Cards ---------- */
.service-cards{
  list-style:none;
  margin:clamp(80px, 10vw, 130px) auto 0;
  padding:0;
  max-width:1280px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}

.service-card-item{
  flex:0 1 auto;
  width:100%;

  opacity:0;
  transform:translateY(18px);
  transition:opacity 800ms var(--ease-apple), transform 800ms var(--ease-apple);
}
.reveal-section.is-visible .service-card-item{ opacity:1; transform:translateY(0); }
.reveal-section.is-visible .service-card-item:nth-child(1){ transition-delay:200ms; }
.reveal-section.is-visible .service-card-item:nth-child(2){ transition-delay:310ms; }
.reveal-section.is-visible .service-card-item:nth-child(3){ transition-delay:420ms; }
.reveal-section.is-visible .service-card-item:nth-child(4){ transition-delay:530ms; }
.reveal-section.is-visible .service-card-item:nth-child(5){ transition-delay:640ms; }
.reveal-section.is-visible .service-card-item:nth-child(6){ transition-delay:750ms; }
.reveal-section.is-visible .service-card-item:nth-child(7){ transition-delay:860ms; }

@media (min-width: 560px){
  .service-card-item{ width:calc(50% - 12px); }
}
@media (min-width: 860px){
  .service-card-item{ width:calc(33.333% - 16px); }
}
@media (min-width: 1180px){
  .service-card-item{ width:calc(25% - 18px); }
}

.service-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--color-bg);
  border:1px solid rgba(46,46,46,0.09);
  border-radius:24px;
  padding:clamp(30px, 3vw, 36px) clamp(26px, 2.6vw, 30px);
  text-decoration:none;
  box-shadow:0 20px 40px -34px rgba(46,46,46,0.14);
  transition:
    transform 260ms var(--ease-apple),
    border-color 260ms var(--ease-apple),
    background-color 260ms var(--ease-apple),
    box-shadow 260ms var(--ease-apple);
}

.service-card:hover,
.service-card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(11,107,107,0.35);
  background:var(--color-sand);
  box-shadow:0 26px 46px -32px rgba(46,46,46,0.18);
}

.service-card:hover .service-card__icon svg,
.service-card:focus-visible .service-card__icon svg{
  transform:translateY(-1.5px);
}

.service-card:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.service-card__icon{
  display:block;
  width:30px;
  height:30px;
  color:var(--color-primary);
}
.service-card__icon svg{
  width:100%;
  height:100%;
  transition:transform 260ms var(--ease-apple);
}
.service-card__icon svg path,
.service-card__icon svg circle,
.service-card__icon svg line{
  stroke:currentColor;
  stroke-width:1.3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.service-card__en{
  display:block;
  margin-top:20px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.18em;
  color:var(--color-primary);
}

.service-card__ja{
  display:block;
  margin-top:6px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:17px;
  letter-spacing:0.03em;
  color:var(--color-text);
}

.service-card__text{
  display:block;
  margin-top:16px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  line-height:1.95;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.68);
  flex-grow:1;
}

.service-card__sub{
  display:block;
  margin-top:18px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--color-wood);
}

/* ---------- CTA ---------- */
.service-cta{
  margin:clamp(72px, 9vw, 110px) auto 0;
  display:flex;
  justify-content:center;
}

.btn--outline{
  background:var(--color-bg);
  color:var(--color-primary);
  border:1px solid var(--color-primary);
}
.btn--outline:hover{
  background:var(--color-primary);
  color:var(--color-bg);
}

/* ==================================================================
   MENU SECTION
   All card/list content below is injected by script.js from a single
   pricing data object — this file only styles the generated markup.
================================================================== */

.menu{
  position:relative;
  background:var(--color-bg);
  scroll-margin-top:32px;
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.menu-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.menu-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.menu-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  line-height:1.55;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.menu-lead{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.menu-lead p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.95;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.72);
}

/* ---------- Primary category cards ---------- */
.menu-cards{
  margin:clamp(72px, 9vw, 110px) auto 0;
  max-width:1180px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}

.menu-card{
  flex:0 1 auto;
  width:100%;
  scroll-margin-top:32px;
  background:var(--color-bg);
  border:1px solid rgba(46,46,46,0.09);
  border-radius:24px;
  padding:clamp(28px, 2.6vw, 34px);
  box-shadow:0 20px 40px -34px rgba(46,46,46,0.14);
}

@media (min-width: 560px){
  .menu-card{ width:calc(50% - 12px); }
}
@media (min-width: 900px){
  .menu-card{ width:calc(33.333% - 16px); }
}

.menu-card__en{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.14em;
  color:var(--color-primary);
}

.menu-card__tagline{
  margin-top:8px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.55);
}

.menu-card__preview{
  list-style:none;
  margin:22px 0 0;
  padding:16px 0 0;
  border-top:1px solid rgba(46,46,46,0.08);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.menu-card__preview-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font-body);
}

.menu-card__preview-name{
  font-size:14px;
  font-weight:400;
  color:var(--color-text);
}

.menu-card__preview-price{
  font-size:14px;
  font-weight:500;
  color:var(--color-text);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---------- Accordion toggle & panel (shared) ---------- */
.menu-card__toggle{
  margin-top:22px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 0;
  background:transparent;
  border:1px solid rgba(46,46,46,0.16);
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.08em;
  color:rgba(46,46,46,0.6);
  cursor:pointer;
  transition:color 250ms var(--ease-apple), border-color 250ms var(--ease-apple);
}
.menu-card__toggle:hover{
  color:var(--color-primary);
  border-color:rgba(11,107,107,0.4);
}
.menu-card__toggle:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.menu-card__toggle-icon{
  width:8px;
  height:8px;
  border-right:1.3px solid currentColor;
  border-bottom:1.3px solid currentColor;
  transform:rotate(45deg);
  transition:transform 300ms var(--ease-apple);
  margin-top:-3px;
}
.menu-card__toggle[aria-expanded="true"] .menu-card__toggle-icon{
  transform:rotate(-135deg);
  margin-top:3px;
}

.menu-card__panel-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 420ms var(--ease-apple);
}
.menu-card__panel-wrap.is-open{
  grid-template-rows:1fr;
}
.menu-card__panel{
  overflow:hidden;
  min-height:0;
}

.menu-card__list{
  margin:18px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(46,46,46,0.08);
  display:flex;
  flex-direction:column;
  gap:0;
}

.menu-card__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid rgba(46,46,46,0.06);
}
.menu-card__row:last-child{ border-bottom:none; }

.menu-card__name{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  color:var(--color-text);
}
.menu-card__note{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:300;
  color:rgba(46,46,46,0.5);
}

.menu-card__price{
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  color:var(--color-text);
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* 全体染め等、式ベースの項目に添える「＋長さ料金」内訳行。
   通常行より一段小さく・インデントして「加算」であることを示す。 */
.menu-card__row--tier{
  padding:8px 0 8px 20px;
  border-bottom:1px dashed rgba(46,46,46,0.08);
}
.menu-card__row--tier:last-of-type{ border-bottom:none; }

.menu-card__tierName{
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  color:rgba(46,46,46,0.6);
}
.menu-card__tierName::before{
  content:'—';
  display:inline-block;
  margin-right:6px;
  color:var(--color-wood);
  opacity:0.7;
}

.menu-card__tierPrice{
  font-family:var(--font-body);
  font-weight:500;
  font-size:12.5px;
  color:var(--color-wood);
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* カテゴリ全体に関わる小さな注意書き(例:DESIGN COLORのオンカラー注記) */
.menu-card__categoryNote{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(46,46,46,0.08);
  font-family:var(--font-body);
  font-weight:300;
  font-size:12px;
  line-height:1.8;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.55);
}

/* ---------- Secondary categories (DESIGN COLOR / OTHER) ---------- */
.menu-more{
  margin:clamp(56px, 6vw, 80px) auto 0;
  max-width:760px;
}

.menu-more__label{
  text-align:center;
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.3em;
  text-indent:0.3em;
  color:rgba(46,46,46,0.4);
  text-transform:uppercase;
}

.menu-more__row{
  margin-top:24px;
  border:1px solid rgba(46,46,46,0.09);
  border-radius:20px;
  padding:22px clamp(22px, 3vw, 30px);
}

.menu-more__toggleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.menu-more__en{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.1em;
  color:var(--color-primary);
}

.menu-more__tagline{
  margin-top:4px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  color:rgba(46,46,46,0.55);
}

.menu-more__row .menu-card__toggle{
  margin-top:0;
  width:auto;
  padding:14px 20px;
  flex:0 0 auto;
}

/* ---------- Recommended set menu ---------- */
.menu-sets{
  margin:clamp(80px, 9vw, 120px) auto 0;
  max-width:760px;
  text-align:center;
}

.menu-sets__heading{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(19px, 2.2vw, 24px);
  letter-spacing:0.03em;
  color:var(--color-text);
}

.menu-sets__list{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.menu-set-card{
  text-align:left;
  background:var(--color-sand);
  border-radius:24px;
  padding:clamp(28px, 3vw, 36px);
}

.menu-set-card__name{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:19px;
  letter-spacing:0.02em;
  color:var(--color-text);
}

.menu-set-card__priceRow{
  margin-top:16px;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}

.menu-set-card__price{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:24px;
  color:var(--color-primary);
  font-variant-numeric:tabular-nums;
}

.menu-set-card__savings{
  font-family:var(--font-body);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--color-wood);
}

.menu-set-card__reason{
  margin-top:14px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  line-height:1.9;
  color:rgba(46,46,46,0.68);
}

/* ---------- Length / volume surcharge guide ---------- */
.menu-length{
  margin:clamp(80px, 9vw, 120px) auto 0;
  max-width:900px;
  text-align:center;
}

.menu-length__heading{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(19px, 2.2vw, 24px);
  letter-spacing:0.03em;
  color:var(--color-text);
}

.menu-length__desc{
  margin:16px auto 0;
  max-width:520px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  line-height:1.95;
  color:rgba(46,46,46,0.62);
}

.menu-length__list{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:40px 48px;
}

.menu-length__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:130px;
}

.menu-length__icon{
  display:block;
  width:28px;
  height:auto;
  color:var(--color-primary);
  opacity:0.8;
}
.menu-length__icon svg{ display:block; width:100%; height:auto; }

/* PC: enlarge the silhouettes (~1.4x) so the four lengths read more
   clearly at a glance; text/prices below are untouched. */
@media (min-width: 1024px){
  .menu-length__item{ width:150px; }
  .menu-length__icon{ width:40px; }
  .menu-length__list{ gap:48px 56px; }
}

.menu-length__labelEn{
  margin-top:16px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--color-primary);
  opacity:0.85;
}

.menu-length__name{
  margin-top:4px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:13.5px;
  letter-spacing:0.03em;
  color:var(--color-text);
}

.menu-length__extra{
  margin-top:6px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:11.5px;
  line-height:1.7;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.55);
}

.menu-length__note{
  margin:32px auto 0;
  max-width:480px;
  text-align:center;
  font-family:var(--font-body);
  font-weight:300;
  font-size:11.5px;
  line-height:1.8;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.45);
}

/* ---------- CTA ---------- */
.menu-cta{
  margin:clamp(80px, 9vw, 120px) auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.menu-cta__note{
  text-align:center;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13px;
  line-height:1.9;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.55);
}

/* ---------- Disclaimers ---------- */
.menu-disclaimer{
  list-style:none;
  margin:40px auto 0;
  padding:0;
  max-width:560px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.menu-disclaimer li{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11.5px;
  line-height:1.8;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.42);
}

/* ---------- Mobile price readability ----------
   Explicit requirement: prices must read at 16px-equivalent minimum
   on phones, even though the desktop scale uses a smaller 14px. */
@media (max-width: 639px){
  .menu-card__preview-name,
  .menu-card__preview-price,
  .menu-card__name,
  .menu-card__price{
    font-size:16px;
  }
  .menu-card__note{
    font-size:13px;
  }
  .menu-card__tierName,
  .menu-card__tierPrice{
    font-size:14px;
  }
}

/* ==================================================================
   WELLNESS SECTION
   Non-clinical: warm, quiet, no medical iconography. The abstract
   visual is a "journey toward growth", intentionally distinct from
   the Concept Venn diagram (a "diagram to understand").
================================================================== */

.wellness{
  position:relative;
  background:var(--color-bg);
  scroll-margin-top:32px;
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.wellness-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  max-width:1320px;
  margin:0 auto;
  align-items:center;
}
@media (min-width: 1024px){
  .wellness-grid{
    grid-template-columns:minmax(0, 5fr) minmax(0, 4fr);
    gap:clamp(48px, 7vw, 120px);
  }
}

.wellness-text{ max-width:560px; }

.wellness-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.wellness-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  line-height:1.55;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.wellness-subcopy{
  margin-top:18px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.9;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.62);
}

.wellness-body{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.wellness-body p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:2.05;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.76);
}

/* ---------- Infographic — habits → health → hair/beauty ---------- */
.wellness-visual{
  width:100%;
  max-width:420px;
  margin:0 auto;
}

.wv-infographic{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.wv-inputs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:28px 22px;
  max-width:380px;
}

.wv-input{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:76px;
}

.wv-input__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(11,107,107,0.24);
  color:var(--color-primary);
  animation:breathe 18s ease-in-out infinite;
}
.wv-input:nth-child(2) .wv-input__icon{ animation-duration:21s; animation-delay:-4s; }
.wv-input:nth-child(3) .wv-input__icon{ animation-duration:23s; animation-delay:-9s; }
.wv-input:nth-child(4) .wv-input__icon{ animation-duration:19s; animation-delay:-2s; }

.wv-input__icon svg{
  width:22px;
  height:22px;
}
.wv-input__icon svg path,
.wv-input__icon svg circle{
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wv-input__label{
  margin-top:10px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-align:center;
  color:rgba(46,46,46,0.62);
  line-height:1.6;
}
.wv-input__ja{
  display:inline-block;
  margin-top:2px;
  font-weight:300;
  font-size:10.5px;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.48);
}

.wv-connector{
  display:block;
  width:16px;
  height:40px;
  color:rgba(46,46,46,0.24);
  margin:6px 0;
}
.wv-connector svg{ width:100%; height:100%; }

.wv-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(11,107,107,0.3);
  background:var(--color-bg);
}

.wv-node--health{
  width:110px;
  height:110px;
  animation:breathe 14s ease-in-out infinite;
}

.wv-node--result{
  width:112px;
  height:112px;
  border-width:1.4px;
  border-color:rgba(11,107,107,0.45);
  box-shadow:0 20px 40px -28px rgba(11,107,107,0.22);
}

.wv-node__en{
  font-family:var(--font-heading);
  font-weight:500;
  letter-spacing:0.08em;
  color:var(--color-primary);
  text-align:center;
}
.wv-node--health .wv-node__en{ font-size:14px; }
.wv-node--result .wv-node__en{ font-size:14px; }

.wv-node__ja{
  margin-top:4px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:12px;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.6);
}

/* PC: give the infographic more presence relative to the surrounding
   whitespace (~1.25-1.3x), without touching layout, order, or copy. */
@media (min-width: 1024px){
  .wellness-visual{ max-width:520px; }

  .wv-inputs{ gap:34px 28px; max-width:460px; }
  .wv-input{ width:92px; }

  .wv-input__icon{ width:56px; height:56px; }
  .wv-input__icon svg{ width:28px; height:28px; }

  .wv-input__label,
  .wv-input__ja{ font-size:11.5px; }

  .wv-connector{ width:20px; height:50px; }

  .wv-node--health{ width:140px; height:140px; }
  .wv-node--result{ width:142px; height:142px; }

  .wv-node--health .wv-node__en,
  .wv-node--result .wv-node__en{ font-size:16px; }
  .wv-node__ja{ font-size:13px; }
}

/* Mobile: force a tidy 2×2 grid for the four habit icons instead of
   letting them wrap 3+1 — HEALTH / HAIR·BEAUTY stay centered below. */
@media (max-width: 640px){
  .wv-inputs{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    justify-items:center;
    max-width:200px;
    margin:0 auto;
    gap:26px 20px;
  }
  .wv-input{ width:100%; }
}

/* ---------- Wellness Journey — 4 steps ---------- */
.wellness-steps{
  position:relative;
  list-style:none;
  margin:clamp(88px, 10vw, 140px) auto 0;
  padding:0;
  max-width:1280px;
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  counter-reset:none;
}

@media (min-width: 640px){
  .wellness-steps{ grid-template-columns:repeat(2, 1fr); gap:56px 40px; }
}
@media (min-width: 1024px){
  .wellness-steps{
    grid-template-columns:repeat(4, 1fr);
    gap:32px;
  }
  /* Thin connecting line across the four step markers */
  .wellness-steps::before{
    content:'';
    position:absolute;
    top:28px;
    left:12.5%;
    right:12.5%;
    height:1px;
    background:rgba(46,46,46,0.12);
    z-index:0;
  }
}

.wellness-step{
  position:relative;
  text-align:center;
  padding:6px;
  border-radius:16px;
  transition:transform 260ms var(--ease-apple);
}
.wellness-step:hover,
.wellness-step:focus-visible{
  transform:translateY(-3px);
  outline:none;
}
.wellness-step:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:4px;
}
.wellness-step:hover .wellness-step__badge,
.wellness-step:focus-visible .wellness-step__badge{
  border-color:rgba(11,107,107,0.5);
}
.wellness-step:hover .wellness-step__badge svg,
.wellness-step:focus-visible .wellness-step__badge svg{
  transform:translateY(-1px);
}
.wellness-step:hover .wellness-step__eyebrow,
.wellness-step:focus-visible .wellness-step__eyebrow{
  color:var(--color-primary);
}

.wellness-step__badge{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto;
  border-radius:50%;
  border:1px solid rgba(11,107,107,0.28);
  background:var(--color-bg);
  color:var(--color-primary);
  transition:border-color 260ms var(--ease-apple);
}
.wellness-step__badge svg{
  width:24px;
  height:24px;
  transition:transform 260ms var(--ease-apple);
}
.wellness-step__badge svg path,
.wellness-step__badge svg circle{
  stroke:currentColor;
  fill:none;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wellness-step__eyebrow{
  margin-top:18px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.16em;
  color:rgba(46,46,46,0.45);
  transition:color 260ms var(--ease-apple);
}

.wellness-step__title{
  margin-top:8px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:17px;
  letter-spacing:0.02em;
  color:var(--color-text);
}

.wellness-step__text{
  margin-top:12px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  line-height:1.9;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.68);
}

.wellness-step__note{
  margin-top:12px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--color-wood);
}

/* ---------- KIBOW intro ---------- */
.wellness-kibow{
  margin:clamp(96px, 11vw, 150px) auto 0;
  max-width:640px;
  text-align:center;
}

.wellness-kibow__eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.wellness-kibow__heading{
  margin-top:20px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(24px, 3vw, 32px);
  line-height:1.6;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.wellness-kibow__body{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.wellness-kibow__body p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:14.5px;
  line-height:2;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.7);
}

/* ---------- Brand message ---------- */
.wellness-quote{
  margin:clamp(80px, 9vw, 120px) auto 0;
  max-width:480px;
  text-align:center;
  font-family:var(--font-heading);
  font-weight:500;
  font-style:italic;
  font-size:clamp(17px, 2vw, 21px);
  line-height:1.85;
  letter-spacing:0.03em;
  color:var(--color-text);
}

/* ---------- CTA ---------- */
.wellness-cta{
  margin:clamp(64px, 7vw, 90px) auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.wellness-cta__link{
  font-size:12px;
  letter-spacing:0.1em;
  color:rgba(46,46,46,0.55);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:opacity 250ms var(--ease-apple), color 250ms var(--ease-apple);
}
.wellness-cta__link:hover{ color:var(--color-primary); }
.wellness-cta__link:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

/* ---------- Non-medical disclaimer ---------- */
.wellness-disclaimer{
  margin:36px auto 0;
  max-width:560px;
  text-align:center;
  font-family:var(--font-body);
  font-weight:300;
  font-size:11.5px;
  line-height:1.85;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.45);
}

@media (prefers-reduced-motion: reduce){
  .wv-input__icon,
  .wv-node--health{ animation:none; }
}

/* ==================================================================
   SHOP SECTION
   Three quiet home-care categories, line-art only — no product
   photography required for this to read as a finished design.
================================================================== */

.shop{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.shop-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.shop-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.shop-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.5;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.shop-body{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.shop-body p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.95;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.72);
}

/* ==================================================================
   SHOP — product photo panel
   Same rounded/shadow language as the About visual panel, but
   landscape-oriented to sit naturally under the centred intro text.
   The whole panel is a link to the ONLINE SHOP (same URL as the
   footer CTA button below it), with a quiet hover on desktop and an
   always-visible caption everywhere so tap-ability reads clearly on
   touch devices without relying on hover.
================================================================== */
.shop-visual{
  display:block;
  margin:clamp(56px, 6vw, 80px) auto 0;
  max-width:980px;
  border-radius:24px;
  text-decoration:none;
}

.shop-visual__panel{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:24px;
  overflow:hidden;
  background:var(--color-sand);
  box-shadow:0 30px 60px -30px rgba(46,46,46,0.16);
  transition:box-shadow 400ms var(--ease-apple), transform 400ms var(--ease-apple);
}

.shop-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
  transition:transform 500ms var(--ease-apple);
}

/* Bottom-anchored scrim so the caption stays readable without
   flattening the photo — same warm-white wash used elsewhere on
   photos with overlaid text (Hero), scaled down for a smaller panel. */
.shop-visual__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(46,36,26,0.46) 0%, rgba(46,36,26,0.18) 32%, rgba(46,36,26,0) 60%);
}

.shop-visual__caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:clamp(20px, 3vw, 32px) clamp(24px, 3.4vw, 40px);
  text-align:left;
}

.shop-visual__label{
  font-family:var(--font-body);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.32em;
  text-indent:0.32em;
  color:rgba(255,255,255,0.85);
  text-transform:uppercase;
}

.shop-visual__text{
  margin-top:8px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(17px, 1.9vw, 21px);
  letter-spacing:0.04em;
  color:#FFFFFF;
}

/* Quiet hover — desktop only, signals link affordance without being
   showy. Touch devices rely on the always-visible caption instead. */
@media (hover: hover) and (pointer: fine){
  .shop-visual:hover .shop-visual__panel{
    box-shadow:0 36px 70px -28px rgba(46,46,46,0.24);
  }
  .shop-visual:hover .shop-photo{
    transform:scale(1.025);
  }
}

.shop-visual:focus-visible .shop-visual__panel{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.shop-categories{
  list-style:none;
  margin:clamp(56px, 6vw, 84px) auto 0;
  padding:0;
  max-width:980px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:32px;
}

.shop-category{
  flex:0 1 auto;
  width:100%;
  max-width:280px;
  text-align:center;
  padding:clamp(36px, 3.4vw, 44px) clamp(24px, 2.6vw, 30px);
  border:1px solid rgba(46,46,46,0.09);
  border-radius:24px;
  background:var(--color-bg);
  box-shadow:0 20px 40px -34px rgba(46,46,46,0.14);
}
@media (min-width: 640px){
  .shop-category{ width:calc(33.333% - 22px); }
}

.shop-category__num{
  display:block;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--color-accent);
  opacity:0.75;
}

.shop-category__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin:18px auto 0;
  border-radius:50%;
  border:1px solid rgba(11,107,107,0.24);
  color:var(--color-primary);
}
.shop-category__icon svg{ width:24px; height:24px; }
.shop-category__icon svg path,
.shop-category__icon svg circle{
  stroke:currentColor;
  fill:none;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.shop-category__title{
  margin-top:20px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.06em;
  color:var(--color-text);
}

.shop-category__text{
  margin-top:8px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.6);
}

.shop-cta{
  margin:clamp(72px, 8vw, 100px) auto 0;
  display:flex;
  justify-content:center;
}

/* ==================================================================
   ACCESS SECTION
================================================================== */

.access{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.access-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.access-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.access-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  line-height:1.55;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.access-grid{
  margin:clamp(72px, 9vw, 110px) auto 0;
  max-width:1100px;
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  align-items:center;
}
@media (min-width: 900px){
  .access-grid{
    grid-template-columns:minmax(0, 4fr) minmax(0, 5fr);
    gap:clamp(48px, 6vw, 100px);
  }
}

.access-info__brand{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:22px;
  letter-spacing:0.06em;
  color:var(--color-primary);
}
.access-info__sub{
  display:block;
  margin-top:6px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.24em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

/* Small, quiet badge — a supplementary fact, not competing with the
   brand name or the ADDRESS/TEL/OPEN facts below it. */
.access-info__badge{
  display:inline-block;
  margin-top:18px;
  padding:6px 14px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--color-accent);
  background:rgba(47,141,168,0.08);
  border-radius:100px;
  white-space:nowrap;
}

.access-info__list{
  margin:36px 0 0;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.access-info__row{
  display:flex;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(46,46,46,0.08);
}
.access-info__row dt{
  flex:0 0 84px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--color-accent);
  padding-top:2px;
}
.access-info__row dd{
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.8;
  letter-spacing:0.02em;
  color:var(--color-text);
}
.access-info__row a{
  color:var(--color-primary);
  text-decoration:none;
  border-bottom:1px solid rgba(11,107,107,0.3);
  transition:border-color 250ms var(--ease-apple);
}
.access-info__row a:hover{ border-color:var(--color-primary); }
.access-info__row a:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

/* Quiet line-art map card, framed like the About visual panel */
.access-map{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:24px;
  overflow:hidden;
  background:var(--color-sand);
  box-shadow:0 24px 48px -34px rgba(46,46,46,0.16);
}
.access-map__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.access-map__lines path{
  stroke:rgba(11,107,107,0.22);
  stroke-width:1;
  fill:none;
}
.access-map__pin{
  position:absolute;
  top:50%;
  left:50%;
  width:34px;
  height:42px;
  transform:translate(-50%, -60%);
  color:var(--color-primary);
}
.access-map__pin svg{ width:100%; height:100%; }
.access-map__pin svg path,
.access-map__pin svg circle{
  stroke:currentColor;
  fill:none;
  stroke-width:1.4;
}
.access-map__label{
  position:absolute;
  top:calc(50% + 26px);
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--color-primary);
  white-space:nowrap;
}

.access-cta{
  margin:clamp(72px, 8vw, 100px) auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.access-cta__secondary{
  display:flex;
  align-items:center;
  gap:32px;
}

.access-cta__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:4px 6px;
  font-size:12px;
  letter-spacing:0.1em;
  color:rgba(46,46,46,0.55);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:opacity 250ms var(--ease-apple), color 250ms var(--ease-apple);
}
.access-cta__link:hover{ color:var(--color-primary); }
.access-cta__link:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

@media (max-width: 480px){
  .access-cta__secondary{
    flex-direction:column;
    gap:8px;
    width:100%;
    max-width:280px;
  }
  .access-cta__link{
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    border:1px solid rgba(46,46,46,0.18);
    border-radius:8px;
  }
}

/* ==================================================================
   FAQ SECTION
   Same visual language as the Menu accordion, fully separate markup
   and JS — closing/opening Menu items can never affect FAQ or vice versa.
================================================================== */

.faq{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.faq-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.faq-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.faq-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.faq-lead{
  margin-top:20px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14.5px;
  line-height:1.9;
  letter-spacing:0.04em;
  color:rgba(46,46,46,0.62);
}

.faq-list{
  list-style:none;
  margin:clamp(72px, 8vw, 110px) auto 0;
  padding:0;
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.faq-item{
  border:1px solid rgba(46,46,46,0.1);
  border-radius:20px;
  background:var(--color-bg);
}
.faq-item__heading{
  margin:0;
  font-weight:inherit;
}

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 26px;
  background:transparent;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-body);
  min-height:44px;
}
.faq-question:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:-2px;
  border-radius:20px;
}

.faq-question__mark{
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(11,107,107,0.3);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:12px;
  color:var(--color-primary);
}

.faq-question__text{
  flex:1 1 auto;
  font-weight:500;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--color-text);
}

.faq-question__icon{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-right:1.3px solid rgba(46,46,46,0.4);
  border-bottom:1.3px solid rgba(46,46,46,0.4);
  transform:rotate(45deg);
  transition:transform 300ms var(--ease-apple);
  margin-top:-4px;
}
.faq-question[aria-expanded="true"] .faq-question__icon{
  transform:rotate(-135deg);
  margin-top:4px;
}

.faq-panel-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 400ms var(--ease-apple);
}
.faq-panel-wrap.is-open{ grid-template-rows:1fr; }

.faq-panel{
  overflow:hidden;
  min-height:0;
}
.faq-panel p{
  padding:0 26px 24px 68px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  line-height:1.95;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.72);
}

/* ==================================================================
   FOOTER
================================================================== */

.site-footer{
  position:relative;
  background:var(--color-sand);
  padding:clamp(80px, 10vw, 130px) clamp(24px, 6vw, 96px) 0;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  text-align:center;
}
@media (min-width: 860px){
  .footer-inner{
    grid-template-columns:1.2fr 1fr 1fr;
    text-align:left;
    gap:40px;
  }
}

.footer-brand__name{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:26px;
  letter-spacing:0.1em;
  color:var(--color-primary);
}
.footer-brand__sub{
  margin-top:8px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:10.5px;
  letter-spacing:0.24em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}
.footer-brand__tagline{
  margin-top:18px;
  font-family:var(--font-heading);
  font-weight:400;
  font-style:italic;
  font-size:14px;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.65);
}

.footer-nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-nav a{
  display:inline-block;
  padding:15px 8px;
  margin:-15px -8px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:0.1em;
  color:rgba(46,46,46,0.62);
  text-decoration:none;
  transition:color 250ms var(--ease-apple);
}
.footer-nav a:hover{ color:var(--color-primary); }
.footer-nav a:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.footer-social{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-social a{
  display:inline-block;
  padding:15px 8px;
  margin:-15px -8px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:0.1em;
  color:rgba(46,46,46,0.62);
  text-decoration:none;
  transition:color 250ms var(--ease-apple);
}
.footer-social a:hover{ color:var(--color-primary); }
.footer-social a:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.footer-store{
  grid-column:1 / -1;
  margin-top:8px;
  padding-top:40px;
  border-top:1px solid rgba(46,46,46,0.1);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-store p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.55);
}
.footer-store a{
  color:rgba(46,46,46,0.55);
  text-decoration:none;
}
.footer-store a:hover{ color:var(--color-primary); }
.footer-store a:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.footer-bottom{
  margin-top:48px;
  padding:24px clamp(24px, 6vw, 96px);
  text-align:center;
  border-top:1px solid rgba(46,46,46,0.1);
}
.footer-bottom p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.06em;
  color:rgba(46,46,46,0.45);
}

/* ==================================================================
   STYLE COLLECTION — shared header
   Quiet intro shared by Men's Style and Women's Style below. No
   grid of its own — deliberately light on padding at the bottom so
   it reads as one continuous "Style" area rather than two separate
   page sections stacked with redundant whitespace.
================================================================== */

.style-collection{
  position:relative;
  background:var(--color-bg);
  scroll-margin-top:32px;
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px) clamp(24px, 4vw, 48px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.style-collection-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.style-collection-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.style-collection-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  letter-spacing:0.04em;
  color:var(--color-primary);
}

.style-collection-lead{
  margin-top:20px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14.5px;
  line-height:1.95;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.68);
}

/* ==================================================================
   EYELASH & NAIL SECTION
   Three photo cards — landscape crop suited to close-up beauty
   photography (unlike Style's square portrait cards). Independent
   namespace, nothing shared with other sections.
================================================================== */

.eyelash-nail{
  position:relative;
  background:var(--color-bg);
  padding:clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.eyelash-nail-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.eyelash-nail-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
}

.eyelash-nail-heading{
  margin-top:20px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  line-height:1.5;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.eyelash-nail-subcopy{
  margin-top:24px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14.5px;
  line-height:1.95;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.68);
}

.eyelash-nail-cards{
  scroll-margin-top:32px;
  list-style:none;
  margin:clamp(64px, 8vw, 100px) auto 0;
  padding:0;
  max-width:1240px;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
@media (min-width: 720px){
  .eyelash-nail-cards{
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }
}

.eyelash-nail-card__visual{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:20px;
  overflow:hidden;
  background:var(--color-sand);
  box-shadow:0 24px 50px -28px rgba(46,46,46,0.16);
}

.en-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
}

.eyelash-nail-card__body{
  margin-top:18px;
  text-align:center;
}

.eyelash-nail-card__title{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.05em;
  color:var(--color-text);
}

.eyelash-nail-card__ja{
  margin-top:4px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.55);
}

.eyelash-nail-card__text{
  margin-top:10px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:13.5px;
  line-height:1.85;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.62);
}

.eyelash-nail-card__note{
  margin-left:0.5em;
  font-size:0.85em;
  font-weight:300;
  color:rgba(46,46,46,0.5);
}

.eyelash-nail-card__price{
  margin-top:14px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:19px;
  letter-spacing:0.03em;
  color:var(--color-primary);
}

.eyelash-nail-card__pricelist{
  margin:14px auto 0;
  max-width:260px;
}
.eyelash-nail-card__pricerow{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:8px 0;
  border-top:1px solid rgba(46,46,46,0.08);
}
.eyelash-nail-card__pricerow:last-child{
  border-bottom:1px solid rgba(46,46,46,0.08);
}
.eyelash-nail-card__pricerow dt{
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.62);
  text-align:left;
}
.eyelash-nail-card__pricerow dd{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--color-primary);
  white-space:nowrap;
  margin-left:12px;
}

.eyelash-nail-card__link{
  display:inline-block;
  margin-top:16px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:0.03em;
  color:var(--color-accent);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:color 200ms var(--ease-apple);
}
.eyelash-nail-card__link:hover{ color:var(--color-primary); }
.eyelash-nail-card__link:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

/* NAIL MENU — full price table. Category headings/rows reuse MENU's
   own classes (menu-more__en / menu-card__list / __row / __name /
   __price) so font size, price alignment, divider lines and spacing
   are identical to the MENU section, not a new style. */
.nail-menu{
  scroll-margin-top:32px;
  margin:clamp(72px, 8vw, 100px) auto 0;
  max-width:900px;
  padding-top:clamp(56px, 6vw, 80px);
  border-top:1px solid rgba(46,46,46,0.08);
}

.nail-menu__label{
  text-align:center;
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
}

.nail-menu__grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:1fr;
  gap:40px 64px;
}
@media (min-width: 640px){
  .nail-menu__grid{
    grid-template-columns:1fr 1fr;
  }
}

.nail-menu__disclaimer{
  margin-top:36px;
}

.eyelash-nail-cta{
  margin:clamp(64px, 7vw, 90px) auto 0;
  max-width:480px;
  text-align:center;
}
.eyelash-nail-cta__heading{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(20px, 2.4vw, 26px);
  letter-spacing:0.03em;
  color:var(--color-primary);
}
.eyelash-nail-cta__text{
  margin-top:14px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  line-height:1.9;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.68);
}
.eyelash-nail-cta .btn{
  margin-top:28px;
}


   Eight styles, each a self-contained 4-angle carousel — structure,
   classes, and behaviour deliberately mirror Women's Style below
   (separate namespace, nothing shared) so the two sections read as
   one consistent gallery system.
================================================================== */

.mens-style{
  position:relative;
  background:var(--color-bg);
  padding-top:clamp(64px, 10vw, 130px);
  padding-bottom:clamp(96px, 14vw, 200px);
  padding-left:clamp(24px, 6vw, 96px);
  padding-right:clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.mens-style-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.mens-style-heading{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  letter-spacing:0.04em;
  color:var(--color-primary);
}

.mens-style-subcopy{
  margin-top:20px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14.5px;
  line-height:1.95;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.68);
}

.mens-style-swipe-hint{
  display:none;
  margin-top:10px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:12px;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.45);
}
@media (max-width: 767px){
  .mens-style-swipe-hint{ display:block; }
}

/* ---------- Grid: same responsive column progression as
   Women's Style (1 → 2 → 3 → 4 columns) ---------- */
.mens-style-grid{
  list-style:none;
  margin:clamp(64px, 8vw, 100px) auto 0;
  padding:0;
  max-width:1400px;
  display:grid;
  grid-template-columns:1fr;
  gap:48px 28px;
}
@media (min-width: 640px){
  .mens-style-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .mens-style-grid{ grid-template-columns:repeat(3, 1fr); gap:56px 32px; }
}
@media (min-width: 1400px){
  .mens-style-grid{ grid-template-columns:repeat(4, 1fr); }
}

.mens-style-card{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 800ms var(--ease-apple), transform 800ms var(--ease-apple);
}
.reveal-section.is-visible .mens-style-card{ opacity:1; transform:translateY(0); }
.reveal-section.is-visible .mens-style-card:nth-child(1){ transition-delay:220ms; }
.reveal-section.is-visible .mens-style-card:nth-child(2){ transition-delay:280ms; }
.reveal-section.is-visible .mens-style-card:nth-child(3){ transition-delay:340ms; }
.reveal-section.is-visible .mens-style-card:nth-child(4){ transition-delay:400ms; }
.reveal-section.is-visible .mens-style-card:nth-child(5){ transition-delay:460ms; }
.reveal-section.is-visible .mens-style-card:nth-child(6){ transition-delay:520ms; }
.reveal-section.is-visible .mens-style-card:nth-child(7){ transition-delay:580ms; }
.reveal-section.is-visible .mens-style-card:nth-child(8){ transition-delay:640ms; }

/* ---------- Carousel viewport (1:1, never crops the hairstyle) ---------- */
.mens-style-carousel{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:20px;
  overflow:hidden;
  background:var(--color-sand);
  touch-action:pan-y; /* allow horizontal swipe gesture to be read by our JS */
}

.mens-style-carousel__placeholder{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(11,107,107,0.06), rgba(181,138,99,0.08));
}

.mens-style-carousel__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity 250ms var(--ease-apple);
}
/* Source photos are now natively square (627×627, cropped from the
   1254×1254 4-angle composites), matching Women's Style's own 626×626
   photos — object-fit:cover performs no real cropping at this ratio,
   so no per-style vertical tuning is needed by default. Individual
   overrides only if a specific angle needs a nudge after review. */

.mens-style-carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(250,249,247,0.85);
  cursor:pointer;
  transition:background 200ms var(--ease-apple);
}
.mens-style-carousel__arrow::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-top:1.4px solid var(--color-text);
  border-right:1.4px solid var(--color-text);
  transform:translate(-50%,-50%) rotate(-45deg);
}
.mens-style-carousel__arrow--prev{ left:12px; }
.mens-style-carousel__arrow--prev::before{ transform:translate(-50%,-50%) rotate(-135deg); margin-left:2px; }
.mens-style-carousel__arrow--next{ right:12px; }
.mens-style-carousel__arrow--next::before{ transform:translate(-50%,-50%) rotate(45deg); margin-right:2px; }
.mens-style-carousel__arrow:hover{ background:rgba(250,249,247,0.98); }
.mens-style-carousel__arrow:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.mens-style-dots{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
}

.mens-style-dots__dot{
  width:44px;
  height:28px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  position:relative;
}
.mens-style-dots__dot::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:16px;
  height:2px;
  background:rgba(46,46,46,0.25);
  transition:background 200ms var(--ease-apple), width 200ms var(--ease-apple);
}
.mens-style-dots__dot.is-active::before{
  background:var(--color-primary);
  width:24px;
}
.mens-style-dots__dot:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.mens-style-card__info{
  margin-top:14px;
  text-align:center;
}
.mens-style-card__en{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.04em;
  color:var(--color-text);
}
.mens-style-card__ja{
  margin-top:4px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.55);
}

.mens-style-cta{
  margin:clamp(56px, 6vw, 80px) auto 0;
  display:flex;
  justify-content:center;
}


/* ==================================================================
   WOMEN'S STYLE SECTION
   Eight styles, each a self-contained 4-angle carousel. Independent
   markup/classes from Men's Style — nothing here is shared with it.
================================================================== */

.women-style{
  position:relative;
  background:var(--color-bg);
  padding-top:clamp(64px, 10vw, 130px);
  padding-bottom:clamp(96px, 14vw, 200px);
  padding-left:clamp(24px, 6vw, 96px);
  padding-right:clamp(24px, 6vw, 96px);
  border-top:1px solid rgba(46,46,46,0.06);
}

.women-style-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.women-style-eyebrow{
  font-family:var(--font-body);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.4em;
  text-indent:0.4em;
  color:rgba(46,46,46,0.5);
  text-transform:uppercase;
}

.women-style-heading{
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  letter-spacing:0.04em;
  color:var(--color-primary);
}

.women-style-heading-ja{
  margin-top:8px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  letter-spacing:0.06em;
  color:rgba(46,46,46,0.55);
}

.women-style-lead{
  margin-top:18px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14.5px;
  line-height:1.95;
  letter-spacing:0.03em;
  color:rgba(46,46,46,0.68);
}

/* ---------- Grid: 1 col mobile -> up to 4 cols wide desktop ---------- */
.women-style-grid{
  list-style:none;
  margin:clamp(64px, 8vw, 100px) auto 0;
  padding:0;
  max-width:1400px;
  display:grid;
  grid-template-columns:1fr;
  gap:48px 28px;
}
@media (min-width: 640px){
  .women-style-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .women-style-grid{ grid-template-columns:repeat(3, 1fr); gap:56px 32px; }
}
@media (min-width: 1400px){
  .women-style-grid{ grid-template-columns:repeat(4, 1fr); }
}

.women-style-card{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 800ms var(--ease-apple), transform 800ms var(--ease-apple);
}
.reveal-section.is-visible .women-style-card{ opacity:1; transform:translateY(0); }
.reveal-section.is-visible .women-style-card:nth-child(1){ transition-delay:220ms; }
.reveal-section.is-visible .women-style-card:nth-child(2){ transition-delay:280ms; }
.reveal-section.is-visible .women-style-card:nth-child(3){ transition-delay:340ms; }
.reveal-section.is-visible .women-style-card:nth-child(4){ transition-delay:400ms; }
.reveal-section.is-visible .women-style-card:nth-child(5){ transition-delay:460ms; }
.reveal-section.is-visible .women-style-card:nth-child(6){ transition-delay:520ms; }
.reveal-section.is-visible .women-style-card:nth-child(7){ transition-delay:580ms; }
.reveal-section.is-visible .women-style-card:nth-child(8){ transition-delay:640ms; }

/* ---------- Carousel viewport (1:1, never crops the hairstyle) ---------- */
.women-style-carousel{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:20px;
  overflow:hidden;
  background:var(--color-sand);
  touch-action:pan-y; /* allow horizontal swipe gesture to be read by our JS */
}

.women-style-carousel__placeholder{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 75% 55% at 25% 20%, rgba(255,248,236,0.9), transparent 60%),
    radial-gradient(ellipse 70% 55% at 80% 85%, rgba(181,138,99,0.22), transparent 65%),
    var(--color-sand);
}

.women-style-carousel__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%; /* keeps the crown of the head in frame */
  transition:opacity 250ms var(--ease-apple);
}

.women-style-carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:rgba(250,249,247,0.75);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:var(--color-text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color 220ms var(--ease-apple), transform 220ms var(--ease-apple);
}
/* Invisible hit-area extension so the tappable zone reaches ~44px on
   touch devices without visually enlarging the circle itself. */
.women-style-carousel__arrow::after{
  content:'';
  position:absolute;
  inset:-6px;
}
.women-style-carousel__arrow::before{
  content:'';
  width:7px;
  height:7px;
  border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
}
.women-style-carousel__arrow--prev{ left:10px; }
.women-style-carousel__arrow--prev::before{ transform:rotate(135deg); margin-left:2px; }
.women-style-carousel__arrow--next{ right:10px; }
.women-style-carousel__arrow--next::before{ transform:rotate(-45deg); margin-right:2px; }

.women-style-carousel__arrow:hover{
  background:rgba(250,249,247,0.95);
}
.women-style-carousel__arrow:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

/* ---------- Dot navigation ---------- */
.women-style-dots{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
}

.women-style-dots__dot{
  width:44px;
  height:28px;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.women-style-dots__dot::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(46,46,46,0.25);
  transition:background-color 220ms var(--ease-apple), transform 220ms var(--ease-apple);
}
.women-style-dots__dot.is-active::before{
  background:var(--color-primary);
  transform:scale(1.3);
}
.women-style-dots__dot:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
  border-radius:50%;
}

/* ---------- Title ---------- */
.women-style-card__info{
  margin-top:14px;
  text-align:center;
}
.women-style-card__en{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.04em;
  color:var(--color-text);
}
.women-style-card__ja{
  margin-top:4px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:12.5px;
  letter-spacing:0.02em;
  color:rgba(46,46,46,0.55);
}

/* ---------- Screen-reader-only utility ---------- */
.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;
}

/* ==================================================================
   REPLACING / ADDING WOMEN'S STYLE IMAGES
   Each style needs exactly 4 files at assets/images/women-style/,
   named {slug}-front.webp / -left45.webp / -right45.webp / -back.webp
   (slug values are set in script.js's `womenStyleWorks`). JPEG
   originals are kept alongside with the same names for backup/
   re-export purposes but are not referenced by the page.
================================================================== */