/* ============================================================
   アトリエEC — style.css
   Quiet / cinematic / gallery-like
   ============================================================ */

:root{
  --bg:#f4f2ee;
  --bg-2:#eeebe4;
  --paper:#fffefb;
  --ink:#1c1a17;
  --ink-soft:#6e6a63;
  --ink-dim:#a29d94;
  --line:rgba(28,26,23,.14);
  --hair:rgba(28,26,23,.09);
  --accent:#a98b5d;                     /* brass */
  --accent-dim:rgba(169,139,93,.32);

  --ease:cubic-bezier(.65,0,.15,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --pad:clamp(22px,6vw,110px);
  --maxw:1400px;

  --f-min:"Shippori Mincho","Noto Serif JP",serif;
  --f-go:"Zen Kaku Gothic New",system-ui,sans-serif;
  --f-lat:"Cormorant Garamond",Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-go);font-weight:400;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:2.05;letter-spacing:.06em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-wrap:pretty;line-break:strict;word-break:normal;overflow-wrap:break-word;
}
/* headings: balance line lengths so short titles wrap evenly */
h1,h2,h3,.ttl,.subhero__title,.hero__title,.cta h2,.prob h3,.split__body h3,
.pcard__ttl,.post__title{text-wrap:balance}
/* body copy: break at Japanese sentence boundaries (句点) — see sentenceWrap() in main.js.
   each sentence becomes an inline-block so a line breaks after 。 rather than mid-sentence,
   and a single long sentence still wraps internally as a fallback. */
.jp-s{display:inline-block}
body.lock{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
li{list-style:none}
::selection{background:var(--accent);color:#fff}
.pc{display:inline}
@media(max-width:760px){.pc{display:none}}

/* ---------- atmosphere ---------- */
.grain{position:fixed;inset:-50%;z-index:9996;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(7) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}14%{transform:translate(-3%,-3%)}28%{transform:translate(-6%,2%)}
  42%{transform:translate(3%,-4%)}56%{transform:translate(-2%,6%)}70%{transform:translate(-6%,3%)}
  84%{transform:translate(4%,0)}100%{transform:translate(0,0)}}

.vignette{position:fixed;inset:0;z-index:9995;pointer-events:none;
  box-shadow:inset 0 0 clamp(80px,14vw,220px) rgba(28,26,23,.10)}

.drift{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.drift i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.drift i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-10vw;
  background:radial-gradient(circle,rgba(169,139,93,.30),transparent 70%);
  animation:drift1 34s ease-in-out infinite}
.drift i:nth-child(2){width:44vw;height:44vw;right:-12vw;bottom:-8vw;
  background:radial-gradient(circle,rgba(120,130,140,.22),transparent 70%);
  animation:drift2 44s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-5vh) scale(1.12)}}

.progress{position:fixed;top:0;left:0;width:100%;height:1px;z-index:950;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--accent);opacity:.85}

