/*
Theme Name: EartH Original
Theme URI: https://example.com/
Author: EartH
Description: Original WordPress theme for EartH.
Version: 1.0.0
Text Domain: earth
*/

:root{
  --paper:#f8f8f8;
  --paper-2:#f8f8f8;
  --ink:#1c1c1a;
  --green:#2a4326;
  --muted:#b3b2ad;
  --line:#1c1c1a;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
}
*{margin:0;padding:0;box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--noise) 0 0/220px 220px, #f8f8f8; color:var(--ink); font-family:"Zen Old Mincho",serif; line-height:1.6; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.serif{ font-family:"Cormorant Garamond",serif; }
.sans{ font-family:"Jost",sans-serif; }
.mincho{ font-family:"Zen Old Mincho",serif; }
.wrap{ position:relative; width:100%; overflow:hidden; }

/* ============ HEADER ============ */
.hdr{ position:fixed; top:0; left:0; width:100%; z-index:60; display:flex; align-items:flex-start; justify-content:space-between; padding:22px 20px; }
.hdr-logo{ display:block; overflow:hidden; }
.hdr-logo img{ width:118px; height:auto; mix-blend-mode:multiply; animation:logoReveal 1.2s cubic-bezier(.16,.84,.36,1) .25s both; }
@keyframes logoReveal{ from{ clip-path:inset(105% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:reduce){ .hdr-logo img{ animation:none; } }
.hdr-nav{ display:none; }
.hdr-contact{ display:none; }
.burger{ width:42px; height:30px; display:flex; flex-direction:column; justify-content:center; gap:8px; cursor:pointer; background:none; border:none; }
.burger span{ display:block; height:1.5px; width:38px; background:var(--ink); transition:.35s; }
.hdr-nav,.hdr-contact{ transition:color .45s ease; }
.hdr-nav::before{ transition:background .45s ease; }
.hdr-logo img{ transition:filter .45s ease; }
.hdr.on-dark .hdr-nav,.hdr.on-dark .hdr-contact{ color:#fff; }
.hdr.on-dark .hdr-nav::before{ background:#fff; }
.hdr.on-dark .burger span{ background:#fff; }
.hdr.on-dark .hdr-logo img{ mix-blend-mode:normal; filter:brightness(0) invert(1); }
.burger.open span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }
.side-jp{ display:none; }

/* mobile menu overlay */
.menu{ position:fixed; inset:0; background:var(--paper); z-index:55; display:flex; flex-direction:column; justify-content:center; padding:0 36px; gap:6px; transform:translateY(-100%); opacity:0; pointer-events:none; transition:.5s cubic-bezier(.7,0,.2,1); }
.menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.menu a{ font-family:"Cormorant Garamond",serif; font-size:34px; letter-spacing:.08em; padding:12px 0; border-bottom:1px solid rgba(0,0,0,.12); display:flex; align-items:baseline; gap:14px; }
.menu a .jp{ font-family:"Zen Old Mincho",serif; font-size:13px; color:#7a7a74; letter-spacing:.1em; }

/* tablet & below: force hamburger */
@media (max-width:1024px){
  .hdr-nav{ display:none !important; }
  .hdr-contact{ display:none !important; }
  .burger{ display:flex !important; }
  .menu{ display:flex !important; }
}

/* ============ HERO ============ */
.hero{ position:relative; width:100%; padding:96px 0 0; background:var(--noise) 0 0/220px 220px, #f8f8f8; }
.hero-kanji{ position:absolute; font-family:"Zen Old Mincho",serif; color:rgba(120,118,110,.16); pointer-events:none; user-select:none; z-index:1; opacity:0; animation:kanjiBleed 1.8s ease-out 2.2s both; will-change:opacity,filter; }
@keyframes kanjiBleed{ from{ opacity:0; filter:blur(20px); } to{ opacity:1; filter:blur(0); } }
.k-sou{ animation-delay:3s; }
@media (prefers-reduced-motion:reduce){ .hero-kanji{ animation:none; opacity:1; } }
.k-ken{ width:90px; top:104px; left:58%; }
.k-sou{ width:96px; top:auto; bottom:300px; left:5%; right:auto; }
.hero-scroll{ position:absolute; left:14px; top:150px; writing-mode:vertical-rl; font-family:"Cormorant Garamond",serif; font-style:italic; letter-spacing:.25em; font-size:13px; color:#1c1c1a; z-index:30; }
.hero-scroll::after{ content:""; position:absolute; left:50%; top:110px; width:1px; height:230px; background:#1c1c1a; }

.hero-imgs{ position:relative; width:100%; }
@keyframes heroReveal{ from{ clip-path:inset(100% 0 0 0); opacity:0; filter:blur(16px); transform:scale(1.04); } to{ clip-path:inset(0 0 0 0); opacity:1; filter:blur(0); transform:scale(1); } }
.h-bed,.h-dine,.h-bath,.hero-mah-frame{ animation:heroReveal 1.4s cubic-bezier(.16,.84,.36,1) both; will-change:clip-path,transform,filter; }
.h-bed{ animation-delay:.15s; }
.h-dine{ animation-delay:.4s; }
.h-bath{ animation-delay:.6s; }
.hero-mah-frame{ animation-delay:.8s; }
@media (prefers-reduced-motion:reduce){ .h-bed,.h-dine,.h-bath,.hero-mah-frame{ animation:none; } }

/* inner Ken Burns zoom for photos (plays after reveal) */
.kf{ overflow:hidden; }
.kimg{ width:100%; height:100%; object-fit:cover; display:block; transform-origin:center; animation:kenburns 22s ease-in-out 1.8s infinite alternate both; will-change:transform; }
@keyframes kenburns{ from{ transform:scale(1.01); } to{ transform:scale(1.1); } }
@media (prefers-reduced-motion:reduce){ .kimg{ animation:none; } }

/* ===== scroll reveal utilities ===== */
.rv-img{ clip-path:inset(100% 0 0 0); opacity:0; transition:clip-path 1.7s cubic-bezier(.19,1,.22,1), opacity 1.7s cubic-bezier(.19,1,.22,1); will-change:clip-path; }
.rv-img.is-in{ clip-path:inset(0 0 0 0); opacity:1; }
/* bottom-mask reveal that preserves pill rounding (Works cards) */
.rv-mask{ clip-path:inset(100% 0 0 0 round 999px); opacity:0; transition:clip-path 1.7s cubic-bezier(.19,1,.22,1), opacity 1.7s cubic-bezier(.19,1,.22,1); will-change:clip-path; }
.rv-mask.is-in{ clip-path:inset(0 0 0 0 round 999px); opacity:1; }
.wgrid .wcard:nth-child(2) .rv-mask{ transition-delay:.08s; }
.wgrid .wcard:nth-child(3) .rv-mask{ transition-delay:.16s; }
.wgrid .wcard:nth-child(4) .rv-mask{ transition-delay:.24s; }
.wgrid .wcard:nth-child(5) .rv-mask{ transition-delay:.32s; }
.wgrid .wcard:nth-child(6) .rv-mask{ transition-delay:.40s; }
.wgrid .wcard:nth-child(7) .rv-mask{ transition-delay:.48s; }
.wgrid .wcard:nth-child(8) .rv-mask{ transition-delay:.56s; }
@media (prefers-reduced-motion:reduce){ .rv-mask{ transition:none; opacity:1; clip-path:none; } }
.rl{ display:block; overflow:hidden; }
.rl > span{ display:block; transform:translateY(115%); transition:transform 1.5s cubic-bezier(.19,1,.22,1); will-change:transform; }
.rl.is-in > span,.is-in .rl > span{ transform:translateY(0); }
.rv-fade{ opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.16,.84,.36,1); }
.rv-fade.is-in{ opacity:1; transform:none; }
/* hero copy + title: play on load, gracefully after the images finish */
.hero-title .rl > span{ animation:rlUp 1s cubic-bezier(.16,.84,.36,1) both; }
.hero-title .l1 > span{ animation-delay:1.5s; }
.hero-title .l2 > span{ animation-delay:1.65s; }
.hero-title .l3 > span{ animation-delay:1.8s; }
@keyframes rlUp{ from{ transform:translateY(115%); } to{ transform:translateY(0); } }
.hero-copy .en,.hero-copy .jp{ opacity:0; animation:heroFadeUp 1.1s cubic-bezier(.16,.84,.36,1) both; will-change:opacity,transform; }
.hero-copy .en{ animation-delay:1.95s; }
.hero-copy .jp{ animation-delay:2.1s; }
@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
/* horizontal line draw (Our —— Works) */
.works-title .ln{ transform-origin:left center; transform:scaleX(0); transition:transform 1.1s cubic-bezier(.7,0,.2,1); }
.works-title.is-in .ln{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .rv-img,.rl>span,.rv-fade,.works-title .ln,.hero-copy .en,.hero-copy .jp,.hero-title .rl > span{ animation:none; transition:none; opacity:1; transform:none; clip-path:none; } }

/* SCROLL indicator line dropping */
.hero-scroll::after{ animation:lineDrop 2.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes lineDrop{ 0%{ transform:scaleY(0); transform-origin:top; } 42%{ transform:scaleY(1); transform-origin:top; } 58%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
/* side-jp: fixed （）brackets framing a ~400px window; single-column text scrolls top→bottom */
.side-jp .sj-window{ flex:1 1 auto; overflow:hidden; position:relative; width:100%; }
.side-jp .sj-track{ position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; align-items:center; animation:sjScroll 30s linear infinite; will-change:transform; }
.side-jp .sj-track > span{ writing-mode:vertical-rl; white-space:nowrap; padding:14px 0; }
.side-jp .sj-bracket{ writing-mode:vertical-rl; flex:none; font-size:15px; line-height:1; }
@keyframes sjScroll{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .hero-scroll::after,.side-jp .sj-track{ animation:none; } }
.h-bed{ position:relative; width:74%; aspect-ratio:1/1; object-fit:cover; z-index:2; }
.h-dine{ position:absolute; top:-66px; right:4%; width:46%; aspect-ratio:3/4; object-fit:cover; z-index:5; }
.h-bath{ display:none; }
.v-label{ writing-mode:vertical-rl; font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.18em; color:#3a3a36; position:absolute; }
.label-teak,.label-marble{ display:none; }
.label-mah{ left:auto; right:-15px; bottom:4px; }

.hero-title{ position:absolute; z-index:8; top:30%; left:0; width:100%; text-align:center; font-family:"Cormorant Garamond",serif; color:var(--ink); line-height:.9; pointer-events:none; }
.hero-title .l1{ font-size:14vw; font-weight:500; letter-spacing:.01em; }
.hero-title .l2{ font-size:11vw; font-style:italic; font-weight:500; display:block; margin:.04em 0; }
.hero-title .l3{ font-size:13vw; font-weight:500; }

.hero-mah{ position:relative; margin:30px 0 0 auto; width:70%; }
.hero-mah-frame{ width:100%; aspect-ratio:3/2; }

.hero-copy{ position:relative; z-index:9; padding:34px 22px 60px; }
.hero-copy .en{ font-family:"Jost",sans-serif; font-weight:300; font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:20px; }
.hero-copy .jp{ font-family:"Zen Old Mincho",serif; font-size:17px; letter-spacing:.04em; line-height:1.9; }

@media (min-width:769px){
  .burger{ display:none; }
  .menu{ display:none; }
  .hdr{ padding:30px 40px; align-items:flex-start; }
  .hdr-logo img{ width:150px; }
  .hdr-nav{ display:flex; gap:46px; margin-left:auto; margin-right:60px; padding-top:14px; position:relative; }
  .hdr-nav::before{ content:""; position:absolute; left:-34px; top:21px; width:24px; height:1px; background:var(--ink); }
  .hdr-nav .col{ display:flex; flex-direction:column; gap:14px; font-family:"Cormorant Garamond",serif; font-size:15px; letter-spacing:.14em; }
  .hdr-contact{ display:block; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:30px; letter-spacing:.06em; padding-top:8px; }
  .side-jp{ display:flex; flex-direction:column; align-items:center; position:absolute; top:260px; right:22px; height:440px; width:26px; overflow:hidden; font-family:"Zen Old Mincho",serif; font-size:13px; letter-spacing:.12em; line-height:2.1; color:#2a2a26; z-index:40; }

  .hero{ position:relative; padding:0; width:100%; aspect-ratio:2000/1480; background:var(--noise) 0 0/220px 220px, #f8f8f8; }
  .hero-imgs{ position:absolute; inset:0; height:auto; }
  .k-ken{ width:9.5%; top:15%; left:40%; }
  .k-sou{ width:9.5%; top:72%; bottom:auto; left:54%; right:auto; }
  .hero-scroll{ left:2.3%; top:calc(42% + 300px); bottom:auto; }
  .hero-scroll::after{ top:-260px; height:230px; }
  .h-bed{ position:absolute; left:0; top:13%; width:35%; height:63%; aspect-ratio:auto; }
  .h-dine{ position:absolute; top:15.5%; right:auto; left:53.5%; width:16.3%; height:33%; aspect-ratio:auto; }
  .h-bath{ display:block; position:absolute; top:31%; left:71.5%; width:16.3%; height:31%; object-fit:cover; z-index:4; }
  .hero-title{ position:absolute; top:38%; left:0; width:100%; text-align:left; padding-left:23%; line-height:.9; }
  .hero-title .l1{ font-size:9.8vw; margin-left:13.6%; }
  .hero-title .l2{ font-size:8.4vw; margin-left:0; }
  .hero-title .l3{ font-size:9.8vw; margin-left:6%; }
  .hero-mah{ position:absolute; top:62%; right:auto; left:60%; width:30%; margin:0; }
  .hero-mah-frame{ aspect-ratio:3/2; }
  .hero-copy{ position:absolute; top:80%; left:6%; width:25%; padding:0; }
  .hero-copy .en{ font-size:1vw; }
  .hero-copy .jp{ font-size:1.05vw; }
  .label-teak{ top:15.5%; left:70.3%; }
  .label-marble{ top:31%; left:88.3%; }
  .label-mah{ top:auto; left:auto; right:-32px; bottom:-2px; }
}
/* ============ ABOUT ============ */
.about{ background:transparent; padding:80px 22px 50px; position:relative; }
.about-quote{ font-family:"Cormorant Garamond",serif; font-size:130px; line-height:.5; color:rgba(0,0,0,.09); display:block; height:60px; }
.about-head{ font-family:"Zen Old Mincho",serif; font-size:29px; font-weight:600; line-height:1.55; letter-spacing:.02em; margin:18px 0 30px; }
.about-btn{ display:flex; align-items:center; justify-content:space-between; width:100%; max-width:360px; border:1px solid var(--ink); padding:17px 22px; font-family:"Zen Old Mincho",serif; font-size:15px; margin-bottom:54px; transition:.3s; }
.about-btn:hover{ background:var(--ink); color:#fff; }
.about-sub h3{ font-family:"Cormorant Garamond",serif; font-size:25px; letter-spacing:.05em; margin-bottom:20px; }
.about-sub .jp{ font-family:"Zen Old Mincho",serif; font-size:15px; line-height:2.05; margin-bottom:24px; }
.about-sub .en{ font-family:"Jost",sans-serif; font-weight:300; font-size:13px; color:var(--muted); line-height:1.95; }

.biz{ position:relative; margin-top:80px; }
.biz-label{ font-family:"Cormorant Garamond",serif; writing-mode:vertical-rl; font-size:34px; letter-spacing:.06em; position:absolute; left:-4px; top:0; }
.biz-label .jp{ font-family:"Zen Old Mincho",serif; writing-mode:vertical-rl; font-size:12px; letter-spacing:.18em; color:#7a7a74; margin-top:30px; }
.acc{ margin-left:50px; }
.acc-item{ border-top:1px solid var(--ink); }
.acc-item:last-child{ border-bottom:1px solid var(--ink); }
.acc-head{ display:flex; align-items:center; gap:22px; padding:24px 4px; cursor:pointer; }
.acc-head .no{ font-family:"Cormorant Garamond",serif; font-size:25px; letter-spacing:.05em; }
.acc-head .ti{ font-family:"Zen Old Mincho",serif; font-size:18px; flex:1; letter-spacing:.04em; }
.acc-head .pm{ position:relative; width:20px; height:20px; flex:none; }
.acc-head .pm::before{ content:""; position:absolute; top:50%; left:0; width:20px; height:1.5px; background:#444; transform:translateY(-50%); }
.acc-head .pm::after{ content:""; position:absolute; left:50%; top:0; width:1.5px; height:20px; background:#444; transform:translateX(-50%); transition:transform .35s ease, opacity .35s ease; }
.acc-item.open .pm::after{ opacity:0; transform:translateX(-50%) scaleY(0); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .5s ease; padding:0 4px 0 62px; }
.acc-item.open .acc-body{ max-height:640px; padding-bottom:30px; }
.acc-body .desc{ font-family:"Zen Old Mincho",serif; font-size:13.5px; line-height:1.95; color:#3a3a36; }
.acc-body img{ border-radius:120px; margin-top:20px; width:100%; max-width:300px; }
.biz-deco{ margin-top:60px; overflow:hidden; width:100%; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.mq-track{ display:flex; width:max-content; animation:marquee 36s linear infinite; transform:translate3d(0,0,0); will-change:transform; backface-visibility:hidden; }
.mq-group{ display:flex; align-items:center; gap:7vw; padding-right:7vw; flex:none; }
.mq-word{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:14vw; line-height:1; color:rgba(0,0,0,.07); white-space:nowrap; }
.mq-pill{ flex:none; width:36vw; height:13vw; border-radius:120px; object-fit:cover; }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

@media (min-width:769px){
  .about{ padding:120px 6% 70px; }
  .about-quote{ font-size:180px; height:90px; }
  .about-top{ display:grid; grid-template-columns:1.05fr .95fr; column-gap:6%; align-items:start; }
  .about-head{ font-size:38px; margin:6px 0 36px; }
  .about-sub{ padding-top:14px; }
  .biz{ margin-top:60px; display:grid; grid-template-columns:120px 1fr; }
  .biz-label{ position:static; align-self:start; justify-self:center; }
  .acc{ margin-left:0; }
  .acc-item.open .acc-body{ max-height:340px; }
  .acc-body{ display:flex; gap:60px; align-items:flex-start; padding-left:62px; }
  .acc-body .desc{ padding-top:4px; }
  .acc-body img{ margin-top:0; width:300px; }
  .biz-deco{ margin-top:70px; }
  .mq-group{ gap:80px; padding-right:80px; }
  .mq-word{ font-size:120px; }
  .mq-pill{ width:310px; height:112px; }
}
/* ============ MATERIALS ============ */
.materials{ background:transparent; padding:70px 0; }
.mat-left{ padding:0 22px; }
.mat-head{ font-family:"Cormorant Garamond",serif; font-size:46px; font-weight:500; line-height:1.0; margin-bottom:26px; }
.mat-left .jp{ font-family:"Zen Old Mincho",serif; font-size:15px; line-height:2.0; margin-bottom:22px; }
.mat-left .en{ font-family:"Jost",sans-serif; font-weight:300; font-size:12.5px; color:var(--muted); line-height:1.9; }
.mat-scroll{ display:flex; gap:20px; overflow-x:auto; padding:44px 22px 16px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dragging{ scroll-snap-type:none !important; user-select:none; }
.mat-scroll img,.proj-track img,.team-row img,.sr-thumbs img{ -webkit-user-drag:none; user-drag:none; }
.mat-scroll::-webkit-scrollbar{ display:none; }
.mat-card{ flex:none; width:70vw; max-width:280px; scroll-snap-align:start; }
.mat-card .kf{ width:100%; aspect-ratio:646/1140; }
.mat-card .ti{ font-family:"Zen Old Mincho",serif; font-size:16px; margin-top:16px; letter-spacing:.03em; }
.mat-card .nm{ font-family:"Cormorant Garamond",serif; font-size:13px; color:#9a9a92; letter-spacing:.04em; margin-top:3px; }
.mat-card .desc{ font-family:"Zen Old Mincho",serif; font-size:13px; line-height:1.95; margin-top:16px; }
.mat-track{ height:1px; background:#cdcdc6; margin:8px 22px 0; position:relative; }
.mat-thumb{ position:absolute; height:2px; top:-0.5px; background:var(--ink); width:25%; left:0; transition:left .1s linear; }

@media (min-width:769px){
  .materials{ padding:110px 0 90px; }
  .mat-top{ display:grid; grid-template-columns:30% 70%; align-items:start; }
  .mat-left{ padding:14px 0 0 6%; }
  .mat-head{ font-size:58px; }
  .mat-scroll{ padding:0 6% 16px 34px; }
  .mat-card{ width:230px; }
  .mat-track{ margin:14px 6% 0 34px; }
}
/* ============ WORKS ============ */
.works{ background:var(--green); color:#f1efe7; padding:60px 0 70px; position:relative; overflow:hidden; }
.works-introlabel{ font-family:"Zen Old Mincho",serif; font-size:14px; letter-spacing:.12em; padding:0 22px; margin-bottom:24px; }
.proj-carousel{ position:relative; }
.proj-track{ display:flex; gap:14px; overflow-x:auto; padding:0 22px; scrollbar-width:none; }
.proj-track::-webkit-scrollbar{ display:none; }
.proj-slide{ flex:none; width:86vw; max-width:600px; }
.proj-slide .kf{ width:100%; aspect-ratio:16/10; }
.proj-next{ position:absolute; top:42%; right:6px; width:74px; height:74px; border:1px solid rgba(255,255,255,.7); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond",serif; font-size:17px; background:rgba(42,67,38,.35); backdrop-filter:blur(2px); cursor:pointer; }
.proj-cap{ display:flex; gap:18px; padding:20px 22px 0; align-items:flex-start; }
.proj-cap .pno{ font-family:"Cormorant Garamond",serif; line-height:1.1; }
.proj-cap .pno small{ display:block; font-size:13px; letter-spacing:.08em; }
.proj-cap .pno b{ font-style:italic; font-weight:500; font-size:26px; }
.proj-cap .ptxt{ font-family:"Zen Old Mincho",serif; font-size:13px; line-height:1.9; }

.works-title{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:19vw; line-height:.92; padding:64px 22px 40px; display:flex; align-items:center; gap:4vw; white-space:nowrap; }
.works-title .ln{ flex:1; height:1px; background:rgba(255,255,255,.7); }
.works-title span:not(.ln){ display:block; }

.wsearch{ padding:0 22px; }
.wsearch h4{ font-family:"Cormorant Garamond",serif; font-size:15px; letter-spacing:.08em; margin-bottom:16px; }
.wsearch h4.mt{ margin-top:34px; }
.pills{ display:flex; flex-wrap:wrap; gap:12px; }
.pill{ border:1px solid rgba(255,255,255,.45); border-radius:30px; padding:10px 22px; font-family:"Zen Old Mincho",serif; font-size:14px; cursor:pointer; transition:.3s; }
.pill:hover{ background:#fff; color:var(--green); border-color:#fff; }

.wgrid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 16px; padding:46px 22px 0; }
.wgrid::-webkit-scrollbar{ display:none; }
.wcard .ph{ background:#e8e7e2; border-radius:999px; aspect-ratio:3/4.2; }
.wcard .wt{ font-family:"Zen Old Mincho",serif; font-size:14px; line-height:1.6; margin-top:16px; text-decoration:underline; text-underline-offset:4px; }
.wcard .wh{ font-family:"Zen Old Mincho",serif; font-size:12px; color:rgba(241,239,231,.7); margin-top:16px; display:flex; gap:18px; }
.viewall{ display:block; margin:50px auto 0; border:1px solid rgba(255,255,255,.6); padding:17px 0; width:100%; max-width:380px; text-align:center; font-family:"Cormorant Garamond",serif; font-size:17px; letter-spacing:.1em; transition:.3s; }
.viewall:hover{ background:#fff; color:var(--green); }
.works-side{ display:none; }

@media (min-width:769px){
  .works{ padding:80px 0 100px; }
  .works-introlabel{ padding:0 6%; }
  .proj-track{ padding:0 6%; gap:18px; }
  .proj-slide{ width:44%; max-width:none; }
  .proj-next{ width:120px; height:120px; right:8%; top:30%; font-size:20px; }
  .proj-cap{ padding:24px 6% 0; gap:26px; }
  .proj-cap .pno b{ font-size:30px; }
  .works-title{ font-size:9.6vw; padding:80px 5% 60px; gap:3vw; }
  .works-title .ln{ margin:0; }
  .wsearch{ max-width:none; margin:0; padding:0 5%; }
  .pills{ gap:14px; }
  .wgrid-wrap{ position:relative; max-width:none; margin:0; }
  .wgrid{ display:flex; grid-template-columns:none; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:40px; max-width:none; margin:0; padding:50px 5% 0; position:static; scroll-padding-left:5%; }
  .wcard{ flex:none; width:calc((100% - 10% - 4*40px)/5); scroll-snap-align:start; }
  .works-side{ display:flex; position:absolute; width:90px; height:90px; border:1px solid rgba(255,255,255,.6); border-radius:50%; align-items:center; justify-content:center; font-family:"Cormorant Garamond",serif; font-size:18px; top:calc(50% + 25px); transform:translateY(-50%); cursor:pointer; z-index:5; background:rgba(42,67,38,.55); backdrop-filter:blur(2px); transition:background .3s,color .3s; }
  .works-side:hover{ background:#fff; color:var(--green); }
  .works-side.l{ left:1.5%; }
  .works-side.r{ right:1.5%; }
}
/* ============ ARCHITECT / TEAM ============ */
.team-sec{ background:transparent; padding:70px 22px; }
.ad-head{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:31px; line-height:1.25; margin-bottom:26px; }
.ad-jp{ font-family:"Zen Old Mincho",serif; font-size:15px; line-height:2.1; margin-bottom:40px; }
.ad-en{ font-family:"Jost",sans-serif; font-weight:300; font-size:13px; color:var(--muted); line-height:1.9; margin-bottom:30px; }
.team-title{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:34px; margin-bottom:30px; }
.team-row{ display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; }
.team-row::-webkit-scrollbar{ display:none; }
.tcard{ flex:none; width:58vw; max-width:230px; }
.tcard .ph{ background:#a9a9a3; aspect-ratio:3/4; }
.tcard .nm{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:22px; text-align:center; margin-top:16px; }
.tcard .role{ font-family:"Zen Old Mincho",serif; font-size:12.5px; text-align:center; margin-top:4px; color:#333; }

/* ============ SHOWROOM ============ */
.showroom{ background:transparent; padding:0 0 60px; }
.sr-hero .kf{ width:100%; aspect-ratio:16/12; }
.sr-body{ padding:36px 22px 0; }
.sr-title{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:54px; margin-bottom:22px; }
.sr-jp{ font-family:"Zen Old Mincho",serif; font-size:16px; line-height:1.95; letter-spacing:.03em; margin-bottom:22px; }
.sr-en{ font-family:"Jost",sans-serif; font-weight:300; font-size:13px; color:var(--muted); line-height:1.9; margin-bottom:34px; }
.sr-btn{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--ink); padding:18px 24px; font-family:"Zen Old Mincho",serif; font-size:15px; letter-spacing:.06em; transition:.3s; }
.sr-btn:hover{ background:var(--ink); color:#fff; }
.sr-btn svg{ width:20px; height:20px; }
.sr-thumbs{ display:flex; gap:16px; overflow-x:auto; padding:34px 22px 0; scrollbar-width:none; }
.sr-thumbs::-webkit-scrollbar{ display:none; }
.sr-thumb{ position:relative; flex:none; width:74vw; max-width:360px; padding-left:26px; }
.sr-frame{ overflow:hidden; }
.sr-thumb img{ width:100%; aspect-ratio:1152/880; object-fit:cover; display:block; }
.pllx-img{ will-change:transform; }
.sr-thumb .lab{ writing-mode:vertical-rl; position:absolute; left:0; bottom:6px; font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.14em; color:#6a6a64; }

/* ============ COMPANY ============ */
.company{ position:relative; padding:70px 22px; background:transparent; overflow:hidden; }
.company::before,.company::after{ content:""; position:absolute; pointer-events:none; z-index:0; background-repeat:no-repeat; }
.company::before{ left:-12%; bottom:-18%; width:80%; height:95%; background-image:url("asset/img018_sm.png"); background-size:contain; background-position:left bottom; -webkit-mask-image:radial-gradient(closest-side at 35% 65%, #000 45%, transparent 100%); mask-image:radial-gradient(closest-side at 35% 65%, #000 45%, transparent 100%); }
.company::after{ right:-12%; top:-6%; width:60%; height:75%; background-image:url("asset/img017_sm.png"); background-size:contain; background-position:right top; -webkit-mask-image:radial-gradient(closest-side at 70% 35%, #000 42%, transparent 100%); mask-image:radial-gradient(closest-side at 70% 35%, #000 42%, transparent 100%); }
.company > *{ position:relative; z-index:1; }
.co-quote{ font-family:"Cormorant Garamond",serif; font-size:120px; line-height:.5; color:rgba(0,0,0,.08); display:block; height:54px; }
.co-title{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:62px; margin:14px 0 48px; }
.co-label{ display:flex; align-items:center; gap:18px; font-family:"Zen Old Mincho",serif; font-size:15px; letter-spacing:.06em; margin-bottom:30px; }
.co-label::before{ content:""; width:30px; height:1px; background:var(--ink); flex:none; }
.co-row{ margin-bottom:26px; }
.co-row .k{ font-family:"Zen Old Mincho",serif; font-size:15px; margin-bottom:6px; }
.co-row .v{ font-family:"Zen Old Mincho",serif; font-size:15px; color:#2a2a26; letter-spacing:.02em; }
.biz-list{ list-style:none; }
.biz-list li{ font-family:"Zen Old Mincho",serif; font-size:14.5px; line-height:1.7; margin-bottom:18px; letter-spacing:.02em; }

/* ============ FOOTER ============ */
.foot-band{ position:relative; overflow:visible; }
.foot-imgs{ display:flex; flex-direction:column; }
.foot-imgs img{ width:100%; height:300px; object-fit:cover; }
.foot-imgs img.f3{ display:none; }
.foot-overlay{ position:absolute; top:54%; left:22px; transform:translateY(-50%); color:#f4f2ec; z-index:3; }
.foot-overlay .big{ font-family:"Zen Old Mincho",serif; font-size:30px; line-height:1.5; letter-spacing:.04em; text-shadow:0 1px 14px rgba(0,0,0,.3); }
.foot-overlay .ig{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:21px; margin-top:34px; text-shadow:0 1px 14px rgba(0,0,0,.3); }
.foot-overlay .ig img{ width:30px; margin-top:14px; }
.foot-circle-wrap{ position:absolute; top:-60px; right:-150px; width:460px; height:460px; z-index:2; will-change:transform; }
.foot-circle{ width:100%; height:100%; animation:spin 50s linear infinite; opacity:.92; }
.foot-circle text{ font-family:"Cormorant Garamond",serif; fill:rgba(255,255,255,.9); font-size:16px; letter-spacing:3px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.foot-bottom{ background:transparent; padding:54px 22px 40px; text-align:center; }
.foot-bottom .flogo{ width:150px; margin:0 auto 0; mix-blend-mode:multiply; }
.foot-nav{ display:none; }
.foot-copy{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:12px; color:#555; letter-spacing:.06em; margin-top:18px; }

@media (min-width:769px){
  .team-sec{ padding:110px 6% 90px; }
  .team-intro{ display:grid; grid-template-columns:1fr 1fr; column-gap:8%; margin-bottom:70px; }
  .ti-right{ order:2; }
  .ti-left{ order:1; align-self:end; }
  .ad-head{ font-size:34px; }
  .team-title{ margin-bottom:0; }
  .team-row{ overflow:visible; gap:24px; }
  .tcard{ flex:1; width:auto; max-width:none; }

  .showroom{ padding:0 0 100px; }
  .sr-top{ display:grid; grid-template-columns:48% 52%; align-items:center; }
  .sr-hero .kf{ aspect-ratio:1924/1748; }
  .sr-body{ padding:0 6% 0 6%; }
  .sr-title{ font-size:82px; }
  .sr-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:60px 6% 0; overflow:visible; }
  .sr-thumb{ width:auto; max-width:none; }

  .company{ padding:130px 6% 110px; }
  .co-quote{ font-size:170px; height:80px; }
  .co-title{ font-size:120px; margin:18px 0 70px; }
  .co-grid{ display:grid; grid-template-columns:300px 1fr; }
  .co-label{ margin-bottom:0; }
  .co-row{ display:grid; grid-template-columns:200px 1fr; align-items:baseline; margin-bottom:24px; }
  .co-row .k{ margin-bottom:0; }
  .biz-block{ margin-top:60px; }
  .biz-list li{ margin-bottom:14px; }

  .foot-imgs{ flex-direction:row; }
  .foot-imgs img{ width:33.333%; height:520px; }
  .foot-imgs img.f3{ display:block; }
  .foot-overlay{ left:7%; top:50%; }
  .foot-overlay .big{ font-size:36px; }
  .foot-circle-wrap{ width:720px; height:720px; right:3%; top:-120px; left:auto; }
  .foot-bottom{ display:flex; align-items:center; justify-content:space-between; padding:60px 6% 50px; text-align:left; position:relative; }
  .foot-bottom .flogo{ margin:0; }
  .foot-nav{ display:flex; gap:50px; position:relative; }
  .foot-nav::before{ content:""; position:absolute; left:-34px; top:9px; width:24px; height:1px; background:var(--ink); }
  .foot-nav .col{ display:flex; flex-direction:column; gap:12px; font-family:"Cormorant Garamond",serif; font-size:14px; letter-spacing:.12em; }
  .foot-copy{ position:absolute; left:6%; bottom:24px; margin:0; }
}


/* ============ RESPONSIVE / MAINTENANCE OVERRIDES ============ */
:root{
  --gutter:clamp(20px,5vw,86px);
  --section-y:clamp(64px,8vw,130px);
}
html{ scroll-behavior:smooth; }
body.menu-active{ overflow:hidden; touch-action:none; }
button,a{ -webkit-tap-highlight-color:transparent; }
.kf,.rv-img,.rv-mask,.sr-frame{ overflow:hidden; }
.kimg{ min-width:100%; min-height:100%; }
.h-bed,.h-dine,.h-bath,.hero-mah-frame,.mat-card .kf,.proj-slide .kf,.sr-hero .kf,.sr-frame{ background:#e8e7e2; }
.about-head,.hero-copy .jp,.mat-left .jp,.ad-jp,.sr-jp,.co-row .v,.biz-list li{ word-break:normal; overflow-wrap:anywhere; }

@media (max-width:768px){
  .hdr{ padding:18px 18px; align-items:center; }
  .hdr-logo img{ width:clamp(98px,30vw,118px); }
  .burger{ width:40px; height:40px; align-items:flex-end; gap:7px; }
  .burger span{ width:34px; }
  .menu{ padding:86px 28px 40px; justify-content:flex-start; overflow-y:auto; }
  .menu a{ font-size:clamp(30px,10vw,42px); padding:14px 0; }
  .hero{ padding-top:88px; }
  .hero-scroll{ display:none; }
  .k-ken{ width:72px; top:94px; left:auto; right:18px; }
  .k-sou{ width:78px; bottom:260px; left:8px; }
  .h-bed{ width:78%; max-width:520px; }
  .h-dine{ top:-42px; right:0; width:43%; min-width:150px; }
  .hero-title{ top:30%; padding:0 10px; }
  .hero-title .l1{ font-size:clamp(50px,14vw,88px); }
  .hero-title .l2{ font-size:clamp(42px,11vw,70px); }
  .hero-title .l3{ font-size:clamp(48px,13vw,82px); }
  .hero-mah{ width:min(74%,520px); margin-top:26px; }
  .hero-copy{ padding:32px 22px 56px; }
  .hero-copy .jp br{ display:none; }
  .about,.team-sec,.company{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .about-head{ font-size:clamp(27px,7.4vw,36px); }
  .about-btn,.sr-btn,.viewall{ max-width:none; }
  .biz-label{ position:static; writing-mode:horizontal-tb; font-size:32px; margin-bottom:26px; }
  .biz-label .jp{ writing-mode:horizontal-tb; display:block; margin-top:8px; }
  .acc{ margin-left:0; }
  .acc-head{ gap:14px; padding:22px 0; }
  .acc-head .ti{ font-size:16px; }
  .acc-body{ padding-left:0; }
  .mat-card{ width:min(74vw,310px); }
  .works-title{ font-size:clamp(64px,18vw,112px); padding-left:var(--gutter); padding-right:var(--gutter); }
  .wgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wcard .wh{ flex-direction:column; gap:6px; }
  .team-row,.sr-thumbs,.mat-scroll,.proj-track{ scroll-snap-type:x proximity; }
  .tcard,.sr-thumb{ scroll-snap-align:start; }
  .sr-title{ font-size:clamp(52px,15vw,76px); }
  .co-title{ font-size:clamp(58px,17vw,90px); }
  .foot-circle-wrap{ width:360px; height:360px; right:-150px; }
}

@media (max-width:420px){
  .hero-copy .jp{ font-size:15.5px; line-height:1.9; }
  .about,.team-sec,.company{ padding-left:20px; padding-right:20px; }
  .mat-left,.works-introlabel,.wsearch,.proj-cap,.sr-body{ padding-left:20px; padding-right:20px; }
  .mat-scroll,.proj-track,.sr-thumbs,.wgrid{ padding-left:20px; padding-right:20px; }
  .pill{ padding:9px 16px; font-size:13px; }
  .wgrid{ gap:28px 14px; }
  .foot-overlay .big{ font-size:26px; }
}

@media (min-width:769px) and (max-width:1180px){
  .hdr{ padding:24px 28px; }
  .hdr-logo img{ width:128px; }
  .side-jp{ display:none; }
  .hero{ min-height:720px; aspect-ratio:auto; }
  .hero-scroll{ top:68%; }
  .hero-title{ top:39%; padding-left:20%; }
  .hero-title .l1,.hero-title .l3{ font-size:clamp(88px,9.8vw,122px); }
  .hero-title .l2{ font-size:clamp(76px,8.4vw,104px); }
  .hero-copy{ top:79%; width:36%; }
  .hero-copy .en{ font-size:13px; }
  .hero-copy .jp{ font-size:14px; }
  .about-top,.mat-top,.team-intro,.sr-top,.co-grid{ grid-template-columns:1fr; row-gap:40px; }
  .mat-left{ padding:0 var(--gutter) 34px; }
  .mat-scroll{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .mat-track{ margin-left:var(--gutter); margin-right:var(--gutter); }
  .proj-slide{ width:62%; }
  .wcard{ width:30%; min-width:250px; }
  .team-row,.sr-thumbs{ overflow-x:auto; display:flex; }
  .tcard{ flex:0 0 28%; min-width:210px; }
  .sr-thumb{ flex:0 0 31%; min-width:260px; }
  .foot-imgs img{ height:430px; }
}

@media (min-width:1181px){
  .hero{ min-height:820px; max-height:1180px; }
  .hero-title .l1,.hero-title .l3{ font-size:clamp(112px,9.8vw,188px); }
  .hero-title .l2{ font-size:clamp(96px,8.4vw,160px); }
  .hero-copy .en{ font-size:clamp(14px,1vw,18px); }
  .hero-copy .jp{ font-size:clamp(14px,1.05vw,19px); }
  .wcard{ min-width:210px; }
}

@media (hover:none){
  .about-btn:hover,.sr-btn:hover,.viewall:hover,.pill:hover,.works-side:hover{ background:transparent; color:inherit; }
}


/* ============ ELEGANT MOTION ENHANCEMENTS ============ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  background:var(--paper);
  transform:translateY(0);
  animation:pageVeil 1.45s cubic-bezier(.76,0,.24,1) .18s both;
}
@keyframes pageVeil{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(-101%); }
}
.hdr{ transform:translateY(-10px); opacity:0; animation:hdrSettle 1.1s cubic-bezier(.16,.84,.36,1) 1.05s both; }
@keyframes hdrSettle{ to{ transform:none; opacity:1; } }
.menu{
  background:linear-gradient(180deg, rgba(248,248,248,.98), rgba(242,241,235,.98));
  clip-path:inset(0 0 100% 0);
  transform:none;
  transition:clip-path .95s cubic-bezier(.76,0,.24,1), opacity .55s ease;
}
.menu.open{ clip-path:inset(0 0 0 0); transform:none; }
.menu::before{
  content:"EartH";
  position:absolute;
  right:clamp(20px,8vw,120px);
  bottom:clamp(28px,8vw,90px);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(82px,18vw,240px);
  font-style:italic;
  color:rgba(42,67,38,.06);
  line-height:.8;
  pointer-events:none;
}
.menu a{
  position:relative;
  transform:translateY(22px);
  opacity:0;
  transition:transform .9s cubic-bezier(.19,1,.22,1), opacity .9s ease, letter-spacing .5s ease;
}
.menu.open a{ transform:none; opacity:1; }
.menu.open a:nth-child(1){ transition-delay:.18s; }
.menu.open a:nth-child(2){ transition-delay:.25s; }
.menu.open a:nth-child(3){ transition-delay:.32s; }
.menu.open a:nth-child(4){ transition-delay:.39s; }
.menu.open a:nth-child(5){ transition-delay:.46s; }
.menu.open a:nth-child(6){ transition-delay:.53s; }
.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s cubic-bezier(.19,1,.22,1);
  opacity:.42;
}
.menu a:hover{ letter-spacing:.12em; }
.menu a:hover::after{ transform:scaleX(1); }
.hero-imgs::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.32) 42%, transparent 58%);
  transform:translateX(-120%);
  animation:heroLightSweep 2.8s cubic-bezier(.19,1,.22,1) 1.15s both;
  mix-blend-mode:soft-light;
}
@keyframes heroLightSweep{ to{ transform:translateX(120%); } }
.hero-title .rl > span{ text-shadow:0 10px 36px rgba(248,248,248,.34); }
.h-bed,.h-dine,.h-bath,.hero-mah-frame,.rv-img,.rv-mask{ backface-visibility:hidden; }
.about-btn,.sr-btn,.viewall,.pill,.works-side,.proj-next{
  transition:transform .55s cubic-bezier(.19,1,.22,1), background .45s ease, color .45s ease, border-color .45s ease, opacity .45s ease;
}
.about-btn:hover,.sr-btn:hover,.viewall:hover,.proj-next:hover{ transform:translateY(-3px); }
.pill:hover{ transform:translateY(-2px); }
.proj-slide,.wcard,.sr-thumb,.tcard{ transition:transform .8s cubic-bezier(.19,1,.22,1), opacity .5s ease; }
.proj-slide:hover,.sr-thumb:hover,.tcard:hover{ transform:translateY(-8px); }
.wcard:hover{ transform:translateY(-10px); }
.proj-slide .kimg,.sr-thumb img,.wcard .ph{ transition:transform 1.1s cubic-bezier(.19,1,.22,1), filter 1.1s ease; }
.proj-slide:hover .kimg,.sr-thumb:hover img{ transform:scale(1.08); filter:saturate(1.03) contrast(1.03); }
.wcard:hover .ph{ transform:scale(.985); }
.wcard .wt{ transition:opacity .45s ease, transform .55s cubic-bezier(.19,1,.22,1), text-underline-offset .45s ease; }
.wcard:hover .wt{ transform:translateY(-2px); text-underline-offset:8px; }
.hdr-nav a,.foot-nav a{ position:relative; }
.hdr-nav a::after,.foot-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s cubic-bezier(.19,1,.22,1);
}
.hdr-nav a:hover::after,.foot-nav a:hover::after{ transform:scaleX(1); }
.hdr.is-scrolled{ backdrop-filter:blur(10px); background:rgba(248,248,248,.72); }
.hdr.on-dark.is-scrolled{ background:rgba(28,28,26,.24); }
@media (max-width:1024px){
  .burger{ display:flex !important; }
  .menu{ display:flex !important; }
}
@media (prefers-reduced-motion:reduce){
  body::before,.hdr,.hero-imgs::after{ animation:none; display:none; }
  .menu,.menu a,.proj-slide,.wcard,.sr-thumb,.tcard,.proj-slide .kimg,.sr-thumb img,.wcard .ph{ transition:none; transform:none; opacity:1; clip-path:none; }
}


/* ============ DESIGN REFINEMENT 02 ============ */
body{ background:var(--noise) 0 0/220px 220px, #f8f8f8; }
.opening{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--ink);
  overflow:hidden;
  animation:opLeave 1.15s cubic-bezier(.76,0,.24,1) 2.55s both;
}
.op-mark{
  position:absolute;
  top:clamp(26px,4vw,54px);
  left:clamp(26px,5vw,78px);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(22px,3vw,42px);
  letter-spacing:.06em;
  opacity:0;
  animation:opFade .8s ease .15s both;
}
.op-line{
  position:absolute;
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  line-height:.85;
  letter-spacing:.015em;
  clip-path:inset(0 0 100% 0);
  transform:translateY(18px);
  opacity:0;
  animation:opText 1.15s cubic-bezier(.19,1,.22,1) both;
}
.op-line-1{ font-size:clamp(62px,12vw,210px); top:35%; left:20%; animation-delay:.35s; }
.op-line-2{ font-size:clamp(52px,9vw,165px); top:46%; left:31%; font-style:italic; animation-delay:.55s; }
.op-line-3{ font-size:clamp(60px,11vw,190px); top:56%; left:24%; animation-delay:.75s; }
@keyframes opFade{ to{ opacity:1; } }
@keyframes opText{ to{ clip-path:inset(0 0 0 0); transform:none; opacity:1; } }
@keyframes opLeave{ to{ transform:translateY(-101%); } }

/* the supplied FV has a clean white top band, then the textured paper field */
.hero{
  background:
    linear-gradient(180deg,#fff 0 18.8%, transparent 18.8% 100%),
    var(--noise) 0 0/220px 220px,
    #f8f8f8;
}
@media (min-width:769px){
  .hero{
    background:
      linear-gradient(180deg,#fff 0 18.4%, transparent 18.4% 100%),
      var(--noise) 0 0/220px 220px,
      #f8f8f8;
  }
}

/* remove the floating translucent header strip; only the type/logo changes color */
.hdr.is-scrolled,
.hdr.on-dark.is-scrolled{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Materials: reproduce the designed background shift instead of a flat transparent section */
.materials{
  position:relative;
  background:
    linear-gradient(180deg,#fff 0 36%, transparent 36% 100%),
    var(--noise) 0 0/220px 220px,
    #f8f8f8;
}
.materials::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.72) 0 31%, rgba(255,255,255,0) 31% 100%);
  z-index:0;
}
.materials > *{ position:relative; z-index:1; }

@media (max-width:768px){
  :root{ --gutter:clamp(24px,7vw,46px); }
  .about,.team-sec,.company,.mat-left,.works-introlabel,.wsearch,.proj-cap,.sr-body,.co-grid,.foot-bottom{
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }
  .mat-scroll,.proj-track,.sr-thumbs,.wgrid{
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    scroll-padding-left:var(--gutter);
  }
  .hero-copy{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .materials{ background:var(--noise) 0 0/220px 220px,#f8f8f8; }
  .materials::before{ background:linear-gradient(180deg,#fff 0 22%, rgba(255,255,255,0) 22% 100%); }
  .op-line-1{ left:8%; top:36%; }
  .op-line-2{ left:18%; top:46%; }
  .op-line-3{ left:10%; top:55%; }
}
@media (max-width:420px){
  :root{ --gutter:24px; }
  .about,.team-sec,.company,.mat-left,.works-introlabel,.wsearch,.proj-cap,.sr-body,.co-grid,.foot-bottom{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .mat-scroll,.proj-track,.sr-thumbs,.wgrid{ padding-left:var(--gutter); padding-right:var(--gutter); }
}
body::before{ display:none !important; }
@media (prefers-reduced-motion:reduce){
  .opening{ display:none; }
}



/* ============ REQUESTED MOTION REFINEMENT 03 ============ */
/* Opening: text-only, closer to the referenced archive-style intro — spaced letters, line masks, then a quiet upward wipe. */
.opening{
  background:#fff !important;
  color:var(--ink);
  display:block !important;
  animation:openingExit 1.05s cubic-bezier(.76,0,.24,1) 3.05s both !important;
}
.op-mark{
  top:clamp(28px,4vw,58px) !important;
  left:clamp(28px,5vw,74px) !important;
  font-size:clamp(18px,2.1vw,32px) !important;
  letter-spacing:.08em;
  animation:openingMark .9s cubic-bezier(.16,.84,.36,1) .18s both !important;
}
.op-line{
  left:50% !important;
  width:min(72vw,980px);
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-style:normal !important;
  font-weight:500;
  line-height:.92;
  letter-spacing:.34em;
  transform:translate(-50%, 115%) rotate(.001deg) !important;
  clip-path:none !important;
  overflow:hidden;
  opacity:1 !important;
  white-space:nowrap;
  animation:openingLineIn 1.25s cubic-bezier(.19,1,.22,1) both !important;
}
.op-line::before{
  content:"";
  position:absolute;
  inset:auto 0 -8% 0;
  height:115%;
  background:#fff;
  transform-origin:top;
  animation:openingMask 1.25s cubic-bezier(.19,1,.22,1) both;
  pointer-events:none;
}
.op-line-1{ top:38% !important; font-size:clamp(34px,6.4vw,112px) !important; animation-delay:.45s !important; }
.op-line-2{ top:49% !important; font-size:clamp(30px,5.4vw,94px) !important; animation-delay:.68s !important; }
.op-line-3{ top:60% !important; font-size:clamp(32px,5.9vw,104px) !important; animation-delay:.91s !important; }
.op-line-1::before{ animation-delay:.45s; }
.op-line-2::before{ animation-delay:.68s; }
.op-line-3::before{ animation-delay:.91s; }
@keyframes openingMark{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes openingLineIn{ to{ transform:translate(-50%,0) rotate(.001deg) !important; } }
@keyframes openingMask{ to{ transform:translateY(-115%); } }
@keyframes openingExit{ to{ transform:translateY(-100%); visibility:hidden; } }

/* Keep the designed FV structure intact. Do not apply parallax transforms to the main hero layout boxes. */
.h-bed,.h-dine,.h-bath,.hero-mah{ will-change:auto; }

/* Global navigation hover: rotating label motion inspired by the referenced SATOYAMA TERRACE interaction. */
.hdr-nav a,.foot-nav a,.hdr-contact{
  position:relative !important;
  display:inline-block;
  color:transparent !important;
  line-height:1.1;
  perspective:700px;
  transform-style:preserve-3d;
  overflow:hidden;
}
.hdr-nav a::before,.hdr-nav a::after,.foot-nav a::before,.foot-nav a::after,.hdr-contact::before,.hdr-contact::after{
  content:attr(data-label) !important;
  position:absolute !important;
  left:0; top:0;
  width:100%; height:100%;
  background:none !important;
  transform-origin:50% 50%;
  transition:transform .62s cubic-bezier(.19,1,.22,1), opacity .62s cubic-bezier(.19,1,.22,1);
  color:var(--ink);
  text-decoration:none;
}
.hdr-nav a::after,.foot-nav a::after,.hdr-contact::after{ transform:rotateX(0) translateY(0); opacity:1; }
.hdr-nav a::before,.foot-nav a::before,.hdr-contact::before{ transform:rotateX(90deg) translateY(55%); opacity:0; }
.hdr-nav a:hover::after,.foot-nav a:hover::after,.hdr-contact:hover::after{ transform:rotateX(-90deg) translateY(-55%); opacity:0; }
.hdr-nav a:hover::before,.foot-nav a:hover::before,.hdr-contact:hover::before{ transform:rotateX(0) translateY(0); opacity:1; }
.hdr.on-dark .hdr-nav a::before,.hdr.on-dark .hdr-nav a::after,.hdr.on-dark .hdr-contact::before,.hdr.on-dark .hdr-contact::after{ color:#fff; }
.hdr-nav a:focus-visible,.foot-nav a:focus-visible,.hdr-contact:focus-visible{ outline:1px solid currentColor; outline-offset:4px; }

/* Line-by-line title reveal: softer, row-based, with a small vertical drift. */
.rl{ clip-path:inset(0 0 0 0); }
.rl > span{
  transform:translateY(1.15em) rotate(.001deg);
  filter:blur(7px);
  transition:transform 1.15s cubic-bezier(.19,1,.22,1), filter 1.15s ease, opacity 1.15s ease;
  opacity:0;
}
.rl.is-in > span,.is-in .rl > span{ transform:translateY(0) rotate(.001deg); filter:blur(0); opacity:1; }
.hero-title .rl > span{ filter:blur(8px); }
@keyframes rlUp{ from{ transform:translateY(1.15em) rotate(.001deg); opacity:0; filter:blur(8px); } to{ transform:translateY(0) rotate(.001deg); opacity:1; filter:blur(0); } }

/* Material background split: add a 0.5px black hairline at the switching point. */
.materials::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:36%;
  height:.5px;
  background:rgba(0,0,0,.82);
  transform:scaleY(.5);
  transform-origin:center;
  z-index:2;
  pointer-events:none;
}
@media (max-width:768px){
  .op-line{ width:88vw; letter-spacing:.22em; }
  .op-line-1{ top:39% !important; }
  .op-line-2{ top:49% !important; }
  .op-line-3{ top:59% !important; }
  .materials::after{ top:22%; }
}
@media (prefers-reduced-motion:reduce){
  .opening{ display:none !important; }
  .op-line,.op-line::before,.op-mark{ animation:none !important; }
  .hdr-nav a::before,.hdr-nav a::after,.foot-nav a::before,.foot-nav a::after,.hdr-contact::before,.hdr-contact::after{ transition:none; }
  .rl > span{ transition:none; opacity:1; filter:none; transform:none; }
}


/* ============ REQUESTED FIX 04: remove opening, restore original FV motion ============ */
.opening{ display:none !important; visibility:hidden !important; pointer-events:none !important; }
body::before{ display:none !important; animation:none !important; }

/* Restore the original first-view image reveal. */
.h-bed,.h-dine,.h-bath,.hero-mah-frame{
  animation:heroReveal 1.4s cubic-bezier(.16,.84,.36,1) both !important;
  will-change:clip-path,transform,filter;
}
.h-bed{ animation-delay:.15s !important; }
.h-dine{ animation-delay:.45s !important; }
.h-bath{ animation-delay:.62s !important; }
.hero-mah-frame{ animation-delay:.8s !important; }
.hero-imgs::after{ display:none !important; animation:none !important; }

/* Restore the original FV title mask animation: no blur, no opacity fade. */
.hero-title .rl{ overflow:hidden !important; clip-path:none !important; }
.hero-title .rl > span{
  display:block;
  opacity:1 !important;
  filter:none !important;
  transform:translateY(115%);
  transition:none !important;
  animation:heroRlUpOriginal 1s cubic-bezier(.16,.84,.36,1) both !important;
}
.hero-title .l1 > span{ animation-delay:1.5s !important; }
.hero-title .l2 > span{ animation-delay:1.65s !important; }
.hero-title .l3 > span{ animation-delay:1.8s !important; }
@keyframes heroRlUpOriginal{
  from{ transform:translateY(115%); opacity:1; filter:none; }
  to{ transform:translateY(0); opacity:1; filter:none; }
}

/* Restore the original FV copy fade-up timing. */
.hero-copy .en,.hero-copy .jp{
  opacity:0;
  transform:translateY(22px);
  animation:heroFadeUpOriginal 1.1s cubic-bezier(.16,.84,.36,1) both !important;
}
.hero-copy .en{ animation-delay:1.95s !important; }
.hero-copy .jp{ animation-delay:2.1s !important; }
@keyframes heroFadeUpOriginal{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .h-bed,.h-dine,.h-bath,.hero-mah-frame,.hero-title .rl > span,.hero-copy .en,.hero-copy .jp{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
}

/* ==CSS_END== */


/* ============ MATERIALS DESIGN FIX 04 ============ */
/* The hairline belongs to the section boundary, not across the material cards. */
.materials{
  position:relative;
  padding-top:clamp(84px,7.4vw,124px);
  padding-bottom:clamp(86px,7vw,116px);
  background:
    linear-gradient(180deg,#fff 0 clamp(58px,5.2vw,88px), rgba(255,255,255,0) clamp(58px,5.2vw,88px) 100%),
    var(--noise) 0 0/220px 220px,
    #f8f8f8 !important;
}
.materials::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.82) 0 28.5%, rgba(255,255,255,0) 28.5% 100%) !important;
  z-index:0;
}
.materials::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0 !important;
  height:.5px;
  background:rgba(0,0,0,.78);
  transform:scaleY(.5);
  transform-origin:top;
  z-index:3;
  pointer-events:none;
}
.materials > *{ position:relative; z-index:1; }
.mat-top{
  width:100%;
  display:grid;
  grid-template-columns:minmax(300px,31.2vw) minmax(0,1fr);
  align-items:start;
  column-gap:clamp(34px,3.8vw,72px);
}
.mat-left{
  padding:0 0 0 clamp(56px,6vw,104px) !important;
  max-width:430px;
}
.mat-head{
  font-size:clamp(42px,3.45vw,64px) !important;
  line-height:.96 !important;
  letter-spacing:.005em;
  margin:0 0 clamp(46px,4.3vw,70px) !important;
}
.mat-left .jp{
  max-width:360px;
  font-size:clamp(13px,.92vw,15px) !important;
  line-height:2.18 !important;
  letter-spacing:.08em;
  margin:0 0 clamp(38px,3.2vw,56px) !important;
}
.mat-left .en{
  max-width:360px;
  font-size:clamp(11px,.78vw,12.5px) !important;
  line-height:2.05 !important;
  letter-spacing:.035em;
  color:rgba(115,115,108,.62) !important;
}
.mat-right{ min-width:0; overflow:hidden; }
.mat-scroll{
  gap:clamp(20px,1.45vw,28px) !important;
  padding:0 clamp(56px,6vw,104px) 24px 0 !important;
  scroll-padding-left:0;
}
.mat-card{
  width:clamp(210px,13.8vw,258px) !important;
  max-width:none !important;
}
.mat-card .kf{
  aspect-ratio:646/1140;
  overflow:hidden;
}
.mat-card .ti{
  font-size:clamp(13px,.9vw,15px) !important;
  line-height:1.65;
  letter-spacing:.055em;
  margin-top:clamp(18px,1.35vw,25px) !important;
}
.mat-card .nm{
  font-size:clamp(11px,.72vw,12.5px) !important;
  line-height:1.45;
  margin-top:3px !important;
  color:rgba(136,136,128,.72) !important;
}
.mat-card .desc{
  font-size:clamp(12px,.78vw,13px) !important;
  line-height:2.05 !important;
  letter-spacing:.07em;
  margin-top:clamp(20px,1.5vw,28px) !important;
}
.mat-track{
  margin:clamp(14px,1.2vw,22px) clamp(56px,6vw,104px) 0 0 !important;
  height:.5px !important;
  background:rgba(0,0,0,.25) !important;
}
.mat-thumb{
  height:3px !important;
  top:-1.25px !important;
  background:#111 !important;
}

@media (max-width:768px){
  .materials{
    padding-top:72px !important;
    padding-bottom:78px !important;
    background:
      linear-gradient(180deg,#fff 0 56px, rgba(255,255,255,0) 56px 100%),
      var(--noise) 0 0/220px 220px,
      #f8f8f8 !important;
  }
  .materials::before{
    background:linear-gradient(180deg, rgba(255,255,255,.86) 0 180px, rgba(255,255,255,0) 180px 100%) !important;
  }
  .materials::after{ top:0 !important; }
  .mat-top{ display:block; }
  .mat-left{
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important;
    max-width:none;
  }
  .mat-head{ margin-bottom:38px !important; }
  .mat-left .jp,
  .mat-left .en{ max-width:100%; }
  .mat-scroll{
    padding:44px var(--gutter) 20px !important;
    gap:18px !important;
    scroll-padding-left:var(--gutter);
  }
  .mat-card{ width:min(68vw,260px) !important; }
  .mat-track{ margin:14px var(--gutter) 0 !important; }
}



/* ============ FINAL REQUEST IMPLEMENTATION 05 ============ */
/* Material: from the corrected top hairline down to the green Works zone, keep everything white. */
.materials{
  background:#fff !important;
  padding-top:clamp(84px,7.4vw,124px) !important;
  padding-bottom:clamp(88px,7.2vw,124px) !important;
}
.materials::before{ display:none !important; }
.materials::after{
  top:0 !important;
  height:.5px !important;
  background:rgba(0,0,0,.84) !important;
  transform:scaleY(.5) !important;
}
.mat-scroll,.mat-right,.mat-top,.mat-card,.mat-card .kf{ background:#fff !important; }
.mat-track{ background:rgba(0,0,0,.2) !important; }
.works{ background:var(--green) !important; }
@media (max-width:768px){
  .materials{ background:#fff !important; padding-top:72px !important; padding-bottom:82px !important; }
  .materials::before{ display:none !important; }
}

/* Header / footer navigation: clearer, slower vertical roll with a small hairline draw. */
.hdr-nav a,.foot-nav a,.hdr-contact{
  position:relative !important;
  display:inline-block !important;
  overflow:hidden !important;
  color:transparent !important;
  line-height:1.22 !important;
  min-height:1.22em;
  perspective:900px;
}
.hdr-nav a::before,.hdr-nav a::after,.foot-nav a::before,.foot-nav a::after,.hdr-contact::before,.hdr-contact::after{
  content:attr(data-label) !important;
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100%;
  height:1.22em;
  background:none !important;
  color:var(--ink);
  transform-origin:50% 50%;
  transition:
    transform .82s cubic-bezier(.19,1,.22,1),
    opacity .82s cubic-bezier(.19,1,.22,1),
    letter-spacing .82s cubic-bezier(.19,1,.22,1);
  backface-visibility:hidden;
}
.hdr-nav a::after,.foot-nav a::after,.hdr-contact::after{
  opacity:1;
  transform:translateY(0) rotateX(0deg);
}
.hdr-nav a::before,.foot-nav a::before,.hdr-contact::before{
  opacity:0;
  transform:translateY(86%) rotateX(82deg);
  letter-spacing:.22em;
}
.hdr-nav a:hover::after,.foot-nav a:hover::after,.hdr-contact:hover::after{
  opacity:0;
  transform:translateY(-86%) rotateX(-82deg);
  letter-spacing:.22em;
}
.hdr-nav a:hover::before,.foot-nav a:hover::before,.hdr-contact:hover::before{
  opacity:1;
  transform:translateY(0) rotateX(0deg);
  letter-spacing:.16em;
}
.hdr.on-dark .hdr-nav a::before,.hdr.on-dark .hdr-nav a::after,.hdr.on-dark .hdr-contact::before,.hdr.on-dark .hdr-contact::after{ color:#fff; }
.hdr-nav a .nav-line,.foot-nav a .nav-line{ display:none; }
.hdr-nav a{ padding-bottom:5px; }
.hdr-nav a span,.foot-nav a span{ pointer-events:none; }
.hdr-nav a:before,.hdr-nav a:after{ text-decoration:none !important; }
.hdr-nav a:hover,.foot-nav a:hover,.hdr-contact:hover{ transform:translateY(-1px); transition:transform .82s cubic-bezier(.19,1,.22,1); }

/* Underline is separated from the rotating labels so the motion does not feel jittery. */
.hdr-nav a > i,.foot-nav a > i{ display:none; }
.hdr-nav a{ --nav-line-color:currentColor; }
.hdr-nav a:hover{ }
.hdr-nav a::marker,.foot-nav a::marker{ display:none; }

/* FV: add back the quieter parallax feeling without moving the layout boxes. */
.hero{ overflow:hidden; }
.hero-imgs,.hero-mah{ transform:translate3d(0,var(--hero-y,0px),0); transition:transform .08s linear; will-change:transform; }
.h-bed .kimg{ transform:translate3d(0,var(--hero-bed-y,0px),0) scale(calc(1.045 + var(--hero-scale,0))); }
.h-dine .kimg{ transform:translate3d(0,var(--hero-dine-y,0px),0) scale(calc(1.055 + var(--hero-scale,0))); }
.hero-mah-frame .kimg{ transform:translate3d(0,var(--hero-mah-y,0px),0) scale(calc(1.04 + var(--hero-scale,0))); }
.h-bed .kimg,.h-dine .kimg,.hero-mah-frame .kimg{ animation:none !important; transition:transform .12s linear; will-change:transform; }
.hero-title .rl > span{
  animation:heroRlGrace .98s cubic-bezier(.19,1,.22,1) both !important;
}
.hero-title .l1 > span{ animation-delay:1.42s !important; }
.hero-title .l2 > span{ animation-delay:1.62s !important; }
.hero-title .l3 > span{ animation-delay:1.82s !important; }
@keyframes heroRlGrace{
  0%{ transform:translateY(112%) skewY(1.2deg); opacity:1; }
  100%{ transform:translateY(0) skewY(0deg); opacity:1; }
}
.hero-copy .en,.hero-copy .jp{ animation-duration:1.35s !important; animation-timing-function:cubic-bezier(.19,1,.22,1) !important; }

/* Footer-adjacent orange translucent PNGs: slow bleeding reveal. */
.company::before,.company::after{
  opacity:0 !important;
  filter:blur(34px) saturate(1.05);
  transform:scale(1.08) translateY(24px);
  transition:
    opacity 2.2s cubic-bezier(.19,1,.22,1),
    filter 2.2s cubic-bezier(.19,1,.22,1),
    transform 2.2s cubic-bezier(.19,1,.22,1);
  will-change:opacity,filter,transform;
}
.company.is-in::before,.company.is-in::after{
  opacity:.62 !important;
  filter:blur(0) saturate(1);
  transform:scale(1) translateY(0);
}
.company.is-in::after{ transition-delay:.22s; }

@media (prefers-reduced-motion:reduce){
  .hero-imgs,.hero-mah,.h-bed .kimg,.h-dine .kimg,.hero-mah-frame .kimg{ transform:none !important; transition:none !important; }
  .company::before,.company::after{ opacity:.62 !important; filter:none !important; transform:none !important; transition:none !important; }
}



/* ============ FINAL UNIFIED MOTION SYSTEM 06 ============ */
/* Unify motion around the Material section's quiet bottom-mask language. */
:root{
  --ease-earth:cubic-bezier(.19,1,.22,1);
  --mask-dur:1.55s;
  --mask-dur-slow:1.85s;
  --mask-stagger:.14s;
}

/* Remove earlier conflicting blur/fade from line reveals. */
.rl{
  display:block !important;
  overflow:hidden !important;
  clip-path:none !important;
}
.rl > span{
  display:block !important;
  opacity:1 !important;
  filter:none !important;
  transform:translateY(112%) rotate(.001deg) !important;
  transition:transform var(--mask-dur) var(--ease-earth) !important;
  will-change:transform;
}
.rl.is-in > span,
.is-in .rl > span{
  transform:translateY(0) rotate(.001deg) !important;
}

/* Shared image / placeholder reveal: same language as Material. */
.rv-img,
.rv-mask{
  opacity:1 !important;
  clip-path:inset(100% 0 0 0) !important;
  transition:clip-path var(--mask-dur-slow) var(--ease-earth) !important;
  will-change:clip-path;
}
.rv-img.is-in,
.is-in .rv-img,
.rv-mask.is-in,
.is-in .rv-mask{
  clip-path:inset(0 0 0 0) !important;
}
.rv-mask,
.rv-mask.is-in,
.is-in .rv-mask{ border-radius:999px; }

/* FV: same bottom-mask principle, but slower and more ceremonial. */
.hero-title .rl > span{
  animation:heroTitleMaskUnified 1.85s var(--ease-earth) both !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
}
.hero-title .l1 > span{ animation-delay:1.45s !important; }
.hero-title .l2 > span{ animation-delay:1.82s !important; }
.hero-title .l3 > span{ animation-delay:2.19s !important; }
@keyframes heroTitleMaskUnified{
  from{ transform:translateY(114%) rotate(.001deg); }
  to{ transform:translateY(0) rotate(.001deg); }
}
.hero-copy .en,
.hero-copy .jp{
  animation:heroCopyUnified 1.6s var(--ease-earth) both !important;
}
.hero-copy .en{ animation-delay:2.35s !important; }
.hero-copy .jp{ animation-delay:2.55s !important; }
@keyframes heroCopyUnified{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Section titles: consistent row-by-row stagger. */
.about-head .rl:nth-child(1) > span,
.mat-head .rl:nth-child(1) > span,
.works-title .rl:nth-child(1) > span,
.ad-head .rl:nth-child(1) > span,
.team-title .rl:nth-child(1) > span,
.sr-title .rl:nth-child(1) > span,
.co-title .rl:nth-child(1) > span{ transition-delay:0s !important; }
.about-head .rl:nth-child(2) > span,
.mat-head .rl:nth-child(2) > span,
.works-title .rl:nth-child(2) > span,
.ad-head .rl:nth-child(2) > span,
.team-title .rl:nth-child(2) > span,
.sr-title .rl:nth-child(2) > span,
.co-title .rl:nth-child(2) > span{ transition-delay:.16s !important; }
.about-head .rl:nth-child(3) > span,
.mat-head .rl:nth-child(3) > span,
.works-title .rl:nth-child(3) > span,
.ad-head .rl:nth-child(3) > span,
.co-title .rl:nth-child(3) > span{ transition-delay:.32s !important; }

/* Company / business content: one row at a time, still masked from below. */
.co-info .co-row:nth-child(1) .rl > span{ transition-delay:.00s !important; }
.co-info .co-row:nth-child(2) .rl > span{ transition-delay:.07s !important; }
.co-info .co-row:nth-child(3) .rl > span{ transition-delay:.14s !important; }
.co-info .co-row:nth-child(4) .rl > span{ transition-delay:.21s !important; }
.co-info .co-row:nth-child(5) .rl > span{ transition-delay:.28s !important; }
.co-info .co-row:nth-child(6) .rl > span{ transition-delay:.35s !important; }
.co-info .co-row:nth-child(7) .rl > span{ transition-delay:.42s !important; }
.biz-list li:nth-child(1) .rl > span{ transition-delay:.00s !important; }
.biz-list li:nth-child(2) .rl > span{ transition-delay:.06s !important; }
.biz-list li:nth-child(3) .rl > span{ transition-delay:.12s !important; }
.biz-list li:nth-child(4) .rl > span{ transition-delay:.18s !important; }
.biz-list li:nth-child(5) .rl > span{ transition-delay:.24s !important; }
.biz-list li:nth-child(6) .rl > span{ transition-delay:.30s !important; }
.biz-list li:nth-child(7) .rl > span{ transition-delay:.36s !important; }
.biz-list li:nth-child(8) .rl > span{ transition-delay:.42s !important; }
.biz-list li:nth-child(9) .rl > span{ transition-delay:.48s !important; }
.biz-list li:nth-child(10) .rl > span{ transition-delay:.54s !important; }
.biz-list li:nth-child(11) .rl > span{ transition-delay:.60s !important; }
.biz-list li:nth-child(12) .rl > span{ transition-delay:.66s !important; }
.biz-list li:nth-child(13) .rl > span{ transition-delay:.72s !important; }

/* Material cards remain the reference motion, with a clean ordered stagger. */
.mat-card:nth-child(1) .rv-img{ transition-delay:.00s !important; }
.mat-card:nth-child(2) .rv-img{ transition-delay:.10s !important; }
.mat-card:nth-child(3) .rv-img{ transition-delay:.20s !important; }
.mat-card:nth-child(4) .rv-img{ transition-delay:.30s !important; }
.mat-card:nth-child(n+5) .rv-img{ transition-delay:.36s !important; }

/* Our Team: masks rise left to right, no fade. */
.team-row .tcard .rv-img{ transition-duration:1.55s !important; }
.team-row .tcard:nth-child(1) .rv-img{ transition-delay:.00s !important; }
.team-row .tcard:nth-child(2) .rv-img{ transition-delay:.15s !important; }
.team-row .tcard:nth-child(3) .rv-img{ transition-delay:.30s !important; }
.team-row .tcard:nth-child(4) .rv-img{ transition-delay:.45s !important; }
.team-row .tcard:nth-child(5) .rv-img{ transition-delay:.60s !important; }
.team-row .tcard .nm,
.team-row .tcard .role{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 1.1s var(--ease-earth), transform 1.1s var(--ease-earth);
}
.team-row .tcard:has(.rv-img.is-in) .nm,
.team-row .tcard:has(.rv-img.is-in) .role{
  opacity:1;
  transform:none;
}
.team-row .tcard:nth-child(1) .nm,.team-row .tcard:nth-child(1) .role{ transition-delay:.55s; }
.team-row .tcard:nth-child(2) .nm,.team-row .tcard:nth-child(2) .role{ transition-delay:.70s; }
.team-row .tcard:nth-child(3) .nm,.team-row .tcard:nth-child(3) .role{ transition-delay:.85s; }
.team-row .tcard:nth-child(4) .nm,.team-row .tcard:nth-child(4) .role{ transition-delay:1.00s; }
.team-row .tcard:nth-child(5) .nm,.team-row .tcard:nth-child(5) .role{ transition-delay:1.15s; }

/* Works cards: retain pill shape while using the same bottom reveal. */
.wgrid .wcard:nth-child(1) .rv-mask{ transition-delay:.00s !important; }
.wgrid .wcard:nth-child(2) .rv-mask{ transition-delay:.08s !important; }
.wgrid .wcard:nth-child(3) .rv-mask{ transition-delay:.16s !important; }
.wgrid .wcard:nth-child(4) .rv-mask{ transition-delay:.24s !important; }
.wgrid .wcard:nth-child(5) .rv-mask{ transition-delay:.32s !important; }
.wgrid .wcard:nth-child(6) .rv-mask{ transition-delay:.40s !important; }
.wgrid .wcard:nth-child(7) .rv-mask{ transition-delay:.48s !important; }
.wgrid .wcard:nth-child(8) .rv-mask{ transition-delay:.56s !important; }

/* Copy fade is secondary, kept subtle so the site does not feel patched together. */
.rv-fade,
.mat-left .jp[data-reveal],
.mat-left .en[data-reveal],
.ad-jp[data-reveal],
.ad-en[data-reveal],
.sr-jp[data-reveal],
.sr-en[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1.25s var(--ease-earth), transform 1.25s var(--ease-earth);
}
.rv-fade.is-in,
.mat-left .jp.is-in,
.mat-left .en.is-in,
.ad-jp.is-in,
.ad-en.is-in,
.sr-jp.is-in,
.sr-en.is-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  .rl > span,
  .rv-img,
  .rv-mask,
  .hero-title .rl > span,
  .hero-copy .en,
  .hero-copy .jp,
  .team-row .tcard .nm,
  .team-row .tcard .role{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
    clip-path:none !important;
  }
}


/* ============ FINAL FIX 07: FV title mask + replayable title reveals ============ */
/* FV title: use class-triggered transitions instead of load-running animations, so the mask is visible and slow. */
.hero-title{ z-index:24 !important; }
.hero-title .rl{ overflow:hidden !important; }
.hero-title .rl > span{
  animation:none !important;
  transform:translateY(118%) rotate(.001deg) !important;
  transition:transform 2.15s cubic-bezier(.19,1,.22,1) !important;
  transition-delay:0s !important;
  opacity:1 !important;
  filter:none !important;
  will-change:transform;
}
.hero-title.is-in .l1 > span{ transition-delay:.95s !important; transform:translateY(0) rotate(.001deg) !important; }
.hero-title.is-in .l2 > span{ transition-delay:1.32s !important; transform:translateY(0) rotate(.001deg) !important; }
.hero-title.is-in .l3 > span{ transition-delay:1.69s !important; transform:translateY(0) rotate(.001deg) !important; }

/* Prevent the lower FV image from touching the FURNITURE lettering. */
@media (min-width:769px){
  .hero-mah{ top:68% !important; left:64.5% !important; width:27.5% !important; z-index:5 !important; }
  .hero-title .l3{ margin-left:4.2% !important; }
}
@media (max-width:768px){
  .hero-mah{ margin-top:44px !important; }
}

/* Titles only: replay the same Material-like mask when they re-enter the viewport. */
.replay-title .rl > span{
  transform:translateY(112%) rotate(.001deg) !important;
  transition:transform 1.55s cubic-bezier(.19,1,.22,1) !important;
}
.replay-title.is-in .rl > span{ transform:translateY(0) rotate(.001deg) !important; }
.replay-title .rl:nth-child(1) > span{ transition-delay:0s !important; }
.replay-title .rl:nth-child(2) > span{ transition-delay:.16s !important; }
.replay-title .rl:nth-child(3) > span{ transition-delay:.32s !important; }

@media (prefers-reduced-motion:reduce){
  .hero-title .rl > span,
  .replay-title .rl > span{ transition:none !important; transform:none !important; }
}



/* ============ FINAL FIX 08: restore Company / Business row mask reveal ============ */
/* Reproduce the original intended line-by-line mask motion for the lower Company area. */
.company .co-label .rl,
.company .co-row .rl,
.company .biz-list .rl{
  display:block !important;
  overflow:hidden !important;
  line-height:inherit;
}
.company .co-label .rl > span,
.company .co-row .rl > span,
.company .biz-list .rl > span{
  display:block !important;
  transform:translateY(118%) rotate(.001deg) !important;
  opacity:1 !important;
  filter:none !important;
  transition:transform 1.45s cubic-bezier(.19,1,.22,1) !important;
  will-change:transform;
}
.company .co-label .rl.is-in > span,
.company .co-label.is-in .rl > span,
.company .co-row .rl.is-in > span,
.company .co-row.is-in .rl > span,
.company .biz-list .rl.is-in > span,
.company .biz-list li.is-in .rl > span{
  transform:translateY(0) rotate(.001deg) !important;
}
/* Company rows: keep the two columns paired, then let the next row follow. */
.company .co-info .co-row:nth-child(1) .rl > span{ transition-delay:.00s !important; }
.company .co-info .co-row:nth-child(2) .rl > span{ transition-delay:.08s !important; }
.company .co-info .co-row:nth-child(3) .rl > span{ transition-delay:.16s !important; }
.company .co-info .co-row:nth-child(4) .rl > span{ transition-delay:.24s !important; }
.company .co-info .co-row:nth-child(5) .rl > span{ transition-delay:.32s !important; }
.company .co-info .co-row:nth-child(6) .rl > span{ transition-delay:.40s !important; }
.company .co-info .co-row:nth-child(7) .rl > span{ transition-delay:.48s !important; }
.company .co-grid > .co-label .rl > span{ transition-delay:.02s !important; }
/* Business list: slightly faster cascade because there are many lines. */
.company .biz-list li:nth-child(1) .rl > span{ transition-delay:.00s !important; }
.company .biz-list li:nth-child(2) .rl > span{ transition-delay:.05s !important; }
.company .biz-list li:nth-child(3) .rl > span{ transition-delay:.10s !important; }
.company .biz-list li:nth-child(4) .rl > span{ transition-delay:.15s !important; }
.company .biz-list li:nth-child(5) .rl > span{ transition-delay:.20s !important; }
.company .biz-list li:nth-child(6) .rl > span{ transition-delay:.25s !important; }
.company .biz-list li:nth-child(7) .rl > span{ transition-delay:.30s !important; }
.company .biz-list li:nth-child(8) .rl > span{ transition-delay:.35s !important; }
.company .biz-list li:nth-child(9) .rl > span{ transition-delay:.40s !important; }
.company .biz-list li:nth-child(10) .rl > span{ transition-delay:.45s !important; }
.company .biz-list li:nth-child(11) .rl > span{ transition-delay:.50s !important; }
.company .biz-list li:nth-child(12) .rl > span{ transition-delay:.55s !important; }
.company .biz-list li:nth-child(13) .rl > span{ transition-delay:.60s !important; }
@media (prefers-reduced-motion:reduce){
  .company .co-label .rl > span,
  .company .co-row .rl > span,
  .company .biz-list .rl > span{
    transition:none !important;
    transform:none !important;
  }
}


/* ============ FINAL FIX 09: FV layer / layout / labels ============ */
/* Keep parallax on the image contents only. Moving .hero-imgs also moves the title because it is a child. */
.hero-imgs,
.hero-mah{
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
}
.hero-title{
  z-index:42 !important;
  pointer-events:none;
  mix-blend-mode:normal;
}
.h-bed{ z-index:2 !important; }
.h-dine{ z-index:10 !important; }
.h-bath{ z-index:9 !important; }
.hero-mah{ z-index:6 !important; }
.hero-mah-frame{ position:relative; z-index:1; }
.hero-kanji{ z-index:1 !important; }
.v-label{
  z-index:44 !important;
  color:#1c1c1a;
  line-height:1.1;
  opacity:.92;
  pointer-events:none;
}
@media (min-width:769px){
  .hero{ aspect-ratio:2000/1480 !important; min-height:820px; max-height:none !important; }
  .hero-imgs{ position:absolute !important; inset:0 !important; }
  .h-bed{ left:0 !important; top:13% !important; width:35% !important; height:63% !important; }
  .h-dine{ top:15.5% !important; left:53.5% !important; right:auto !important; width:16.3% !important; height:33% !important; }
  .h-bath{ display:block !important; top:36% !important; left:71.5% !important; width:16.3% !important; height:33% !important; }
  .hero-title{
    position:absolute !important;
    top:38% !important;
    left:0 !important;
    width:100% !important;
    padding-left:23% !important;
    text-align:left !important;
    line-height:.9 !important;
  }
  .hero-title .l1{ font-size:clamp(112px,9.8vw,188px) !important; margin-left:13.6% !important; }
  .hero-title .l2{ font-size:clamp(96px,8.4vw,160px) !important; margin-left:0 !important; }
  .hero-title .l3{ font-size:clamp(112px,9.8vw,188px) !important; margin-left:6% !important; }
  .hero-mah{ position:absolute !important; top:62% !important; left:60% !important; right:auto !important; width:30% !important; margin:0 !important; }
  .hero-copy{ top:80% !important; left:6% !important; width:25% !important; }
  .label-teak{ display:block !important; top:15.5% !important; left:70.25% !important; }
  .label-marble{ display:block !important; top:36% !important; left:88.25% !important; }
  .label-mah{ display:block !important; right:auto !important; left:-2.1em !important; bottom:0 !important; top:auto !important; }
}
@media (min-width:769px) and (max-width:1180px){
  .hero{ min-height:760px !important; aspect-ratio:auto !important; }
  .hero-title .l1,.hero-title .l3{ font-size:clamp(90px,9.8vw,122px) !important; }
  .hero-title .l2{ font-size:clamp(78px,8.4vw,104px) !important; }
  .hero-copy{ width:34% !important; }
}
@media (max-width:768px){
  .hero{ min-height:760px !important; padding-top:76px !important; background:var(--noise) 0 0/220px 220px,#f8f8f8 !important; }
  .hero-imgs{ position:relative !important; height:560px !important; width:100% !important; }
  .k-ken{ width:76px !important; top:168px !important; left:35% !important; right:auto !important; }
  .k-sou{ width:82px !important; bottom:70px !important; left:auto !important; right:6% !important; }
  .h-dine{ position:absolute !important; top:0 !important; right:11% !important; left:auto !important; width:38% !important; min-width:0 !important; height:188px !important; z-index:8 !important; }
  .h-bed{ position:absolute !important; top:160px !important; left:0 !important; width:58% !important; height:250px !important; max-width:none !important; z-index:3 !important; }
  .h-bath{ display:none !important; }
  .hero-title{
    top:225px !important;
    left:0 !important;
    width:100% !important;
    padding:0 7vw 0 17vw !important;
    text-align:left !important;
    line-height:.86 !important;
  }
  .hero-title .l1{ font-size:clamp(46px,15vw,70px) !important; margin-left:16vw !important; }
  .hero-title .l2{ font-size:clamp(38px,12vw,58px) !important; margin-left:0 !important; }
  .hero-title .l3{ font-size:clamp(44px,14vw,68px) !important; margin-left:0 !important; }
  .hero-mah{ position:absolute !important; top:475px !important; right:0 !important; left:auto !important; width:63% !important; margin:0 !important; z-index:5 !important; }
  .hero-copy{ position:relative !important; z-index:30 !important; padding:0 var(--gutter) 56px !important; margin-top:-108px !important; width:auto !important; top:auto !important; left:auto !important; }
  .hero-copy .en{ font-size:11px !important; line-height:1.7 !important; margin-bottom:14px !important; max-width:78%; }
  .hero-copy .jp{ font-size:13px !important; line-height:1.75 !important; max-width:86%; }
  .label-teak{ display:block !important; top:34px !important; right:calc(11% + 38% + 8px) !important; left:auto !important; font-size:9px !important; }
  .label-marble{ display:none !important; }
  .label-mah{ display:block !important; left:-15px !important; right:auto !important; bottom:4px !important; font-size:9px !important; }
}
@media (max-width:420px){
  .hero{ min-height:735px !important; }
  .hero-imgs{ height:545px !important; }
  .h-dine{ height:180px !important; }
  .h-bed{ top:155px !important; height:242px !important; }
  .hero-title{ top:218px !important; }
  .hero-mah{ top:460px !important; width:64% !important; }
  .hero-copy{ margin-top:-105px !important; }
}


/* ============ FINAL FIX 10: FV living position / kura / mobile copy / business hover ============ */
@media (min-width:769px){
  /* Lower the living image by about 200px while keeping labels attached. */
  .hero-mah{
    top:calc(62% + 200px) !important;
    left:60% !important;
    width:30% !important;
    z-index:6 !important;
  }
  /* Bring the faint 倉 mark back into view, below the title area but above the living image. */
  .k-sou{
    top:calc(62% + 118px) !important;
    left:54% !important;
    right:auto !important;
    bottom:auto !important;
    z-index:2 !important;
  }
  .hero-title{ z-index:42 !important; }
}

/* Our Business: desktop hover opens the hovered row and closes again on leave. */
@media (hover:hover) and (pointer:fine) and (min-width:769px){
  .acc-item{ transition:border-color .45s var(--ease-earth, cubic-bezier(.19,1,.22,1)); }
  .acc-head{ transition:opacity .45s var(--ease-earth, cubic-bezier(.19,1,.22,1)), padding-left .55s var(--ease-earth, cubic-bezier(.19,1,.22,1)); }
  .acc-item:hover .acc-head{ padding-left:14px; }
  .acc-body{ transition:max-height .72s var(--ease-earth, cubic-bezier(.19,1,.22,1)), padding-bottom .72s var(--ease-earth, cubic-bezier(.19,1,.22,1)); }
}

@media (max-width:768px){
  /* Move the FV lead copy about 300px lower to match the supplied SP comp spacing. */
  .hero{ min-height:1060px !important; }
  .hero-copy{
    margin-top:195px !important;
    padding-bottom:76px !important;
  }
}
@media (max-width:420px){
  .hero{ min-height:1035px !important; }
  .hero-copy{ margin-top:195px !important; }
}



/* ============ FINAL FIX 11: SP FV comp + elegant business hover ============ */
@media (hover:hover) and (pointer:fine) and (min-width:769px){
  .acc-item{
    overflow:hidden;
    transition:
      border-color .7s cubic-bezier(.19,1,.22,1),
      background-color .7s cubic-bezier(.19,1,.22,1);
  }
  .acc-head{
    position:relative;
    transition:
      padding-left .8s cubic-bezier(.19,1,.22,1),
      opacity .55s ease,
      letter-spacing .8s cubic-bezier(.19,1,.22,1);
  }
  .acc-head::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:34px;
    height:.5px;
    background:currentColor;
    transform:scaleX(0) translateY(-50%);
    transform-origin:left center;
    opacity:.45;
    transition:transform .85s cubic-bezier(.19,1,.22,1), opacity .6s ease;
  }
  .acc-item:hover .acc-head,
  .acc-item.open .acc-head{
    padding-left:48px;
    letter-spacing:.045em;
  }
  .acc-item:hover .acc-head::before,
  .acc-item.open .acc-head::before{
    transform:scaleX(1) translateY(-50%);
  }
  .acc-body{
    display:flex;
    gap:60px;
    align-items:flex-start;
    max-height:0;
    opacity:0;
    transform:translateY(-8px);
    padding-bottom:0;
    transition:
      max-height 1.05s cubic-bezier(.19,1,.22,1),
      opacity .75s ease,
      transform .95s cubic-bezier(.19,1,.22,1),
      padding-bottom .95s cubic-bezier(.19,1,.22,1);
  }
  .acc-item.open .acc-body,
  .acc-item:hover .acc-body{
    max-height:380px;
    opacity:1;
    transform:translateY(0);
    padding-bottom:34px;
  }
  .acc-body .desc,
  .acc-body img{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .85s ease, transform 1s cubic-bezier(.19,1,.22,1);
  }
  .acc-body img{ clip-path:inset(100% 0 0 0 round 120px); transition:opacity .85s ease, transform 1s cubic-bezier(.19,1,.22,1), clip-path 1.05s cubic-bezier(.19,1,.22,1); }
  .acc-item.open .acc-body .desc,
  .acc-item:hover .acc-body .desc{ opacity:1; transform:translateY(0); transition-delay:.12s; }
  .acc-item.open .acc-body img,
  .acc-item:hover .acc-body img{ opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0 round 120px); transition-delay:.2s; }
  .acc-head .pm::before,
  .acc-head .pm::after{ transition:transform .65s cubic-bezier(.19,1,.22,1), opacity .65s ease; }
}

@media (max-width:768px){
  .hero{
    min-height:860px !important;
    padding-top:76px !important;
    overflow:hidden;
  }
  .hero-imgs{
    position:relative !important;
    height:610px !important;
    width:100% !important;
  }
  .side-jp{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    position:absolute !important;
    top:90px !important;
    right:9px !important;
    height:390px !important;
    width:24px !important;
    overflow:hidden;
    font-family:"Zen Old Mincho",serif;
    font-size:10px !important;
    letter-spacing:.13em;
    line-height:2.05;
    color:#242420;
    z-index:70 !important;
    pointer-events:none;
  }
  .side-jp .sj-bracket{ font-size:12px !important; }
  .hero-scroll{
    display:block !important;
    left:12px !important;
    top:90px !important;
    z-index:70 !important;
    font-size:10px !important;
    letter-spacing:.2em;
    color:#1c1c1a;
  }
  .hero-scroll::after{
    top:82px !important;
    height:245px !important;
    width:.5px !important;
    background:#1c1c1a !important;
  }
  .k-ken{ width:76px !important; top:164px !important; left:35% !important; right:auto !important; }
  .k-sou{
    width:82px !important;
    top:492px !important;
    bottom:auto !important;
    left:auto !important;
    right:6% !important;
    z-index:2 !important;
  }
  .h-dine{
    position:absolute !important;
    top:0 !important;
    right:11% !important;
    left:auto !important;
    width:38% !important;
    min-width:0 !important;
    height:188px !important;
    z-index:8 !important;
  }
  .h-bed{
    position:absolute !important;
    top:160px !important;
    left:0 !important;
    width:58% !important;
    height:250px !important;
    max-width:none !important;
    z-index:3 !important;
  }
  .hero-title{
    top:224px !important;
    left:0 !important;
    width:100% !important;
    padding:0 7vw 0 17vw !important;
    text-align:left !important;
    line-height:.86 !important;
    z-index:62 !important;
  }
  .hero-title .l1{ font-size:clamp(46px,15vw,70px) !important; margin-left:16vw !important; }
  .hero-title .l2{ font-size:clamp(38px,12vw,58px) !important; margin-left:0 !important; }
  .hero-title .l3{ font-size:clamp(44px,14vw,68px) !important; margin-left:0 !important; }
  .hero-mah{
    position:absolute !important;
    top:535px !important;
    right:0 !important;
    left:auto !important;
    width:63% !important;
    margin:0 !important;
    z-index:5 !important;
  }
  .hero-copy{
    position:relative !important;
    z-index:30 !important;
    width:auto !important;
    top:auto !important;
    left:auto !important;
    margin-top:-205px !important;
    padding:0 var(--gutter) 74px !important;
  }
  .hero-copy .en{
    font-size:11px !important;
    line-height:1.7 !important;
    margin-bottom:13px !important;
    max-width:78%;
  }
  .hero-copy .jp{
    font-size:13px !important;
    line-height:1.75 !important;
    max-width:86%;
  }
  .label-teak{ display:block !important; top:34px !important; right:calc(11% + 38% + 8px) !important; left:auto !important; font-size:9px !important; z-index:12 !important; }
  .label-marble{ display:none !important; }
  .label-mah{ display:block !important; left:-15px !important; right:auto !important; bottom:4px !important; font-size:9px !important; }
}
@media (max-width:420px){
  .hero{ min-height:842px !important; }
  .hero-imgs{ height:600px !important; }
  .h-dine{ height:180px !important; }
  .h-bed{ top:154px !important; height:244px !important; }
  .hero-title{ top:214px !important; }
  .hero-mah{ top:522px !important; width:64% !important; }
  .hero-copy{ margin-top:-202px !important; }
  .k-sou{ top:480px !important; }
  .side-jp{ top:88px !important; height:380px !important; }
}



/* ============ FINAL FIX 12: SP FV/menu/tablet refinements ============ */
/* SP FV: adjust to the supplied mobile comp. */
@media (max-width:768px){
  /* keep the side UI, but lower both sides by 100px */
  .hero-scroll{
    top:190px !important;
  }
  .side-jp{
    top:190px !important;
  }
  /* lead copy: 50px lower than the previous refined version */
  .hero-copy{
    margin-top:-155px !important;
  }
  /* lower the living photo 80px from the previous refined version */
  .hero-mah{
    top:615px !important;
  }
  .k-sou{
    top:572px !important;
  }
  .hero{
    min-height:940px !important;
  }
  .hero-imgs{
    height:690px !important;
  }
}
@media (max-width:420px){
  .hero-scroll{ top:188px !important; }
  .side-jp{ top:188px !important; height:380px !important; }
  .hero-mah{ top:602px !important; width:64% !important; }
  .k-sou{ top:560px !important; }
  .hero-copy{ margin-top:-154px !important; }
  .hero{ min-height:915px !important; }
  .hero-imgs{ height:680px !important; }
}

/* When the mobile menu is open, the FV title and side UI must not sit on top of the overlay. */
body.menu-active .hero-title,
body.menu-active .hero-scroll,
body.menu-active .side-jp,
body.menu-active .hero-kanji,
body.menu-active .v-label{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.menu-active .menu{
  z-index:120 !important;
}
body.menu-active .hdr{
  z-index:130 !important;
}
body.menu-active .hdr-logo img{
  mix-blend-mode:multiply !important;
  filter:none !important;
}
body.menu-active .burger span{
  background:var(--ink) !important;
}

/* Mobile menu: CONTACT is inside; remove any header-contact in SP/tablet and keep menu clean. */
@media (max-width:1024px){
  .hdr-contact{ display:none !important; }
  .menu a:nth-child(7){ display:flex !important; }
  .menu.open a:nth-child(7){ transition-delay:.60s; }
}

/* Our Business hover: more graceful open/close. */
@media (hover:hover) and (pointer:fine) and (min-width:769px){
  .acc-item{
    transition:border-color .9s cubic-bezier(.19,1,.22,1), background-color .9s cubic-bezier(.19,1,.22,1) !important;
  }
  .acc-head{
    transition:padding-left 1s cubic-bezier(.19,1,.22,1), letter-spacing 1s cubic-bezier(.19,1,.22,1), opacity .75s ease !important;
  }
  .acc-head::before{
    width:42px !important;
    transition:transform 1.05s cubic-bezier(.19,1,.22,1), opacity .8s ease !important;
  }
  .acc-item:hover .acc-head,
  .acc-item.open .acc-head{
    padding-left:58px !important;
    letter-spacing:.055em !important;
  }
  .acc-body{
    transition:
      grid-template-rows 1.15s cubic-bezier(.19,1,.22,1),
      max-height 1.15s cubic-bezier(.19,1,.22,1),
      opacity .9s ease,
      transform 1.1s cubic-bezier(.19,1,.22,1),
      padding-bottom 1.1s cubic-bezier(.19,1,.22,1) !important;
  }
  .acc-item.open .acc-body,
  .acc-item:hover .acc-body{
    max-height:420px !important;
    padding-bottom:40px !important;
  }
  .acc-body .desc{
    transition:opacity .95s ease, transform 1.15s cubic-bezier(.19,1,.22,1) !important;
  }
  .acc-body img{
    transition:opacity 1s ease, transform 1.2s cubic-bezier(.19,1,.22,1), clip-path 1.2s cubic-bezier(.19,1,.22,1) !important;
  }
}

/* Tablet guard: avoid accidental PC/SP hybrid collapse. */
@media (min-width:769px) and (max-width:1180px){
  .hero{
    min-height:820px !important;
    aspect-ratio:auto !important;
  }
  .hero-title{
    top:38% !important;
    padding-left:20% !important;
  }
  .hero-title .l1,
  .hero-title .l3{
    font-size:clamp(88px,9.4vw,126px) !important;
  }
  .hero-title .l2{
    font-size:clamp(76px,8.2vw,108px) !important;
  }
  .h-bed{ width:38% !important; height:58% !important; top:16% !important; }
  .h-dine{ left:54% !important; width:18% !important; height:32% !important; }
  .h-bath{ left:74% !important; width:18% !important; height:32% !important; }
  .hero-mah{ top:calc(60% + 140px) !important; left:60% !important; width:32% !important; }
  .k-sou{ top:calc(60% + 70px) !important; left:53% !important; }
  .hero-copy{ top:81% !important; left:6% !important; width:34% !important; }
  .side-jp{ right:18px !important; top:230px !important; }
  .mat-top{ grid-template-columns:minmax(260px,32vw) minmax(0,1fr) !important; }
  .mat-card{ width:clamp(190px,18vw,232px) !important; }
  .team-row{ gap:22px !important; }
}



/* ============ FINAL MICRO ADJUST 13: SP FV title/living/copy + works button ============ */
@media (max-width:768px){
  /* SP hero title: lower whole block by 50px and create calmer spacing between lines. */
  .hero-title{
    top:274px !important;
    line-height:.86 !important;
  }
  .hero-title .l1{ margin-bottom:20px !important; }
  .hero-title .l2{ margin-top:0 !important; margin-bottom:20px !important; }
  .hero-title .l3{ margin-top:0 !important; }

  /* Living photo: 100px lower, while keeping the copy 100px higher than the last version. */
  .hero-mah{ top:715px !important; }
  .k-sou{ top:672px !important; }
  .hero-imgs{ height:790px !important; }
  .hero-copy{ margin-top:-355px !important; }
  .hero{ min-height:1040px !important; }

  /* Our Works button: add readable horizontal breathing room on mobile. */
  .viewall{
    width:auto !important;
    min-width:168px !important;
    max-width:calc(100% - (var(--gutter) * 2)) !important;
    padding:16px 28px !important;
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}
@media (max-width:420px){
  .hero-title{ top:264px !important; }
  .hero-title .l1{ margin-bottom:20px !important; }
  .hero-title .l2{ margin-bottom:20px !important; }
  .hero-mah{ top:702px !important; }
  .k-sou{ top:660px !important; }
  .hero-imgs{ height:780px !important; }
  .hero-copy{ margin-top:-354px !important; }
  .hero{ min-height:1015px !important; }
  .viewall{ padding-left:26px !important; padding-right:26px !important; }
}


/* ============ FINAL FINAL 14: SP hero copy down 100px ============ */
@media (max-width:768px){
  .hero-copy{ margin-top:-255px !important; }
}
@media (max-width:420px){
  .hero-copy{ margin-top:-254px !important; }
}


.wcard, .tcard, .proj-slide{ color:inherit; text-decoration:none; }
.ph.has-img{ background-size:cover; background-position:center; background-color:#ddd; }
.archive-page,.single-page,.contact-page{ background:var(--paper); color:var(--ink); min-height:100vh; padding:160px 6vw 120px; }
.archive-head,.single-head{ margin-bottom:64px; }
.archive-title,.single-title{ font-family:'Cormorant Garamond', serif; font-size:clamp(56px,9vw,140px); font-weight:400; line-height:.85; }
.archive-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px 28px; }
.archive-card{ color:inherit; text-decoration:none; }
.archive-card .thumb{ aspect-ratio:4/3; background:#ddd; background-size:cover; background-position:center; margin-bottom:18px; }
.archive-card .title{ font-size:18px; letter-spacing:.04em; }
.archive-card .meta{ margin-top:8px; font-size:12px; color:#777; }
.single-cover{ width:100%; max-height:70vh; object-fit:cover; margin:40px 0 60px; }
.single-content{ max-width:760px; line-height:2.1; letter-spacing:.05em; }
.contact-form-shell{ max-width:760px; margin-top:56px; }
.contact-form-shell input,.contact-form-shell textarea{ width:100%; border:0; border-bottom:1px solid #1c1c1a; background:transparent; padding:14px 0; font:inherit; }
.contact-form-shell label{ display:block; margin-bottom:26px; }
.contact-form-shell button,.contact-form-shell input[type=submit]{ width:auto; border:1px solid #1c1c1a; padding:14px 34px; cursor:pointer; }
@media(max-width:900px){ .archive-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .archive-page,.single-page,.contact-page{ padding:120px 24px 80px; } .archive-grid{ grid-template-columns:1fr; } }


/* ============ FOOTER CTA: Create a Place That Lasts ============ */
.footer-cta{
  position:relative;
  overflow:hidden;
  background:var(--paper, #f7f6f3);
  color:var(--ink, #1c1c1a);
  padding:clamp(120px,14vw,220px) var(--gutter,6vw) clamp(96px,10vw,160px);
  border-top:.5px solid rgba(28,28,26,.55);
  isolation:isolate;
}
.footer-cta__glow{
  position:absolute;
  right:3vw;
  bottom:-8vw;
  width:clamp(320px,42vw,760px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(201,104,46,.34) 0%, rgba(201,104,46,.18) 35%, rgba(201,104,46,0) 68%);
  filter:blur(28px);
  transform:scale(1.08);
  opacity:.72;
  pointer-events:none;
  z-index:-1;
}
.footer-cta__inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:48px;
}
.footer-cta__label{
  grid-column:1/-1;
  margin:0 0 34px;
  font-size:11px;
  letter-spacing:.32em;
  font-family:'Jost', sans-serif;
}
.footer-cta__title{
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(66px,10vw,154px);
  line-height:.88;
  letter-spacing:-.035em;
}
.footer-cta__jp{
  margin:34px 0 0;
  font-family:'Zen Old Mincho', serif;
  font-size:clamp(15px,1.4vw,20px);
  line-height:2;
  letter-spacing:.12em;
}
.footer-cta__btn{
  justify-self:end;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
  min-width:220px;
  padding:18px 0 20px;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  font-family:'Jost', sans-serif;
  font-size:13px;
  letter-spacing:.22em;
}
.footer-cta__btn::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:currentColor;
  transform-origin:right center;
  transform:scaleX(0);
  transition:transform .8s cubic-bezier(.19,1,.22,1);
}
.footer-cta__btn:hover::before{
  transform-origin:left center;
  transform:scaleX(1);
}
.footer-cta__arrow{
  display:inline-block;
  transition:transform .8s cubic-bezier(.19,1,.22,1);
}
.footer-cta__btn:hover .footer-cta__arrow{
  transform:translateX(10px);
}
.site-footer-min{
  background:var(--paper, #f7f6f3);
  color:var(--ink, #1c1c1a);
  padding:60px var(--gutter,6vw) 36px;
  border-top:.5px solid rgba(28,28,26,.35);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:40px;
}
.site-footer-min__logo{
  color:inherit;
  text-decoration:none;
  font-family:'Cormorant Garamond', serif;
  font-size:30px;
  letter-spacing:.08em;
}
.site-footer-min__nav{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
.site-footer-min__nav a{
  color:inherit;
  text-decoration:none;
  font-family:'Jost', sans-serif;
  font-size:11px;
  letter-spacing:.2em;
}
.site-footer-min__copy{
  margin:0;
  font-family:'Jost', sans-serif;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(28,28,26,.62);
}
@media(max-width:768px){
  .footer-cta{
    padding:112px var(--gutter,24px) 96px;
  }
  .footer-cta__inner{
    display:block;
  }
  .footer-cta__label{
    margin-bottom:28px;
  }
  .footer-cta__title{
    font-size:clamp(58px,17vw,82px);
  }
  .footer-cta__jp{
    margin-top:28px;
  }
  .footer-cta__btn{
    margin-top:54px;
    width:100%;
    min-width:0;
    padding-left:0;
    padding-right:0;
  }
  .footer-cta__glow{
    right:-34vw;
    bottom:-22vw;
    width:88vw;
    opacity:.64;
    filter:blur(24px);
  }
  .site-footer-min{
    grid-template-columns:1fr;
    gap:32px;
    padding:48px var(--gutter,24px) 32px;
  }
  .site-footer-min__nav{
    justify-content:flex-start;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 24px;
  }
}


/* ===== Common WP header/menu refinements ===== */
.menu a .jp{ display:block; font-size:12px; letter-spacing:.12em; opacity:.68; margin-top:6px; }
body.menu-active{ overflow:hidden; }
body.menu-active .side-jp,
body.menu-active .hero-title,
body.menu-active .v-left,
body.menu-active .v-right{ opacity:0; visibility:hidden; }

/* Keep contact page content below the fixed global header */
.contact-page{ position:relative; overflow:hidden; background:var(--noise) 0 0/220px 220px, #f8f8f8; color:var(--ink); }
.contact-page .fv{ padding-top:clamp(150px, 18vw, 220px); }

@media (max-width: 768px){
  .contact-page .fv{ padding-top:132px; }
}

/* =========================================================
   Dynamic archives: Project / Furniture
========================================================= */
.earth-archive,.earth-single{background:#f8f8f8;color:#1c1c1a;min-height:80vh;}
.archive-hero{padding:clamp(140px,16vw,240px) clamp(22px,7vw,120px) clamp(56px,7vw,110px);}
.archive-hero--green{background:#2a4326;color:#f8f8f8;}
.archive-hero--light{background:#f8f8f8;color:#1c1c1a;border-bottom:.5px solid rgba(28,28,26,.35);}
.archive-hero__inner{max-width:1280px;margin:0 auto;}
.archive-hero__label{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;}
.archive-hero__title{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:.86;letter-spacing:.02em;font-size:clamp(74px,14vw,220px);margin:0 0 clamp(42px,6vw,88px);display:flex;gap:.24em;align-items:flex-start;justify-content:space-between;}
.archive-filter{max-width:780px;margin-inline:auto;font-family:'Jost',sans-serif;}
.archive-filter p{font-size:12px;margin:0 0 12px;color:rgba(248,248,248,.78);}
.archive-filter p:not(:first-child){margin-top:30px;}
.archive-pills{display:flex;flex-wrap:wrap;gap:12px 16px;}
.archive-pills a,.archive-pills span{display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:28px;padding:0 18px;border:.5px solid rgba(248,248,248,.75);border-radius:999px;color:inherit;text-decoration:none;font-size:13px;letter-spacing:.06em;transition:background .7s cubic-bezier(.22,.61,.36,1),color .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.archive-pills a:hover{background:#f8f8f8;color:#2a4326;transform:translateY(-2px);}
.archive-pills--dark a,.archive-pills--dark span{border-color:rgba(28,28,26,.45);}
.archive-pills--dark a:hover{background:#1c1c1a;color:#f8f8f8;}
.archive-card-section{padding:clamp(64px,8vw,128px) clamp(22px,7vw,120px);background:#f8f8f8;}
.archive-card-section--green{background:#2a4326;color:#f8f8f8;padding-top:clamp(32px,5vw,80px);}
.archive-card-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,52px) clamp(20px,2.5vw,38px);}
.archive-card__link{color:inherit;text-decoration:none;display:block;}
.archive-card__image{width:100%;aspect-ratio:3/4;background:#e7e7e7 center/cover no-repeat;overflow:hidden;transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter 1.2s cubic-bezier(.22,.61,.36,1);}
.furniture-card__image{border-radius:999px;}
.project-card__image{aspect-ratio:4/3;}
.archive-card__link:hover .archive-card__image{transform:translateY(-6px) scale(1.025);filter:brightness(1.04);}
.archive-card__title{font-family:'Zen Old Mincho',serif;font-size:clamp(14px,1.1vw,17px);font-weight:500;line-height:1.65;letter-spacing:.08em;margin:22px 0 0;}
.archive-card__excerpt{font-size:12px;line-height:1.9;letter-spacing:.08em;margin:10px 0 0;color:rgba(28,28,26,.68);}
.archive-card-section--green .archive-card__excerpt{color:rgba(248,248,248,.68);}
.archive-card__tags,.single-tags{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font-family:'Jost','Zen Old Mincho',sans-serif;font-size:11px;letter-spacing:.08em;color:rgba(28,28,26,.62);}
.archive-card-section--green .archive-card__tags{color:rgba(248,248,248,.72);}
.archive-empty{grid-column:1/-1;text-align:center;padding:80px 0;font-family:'Zen Old Mincho',serif;letter-spacing:.1em;}
.navigation.pagination{max-width:1280px;margin:64px auto 0;font-family:'Cormorant Garamond',serif;font-size:18px;}
.navigation.pagination .nav-links{display:flex;gap:16px;justify-content:center;align-items:center;}
.navigation.pagination a,.navigation.pagination span{color:inherit;text-decoration:none;padding:6px 10px;}
.single-layout{max-width:1120px;margin:0 auto;padding:clamp(150px,16vw,240px) clamp(22px,7vw,80px) clamp(80px,10vw,150px);}
.single-hero{display:grid;grid-template-columns:minmax(100px,180px) 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(48px,7vw,96px);}
.single-kicker{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;writing-mode:vertical-rl;margin:0;color:rgba(28,28,26,.6);}
.single-title{font-family:'Cormorant Garamond','Zen Old Mincho',serif;font-size:clamp(54px,9vw,132px);font-weight:400;line-height:.95;letter-spacing:.03em;margin:0;}
.single-tags{grid-column:2;color:rgba(28,28,26,.58);}
.single-main-image{margin:0 0 clamp(48px,7vw,90px);}
.single-main-image img{display:block;width:100%;height:auto;}
.single-content{max-width:760px;margin:0 auto;font-family:'Zen Old Mincho',serif;font-size:15px;line-height:2.2;letter-spacing:.08em;}
.single-content p{margin:0 0 1.8em;}
.single-content img{max-width:100%;height:auto;}
.single-nav{max-width:760px;margin:70px auto 0;padding-top:30px;border-top:.5px solid rgba(28,28,26,.35);}
.single-nav a{font-family:'Cormorant Garamond',serif;font-size:22px;color:inherit;text-decoration:none;}
@media (max-width:1024px){
  .archive-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .archive-hero__title{font-size:clamp(70px,16vw,140px);}
}
@media (max-width:767px){
  .archive-hero{padding:110px 22px 58px;}
  .archive-hero__title{display:block;font-size:clamp(70px,23vw,96px);line-height:.88;margin-bottom:42px;}
  .archive-hero__title span{display:block;}
  .archive-filter{margin-inline:0;}
  .archive-pills{gap:9px 8px;}
  .archive-pills a,.archive-pills span{min-width:auto;height:27px;padding:0 13px;font-size:11px;}
  .archive-card-section{padding:50px 22px 76px;}
  .archive-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px;}
  .archive-card__title{font-size:12px;line-height:1.75;margin-top:15px;}
  .archive-card__tags{font-size:10px;gap:5px 8px;}
  .single-layout{padding:118px 22px 82px;}
  .single-hero{display:block;margin-bottom:42px;}
  .single-kicker{writing-mode:horizontal-tb;margin-bottom:16px;}
  .single-title{font-size:clamp(48px,17vw,72px);}
  .single-tags{margin-top:22px;}
  .single-content{font-size:13px;line-height:2.05;}
}