/* Layout: 白地の大きな余白 + 巨大な欧文見出し。各セクションは「英字ラベル | 日本語本文」の2カラム。ロゴの「つなぐ線」をページ全体のモチーフにする */
:root{
  --bg:#fbfbf9;
  --fg:#111214;
  --muted:#65676d;
  --line:#e3e3df;
  --panel:#f1f1ed;
  --accent:#2f4bff;
  --on-accent:#ffffff;
  --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1012;--fg:#f1f1ec;--muted:#9a9ca2;--line:#26282c;--panel:#17191c;--accent:#7d8cff;--on-accent:#0f1012;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1012;--fg:#f1f1ec;--muted:#9a9ca2;--line:#26282c;--panel:#17191c;--accent:#7d8cff;--on-accent:#0f1012;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{text-wrap:balance;margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ph{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:3px;padding:0 4px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:30px;height:30px;flex:none}
.logo .word{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.03em;line-height:1}
.logo .word small{display:block;font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:.08em;color:var(--muted);margin-top:3px}
.mk-a{fill:var(--fg)}.mk-b{fill:var(--accent)}.mk-l{stroke:var(--fg);stroke-width:3;stroke-linecap:round;fill:none}.mk-p{fill:var(--bg)}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
nav{display:flex;align-items:center;gap:26px;font-size:14px}
nav a{text-decoration:none}
nav a:not(.btn):hover{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:500;font-size:14px;border:0;cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.btn:hover{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
@media (max-width:820px){nav a:not(.btn){display:none}}

/* hero */
.hero{padding-block:clamp(56px,9vw,112px) clamp(40px,6vw,72px)}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:clamp(28px,5vw,56px)}
.clock{font-variant-numeric:tabular-nums}
.clock b{color:var(--fg);font-weight:500}
.hero .display{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,11vw,156px);line-height:.9;letter-spacing:-.045em}
.hero .display .thread{display:inline-block;width:.9em;height:.12em;background:var(--accent);border-radius:99px;vertical-align:.22em;margin-inline:.08em}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-top:clamp(32px,5vw,56px)}
.hero-copy{display:grid;gap:14px;max-width:36em}
.hero-copy strong{font-size:clamp(20px,2.4vw,28px);font-weight:900;line-height:1.5}
.hero-copy p{margin:0;color:var(--muted)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
@media (max-width:640px){.hero-foot{grid-template-columns:1fr}.scroll{display:none}}
.scroll{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding-block:18px;white-space:nowrap}
.ticker-track{display:inline-flex;gap:48px;animation:tick 32s linear infinite;font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em}
.ticker-track span::after{content:"";display:inline-block;width:28px;height:4px;border-radius:9px;background:var(--accent);vertical-align:middle;margin-left:48px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* sections */
section.block{padding-block:clamp(72px,10vw,128px);border-bottom:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(24px,5vw,80px)}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}
.sec-head{display:grid;gap:12px;align-content:start}
.sec-title{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;line-height:1}
.lead{font-size:clamp(22px,2.8vw,32px);font-weight:900;line-height:1.55;margin:0 0 24px}
.body{max-width:40em}
.body p{margin:0 0 1em}

/* problems */
.probs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:28px}
.probs div{background:var(--bg);padding:20px 22px;font-weight:500;display:flex;gap:12px;align-items:baseline}
.probs div::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}
@media (max-width:560px){.probs{grid-template-columns:1fr}}