/* ---------- cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
  will-change:transform}
.cursor{width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid rgba(28,26,23,.35);
  display:grid;place-items:center;
  transition:width .5s var(--ease-out),height .5s var(--ease-out),margin .5s var(--ease-out),
             background .5s,border-color .5s,opacity .4s}
.cursor span{font-family:var(--f-lat);font-size:11px;letter-spacing:.18em;color:var(--paper);
  opacity:0;transition:opacity .3s}
.cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--ink);transition:opacity .4s}
.cursor.on{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--accent);border-color:transparent}
.cursor.on span{opacity:1}
.cursor.link{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(169,139,93,.16);border-color:var(--accent-dim)}
@media(hover:none),(max-width:900px){.cursor,.cursor-dot{display:none}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:grid;place-items:center;
  transition:opacity 1s var(--ease) .2s,visibility 1s}
.loader.done{opacity:0;visibility:hidden}
.loader__inner{width:min(74vw,420px);text-align:center}
.loader__mark{font-family:var(--f-min);font-weight:500;font-size:clamp(17px,2.4vw,24px);
  letter-spacing:.42em;text-indent:.42em;opacity:0;animation:fadeUp 1.4s var(--ease-out) .15s forwards}
.loader__mark span{font-family:var(--f-lat);font-style:italic;color:var(--accent);letter-spacing:.1em}
.loader__rule{height:1px;background:var(--hair);margin:26px 0 12px;overflow:hidden}
.loader__rule span{display:block;height:100%;width:0;background:var(--accent)}
.loader__num{font-family:var(--f-lat);font-size:12px;letter-spacing:.3em;color:var(--ink-dim);text-align:right}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;align-items:center;
  justify-content:space-between;padding:26px var(--pad);
  transition:padding .7s var(--ease),background .7s,backdrop-filter .7s,border-color .7s;
  border-bottom:1px solid transparent}
.header.shrink{padding:15px var(--pad);background:rgba(244,242,238,.8);
  backdrop-filter:blur(16px);border-bottom-color:var(--hair)}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:26px;height:26px;object-fit:contain;filter:brightness(0);opacity:.85;
  transition:transform 1.1s var(--ease),opacity .5s}
.brand:hover .brand__logo{transform:rotate(360deg);opacity:1}
.brand__name{font-family:var(--f-min);font-weight:500;font-size:14px;letter-spacing:.26em}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,42px)}
.nav__link{font-family:var(--f-lat);font-size:15px;letter-spacing:.14em;position:relative;
  display:inline-flex;align-items:baseline;gap:7px;padding:4px 0}
.nav__link i{font-family:var(--f-go);font-style:normal;font-size:9px;letter-spacing:.1em;color:var(--accent)}
.nav__link:not(.nav__link--cta)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.nav__link:not(.nav__link--cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav__link--cta{border:1px solid var(--line);border-radius:40px;padding:8px 22px;
  transition:background .6s var(--ease),color .6s,border-color .6s}
.nav__link--cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.burger{display:none;flex-direction:column;gap:6px;width:42px;height:42px;background:none;border:0;
  cursor:pointer;align-items:center;justify-content:center}
.burger span{width:22px;height:1px;background:var(--ink);transition:.5s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:900px){
  .burger{display:flex}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:30px;background:var(--bg);
    clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);z-index:-1}
  .nav.open{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:24px}
}

/* ---------- side rail ---------- */
.rail{position:fixed;left:clamp(14px,2.2vw,34px);bottom:0;z-index:800;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.rail__label,.rail a{writing-mode:vertical-rl;font-family:var(--f-lat);font-size:12px;letter-spacing:.2em}
.rail__label{color:var(--ink-dim);font-style:italic}
.rail a{color:var(--ink-soft);transition:color .5s,transform .5s var(--ease)}
.rail a:hover{color:var(--accent);transform:translateY(-5px)}
.rail__line{width:1px;height:64px;background:var(--line)}
@media(max-width:1180px){.rail{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:0 var(--pad);overflow:hidden}
.hero__stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__slides,.slide{position:absolute;inset:0}
/* shift the whole image layer right so the image CENTER sits at 75% of the
   viewport (the 2nd vertical line from the right in a 4-way split) */
.hero__slides{transform:translateX(25%)}
@media(max-width:820px){.hero__slides{transform:translateX(12%)}}
.slide{opacity:0;transition:opacity 2.6s var(--ease)}
.slide.is-active{opacity:1}
.slide span{position:absolute;inset:0;background-size:cover;background-position:50% 30%;
  transform:scale(1.05)}
.slide.is-active span{animation:ken 11s linear forwards}
@keyframes ken{from{transform:scale(1.05)}to{transform:scale(1.17)}}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 24%,rgba(244,242,238,.80) 42%,rgba(244,242,238,.30) 60%,transparent 78%),
             linear-gradient(0deg,var(--bg) 1%,transparent 26%)}
@media(max-width:820px){
  .hero__scrim{background:
    linear-gradient(90deg,var(--bg) 0%,rgba(244,242,238,.86) 40%,rgba(244,242,238,.55) 100%),
    linear-gradient(0deg,var(--bg) 2%,transparent 40%)}
}

.bar{position:absolute;left:var(--pad);right:var(--pad);height:1px;background:var(--line);z-index:2;
  transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease-out) .4s}
.hero.in .bar{transform:scaleX(1)}
.bar--top{top:clamp(86px,12vh,120px)}
.bar--bottom{bottom:clamp(86px,12vh,120px)}

.hero__inner{position:relative;z-index:3;max-width:var(--maxw);width:100%;margin:0 auto}
.hero__eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--f-lat);font-style:italic;
  font-size:14px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:34px;
  opacity:0;transform:translateY(12px);transition:opacity 1.2s var(--ease-out) .5s,transform 1.2s var(--ease-out) .5s}
