/* ワンゴウデザイン — site v2 (draft 2: MUJI direction)
   White and warm grey, plain gothic type, generous space. Red is the brand's accent only: the 契 mark,
   links, the dots of the start-up stages, the main buttons. */

@font-face { font-family: "V2 Sans JP"; src: url("../assets/fonts/v2-sans-ja-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "V2 Sans JP"; src: url("../assets/fonts/v2-sans-ja-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "V2 Sans JP"; src: url("../assets/fonts/v2-sans-ja-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "V2 Sans SC"; src: url("../assets/fonts/v2-sans-zh-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "V2 Sans SC"; src: url("../assets/fonts/v2-sans-zh-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "V2 Sans SC"; src: url("../assets/fonts/v2-sans-zh-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --red: #DE5547;        /* brand red: mark, dots, solid buttons */
  --red-ink: #DE5547;    /* red text on white / grey (≥ 4.5:1) */
  --paper: #fff;
  --grey: #f5f5f5;       /* warm grey band */
  --ink: #3a3836;        /* body text */
  --mute: #74706b;       /* secondary text */
  --rule: #dcd9d3;       /* hairlines */
  --sans: "V2 Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --gut: clamp(20px, 5vw, 64px);
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.95; letter-spacing: .04em; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- type: one family, few sizes ---------- */
.h1 { font-weight: 300; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.55; letter-spacing: .08em; }
.h2 { font-weight: 400; font-size: clamp(20px, 2vw, 24px); line-height: 1.6; letter-spacing: .1em; }
.h3 { font-weight: 400; font-size: 17px; letter-spacing: .08em; line-height: 1.6; }
.lead { font-size: 15.5px; line-height: 2.1; max-width: 36em; }
.small { font-size: 13px; color: var(--mute); }
.en { font-size: 12px; letter-spacing: .14em; color: var(--mute); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 30px; border: 1px solid var(--ink); font-size: 14px; font-weight: 400; letter-spacing: .12em; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-ink); border-color: var(--red-ink); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.more { font-size: 14px; color: var(--red-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.site-head__logo img { width: 176px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 36px); font-size: 14px; font-weight: 400; letter-spacing: .1em; }
.nav a { text-decoration: none; padding: 4px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--red-ink); }
.nav .nav__lang { padding: 2px 12px; border: 1px solid var(--rule); font-size: 12.5px; }
.nav-toggle { display: none; }

/* ---------- hero: the 契 mark and one plain sentence ---------- */
.hero { padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 128px); }
.hero .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.joined { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .3em; color: var(--mute); margin-bottom: 28px; }
.joined i { width: 36px; height: 1px; background: var(--red); }
.hero .h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 40px; }

/* ---------- sections ---------- */
.sec { padding: clamp(72px, 9vw, 120px) 0; }
.sec--grey { background: var(--grey); }
.sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.sec__head .h2 { display: flex; align-items: baseline; gap: 16px; }

/* the 契 story */
.story { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.story__mark { width: 200px; }
.story .h2 { margin-bottom: 16px; }

/* three pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); margin-top: clamp(56px, 7vw, 88px); }
.pillar { padding: 28px 28px 0 0; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--rule); }
.pillar .h3 { margin-bottom: 2px; }
.pillar .en { display: block; margin-bottom: 12px; }
.pillar p { font-size: 14px; color: var(--mute); }

/* services */
.svc { border-top: 1px solid var(--rule); }
.svc__row { display: grid; grid-template-columns: minmax(170px, 1fr) 1.4fr 2fr 24px; gap: 8px 32px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
a.svc__row:hover .svc__name { color: var(--red-ink); }
.svc__name { font-size: 17px; font-weight: 400; letter-spacing: .08em; transition: color .2s; }
.svc__name .en { display: block; font-weight: 300; }
.svc__tag { font-size: 15px; }
.svc__items { font-size: 13px; color: var(--mute); line-height: 1.8; }
.svc__go { justify-self: end; color: var(--red-ink); }
.svc__go svg { width: 14px; height: 14px; display: block; }

/* start-up package: stages joined by a line */
.pack__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(32px, 6vw, 88px); align-items: end; }
.stages { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: clamp(48px, 6vw, 72px) 0 28px; }
.stages::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--rule); }
.stage { position: relative; padding-top: 30px; }
.stage::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--grey); border: 1px solid var(--red); }
.stage--ours::before { background: var(--red); }
.stage__no { font-size: 12px; letter-spacing: .14em; color: var(--mute); }
.stage .h3 { margin: 2px 0 6px; }
.stage p { font-size: 13px; color: var(--mute); line-height: 1.8; }
.stage__who { display: block; margin-top: 10px; font-size: 12px; color: var(--red-ink); }
.pack__key { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 12.5px; color: var(--mute); margin-bottom: 36px; }
.pack__key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--red); margin-right: 8px; }
.pack__key i.fill { background: var(--red); }

/* works */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.work figcaption { margin-top: 14px; }
.work .h3 { font-size: 15.5px; }
.work p { font-size: 13px; color: var(--mute); line-height: 1.7; }
.works__past { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }
.works__past p { font-size: 14px; color: var(--mute); max-width: 40em; }

/* image placeholder until the real picture is supplied */
.ph { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 16px; background: var(--grey); border: 1px dashed #c9c5be; color: var(--mute); font-size: 12.5px; text-align: center; line-height: 1.6; }
.sec--grey .ph { background: #e9e7e2; }

/* process */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); }
.step { padding: 24px 20px 0 0; }
.step + .step { padding-left: 20px; border-left: 1px solid var(--rule); }
.step__no { font-size: 12px; letter-spacing: .14em; color: var(--red-ink); }
.step .h3 { margin: 6px 0; }
.step p { font-size: 13.5px; color: var(--mute); line-height: 1.8; }

/* partners */
.partner { display: grid; grid-template-columns: 1fr auto; gap: 24px 64px; align-items: center; padding: clamp(32px, 4vw, 48px); border: 1px solid var(--rule); }
.partner .h2 { margin-bottom: 10px; }

/* contact + footer */
.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px clamp(32px, 6vw, 88px); align-items: start; }
.contact .h2 { margin-bottom: 14px; }
.contact .lead { margin-bottom: 32px; }
.contact__info { font-size: 13.5px; line-height: 2; font-style: normal; }
.contact__info a { color: var(--red-ink); text-decoration: none; }
.contact__qr { display: flex; gap: 16px; margin-top: 18px; }
.contact__qr figure { text-align: center; font-size: 12px; color: var(--mute); }
.contact__qr img { width: 68px; height: auto; margin-bottom: 4px; }
.foot { border-top: 3px solid var(--red); font-size: 12.5px; color: var(--mute); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 28px; padding-bottom: 72px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--red-ink); }

/* ---------- service page ---------- */
.page-hero { padding: clamp(48px, 6vw, 80px) 0 clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--rule); }
.crumb { font-size: 12.5px; color: var(--mute); margin-bottom: 32px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--red-ink); }
.page-hero .en { display: block; margin-bottom: 8px; }
.page-hero__tag { font-size: clamp(16px, 1.6vw, 19px); margin-top: 14px; }
.two { display: grid; grid-template-columns: 1fr 2fr; gap: 28px clamp(32px, 6vw, 88px); }
.issues li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--rule); font-size: 15.5px; }
.issues li:first-child { border-top: 1px solid var(--rule); }
.issues li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--red); }
.issues + .lead { margin-top: 28px; }
.items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--rule); }
.items li { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.items .h3 { margin-bottom: 4px; }
.items p { font-size: 14px; color: var(--mute); }
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.plan { background: var(--paper); border: 1px solid var(--rule); padding: clamp(24px, 3vw, 36px); }
.plan__price { font-size: 24px; font-weight: 300; margin: 8px 0 16px; }
.plan__price small { font-size: 12px; color: var(--mute); margin-left: 6px; }
.plan li { position: relative; padding-left: 18px; font-size: 14px; }
.plan li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 1px; background: var(--red); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.others { display: flex; flex-wrap: wrap; gap: 10px; }
.others .btn { min-height: 40px; padding: 0 20px; font-size: 13px; }
.draft-note { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; background: #fff7dc; color: #5f4b00; font-size: 12.5px; padding: 8px var(--gut); text-align: center; }

/* ---------- the 契 seal: ワンゴウ gather into 契, then it is stamped onto paper ----------
   The end state (paper + inked impression) is the natural state, so it shows as-is with reduced motion. */
.hero__mark { justify-self: center; width: min(100%, 400px); }
.kei { display: block; width: 100%; height: auto; overflow: visible; }
.kei .k-paper { filter: drop-shadow(0 1.2px 1.6px rgba(60, 50, 40, .12)); }
.k-letters, .k-seal { opacity: 0; }
.k-imprint { opacity: .96; }
.k-part, .k-seal { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .k-letters { animation: k-letters 1.5s ease .2s backwards; }
  .js .k-seal { animation: k-show 2.7s linear backwards, k-press .32s cubic-bezier(.5, 0, .9, .4) 2.25s backwards; }
  .js .k-part { animation: k-gather .95s cubic-bezier(.25, .7, .2, 1) calc(.75s + var(--i, 0) * .12s) backwards; }
  .js .k-ring-draw { stroke-dasharray: 104 110; animation: k-ring .6s ease-out 1.55s backwards; }
  .js .k-imprint { animation: k-ink .3s ease-out 2.52s backwards; }
  .js .k-paper { animation: k-thud .35s ease-out 2.52s; }
  @keyframes k-letters { 0% { opacity: 0; } 22%, 50% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes k-show { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes k-gather { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.45); } 25% { opacity: 1; } }
  @keyframes k-ring { from { stroke-dashoffset: 105; } to { stroke-dashoffset: 0; } }
  @keyframes k-press { from { transform: scale(1.14); filter: drop-shadow(0 6px 5px rgba(60, 40, 30, .28)); } to { transform: scale(1); filter: drop-shadow(0 0 0 rgba(60, 40, 30, 0)); } }
  @keyframes k-ink { from { opacity: 0; } }
  @keyframes k-thud { 40% { transform: translateY(.8px); } }
}

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .svc__row { grid-template-columns: 1fr 24px; }
  .svc__tag, .svc__items { grid-column: 1; }
  .svc__go { grid-column: 2; grid-row: 1; }
  .stages { grid-template-columns: 1fr; gap: 24px; padding-left: 30px; }
  .stages::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .stage { padding-top: 0; }
  .stage::before { left: -30px; top: 8px; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 800px) {
  .site-head .wrap { height: 64px; }
  .site-head__logo img { width: 140px; }
  .nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--ink); }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 1px; background: currentColor; position: relative; }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px var(--gut) 24px; background: #fff; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .nav-open .nav { display: flex; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__mark { order: -1; width: min(72vw, 300px); justify-self: center; }
  .story { grid-template-columns: 1fr; }
  .story__mark { width: 120px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .pack__intro, .contact, .two, .partner { grid-template-columns: 1fr; }
  .works, .items, .plans, .cases { grid-template-columns: 1fr; }
}

/* =========================================================================
   Full-screen intro heroes (draft variants A and C)
   Washi paper fills the screen; the end frame is the natural state, so reduced motion
   (and a skipped intro) simply shows it.
   ========================================================================= */
.intro { position: relative; min-height: calc(100svh - 76px); overflow: hidden; background-color: #f5f5f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .3 0 0 0 .075 0'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .22' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 .09 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }
.intro__copy { position: relative; z-index: 2; text-align: center; padding: 0 var(--gut); }
.intro__copy .h1 { margin-bottom: 10px; }
.intro__copy .lead { margin: 0 auto 28px; font-size: 14.5px; color: var(--mute); }
.intro__copy .btns { justify-content: center; }
.intro__scroll { position: absolute; left: 50%; bottom: 18px; width: 1px; height: 36px; background: var(--rule); transform: translateX(-50%); }

/* ---- variant A: the camera pulls back from the kana to the stamped seal ---- */
.intro--a { display: grid; grid-template-rows: 1fr auto; padding-bottom: clamp(48px, 9vh, 96px); }
.intro--a .cam { align-self: center; justify-self: center; width: min(38vh, 62vw); aspect-ratio: 1; margin-top: 4vh; }
.cam__in { width: 100%; height: 100%; transform-origin: 50% 50%; }
.seal { display: block; width: 100%; height: 100%; overflow: visible; }
.seal .letters { opacity: 0; }
.seal .clean { opacity: 0; }
.seal .part, .seal .clean, .seal .hover, .seal .ink-grow { transform-box: fill-box; transform-origin: center; }
.seal .ink { opacity: .96; }

/* ---- variant C: a contract, sealed ---- */
.intro--c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 5vh, 48px); padding: clamp(32px, 6vh, 64px) 0 clamp(56px, 9vh, 88px); background-color: #f5f5f5; }
.doc { position: relative; width: min(640px, calc(100% - 2 * var(--gut))); padding: clamp(28px, 4.5vw, 56px) clamp(24px, 5vw, 64px); background: #f5f5f5; box-shadow: 0 1px 2px rgba(60, 50, 40, .08), 0 12px 32px -12px rgba(60, 50, 40, .18); }
.doc__title { text-align: center; font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; letter-spacing: 1.2em; text-indent: 1.2em; margin-bottom: clamp(20px, 3vh, 32px); }
.doc__line { font-size: clamp(13px, 1.2vw, 15px); line-height: 2.1; }
.doc__parties { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.doc__line b { font-weight: 500; margin-right: 1em; letter-spacing: .1em; }
.doc__sign { position: relative; margin-top: clamp(18px, 3vh, 28px); text-align: right; font-size: clamp(13px, 1.2vw, 15px); }
.doc__seal { position: absolute; right: -46px; top: 50%; width: clamp(72px, 9vw, 96px); aspect-ratio: 1; transform: translateY(-50%) rotate(-7deg); }

@media (prefers-reduced-motion: no-preference) {
  /* A */
  .js .intro--a .cam__in { animation: a-zoom 2.7s cubic-bezier(.55, 0, .15, 1) .25s backwards; }
  .js .intro--a .letters { animation: a-letters 1.9s ease .1s backwards; }
  .js .intro--a .part { animation: a-gather 1s cubic-bezier(.25, .7, .2, 1) calc(.95s + var(--i, 0) * .12s) backwards; }
  .js .intro--a .ring-draw { stroke-dasharray: 104 110; animation: a-ring .6s ease-out 2.05s backwards; }
  .js .intro--a .clean { animation: a-show 3.35s linear backwards, a-press .32s cubic-bezier(.5, 0, .9, .4) 3s backwards; }
  .js .intro--a .ink-grow { animation: a-bleed .5s cubic-bezier(.2, .8, .2, 1) 3.3s backwards; }
  .js .intro--a .cam { animation: a-thud .35s ease-out 3.3s; }
  .js .intro--a .intro__copy { animation: rise-in .9s ease 3.55s backwards; }
  @keyframes a-zoom { from { transform: scale(3.4); } }
  @keyframes a-letters { 0% { opacity: 0; } 25%, 52% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes a-gather { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.45); } 25% { opacity: 1; } }
  @keyframes a-ring { from { stroke-dashoffset: 105; } to { stroke-dashoffset: 0; } }
  @keyframes a-show { 0%, 97% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes a-press { from { transform: scale(1.1); filter: drop-shadow(0 4px 4px rgba(60, 40, 30, .28)); } to { transform: scale(1); filter: drop-shadow(0 0 0 rgba(60, 40, 30, 0)); } }
  @keyframes a-bleed { from { transform: scale(0); } }
  @keyframes a-thud { 40% { transform: translateY(2px); } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

  /* C */
  .js .intro--c .doc { animation: c-sheet .8s ease .1s backwards; }
  .js .intro--c .doc__title { animation: c-fade .6s ease .5s backwards; }
  .js .intro--c .reveal { animation: c-write .5s ease-out calc(.9s + var(--i) * .3s) backwards; }
  .js .intro--c .hover { animation: c-hover .55s cubic-bezier(.2, .7, .3, 1) 3.15s backwards; }
  .js .intro--c .clean { animation: a-show 4.05s linear backwards, c-press .3s cubic-bezier(.5, 0, .9, .4) 3.75s backwards; }
  .js .intro--c .ink-grow { animation: a-bleed .45s cubic-bezier(.2, .8, .2, 1) 4.02s backwards; }
  .js .intro--c .doc__seal .seal { animation: c-thud .3s ease-out 4.02s; }
  .js .intro--c .intro__copy { animation: rise-in .9s ease 4.3s backwards; }
  @keyframes c-sheet { from { opacity: 0; transform: translateY(18px); } }
  @keyframes c-fade { from { opacity: 0; } }
  @keyframes c-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes c-hover { from { opacity: 0; transform: translate(40%, -90%) scale(1.5); } }
  @keyframes c-press { from { transform: scale(1.25); filter: drop-shadow(0 5px 4px rgba(60, 40, 30, .3)); } to { transform: scale(1); filter: drop-shadow(0 0 0 rgba(60, 40, 30, 0)); } }
  @keyframes c-thud { 40% { transform: translateY(1px); } }
}
@media (max-width: 800px) {
  .intro { min-height: calc(100svh - 64px); }
  .intro--a .cam { width: min(64vw, 36vh); }
  .doc__line b { display: block; margin: 0; }
  .doc__seal { right: -18px; top: -30%; }
}
.intro__copy .joined { justify-content: center; }
.draft-note a { color: inherit; margin-left: .6em; }
.nobr { display: inline-block; }

/* =========================================================================
   Draft 3 additions: giant red cut-outs from the strokes of 契 (as the reference sites use
   their own letters), vertical section labels with a red seal dot, page helpers.
   ========================================================================= */
.has-deco { position: relative; overflow: hidden; }
.has-deco > .wrap { position: relative; z-index: 1; }
.deco { position: absolute; z-index: 0; fill: var(--red); pointer-events: none; }
.deco--r { right: -6vw; }
.deco--l { left: -6vw; }
.vlabel { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .32em; color: var(--mute); }
.vlabel::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.sec__head--v { display: grid; grid-template-columns: 28px 1fr auto; gap: 0 clamp(16px, 3vw, 40px); align-items: start; }
.sec__head--v .h2 { padding-top: 2px; }
.tbd { background: #fff2c6; padding: 0 .2em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filters button { font: inherit; font-size: 13px; letter-spacing: .1em; padding: 6px 16px; background: none; border: 1px solid var(--rule); color: var(--ink); cursor: pointer; }
.filters button[aria-pressed="true"] { border-color: var(--red); color: var(--red-ink); }
.work[hidden] { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tags span { font-size: 11.5px; color: var(--mute); border: 1px solid var(--rule); padding: 0 8px; }
.faq dt { font-weight: 400; padding-top: 20px; }
.faq dt::before { content: "问"; color: var(--red-ink); margin-right: 12px; }
.faq dd { margin: 4px 0 0; padding: 0 0 20px 28px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--mute); }
.profile { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--rule); }
.profile dt, .profile dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.profile dt { color: var(--mute); }
.strengths { counter-reset: s; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.strengths li { padding: 22px 18px 0 0; }
.strengths li + li { padding-left: 18px; border-left: 1px solid var(--rule); }
.strengths p { font-size: 13.5px; color: var(--mute); margin-top: 6px; }
.form { display: grid; gap: 22px; max-width: 640px; }
.form label { display: grid; gap: 6px; font-size: 13.5px; }
.form .req { color: var(--red-ink); font-size: 12px; margin-left: 6px; }
.form input, .form select, .form textarea { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 0; }
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); }
.form__note { font-size: 13px; color: var(--mute); }
.form__msg { font-size: 13.5px; color: var(--red-ink); min-height: 1.5em; }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.case-meta div { padding: 16px 0; }
.case-meta div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.case-meta dt { font-size: 12px; color: var(--mute); }
.case-meta dd { margin: 0; font-size: 15px; }
.chapter { display: grid; grid-template-columns: 1fr 2fr; gap: 24px clamp(32px, 6vw, 88px); padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--rule); }
.chapter__no { font-size: 12px; letter-spacing: .14em; color: var(--red-ink); display: block; margin-bottom: 6px; }
.chapter .ph { margin-top: 24px; }
@media (max-width: 800px) {
  .deco { opacity: .9; transform: scale(.6); }
  .deco--r { transform-origin: right center; right: -14vw; }
  .deco--l { transform-origin: left center; left: -14vw; }
  .sec__head--v { grid-template-columns: 20px 1fr; }
  .sec__head--v > :nth-child(3) { grid-column: 2; }
  .strengths, .case-meta { grid-template-columns: 1fr; }
  .strengths li, .strengths li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .case-meta div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .chapter, .profile { grid-template-columns: 1fr; }
  .profile dt { padding-bottom: 0; border-bottom: 0; }
}
.works__case { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; text-decoration: none; }
@media (max-width: 800px) { .works__case { grid-template-columns: 1fr; } }

:lang(zh-Hans) { --sans: "V2 Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html:lang(zh-Hans) body { font-family: var(--sans); }

/* works: cards with industry, proposal badge and year (draft 4) */
.work--card { display: block; text-decoration: none; }
.work--card .ph { transition: opacity .2s; }
.work--card:hover .ph { opacity: .8; }
.work--card:hover .h3 { color: var(--red-ink); }
.work__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; font-size: 12px; color: var(--mute); }
.work__year { margin-left: auto; letter-spacing: .1em; }
.badge { font-size: 11px; color: var(--red-ink); border: 1px solid var(--red); padding: 0 6px; line-height: 1.7; }
.work--card .h3 { font-size: 15px; margin-top: 4px; transition: color .2s; }
.work--card[hidden] { display: none; }
.case-meta--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 32px; }
.shots { display: grid; gap: 20px; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 28px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.pager a { text-decoration: none; color: var(--mute); }
.pager a:hover { color: var(--red-ink); }
@media (max-width: 800px) { .case-meta--4 { grid-template-columns: 1fr; } .pager { flex-direction: column; } }

/* =========================================================================
   Draft 5: quiet — wide white space, few words, large light type
   ========================================================================= */
.quiet { padding: clamp(140px, 18vw, 260px) 0; text-align: center; }
.quiet--grey { background: var(--grey); }
.quiet--end { padding-bottom: clamp(120px, 14vw, 200px); }
.statement { font-weight: 300; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.7; letter-spacing: .14em; margin: 0 auto; }
.statement--s { font-size: clamp(24px, 2.8vw, 36px); margin-bottom: clamp(40px, 5vw, 64px); }
.quiet__text { max-width: 30em; margin: clamp(32px, 4vw, 48px) auto 0; font-size: 15px; line-height: 2.4; color: var(--mute); letter-spacing: .08em; }
.quiet__small { margin-top: clamp(64px, 8vw, 96px); font-size: 12.5px; line-height: 2.2; color: var(--mute); letter-spacing: .06em; }
.eyebrow { font-size: 11.5px; letter-spacing: .4em; color: var(--red-ink); margin-bottom: 28px; text-indent: .4em; }
.btns--c { justify-content: center; margin-top: 40px; }
.link-arrow { display: inline-block; margin-top: clamp(48px, 6vw, 72px); font-size: 14px; letter-spacing: .14em; color: var(--ink); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--red); }
.link-arrow::after { content: "　→"; color: var(--red); }
.link-arrow:hover { color: var(--red-ink); }
.trio { display: flex; justify-content: center; gap: clamp(48px, 10vw, 160px); margin-top: clamp(96px, 12vw, 160px); }
.trio li { display: grid; gap: 14px; }
.trio__word { font-size: clamp(20px, 2vw, 26px); font-weight: 300; letter-spacing: .3em; text-indent: .3em; }
.trio__word::after { content: ""; display: block; width: 6px; height: 6px; margin: 16px auto 0; border-radius: 50%; background: var(--red); }
.trio__line { font-size: 13px; color: var(--mute); letter-spacing: .1em; }
.menu { max-width: 720px; margin: 0 auto; text-align: left; border-top: 1px solid var(--rule); }
.menu a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding: 30px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.menu__name { font-size: 19px; font-weight: 300; letter-spacing: .14em; transition: color .2s; }
.menu__tag { font-size: 13px; color: var(--mute); letter-spacing: .08em; }
.menu a:hover .menu__name { color: var(--red-ink); }
.quiet .works { text-align: left; }
.intro__copy .lead { font-size: 15px; letter-spacing: .2em; margin-top: 18px; }
.intro__copy .h1 { font-weight: 300; letter-spacing: .14em; }
/* more air on the inner pages too */
.sec { padding: clamp(104px, 12vw, 176px) 0; }
.page-hero { padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 9vw, 120px); }
.h2 { font-weight: 300; letter-spacing: .12em; }
.lead { line-height: 2.3; }
@media (max-width: 800px) {
  .trio { flex-direction: column; gap: 48px; }
  .quiet__text br { display: none; }
  .quiet__small br { display: block; }
}