/* service steps */
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.4fr);gap:20px;padding-block:28px;border-bottom:1px solid var(--line);align-items:baseline;transition:padding .25s}
.svc li:hover{padding-left:8px}
.svc .no{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.svc h3{font-size:clamp(20px,2.2vw,26px);font-weight:700}
.svc h3 small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-top:4px}
.svc p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:640px){.svc li{grid-template-columns:44px minmax(0,1fr)}.svc p{grid-column:2}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:8px;padding:28px;display:grid;gap:14px;align-content:start}
.plan.pick{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.plan .tag{justify-self:start;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;background:var(--accent);color:var(--on-accent);padding:3px 8px;border-radius:99px}
.plan h3{font-size:22px;font-weight:700}
.price{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,40px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.price small{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px}
.plan li::before{content:"— ";color:var(--muted)}
.fine{font-size:13px;color:var(--muted);margin-top:20px}

/* works */
.works-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
@media (max-width:900px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.works{grid-template-columns:1fr}}
.work{text-decoration:none;display:grid;gap:12px}
.thumb{aspect-ratio:16/9;max-width:100%;border-radius:6px;overflow:hidden;background:var(--panel);position:relative;display:grid;place-items:center}
.thumb .play{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--bg) 85%,transparent);display:grid;place-items:center;transition:transform .35s}
.thumb .play::before{content:"";border-left:16px solid var(--fg);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.work:hover .play{transform:scale(1.12)}
.thumb .dur{position:absolute;right:10px;bottom:8px;font-family:var(--font-mono);font-size:11px;background:var(--fg);color:var(--bg);padding:1px 6px;border-radius:3px}
.t1{background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--accent) 24%,var(--panel)))}
.t2{background:repeating-linear-gradient(90deg,var(--panel) 0 22px,color-mix(in srgb,var(--fg) 6%,var(--panel)) 22px 23px)}
.t3{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 30%,var(--panel)),var(--panel) 60%)}
.work-meta{display:grid;gap:2px;font-size:15px}
.work-meta b{font-weight:700}
.work-meta span{color:var(--muted);font-size:13px}

/* flow */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:f}
.flow li{position:relative;padding:22px 18px 0 0;border-top:2px solid var(--line);display:grid;gap:6px;align-content:start}
.flow li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.flow li:first-child::before{background:var(--accent)}
.flow .no{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.flow b{font-size:17px}
.flow span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.flow{grid-template-columns:1fr;gap:0;border-left:2px solid var(--line);margin-left:6px}
  .flow li{border-top:0;padding:0 0 26px 24px}.flow li::before{top:6px;left:-8px}}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding-block:22px;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 22px;color:var(--muted);max-width:40em}