.hero.in .hero__eyebrow{opacity:1;transform:none}
.hair{display:block;width:clamp(28px,4vw,60px);height:1px;background:var(--accent);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-out) .6s}
.hero.in .hero__eyebrow .hair{transform:scaleX(1)}

.hero__title{font-family:var(--f-min);font-weight:500;
  font-size:clamp(21px,3.1vw,42px);line-height:2.05;letter-spacing:.18em;margin-bottom:34px}
.hero__lead{max-width:520px;color:var(--ink-soft);font-size:13px;line-height:2.3;margin-bottom:44px}
.hero__actions{display:flex;gap:clamp(20px,4vw,52px);flex-wrap:wrap}

.hero__index{position:absolute;right:var(--pad);bottom:clamp(96px,13vh,132px);z-index:3;
  display:flex;align-items:center;gap:12px;font-family:var(--f-lat);font-size:13px;
  letter-spacing:.2em;color:var(--ink-soft)}
.hero__index em{font-style:normal;color:var(--ink)}
.hero__index .hair{width:34px;transform:scaleX(1);background:var(--line)}
.hero__index b{font-weight:400;color:var(--ink-dim)}
@media(max-width:760px){.hero__index{display:none}}

.hero__cue{position:absolute;left:50%;bottom:clamp(30px,5vh,52px);transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--f-lat);font-style:italic;font-size:12px;letter-spacing:.24em;color:var(--ink-dim)}
.hero__cue i{width:1px;height:52px;background:var(--hair);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;top:-60%;left:0;width:100%;height:60%;
  background:var(--accent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{top:-60%}100%{top:100%}}

/* ---------- link arrow ---------- */
.link-arrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-min);font-weight:500;
  font-size:13px;letter-spacing:.2em;position:relative;padding-bottom:9px}
.link-arrow i{width:34px;height:1px;background:var(--accent);position:relative;transition:width .6s var(--ease)}
.link-arrow i::after{content:"";position:absolute;right:0;top:-2px;width:6px;height:6px;
  border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg)}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.link-arrow:hover i{width:52px}
.link-arrow:hover::after{transform:scaleX(1);transform-origin:left}
.link-arrow--sub{color:var(--ink-soft)}
.link-arrow--sub i,.link-arrow--sub i::after{background:var(--ink-dim);border-color:var(--ink-dim)}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:20px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:1;background:var(--bg)}
.marquee__track{display:inline-flex;animation:marquee 52s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--f-min);font-size:13px;letter-spacing:.34em;color:var(--ink-dim);padding-right:.4em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   MESSAGE (代表挨拶)
   ============================================================ */
.message__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,6vw,90px);align-items:stretch}
@media(max-width:860px){.message__grid{grid-template-columns:1fr;gap:34px}}
.message__media{overflow:hidden;background:var(--bg-2);align-self:start}
.message__media img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.02)}
.message__body{display:flex;flex-direction:column;justify-content:center}
.message__lead{font-family:var(--f-min);font-weight:500;font-size:clamp(17px,2.3vw,26px);
  line-height:1.95;letter-spacing:.08em;margin-bottom:clamp(26px,3.4vw,40px)}
.message__body p.body-txt{margin-bottom:20px}
.message__sign{margin-top:clamp(26px,3.4vw,42px);padding-top:22px;border-top:1px solid var(--hair);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.message__sign .role{font-family:var(--f-lat);font-style:italic;font-size:13px;letter-spacing:.16em;color:var(--ink-soft)}
.message__sign .name{font-family:var(--f-min);font-weight:500;font-size:clamp(18px,2.2vw,24px);letter-spacing:.14em}
.message__sign .en{font-family:var(--f-lat);font-size:13px;letter-spacing:.14em;color:var(--ink-dim)}

/* ============================================================
   AUTOMATION TEASER (link to the dedicated page)
   ============================================================ */
.teaser{position:relative;overflow:hidden;background:var(--bg-2);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.teaser__inner{max-width:var(--maxw);margin:0 auto;
  padding:clamp(60px,9vw,120px) var(--pad);
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(34px,6vw,84px);align-items:center}
@media(max-width:860px){.teaser__inner{grid-template-columns:1fr;gap:38px}}
.teaser__eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--f-lat);font-style:italic;
  font-size:13px;letter-spacing:.2em;color:var(--accent);margin-bottom:22px}
.teaser__title{font-family:var(--f-min);font-weight:500;font-size:clamp(21px,3vw,38px);
  line-height:1.6;letter-spacing:.08em;margin-bottom:20px}