/* =========================================================================
   Draft 6: the spirit of a contract — promises written like articles, signed with the seal
   ========================================================================= */
.pledge { position: relative; max-width: 680px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 72px); background: #f5f5f5; text-align: left; box-shadow: 0 1px 2px rgba(60, 50, 40, .06), 0 18px 40px -24px rgba(60, 50, 40, .25); }
.pledge::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); pointer-events: none; }
.pledge__title { text-align: center; font-size: 18px; letter-spacing: 1.2em; text-indent: 1.2em; margin-bottom: clamp(28px, 4vw, 44px); }
.pledge__list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--rule); }
.pledge__list li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.pledge__no { font-size: 13px; color: var(--red-ink); letter-spacing: .14em; padding-top: 2px; }
.pledge__list h3 { font-size: 16px; font-weight: 400; letter-spacing: .1em; margin-bottom: 4px; }
.pledge__list p { font-size: 13.5px; color: var(--mute); line-height: 2; }
.pledge__sign { position: relative; margin-top: clamp(32px, 4vw, 48px); text-align: right; padding-right: 62px; font-size: 14px; letter-spacing: .12em; }
.pledge__seal { position: absolute; right: -6px; top: 50%; width: 64px; height: auto; transform: translateY(-50%) rotate(-8deg); opacity: .92; mix-blend-mode: multiply; }
.steps--6 { grid-template-columns: repeat(6, 1fr); }
.foot__sign { display: inline-flex; align-items: center; gap: 10px; }
.foot__sign img { width: 22px; height: auto; transform: rotate(-8deg); }
@media (max-width: 960px) { .steps--6 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pledge__list li { grid-template-columns: 1fr; gap: 2px; } }