/* contact */
.contact{padding-block:clamp(80px,11vw,150px);border-bottom:1px solid var(--line)}
.contact h2{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,10vw,132px);line-height:.95;letter-spacing:-.045em;margin:20px 0 28px}
.contact h2 span{color:var(--accent)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:500}
.field label em{font-style:normal;color:var(--accent);font-size:12px;margin-left:6px}
input,select,textarea{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
textarea{min-height:130px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.sent{background:var(--panel);border-radius:6px;padding:14px 16px;font-size:14px}

/* company */
.company{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.company dt,.company dd{margin:0;padding-block:16px;border-bottom:1px solid var(--line)}
.company dt{color:var(--muted);font-size:14px;padding-right:40px}

footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:32px;font-size:13px;color:var(--muted)}
footer nav{gap:20px;font-size:13px}
footer nav a{display:inline!important}
.works{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:560px){.works{grid-template-columns:1fr!important}}
.thumb .tname{position:absolute;left:14px;bottom:10px;right:70px;font-weight:700;font-size:15px;line-height:1.3;color:var(--fg)}
.t4{background:linear-gradient(160deg,color-mix(in srgb,var(--fg) 8%,var(--panel)),color-mix(in srgb,var(--accent) 18%,var(--panel)))}
.plan .price{font-size:clamp(28px,3vw,38px)}
.plan .price small{font-size:14px}

/* ===== Opening ===== */
:root{--intro:2.05s}
html.seen{--intro:0s}
.intro{position:fixed;inset:0;z-index:60;background:var(--fg);color:var(--bg);display:grid;place-items:center;pointer-events:none;
  animation:introOut .8s cubic-bezier(.76,0,.24,1) 1.55s forwards}
html.seen .intro{display:none}
.intro-inner{display:grid;justify-items:center;gap:22px;padding-inline:16px}
.intro-mark{width:clamp(88px,14vw,128px);height:auto;overflow:visible}
.im-line{stroke:var(--bg);stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:14;stroke-dashoffset:14;animation:draw .45s ease-out .35s forwards}
.im-a{fill:var(--bg);transform-origin:7px 16px;transform:scale(0);animation:pop .45s cubic-bezier(.34,1.56,.64,1) .1s forwards}
.im-b{fill:var(--accent);transform-origin:23px 16px;transform:scale(0);animation:pop .5s cubic-bezier(.34,1.56,.64,1) .6s forwards}
.im-p{fill:var(--fg);opacity:0;animation:fade .3s ease-out .95s forwards}
.intro-word{display:flex;overflow:hidden;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,6vw,56px);letter-spacing:-.035em;line-height:1.1}
.intro-word span{display:inline-block;transform:translateY(105%);animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.75s + var(--i)*.04s)}
.intro-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:fade .5s ease-out 1.05s forwards;color:color-mix(in srgb,var(--bg) 65%,var(--fg))}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{transform:translateY(0)}}
/* hero entrance */
.hero .display .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero .display .ln>span{display:inline-block;animation:lineUp 1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--intro)}
.hero .display .ln:nth-child(2)>span{animation-delay:calc(var(--intro) + .1s)}
.hero .display .ln:nth-child(3)>span{animation-delay:calc(var(--intro) + .2s)}
@keyframes lineUp{from{transform:translateY(110%)}}
.hero .display .thread{transform-origin:left center;animation:grow .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--intro) + .45s)}
@keyframes grow{from{transform:scaleX(0)}}
.hero-meta,.hero-foot,header{animation:fadeUp .8s ease-out backwards}
header{animation-delay:calc(var(--intro) + .2s)}
.hero-meta{animation-delay:calc(var(--intro) + .1s)}
.hero-foot{animation-delay:calc(var(--intro) + .4s)}
.ticker{animation:fade .8s ease-out backwards;animation-delay:calc(var(--intro) + .6s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}
/* scroll progress line */
.progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:20}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .hero .display .ln>span,.hero .display .thread,.hero-meta,.hero-foot,header,.ticker{animation:none}
}
.mission{font-size:clamp(26px,3.6vw,44px);font-weight:900;line-height:1.45;margin:0 0 20px;text-wrap:balance}
.value,.message{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);display:grid;gap:10px}
.value h3{font-family:var(--font-body);font-size:clamp(22px,2.6vw,30px);font-weight:900}
.value h3::before{content:"";display:inline-block;width:.9em;height:.14em;background:var(--accent);border-radius:9px;vertical-align:.3em;margin-right:.35em}
.value p,.message p{margin:0}
.message p+p{margin-top:.4em}
.message .sign{margin-top:12px;font-weight:700;text-align:right}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:40px}
.stats div{background:var(--bg);padding:24px;display:grid;gap:6px;align-content:start}
.stats b{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stats b small{font-family:var(--font-body);font-size:.42em;letter-spacing:0;margin-left:2px}
.stats span{font-size:14px;color:var(--muted)}
@media (max-width:760px){.stats{grid-template-columns:1fr}}

/* ===== multi-page ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
nav a[aria-current="page"]{color:var(--accent)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;color:var(--fg)}
.menu-btn span:not(.sr){position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:25px}
header.open .menu-btn span:nth-child(1){transform:translateY(4px) rotate(45deg)}
header.open .menu-btn span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
#gnav{gap:clamp(16px,2.2vw,36px);font-size:clamp(13px,1.15vw,15px);font-weight:500;letter-spacing:.04em}
#gnav .btn{font-family:var(--font-body);font-size:clamp(14px,1.3vw,17px);padding:.75em 1.4em;margin-left:clamp(0px,1vw,12px)}
#gnav a:not(.btn){position:relative;padding:6px 0}
#gnav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
#gnav a:not(.btn):hover::after,#gnav a[aria-current="page"]::after{transform:scaleX(1)}
#gnav .btn[aria-current="page"]{color:#fff}
@media (min-width:769px){#gnav a:not(.btn){display:inline-block}}
@media (max-width:768px){
  .menu-btn{display:block}
  #gnav{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 69px) 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  header.open #gnav{opacity:1;transform:none;visibility:visible}
  #gnav a:not(.btn){display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:18px;font-weight:700}
  #gnav a:not(.btn)::after{display:none}
  #gnav .btn{margin-top:16px;justify-content:center}
}
.page-head{padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.page-head .display{margin:12px 0 0;font-family:var(--font-display);font-weight:800;font-size:clamp(52px,10vw,140px);line-height:.95;letter-spacing:-.045em}
.page-head .display em{font-style:normal;color:var(--accent)}
.page-head h1{font-size:clamp(18px,2vw,22px);font-weight:700;margin-top:18px}
.page-head .ln{display:block;overflow:hidden;padding-bottom:.06em}
.page-head .ln>span{display:inline-block;animation:lineUp .9s cubic-bezier(.2,.8,.2,1) backwards}
.page-head h1,.crumb{animation:fadeUp .7s ease-out .25s backwards}
.crumb{display:flex;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--accent)}
.more{margin-top:36px}
.more-link{display:inline-flex;align-items:center;gap:14px;font-weight:700;text-decoration:none;padding-bottom:6px;border-bottom:2px solid var(--fg);transition:gap .25s,color .2s,border-color .2s}
.more-link i{font-style:normal}
.more-link:hover{gap:22px;color:var(--accent);border-color:var(--accent)}
.cta-band{padding-block:clamp(80px,11vw,150px);border-bottom:1px solid var(--line)}
.cta-link{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;margin:18px 0 24px;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,10vw,140px);letter-spacing:-.045em;line-height:1}
.cta-link em{font-style:normal;color:var(--accent)}
.cta-link i{font-style:normal;font-size:.5em;width:1.6em;height:1.6em;border-radius:50%;border:2px solid var(--fg);display:grid;place-items:center;flex:none;transition:background .25s,color .25s,transform .25s}
.cta-link:hover i{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:rotate(-45deg)}
.cta-band p{margin:0;color:var(--muted);max-width:36em}
footer{border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;padding-block:56px 32px}
.foot-brand p{margin:16px 0 0;font-size:13px;color:var(--muted);line-height:1.8}
.foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-nav div{display:grid;gap:10px;align-content:start}
.foot-nav a{font-size:14px;text-decoration:none}.foot-nav a:hover{color:var(--accent)}
.foot-bottom{padding-block:20px 32px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-nav{grid-template-columns:1fr 1fr}}
.legal h3{font-size:17px;margin:28px 0 6px}
.legal .body p{margin:0}
@media (prefers-reduced-motion:reduce){.page-head .ln>span,.page-head h1,.crumb{animation:none}}

/* ===== fixes ===== */
.crumb a{display:inline!important}
.hero .display .ln>span,.page-head .display .ln>span{padding-bottom:.1em;margin-bottom:-.1em}

/* ===== Page transition: two panels rise flat, leave upward with a slanted edge ===== */
:root{--pt1:#1c3366;--pt2:#0b1530}
.pt{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;visibility:hidden}
html.pt-out .pt,html.pt-in .pt{visibility:visible}
html.pt-out .pt{pointer-events:auto}
.pt i{position:absolute;left:0;right:0;top:0;height:calc(100% + 14vw);transform:translateY(100%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 14vw))}
.pt-a{background:var(--pt1)}
.pt-b{background:var(--pt2)}
html.pt-out .pt-a{animation:ptUp .55s cubic-bezier(.76,0,.24,1) forwards}
html.pt-out .pt-b{animation:ptUp .55s cubic-bezier(.76,0,.24,1) .09s forwards}
html.pt-in .pt i{transform:none}
html.pt-in .pt-b{animation:ptAway .8s cubic-bezier(.76,0,.24,1) .12s both}
html.pt-in .pt-a{animation:ptAway .8s cubic-bezier(.76,0,.24,1) .22s both}
@keyframes ptUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes ptAway{from{transform:none}to{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* ===== Brand blue (from reference: royal blue -> steel blue gradient with grain) ===== */
:root{--accent:#3352ab;--brand-deep:#24389d;--brand-mid:#4a73b8;--brand-light:#6a97bb;--brand-ink:#141821;
  --grad:linear-gradient(112deg,#24389d 0%,#3150ad 34%,#4a73b8 62%,#6a97bb 86%,#8a86a8 100%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:#8ea8e6}}
:root[data-theme="dark"]{--accent:#8ea8e6}
.grain{isolation:isolate}
.brand-band{position:relative}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.brand-band{color:#fff;background:var(--grad);clip-path:polygon(0 clamp(24px,4vw,64px),100% 0,100% calc(100% - clamp(24px,4vw,64px)),0 100%);padding-block:clamp(110px,13vw,190px)}
.brand-band>*{position:relative;z-index:0}
.brand-band .kicker{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.6vw,50px);letter-spacing:-.03em;line-height:1}
.brand-band h2{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,8vw,118px);letter-spacing:-.05em;line-height:.98;margin-top:clamp(18px,2.4vw,32px)}
.brand-band .lines{display:grid;gap:12px;justify-items:start;margin:clamp(36px,5vw,64px) 0 0 clamp(0px,11vw,170px)}
.brand-band .lines span{background:var(--brand-ink);color:#fff;padding:.55em 1em;font-weight:700;letter-spacing:.14em;font-size:clamp(14px,1.5vw,19px);line-height:1.5}
.brand-band .more-link{color:#fff;margin-top:clamp(32px,4vw,48px);display:inline-flex}
.brand-band .more-link i{border-color:#fff}
.intro{background:var(--grad)}
.intro .im-b{fill:#fff}.intro .im-p{fill:var(--brand-deep)}.intro .im-a{fill:#fff}.intro .im-line{stroke:#fff}
.intro .intro-word{color:#fff}.intro .intro-sub{color:rgba(255,255,255,.75)}
@media (max-width:520px){.brand-band .lines span{letter-spacing:.06em}.brand-band .lines{margin-left:0}}

/* ===== Scroll reveal (only when JS is running) ===== */
html.js .r-lines .rl{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
html.js .r-lines .rl>span{display:inline-block;transform:translateY(110%);transition:transform 1.05s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--l,0)*90ms)}
html.js .r-lines.in .rl>span{transform:none}
html.js .rc{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .6s ease;transition-delay:calc(var(--i,0)*24ms + .1s)}
html.js .r-chars.in .rc{opacity:1;transform:none;filter:none}
html.js .r-up{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
html.js .r-up.in{opacity:1;transform:none}
html.js .r-box{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i,0)*150ms + .25s)}
html.js .r-box.in{clip-path:inset(0 0 0 0)}
html.js .r-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i,0)*110ms)}
html.js .r-mask.in{clip-path:inset(0 0 0 0)}
html.js .r-mask>*{transition:transform 1.6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*110ms)}
html.js .r-mask:not(.in)>*{transform:scale(1.15)}
html.js .r-line{transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.76,0,.24,1)}
html.js .r-line.in{transform:none}
/* reduced motion: keep a gentle opacity fade, drop movement, blur and wipes */
@media (prefers-reduced-motion:reduce){
  html.js .r-up,html.js .rc,html.js .r-lines .rl>span,html.js .r-box,html.js .r-mask{transform:none!important;filter:none!important;clip-path:none!important;opacity:0;transition:opacity .8s ease!important}
  html.js .r-mask>*{transform:none!important;transition:none!important}
  html.js .r-up.in,html.js .r-chars.in .rc,html.js .r-lines.in .rl>span,html.js .r-box.in,html.js .r-mask.in{opacity:1}
}
.sent.err{box-shadow:inset 3px 0 0 #c2410c}
.thumb.has-img{background:#0e1016}
.thumb.has-img img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.work:hover .thumb.has-img img{transform:scale(1.04)}
.thumb.has-img .play{position:relative;z-index:1;opacity:0;transition:opacity .3s,transform .35s}
.work:hover .thumb.has-img .play{opacity:1}
.work-meta b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* works as text cards (no thumbnails) */
.works .work{position:relative;display:grid;align-content:space-between;gap:28px;min-height:clamp(150px,16vw,200px);padding:22px 22px 20px;border:1px solid var(--line);border-radius:8px;transition:border-color .3s,background .3s}
.works .work:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.works .work-meta{gap:8px;padding-right:32px}
.works .work-meta b{font-size:clamp(17px,1.6vw,20px);line-height:1.45}
.works .work-meta span{font-size:13px;color:var(--muted)}
.work-arrow{position:absolute;top:18px;right:20px;font-style:normal;font-size:18px;color:var(--muted);transition:transform .3s,color .3s}
.works .work:hover .work-arrow{color:var(--accent);transform:translate(3px,-3px)}
.works .work-meta{order:2}
main .works{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:900px){main .works{grid-template-columns:1fr!important}}
main .works .work{min-height:clamp(130px,12vw,170px)}

/* ===== Hero shapes (burst in, float, parallax) ===== */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap{position:relative;z-index:1}
.hero-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-shapes .sh{position:absolute;left:var(--x);top:var(--y);width:var(--s);transform:translate(-50%,-50%)}
html.js .hero-shapes .sh{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.05) rotate(calc(var(--r) - 200deg));opacity:0;
  transition:transform 1.25s cubic-bezier(.16,1.18,.3,1),opacity .4s ease;transition-delay:calc(var(--i)*28ms)}
html.js .hero-shapes.go .sh{transform:translate(-50%,-50%) rotate(var(--r));opacity:1}
.hero-shapes .pl{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hero-shapes .fl{animation:shFloat var(--fd,7s) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.6s)}
.hero-shapes svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes shFloat{from{transform:translate3d(0,-7px,0) rotate(-3deg)}to{transform:translate3d(0,7px,0) rotate(3deg)}}
@media (max-width:700px){.hero-shapes .sh.nm{display:none}.hero-shapes .sh{width:calc(var(--s)*.6)}}
@media (prefers-reduced-motion:reduce){html.js .hero-shapes .sh{transform:translate(-50%,-50%) rotate(var(--r))!important;opacity:1!important;transition:none!important}.hero-shapes .fl{animation:none}}

/* ===== Contact band: slanted brand panel slides in from the left ===== */
.cta-band{position:relative;isolation:isolate;color:#fff;border-bottom:0;padding-block:clamp(130px,15vw,210px) clamp(90px,11vw,150px)}
.cta-band::before,.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(0 clamp(40px,7vw,110px),100% 0,100% 100%,0 100%)}
.cta-band::before{background:var(--grad)}
.cta-band::after{opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.js .cta-band::before,html.js .cta-band::after{clip-path:polygon(0 clamp(40px,7vw,110px),0 clamp(40px,7vw,110px),0 100%,0 100%);transition:clip-path 1.3s cubic-bezier(.76,0,.24,1)}
html.js .cta-band.r-panel.in::before,html.js .cta-band.r-panel.in::after{clip-path:polygon(0 clamp(40px,7vw,110px),100% 0,100% 100%,0 100%)}
.cta-band .label{color:rgba(255,255,255,.75)}
.cta-band p{color:rgba(255,255,255,.82)}
.cta-link em{color:#fff}
.cta-link i{border-color:#fff;color:#fff}
.cta-link:hover i{background:#fff;color:var(--brand-deep);border-color:#fff}
html.js .cta-band.r-panel .label,html.js .cta-band.r-panel p{transition-delay:.55s}
html.js .cta-band.r-panel .cta-link .rl>span{transition-delay:calc(.45s + var(--l,0)*90ms)}
@media (prefers-reduced-motion:reduce){html.js .cta-band::before,html.js .cta-band::after{clip-path:polygon(0 clamp(40px,7vw,110px),100% 0,100% 100%,0 100%)!important;transition:none!important}}


/* lock scrolling during the intro */
html.lock,html.lock body{overflow:hidden;overscroll-behavior:none;touch-action:none}

/* ===== Brand surface v2 (E5): two blues split on a slant, joined by a light seam ===== */
:root{--seam:#7fd0f5;
  --grad:linear-gradient(118deg,transparent calc(58% - 1.5px),var(--seam) calc(58% - 1.5px) calc(58% + 1.5px),transparent calc(58% + 1.5px)),
         linear-gradient(118deg,var(--brand-deep) 0 58%,var(--accent) 58% 100%)}
.grain::after{display:none}
.brand-band{background:linear-gradient(112deg,var(--brand-deep) 0 60%,var(--accent) 60% 100%)}
.brand-band .tagline{margin-top:clamp(22px,2.8vw,36px)}
.brand-band .tagline span{display:inline-block;background:var(--brand-ink);color:#fff;padding:.5em .9em;font-weight:800;letter-spacing:.1em;font-size:clamp(17px,2.1vw,28px);line-height:1.5}
.brand-band>.e5-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.e5-line path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1) .35s}
.brand-band.e5-on .e5-line path{stroke-dashoffset:0}
.brand-band>.e5{position:absolute;right:max(16px,5vw);top:58%;width:min(28vw,420px);aspect-ratio:16/9;transform:translateY(-50%);border-radius:18px;background:rgba(20,24,33,.55);z-index:0;
  opacity:0;translate:40px 0;transition:opacity .7s ease-out,translate .9s cubic-bezier(.2,.8,.2,1)}
.brand-band.e5-on>.e5{opacity:1;translate:0 0}
.e5-play{position:absolute;left:50%;top:44%;width:22%;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) 1.75s}
.e5-play::after{content:"";position:absolute;left:38%;top:28%;border-style:solid;border-width:0 0 0 0;width:0;height:0;border-top:calc(.22*min(28vw,420px)*.22) solid transparent;border-bottom:calc(.22*min(28vw,420px)*.22) solid transparent;border-left:calc(.22*min(28vw,420px)*.36) solid var(--accent)}
.brand-band.e5-on .e5-play{transform:translate(-50%,-50%) scale(1)}
.e5-bar{position:absolute;left:6%;right:6%;bottom:9%;height:5px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.e5-bar b{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);transition:transform 3s linear 2.2s}
.brand-band.e5-on .e5-bar b{transform:scaleX(.34)}
@media (max-width:900px){.brand-band>.e5,.brand-band>.e5-line{display:none}}
@media (prefers-reduced-motion:reduce){.e5-line path,.brand-band>.e5,.e5-play,.e5-bar b{transition-duration:.01s;transition-delay:0s}}


/* intro keeps its original gradient + grain */
.intro{background:linear-gradient(112deg,#24389d 0%,#3150ad 34%,#4a73b8 62%,#6a97bb 86%,#8a86a8 100%)}
.intro.grain::after{display:block}

/* ===== Section divider (slanted stripes, pale) ===== */
.divider{position:relative;overflow:hidden;line-height:0}
.divider svg{display:block;width:100%;height:clamp(150px,20vw,300px)}
.divider.flip svg{transform:scaleX(-1)}
.divider .d-base{fill:#e9edf7}
.divider .d-st{fill:#dde3f2}
.divider .d-ln line{stroke:rgba(51,82,171,.35);stroke-width:1.2;vector-effect:non-scaling-stroke}
.divider .d-gh{fill:#eef1f8}
html.js .divider .d-st{transform:translateX(-120px);opacity:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s ease-out}
html.js .divider .d-ln line{stroke-dasharray:360;stroke-dashoffset:360;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1)}
html.js .divider .d-ln line:nth-child(2){transition-delay:.12s}
html.js .divider .d-ln line:nth-child(3){transition-delay:.24s}
html.js .divider .d-gh{opacity:0;transition:opacity 1s ease-out .4s}
html.js .divider.in .d-st{transform:none;opacity:1}
html.js .divider.in .d-ln line{stroke-dashoffset:0}
html.js .divider.in .d-gh{opacity:1}
@media (prefers-reduced-motion:reduce){html.js .divider .d-st,html.js .divider .d-ln line,html.js .divider .d-gh{transition-duration:.01s;transition-delay:0s}}

/* ===== Hover B4: hairlines run, then blue fills on a slant ===== */
.btn,.works .work{position:relative;overflow:hidden;isolation:isolate}
.fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fx b{position:absolute;top:0;bottom:0;display:block}
.fx b:nth-child(-n+3){width:2px;left:-10%;background:var(--accent);transform:skewX(-28deg);opacity:0}
.fx b:nth-child(4){left:0;right:0;background:var(--accent);clip-path:polygon(0 0,0 0,-25% 100%,-25% 100%);transition:clip-path .5s cubic-bezier(.7,0,.2,1) .18s}
.btn i,.btn .arr{display:inline-block;transition:transform .4s}
.works .work .work-meta b,.works .work .work-meta span,.works .work .work-arrow{transition:color .35s .15s,transform .4s}
@media (hover:hover){
  .btn:hover{background:var(--fg);color:#fff}
  .btn-ghost:hover{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
  .btn:hover .fx b:nth-child(1),.works .work:hover .fx b:nth-child(1){animation:hair .5s ease-in forwards}
  .btn:hover .fx b:nth-child(2),.works .work:hover .fx b:nth-child(2){animation:hair .5s ease-in .05s forwards}
  .btn:hover .fx b:nth-child(3),.works .work:hover .fx b:nth-child(3){animation:hair .5s ease-in .1s forwards}
  .btn:hover .fx b:nth-child(4),.works .work:hover .fx b:nth-child(4){clip-path:polygon(0 0,125% 0,100% 100%,-25% 100%)}
  .works .work:hover{background:transparent;border-color:var(--accent)}
  .works .work:hover .work-meta b,.works .work:hover .work-meta span{color:#fff}
  .works .work:hover .work-arrow{color:#fff;transform:rotate(45deg)}
  .more-link:hover::after,.cta-link:hover>span::after{animation:redraw .7s cubic-bezier(.7,0,.2,1)}
}
@keyframes hair{0%{left:-10%;opacity:1}100%{left:110%;opacity:1}}
@keyframes redraw{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
@media (prefers-reduced-motion:reduce){.fx b:nth-child(-n+3){display:none}.fx b:nth-child(4){transition-duration:.01s;transition-delay:0s}}

/* ===== Footer: two blues + seam, stepped edge, outline wordmark ===== */
footer.ft{border-top:0;position:relative;margin-top:clamp(40px,6vw,90px);--fb:var(--brand-deep);--fa:var(--accent);--ff:#fff;--fm:rgba(255,255,255,.66);--fl:rgba(255,255,255,.2)}
.ft-edge{display:block;width:100%;height:clamp(56px,10vw,160px)}
.ft-edge polygon{fill:var(--fa)}
.ft-body{position:relative;overflow:hidden;margin-top:-1px;color:var(--ff);isolation:isolate}
.ft-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.ft-bg rect{fill:var(--fb)}.ft-bg polygon{fill:var(--fa)}.ft-bg line{stroke:var(--seam);stroke-width:3}
.ft-in{max-width:1200px;margin:0 auto;padding:clamp(28px,4vw,56px) max(20px,4vw) clamp(150px,17vw,250px);display:grid;grid-template-columns:1.1fr 1.6fr;gap:clamp(36px,5vw,80px);position:relative;z-index:1}
.ft-logo{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em}
.ft-logo svg{width:clamp(48px,4.4vw,64px);height:auto}
.ft-copy{margin:22px 0 0;font-weight:700;font-size:clamp(15px,1.3vw,18px);letter-spacing:.08em;color:#fff}
.ft-addr{margin:14px 0 0;font-size:13px;line-height:1.9;color:var(--fm)}
.ft-cols{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:start}
.ft-h{margin:0 0 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;color:var(--fm);padding-bottom:12px;position:relative;border-bottom:1px solid var(--fl)}
.ft-h::after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;background:var(--seam)}
footer.ft .ft-cols a{display:block!important;color:#fff;font-weight:700;font-size:15px;padding:7px 0;text-decoration:none;width:max-content;position:relative}
footer.ft .ft-cols a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.7,0,.2,1)}
@media (hover:hover){footer.ft .ft-cols a:hover::after{transform:scaleX(1);transform-origin:left}}
.ft-mark{position:absolute;left:50%;bottom:clamp(40px,5vw,64px);transform:translateX(-50%);font-family:var(--font-display);font-weight:800;font-size:clamp(90px,21vw,330px);letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);white-space:nowrap;pointer-events:none;z-index:0}
.ft-bot{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:22px max(20px,4vw) calc(26px + env(safe-area-inset-bottom,0px));display:flex;gap:28px;align-items:center;font-size:13px;color:var(--fm);border-top:1px solid var(--fl)}
.ft-bot a{color:#fff;text-decoration:none;font-weight:500}
.ft-bot span{margin-right:auto}
.ft-top{font-family:var(--font-mono);letter-spacing:.2em;display:inline-flex;gap:10px;align-items:center}
.ft-top i{font-style:normal;display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.4);border-radius:50%;transition:transform .35s,background .3s,color .3s}
@media (hover:hover){.ft-top:hover i{transform:translateY(-3px);background:#fff;color:var(--accent)}}
@media (max-width:760px){
  .ft-bg line{display:none}
  .ft-in{grid-template-columns:1fr;gap:36px;padding-bottom:120px}
  .ft-cols{grid-template-columns:1fr 1fr;row-gap:28px}
  .ft-cols>div:last-child{grid-column:1/-1}
  footer.ft .ft-cols>div:last-child a{display:inline-block!important;margin-right:24px}
  .ft-bot{flex-wrap:wrap;gap:12px 20px}
  .ft-bot span{order:3;width:100%}
  .ft-mark{font-size:19vw;bottom:104px}
}

/* footer CTA row (replaces the Let's talk band) */
.ft-cta{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:clamp(28px,4vw,52px) max(20px,4vw) clamp(28px,3.4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;border-bottom:1px solid var(--fl)}
.ft-cta-t{margin:0;color:#fff;font-weight:700;font-size:clamp(16px,1.6vw,21px);line-height:1.8;letter-spacing:.04em}
.ft-h2{display:block;font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:.22em;color:var(--seam);margin-bottom:8px}
footer.ft .ft-btn{background:#fff;color:var(--brand-ink);font-size:clamp(15px,1.3vw,17px);padding:1em 1.8em;font-weight:700}
footer.ft .ft-btn .fx b{background:var(--brand-ink)}
@media (hover:hover){footer.ft .ft-btn:hover{background:#fff;color:#fff}}
.ft-in{padding-top:clamp(36px,4vw,56px)}
@media (max-width:760px){.ft-cta{flex-direction:column;align-items:flex-start}.ft-cta-t br{display:none}footer.ft .ft-btn{width:100%;justify-content:center}}
.ft-bg line{display:none}
.hero-shapes .sh.off{display:none!important}
/* Japanese phrase-aware line breaks (BudouX <wbr> in markup) */
body{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
p,li,dd,dt,blockquote,figcaption,summary{text-wrap:pretty}
.jph{white-space:nowrap}