.teaser__lead{color:var(--ink-soft);font-size:clamp(13px,1.5vw,15px);line-height:2.35;
  max-width:34em;margin-bottom:34px}
.teaser__roi{border-left:1px solid var(--line);padding-left:clamp(26px,4vw,52px)}
.teaser__roi .cap{font-family:var(--f-min);font-weight:500;font-size:13px;letter-spacing:.06em;
  color:var(--ink-soft);line-height:1.9}
.teaser__roi .fig{display:flex;align-items:baseline;gap:14px;margin:12px 0 4px;flex-wrap:wrap}
.teaser__roi s{font-family:var(--f-lat);font-size:clamp(20px,2.6vw,30px);color:var(--ink-dim);
  text-decoration:line-through;text-decoration-color:var(--ink-dim);text-decoration-thickness:2px}
.teaser__roi .zero{font-family:var(--f-lat);font-size:clamp(46px,7vw,92px);line-height:.9;color:var(--accent)}
.teaser__roi .save{display:block;margin-top:12px;font-family:var(--f-lat);
  font-size:clamp(26px,3.6vw,48px);letter-spacing:.01em;color:var(--accent)}
.teaser__roi .save .yen{font-size:.55em;vertical-align:.14em;margin-right:.04em}
.teaser__roi .note{font-family:var(--f-lat);font-size:11px;letter-spacing:.06em;color:var(--ink-dim);margin-top:14px}
/* SNS teaser — reach statement in place of the ROI figure */
.teaser__big{display:block;font-family:var(--f-min);font-weight:500;
  font-size:clamp(30px,4.8vw,60px);line-height:1.28;letter-spacing:.06em;color:var(--accent);margin:12px 0 6px}
.teaser__roi--sns .note{letter-spacing:.14em}
/* avoid a doubled hairline where two teaser bands stack */
.teaser + .teaser{border-top:none}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:clamp(96px,15vw,210px) var(--pad)}
.head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(46px,7vw,86px)}
.head__no{font-family:var(--f-lat);font-size:13px;letter-spacing:.2em;color:var(--accent)}
.head__label{font-family:var(--f-lat);font-style:italic;font-size:14px;letter-spacing:.26em;color:var(--ink-soft)}
.hair--draw{width:clamp(34px,5vw,74px);background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s var(--ease-out)}
.in .hair--draw,.hair--draw.in{transform:scaleX(1)}

/* headings — small, mincho, airy */
.ttl{font-family:var(--f-min);font-weight:500;
  font-size:clamp(18px,2.3vw,31px);line-height:2.15;letter-spacing:.16em;margin-bottom:clamp(30px,4vw,54px)}
.ttl--center{text-align:center;margin-left:auto;margin-right:auto}

/* char stagger reveal */
.ch{display:inline-block;opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
  transition-delay:calc(var(--i) * 30ms)}
.in .ch{opacity:1;transform:none}

/* generic fade */
.fade{opacity:0;transform:translateY(22px);
  transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.fade.in{opacity:1;transform:none}
.fade:nth-of-type(2){transition-delay:.1s}
.fade:nth-of-type(3){transition-delay:.2s}

/* image curtain wipe */
.reveal-img{position:relative;overflow:hidden}
.reveal-img img{width:100%;height:auto;display:block;transform:scale(1.14);
  transition:transform 2s var(--ease-out)}
.reveal-img::after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:right;
  transition:transform 1.5s var(--ease)}
.reveal-img.in::after{transform:scaleX(0)}
.reveal-img.in img{transform:scale(1)}

/* ============================================================
   ABOUT
   ============================================================ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,7vw,110px);align-items:start}
.about__body p{color:var(--ink-soft);font-size:13px;line-height:2.4;margin-bottom:26px;max-width:44em}
.stats{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,56px);margin-top:clamp(38px,5vw,64px);
  padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--hair)}
.stat{display:flex;flex-direction:column;align-items:flex-start}
.stat em{font-family:var(--f-lat);font-style:normal;font-size:clamp(30px,3.6vw,46px);line-height:1;
  letter-spacing:.02em;color:var(--ink)}
.stat u{font-family:var(--f-lat);text-decoration:none;font-size:16px;color:var(--accent);margin-top:-14px}
.stat span{font-family:var(--f-min);font-size:12px;letter-spacing:.2em;margin-top:10px}
.stat i{font-family:var(--f-lat);font-style:italic;font-size:11px;letter-spacing:.16em;color:var(--ink-dim)}
@media(max-width:900px){.about{grid-template-columns:1fr}}

/* ============================================================
   SERVICES
   ============================================================ */