/* logo concept page */
.concept-hero { padding-bottom: clamp(80px, 10vw, 140px); }
.concept-mark { width: min(220px, 52vw); height: auto; margin: 0 auto 40px; transform: rotate(-4deg); }
.concept-logo { width: min(300px, 70vw); height: auto; margin: 0 auto; }
.kana { display: flex; gap: 12px; margin: 22px 0; }
.kana span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--rule); font-size: 20px; color: var(--red-ink); }
.swatch { display: flex; align-items: center; gap: 16px; margin: 22px 0; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.swatch i { width: 44px; height: 44px; border-radius: 50%; background: var(--red); }
.name-read { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 24px; margin-top: 20px; font-size: 14px; }
.name-read b { font-weight: 400; color: var(--red-ink); }
.chapter .lead + .lead { margin-top: 14px; }

@font-face { font-family: "WG Round"; src: url(../assets/fonts/kana-round.woff2) format("woff2"); font-weight: 500; font-display: block; }
/* =========================================================================
   Draft 7: the logo story — kana → 契 → 契＝約束 → seal outline → stamped. Captions narrate each step.
   End state (stamped seal + headline) is the resting style; animations only lead up to it.
   ========================================================================= */
.intro--k { position: relative; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; padding: clamp(40px, 7vh, 72px) 0 clamp(48px, 8vh, 88px); text-align: center; }
.kstage { position: relative; width: min(40vh, 64vw); aspect-ratio: 1; }
.intro--k .cam { width: 100%; height: 100%; margin: 0; }
.intro--k .cam__in { width: 100%; height: 100%; }
.kana-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; pointer-events: none; z-index: 2; }
.kana-row span { width: 26%; font-family: "WG Round", var(--sans); font-size: min(13vh, 20vw); font-weight: 500; color: #DE5547; opacity: 0; }
.kcap { position: relative; height: 3.4em; width: 100%; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .14em; margin-top: clamp(16px, 3vh, 32px); }
.kcap p { position: absolute; inset: 0; margin: 0; opacity: 0; display: flex; align-items: center; justify-content: center; gap: .3em; }
.kcap__big b { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-weight: 500; font-size: 2em; color: var(--red-ink); letter-spacing: 0; }
.intro--k .intro__copy .h1 { margin-bottom: 6px; }
.intro--k .intro__copy .lead { font-size: 14px; letter-spacing: .12em; color: var(--mute); max-width: none; }
.kreplay { font: inherit; background: none; cursor: pointer; }
.kskip { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 18px; font: inherit; font-size: 12px; letter-spacing: .2em; color: var(--mute); background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 4px 0; cursor: pointer; opacity: 0; pointer-events: none; }
.intro--k .seal .clean { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .kstory:not(.k-done) .kana-row span { animation: k-kin .7s ease calc(.3s + var(--i, 0) * 2.4s) backwards, k-kout 1s ease calc(1.5s + var(--i, 0) * 2.4s) forwards; opacity: 1; }
  .js .kstory:not(.k-done) .kana-row span:nth-child(2) { --i: 1; } .js .kstory:not(.k-done) .kana-row span:nth-child(3) { --i: 2; } .js .kstory:not(.k-done) .kana-row span:nth-child(4) { --i: 3; }
  .js .kstory:not(.k-done) .part { animation: k-morph 1.6s cubic-bezier(.45, 0, .25, 1) calc(1.5s + var(--i, 0) * 2.4s) backwards; }
  .js .kstory:not(.k-done) .ring-draw { stroke-dasharray: 104 110; animation: a-ring .9s ease-out 10.4s backwards; }
  .js .kstory:not(.k-done) .clean { animation: k-show 12s linear backwards, k-lift .5s ease 11.2s backwards, a-press .3s cubic-bezier(.5, 0, .9, .4) 11.7s backwards; }
  .js .kstory:not(.k-done) .ink-grow { animation: a-bleed .5s cubic-bezier(.2, .8, .2, 1) 11.98s backwards; }
  .js .kstory:not(.k-done) .cam { animation: a-thud .35s ease-out 11.98s; }
  .js .kstory:not(.k-done) .kcap p { animation: k-cap var(--d) ease var(--t) both; }
  .js .kstory:not(.k-done) .intro__copy { animation: rise-in .9s ease 12.6s backwards; }
  .js .kstory:not(.k-done) .kskip { animation: k-skip 7.4s linear both; pointer-events: auto; }
  @keyframes k-kin { from { opacity: 0; transform: translateY(14px); } }
  @keyframes k-kout { 0% { opacity: 1; } 55% { opacity: 0; transform: scale(.92); filter: blur(4px); } to { opacity: 0; transform: scale(.92); filter: blur(4px); } }
  @keyframes k-morph { 0% { opacity: 0; filter: blur(3px); transform: translate(var(--dx), var(--dy)) scale(.8); } 35% { opacity: 1; filter: blur(0); transform: translate(var(--dx), var(--dy)) scale(.8); } }
  @keyframes k-show { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes k-lift { to { transform: scale(1.08); filter: drop-shadow(0 4px 4px rgba(60, 40, 30, .25)); } }
  @keyframes k-cap { 0% { opacity: 0; transform: translateY(8px); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes k-skip { 0%, 98% { opacity: 1; } 100% { opacity: 0; } }
}
@media (max-width: 800px) { .kstage { width: min(36vh, 70vw); } .kcap { font-size: 15px; } }

/* loop: after the first run the headline stays put; only the logo story replays */


.intro--k .kstage { margin-bottom: clamp(24px, 4vh, 40px); }

/* Draft 8: full logo story lives on the concept page; the homepage only stamps once */
.kstory { display: flex; justify-content: center; margin: 0 auto 28px; }
.kstory .cam, .kstory .cam__in { width: 100%; height: 100%; margin: 0; }
.kstory .kstage { width: min(38vh, 72vw); }
.kstory .seal .clean, .intro--s .seal .clean { opacity: 0; }
.intro--s .kstage { width: min(30vh, 46vw); }
@media (prefers-reduced-motion: no-preference) {
  .js .intro--s .clean { animation: k-show .75s linear backwards, a-press .3s cubic-bezier(.5, 0, .9, .4) .45s backwards; }
  .js .intro--s .ink-grow { animation: a-bleed .5s cubic-bezier(.2, .8, .2, 1) .73s backwards; }
  .js .intro--s .cam { animation: a-thud .35s ease-out .73s; }
  .js .intro--s .intro__copy { animation: rise-in .8s ease .9s backwards; }
}

/* Draft 9: white + vermilion only — no beige/washi. Sections separate by hairlines and space. */
:root { --grey: #fff; --rule: #e3e3e3; }
.intro, .intro--c { background-color: #fff; background-image: none; }
.sec--grey, .quiet--grey { background: #fff; border-top: 1px solid var(--rule); }
.sec--grey .ph, .ph { background: #fafafa; border-color: #d6d6d6; }
.doc, .pledge { background: #fff; border: 1px solid var(--rule); box-shadow: none; }
.seal { filter: none; }

/* Draft 10: question-first hero — opens with what clients worry about, then the answer */
.hero-q { padding: clamp(72px, 14vh, 150px) 0 clamp(72px, 12vh, 130px); border-bottom: 1px solid var(--rule); }
.hero-q__eyebrow { margin: 0 0 18px; font-size: 13px; letter-spacing: .24em; color: var(--red-ink); }
.hero-q__title { margin: 0 0 clamp(28px, 5vh, 44px); font-size: clamp(26px, 4.2vw, 46px); font-weight: 300; line-height: 1.6; letter-spacing: .08em; color: var(--ink); }
.hero-q__list { list-style: none; margin: 0 0 clamp(48px, 9vh, 88px); padding: 0; display: grid; gap: 10px; }
.hero-q__list li { position: relative; padding-left: 1.8em; font-size: clamp(14px, 1.3vw, 16px); letter-spacing: .08em; color: var(--mute); }
.hero-q__list li::before { content: ""; position: absolute; left: 0; top: .95em; width: 1em; height: 1px; background: var(--red); }
.hero-q__answer { padding-left: clamp(18px, 3vw, 40px); border-left: 2px solid var(--red); padding-top: 4px; padding-bottom: 4px; }
.hero-q__answer .h1 { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 28px);  }
.hero-q__answer .lead { margin: 0 0 26px; font-size: 14.5px; color: var(--mute); max-width: 36em;  }
.hero-q__answer .btns {  }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-q__eyebrow, .js .hero-q__title, .js .hero-q__list li, .js .hero-q__answer { animation: rise-in .9s ease backwards; }
  .js .hero-q__title { animation-delay: .15s; }
  .js .hero-q__list li:nth-child(1) { animation-delay: .5s; } .js .hero-q__list li:nth-child(2) { animation-delay: .65s; } .js .hero-q__list li:nth-child(3) { animation-delay: .8s; }
  .js .hero-q__answer { animation-delay: 1.15s; }
}

/* Draft 11: homepage explains the business — three layers, start-to-growth path, who, why */
.hero-q__title { font-size: clamp(28px, 4.4vw, 50px); }
.hero-q__lead { max-width: 34em; margin: 0 0 36px; font-size: clamp(14.5px, 1.3vw, 16px); line-height: 2.1; color: var(--mute); }
.biz { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); text-align: left; }
.biz > li { padding: 32px clamp(16px, 2.4vw, 32px) 36px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.biz > li:last-child { border-right: 0; }
.biz__en { font-size: 12px; letter-spacing: .3em; color: var(--red-ink); }
.biz__name { margin: 8px 0 10px; font-size: 21px; font-weight: 400; letter-spacing: .08em; }
.biz__line { margin: 0 0 20px; font-size: 14px; color: var(--ink); line-height: 1.9; }
.biz ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.biz ul li { padding: 12px 0; border-top: 1px dashed var(--rule); font-size: 13px; color: var(--mute); line-height: 1.8; }
.biz ul li b { display: block; font-weight: 500; color: var(--ink); font-size: 14px; }
.biz__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.biz .link-arrow { margin-top: 0; }
.biz__formula { margin: 40px 0 0; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .32em; color: var(--ink); }
.biz__formula i { font-style: normal; color: var(--red); margin: 0 .4em; }
.journey { list-style: none; margin: 40px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; text-align: left; counter-reset: s; }
.journey li { position: relative; padding: 22px 16px 0 0; border-top: 2px solid var(--rule); }
.journey li::before { content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--red); }
.journey span { font-size: 11px; letter-spacing: .2em; color: var(--red-ink); }
.journey h3 { margin: 4px 0 6px; font-size: 16px; font-weight: 500; letter-spacing: .08em; }
.journey p { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.85; }
.journey small { display: inline-block; margin-top: 8px; font-size: 11.5px; color: var(--red-ink); border: 1px solid currentColor; padding: 0 6px; }
.who { list-style: none; margin: 36px auto 0; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.who li { padding: 18px 12px; border: 1px solid var(--rule); font-size: 14px; letter-spacing: .06em; }
.why { list-style: none; margin: 40px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; text-align: left; counter-reset: w; }
.why li { padding: 0 clamp(12px, 1.6vw, 22px); border-left: 1px solid var(--rule); counter-increment: w; }
.why li::before { content: "0" counter(w); display: block; font-size: 12px; letter-spacing: .2em; color: var(--red-ink); margin-bottom: 6px; }
.why h3 { margin: 0 0 8px; font-size: 16px; font-weight: 500; letter-spacing: .06em; }
.why p { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.85; }
.why__seal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-size: 14px; color: var(--ink); }
.why__seal .link-arrow { margin: 0; }
@media (max-width: 900px) {
  .biz { grid-template-columns: 1fr; }
  .biz > li { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0; padding-right: 0; }
  .journey { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--rule); margin-left: 6px; }
  .journey li { border-top: 0; padding: 0 0 26px 22px; }
  .journey li::before { left: -8px; top: 4px; }
  .who { grid-template-columns: 1fr 1fr; }
  .why { grid-template-columns: 1fr; gap: 24px; }
  .why li { border-left: 2px solid var(--red); }
}

/* Draft 12: door-plate lockup (vertical bold kana + seal), numbered left-aligned home sections */
@font-face { font-family: "WG Logo"; src: url(../assets/fonts/logo-bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
.lockup { display: inline-flex; align-items: flex-end; gap: calc(var(--lk) * .55); --lk: 12px; text-decoration: none; color: #1f1f1f; }
.lockup__seal { width: calc(var(--lk) * 2.6); height: auto; display: block; }
.lockup__txt { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: calc(var(--lk) * .5); font-family: "WG Logo", "Noto Sans JP", sans-serif; font-weight: 700; font-size: var(--lk); line-height: 1; }
.lockup__txt > span { writing-mode: vertical-rl; letter-spacing: .12em; }
.lockup__txt > .lockup__kk { font-size: .56em; letter-spacing: 0; margin-right: calc(var(--lk) * .15); }
.site-head__logo { display: block; line-height: 0; }
.site-head__logo img { display: block; }
.lockup--head { --lk: 12px; }
.lockup--foot { --lk: 15px; }
.lockup--l { --lk: 30px; }
.foot__brand { margin-bottom: 28px; line-height: 0; }
.concept-logo { width: auto; display: flex; justify-content: center; }
@media (max-width: 800px) { .lockup--head { --lk: 10.5px; } .lockup--l { --lk: 22px; } }

.q-left { text-align: left; padding: clamp(96px, 11vw, 150px) 0; border-top: 1px solid var(--rule); }
.q-left .statement { margin: 0; }
.q-left .eyebrow { text-indent: 0; letter-spacing: .3em; display: flex; align-items: baseline; gap: 14px; }
.q-left .eyebrow b { font-weight: 400; font-size: 13px; letter-spacing: .1em; color: var(--red); }
.q-left .eyebrow b::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--red); vertical-align: middle; margin-left: 14px; }
.q-left .link-arrow { margin-top: 40px; }
.q-left .who { margin-left: 0; max-width: none; }
.q-left .who li { text-align: left; padding: 18px 20px; }
.q-left .why__seal { justify-content: flex-start; }
.q-left .biz, .q-left .journey, .q-left .why { margin-top: 48px; }
.hero-q { border-bottom: 0; }

.site-head__logo .lockup__seal, .foot .lockup__seal { width: calc(var(--lk) * 2.6); transform: none; }
.foot .wrap { flex-wrap: wrap; }
.foot__brand { flex-basis: 100%; order: -1; }
.lockup, .lockup__txt { width: max-content; }
.lockup__txt { justify-content: flex-end; }
.lockup__seal { flex: none; }

/* Draft 13: horizontal lockup for the header; vertical (door-plate) lockup stays for footer / concept */
.lockup-h { display: inline-flex; align-items: center; gap: calc(var(--lh) * .55); --lh: 17px; color: #1f1f1f; }
.lockup-h__seal { width: calc(var(--lh) * 2) !important; height: auto; display: block; flex: none; }
.lockup-h__txt { font-family: "WG Logo", "Noto Sans JP", sans-serif; font-weight: 700; font-size: var(--lh); line-height: 1; letter-spacing: .04em; font-feature-settings: "palt"; white-space: nowrap; }
.lockup-h__kk { font-size: .55em; letter-spacing: 0; margin-left: .15em; }
.lockup__txt > span { font-feature-settings: "vpal"; }
@media (max-width: 800px) { .lockup-h { --lh: 15px; } }

/* Draft 14: lockup type = Kiwi Maru Medium (rounded, brush-like ends to match 契); no palt in this face, so tighten by hand */
.lockup-h__txt { letter-spacing: -.06em; }
.lockup__txt > span { letter-spacing: -.02em; }
.lockup-h { --lh: 18px; }
@media (max-width: 800px) { .lockup-h { --lh: 16px; } }

/* Draft 15: lockup A (横組み・基本形) everywhere — seal + ワンゴウデザイン + small 株式会社 */
.lockup-h__kk { font-size: .5em; margin-left: .45em; letter-spacing: .06em; }
.lockup-h--foot { --lh: 20px; }
.lockup-h--l { --lh: 40px; }
@media (max-width: 800px) { .lockup-h--l { --lh: 26px; } }


/* Draft 17: brand face only where it speaks for the brand — the main navigation */
@font-face { font-family: "WG Nav"; src: url(../assets/fonts/nav-ja.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "WG Nav ZH"; src: url(../assets/fonts/nav-zh.woff2) format("woff2"); font-display: swap; }
.nav a { font-family: "WG Nav", var(--sans); font-weight: 400; letter-spacing: .1em; }
html:lang(zh-Hans) .nav a:not([lang="ja"]) { font-family: "WG Nav ZH", var(--sans); }


/* Draft 19: real work excerpts */
.shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #f5f5f5; border: 1px solid var(--rule); }
.work--card .shot { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.work--card { overflow: hidden; }
.work--card:hover .shot { transform: scale(1.03); }
.chapter .shot { margin-top: 24px; }

/* Draft 20: homepage hero = a slowly drifting wall of real work excerpts, copy laid over a white fade */
.wall { position: relative; height: min(94svh, 900px); min-height: 640px; overflow: hidden; background: #f5f5f5; }
.wall__rows { position: absolute; inset: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.wall__row { height: calc((100% - 42px) / 3); overflow: visible; }
.wall__track { display: flex; gap: 14px; height: 100%; width: max-content; }
.wall__tile { position: relative; display: block; flex: none; height: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #f5f5f5; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px -14px rgba(0, 0, 0, .25); }
.wall__tile--n { aspect-ratio: 4 / 5; }
.wall__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wall__tile span { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 12px; line-height: 1.5; color: #fff; background: rgba(31, 31, 31, .78); padding: 4px 8px; opacity: 0; transform: translateY(4px); transition: .3s; pointer-events: none; }
.wall__tile:hover img { transform: scale(1.04); }
.wall__tile:hover span { opacity: 1; transform: none; }
.wall__fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 30%, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, 0) 72%); pointer-events: none; }
.wall__copy { position: absolute; left: 0; right: 0; bottom: clamp(36px, 7vh, 72px); pointer-events: none; }
.wall__copy .btns, .wall__copy a { pointer-events: auto; }
.wall__copy .hero-q__title { margin-bottom: 18px; }
.wall__copy .hero-q__lead { margin-bottom: 26px; color: #55514c; }
@media (prefers-reduced-motion: no-preference) {
  .wall__track { animation: wall-x var(--dur, 160s) linear infinite; }
  .wall__track--rev { animation-direction: reverse; }
  .wall__rows:hover .wall__track { animation-play-state: paused; }
  @keyframes wall-x { to { transform: translateX(-50%); } }
}
@media (max-width: 800px) {
  .wall { height: auto; min-height: 0; }
  .wall__rows { position: relative; inset: auto; height: 46svh; padding-top: 10px; gap: 10px; }
  .wall__row { height: calc((100% - 30px) / 3); }
  .wall__track { gap: 10px; }
  .wall__fade { background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 38%); }
  .wall__copy { position: relative; bottom: auto; padding: 8px 0 48px; background: #fff; }
}
@media (min-width: 801px) {
  .wall { background: #fff; }
  .wall__rows { inset: 14px 0 auto; height: 64%; }
  .wall__fade { background: linear-gradient(to top, #fff 0%, #fff 36%, rgba(255, 255, 255, .7) 44%, rgba(255, 255, 255, 0) 56%); }
  .wall__copy .wrap { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 48px; align-items: end; }
  .wall__copy .hero-q__eyebrow, .wall__copy .hero-q__title { grid-column: 1; }
  .wall__copy .hero-q__lead { grid-column: 2; grid-row: 2; margin-bottom: 18px; }
  .wall__copy .btns { grid-column: 2; grid-row: 3; }
  .wall__copy .hero-q__title { grid-row: 2 / 4; margin: 0; }
}

/* Draft 21: detail shots keep their own proportions; cards still crop to 16:10 from the top-left */
.chapter .shot, .shots .shot, .sec > .wrap > .shot { aspect-ratio: auto; object-fit: initial; }
.work--card .shot { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.chapter:has(> .shots) { grid-template-columns: 1fr; }
.chapter > .shots { gap: 28px; margin-top: 12px; }
.career { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.career li { display: grid; grid-template-columns: 4.5em 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--mute); line-height: 1.8; }
.career li span { color: var(--red-ink); letter-spacing: .06em; }

/* Draft 22: homepage deepening — facts strip, imaged business columns, red promise band, case teaser, magazine works, FAQ, contact */
.facts { border-bottom: 1px solid var(--rule); }
.facts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts__list li { padding: 34px clamp(12px, 2vw, 28px) 30px; border-left: 1px solid var(--rule); display: grid; gap: 4px; }
.facts__list li:first-child { border-left: 0; padding-left: 0; }
.facts__list b { font-weight: 300; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.1; color: var(--ink); letter-spacing: .02em; }
.facts__list b small { font-size: .5em; color: var(--red); margin-left: 2px; }
.facts__list span { font-size: 14px; color: var(--ink); letter-spacing: .08em; }
.facts__list em { font-style: normal; font-size: 11.5px; letter-spacing: .14em; color: var(--mute); }

.biz__img { margin: -32px calc(-1 * clamp(16px, 2.4vw, 32px)) 22px; overflow: hidden; aspect-ratio: 16 / 9; background: #f5f5f5; }
.biz__shot { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.biz > li:hover .biz__shot { transform: scale(1.03); }
.biz > li { padding-top: 32px; }

.promise-band { background: var(--red); color: #fff; padding: clamp(80px, 10vw, 130px) 0; }
.promise-band__in { display: grid; grid-template-columns: minmax(160px, .7fr) 2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.promise-band__mark img { width: min(240px, 100%); height: auto; filter: brightness(0) invert(1); opacity: .95; transform: rotate(-6deg); }
.promise-band__eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .4em; opacity: .85; }
.promise-band__title { margin: 0 0 30px; font-weight: 300; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.7; letter-spacing: .1em; }
.promise-band__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .45); counter-reset: p; }
.promise-band__list li { counter-increment: p; padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .45); font-size: 14.5px; letter-spacing: .06em; }
.promise-band__list li::before { content: "第" counter(p, cjk-decimal) "条"; display: block; font-size: 11px; letter-spacing: .2em; opacity: .8; margin-bottom: 4px; }
html:lang(ja) .promise-band__list li::before { content: "第" counter(p, cjk-decimal) "条"; }
.promise-band__links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.promise-band__links a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .7); padding-bottom: 4px; font-size: 14px; letter-spacing: .12em; }

.case-teaser { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 40px; }
.case-teaser__img { display: block; overflow: hidden; border: 1px solid var(--rule); }
.case-teaser__img .shot { border: 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.case-teaser__lead { margin: 22px 0 22px; font-size: 14.5px; line-height: 2.1; color: var(--mute); }
.case-teaser__steps { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: c; }
.case-teaser__steps li { counter-increment: c; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--rule); letter-spacing: .06em; }
.case-teaser__steps li::before { content: counter(c, decimal-leading-zero) " "; color: var(--red-ink); }

.mag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; margin-top: 40px; text-align: left; }
.mag__item { text-decoration: none; color: inherit; display: block; }
.mag__item--lg { grid-column: span 2; grid-row: span 2; }
.mag__img { overflow: hidden; border: 1px solid var(--rule); margin-bottom: 12px; }
.mag__img .shot { border: 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mag__item--lg .mag__img .shot { aspect-ratio: 16 / 10.4; }
.mag__item:hover .shot { transform: scale(1.03); }
.mag__item .h3 { font-size: 15px; margin: 4px 0 0; line-height: 1.6; }
.mag__item--lg .h3 { font-size: 19px; }

.faq-home { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 72px); }
.faq--home { margin: 0; }
.contact-home { border-top: 1px solid var(--rule); padding: clamp(96px, 11vw, 150px) 0; }
.contact-home__in { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.contact-home .statement { margin: 0 0 18px; }
.contact-home__lead { margin: 0 0 30px; font-size: 15px; line-height: 2.2; color: var(--mute); }
.contact-home__info { font-size: 13.5px; line-height: 2; color: var(--mute); border-left: 2px solid var(--red); padding-left: 24px; }
.contact-home__info p { margin: 0 0 14px; }

@media (max-width: 900px) {
  .facts__list { grid-template-columns: 1fr 1fr; }
  .facts__list li { border-left: 0; border-top: 1px solid var(--rule); padding: 22px 0; }
  .facts__list li:nth-child(-n+2) { border-top: 0; }
  .biz__img { margin-left: 0; margin-right: 0; }
  .promise-band__in, .case-teaser, .faq-home, .contact-home__in { grid-template-columns: 1fr; }
  .promise-band__mark img { width: 120px; }
  .mag { grid-template-columns: 1fr; }
  .mag__item--lg { grid-column: auto; grid-row: auto; }
}

/* Draft 23: headings echo the logo face (Kiwi Maru for ja / ChironGoRound for zh); redesigned home sections with line icons */
@font-face { font-family: "WG Head"; src: url(../assets/fonts/head-ja.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "WG Head ZH"; src: url(../assets/fonts/head-zh.woff2) format("woff2"); font-display: swap; }
.head, .statement, .page-hero .h1, .h2 { font-family: "WG Head", var(--sans); font-weight: 400; }
html:lang(zh-Hans) .head, html:lang(zh-Hans) .statement, html:lang(zh-Hans) .page-hero .h1, html:lang(zh-Hans) .h2 { font-family: "WG Head ZH", var(--sans); }
.ico { width: 30px; height: 30px; color: var(--red); flex: none; }

/* hero: wall on top, copy in its own white block with breathing room */
.wall { height: min(60svh, 560px); min-height: 380px; }
.wall__rows { inset: 14px 0 0; height: auto; }
.wall__row { height: calc((100% - 42px) / 3); }
.wall__fade { background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, .85) 14%, rgba(255, 255, 255, 0) 38%); }
.intro2 { padding: clamp(64px, 9vh, 104px) 0 clamp(72px, 10vw, 120px); }
.intro2__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font-size: 12.5px; letter-spacing: .3em; color: var(--red-ink); }
.intro2__eyebrow span { width: 32px; height: 1px; background: var(--red); }
.intro2__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.intro2__title { margin: 0; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.5; letter-spacing: .06em; color: var(--ink); }
.intro2__side p { margin: 0 0 28px; font-size: 15px; line-height: 2.1; color: #55514c; }
.facts2 { list-style: none; margin: clamp(64px, 9vw, 112px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); }
.facts2 li { position: relative; padding-top: 22px; border-top: 1px solid var(--rule); display: grid; gap: 4px; }
.facts2 li::before { content: ""; position: absolute; left: 0; top: -1px; width: 36px; height: 2px; background: var(--red); }
.facts2 b { font-size: clamp(34px, 3.6vw, 50px); font-weight: 400; line-height: 1.15; color: var(--ink); }
.facts2 b i { font-style: normal; font-size: .55em; color: var(--red); margin-left: 2px; }
.facts2 span { font-size: 14px; letter-spacing: .08em; }
.facts2 em { font-style: normal; font-size: 11.5px; letter-spacing: .12em; color: var(--mute); }

/* shared section head */
.sec2 { padding: clamp(96px, 11vw, 150px) 0; border-top: 1px solid var(--rule); }
.sec2--tint { background: #f5f5f5; }
.sec2__head { display: flex; gap: clamp(18px, 3vw, 40px); align-items: flex-start; margin-bottom: clamp(48px, 6vw, 80px); }
.sec2__no { margin: 0; font-family: "WG Head", var(--sans); font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--red); }
html:lang(zh-Hans) .sec2__no { font-family: "WG Head ZH", var(--sans); }
.sec2__en { margin: 6px 0 10px; font-size: 12px; letter-spacing: .32em; color: var(--mute); text-transform: uppercase; }
.sec2__title { margin: 0; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.6; letter-spacing: .06em; color: var(--ink); }

/* 01 business */
.biz2 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.biz2__col { display: flex; flex-direction: column; padding: 8px clamp(4px, 1.4vw, 20px); }
.biz2__x { align-self: center; font-family: "WG Head", var(--sans); font-size: 30px; color: var(--red); padding: 0 clamp(8px, 1.6vw, 24px); }
.biz2__ico { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; margin-bottom: 22px; }
.biz2__en { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .32em; color: var(--red-ink); }
.biz2__name { margin: 0 0 12px; font-size: clamp(22px, 2vw, 28px); letter-spacing: .06em; }
.biz2__lead { margin: 0 0 14px; font-size: 15px; color: var(--ink); line-height: 1.9; }
.biz2__text { margin: 0 0 24px; font-size: 13.5px; color: var(--mute); line-height: 2; flex: 1; }
.biz2 .link-arrow, .biz2__links .link-arrow { margin-top: 0; }
.biz2__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* 02 journey: rising steps */
.stair { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; }
.stair li { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--red); padding: 22px 18px 24px; }
.stair li:nth-child(1) { margin-bottom: 0; } .stair li:nth-child(2) { margin-bottom: 28px; } .stair li:nth-child(3) { margin-bottom: 56px; } .stair li:nth-child(4) { margin-bottom: 84px; } .stair li:nth-child(5) { margin-bottom: 112px; }
.stair--partner { border-top-color: #b9b5ae !important; border-style: dashed !important; border-top-style: solid !important; }
.stair--partner .ico { color: #9a958d; }
.stair__ico { display: block; margin-bottom: 14px; }
.stair__no { margin: 0 0 4px; font-size: 11px; letter-spacing: .2em; color: var(--red-ink); }
.stair--partner .stair__no { color: var(--mute); }
.stair h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: .06em; }
.stair p { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.85; }
.stair small { display: inline-block; margin-top: 10px; font-size: 11.5px; color: var(--mute); border: 1px solid var(--rule); padding: 1px 8px; }

/* 03 clients */
.who2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.who2 li { display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; row-gap: 6px; padding: 30px 24px 30px 0; border-bottom: 1px solid var(--rule); }
.who2 li .ico { grid-row: span 2; width: 32px; height: 32px; }
.who2 h3 { margin: 2px 0 0; font-size: 18px; letter-spacing: .04em; }
.who2 p { margin: 0; font-size: 13.5px; color: var(--mute); line-height: 1.85; }

/* 04 why */
.why2 { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sec2__head--stick { position: sticky; top: 110px; margin-bottom: 0; }
.why2__lead { margin: 22px 0 0; font-size: 14.5px; line-height: 2.1; color: var(--mute); }
.why2__list { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.why2__list li { counter-increment: w; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--rule); align-items: start; }
.why2__list li:last-child { border-bottom: 1px solid var(--rule); }
.why2__list .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); box-sizing: content-box; width: 24px; height: 24px; }
.why2__list h3 { margin: 4px 0 8px; font-size: 20px; letter-spacing: .06em; }
.why2__list h3::before { content: "0" counter(w) "　"; color: var(--red); font-size: .7em; letter-spacing: .1em; }
.why2__list p { margin: 0; font-size: 14px; color: var(--mute); line-height: 2; }

/* remaining home sections share the new head look */
.q-left .eyebrow b { font-family: "WG Head", var(--sans); font-size: 18px; }
.contact-home__info { align-self: center; }

@media (max-width: 900px) {
  .wall { height: 46svh; min-height: 300px; }
  .intro2__grid, .why2 { grid-template-columns: 1fr; }
  .facts2 { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .biz2 { grid-template-columns: 1fr; }
  .biz2__x { justify-self: start; padding: 10px 0; }
  .stair { grid-template-columns: 1fr; }
  .stair li { margin: 0 !important; }
  .who2 { grid-template-columns: 1fr; }
  .sec2__head--stick { position: static; }
}
.intro2__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.intro2__title { font-size: clamp(30px, 3.9vw, 54px); }
.intro2__title .nobr { white-space: nowrap; }
@media (max-width: 900px) { .intro2__title .nobr { white-space: normal; } }
@media (max-width: 900px) {
  .intro2__grid { grid-template-columns: 1fr; gap: 24px; }
  .intro2__title { font-size: 28px; }
  .wall { height: 42svh; min-height: 280px; }
  .wall__rows { position: absolute; inset: 10px 0 0; height: auto; padding: 0; }
  .wall__row { height: calc((100% - 30px) / 3); }
  .sec2__head { flex-direction: column; gap: 6px; }
}

/* Draft 24: international feel — bolder type scale, outline display words, marquee, one dark section, scroll reveals */
.biz2 { position: relative; }
.biz2__col { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--rule); padding: 36px 28px 30px; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s; }
.biz2__col:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(60, 30, 20, .35); border-color: transparent; }
.biz2__col:hover .biz2__ico { background: var(--red); border-color: var(--red); }
.biz2__col:hover .biz2__ico .ico { color: #fff; }
.biz2__ico { transition: background .4s, border-color .4s; }
.biz2__ico .ico { transition: color .4s; }
.biz2__bg { position: absolute; right: -6px; bottom: -14px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(56px, 6vw, 92px); letter-spacing: -.02em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(222, 85, 71, .18); pointer-events: none; transition: -webkit-text-stroke-color .5s, transform .8s cubic-bezier(.2,.7,.2,1); }
.biz2__col:hover .biz2__bg { -webkit-text-stroke-color: rgba(222, 85, 71, .45); transform: translateX(-8px); }
.biz2__x { font-size: 34px; }

.marquee { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 26px 0; background: #fff; }
.marquee__track { display: flex; width: max-content; white-space: nowrap; }
.marquee__track span { font-family: "Helvetica Neue", Arial, "WG Head ZH", "WG Head", sans-serif; font-size: clamp(34px, 5vw, 72px); font-weight: 300; letter-spacing: .02em; color: var(--ink); padding-right: .6em; }
html:lang(zh-Hans) .marquee__track span { font-family: "Helvetica Neue", Arial, "WG Head ZH", sans-serif; }
.marquee__track i { font-style: normal; color: var(--red); margin: 0 .25em; }
@media (prefers-reduced-motion: no-preference) { .marquee__track { animation: mq 46s linear infinite; } @keyframes mq { to { transform: translateX(-50%); } } }

.stair li { position: relative; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.stair li:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -24px rgba(0,0,0,.3); }
.stair h3 { font-size: 21px; }
.stair__no { font-size: 12px; }

.who2 li { grid-template-columns: 56px 1fr; transition: background .4s; padding-left: 8px; }
.who2 li:hover { background: #f5f5f5; }
.who2__no { grid-row: span 2; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 30px; font-weight: 300; color: var(--red); line-height: 1.1; }

.sec2--dark { background: #1d1c1b; color: #f2efea; border-top: 0; }
.sec2--dark .sec2__title, .sec2--dark .why2__list h3 { color: #fff; }
.sec2--dark .sec2__en, .sec2--dark .why2__lead, .sec2--dark .why2__list p { color: rgba(242, 239, 234, .66); }
.sec2--dark .why2__list li { grid-template-columns: 1fr; border-color: rgba(255,255,255,.14); }
.sec2--dark .why2__list h3 { font-size: 24px; }
.sec2--dark .why2__list h3::before { content: "0" counter(w); display: block; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; letter-spacing: .2em; color: var(--red); margin-bottom: 6px; }

.facts2 b { font-family: "Helvetica Neue", Arial, "WG Head ZH", "WG Head", sans-serif; font-weight: 300; font-size: clamp(40px, 4.4vw, 64px); }

/* scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rd, 0s); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .rv-line::after { content: ""; display: block; height: 2px; width: 0; background: var(--red); transition: width 1.2s cubic-bezier(.2,.7,.2,1) .2s; margin-top: 18px; }
  .js .rv-line.in::after { width: 64px; }
}
@media (max-width: 900px) { .biz2__col { padding: 28px 22px; } .sec2--dark .why2__list h3 { font-size: 20px; } }
.facts2 b span { font-size: inherit; letter-spacing: inherit; color: inherit; }

/* Draft 25: design-studio typography — index numbering, display type, editorial rows, asymmetric grids */
:root { --disp: "Helvetica Neue", "Arial", sans-serif; }

/* intro */
.intro2__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.intro2__top .intro2__eyebrow { margin: 0; }
.intro2__meta { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 3vw, 48px); font-family: var(--disp); font-size: 12.5px; letter-spacing: .08em; color: var(--ink); }
.intro2__meta em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
.intro2__title { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.38; letter-spacing: .04em; }
.facts2 { grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.facts2 li { border-top: 0; padding: 26px clamp(14px, 2vw, 28px) 0; border-left: 1px solid var(--rule); }
.facts2 li:first-child { border-left: 0; padding-left: 0; }
.facts2 li::before { display: none; }
.facts2 b { font-family: var(--disp); font-size: clamp(48px, 5.6vw, 86px); letter-spacing: -.03em; line-height: 1; margin-bottom: 10px; }

/* section heads: (01 / 07) index, label, large title on an asymmetric grid */
.sec2__head { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 0 clamp(24px, 4vw, 64px); align-items: start; border-top: 1px solid var(--ink); padding-top: 22px; margin-bottom: clamp(56px, 7vw, 96px); }
.sec2--dark .sec2__head { border-top-color: rgba(255, 255, 255, .5); }
.sec2__no { font-family: var(--disp); font-size: 13px; letter-spacing: .14em; color: var(--red); line-height: 1.6; }
.sec2__no::before { content: "("; } .sec2__no::after { content: " / 07)"; color: var(--mute); }
html:lang(zh-Hans) .sec2__no, .sec2__no { font-family: var(--disp); }
.sec2__en { margin: 0 0 14px; font-family: var(--disp); font-size: 13px; letter-spacing: .14em; text-transform: none; color: var(--mute); }
.sec2__title { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.42; letter-spacing: .04em; }
.sec2 { border-top: 0; }
.sec2__head--stick { grid-template-columns: 1fr; }
.sec2__head--col { grid-template-columns: 1fr; border-top: 0; padding-top: 0; }
.why2 .sec2__head--stick .sec2__no { margin-bottom: 18px; }

/* 01 business: tall cards with oversized index numbers */
.biz2 { grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.biz2__x { display: none; }
.biz2__col { border: 0; border-left: 1px solid var(--rule); padding: 40px clamp(20px, 2.4vw, 36px) 40px; min-height: 520px; }
.biz2__col:first-of-type { border-left: 0; padding-left: 0; }
.biz2__col:hover { box-shadow: none; transform: none; background: #f5f5f5; }
.biz2__num { display: block; font-family: var(--disp); font-weight: 200; font-size: clamp(72px, 7vw, 120px); line-height: .9; letter-spacing: -.04em; color: var(--ink); margin-bottom: 36px; transition: color .4s; }
.biz2__col:hover .biz2__num { color: var(--red); }
.biz2__ico { position: absolute; top: 40px; right: clamp(20px, 2.4vw, 36px); width: 48px; height: 48px; margin: 0; }
.biz2__ico .ico { width: 22px; height: 22px; }
.biz2__name { font-size: clamp(24px, 2.2vw, 32px); }
.biz2__bg { font-size: clamp(64px, 7.4vw, 120px); bottom: -18px; right: -10px; }

/* 02 journey: horizontal timeline with outline numbers */
.stair { grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; position: relative; border-top: 1px solid var(--ink); counter-reset: st; }
.stair li { margin: 0 !important; border: 0 !important; border-left: 1px solid var(--rule) !important; background: transparent; padding: 28px 20px 8px; counter-increment: st; }
.stair li:first-child { border-left: 0 !important; padding-left: 0; }
.stair li::before { content: "0" counter(st); display: block; font-family: var(--disp); font-weight: 700; font-size: clamp(56px, 5.4vw, 88px); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--red); margin-bottom: 26px; }
.stair--partner::before { -webkit-text-stroke-color: #b9b5ae !important; }
.stair li:hover { transform: none; box-shadow: none; }
.stair li:hover::before { color: var(--red); }
.stair--partner:hover::before { color: #b9b5ae !important; }
.stair__no { display: none; }
.stair h3 { font-size: 22px; margin-bottom: 10px; }

/* 03 clients: editorial rows */
.who2 { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); border-top: 1px solid var(--ink); }
.who2 li { grid-template-columns: 64px 1fr; padding: 30px 0; align-items: baseline; }
.who2 li:hover { background: transparent; }
.who2 li:hover h3 { color: var(--red-ink); transform: translateX(6px); }
.who2 h3 { font-size: clamp(20px, 1.9vw, 26px); transition: color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.who2__no { font-family: var(--disp); font-size: 14px; letter-spacing: .1em; }
.who2__no::before { content: "("; } .who2__no::after { content: ")"; }

/* 04 why (dark) */
.sec2--dark { position: relative; overflow: hidden; }
.why2__bg { position: absolute; left: -2vw; bottom: -4vw; font-family: var(--disp); font-weight: 700; font-size: clamp(120px, 20vw, 340px); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .08); pointer-events: none; white-space: nowrap; }
.why2 { position: relative; }
.sec2--dark .why2__list li { padding: 34px 0; }
.sec2--dark .why2__list h3 { font-size: clamp(22px, 2.2vw, 30px); }
.sec2--dark .why2__list h3::before { font-size: 13px; }

/* promise band: larger, more typographic */
.promise-band__title { font-size: clamp(28px, 3.4vw, 46px); }

/* case */
.case-teaser { grid-template-columns: 1.4fr 1fr; margin-top: 0; }
.case-teaser__lead { margin-top: 0; font-size: 15px; }
.case-teaser__steps li { border-color: var(--ink); }

/* works */
.mag { margin-top: 0; }
.mag__item .h3 { font-family: inherit; }

/* faq accordion */
.faq-home { grid-template-columns: 1fr 2fr; align-items: start; }
.acc { border-top: 1px solid var(--ink); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 24px; align-items: center; padding: 26px 0; }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__no { font-family: var(--disp); font-size: 13px; letter-spacing: .1em; color: var(--red); }
.acc__q { font-size: clamp(16px, 1.5vw, 19px); letter-spacing: .04em; }
.acc__item i { position: relative; width: 16px; height: 16px; }
.acc__item i::before, .acc__item i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .35s; }
.acc__item i::after { transform: rotate(90deg); }
.acc__item[open] i::after { transform: rotate(0); }
.acc__item p { margin: 0 0 26px 56px; font-size: 14px; line-height: 2.1; color: var(--mute); max-width: 40em; }

/* contact */
.contact-home__big { margin: 0 0 6px; font-family: var(--disp); font-weight: 300; font-size: clamp(64px, 10vw, 168px); line-height: .95; letter-spacing: -.04em; color: var(--ink); }
.contact-home__big::first-letter { color: var(--red); }
.contact-home .statement { font-size: clamp(22px, 2.2vw, 30px); }

@media (max-width: 900px) {
  .sec2__head { grid-template-columns: 1fr; }
  .facts2 { grid-template-columns: 1fr 1fr; }
  .facts2 li { border-left: 0; padding-left: 0; }
  .biz2 { grid-template-columns: 1fr; }
  .biz2__col { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; min-height: 0; }
  .stair { grid-template-columns: 1fr 1fr; }
  .stair li { border-left: 0 !important; padding-left: 0; border-top: 1px solid var(--rule) !important; }
  .who2 { grid-template-columns: 1fr; }
  .faq-home, .case-teaser { grid-template-columns: 1fr; }
  .intro2__meta { gap: 18px; }
}
.biz2__bg { display: none; }
.facts2 li:last-child b { white-space: nowrap; font-family: "WG Head ZH", "WG Head", var(--sans); font-size: clamp(36px, 4vw, 60px); letter-spacing: .02em; }
html:lang(ja) .facts2 li:last-child b { font-family: "WG Head", var(--sans); }

/* Draft 26: Takram-inspired — bento works with in-tile captions, drifting stroke band, statement footer */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 230px); gap: 8px; }
.bt { position: relative; display: block; overflow: hidden; background: #f5f5f5; text-decoration: none; }
.bt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; }
.bt:hover img { transform: scale(1.045); }
.bt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 38%); opacity: .85; transition: opacity .5s; }
.bt:hover::after { opacity: 1; }
.bt__cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: #fff; display: grid; gap: 2px; }
.bt__cap b { font-weight: 400; font-size: 13px; letter-spacing: .04em; line-height: 1.5; }
.bt__cap em { font-style: normal; font-size: 11px; letter-spacing: .08em; opacity: .8; }
.b-lg { grid-column: span 2; grid-row: span 2; }
.b-lg .bt__cap b { font-size: 16px; }
.b-wd { grid-column: span 2; }
.bento__all { text-align: right; margin: 18px 0 0; font-size: 13px; letter-spacing: .08em; }
.bento__all a { color: var(--mute); text-decoration: none; } .bento__all a:hover { color: var(--red-ink); }

.stroke-band { position: relative; overflow: hidden; background: #fff; }
.stroke-band__art { position: relative; height: clamp(240px, 32vw, 460px); background: #ecebe8; overflow: hidden; }
.stk { position: absolute; inset: -10% -5%; width: 110%; height: 120%; }
.stk g { transform-box: view-box; transform-origin: 50% 50%; }
.stk__a { transform: translate(-6px, 4px) scale(1.9) rotate(-6deg); }
.stk__b { transform: translate(12px, 10px) scale(1.7) rotate(8deg); }
.stk__c { transform: translate(-2px, -8px) scale(1.8) rotate(-4deg); opacity: .92; }
@media (prefers-reduced-motion: no-preference) {
  .stk__a { animation: stkA 18s ease-in-out infinite alternate; }
  .stk__b { animation: stkB 22s ease-in-out infinite alternate; }
  .stk__c { animation: stkC 26s ease-in-out infinite alternate; }
  @keyframes stkA { to { transform: translate(6px, -2px) scale(2.05) rotate(4deg); } }
  @keyframes stkB { to { transform: translate(-4px, 14px) scale(1.85) rotate(-6deg); } }
  @keyframes stkC { to { transform: translate(8px, -14px) scale(1.95) rotate(6deg); } }
}
.stroke-band__copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(80px, 10vw, 140px); align-items: start; }
.stroke-band__title { margin: 0; font-size: clamp(36px, 4.6vw, 64px); letter-spacing: .04em; line-height: 1.3; }
.stroke-band__side p { margin: 0 0 18px; font-size: 14.5px; line-height: 2.1; color: var(--mute); }
.stroke-band__info { font-size: 13px !important; }

.foot2 { border-top: 1px solid var(--rule); padding-top: clamp(64px, 8vw, 110px); }
.foot2 .wrap { display: block; padding-top: 0; padding-bottom: 28px; }
.foot2__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 110px); }
.foot2__line { margin: 22px 0 6px; font-size: clamp(18px, 1.8vw, 24px); color: var(--ink); letter-spacing: .04em; }
.foot2__sub { margin: 0; font-size: 12.5px; color: var(--mute); letter-spacing: .06em; }
.foot2 .foot__brand { margin: 0; }
.gt__h { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.gt ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.gt li { border-bottom: 1px solid var(--rule); }
.gt a { display: grid; grid-template-columns: 7em 1fr 28px; align-items: center; gap: 12px; padding: 14px 0; text-decoration: none; color: var(--ink); font-size: 14px; }
.gt__v { color: var(--mute); font-size: 13px; }
.gt i { font-style: normal; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 12px; transition: background .3s, color .3s, border-color .3s; }
.gt a:hover i { background: var(--red); border-color: var(--red); color: #fff; }
.gt a:hover .gt__k { color: var(--red-ink); }
.foot2__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 28px; border-top: 1px solid var(--rule); padding-top: 22px; }
.foot2__bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot2__bottom nav a { text-decoration: none; color: var(--mute); font-size: 12.5px; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .b-lg { grid-row: span 2; }
  .stroke-band__copy, .foot2__top { grid-template-columns: 1fr; }
  .gt a { grid-template-columns: 6em 1fr 28px; }
}
.stk { inset: 0; width: 100%; height: 100%; }
.stk__a { transform: translate(-18px, -6px) scale(1.25) rotate(-8deg); }
.stk__b { transform: translate(14px, -16px) scale(1.15) rotate(10deg); }
.stk__c { transform: translate(16px, 4px) scale(1.2) rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes stkA { to { transform: translate(-8px, -2px) scale(1.35) rotate(2deg); } }
  @keyframes stkB { to { transform: translate(6px, -10px) scale(1.25) rotate(-2deg); } }
  @keyframes stkC { to { transform: translate(22px, -4px) scale(1.3) rotate(6deg); } }
}
.stk { position: absolute; inset: auto; height: auto; }
.stk__a { width: 64%; left: -6%; top: 8%; transform: rotate(-6deg); }
.stk__b { width: 52%; right: -4%; top: -22%; transform: rotate(8deg); }
.stk__c { width: 30%; left: 46%; top: 30%; transform: rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes stkA { to { transform: translate(4%, -6%) rotate(2deg); } }
  @keyframes stkB { to { transform: translate(-5%, 8%) rotate(-3deg); } }
  @keyframes stkC { to { transform: translate(8%, -10%) rotate(10deg); } }
}

/* Draft 27: bento tiles play like Takram's — cross-fading slides with slow zoom, progress dots */
.bt img { opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 7s linear; }
.bt img.on { opacity: 1; transform: scale(1); }
.bt:hover img.on { transform: scale(1.04); }
.bt__dots { position: absolute; right: 12px; bottom: 14px; z-index: 1; display: flex; gap: 4px; }
.bt__dots i { width: 14px; height: 2px; background: rgba(255,255,255,.45); overflow: hidden; position: relative; }
.bt__dots i.on::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dotfill var(--dur, 4.5s) linear forwards; }
@keyframes dotfill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .bt img { transition: none; } .bt__dots { display: none; } }

/* Draft 28: animated IP mascots (cut-outs) */
.ipx { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 100%, #fde9df 0%, #f5f5f5 55%, #f5f5f5 100%); display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding-bottom: 12%; overflow: hidden; }
.ipx__c { position: relative; width: 36%; }
.ipx__c img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.ipx__sh { position: absolute; left: 18%; right: 18%; bottom: -6%; height: 9%; border-radius: 50%; background: rgba(120, 50, 30, .18); filter: blur(3px); }
.ipx__an { transform-origin: 50% 100%; }
.ipx__jing { transform-origin: 50% 2%; }
.ipx__ring { position: absolute; right: 22%; top: 18%; width: 18%; aspect-ratio: 1; border: 2px solid rgba(222, 85, 71, .55); border-radius: 50%; opacity: 0; }
.bt--ip::after { background: linear-gradient(to top, rgba(0,0,0,.4), rgba(0,0,0,0) 30%); }
.ipx-hero { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--rule); overflow: hidden; }
.ipx--lg .ipx__c { width: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .ipx__an { animation: ip-hop 1.6s cubic-bezier(.3,.0,.3,1) infinite; }
  .ipx__an .ipx__sh { animation: ip-sh 1.6s cubic-bezier(.3,.0,.3,1) infinite; }
  .ipx__jing img { transform-origin: 50% 3%; animation: ip-swing 2.4s ease-in-out infinite; }
  .ipx__ring { animation: ip-ring 2.4s ease-out infinite; }
  .ipx__ring--2 { animation-delay: 1.2s; }
  @keyframes ip-hop {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    12% { transform: translateY(0) scale(1.06, .92); }
    40% { transform: translateY(-16%) scale(.97, 1.04) rotate(-3deg); }
    62% { transform: translateY(0) scale(1.05, .94) rotate(0); }
    76% { transform: translateY(-3%) scale(1, 1); }
  }
  @keyframes ip-sh { 0%, 100%, 62% { transform: scaleX(1); opacity: 1; } 40% { transform: scaleX(.6); opacity: .5; } }
  @keyframes ip-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
  @keyframes ip-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
  .bt--ip:hover .ipx__an { animation-duration: .9s; }
  .bt--ip:hover .ipx__jing img { animation-duration: 1.1s; }
}
.bt .ipx img { position: relative; inset: auto; opacity: 1; transform: none; transition: none; width: 100%; height: auto; object-fit: contain; }
.bt--ip:hover .ipx img { transform: none; }
.bt .ipx { padding-bottom: 20%; }

/* Draft 29: more living tiles — まるぽん greets, 天海 stickers take turns, 白酒 sun breathes */
.mpx, .tkx, .mtx { position: absolute; inset: 0; overflow: hidden; }
.bt .mpx img, .bt .tkx img, .bt .mtx img, .ipx-hero img { opacity: 1; transform: none; transition: none; }
.mpx { background: #f5f5f5; display: grid; place-items: center; }
.mpx__stage { position: relative; width: 82%; aspect-ratio: 720 / 330; margin-top: -8%; }
.bt .mpx__stage img, .mpx__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.mpx__stage img:first-child { opacity: 1; }
.tkx { background: #f5f5f5; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); padding: 4% 6% 14%; gap: 2%; }
.tkx span { display: grid; place-items: center; }
.bt .tkx img, .tkx img { position: relative; inset: auto; width: 92%; height: auto; max-height: 100%; object-fit: contain; }
.mtx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.mtx__sun { position: absolute; left: 63%; top: 30%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 120, 80, .55), rgba(255, 120, 80, 0) 65%); mix-blend-mode: multiply; }
.mtx__haze { position: absolute; left: -20%; right: -20%; top: 34%; height: 18%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(8px); }
.scene--lg.tkx { padding: 6% 10% 8%; }
@media (prefers-reduced-motion: no-preference) {
  .mpx__stage img { animation: mp-pop 9s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: calc(var(--k) * 1.5s); }
  .mpx__stage img:first-child { opacity: 0; }
  @keyframes mp-pop {
    0% { opacity: 0; transform: translateY(14%) scale(.7); }
    4% { opacity: 1; transform: translateY(0) scale(1.06); }
    7% { transform: scale(1) rotate(0); }
    10% { transform: rotate(-2deg); } 13% { transform: rotate(2deg); }
    16% { opacity: 1; transform: rotate(0) scale(1); }
    18%, 100% { opacity: 0; transform: translateY(-6%) scale(.96); }
  }
  .tkx span { animation: tk-jump 8s ease-in-out infinite; animation-delay: calc(var(--k) * 1s); }
  @keyframes tk-jump {
    0%, 9%, 100% { transform: none; }
    2% { transform: translateY(6%) scale(1.08, .9); }
    4.5% { transform: translateY(-16%) scale(.95, 1.08) rotate(-6deg); }
    7% { transform: translateY(0) scale(1.04, .96) rotate(3deg); }
  }
  .mtx img { animation: mt-push 16s ease-in-out infinite alternate; transform-origin: 66% 40%; }
  .bt .mtx img { animation: mt-push 16s ease-in-out infinite alternate; }
  .mtx__sun { animation: mt-sun 4.5s ease-in-out infinite; }
  .mtx__haze { animation: mt-haze 12s linear infinite; }
  @keyframes mt-push { from { transform: scale(1); } to { transform: scale(1.12); } }
  @keyframes mt-sun { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
  @keyframes mt-haze { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
}
.tkx { padding: 3% 6% 16%; row-gap: 4%; }
.tkx span { min-height: 0; height: 100%; }
.bt .tkx img, .tkx img { width: auto; height: 100%; max-width: 100%; }
.tkx { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tkx span { position: relative; display: block; }
.bt .tkx img, .tkx img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* Draft 30: まるぽん on transparent cut-outs; 白酒 visual shown whole with a stronger sun */
.mpx { background: radial-gradient(110% 90% at 50% 100%, #e7f1ea 0%, #f4f6f1 55%, #f5f5f5 100%); }
.mtx { background: #fff; display: grid; place-items: center; }
.mtx__box { position: relative; width: 100%; aspect-ratio: 1600 / 879; max-height: 100%; }
.bt .mtx__box { width: auto; height: 100%; max-width: 100%; }
.bt .mtx img, .mtx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: none !important; transform: none !important; opacity: 1; }
.mtx__sun { left: 63.4%; top: 41%; width: 34%; translate: -50% -50%; background: radial-gradient(circle, rgba(255, 70, 40, .55) 0%, rgba(255, 110, 70, .28) 35%, rgba(255, 140, 90, 0) 68%); mix-blend-mode: multiply; }
.mtx__rays { position: absolute; left: 63.4%; top: 41%; width: 48%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 120, 70, .22) 0deg 5deg, rgba(255, 120, 70, 0) 5deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%); mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%); mix-blend-mode: multiply; }
.mtx__haze { top: 46%; height: 16%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); filter: blur(6px); }
.mtx__haze--2 { top: 62%; height: 12%; }
@media (prefers-reduced-motion: no-preference) {
  .mtx__sun { animation: mt-sun2 3.6s ease-in-out infinite; }
  .mtx__rays { animation: mt-rays 24s linear infinite, mt-raysop 3.6s ease-in-out infinite; }
  .mtx__haze { animation: mt-haze 9s ease-in-out infinite alternate; }
  .mtx__haze--2 { animation: mt-haze 13s ease-in-out infinite alternate-reverse; }
  @keyframes mt-sun2 { 0%, 100% { transform: scale(.75); opacity: .55; } 50% { transform: scale(1.2); opacity: 1; } }
  @keyframes mt-rays { to { rotate: 360deg; } }
  @keyframes mt-raysop { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes mt-haze { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
}

/* Draft 31: real browsing videos in tiles and on detail pages */
.bt video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.bt__play { position: absolute; top: 12px; left: 14px; z-index: 1; font-size: 10.5px; letter-spacing: .14em; color: #fff; background: rgba(31,31,31,.55); padding: 3px 8px; border-radius: 20px; }
.bt__play { color: #fff; } .bt__play::first-letter { color: #ff6b5a; }
.vid-hero { margin-bottom: 28px; border: 1px solid var(--rule); background: #f5f5f5; line-height: 0; }
.vid-hero video { width: 100%; height: auto; display: block; }
.bt--video { background: #eef0f3; }
.bt video { object-fit: contain; object-position: center; }
.bt--video::after { background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 26%); }

/* Draft 32: showreel — website recordings shown whole inside a browser frame */
.reel { display: grid; grid-template-columns: 2.1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.reel__win { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 60px -30px rgba(40, 30, 20, .35); border: 1px solid var(--rule); line-height: 0; }
.reel__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f5f5f5; border-bottom: 1px solid var(--rule); line-height: 1; }
.reel__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6d3cd; }
.reel__bar i:first-child { background: var(--red); }
.reel__bar span { margin: 0 auto; font-size: 11px; color: var(--mute); letter-spacing: .04em; background: #fff; padding: 3px 14px; border-radius: 12px; transform: translateX(-20px); }
.reel__vid { width: 100%; height: auto; display: block; }
.reel__en { margin: 0 0 10px; font-family: var(--disp); font-size: 12px; letter-spacing: .16em; color: var(--red-ink); }
.reel__txt h3 { margin: 0 0 14px; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: .04em; line-height: 1.5; }
.reel__txt p { margin: 0 0 22px; font-size: 14px; line-height: 2; color: var(--mute); }
.reel__txt .link-arrow { margin-top: 0; }
@media (max-width: 900px) { .reel { grid-template-columns: 1fr; } }

/* ---- draft 33: switchable browser reel ---- */
.reel__win { position: relative; }
.reel__stage { position: relative; aspect-ratio: 1440 / 900; background: #fff; }
.reel__stage .reel__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s ease; }
.reel__stage .reel__vid.is-on { opacity: 1; }
.reel__prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }
.reel__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.reel__list li { border-top: 1px solid var(--rule); padding: 14px 0; }
.reel__list li:last-child { border-bottom: 1px solid var(--rule); }
.reel__list button { all: unset; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; column-gap: 6px; width: 100%; }
.reel__list span { font-family: var(--disp); font-size: 11px; letter-spacing: .12em; color: var(--mute); padding-top: 5px; grid-row: span 2; }
.reel__list b { font-weight: 400; font-size: 15px; letter-spacing: .04em; line-height: 1.6; color: var(--mute); transition: color .3s; }
.reel__list em { font-style: normal; font-size: 12px; color: var(--mute); }
.reel__list .link-arrow { display: none; margin: 10px 0 0 40px; font-size: 13px; }
.reel__list li.is-on b { color: var(--ink); }
.reel__list li.is-on span { color: var(--red); }
.reel__list li.is-on .link-arrow { display: inline-block; }
.reel__list button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ---- draft 34: work strip on page heroes (same language as the homepage wall) ---- */
.page-hero--strip { padding-top: 0; border-bottom: 0; }
.pstrip { position: relative; height: clamp(300px, 34vw, 460px); overflow: hidden; margin-bottom: clamp(36px, 4vw, 56px); }
.pstrip--1 { height: clamp(170px, 17vw, 240px); }
.pstrip .wall__rows { position: absolute; inset: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.pstrip .wall__row { height: calc((100% - 28px) / 2); }
.pstrip--1 .wall__row { height: calc(100% - 28px); }
.pstrip__fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,.85) 14%, rgba(255,255,255,0) 42%),
              linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 8%, rgba(255,255,255,0) 92%, #fff 100%); }
.page-hero--strip .h1 { margin-top: 4px; }
@media (max-width: 800px) {
  .pstrip { height: 240px; }
  .pstrip--1 { height: 150px; }
  .pstrip .wall__rows { gap: 10px; inset: 10px 0 0; }
  .pstrip .wall__row { height: calc((100% - 20px) / 2); }
}

/* ---- draft 35: intro — 経営 × ブランド × デザイン with live work chips (replaces the stats row) ---- */
.intro2__eq { margin: 0 0 clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(14px, 2vw, 32px); row-gap: 14px; font-weight: 400; line-height: 1; }
.intro2__w { display: inline-flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); }
.intro2__w b { font-weight: 400; font-size: clamp(44px, 7.4vw, 112px); letter-spacing: .02em; color: var(--ink); }
.intro2__chip.bt { position: relative; display: inline-block; flex: none; width: clamp(84px, 10vw, 156px); height: clamp(52px, 6.2vw, 96px); border-radius: 999px; overflow: hidden; background: #eee; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -14px rgba(0,0,0,.3); }
.intro2__chip.bt img { object-position: left top; }
.intro2__x { font-style: normal; font-family: var(--disp); font-weight: 200; font-size: clamp(30px, 4.4vw, 68px); color: var(--red); line-height: 1; }
.intro2 .intro2__title { font-size: clamp(20px, 2vw, 28px); line-height: 1.8; letter-spacing: .06em; color: var(--ink); max-width: 18em; }
.intro2__grid { align-items: start; border-top: 1px solid var(--ink); padding-top: clamp(24px, 3vw, 36px); }
.intro2 .intro2__side p { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .intro2__w .intro2__chip { clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(var(--rd, 0s) + .35s); }
  .intro2__w.in .intro2__chip { clip-path: inset(0 0 0 0 round 999px); }
}
@media (max-width: 700px) {
  .intro2__eq { column-gap: 10px; }
  .intro2__w b { font-size: 40px; }
  .intro2__chip.bt { width: 64px; height: 40px; }
  .intro2__x { font-size: 26px; }
}
.intro2__eq { flex-wrap: nowrap; column-gap: clamp(12px, 1.6vw, 24px); }
.intro2__w b { font-size: clamp(36px, 5.6vw, 88px); white-space: nowrap; }
html:lang(ja) .intro2__w b { font-size: clamp(30px, 3.6vw, 56px); }
.intro2__chip.bt { width: clamp(70px, 8vw, 120px); height: clamp(44px, 5vw, 74px); }
.intro2__x { font-size: clamp(26px, 3.4vw, 52px); }
.intro2 .intro2__title { max-width: none; white-space: nowrap; }
@media (max-width: 900px) {
  .intro2__eq { flex-wrap: wrap; }
  .intro2 .intro2__title { white-space: normal; }
}
@media (max-width: 700px) {
  .intro2__eq { display: grid; grid-template-columns: auto 1fr; align-items: center; row-gap: 6px; column-gap: 14px; }
  .intro2__w { grid-column: 2; }
  .intro2__x { grid-column: 1; font-size: 22px; }
  .intro2__eq > .intro2__w:first-child { grid-column: 2; }
  .intro2__w b { font-size: 44px; }
  .intro2__chip.bt { width: 84px; height: 48px; }
  .intro2 .intro2__title { font-size: 17px; letter-spacing: .02em; }
}

/* ---- draft 35: homepage sections redesigned — image-led, editorial type, fewer numbers ---- */
.intro3 { border-top: 1px solid var(--ink); padding-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 6vw, 96px); align-items: end; }
.intro3__st { margin: 0; font-size: clamp(20px, 2.05vw, 29px); line-height: 2; letter-spacing: .05em; color: var(--ink); max-width: 30em; }
.intro3__st em { font-style: normal; color: var(--red-ink); background: linear-gradient(transparent 82%, rgba(222, 85, 71, .22) 82%); }
.intro3__links { margin: 0; display: flex; flex-direction: column; gap: 14px; white-space: nowrap; }
.intro3__links .link-arrow { margin: 0; }

.biz3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.biz3__col { display: flex; flex-direction: column; }
.biz3__img { aspect-ratio: 16 / 10; border-radius: 3px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 30px -18px rgba(0,0,0,.3); }
.biz3__en { margin: 0 0 8px; display: flex; gap: 12px; align-items: baseline; font-family: var(--disp); font-size: 12px; letter-spacing: .22em; color: var(--red-ink); text-transform: uppercase; }
.biz3__en span { color: var(--mute); letter-spacing: .1em; }
.biz3__name { margin: 0 0 10px; font-size: clamp(21px, 1.9vw, 26px); letter-spacing: .06em; }
.biz3__lead { margin: 0 0 18px; font-size: 14px; line-height: 2; color: var(--mute); flex: 1; }
.biz3__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.biz3__links .link-arrow { margin: 0; }

.path3 { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.path3::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--ink); opacity: .35; }
.path3__s { position: relative; padding: 36px clamp(10px, 1.6vw, 24px) 0 0; }
.path3__dot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 1px solid var(--ink); box-sizing: border-box; }
.path3__no { margin: 0 0 6px; font-family: var(--disp); font-size: 11.5px; letter-spacing: .2em; color: var(--mute); }
.path3__s h3 { margin: 0 0 8px; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .06em; }
.path3__s p:not(.path3__no) { margin: 0; font-size: 13px; line-height: 1.9; color: var(--mute); }
.path3__s small { display: inline-block; margin-top: 12px; font-size: 11.5px; letter-spacing: .06em; padding: 2px 10px; border-radius: 20px; }
.path3--p .path3__dot { border-style: dashed; }
.path3--p small { border: 1px dashed #b9b5ae; color: var(--mute); }
.path3--c .path3__dot { background: var(--red); border-color: var(--red); transform: scale(1.4); box-shadow: 0 0 0 8px rgba(222, 85, 71, .12); }
.path3--c .path3__no, .path3--c h3 { color: var(--red-ink); }
.path3--c small { background: var(--red); color: #fff; }

.who3 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); }
.who3 li { flex: 1 1 33.33%; min-width: 260px; box-sizing: border-box; padding: 26px 28px 26px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.who3 b { font-weight: 400; font-size: clamp(19px, 1.75vw, 24px); letter-spacing: .04em; line-height: 1.5; transition: color .3s; }
.who3 small { font-size: 13px; color: var(--mute); }
.who3 li:hover b { color: var(--red-ink); }

.why3__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.why3__head .sec2__head { margin-bottom: 0; }
.why3__lead { margin: 0; font-size: 14.5px; line-height: 2.1; color: rgba(242, 239, 234, .66); }
.why3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.22); }
.why3 li { padding: 26px clamp(12px, 1.6vw, 24px) 8px 0; }
.why3 li + li { padding-left: clamp(12px, 1.6vw, 24px); border-left: 1px solid rgba(255,255,255,.12); }
.why3 span { font-family: var(--disp); font-size: 12px; letter-spacing: .2em; color: var(--red); }
.why3 h3 { margin: 14px 0 10px; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: .05em; color: #fff; }
.why3 p { margin: 0; font-size: 13px; line-height: 2; color: rgba(242, 239, 234, .62); }

@media (max-width: 900px) {
  .intro3 { grid-template-columns: 1fr; row-gap: 24px; }
  .intro3__links { flex-direction: row; gap: 24px; }
  .biz3 { grid-template-columns: 1fr; gap: 40px; }
  .path3 { grid-template-columns: 1fr; }
  .path3::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .path3__s { padding: 0 0 28px 40px; }
  .who3 li { flex-basis: 100%; }
  .why3__head { grid-template-columns: 1fr; }
  .why3 { grid-template-columns: 1fr; }
  .why3 li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
}
.biz3__img::after, .biz3__img::before { display: none !important; }
.why3__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.why3__head .sec2__title { white-space: nowrap; }
@media (max-width: 900px) { .why3__head .sec2__title { white-space: normal; } }
@media (min-width: 901px) { .promise-band__list { grid-template-columns: repeat(5, 1fr) !important; } }

/* draft 36: smaller 经营 × 品牌 × 设计 line */
@media (min-width: 801px) {
  .intro2__w b { font-size: clamp(30px, 3.7vw, 56px); }
  html:lang(ja) .intro2__w b { font-size: clamp(26px, 2.8vw, 42px); }
  .intro2__chip.bt { width: clamp(60px, 5.4vw, 84px); height: clamp(36px, 3.3vw, 50px); }
  .intro2__x { font-size: clamp(20px, 2.2vw, 32px); }
  .intro2__eq { margin-bottom: clamp(32px, 4vw, 52px); }
}
.intro3__st { font-size: clamp(16px, 1.45vw, 20px); line-height: 2.1; max-width: 34em; }
.intro3__st em { white-space: nowrap; }
.intro2__chip.bt img { object-position: center; }
.intro2__chip.bt::after, .intro2__chip.bt::before { display: none !important; }

/* ---- draft 37: biz images whole, project ticker, swimlane journey ---- */
.biz3__img { background: #fff; }
.biz3__img img { object-fit: contain !important; object-position: center !important; }
.biz3__img img.on { transform: none !important; }

.tick { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #fff; padding: 22px 0; }
.tick__track { display: flex; width: max-content; }
.tick__set { display: flex; gap: clamp(28px, 3.4vw, 52px); padding-right: clamp(28px, 3.4vw, 52px); }
.tick__it { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.tick__img { width: 84px; height: 50px; border-radius: 999px; overflow: hidden; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 18px -12px rgba(0,0,0,.3); }
.tick__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tick__t { display: flex; flex-direction: column; line-height: 1.45; }
.tick__t b { font-weight: 400; font-size: 14.5px; letter-spacing: .04em; color: var(--ink); }
.tick__t em { font-style: normal; font-size: 11.5px; letter-spacing: .1em; color: var(--red-ink); }
@media (prefers-reduced-motion: no-preference) { .tick__track { animation: mq 70s linear infinite; } .tick:hover .tick__track { animation-play-state: paused; } @keyframes mq { to { transform: translateX(-50%); } } }

.lane { margin: 0 0 44px; }
.lane__cols, .lane__row { display: grid; grid-template-columns: minmax(150px, 1.15fr) repeat(5, minmax(0, 1fr)); column-gap: 8px; align-items: center; }
.lane__cols { border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.lane__cols p { margin: 0; font-family: "WG Head ZH", "WG Head", var(--sans); font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .05em; }
html:lang(ja) .lane__cols p { font-family: "WG Head", var(--sans); }
.lane__cols p span { display: block; font-family: var(--disp); font-size: 11px; letter-spacing: .2em; color: var(--mute); margin-bottom: 4px; }
.lane__cols p.is-core, .lane__cols p.is-core span { color: var(--red-ink); }
.lane__row { min-height: 96px; border-bottom: 1px solid var(--rule); }
.lane__who { grid-column: 1 / 2; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.lane__who b { font-weight: 400; font-size: 14px; letter-spacing: .04em; }
.lane__who em { font-style: normal; font-size: 11.5px; color: var(--mute); }
.lane__bar { grid-row: 1; height: 44px; border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: 13px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.lane__bar--us { background: rgba(222, 85, 71, .1); color: var(--red-ink); }
.lane__bar--core { background: linear-gradient(90deg, var(--red) 0%, var(--red) 34%, rgba(222, 85, 71, .55) 100%); color: #fff; justify-content: space-between; }
.lane__bar--core b { font-weight: 500; }
.lane__bar--core i { font-style: normal; opacity: .7; }
.lane__bar--pt { border: 1px dashed #a9a49b; color: var(--mute); background: #fff; }
.lane__bar--pt2 { border: 1px dashed #c9c5bd; color: var(--mute); }
.lane__foot { margin: 18px 0 0; text-align: right; }
.lane__win { font-size: 13px; letter-spacing: .1em; color: var(--mute); }
.lane__win::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--red); vertical-align: middle; margin-right: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .lane .lane__bar { clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
  .lane.in .lane__bar { clip-path: inset(0 0 0 0 round 999px); }
  .lane.in .lane__bar--core { transition-delay: .35s; } .lane.in .lane__bar--pt { transition-delay: .2s; } .lane.in .lane__bar--pt2 { transition-delay: .8s; }
}
@media (max-width: 900px) {
  .lane { overflow-x: auto; }
  .lane__cols, .lane__row { min-width: 820px; }
}
.lane__bar--pt, .lane__bar--us { white-space: normal; line-height: 1.4; height: auto; min-height: 44px; padding: 8px 16px; font-size: 12.5px; border-radius: 22px; }

/* ---- draft 38: business as an editorial index, tighter gap after intro ---- */
.intro2 { padding-bottom: clamp(28px, 4vw, 56px); }
#business.sec2 { padding-top: clamp(40px, 5vw, 72px); }
.biz4 { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.biz4__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; column-gap: clamp(24px, 4vw, 64px); align-items: start; padding: clamp(28px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--rule); transition: background .4s; }
.biz4__en { margin: 0; display: flex; align-items: baseline; gap: 16px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: clamp(44px, 5.6vw, 84px); line-height: .95; letter-spacing: -.01em; color: var(--ink); transition: color .4s, transform .6s cubic-bezier(.2,.7,.2,1); }
.biz4__en span { font-family: var(--disp); font-size: 12px; letter-spacing: .2em; color: var(--red); transform: translateY(-2.6em); }
.biz4__body h3 { margin: 4px 0 12px; font-size: clamp(20px, 1.8vw, 25px); letter-spacing: .06em; }
.biz4__body p { margin: 0; font-size: 14px; line-height: 2; color: var(--mute); max-width: 32em; }
.biz4__body .biz4__tags { margin-top: 14px; font-size: 12.5px; letter-spacing: .08em; color: var(--red-ink); }
.biz4__links { margin: 6px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; white-space: nowrap; }
.biz4__links .link-arrow { margin: 0; }
.biz4__row:hover .biz4__en { color: var(--red); transform: translateX(10px); }
@media (max-width: 900px) {
  .biz4__row { grid-template-columns: 1fr; row-gap: 16px; }
  .biz4__links { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
}
@media (min-width: 901px) { .biz4__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 150px; } }

/* ---- draft 39: fewer rules site-wide; Why-us as a keyword manifesto ---- */
.sec2__head { border-top: 0; padding-top: 0; }
.intro2__top { border-bottom: 0; padding-bottom: 0; }
.intro3 { border-top: 0; padding-top: 0; }
.biz4 { border-top: 0; }
.biz4__row { border-bottom: 0; padding: clamp(22px, 2.6vw, 34px) 0; }
.who3 { border-top: 0; row-gap: 8px; }
.who3 li { border-bottom: 0; padding: 18px 28px 18px 0; }
.lane__cols { border-bottom: 0; }
.lane__row { border-bottom: 0; min-height: 76px; }
.lane__row + .lane__row { margin-top: 4px; }
.tick { border-top: 0; border-bottom: 0; background: #f5f5f5; }
.contact-home { border-top: 0; }
.sec2 { border-top: 0; }

.sec2--dark { position: relative; overflow: hidden; }
.why4 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.why4__head { position: sticky; top: 120px; }
.why4__eyebrow { margin: 0 0 22px; display: flex; gap: 14px; align-items: baseline; font-family: var(--disp); font-size: 12px; letter-spacing: .24em; color: rgba(242, 239, 234, .6); }
.why4__eyebrow span { color: var(--red); }
.why4__title { margin: 0 0 26px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.4; letter-spacing: .05em; color: #fff; }
.why4__lead { margin: 0; font-size: 14.5px; line-height: 2.1; color: rgba(242, 239, 234, .62); max-width: 24em; }
.why4__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 30px); }
.why4__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.why4__no { font-family: var(--disp); font-size: 12px; letter-spacing: .16em; color: var(--red); }
.why4__kw { display: block; font-weight: 400; font-size: clamp(46px, 6vw, 92px); line-height: 1.05; letter-spacing: .04em; color: #f2efea; transition: color .4s, transform .6s cubic-bezier(.2,.7,.2,1); }
.why4__list p { grid-column: 2; margin: 10px 0 0; font-size: 14px; line-height: 2; color: rgba(242, 239, 234, .58); max-width: 30em; }
.why4__list li:hover .why4__kw { color: var(--red); transform: translateX(10px); }
@media (max-width: 900px) {
  .why4 { grid-template-columns: 1fr; }
  .why4__head { position: static; }
}
/* fewer rules, part 2 */
.promise-band__list { border-top: 0; row-gap: 14px; }
.promise-band__list li { border-bottom: 0; padding: 0 16px 0 0; }
.reel__list li, .reel__list li:last-child { border: 0; padding: 10px 0; }
.acc { border-top: 0; }
.acc__item { border-bottom: 0; background: #f5f5f5; margin-bottom: 8px; padding: 0 22px; border-radius: 4px; }
.acc__item summary { padding: 22px 0; }
.faq dd, .acc dd { border-bottom: 0; }
.case-teaser__steps li { border: 0; padding: 4px 14px 4px 0; }
.foot2 { border-top: 0; }
.foot2__bottom { border-top: 0; }
.gt ul { border-top: 0; }
.gt li { border-bottom: 0; }
.gt a { padding: 10px 0; }
.page-hero { border-bottom: 0; }

/* draft 40: Why-us on 朱红; promise band flips to white so two reds don't touch */
.sec2--dark { background: var(--red); color: #fff; }
.sec2--dark .why4__eyebrow { color: rgba(255,255,255,.75); }
.sec2--dark .why4__eyebrow span, .sec2--dark .why4__no { color: #fff; opacity: .85; }
.sec2--dark .why4__title, .sec2--dark .why4__kw { color: #fff; }
.sec2--dark .why4__lead, .sec2--dark .why4__list p { color: rgba(255,255,255,.82); }
.sec2--dark .why4__list li:hover .why4__kw { color: #1d1c1b; }
.promise-band { background: #fff; color: var(--ink); }
.promise-band__mark img { filter: none; opacity: 1; }
.promise-band__eyebrow { color: var(--red-ink); opacity: 1; }
.promise-band__list li::before { color: var(--red-ink); opacity: 1; }
.promise-band__links a { color: var(--ink); border-bottom-color: var(--red); }

/* draft 41: journey, simplified */
.flow { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.4vw, 36px); }
.flow__no { display: block; font-family: var(--disp); font-size: 12px; letter-spacing: .2em; color: var(--mute); margin-bottom: 14px; }
.flow__s h3 { margin: 0 0 8px; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: .06em; }
.flow__s p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--mute); }
.flow__s small { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .06em; color: var(--mute); }
.flow__s.is-pt h3, .flow__s.is-pt .flow__no { color: #a39e96; }
.flow__s.is-core .flow__no, .flow__s.is-core h3, .flow__s.is-core small { color: var(--red-ink); }
.flow__s.is-core small::before { content: "●"; font-size: 8px; margin-right: 6px; vertical-align: 2px; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

/* draft 42: no sequence numbers anywhere */
.sec2__no, .flow__no, .why4__no, .why4__eyebrow span, .biz4__en span, .reel__list button > span, .acc__no,
.step__no, .stage__no, .chapter__no, .stair__no, .who2__no, .biz2__num { display: none !important; }
.case-teaser__steps li::before, .promise-band__list li::before, .why li::before, .why2__list h3::before, .stair li::before { content: none !important; display: none !important; }
.sec2__head { grid-template-columns: 1fr !important; }
.intro3 { grid-template-columns: 1fr; }
.acc__item summary { grid-template-columns: 1fr 24px; }
.why4__list li { grid-template-columns: 1fr; }
.why4__list p { grid-column: 1; }
.reel__list button { grid-template-columns: 1fr; }
.reel__list .link-arrow { margin-left: 0; }

/* draft 43: compact business, more air after intro */
.intro2 { padding-bottom: clamp(72px, 9vw, 130px); }
#business.sec2 { padding-top: clamp(56px, 6vw, 90px); padding-bottom: clamp(72px, 8vw, 110px); }
#business .sec2__head { margin-bottom: clamp(36px, 4vw, 56px); }
.biz4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.biz4__row, .biz4__row:hover { display: flex; flex-direction: column; padding: 0; }
@media (min-width: 901px) { .biz4__row { grid-template-columns: none; } }
.biz4__en { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; margin-bottom: 14px; color: var(--red); }
.biz4__row:hover .biz4__en { transform: none; }
.biz4__body h3 { margin: 0 0 10px; font-size: clamp(18px, 1.6vw, 21px); }
.biz4__body p { font-size: 13.5px; line-height: 1.95; }
.biz4__body { flex: 1; }
.biz4__links { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
@media (max-width: 900px) { .biz4 { grid-template-columns: 1fr; } }
.intro2__top { margin-bottom: clamp(64px, 7.5vw, 110px); }

/* draft 44: no English eyebrows / underlines, smaller titles, even rhythm */
.sec2__en, .why4__eyebrow, .promise-band__eyebrow, .reel__en { display: none !important; }
.rv-line::after, .js .rv-line::after { display: none !important; content: none !important; }
.sec2__title, .faq-home .sec2__title { font-size: clamp(22px, 2.3vw, 30px) !important; line-height: 1.55; }
.why4__title { font-size: clamp(24px, 2.5vw, 34px); }
.promise-band__title { font-size: clamp(22px, 2.4vw, 32px) !important; }
:root { --sec-y: clamp(80px, 9vw, 128px); }
.sec2, #business.sec2 { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }
.intro2 { padding-bottom: var(--sec-y) !important; }
.promise-band { padding: var(--sec-y) 0 !important; }
.sec2__head, #business .sec2__head { margin-bottom: clamp(36px, 4vw, 56px) !important; }
.flow { margin-bottom: 36px; }
.stroke-band__title { font-size: clamp(28px, 3.2vw, 44px) !important; }
.stroke-band__copy { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }

/* draft 45: intro gets the three-word gloss on the right */
@media (min-width: 901px) { .intro3 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.intro3__trio { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.intro3__trio li { display: grid; grid-template-columns: 5.5em 1fr; align-items: baseline; gap: 12px; }
.intro3__trio b { font-weight: 400; font-size: 17px; letter-spacing: .08em; color: var(--red-ink); }
.intro3__trio span { font-size: 14px; letter-spacing: .04em; color: #55514c; }
@media (prefers-reduced-motion: no-preference) {
  .intro3__trio li { opacity: 0; transform: translateY(10px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
  .intro3.in .intro3__trio li { opacity: 1; transform: none; }
  .intro3.in .intro3__trio li:nth-child(2) { transition-delay: .15s; } .intro3.in .intro3__trio li:nth-child(3) { transition-delay: .3s; }
}

/* draft 46: industries as type, capsule on hover (replaces the ticker) */
.ind { padding: clamp(56px, 6vw, 88px) 0; background: #f5f5f5; text-align: center; }
.ind__label { margin: 0 0 22px; font-size: 13px; letter-spacing: .14em; color: var(--mute); }
.ind__list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
.ind__list li { display: inline-flex; align-items: center; font-family: "WG Head ZH", "WG Head", var(--sans); font-size: clamp(19px, 1.9vw, 26px); letter-spacing: .06em; color: var(--ink); }
html:lang(ja) .ind__list li { font-family: "WG Head", var(--sans); }
.ind__list li + li::before { content: "·"; color: var(--red); margin: 0 .7em; }
.ind__w { position: relative; cursor: default; transition: color .3s; }
.ind__img { position: absolute; left: 50%; bottom: calc(100% + 10px); width: 112px; height: 66px; border-radius: 999px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, 8px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1); box-shadow: 0 12px 26px -14px rgba(0,0,0,.4); z-index: 2; }
.ind__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ind__w:hover { color: var(--red-ink); }
.ind__w:hover .ind__img { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ind__list { column-gap: 1.6em; row-gap: 16px; }
.ind__list li + li::before { content: none; }
.ind__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin-right: .55em; flex: none; }
.ind__label { margin-bottom: 40px; }
.ind__list li:nth-child(n)::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin: 0 .55em 0 0; }
.ind__label { margin-bottom: 56px; }

/* draft 47: calmer colour in the intro — red only on the × marks */
.intro3__st em { color: inherit; background: none; }
.intro3__trio b { color: var(--ink); }
.intro3__trio span { color: var(--mute); }
.ind__list li:nth-child(n)::before { background: #cfcac2; }

/* draft 48: no beige anywhere — section bands are white, small fills neutral grey */
:root { --grey: #fff; }
.sec2--tint, .ind, .tick, .wall, .page-hero, body { background: #fff !important; }

/* draft 49: no square buttons — everything clickable that has a box is a pill */
.btn, .nav .nav__lang, .filters button, button[type="submit"], input[type="submit"], .case-teaser__steps li, .tag, .chip { border-radius: 999px !important; }
.btn { padding: 0 32px; }

/* draft 50: a connector between the intro and the business section — line · capsules · line */
.intro2 { padding-bottom: clamp(36px, 4.5vw, 64px) !important; }
#business.sec2 { padding-top: clamp(36px, 4.5vw, 64px) !important; }
.joint .wrap { display: flex; align-items: center; gap: 18px; }
.joint__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(222, 85, 71,0), rgba(222, 85, 71,.55) 50%, rgba(222, 85, 71,0)); transform-origin: center; }
.joint__chips { display: flex; gap: 10px; }
.joint__chips img { width: 64px; height: 38px; border-radius: 999px; object-fit: cover; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 18px -12px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: no-preference) {
  .joint__chips img { animation: joint-bob 4.8s ease-in-out infinite; }
  .joint__chips img:nth-child(2) { animation-delay: .4s; } .joint__chips img:nth-child(3) { animation-delay: .8s; }
  .joint__chips img:nth-child(4) { animation-delay: 1.2s; } .joint__chips img:nth-child(5) { animation-delay: 1.6s; } .joint__chips img:nth-child(6) { animation-delay: 2s; }
  @keyframes joint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}
@media (max-width: 700px) { .joint__chips img:nth-child(n+4) { display: none; } }
.intro2 { padding-bottom: var(--sec-y) !important; }
#business.sec2 { padding-top: 0 !important; }
/* layout A: works follow the intro, business after works */
#business.sec2 { padding-top: var(--sec-y) !important; }

/* draft 51: roomier works grid (2-up, then 3-up); Why-us back to plain white */
.bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: clamp(12px, 1.6vw, 20px); }
.bento .bt { aspect-ratio: 16 / 10; height: auto; grid-row: auto; }
.bento .b-half { grid-column: span 3; }
.bento .b-third { grid-column: span 2; }
.bento .bt__cap b { font-size: 15px; }
@media (max-width: 800px) { .bento { grid-template-columns: 1fr; } .bento .b-half, .bento .b-third { grid-column: auto; } }

.why5 { background: #fff !important; color: var(--ink); }
.why5 .why4 { grid-template-columns: 1fr; gap: clamp(36px, 4vw, 56px); }
.why5 .why4__head { position: static; max-width: 40em; }
.why5 .why4__title { color: var(--ink); font-size: clamp(22px, 2.3vw, 30px); margin-bottom: 14px; }
.why5 .why4__title br { display: none; }
.why5 .why4__lead { color: var(--mute); max-width: none; }
.why5 .why4__list { grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.why5 .why4__kw { font-size: clamp(20px, 1.8vw, 24px); color: var(--ink); letter-spacing: .08em; }
.why5 .why4__list p { color: var(--mute); font-size: 13.5px; margin-top: 8px; }
.why5 .why4__list li:hover .why4__kw { color: var(--red-ink); transform: none; }
@media (max-width: 900px) { .why5 .why4__list { grid-template-columns: 1fr 1fr; } }

/* draft 52: full-bleed collage groups (1 large · 2 small · 1 wide), alternating sides */
.collage { padding: 0 clamp(8px, 1vw, 16px); display: grid; gap: clamp(8px, .8vw, 12px); }
.grp { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: clamp(8px, .8vw, 12px); }
.grp .bt { border-radius: 4px; aspect-ratio: 16 / 10; height: auto; }
.grp .g-big { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
.grp .g-s1 { grid-column: 3; grid-row: 1; }
.grp .g-s2 { grid-column: 4; grid-row: 1; }
.grp .g-wide { grid-column: 3 / 5; grid-row: 2; aspect-ratio: 32 / 10; }
.grp--b .g-big { grid-column: 3 / 5; }
.grp--b .g-s1 { grid-column: 1; } .grp--b .g-s2 { grid-column: 2; } .grp--b .g-wide { grid-column: 1 / 3; }
.grp .bt__cap { left: 16px; bottom: 14px; }
.grp .g-big .bt__cap b { font-size: 16px; }
.collage + .wrap .reel { margin-top: clamp(64px, 7vw, 110px); }
@media (max-width: 800px) {
  .grp { grid-template-columns: 1fr 1fr; }
  .grp .g-big, .grp--b .g-big { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; }
  .grp .g-s1, .grp--b .g-s1 { grid-column: 1; grid-row: auto; } .grp .g-s2, .grp--b .g-s2 { grid-column: 2; grid-row: auto; }
  .grp .g-wide, .grp--b .g-wide { grid-column: 1 / 3; grid-row: auto; }
}
/* draft 53: big collage tile plays the SCTECH scroll video */
.bt--vid { background: #fff; }
.bt--vid .g-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }

/* draft 54: collage groups of three — one large + two stacked; video tile keeps its own ratio */
.grp { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
.grp .g-big { grid-column: 1 !important; grid-row: 1 / 3 !important; aspect-ratio: auto; }
.grp .g-s1 { grid-column: 2 !important; grid-row: 1 !important; }
.grp .g-s2 { grid-column: 2 !important; grid-row: 2 !important; }
.grp--b { grid-template-columns: 1fr 2fr; }
.grp--b .g-big { grid-column: 2 !important; }
.grp--b .g-s1, .grp--b .g-s2 { grid-column: 1 !important; }
.grp--v { grid-template-columns: 2.59fr 1fr; }
.bt--vid .g-vid { object-fit: contain; object-position: center; background: #fff; }
@media (max-width: 800px) {
  .grp, .grp--b, .grp--v { grid-template-columns: 1fr 1fr; }
  .grp .g-big, .grp--b .g-big { grid-column: 1 / 3 !important; grid-row: 1 !important; aspect-ratio: 16 / 10; }
  .grp--v .g-big { aspect-ratio: 2.07 / 1; }
  .grp .g-s1, .grp--b .g-s1 { grid-column: 1 !important; grid-row: 2 !important; }
  .grp .g-s2, .grp--b .g-s2 { grid-column: 2 !important; grid-row: 2 !important; }
}
/* homepage = wall + one quiet line */
.intro2--home { padding: clamp(28px, 3vw, 44px) 0 clamp(56px, 6vw, 88px) !important; }
.intro2--home .intro2__top { margin-bottom: 0 !important; }
.intro2--about { padding-top: var(--sec-y) !important; }
.deco { display: none !important; }

/* draft 55: one quiet footer — logo + links, then address and copyright */
.foot3 { border-top: 0; padding: clamp(48px, 5vw, 72px) 0 clamp(28px, 3vw, 40px); }
.foot3 .wrap { display: grid; gap: 22px; }
.foot3__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.foot3__logo { display: inline-flex; text-decoration: none; }
.foot3 nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot3 nav a { color: var(--ink); text-decoration: none; font-size: 13.5px; letter-spacing: .06em; }
.foot3 nav a:hover { color: var(--red-ink); }
.foot3__row--sub p { margin: 0; font-size: 12px; color: var(--mute); letter-spacing: .04em; }
.foot3__row--sub a { color: inherit; text-decoration: none; }
.foot3 .wrap { justify-content: stretch; grid-template-columns: 1fr; padding-top: 0; padding-bottom: 0; }
.foot3__row { align-items: flex-start; }
.foot3__info { margin: 0; display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 4vw, 64px); }
.foot3__info dt { font-size: 11.5px; letter-spacing: .14em; color: var(--mute); margin-bottom: 6px; }
.foot3__info dd { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); letter-spacing: .03em; }
.foot3__info a { color: inherit; text-decoration: none; } .foot3__info a:hover { color: var(--red-ink); }
.foot3__copy { margin: 0; font-size: 11.5px; color: var(--mute); letter-spacing: .06em; }
.foot3 nav { padding-top: 20px; }
.foot3__info { flex: 1 1 auto; }
.foot3__info > div { flex: none; width: auto; min-width: 0; }
.foot3__row nav { flex: none; }
.foot3 .wrap { gap: 36px; }
.foot3__info { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; column-gap: clamp(40px, 6vw, 96px); }
.foot3 nav { padding-top: 0; }
.foot3__row--nav { align-items: center; }
@media (max-width: 800px) { .foot3__info { grid-template-columns: 1fr; } }
.foot3 nav { gap: 8px 22px; }
.foot3 nav a { font-size: 12.5px; color: var(--mute); }

/* draft 56: homepage fits one screen — wall + one info line, no scrolling */
@media (min-width: 801px) {
  .wall { height: calc(100svh - 77px - 96px) !important; min-height: 460px !important; }
  .wall__rows { height: calc(100% - 14px) !important; inset: 14px 0 auto !important; }
  .wall__fade { background: linear-gradient(to top, #fff 0%, rgba(255,255,255,.85) 10%, rgba(255,255,255,0) 32%) !important; }
}
.intro2--home { padding: 18px 0 0 !important; height: 96px; box-sizing: border-box; }
.intro2--home .intro2__top { align-items: center; }

/* draft 57: homepage info bar */
.hbar { height: 96px; display: flex; align-items: center; }
.hbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.hbar__line { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .5em; font-size: clamp(18px, 1.7vw, 23px); letter-spacing: .08em; color: var(--ink); }
.hbar__line i { font-style: normal; color: var(--red); font-size: .8em; margin: 0 .1em; }
.hbar__line span { margin-left: 1.2em; font-family: var(--sans); font-size: 13.5px; letter-spacing: .06em; color: var(--mute); }
.hbar__side { display: flex; align-items: center; gap: 22px; }
.hbar__place { font-family: var(--disp); font-size: 12px; letter-spacing: .16em; color: var(--mute); }
.hbar__btn { min-height: 40px; padding: 0 22px; gap: 10px; font-size: 13px; border-color: var(--ink); }
.hbar__btn span { color: var(--red); transition: transform .3s, color .3s; }
.hbar__btn:hover span { color: #fff; transform: translateX(3px); }
@media (max-width: 800px) {
  .hbar { height: auto; padding: 24px 0 36px; }
  .hbar__line span { margin-left: 0; flex-basis: 100%; margin-top: 6px; }
}

/* draft 58: footer — company + address left, mail & phone right, links + © below */
.foot3__row:first-child { align-items: flex-end; }
.foot4__name { margin: 0 0 8px; font-size: 14px; letter-spacing: .08em; color: var(--ink); }
.foot4__addr { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--mute); }
.foot4__reach { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.foot4__reach a { color: var(--ink); text-decoration: none; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: .04em; line-height: 1.5; transition: color .3s; }
.foot4__reach a:hover { color: var(--red-ink); }
@media (max-width: 800px) { .foot4__reach { align-items: flex-start; } }
.foot4__reach a { font-family: var(--sans) !important; font-size: 14px; letter-spacing: .05em; line-height: 1.8; }
.foot4__reach { gap: 0; }
.foot3__row:first-child { align-items: center; }

/* draft 59: no breadcrumb / English eyebrow on page heroes; English words off the business columns */
.page-hero .crumb, .page-hero .en, .biz4__en { display: none !important; }
.page-hero { padding: clamp(56px, 6vw, 88px) 0 clamp(40px, 4vw, 64px) !important; }
.page-hero--strip { padding-top: 0 !important; }
.page-hero .h1 { margin: 0; }
.page-hero + .sec2, .page-hero + section { padding-top: clamp(24px, 3vw, 40px) !important; }
:root { --sec-y: clamp(64px, 7vw, 104px); }
.biz4__body h3 { font-size: clamp(19px, 1.7vw, 22px); color: var(--ink); }
.biz4__body h3::before { content: ""; display: block; width: 18px; height: 2px; background: var(--red); margin-bottom: 16px; }

/* draft 60: the 契 promise on the services page */
.promise-band__in { display: grid; grid-template-columns: minmax(160px, .7fr) 2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.promise-band__mark img { width: min(220px, 100%); transform: none !important; }
.promise-band__title { margin-bottom: 18px !important; color: var(--ink); }
.promise-band__lead { margin: 0 0 30px; font-size: 14.5px; line-height: 2.1; color: var(--mute); max-width: 36em; }
.promise-band__list li { color: var(--ink); font-size: 14px; }
.promise-band__list li::before { content: "" !important; display: block !important; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-bottom: 10px; }
.promise-band { background: #fff !important; }
@media (max-width: 800px) { .promise-band__in { grid-template-columns: 1fr; } .promise-band__mark img { width: 120px; } }
.promise-band__title { font-family: "WG Head ZH", "WG Head", var(--sans); font-weight: 400; letter-spacing: .06em; } html:lang(ja) .promise-band__title { font-family: "WG Head", var(--sans); }

/* draft 61: services first screen = the three services as a menu */
.svh { padding: clamp(48px, 5vw, 80px) 0 clamp(56px, 6vw, 96px); }
.svh__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.svh__title { margin: 0; font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.5; letter-spacing: .05em; color: var(--ink); }
.svh__lead { margin: 0; font-size: 14.5px; line-height: 2.1; color: var(--mute); }
.svh__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.svc-card__img { display: block; aspect-ratio: 16 / 10; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 36px -22px rgba(0,0,0,.35); margin-bottom: 22px; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; }
.svc-card__img img { object-fit: contain !important; object-position: center !important; transform: none !important; }
.svc-card:hover .svc-card__img { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 28px 48px -24px rgba(0,0,0,.4); }
.svc-card__name { margin: 0 0 8px; font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: .06em; }
.svc-card__name a { color: var(--ink); text-decoration: none; }
.svc-card:hover .svc-card__name a { color: var(--red-ink); }
.svc-card__lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.95; color: var(--mute); }
.svc-card__links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.svc-card__links .link-arrow { margin: 0; }
@media (max-width: 900px) { .svh__head, .svh__grid { grid-template-columns: 1fr; } }
.svc-card__img::after, .svc-card__img::before { display: none !important; } .svc-card__img .bt__dots { display: none; }
/* draft 62: wall tiles keep each image's own ratio — never cropped */
.wall__tile { aspect-ratio: auto; background: #fff; }
.wall__tile img { object-fit: contain !important; }
.svc-card__img { background: #f5f5f5; }
/* collage: show each screenshot whole */
.grp .bt[data-cycle] { background: #f5f5f5; }
.grp .bt[data-cycle] img { object-fit: contain !important; object-position: center !important; }
.grp .bt[data-cycle] img.on { transform: none !important; }

/* draft 63: journey reads light → deep */
.flow__s h3, .flow__s.is-pt h3, .flow__s.is-core h3 { color: var(--c) !important; }
.flow__s::before { content: ""; display: block; height: 3px; border-radius: 3px; background: var(--c); margin-bottom: 22px; }
.flow__s:nth-child(1) { --c: #DE5547; } .flow__s:nth-child(2) { --c: #DE5547; } .flow__s:nth-child(3) { --c: #DE5547; }
.flow__s:nth-child(4) { --c: #DE5547; } .flow__s:nth-child(5) { --c: #DE5547; }
.flow__s small, .flow__s.is-core small, .flow__s.is-pt small { color: var(--mute) !important; }
.flow__s.is-core small::before { color: var(--c); }

/* draft 64: 契 seal animation — strokes gather into the seal, then it stamps */
.seal-anim { position: relative; width: min(220px, 100%); aspect-ratio: 1; }
.seal-anim__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seal-anim__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .seal-anim.rv { opacity: 1 !important; transform: none !important; }
  .seal-anim__svg path { opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(14px) scale(.6) rotate(-12deg); }
  .seal-anim.in .seal-anim__svg path { animation: seal-stroke .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 55ms); }
  .seal-anim.in .seal-anim__svg { animation: seal-stamp .6s cubic-bezier(.3,1.4,.5,1) 1.55s both; }
  .seal-anim.in .seal-anim__ring { animation: seal-ring 1.1s ease-out 1.75s both; }
  @keyframes seal-stroke { to { opacity: 1; transform: none; } }
  @keyframes seal-stamp { 0% { transform: scale(1); } 35% { transform: scale(.9); } 100% { transform: scale(1); } }
  @keyframes seal-ring { 0% { opacity: .55; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.35); } }
  .promise-band__mark:hover .seal-anim__svg { animation: seal-stamp .6s cubic-bezier(.3,1.4,.5,1) both; }
}

/* draft 65: journey animates — bars draw left→right one after another, text follows */
@media (prefers-reduced-motion: no-preference) {
  .flow__s.rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .flow__s::before { transform: scaleX(0); transform-origin: left; }
  .flow__s > * { opacity: 0; transform: translateY(12px); }
  .flow__s.in::before { animation: flow-bar .7s cubic-bezier(.6,0,.2,1) forwards; animation-delay: calc(var(--k) * .45s); }
  .flow__s.in > * { animation: flow-txt .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--k) * .45s + .35s); }
  .flow__s:nth-child(1) { --k: 0; } .flow__s:nth-child(2) { --k: 1; } .flow__s:nth-child(3) { --k: 2; } .flow__s:nth-child(4) { --k: 3; } .flow__s:nth-child(5) { --k: 4; }
  .flow__s.is-core.in h3 { animation: flow-txt .7s cubic-bezier(.2,.7,.2,1) forwards, flow-pulse 1.2s ease 2.2s; }
  @keyframes flow-bar { to { transform: scaleX(1); } }
  @keyframes flow-txt { to { opacity: 1; transform: none; } }
  @keyframes flow-pulse { 40% { letter-spacing: .12em; } }
}
@media (prefers-reduced-motion: no-preference) { .flow__s.is-core.in h3 { animation: flow-txt .7s cubic-bezier(.2,.7,.2,1) 1.25s forwards, flow-pulse 1.2s ease 2.4s; } }
.seal-anim__svg { overflow: hidden !important; }
/* name-to-seal story inside the 契 promise band */
.promise-band__mark .kstory--band { margin: 0; justify-content: flex-start; }
.promise-band__mark .kstory--band .kstage { width: min(260px, 60vw); }

/* draft 66: simple name→seal animation */
.sealx { position: relative; width: min(240px, 60vw); aspect-ratio: 1; }
.sealx.rv { opacity: 1 !important; transform: none !important; }
.sealx__seal { width: 100%; height: 100%; display: block; }
.sealx__kana { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .1em; pointer-events: none;
  font-family: "WG Logo", "Kiwi Maru", sans-serif; font-weight: 700; font-size: clamp(30px, 3vw, 42px); color: var(--red); opacity: 0; }
.sealx__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .sealx__seal { opacity: 0; transform: scale(.82); }
  .sealx__kana { opacity: 1; }
  .sealx__kana span { display: inline-block; opacity: 0; transform: translateY(10px); }
  .sealx.in .sealx__kana span { animation: sx-in .5s ease calc(var(--n) * .16s) forwards, sx-gather .6s cubic-bezier(.6,0,.3,1) 1.25s forwards; }
  .sealx.in .sealx__kana span:nth-child(1) { --dx: 1.6em; } .sealx.in .sealx__kana span:nth-child(2) { --dx: .55em; }
  .sealx.in .sealx__kana span:nth-child(3) { --dx: -.55em; } .sealx.in .sealx__kana span:nth-child(4) { --dx: -1.6em; }
  .sealx.in .sealx__seal { animation: sx-seal .7s cubic-bezier(.3,1.3,.5,1) 1.6s forwards; }
  .sealx.in .sealx__ring { animation: sx-ring 1s ease-out 2s both; }
  @keyframes sx-in { to { opacity: 1; transform: none; } }
  @keyframes sx-gather { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(var(--dx)) scale(.4); } }
  @keyframes sx-seal { 0% { opacity: 0; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.04); } 80% { transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes sx-ring { 0% { opacity: .5; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.3); } }
  .sealx:hover .sealx__seal { animation: sx-seal .6s cubic-bezier(.3,1.3,.5,1) forwards; }
}
@media (prefers-reduced-motion: no-preference) {
  .promise-band__mark .sealx .sealx__seal { opacity: 0; transform: scale(.82); width: 100%; }
  .promise-band__mark .sealx.in .sealx__seal { animation: sx-seal .7s cubic-bezier(.3,1.3,.5,1) 1.6s forwards; }
}
.promise-band__mark .sealx .sealx__seal { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .promise-band__mark .sealx.in .sealx__ring { animation: sx-ring 1s ease-out 2.1s forwards; } }

/* draft 67: the promise as a signed declaration — clauses appear, then the 契 seal is stamped */
.decl__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.decl__title { margin: 0 0 20px; font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.6; letter-spacing: .05em; }
.decl__lead { margin: 0 0 24px; font-size: 14.5px; line-height: 2.1; color: var(--mute); }
.decl__links { margin: 0; }
.decl .pledge { max-width: none; margin: 0; background: #fff; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 30px 60px -36px rgba(0,0,0,.35); }
.decl .pledge__no { display: none; }
.decl .pledge__list li { grid-template-columns: 1fr; padding: 16px 0; }
.decl .pledge__list h3::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin: 0 12px 2px 0; vertical-align: middle; }
.decl .pledge__list p { padding-left: 18px; }
.decl .pledge__seal { width: 76px; right: -10px; }
.decl .pledge__sign { padding-right: 76px; }
@media (prefers-reduced-motion: no-preference) {
  .decl__doc.rv { opacity: 1 !important; transform: none !important; }
  .decl__doc .pledge { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .decl__doc.in .pledge { opacity: 1; transform: none; }
  .decl__doc .pledge__title, .decl__doc .pledge__list li, .decl__doc .pledge__sign { opacity: 0; transform: translateY(8px); }
  .decl__doc.in .pledge__title { animation: dc-in .6s ease .3s forwards; }
  .decl__doc.in .pledge__list li { animation: dc-in .6s ease forwards; }
  .decl__doc.in .pledge__list li:nth-child(1) { animation-delay: .55s; } .decl__doc.in .pledge__list li:nth-child(2) { animation-delay: .8s; }
  .decl__doc.in .pledge__list li:nth-child(3) { animation-delay: 1.05s; } .decl__doc.in .pledge__list li:nth-child(4) { animation-delay: 1.3s; }
  .decl__doc.in .pledge__list li:nth-child(5) { animation-delay: 1.55s; }
  .decl__doc.in .pledge__sign { animation: dc-in .6s ease 1.9s forwards; }
  .decl__doc .pledge__seal { opacity: 0; }
  .decl__doc.in .pledge__seal { animation: dc-stamp .55s cubic-bezier(.5,0,.6,1.4) 2.6s forwards; }
  .decl__doc.in .pledge { animation: dc-thud .25s ease-out 2.98s; }
  @keyframes dc-in { to { opacity: 1; transform: none; } }
  @keyframes dc-stamp { 0% { opacity: 0; transform: translateY(-50%) rotate(-24deg) scale(2.4); } 70% { opacity: .95; transform: translateY(-50%) rotate(-8deg) scale(.92); } 100% { opacity: .92; transform: translateY(-50%) rotate(-8deg) scale(1); } }
  @keyframes dc-thud { 0%, 100% { transform: none; } 40% { transform: translateY(2px) scale(.997); } }
}
@media (max-width: 900px) { .decl__in { grid-template-columns: 1fr; } }

/* draft 68: stronger stamp, natural ink impression */
.decl .pledge__seal { width: 84px; right: -14px; filter: url(#ink) saturate(1.1); mix-blend-mode: multiply; }
.decl .pledge__sign { padding-right: 84px; }
.decl .pledge__sign::after { content: ""; position: absolute; right: -14px; top: 50%; width: 84px; height: 84px; margin-top: -42px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .decl__doc.in .pledge__seal { animation: dc-stamp2 1.05s cubic-bezier(.55,0,.75,.2) 2.5s forwards; }
  .decl__doc.in .pledge { animation: dc-thud2 .45s cubic-bezier(.3,.6,.4,1) 3.42s; }
  .decl__doc.in .pledge__sign::after { animation: dc-ring 1s ease-out 3.42s forwards; }
  @keyframes dc-stamp2 {
    0%   { opacity: 0;   transform: translate(40px, calc(-50% - 120px)) rotate(-28deg) scale(2.6); filter: url(#ink) drop-shadow(0 30px 24px rgba(0,0,0,.25)); }
    55%  { opacity: .85; transform: translate(6px, calc(-50% - 18px)) rotate(-12deg) scale(1.35); filter: url(#ink) drop-shadow(0 14px 12px rgba(0,0,0,.18)); }
    88%  { opacity: 1;   transform: translate(0, -50%) rotate(-8deg) scale(.9, .86); filter: url(#ink) drop-shadow(0 0 0 rgba(0,0,0,0)); }
    100% { opacity: .93; transform: translate(0, -50%) rotate(-8deg) scale(1); filter: url(#ink); }
  }
  @keyframes dc-thud2 { 0% { transform: none; } 25% { transform: translateY(5px) scale(.992) rotate(.25deg); } 55% { transform: translateY(-2px) rotate(-.15deg); } 100% { transform: none; } }
  @keyframes dc-ring { 0% { opacity: .45; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.9); } }
}

/* draft 69: lighter stamp motion, rosier ink */
.decl .pledge__seal { filter: url(#ink) saturate(1.1) hue-rotate(-3deg) brightness(.97); }
@media (prefers-reduced-motion: no-preference) {
  .decl__doc.in .pledge__seal { animation: dc-stamp3 .85s cubic-bezier(.5,0,.7,.3) 2.5s forwards; }
  .decl__doc.in .pledge { animation: dc-thud3 .35s ease-out 3.22s; }
  .decl__doc.in .pledge__sign::after { animation: dc-ring3 .9s ease-out 3.22s forwards; }
  @keyframes dc-stamp3 {
    0%   { opacity: 0;   transform: translate(18px, calc(-50% - 50px)) rotate(-18deg) scale(1.7); filter: url(#ink) saturate(1.1) hue-rotate(-3deg) drop-shadow(0 16px 14px rgba(0,0,0,.18)); }
    85%  { opacity: 1;   transform: translate(0, -50%) rotate(-8deg) scale(.95, .93); filter: url(#ink) saturate(1.1) hue-rotate(-3deg) drop-shadow(0 0 0 rgba(0,0,0,0)); }
    100% { opacity: 1;   transform: translate(0, -50%) rotate(-8deg) scale(1); filter: url(#ink) saturate(1.1) hue-rotate(-3deg) brightness(.97); }
  }
  @keyframes dc-thud3 { 0%, 100% { transform: none; } 35% { transform: translateY(2px); } }
  @keyframes dc-ring3 { 0% { opacity: .25; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.45); } }
}

/* draft 70: journey as a rising growth line */
.grow { position: relative; }
.grow.rv { opacity: 1 !important; transform: none !important; }
.grow__svg { display: block; width: 100%; height: clamp(110px, 12vw, 170px); overflow: visible; }
.grow__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.grow__s { text-align: center; padding: 0 8px; }
.grow__s h3 { margin: 0 0 8px; font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .06em; color: var(--ink); }
.grow__s p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--mute); }
.grow__s small { display: inline-block; margin-top: 10px; font-size: 11.5px; letter-spacing: .06em; color: var(--mute); border: 1px solid var(--rule); border-radius: 99px; padding: 2px 12px; }
.grow__s.is-core h3 { color: var(--red-ink); }
.grow__s.is-core small { background: var(--red); border-color: var(--red); color: #fff; }
.grow__more { margin: 40px 0 0; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .grow__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .grow.in .grow__line { animation: grow-draw 2.2s cubic-bezier(.5,0,.3,1) .2s forwards; }
  .grow__n { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); }
  .grow.in .grow__n { animation: grow-pop .5s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(.25s + var(--k) * .45s); }
  .grow__s { opacity: 0; transform: translateY(10px); }
  .grow.in .grow__s { animation: flow-txt .6s ease forwards; animation-delay: calc(.4s + var(--k) * .45s); }
  @keyframes grow-draw { to { stroke-dashoffset: 0; } }
  @keyframes grow-pop { to { opacity: 1; transform: none; } }
  @keyframes flow-txt { to { opacity: 1; transform: none; } }
}
@media (max-width: 800px) { .grow__svg { display: none; } .grow__list { grid-template-columns: 1fr 1fr; row-gap: 28px; } .grow__s { text-align: left; } }

/* about: representative photos */
.ceo__h { margin: 0 0 24px; font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: .06em; }
.ceo__ph { position: relative; margin: 0; padding-bottom: 22%; }
.ceo__a { display: block; width: 78%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 60px -36px rgba(0,0,0,.4); }
.ceo__b { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 6px solid #fff; box-shadow: 0 20px 40px -24px rgba(0,0,0,.4); }
@media (max-width: 800px) { .ceo { margin-bottom: 32px; } }

/* draft 71: journey as a staircase — black lines, one 朱红 step */
.stp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; border-bottom: 1px solid var(--ink); }
.stp.rv { opacity: 1 !important; transform: none !important; }
.stp__s { display: flex; flex-direction: column; justify-content: flex-end; }
.stp__txt { padding: 0 16px 16px 0; }
.stp__txt h3 { margin: 0 0 6px; font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .06em; color: var(--ink); }
.stp__txt p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--mute); }
.stp__txt small { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .06em; color: var(--mute); }
.stp__blk { display: block; height: calc(28px + var(--k) * 34px); border-top: 2px solid var(--ink); border-left: 1px solid var(--ink); }
.stp__s:first-child .stp__blk { border-left: 0; }
.stp__s.is-pt .stp__blk { border-top-style: dashed; }
.stp__s.is-core .stp__blk { background: var(--red); border-color: var(--red); }
.stp__s.is-core h3, .stp__s.is-core small { color: var(--red-ink); }
@media (prefers-reduced-motion: no-preference) {
  .stp__blk { transform: scaleY(0); transform-origin: bottom; }
  .stp.in .stp__blk { animation: stp-up .6s cubic-bezier(.3,.8,.3,1) forwards; animation-delay: calc(var(--k) * .3s); }
  .stp__txt { opacity: 0; transform: translateY(8px); }
  .stp.in .stp__txt { animation: flow-txt .6s ease forwards; animation-delay: calc(.35s + var(--k) * .3s); }
  @keyframes stp-up { to { transform: none; } }
}
@media (max-width: 800px) { .stp { grid-template-columns: 1fr; border-bottom: 0; } .stp__blk { display: none; } .stp__txt { border-left: 2px solid var(--ink); padding: 4px 0 4px 14px; margin-bottom: 16px; } .stp__s.is-core .stp__txt { border-color: var(--red); } }

/* contact: map & access */
.access__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.access__map { position: relative; }
.access__map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 6px; background: #f5f5f5; filter: grayscale(.85) contrast(1.05); }
.access__open { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--red-ink); text-decoration: none; }
.access__list { margin: 0; display: grid; gap: 22px; }
.access__list dt { font-size: 12px; letter-spacing: .14em; color: var(--mute); margin-bottom: 6px; }
.access__list dd { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--ink); }
@media (max-width: 800px) { .access__in { grid-template-columns: 1fr; } }

/* draft 72: journey as five short lines of copy on one red track */
.road__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.road__head .sec2__title { margin: 0; }
.road__lead { margin: 0; font-size: 14.5px; line-height: 2.1; color: var(--mute); }
.road__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.road__list.rv { opacity: 1 !important; transform: none !important; }
.road__list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform-origin: left; }
.road__s { position: relative; padding: 34px clamp(12px, 2vw, 28px) 0 0; }
.road__s::before { content: ""; position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--red); box-sizing: border-box; }
.road__tag { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; color: var(--red-ink); }
.road__h { margin: 0 0 12px; font-weight: 400; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: .06em; color: var(--ink); }
.road__d { margin: 0; font-size: 13px; line-height: 1.9; color: var(--mute); }
@media (prefers-reduced-motion: no-preference) {
  .road__list::before { transform: scaleX(0); }
  .road__list.in::before { animation: stp-up2 1.8s cubic-bezier(.5,0,.3,1) .1s forwards; }
  .road__s::before { transform: scale(0); }
  .road__list.in .road__s::before { animation: grow-pop .45s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(.15s + var(--k) * .36s); }
  .road__s > * { opacity: 0; transform: translateY(10px); }
  .road__list.in .road__s > * { animation: flow-txt .6s ease forwards; animation-delay: calc(.3s + var(--k) * .36s); }
  @keyframes stp-up2 { to { transform: none; } }
  @keyframes grow-pop { to { transform: none; } }
}
@media (max-width: 900px) {
  .road__head { grid-template-columns: 1fr; }
  .road__list { grid-template-columns: 1fr; padding-left: 24px; }
  .road__list::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .road__s { padding: 0 0 28px 0; } .road__s::before { left: -24px; top: 4px; }
}

/* draft 73: clients — one rotating line + quiet list */
.who4__line { margin: 0 0 clamp(36px, 4vw, 56px); font-weight: 400; font-size: clamp(24px, 2.8vw, 38px); letter-spacing: .05em; line-height: 1.5; color: var(--ink); }
.who4__rot { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; color: var(--red-ink); }
.who4__w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.who4__w.on { opacity: 1; transform: none; }
.who4__w::after { content: ""; display: block; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) .2s; }
.who4__w.on::after { transform: none; }
.who4__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px clamp(20px, 3vw, 48px); }
.who4__it { padding: 16px 0 16px 18px; position: relative; cursor: default; }
.who4__it::before { content: ""; position: absolute; left: 0; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: #cfcac2; transition: background .3s, transform .3s; }
.who4__it b { display: block; font-weight: 400; font-size: 16px; letter-spacing: .04em; color: var(--mute); transition: color .3s; }
.who4__it span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mute); }
.who4__it.on::before { background: var(--red); transform: scale(1.4); }
.who4__it.on b { color: var(--ink); }
@media (max-width: 900px) { .who4__list { grid-template-columns: 1fr; } .who4__w { white-space: normal; } }

/* the pledge in a rounded face */
.pledge, .pledge__title, .pledge__list h3, .pledge__list p, .pledge__sign { font-family: "WG Head ZH", "WG Head", var(--sans); }
html:lang(ja) .pledge, html:lang(ja) .pledge__title, html:lang(ja) .pledge__list h3, html:lang(ja) .pledge__list p, html:lang(ja) .pledge__sign { font-family: "WG Head", var(--sans); }

/* draft 74: services — montage reel, flow, scenes, before/after, voices */
.reel2 { padding: 0 0 clamp(40px, 5vw, 72px); }
.reel2__win { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 40px 80px -48px rgba(0,0,0,.45); line-height: 0; }
.reel2__vid { width: 100%; height: auto; display: block; }
.reel2__cap { margin: 12px 0 0; font-size: 12px; color: var(--mute); text-align: right; }

.flow6__list { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 2vw, 24px); }
.flow6__list.rv { opacity: 1 !important; transform: none !important; }
.flow6__list li { position: relative; }
.flow6__list li + li::before { content: ""; position: absolute; left: calc(-1 * clamp(12px, 2vw, 24px)); top: 26px; width: clamp(12px, 2vw, 24px); height: 1px; background: var(--ink); opacity: .3; }
.flow6__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); margin-bottom: 16px; transition: background .3s, border-color .3s; }
.flow6__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.flow6__list li:hover .flow6__ic { background: var(--red); border-color: var(--red); }
.flow6__list li:hover .flow6__ic svg { stroke: #fff; }
.flow6__list h3 { margin: 0 0 6px; font-weight: 400; font-size: 17px; letter-spacing: .06em; }
.flow6__list p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--mute); }
@media (prefers-reduced-motion: no-preference) {
  .flow6__list li { opacity: 0; transform: translateY(12px); }
  .flow6__list.in li { animation: flow-txt .6s ease forwards; animation-delay: calc(var(--k) * .14s); }
}
@media (max-width: 900px) { .flow6__list { grid-template-columns: 1fr 1fr; row-gap: 28px; } .flow6__list li::before { display: none; } }

.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(48px, 6vw, 80px); }
.scenes.rv { opacity: 1 !important; transform: none !important; }
.scenes figure { margin: 0; }
.scenes img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.scenes figcaption { margin-top: 10px; font-size: 13px; color: var(--mute); }
.scenes__note { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .scenes figure { opacity: 0; transform: translateY(16px); }
  .scenes.in figure { animation: flow-txt .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .scenes.in figure:nth-child(2) { animation-delay: .15s; } .scenes.in figure:nth-child(3) { animation-delay: .3s; }
}
@media (max-width: 800px) { .scenes { grid-template-columns: 1fr; } }

.ba__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.ba__head .sec2__title { margin: 0; }
.ba__lead { margin: 0; font-size: 14.5px; line-height: 2.1; color: var(--mute); }
.ba__box { position: relative; aspect-ratio: 1200 / 577; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 80px -48px rgba(0,0,0,.45); user-select: none; }
.ba__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); background: #ececec; display: grid; place-items: center; }
.ba__ph { font-size: 14px; color: var(--mute); padding: 20px; text-align: center; }
.ba__bar { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.ba__bar::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 16px; letter-spacing: .1em; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__tag { position: absolute; top: 14px; font-size: 11px; letter-spacing: .2em; color: #fff; background: rgba(31,31,31,.7); padding: 3px 10px; border-radius: 99px; pointer-events: none; }
.ba__tag--l { left: 14px; } .ba__tag--r { right: 14px; }
@media (max-width: 800px) { .ba__head { grid-template-columns: 1fr; } }

.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin: clamp(28px, 3vw, 44px) 0 16px; }
.voices__grid.rv { opacity: 1 !important; transform: none !important; }
.voice { margin: 0; padding: 28px 26px; border-radius: 8px; background: #f7f7f7; position: relative; }
.voice::before { content: "“"; position: absolute; top: 4px; left: 18px; font: 400 54px/1 Georgia, serif; color: var(--red); }
.voice blockquote { margin: 18px 0 18px; font-size: 16px; line-height: 1.9; letter-spacing: .03em; color: var(--ink); }
.voice figcaption { font-size: 12.5px; color: var(--mute); }
@media (prefers-reduced-motion: no-preference) {
  .voices__grid .voice { opacity: 0; transform: translateY(14px); }
  .voices__grid.in .voice { animation: flow-txt .7s ease forwards; }
  .voices__grid.in .voice:nth-child(2) { animation-delay: .15s; } .voices__grid.in .voice:nth-child(3) { animation-delay: .3s; }
}
@media (max-width: 900px) { .voices__grid { grid-template-columns: 1fr; } }
.ba__before { place-items: center start; } .ba__ph { max-width: 38%; text-align: left; padding-left: 5%; }
/* footer: contact on one line; nav in the header's face */
.foot5 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 13px; letter-spacing: .04em; color: var(--mute); }
.foot5 i { display: inline-block; width: 1px; height: 12px; background: var(--rule); margin: 0 16px; }
.foot5 a { color: var(--ink); text-decoration: none; } .foot5 a:hover { color: var(--red-ink); }
.foot3 nav a { font-family: "WG Nav", var(--sans); font-weight: 400; letter-spacing: .1em; font-size: 13px; color: var(--ink); }
html:lang(zh-Hans) .foot3 nav a { font-family: "WG Nav ZH", var(--sans); }
@media (max-width: 800px) { .foot5 { flex-direction: column; align-items: flex-start; } .foot5 i { display: none; } }
.ba__box { aspect-ratio: 1600 / 773; }
.ba__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__tag { top: auto; bottom: 14px; }
.ba__box { aspect-ratio: 2880 / 1392; }
/* tags travel with their own image, so a label never sits on the wrong side */
.ba__aftertag { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); pointer-events: none; }
.ba__before .ba__tag { z-index: 1; }
.ba__tag { letter-spacing: .1em; }
.ba__box.rv { opacity: 1 !important; transform: none !important; }
.ba__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; font-size: 12px; letter-spacing: .08em; color: #fff; background: rgba(31,31,31,.7); padding: 4px 14px; border-radius: 99px; pointer-events: none; transition: opacity .4s; }
.ba__box.used .ba__hint { opacity: 0; }
.ba__hint { bottom: auto; top: 50%; left: calc(var(--x) + 34px); transform: translateY(-50%); white-space: nowrap; }

/* draft 75: flow — type only, red arrows between steps */
.flow6__list { grid-template-columns: repeat(6, 1fr); gap: 0; }
.flow6__list li { padding-right: 28px; }
.flow6__list li + li::before { content: "→"; left: -22px; top: 0; width: auto; height: auto; background: none; opacity: 1; color: var(--red); font-size: 16px; line-height: 1.6; }
.flow6__list h3 { font-size: clamp(17px, 1.5vw, 20px); margin-bottom: 8px; }
.flow6__list p { font-size: 12.5px; }
@media (max-width: 900px) { .flow6__list { grid-template-columns: 1fr 1fr; } .flow6__list li::before { display: none; } }
.flow6__list li + li::before { top: 3px; left: -30px; font-size: 15px; } .flow6__list li + li { padding-left: 8px; }

/* draft 76: services reading order — reel in a browser frame, end CTA */
.reel2 { padding: var(--sec-y) 0; }
.reel2__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.reel2__win { border: 1px solid var(--rule); border-radius: 10px; }
.reel2__txt h2 { margin: 0 0 14px; font-weight: 400; font-size: clamp(20px, 2vw, 26px); letter-spacing: .05em; }
.reel2__txt p { margin: 0 0 20px; font-size: 14px; line-height: 2; color: var(--mute); }
.road__more { margin: 32px 0 0; }
.endcta { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 100px); text-align: center; }
.endcta__a { display: inline-flex; align-items: center; gap: 18px; font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .06em; color: var(--ink); text-decoration: none; }
.endcta__a span { color: var(--red); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.endcta__a:hover { color: var(--red-ink); } .endcta__a:hover span { transform: translateX(8px); }
@media (max-width: 900px) { .reel2__grid { grid-template-columns: 1fr; } }
/* all reds = 朱红 (logo #DE5547) */
:root { --red: #DE5547; --red-ink: #DE5547; }
html:lang(ja) .road__h { font-size: clamp(20px, 1.85vw, 26px); line-height: 1.55; letter-spacing: .04em; word-break: keep-all; }
/* wall: two rows, larger tiles */
@media (min-width: 801px) { .wall .wall__row { height: calc((100% - 28px) / 2) !important; } }
@media (max-width: 800px) { .wall .wall__row { height: calc((100% - 20px) / 2) !important; } }
@media (min-width: 801px) { .wall .wall__row { height: calc((100% - 42px) / 3) !important; } }
@media (max-width: 800px) { .wall .wall__row { height: calc((100% - 30px) / 3) !important; } }

/* draft 77: package link sits with the journey intro; scenes reveal like prints being laid down */
.road__head { grid-template-rows: auto auto; }
.road__head .sec2__title { grid-row: 1 / 3; align-self: end; }
.road__pkg { grid-column: 2; margin: 14px 0 0; }
.road__pkg .link-arrow { margin: 0; }
.scenes figure { overflow: visible; }
.scenes .scenes__ph { display: block; overflow: hidden; border-radius: 6px; }
.scenes img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.scenes figure:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .scenes figure { opacity: 1 !important; transform: none !important; animation: none !important; }
  .scenes img { clip-path: inset(0 100% 0 0 round 6px); transform: scale(1.12); }
  .scenes.in img { animation: sc-wipe 1.1s cubic-bezier(.7,0,.2,1) forwards; }
  .scenes.in figure:nth-child(2) img { animation-delay: .25s; } .scenes.in figure:nth-child(3) img { animation-delay: .5s; }
  .scenes figcaption { opacity: 0; transform: translateX(-10px); }
  .scenes.in figcaption { animation: sc-cap .7s ease forwards; animation-delay: .9s; }
  .scenes.in figure:nth-child(2) figcaption { animation-delay: 1.15s; } .scenes.in figure:nth-child(3) figcaption { animation-delay: 1.4s; }
  @keyframes sc-wipe { 60% { clip-path: inset(0 0 0 0 round 6px); } 100% { clip-path: inset(0 0 0 0 round 6px); transform: scale(1); } }
  @keyframes sc-cap { to { opacity: 1; transform: none; } }
  .scenes.in figure:hover img { transform: scale(1.04); }
}

/* back-to-top: the 契 seal in the footer */
.foot3 .wrap { position: relative; }
.totop { position: absolute; right: var(--gut); top: calc(-1 * clamp(48px, 5vw, 72px) - 34px); display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.totop img { width: 58px; height: 58px; display: block; transition: transform .5s cubic-bezier(.3,1.4,.5,1); filter: drop-shadow(0 6px 10px rgba(222,85,71,.18)); }
.totop span { font-family: var(--disp); font-size: 10.5px; letter-spacing: .24em; color: var(--red); }
.totop:hover img { transform: translateY(-6px) rotate(-8deg); }
.totop.stamp img { animation: totop-stamp .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes totop-stamp { 0% { transform: scale(1); } 35% { transform: scale(.82); } 100% { transform: scale(1); } }
.foot3 { padding-top: clamp(80px, 8vw, 110px); }
@media (max-width: 800px) { .totop { top: -44px; } .totop img { width: 46px; height: 46px; } }

.totop { flex-direction: column-reverse; gap: 4px; }
.totop__ar { width: 16px; height: 10px; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.totop:hover .totop__ar { transform: translateY(-4px); }
/* seal + pointer as one shape */
.totop { flex-direction: column; gap: 0; }
.totop__ar { display: none; }
.totop img { order: 2; filter: none; }
.totop__tip { order: 1; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 11px solid var(--red); margin-bottom: -2px; transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.totop:hover img { transform: translateY(-4px); }
.totop:hover .totop__tip { transform: translateY(-8px); }

/* draft 78: floating back-to-top, bottom-right — white disc, 契 seal, red chevron */
.totop { position: fixed !important; right: clamp(16px, 2.4vw, 32px) !important; bottom: clamp(16px, 2.4vw, 32px) !important; top: auto !important; z-index: 50;
  width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 12px 28px -10px rgba(0,0,0,.28);
  display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 2px !important;
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop img { order: 2; width: 30px !important; height: 30px !important; filter: none !important; }
.totop__ar { order: 1; display: block !important; width: 14px; height: 9px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.totop__tip, .totop span { display: none !important; }
.totop:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 18px 34px -10px rgba(222,85,71,.45); }
.totop:hover .totop__ar { transform: translateY(-3px); }
.totop:hover img { transform: none; }
.foot3 { padding-top: clamp(48px, 5vw, 72px); }
@media (max-width: 800px) { .totop { width: 52px; height: 52px; } .totop img { width: 24px !important; height: 24px !important; } }

/* draft 79: back-to-top as a solid 朱红 seal button */
.totop { background: var(--red) !important; box-shadow: 0 10px 24px -10px rgba(222,85,71,.6) !important; }
.totop img { filter: brightness(0) invert(1) !important; width: 28px !important; height: 28px !important; }
.totop__ar { stroke: #fff !important; }
.totop:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(222,85,71,.7) !important; }

/* draft 80: stronger back-to-top motion */
@media (prefers-reduced-motion: no-preference) {
  .totop:hover { transform: translateY(-6px) scale(1.06) !important; box-shadow: 0 22px 36px -12px rgba(222,85,71,.75) !important; }
  .totop:hover .totop__ar { animation: tt-bob .9s cubic-bezier(.3,0,.3,1) infinite; }
  .totop:hover img { animation: tt-tilt 1.8s ease-in-out infinite; }
  .totop.stamp { animation: tt-press .55s cubic-bezier(.3,1.5,.5,1); }
  .totop.stamp .totop__ar { animation: tt-shoot .55s cubic-bezier(.5,0,.8,.4); }
  .totop.stamp img { animation: tt-seal .55s cubic-bezier(.3,1.5,.5,1); }
  @keyframes tt-bob { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }
  @keyframes tt-tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
  @keyframes tt-press { 0% { transform: scale(1); } 30% { transform: scale(.82); } 100% { transform: scale(1); } }
  @keyframes tt-seal { 0% { transform: scale(1); } 30% { transform: scale(.7) rotate(-10deg); } 100% { transform: scale(1); } }
  @keyframes tt-shoot { 0% { transform: none; opacity: 1; } 60% { transform: translateY(-22px); opacity: 0; } 61% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
}

/* draft 81: back-to-top = the red seal itself, arrow sits above it outside */
.totop { background: transparent !important; box-shadow: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; gap: 6px !important; }
.totop img { filter: drop-shadow(0 6px 12px rgba(222,85,71,.28)) !important; width: 52px !important; height: 52px !important; background: #fff; border-radius: 50%; }
.totop__ar { stroke: var(--red) !important; width: 18px !important; height: 11px !important; stroke-width: 2.2 !important; }
.totop:hover { transform: translateY(-6px) !important; box-shadow: none !important; }
.totop:hover img { filter: drop-shadow(0 12px 18px rgba(222,85,71,.45)) !important; }
@media (max-width: 800px) { .totop img { width: 42px !important; height: 42px !important; } }

/* draft 82: start-up package page */
.pk-hero { padding: clamp(64px, 8vw, 120px) 0 clamp(32px, 4vw, 56px); }
.pk-hero__t { margin: 0 0 22px; font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.5; letter-spacing: .05em; }
.pk-hero__l { margin: 0; max-width: 36em; font-size: 15px; line-height: 2.1; color: var(--mute); }
.pk-w__list { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.pk-w__list.rv { opacity: 1 !important; transform: none !important; }
.pk-w__it { padding: 26px 28px; border-radius: 8px; background: #f7f7f7; }
.pk-w__it b { display: block; font-weight: 400; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: .04em; margin-bottom: 10px; }
.pk-w__it b::before { content: "？"; color: var(--red); margin-right: 8px; }
.pk-w__it span { font-size: 13.5px; line-height: 1.9; color: var(--mute); }
.pk-two__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }
.pk-two__grid.rv { opacity: 1 !important; transform: none !important; }
.pk-two__col { padding: 32px 30px; border-radius: 10px; border: 1px solid var(--rule); }
.pk-two__col--us { border-color: var(--red); }
.pk-two__who { margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; color: var(--mute); }
.pk-two__col--us .pk-two__who { color: var(--red); }
.pk-two__col h3 { margin: 0 0 16px; font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); }
.pk-two__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink); }
.pk-two__col li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--mute); margin: 0 10px 3px 0; }
.pk-two__col--us li::before { background: var(--red); }
.pk-two__mid { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .1em; color: var(--red); }
.pk-two__mid img { width: 64px; height: 64px; }
.pk-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(32px, 4vw, 48px); }
.pk-plans__grid.rv { opacity: 1 !important; transform: none !important; }
.pk-plan { padding: 30px 28px; border-radius: 10px; background: #f7f7f7; position: relative; overflow: hidden; }
.pk-plan::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; background: var(--red); width: 33%; }
.pk-plan:nth-child(2)::before { width: 66%; } .pk-plan:nth-child(3)::before { width: 100%; }
.pk-plan h3 { margin: 0 0 6px; font-weight: 400; font-size: 22px; letter-spacing: .06em; }
.pk-plan__for { margin: 0 0 18px; font-size: 13px; color: var(--red); }
.pk-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.7; }
.pk-plan li::before { content: "—"; color: var(--mute); margin-right: 8px; }
.pk-plans__note { margin: 18px 0 0; font-size: 13px; color: var(--mute); }
@media (prefers-reduced-motion: no-preference) {
  .pk-w__it, .pk-two__grid > *, .pk-plan { opacity: 0; transform: translateY(14px); }
  .pk-w__list.in .pk-w__it, .pk-two__grid.in > *, .pk-plans__grid.in .pk-plan { animation: flow-txt .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .pk-w__list.in .pk-w__it:nth-child(2), .pk-two__grid.in > :nth-child(2), .pk-plans__grid.in .pk-plan:nth-child(2) { animation-delay: .12s; }
  .pk-w__list.in .pk-w__it:nth-child(3), .pk-two__grid.in > :nth-child(3), .pk-plans__grid.in .pk-plan:nth-child(3) { animation-delay: .24s; }
  .pk-w__list.in .pk-w__it:nth-child(4) { animation-delay: .36s; }
  .pk-plan::before { transform: scaleX(0); transform-origin: left; }
  .pk-plans__grid.in .pk-plan::before { animation: stp-up2 1s cubic-bezier(.5,0,.3,1) .5s forwards; }
  @keyframes stp-up2 { to { transform: none; } }
}
@media (max-width: 900px) { .pk-w__list, .pk-plans__grid { grid-template-columns: 1fr; } .pk-two__grid { grid-template-columns: 1fr; } }
.pk-hero__l { font-size: clamp(15px, 1.3vw, 17px); }

/* draft 83: package — deliverables, durations, case, first-consult checklist */
.pk-plan__dur { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 12.5px; color: var(--mute); letter-spacing: .04em; }
.pk-del__list { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pk-del__list.rv { opacity: 1 !important; transform: none !important; }
.pk-del__list li { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 10px 24px; border-radius: 10px; background: #f7f7f7; font-size: 14px; text-align: center; }
.pk-del__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; }
.pk-del__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pk-case__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }
.pk-case__in.rv { opacity: 1 !important; transform: none !important; }
.pk-case__img { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #f5f5f5; box-shadow: 0 30px 60px -36px rgba(0,0,0,.35); }
.pk-case__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s; }
.pk-case__img img.on { opacity: 1; }
.pk-case__txt p { margin: 0 0 20px; font-size: 14.5px; line-height: 2.1; color: var(--ink); }
.pk-case__steps { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pk-case__steps li { font-size: 12.5px; padding: 4px 12px; border-radius: 99px; background: rgba(222,85,71,.1); color: var(--red); }
.pk-prep__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pk-prep__l { margin: 18px 0 0; font-size: 14px; line-height: 2; color: var(--mute); }
.pk-prep__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.pk-prep__list.rv { opacity: 1 !important; transform: none !important; }
.pk-prep__list li { position: relative; padding: 16px 20px 16px 50px; border-radius: 8px; background: #f7f7f7; font-size: 14.5px; }
.pk-prep__list li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 3px; border: 1.5px solid var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .pk-del__list li, .pk-prep__list li, .pk-case__in > * { opacity: 0; transform: translateY(12px); }
  .pk-del__list.in li, .pk-prep__list.in li, .pk-case__in.in > * { animation: flow-txt .6s ease forwards; }
  .pk-del__list.in li:nth-child(2), .pk-prep__list.in li:nth-child(2), .pk-case__in.in > :nth-child(2) { animation-delay: .1s; }
  .pk-del__list.in li:nth-child(3), .pk-prep__list.in li:nth-child(3) { animation-delay: .2s; }
  .pk-del__list.in li:nth-child(4), .pk-prep__list.in li:nth-child(4) { animation-delay: .3s; }
  .pk-del__list.in li:nth-child(5), .pk-prep__list.in li:nth-child(5) { animation-delay: .4s; }
  .pk-del__list.in li:nth-child(6) { animation-delay: .5s; }
}
@media (max-width: 900px) { .pk-del__list { grid-template-columns: repeat(3, 1fr); } .pk-case__in, .pk-prep__in { grid-template-columns: 1fr; } }

/* draft 84: flow7 track + case carousel */
.pk-case__img { aspect-ratio: 1600 / 1131; background: #fff; border: 1px solid #eee; }
.pk-case__img img { transition: opacity .9s ease; }
.pk-case__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.pk-case__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(0,0,0,.18); cursor: pointer; transition: width .3s, background .3s; }
.pk-case__dots button.on { width: 18px; background: var(--red); }
.flow7__box { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.flow7__box.rv { opacity: 1 !important; transform: none !important; }
.flow7__track { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 32px; height: 2px; background: #ececec; border-radius: 2px; }
.flow7__track i { position: absolute; inset: 0; background: var(--red); border-radius: 2px; transform-origin: left; transform: scaleX(1); }
.flow7__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; }
.flow7__list li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow7__node { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1.5px solid var(--red); margin-bottom: 22px; transition: background .3s, transform .3s; }
.flow7__node svg { width: 26px; height: 26px; fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.flow7__node--seal { border: 0; background: #fff; box-shadow: 0 10px 24px -10px rgba(222,85,71,.5); }
.flow7__node--seal img { width: 46px; height: 46px; }
.flow7__list li:not(:last-child):hover .flow7__node { background: var(--red); transform: translateY(-4px); }
.flow7__list li:hover .flow7__node svg { stroke: #fff; }
.flow7__list li:last-child:hover .flow7__node { transform: translateY(-4px) rotate(-8deg); }
.flow7__list h3 { margin: 0 0 8px; font-weight: 400; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: .06em; }
.flow7__list p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--mute); max-width: 11em; }
@media (prefers-reduced-motion: no-preference) {
  .flow7__track i { transform: scaleX(0); }
  .flow7__box.in .flow7__track i { animation: f7-line 1.6s cubic-bezier(.6,0,.2,1) .2s forwards; }
  .flow7__list li { opacity: 0; transform: translateY(14px); }
  .flow7__box.in .flow7__list li { animation: flow-txt .6s ease forwards; animation-delay: calc(.2s + var(--k) * .26s); }
  .flow7__box.in .flow7__node--seal { animation: f7-seal .5s cubic-bezier(.3,1.6,.5,1) 1.75s both; }
}
@keyframes f7-line { to { transform: scaleX(1); } }
@keyframes f7-seal { 0% { transform: scale(1.5) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 900px) {
  .flow7__track { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; }
  .flow7__track i { transform-origin: top; }
  .flow7__list { grid-template-columns: 1fr; gap: 22px; }
  .flow7__list li { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; text-align: left; align-items: center; }
  .flow7__node { grid-row: span 2; margin: 0; }
  .flow7__list h3 { margin: 0; align-self: end; } .flow7__list p { align-self: start; max-width: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .flow7__track i { transform: scaleY(0); } @keyframes f7-line { to { transform: scaleY(1); } } }

/* draft 85: works page — collage within content width, industries grid, more works */
.wrap > .collage { padding: 0; }
.ind2 { padding: var(--sec-y) 0 0; }
.ind2__list { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ind2__list.rv { opacity: 1 !important; transform: none !important; }
.ind2__list li { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 99px; background: #f7f7f7; transition: background .3s, transform .3s; }
.ind2__img { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #fff; }
.ind2__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.ind2__t { font-size: 15px; letter-spacing: .06em; color: var(--ink); line-height: 1.4; }
.ind2__list li:hover { background: rgba(222,85,71,.08); transform: translateY(-3px); }
.ind2__list li:hover .ind2__t { color: var(--red); }
.ind2__list li:hover .ind2__img img { transform: scale(1.12); }
@media (prefers-reduced-motion: no-preference) {
  .ind2__list li { opacity: 0; transform: translateY(12px); }
  .ind2__list.in li { animation: flow-txt .5s ease forwards; animation-delay: calc(var(--k) * .06s); }
  .ind2__list.in li:hover { transform: translateY(-3px); }
}
@media (max-width: 1100px) { .ind2__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ind2__list { grid-template-columns: 1fr 1fr; } .ind2__t { font-size: 13.5px; } .ind2__img { width: 40px; height: 40px; } }

/* draft 86: moutai tile — sunrise glow + sheen + rising sparkles (no haze) */
.mtx__haze { display: none; }
.mtx__sheen { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 48%, rgba(255,240,220,.25) 52%, rgba(255,255,255,0) 60%); background-size: 250% 100%; background-position: 130% 0; pointer-events: none; }
.mtx__sp { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #f3b37a; box-shadow: 0 0 8px 2px rgba(243,170,110,.7); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mtx__sun { animation: mt-sun3 5s ease-in-out infinite; }
  .mtx__rays { animation: mt-rays 60s linear infinite, mt-raysop 5s ease-in-out infinite; }
  .mtx__sheen { animation: mt-sheen 6.5s ease-in-out infinite; }
  .mtx__sp { animation: mt-sp 6.6s ease-out infinite; animation-delay: var(--d); }
  @keyframes mt-sun3 { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.08); opacity: .95; } }
  @keyframes mt-sheen { 0%, 25% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }
  @keyframes mt-sp { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-90px) scale(1.1); } }
}

/* draft 87: moutai sun — no rays; soft ripples spreading from the sun */
.mtx__rays, .mtx__sheen { display: none; }
.mtx__ring { position: absolute; left: 63.4%; top: 41%; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(214, 70, 50, .55); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .mtx__sun { animation: mt-sun4 6s ease-in-out infinite; }
  .mtx__ring { animation: mt-ring 6s cubic-bezier(.2,.6,.3,1) infinite; }
  .mtx__ring--2 { animation-delay: 2s; } .mtx__ring--3 { animation-delay: 4s; }
  @keyframes mt-sun4 { 0%, 100% { transform: scale(.92); opacity: .45; } 50% { transform: scale(1.04); opacity: .85; } }
  @keyframes mt-ring { 0% { transform: scale(.9); opacity: 0; } 12% { opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
}

/* draft 88: work cards show the whole image */
.work--card .shot { object-fit: contain; object-position: center; background: #fff; }

/* draft 89: CEO portrait — cut-out on a vermilion disc, dog photo as round badge */
.ceo2 { position: relative; padding: 0; aspect-ratio: 1 / 1.02; max-width: 520px; }
.ceo2.rv { opacity: 1 !important; transform: none !important; }
.ceo2__disc { position: absolute; left: 4%; right: 4%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--red); }
.ceo2__cut { position: absolute; left: 50%; bottom: 0; width: 88%; translate: -50% 0; display: block; -webkit-mask: linear-gradient(#000 80%, #000); clip-path: inset(-50% -50% 0 -50% round 0 0 50% 50%); }
.ceo2__dog { position: absolute; right: -2%; bottom: 4%; width: 32%; aspect-ratio: 1; object-fit: cover; object-position: 30% 70%; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 16px 32px -18px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: no-preference) {
  .ceo2__disc { transform: scale(.6); opacity: 0; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s; }
  .ceo2__cut { opacity: 0; transform: translateY(24px); transition: transform 1s cubic-bezier(.2,.8,.2,1) .25s, opacity .8s .25s; }
  .ceo2__dog { opacity: 0; transform: scale(.7); transition: transform .6s cubic-bezier(.3,1.5,.5,1) .8s, opacity .4s .8s; }
  .ceo2.in .ceo2__disc, .ceo2.in .ceo2__dog { transform: none; opacity: 1; }
  .ceo2.in .ceo2__cut { transform: none; opacity: 1; }
}
.ceo2 { aspect-ratio: 1 / 1.12; }
.ceo2__clip { position: absolute; left: 4%; right: 4%; bottom: 0; aspect-ratio: 1; clip-path: inset(-40% 0 0 0 round 0 0 50% 50%); }
.ceo2__cut { width: 86%; clip-path: none; -webkit-mask: none; }
.ceo2__cut { translate: -60% 0; }

/* draft 90: CEO — light arch instead of red disc, small seal as 落款 */
.ceo2 { aspect-ratio: 4 / 5; max-width: 460px; }
.ceo2__disc { left: 0; right: 0; top: 0; bottom: 0; aspect-ratio: auto; border-radius: 999px 999px 18px 18px; background: #f3f2f0; }
.ceo2__clip { left: 0; right: 0; top: 0; bottom: 0; aspect-ratio: auto; clip-path: inset(-20% 0 0 0 round 0 0 18px 18px); }
.ceo2__cut { width: 92%; translate: -56% 0; }
.ceo2__seal { position: absolute; right: -18px; bottom: 26px; width: 64px; height: 64px; padding: 8px; background: #fff; border-radius: 50%; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); rotate: -8deg; }
@media (prefers-reduced-motion: no-preference) {
  .ceo2__seal { opacity: 0; transform: scale(1.6); transition: transform .45s cubic-bezier(.3,1.4,.5,1) .9s, opacity .3s .9s; }
  .ceo2.in .ceo2__seal { opacity: 1; transform: none; }
}
.ceo2__disc { background: #f2f2f2; } .ceo2__seal { right: 16px; }

/* draft 91: compact work detail */
.page-hero:has(+ .wd) { padding-bottom: clamp(24px, 3vw, 36px) !important; }
.wd { padding-top: 0; }
.wd .case-meta--4 { margin-bottom: clamp(24px, 3vw, 36px); }
.wd .case-meta div { padding: 12px 0; }
.wd .case-meta dd { font-size: 14px; line-height: 1.8; }
.wd .vid-hero, .wd .ipx-hero, .wd > .wrap > .shot { margin-bottom: 0; }
.wd-txt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); padding: clamp(36px, 4vw, 56px) 0; }
.wd-h { margin: 0 0 12px; font-weight: 400; font-size: 18px; letter-spacing: .06em; }
.wd-txt .lead { font-size: 14.5px; line-height: 2; margin: 0; }
.wd-shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); align-items: start; }
.wd-shots .shot { aspect-ratio: auto; object-fit: initial; margin: 0; }
.wd-shots .shot:first-child:nth-last-child(odd), .wd-shots .ph { grid-column: 1 / -1; }
@media (max-width: 760px) { .wd-txt, .wd-shots { grid-template-columns: 1fr; } }

/* draft 92: CEO — plain cut-out on white, seal stamped by the signature */
.ceo3 { margin: 0; padding: 0; max-width: 460px; }
.ceo3 img { display: block; width: 100%; height: auto; }
.ceo-sign { position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 28px 0 0; font-size: 14px; color: var(--mute); letter-spacing: .08em; }
.ceo-sign.rv { opacity: 1 !important; transform: none !important; }
.ceo-sign b { font-weight: 400; font-size: 18px; color: var(--ink); letter-spacing: .2em; }
.ceo-stamp { display: inline-block; width: 64px; height: 64px; margin-left: 6px; rotate: -6deg; mix-blend-mode: multiply; }
.ceo-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .ceo-stamp { opacity: 0; transform: scale(1.8) translateY(-10px); }
  .ceo-sign.in .ceo-stamp { animation: ceo-stamp .55s cubic-bezier(.5,0,.3,1) .5s forwards; }
  @keyframes ceo-stamp { 0% { opacity: 0; transform: scale(1.8) translateY(-10px); } 60% { opacity: 1; transform: scale(.94); } 80% { transform: scale(1.03); } 100% { opacity: .92; transform: none; } }
}

/* draft 93: justified CJK paragraphs; smaller CEO photo */
.intro3__st, .lead, .ceo + div .lead, .pk-case__txt p, .pk-prep__l { text-align: justify; text-justify: inter-character; }
.intro3__st em { white-space: normal; }
.ceo3 { max-width: 340px; }
.ceo .ceo3 { max-width: 260px !important; width: 100%; }

/* draft 94: case meta — centered cells */
.case-meta div, .case-meta div + div { padding: 16px 14px; text-align: center; }
.wd .case-meta div { padding: 14px 14px; }
.case-meta dt { margin-bottom: 4px; }

/* draft 95: tighter about intro → CEO; vertical labels gone */
.intro2--about { padding-bottom: clamp(24px, 3vw, 40px) !important; }
.intro2--about + .sec { padding-top: clamp(32px, 4vw, 56px) !important; }
.sec__head--v { padding-left: 0 !important; }
.vlabel { display: none !important; }

/* draft 96: strengths — one-line lead, tidy 5 columns */
@media (min-width: 1100px) { .why5 .why4__lead { white-space: nowrap; } }
.why5 .why4__list { align-items: start; }
.why5 .why4__list li { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.why5 .why4__list li.rv { transform: none !important; }
.why5 .why4__no { display: none !important; }
.why5 .why4__kw { margin: 0; line-height: 1.3; }
.why5 .why4__list p { margin: 10px 0 0 !important; text-align: left; line-height: 1.9; }

/* draft 97: ゴ and ウ appear as their own logo pieces, then join together */
@media (prefers-reduced-motion: no-preference) {
  
  .js .kstory:not(.k-done) .part--sit { animation: k-sitin .8s ease calc(.3s + var(--i) * 2.4s) backwards, k-join 1.1s cubic-bezier(.5, 0, .2, 1) 8.9s backwards; }
  @keyframes k-sitin { from { opacity: 0; filter: blur(3px); } }
  @keyframes k-join { from { transform: translate(var(--dx), var(--dy)); } }
}
.kstory .cam, .kstory .cam__in, .kstory .seal, .kstory .kstage { overflow: visible !important; }
.kstory .part--sit { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes k-join { from { transform: translate(var(--dx), var(--dy)) scale(.85); } }
}

.kstory .part--fb { transform-box: fill-box; transform-origin: 50% 50%; }
.kstory .kana-row span:nth-child(4) { position: relative; left: -64%; top: 23%; }
.kstory .kana-row span:nth-child(3) { position: relative; left: 24%; top: 30%; }

/* draft 98: logo story — heavier stamp press, seal-like ink */
.kstory .seal .ink { fill: #CC3A2C; filter: url(#inkSeal); }
@media (prefers-reduced-motion: no-preference) {
  .js .kstory:not(.k-done) .clean { animation: k-show 12s linear backwards, k-lift .5s ease 11.2s backwards, k-press2 .3s cubic-bezier(.7, 0, .9, .5) 11.7s backwards; }
  .js .kstory:not(.k-done) .ink-grow { animation: a-bleed .6s cubic-bezier(.15, .9, .2, 1) 11.98s backwards; }
  .js .kstory:not(.k-done) .cam { animation: k-thud2 .55s cubic-bezier(.2, .7, .3, 1) 11.98s; }
  @keyframes k-lift2 { to { transform: scale(1.18) rotate(-3deg); filter: drop-shadow(0 10px 10px rgba(60, 30, 20, .32)); } }
  @keyframes k-press2 { from { transform: scale(1.08); filter: drop-shadow(0 4px 4px rgba(60, 40, 30, .25)); } to { transform: scale(1); filter: drop-shadow(0 0 0 rgba(60, 30, 20, 0)); } }
  @keyframes k-thud2 { 0% { transform: none; } 25% { transform: translateY(7px) scale(.965); } 55% { transform: translateY(-1.5px) scale(1.01); } 100% { transform: none; } }
}
@media (prefers-reduced-motion: no-preference) {
  
  @keyframes k-ringoff { from, to { stroke-dashoffset: 105; } }
}

/* draft 99: about page compaction; section heads horizontal */
.sec__head--v { grid-template-columns: 1fr auto !important; }
.intro2--about ~ .sec, .intro2--about ~ .sec2 { padding-top: clamp(56px, 6vw, 88px) !important; padding-bottom: clamp(56px, 6vw, 88px) !important; }
.intro2--about + .sec { padding-top: clamp(32px, 4vw, 56px) !important; }
.intro2--about ~ .sec:last-of-type { padding-top: 0 !important; }
#promise { margin-bottom: 0 !important; }

/* draft 100: contact — QR codes, prettier map, privacy page */
.qr2 { display: flex; gap: 20px; margin-top: 28px; }
.qr2__it { margin: 0; text-align: center; }
.qr2__box { display: grid; place-items: center; width: 116px; height: 116px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 14px 28px -20px rgba(0,0,0,.35); }
.qr2__box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr2__ph { font-style: normal; font-size: 12px; letter-spacing: .1em; color: var(--mute); width: 100%; height: 100%; display: grid; place-items: center; border: 1px dashed #d8d8d8; border-radius: 6px; }
.qr2__it figcaption { margin-top: 10px; font-size: 13px; letter-spacing: .08em; color: var(--ink); }
.access__frame { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3; background: #f3f3f3; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
.access__frame iframe { position: absolute; left: 0; top: -150px; width: 100%; height: calc(100% + 150px); aspect-ratio: auto; border-radius: 0; filter: grayscale(1) contrast(.92) brightness(1.06); }
.access__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(222, 85, 71, .04); mix-blend-mode: multiply; }
.access__pin { position: absolute; left: 50%; top: calc(50% - 75px); z-index: 2; width: 54px; height: 54px; margin: -54px 0 0 -27px; padding: 7px; border-radius: 50% 50% 50% 0; background: #fff; rotate: -45deg; box-shadow: 0 10px 20px -8px rgba(0,0,0,.35); pointer-events: none; }
.access__pin img { width: 100%; height: 100%; display: block; rotate: 45deg; }
.access__pin::after { content: ""; position: absolute; left: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: rgba(222, 85, 71, .35); }
@media (prefers-reduced-motion: no-preference) { .access__pin::after { animation: pin-pulse 2.2s ease-out infinite; } @keyframes pin-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(3); opacity: 0; } } }
.pv__in { max-width: 760px; }
.pv__it + .pv__it { margin-top: clamp(28px, 3vw, 40px); }
.pv__it h2 { margin: 0 0 10px; font-weight: 400; font-size: 18px; letter-spacing: .06em; }
.pv__it p { margin: 0; font-size: 14.5px; line-height: 2.1; color: var(--ink); text-align: justify; }
.pv__date { margin-top: 48px; font-size: 13px; color: var(--mute); }
.foot3__pv { margin-right: 18px; color: inherit; text-decoration: none; }
.foot3__pv:hover { color: var(--red); }
.access__frame iframe { top: 0; height: 100%; }
.access__pin { top: 50%; }
.qr2__card { width: 112px; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0,0,0,.12)); }
.qr2--s { margin-top: 4px; gap: 16px; }
.qr2--s .qr2__card { width: 96px; }
.access__pin { pointer-events: auto; cursor: pointer; transition: transform .3s; }
.access__pin:hover { transform: translateY(-4px); }
.access__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); rotate: 45deg; translate: -10% 0; white-space: nowrap; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.access__pin:hover .access__tip { opacity: 1; }

/* draft 101: compact contact page */
.ct-form { padding-top: clamp(24px, 3vw, 40px) !important; padding-bottom: clamp(48px, 5vw, 72px) !important; }
.ct-form .form label { margin-bottom: 0; }
.ct-form .form { row-gap: 14px; }
.ct-form + .access { padding-top: clamp(40px, 4vw, 64px) !important; padding-bottom: clamp(56px, 6vw, 88px) !important; }
.ct-form .contact__info { margin-top: 16px !important; }
.ct-form .qr2 { margin-top: 20px; }
.ct-form { padding-bottom: clamp(32px, 3vw, 48px) !important; } .ct-form + .access { padding-top: clamp(24px, 3vw, 40px) !important; }
.qr2__box { width: 112px; height: 112px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #ececec; }
.qr2__box img { width: 100%; height: 100%; }
.qr2__it figcaption { margin-top: 8px; font-size: 13px; letter-spacing: .1em; color: var(--mute); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* draft 102: contact info plain links; refined QR cards */
.ct-form .contact__info a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .3s, color .3s; }
.ct-form .contact__info a:hover { color: var(--red); border-color: var(--red); }
.ct-form .qr2 { display: inline-flex; gap: 14px; margin-top: 24px; padding: 14px; border-radius: 18px; background: #f6f6f6; }
.ct-form .qr2__it { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ct-form .qr2__box { width: 104px; height: 104px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px -12px rgba(0,0,0,.25); transition: transform .3s, box-shadow .3s; }
.ct-form .qr2__it:hover .qr2__box { transform: translateY(-3px); box-shadow: 0 14px 24px -14px rgba(0,0,0,.3); }
.ct-form .qr2__it figcaption { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; letter-spacing: .1em; color: var(--ink); }
.ct-form .qr2__it figcaption::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

/* draft 103: concept page compaction */
.concept-hero { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(48px, 5vw, 80px) !important; }
.concept-hero + .sec { padding-bottom: clamp(48px, 5vw, 80px) !important; }
.concept-hero + .sec .chapter { padding: clamp(28px, 3vw, 44px) 0; }
.concept-hero + .sec .chapter:last-child { border-bottom: 0; }
.concept-hero ~ .quiet--grey { padding: clamp(56px, 6vw, 96px) 0 !important; }

/* draft 104: mobile fixes */
@media (max-width: 800px) {
  .foot3__row nav { flex: 1 1 100% !important; gap: 10px 18px; }
  .foot3__copy { width: 100%; }
}
@media (max-width: 800px) {
  .road__head { grid-template-columns: 1fr !important; grid-template-rows: none !important; gap: 16px; }
  .road__head .sec2__title { grid-row: auto !important; }
  .intro2--about .intro2__eq { display: flex !important; flex-wrap: nowrap; column-gap: 10px; font-size: clamp(26px, 8vw, 34px); }
  .intro2--about .intro2__eq > * { grid-column: auto !important; }
}
@media (max-width: 800px) { html:lang(ja) .intro2--about .intro2__eq { font-size: clamp(22px, 6.4vw, 30px); column-gap: 8px; letter-spacing: 0; } html:lang(ja) .intro2--about .intro2__eq * { letter-spacing: .02em; } }
@media (max-width: 800px) { .intro2--about .intro2__w b { font-size: 34px !important; } html:lang(ja) .intro2--about .intro2__w b { font-size: clamp(22px, 6.6vw, 30px) !important; letter-spacing: .02em !important; } .intro2--about .intro2__x { font-size: 16px !important; } }
@media (max-width: 800px) {
  .road__head > * { grid-column: 1 !important; }
  /* works collage captions */
  .grp .bt__cap { left: 12px !important; right: 12px; bottom: 10px !important; }
  .grp .bt__cap b { font-size: 13px !important; line-height: 1.4; }
  .grp .g-big .bt__cap b { font-size: 15px !important; }
  .grp .bt__cap em { font-size: 11px !important; }
  .grp .g-s1 .bt__cap em, .grp .g-s2 .bt__cap em { display: none; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.wall { height: min(94vh, 900px); height: min(94svh, 900px); }
@media (max-width: 800px) { .wall { height: auto; } .wall__rows { height: 46vh; height: 46svh; } }
@media (max-width: 800px) { .grp .bt::after { background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .wall__track { will-change: transform; transform: translate3d(0,0,0); animation: wall-x2 var(--dur, 90s) linear infinite; }
  .wall__track--rev { animation: wall-x2r var(--dur, 90s) linear infinite; transform: translate3d(-50%,0,0); }
  @keyframes wall-x2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @keyframes wall-x2r { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
}
@media (max-width: 800px) { .wall__row { --dur: 60s !important; } }
.foot5__ad { display: inline-flex; flex-wrap: wrap; column-gap: .8em; }
.foot5__ad span { white-space: nowrap; }
@media (max-width: 800px) { .foot5__ad { flex-direction: column; } }
picture { display: block; }
/* mobile wall: no transform animation (iOS WebView fails to paint wide animated layers) */
@media (max-width: 800px) {
  .wall__track, .wall__track--rev { animation: none !important; transform: none !important; will-change: auto !important; }
  .wall__row:nth-child(1) .wall__track { margin-left: -12vw; }
  .wall__row:nth-child(2) .wall__track { margin-left: -46vw; }
  .wall__row:nth-child(3) .wall__track { margin-left: -24vw; }
}
@media (max-width: 800px) { .road__list::before { top: 10px !important; } }
/* mobile flow7: circle → line → circle … step by step */
@media (max-width: 900px) {
  .flow7__track { display: none !important; }
  .flow7__list li { position: relative; }
  .flow7__list li:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 64px; width: 2px; height: calc(100% - 64px + 22px); background: var(--red); transform-origin: top; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .flow7__list li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .flow7__list li > :not(.flow7__node) { opacity: 0; transform: translateY(8px); }
  .flow7__node { opacity: 0; transform: scale(.4); }
  .flow7__list li:not(:last-child)::after { transform: scaleY(0); }
  .flow7__box.in .flow7__node { animation: f7m-node .4s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: calc(.1s + var(--k) * .55s) !important; }
  .flow7__box.in .flow7__list li > :not(.flow7__node) { animation: flow-txt .45s ease forwards; animation-delay: calc(.25s + var(--k) * .55s); }
  .flow7__box.in .flow7__list li:not(:last-child)::after { animation: f7m-line .3s linear forwards; animation-delay: calc(.4s + var(--k) * .55s); }
  @keyframes f7m-node { to { opacity: 1; transform: none; } }
  @keyframes f7m-line { to { transform: scaleY(1); } }
}

/* draft 105: poster row on work detail */
.wd-posters { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 20px); margin-bottom: clamp(14px, 1.6vw, 22px); }
.wd-posters .shot { aspect-ratio: auto; object-fit: initial; margin: 0; border: 0; border-radius: 4px; box-shadow: 0 14px 28px -18px rgba(0,0,0,.35); }
@media (max-width: 760px) { .wd-posters { grid-template-columns: 1fr 1fr; } .wd-posters picture:first-child { grid-column: 1 / -1; } }
.wd picture > .shot, .chapter picture > .shot, .shots picture > .shot { aspect-ratio: auto !important; object-fit: initial !important; height: auto; }
.wd-shots > :first-child:nth-last-child(odd) { grid-column: auto; }
.wd-shots > :last-child:nth-child(odd) { grid-column: 1 / -1; }