.svc{border-top:1px solid var(--hair)}
.svc__item{border-bottom:1px solid var(--hair);cursor:pointer;
  opacity:0;transform:translateY(24px);
  transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.svc__item.in{opacity:1;transform:none}
.svc__item:nth-child(1){transition-delay:.04s}.svc__item:nth-child(2){transition-delay:.1s}
.svc__item:nth-child(3){transition-delay:.16s}.svc__item:nth-child(4){transition-delay:.22s}
.svc__item:nth-child(5){transition-delay:.28s}.svc__item:nth-child(6){transition-delay:.34s}
.svc__item:nth-child(7){transition-delay:.4s}
.svc__row{position:relative;display:grid;grid-template-columns:64px 1fr 1.05fr 26px;align-items:center;
  gap:20px;padding:30px 4px;transition:padding-left .8s var(--ease)}
.svc__item:hover .svc__row{padding-left:20px}
.svc__no{font-family:var(--f-lat);font-size:13px;letter-spacing:.16em;color:var(--ink-dim);
  transition:color .6s}
.svc__item:hover .svc__no{color:var(--accent)}
.svc__name{font-family:var(--f-min);font-weight:500;font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.16em;line-height:1.8;display:flex;flex-direction:column}
.svc__name em{font-family:var(--f-lat);font-style:italic;font-size:12px;letter-spacing:.14em;
  color:var(--ink-dim);margin-top:3px}
.svc__tag{font-size:11.5px;letter-spacing:.12em;color:var(--ink-soft)}
.svc__mark{position:relative;width:14px;height:14px;justify-self:end}
.svc__mark::before,.svc__mark::after{content:"";position:absolute;background:var(--ink-soft);
  transition:transform .7s var(--ease),background .5s}
.svc__mark::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%)}
.svc__mark::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%)}
.svc__item.open .svc__mark::after{transform:translateX(-50%) scaleY(0)}
.svc__item.open .svc__mark::before{background:var(--accent)}
.svc__detail{max-height:0;overflow:hidden;transition:max-height .9s var(--ease)}
.svc__pad{padding:2px 4px 34px 84px;opacity:0;transform:translateY(12px);
  transition:opacity .9s var(--ease-out) .1s,transform .9s var(--ease-out) .1s}
.svc__item.open .svc__pad{opacity:1;transform:none}
.svc__pad p{color:var(--ink-soft);font-size:13px;line-height:2.4;max-width:46em;margin-bottom:18px}
.svc__pad ul{display:flex;flex-wrap:wrap;gap:8px}
.svc__pad li{font-family:var(--f-lat);font-size:12px;letter-spacing:.12em;color:var(--ink-soft);
  border:1px solid var(--hair);border-radius:30px;padding:5px 15px}
@media(max-width:860px){
  .svc__row{grid-template-columns:40px 1fr 20px;gap:12px;padding:22px 2px}
  .svc__tag{display:none}
  .svc__pad{padding-left:52px}
}

/* ============================================================
   WORKS — editorial asymmetric grid
   ============================================================ */
.works__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  margin-bottom:clamp(50px,8vw,100px)}
.works__intro p{max-width:26em;color:var(--ink-soft);font-size:12.5px}
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(30px,4vw,60px) clamp(18px,3vw,40px)}
.work:nth-child(1){grid-column:1/7}
.work:nth-child(2){grid-column:8/13;margin-top:clamp(30px,10vw,140px)}
.work:nth-child(3){grid-column:2/10}
.work:nth-child(4){grid-column:1/6;margin-top:clamp(10px,4vw,60px)}
.work:nth-child(5){grid-column:7/13}
.work:nth-child(6){grid-column:3/11;margin-top:clamp(10px,4vw,50px)}
.work__frame{background:var(--bg-2)}
.work__frame img{aspect-ratio:16/10;object-fit:cover}
.work:hover .work__frame.in img{transform:scale(1.05)}
.work figcaption{display:flex;flex-direction:column;gap:3px;padding:18px 2px 0;
  transition:transform .8s var(--ease)}
.work:hover figcaption{transform:translateX(8px)}
.work__cat{font-family:var(--f-lat);font-style:italic;font-size:12px;letter-spacing:.18em;color:var(--accent)}
.work__ttl{font-family:var(--f-min);font-size:13px;letter-spacing:.14em;line-height:1.9}
@media(max-width:820px){
  .works{grid-template-columns:1fr;gap:52px}
  .work:nth-child(n){grid-column:1/-1;margin-top:0}
}

/* works auto-scroll slider */
.workslider-head{display:flex;align-items:center;gap:16px;margin-top:clamp(80px,11vw,150px);
  margin-bottom:clamp(24px,3vw,40px);
  font-family:var(--f-lat);font-style:italic;font-size:14px;letter-spacing:.2em;color:var(--ink-soft)}
.workslider-head .hair{width:clamp(34px,5vw,74px);background:var(--line);transform:scaleX(1)}
.workslider{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.workslider__row{display:flex;width:max-content;
  animation:logoScroll 90s linear infinite;will-change:transform}
.workslider:hover .workslider__row{animation-play-state:paused}
/* 3-row gallery: alternating direction + varied speed + row gaps */
.workslider--multi .workslider__row{animation-duration:130s}
.workslider--multi .workslider__row + .workslider__row{margin-top:clamp(14px,1.8vw,26px)}
.workslider--multi .workslider__row--rev{animation-direction:reverse;animation-duration:155s}
.workslider--multi .workslider__row--slow{animation-duration:180s}
.workslider--multi .workslider__row--rev2{animation-direction:reverse;animation-duration:150s}
.wcard{flex:none;width:clamp(272px,32vw,430px);margin-right:clamp(18px,2.4vw,38px)}
.wcard__frame{overflow:hidden;background:var(--bg-2)}
.wcard__frame img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  filter:saturate(.96);transition:transform 1.3s var(--ease),filter .6s}
.wcard:hover .wcard__frame img{transform:scale(1.05);filter:saturate(1.05)}
.wcard figcaption{display:flex;flex-direction:column;gap:3px;padding:16px 2px 0;
  transition:transform .7s var(--ease)}
.wcard:hover figcaption{transform:translateX(6px)}
.wcard__cat{font-family:var(--f-lat);font-style:italic;font-size:12px;letter-spacing:.18em;color:var(--accent)}
.wcard__ttl{font-family:var(--f-min);font-size:13px;letter-spacing:.14em;line-height:1.9}

/* clients */
.clients{margin-top:clamp(70px,11vw,150px)}
.clients__head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:28px}
.clients__head p{font-family:var(--f-min);font-size:13px;letter-spacing:.16em;color:var(--ink-soft)}

/* auto-scrolling client logo strip */
.logos{position:relative;overflow:hidden;
  padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logos__row{display:flex;width:max-content;
  animation:logoScroll 95s linear infinite;will-change:transform}
.logos__row--rev{animation-direction:reverse;margin-top:16px}
.logos:hover .logos__row{animation-play-state:paused}
@keyframes logoScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.lcell{position:relative;flex:none;display:grid;place-items:center;
  width:clamp(260px,26vw,370px);height:clamp(150px,15vw,208px);
  margin-right:28px;padding:30px 38px;
  background:var(--paper);border:1px solid var(--hair);
  transition:border-color .6s,transform .7s var(--ease),box-shadow .7s var(--ease)}
.lcell:hover{border-color:var(--accent-dim);transform:translateY(-6px);
  box-shadow:0 32px 60px -34px rgba(28,26,23,.45)}
/* explicit box (content area) + object-fit:contain — replaced element can never overflow */
.lcell:not(.lcell--artist) img{position:absolute;top:30px;left:38px;
  width:calc(100% - 76px);height:calc(100% - 60px);max-width:none;
  object-fit:contain;object-position:center;display:block;
  opacity:.92;transition:opacity .7s,transform .7s var(--ease)}
.lcell:not(.lcell--artist):hover img{opacity:1;transform:scale(1.04)}
.lcell b{font-family:var(--f-min);font-weight:500;font-size:17px;letter-spacing:.1em;
  line-height:1.7;text-align:center;color:var(--ink-dim);transition:color .6s}
/* artist cell: square portrait filling the cell height + larger name */
.lcell--artist{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;
  gap:0;padding:0;overflow:hidden}
.lcell--artist img{width:46%;height:100%;flex:none;border-radius:0;object-fit:cover;
  object-position:center 22%;opacity:1;border:0;border-right:1px solid var(--hair);
  transition:transform .8s var(--ease)}
.lcell--artist:hover img{transform:scale(1.06)}
.lcell--artist b{flex:1;display:flex;align-items:center;
  font-size:clamp(16px,1.9vw,19px);letter-spacing:.06em;text-align:left;line-height:1.7;
  padding:0 clamp(16px,1.8vw,24px);color:var(--ink-dim)}

.lcell--sm b{font-size:15px;letter-spacing:.04em;line-height:1.6}
.lcell--xs b{font-size:13px;letter-spacing:.02em;line-height:1.55}
.lcell:hover b{color:var(--accent)}

.logos__note{font-family:var(--f-lat);font-size:12px;letter-spacing:.16em;color:var(--ink-dim);
  margin-top:26px;text-align:right}

/* ============================================================
   FLOW
   ============================================================ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,44px)}
.flow__step{padding-top:22px}
.flow__no{font-family:var(--f-lat);font-size:26px;letter-spacing:.1em;color:var(--ink-dim);
  display:block;margin-bottom:14px}
.flow__step .hair--draw{width:100%;background:var(--line);margin-bottom:18px;display:block;height:1px}
.flow__step h3{font-family:var(--f-min);font-weight:500;font-size:13.5px;letter-spacing:.16em;
  line-height:1.9;margin-bottom:10px}
.flow__step p{color:var(--ink-soft);font-size:12.5px;line-height:2.2}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{text-align:center}
.contact__inner{max-width:820px;margin:0 auto}
.contact .head__label{display:inline-block;margin-bottom:26px}
.contact p{color:var(--ink-soft);font-size:13px;margin:0 auto 40px;max-width:38em}
.mail{display:inline-block;font-family:var(--f-lat);font-size:clamp(19px,2.6vw,30px);
  letter-spacing:.1em;position:relative;padding-bottom:8px}
.mail::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .8s var(--ease)}
.mail:hover::after{transform:scaleX(1);transform-origin:left}
.contact__sns{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3vw,40px);margin-top:52px}
.contact__sns a{font-family:var(--f-lat);font-size:14px;letter-spacing:.18em;color:var(--ink-soft);
  position:relative;padding-bottom:5px;transition:color .5s}
.contact__sns a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.contact__sns a:hover{color:var(--accent)}
.contact__sns a:hover::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;z-index:1;border-top:1px solid var(--hair);
  padding:clamp(50px,7vw,84px) var(--pad) 36px;max-width:var(--maxw);margin:0 auto}
.footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  padding-bottom:46px;border-bottom:1px solid var(--hair)}
.footer__label{font-family:var(--f-lat);font-style:italic;font-size:13px;letter-spacing:.2em;
  color:var(--accent);display:block;margin-bottom:14px}
.footer__col p{color:var(--ink-soft);font-size:12.5px;line-height:2.2}
.footer__sns{display:flex;flex-direction:column;gap:2px}
.footer__sns a{width:fit-content;transition:color .4s,transform .4s var(--ease)}
.footer__sns a:hover{color:var(--accent);transform:translateX(4px)}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:28px;font-family:var(--f-lat);font-size:12px;letter-spacing:.14em;color:var(--ink-dim)}
.footer__mark{font-family:var(--f-min);font-size:13px;letter-spacing:.3em;color:var(--ink)}
.footer__mark em{font-family:var(--f-lat);font-style:italic;color:var(--accent)}
.footer__top{transition:color .4s}
.footer__top:hover{color:var(--accent)}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr 1fr;gap:28px}}

/* ---------- no-JS safety net: never hide content if JS fails ---------- */
html:not(.js) .ch,
html:not(.js) .fade,
html:not(.js) .svc__item,
html:not(.js) .hero__eyebrow{opacity:1 !important;transform:none !important}
html:not(.js) .hair,
html:not(.js) .hair--draw,
html:not(.js) .bar{transform:scaleX(1) !important}
html:not(.js) .reveal-img::after{transform:scaleX(0) !important}
html:not(.js) .reveal-img img{transform:none !important}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.1ms !important}
  .ch,.fade,.svc__item,.hero__eyebrow{opacity:1;transform:none}
  .hair,.hair--draw,.bar{transform:scaleX(1)}
  .reveal-img::after{transform:scaleX(0)}
  .reveal-img img{transform:none}
  .drift{display:none}
}