/* DigitalCraft — Form / Function / Forward */
:root {
  --paper: #f2f0e9; --ink: #20211e; --rust: #b5472b; --rule: #cbc9bf;
  --brand-blue: #3498db; --brand-navy: #1a3a5c;
  --color-bg: #f2f0e9; --color-surface: #e8e6df; --color-surface-2: #deddd5;
  --color-primary: #a33d24; --color-primary-light: #c55c3d; --color-primary-dark: #82301e;
  --color-cta: #b5472b; --color-cta-hover: #913821;
  --color-heading: #20211e; --color-text: #54564e; --color-muted: #686a62; --color-border: #cbc9bf;
  --header-height: 88px; --lh-relaxed: 1.9; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.2rem;
  --ease-craft: cubic-bezier(.22, 1, .36, 1);
}
/* Line-break utilities: .desktop-break only breaks on wide screens, .sp-break only on
   phones (both are flipped inside the max-width:767px block below). Japanese headings
   need author-chosen break points — the browser's greedy fill orphans short tails.  */
.sp-break { display: none; }
html { scroll-padding-top: 110px; }
body { background: var(--paper); color: var(--color-text); font-family: 'Noto Sans JP', sans-serif; }
body.craft-home { background: radial-gradient(ellipse at 18% 18%,rgba(52,152,219,.09),transparent 34%),radial-gradient(ellipse at 76% 63%,rgba(52,152,219,.055),transparent 38%),linear-gradient(115deg,#f2f0e9 0%,#eef1ed 48%,#f2f0e9 100%); }
.home-loader { --loader-ring-radius:clamp(7rem,15vw,11.5rem); display:none; position:fixed; inset:0; z-index:10000; overflow:hidden; place-items:center; background:radial-gradient(circle at 50% 46%,rgba(0,194,255,.13),transparent 23%),radial-gradient(ellipse at 50% 115%,rgba(0,112,255,.14),transparent 42%),#02050b; color:#91efff; opacity:0; visibility:hidden; pointer-events:none; contain:strict; isolation:isolate; transition:opacity .58s cubic-bezier(.22,.61,.36,1); }
html.home-loader-pending,html.home-loader-pending body { overflow: hidden; overscroll-behavior: none; }
html.home-loader-pending .home-loader { display:grid; opacity:1; visibility:visible; pointer-events:auto; }
html.home-loader-pending .home-loader.is-exiting { opacity:0; visibility:visible; }
.home-loader__grid { position:absolute; inset:-12%; background-image:linear-gradient(rgba(55,217,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(55,217,255,.075) 1px,transparent 1px); background-size:clamp(38px,5vw,72px) clamp(38px,5vw,72px); mask-image:radial-gradient(ellipse at 50% 58%,#000 0 20%,rgba(0,0,0,.72) 38%,transparent 72%); transform:perspective(32rem) rotateX(62deg) scale(1.35) translateY(15%); transform-origin:50% 64%; opacity:.72; }
.home-loader__grid::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(104,232,255,.025) 4px); animation:home-loader-scan 4s linear infinite; }
.home-loader__stage { position:relative; width:clamp(22rem,43vw,34rem); aspect-ratio:1; perspective:48rem; transform-style:preserve-3d; filter:drop-shadow(0 0 2.25rem rgba(0,198,255,.18)); transition:filter .58s ease,scale .58s cubic-bezier(.22,.61,.36,1); }
.home-loader__stage::before { content:''; position:absolute; inset:11%; border:1px solid rgba(106,232,255,.18); border-radius:50%; background:radial-gradient(circle,rgba(0,198,255,.08),transparent 58%); box-shadow:0 0 0 1.1rem rgba(0,198,255,.025),0 0 0 3.4rem rgba(0,198,255,.018),0 0 6rem rgba(0,198,255,.22),inset 0 0 5rem rgba(0,198,255,.08); transform:rotateX(68deg); }
.home-loader__stage::after { content:''; position:absolute; left:50%; top:5%; width:1px; height:90%; background:linear-gradient(transparent,rgba(128,239,255,.7),transparent); box-shadow:0 0 14px #24d8ff; opacity:.48; transform:translateX(-50%); }
.home-loader__orbit { position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; }
.home-loader__orbit--top { transform:translate3d(0,-2rem,0) rotateX(-18deg) rotateZ(-8deg); }
.home-loader__orbit--bottom { transform:translate3d(0,2.25rem,0) rotateX(58deg) rotateZ(10deg) scale(.86); }
.home-loader__ring { position:relative; width:0; height:0; transform-style:preserve-3d; animation:home-loader-ring-spin 4.6s linear infinite; }
.home-loader__orbit--bottom .home-loader__ring { color:#3ba4ff; animation-direction:reverse; animation-duration:3.7s; }
.home-loader__ring span { position:absolute; left:-.9rem; top:-1.1rem; width:1.8rem; height:2.2rem; display:grid; place-items:center; color:inherit; font:700 clamp(.82rem,1.35vw,1.18rem)/1 'Outfit',sans-serif; letter-spacing:.04em; text-align:center; text-shadow:0 0 6px currentColor,0 0 18px currentColor; backface-visibility:hidden; transform:rotateY(var(--angle)) translateZ(var(--loader-ring-radius)); }
.home-loader__core { position:absolute; left:50%; top:50%; z-index:2; width:10rem; height:10rem; display:grid; place-items:center; translate:-50% -50%; transform-style:preserve-3d; }
.home-loader__core::before,.home-loader__core::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(123,238,255,.32); box-shadow:0 0 18px rgba(0,210,255,.14),inset 0 0 18px rgba(0,210,255,.08); }
.home-loader__core::before { inset:5%; border-style:dashed; animation:home-loader-hud-spin 7s linear infinite; }
.home-loader__core::after { inset:20%; border-color:rgba(123,238,255,.17); animation:home-loader-hud-spin 5s linear reverse infinite; }
.home-loader__core img { position:relative; z-index:1; width:5.3rem; height:auto; object-fit:contain; filter:drop-shadow(0 0 6px rgba(124,237,255,.88)) drop-shadow(0 0 20px rgba(0,153,255,.5)); }
.home-loader__status { position:absolute; left:clamp(1.5rem,5vw,5rem); right:clamp(1.5rem,5vw,5rem); bottom:clamp(1.5rem,5vh,3.5rem); display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; align-items:center; gap:1rem; color:rgba(162,238,255,.78); font:600 8px/1 'Outfit',sans-serif; letter-spacing:.22em; white-space:nowrap; text-shadow:0 0 10px rgba(0,204,255,.65); }
.home-loader__status i { min-width:0; height:1px; overflow:hidden; background:rgba(120,231,255,.16); box-shadow:0 0 8px rgba(0,202,255,.18); }
.home-loader__status span:last-child { text-align:right; }
.home-loader__status b { display:block; width:100%; height:100%; background:linear-gradient(90deg,transparent,#7eeeff 35%,#248cff); box-shadow:0 0 12px #24d8ff; transform-origin:0 50%; animation:home-loader-progress 1.4s cubic-bezier(.65,0,.35,1) both; }
.home-loader.is-exiting .home-loader__stage { filter:blur(9px) brightness(1.45); scale:1.08; }
body.craft-home > :not(.home-loader):not(script) { transition: filter .62s ease; }
html.home-loader-transitioning body.craft-home > :not(.home-loader):not(script) { filter:blur(4px); }
@keyframes home-loader-ring-spin { to { transform:rotateY(1turn); } }
@keyframes home-loader-hud-spin { to { transform:rotate(1turn); } }
@keyframes home-loader-scan { to { transform:translateY(4px); } }
@keyframes home-loader-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.craft-home .site-footer { position: relative; z-index: 5; }
.craft-home .site-header { position: fixed; z-index: 5; }
h1,h2,h3,h4,h5,h6,.site-logo__text,.site-footer__logo-text { font-family: 'Outfit','Noto Sans JP',sans-serif; color: var(--ink); }
::selection { background: #b5472b; color: #fff; }
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 6px; }
.skip-link { position: fixed; left: 18px; top: -100px; padding: 12px 20px; background: var(--ink); color: white; z-index: 2000; }
.skip-link:focus { top: 10px; }
.site-header,.site-header.is-scrolled,.site-header.is-transparent { height: var(--header-height); background: rgba(242,240,233,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); box-shadow: none; }
.site-header__inner { max-width: 1600px; padding-inline: 5vw; }
.site-logo { gap: 12px; }
.site-logo__img { width: 37px; height: 34px; }
.site-logo__text { font-size: 25px; letter-spacing: -.8px; font-weight: 550; }
.site-nav__list { gap: 30px; }
.site-nav__link,.site-header.is-transparent .site-nav__link { color: var(--ink); font: 500 14px 'Outfit','Noto Sans JP',sans-serif; border-radius: 0; padding: 10px 0; }
.site-nav__link.is-active,.site-nav__link:hover { background: transparent; color: var(--brand-navy); }
.site-nav__link.is-active { border-bottom: 1px solid currentColor; }
.site-nav__cta { margin-left: 36px; }
.site-logo__text,.site-header.is-transparent .site-logo__text { color: var(--ink); }
.btn-nav-cta { padding: 13px 18px; background: var(--ink); border-radius: 0; font-size: 12px; }
.btn-nav-cta:hover { background: var(--rust); }
.hamburger { z-index: 1002; }
.hamburger__line,.site-header.is-transparent .hamburger__line { background: var(--ink); }
.mobile-nav { background: var(--paper); padding: 110px 24px 36px; overflow-y: auto; }
.mobile-nav__link { font-family: 'Outfit',sans-serif; font-size: clamp(28px,7vw,48px); color: var(--ink); }
.mobile-nav__link:hover { color: var(--brand-blue); }
.craft-breadcrumb { margin: 0 0 30px; color: var(--color-muted); font: 500 11px/1.6 'Outfit','Noto Sans JP',sans-serif; letter-spacing: .04em; }
.craft-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin: 0; padding: 0; list-style: none; }
.craft-breadcrumb li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.craft-breadcrumb li + li::before { content: '/'; color: rgba(32,33,30,.38); }
.craft-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s ease; }
.craft-breadcrumb a:hover { color: var(--rust); }
.craft-breadcrumb a:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.craft-breadcrumb [aria-current='page'] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-to-top { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; box-shadow: 0 8px 22px rgba(32,33,30,.18); }
.back-to-top svg { width: 18px; height: 18px; }
.back-to-top svg path { stroke-width: 2; }
.back-to-top:hover { background: var(--rust); color: #fff; border-color: var(--rust); }
.site-footer { background: #181916; color: #bdbeb5; border-top: 1px solid #3d3e37; padding-top: 64px; }
.site-footer__top,.site-footer__bottom { max-width: 1440px; padding-inline: 5vw; }
.site-footer__logo-text { color: var(--paper); font-weight: 500; }
.site-footer__tagline { color: #d3d3c9; }
.site-footer__tagline span,.site-footer__address,.site-footer__copy { color: #aaa99f; }
.site-footer__nav-heading { font: 500 15px 'Outfit',sans-serif; color: var(--paper); }
.site-footer__nav-link { color: #bdbeb5; }
.site-footer__nav-link:hover { color: white; }
.site-footer__bottom { border-color: #3d3e37; }
.craft-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 5vw; }
.craft-section { padding-block: 118px; }
.craft-kicker { font: 500 11px 'Outfit','Noto Sans JP',sans-serif; letter-spacing: .13em; color: var(--ink); margin-bottom: 32px; }
.craft-index { display: inline-block; margin-right: 36px; color: var(--brand-blue); }
.craft-title { font-size: clamp(30px,3.5vw,52px); font-weight: 500; line-height: 1.6; letter-spacing: -.055em; }
.craft-lead { font-size: 16px; line-height: 2; }
.craft-link { display: inline-flex; align-items: center; gap: 34px; border-bottom: 1px solid var(--ink); padding: 15px 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.craft-link>span { font: 24px 'Outfit',sans-serif; transition: transform .4s var(--ease-craft); }
.craft-link:hover>span { transform: translate(4px,-4px); }
.craft-link--light { color: var(--paper); border-color: #7b7d71; }
.craft-button { display: inline-flex; gap: 40px; align-items: center; padding: 20px 28px; color: #fff; background: var(--ink); font-size: 14px; transition: background .3s; }
.craft-button:hover { background: var(--rust); }
.craft-split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 7vw; }
.craft-section-heading { display: grid; grid-template-columns: 1fr 1.6fr; gap: 7vw; margin-bottom: 70px; }
.craft-hero { background: linear-gradient(100deg,rgba(242,240,233,.95) 0%,rgba(242,240,233,.79) 48%,rgba(242,240,233,.66) 100%); position: relative; overflow: clip; }
.craft-hero__inner { position: relative; padding-top: 88px; min-height: min(950px,100svh); }
.craft-hero__topline { display: flex; justify-content: space-between; padding-top: 25px; font: 10px 'Outfit',sans-serif; letter-spacing: .12em; }
.craft-hero__copy { position: relative; z-index: 2; width: 57%; padding-top: clamp(60px,8vh,100px); padding-bottom: 142px; pointer-events: none; }
.craft-hero__copy>a { pointer-events: auto; }
.craft-hero__copy .craft-kicker { color: var(--brand-navy); margin-bottom: 25px; font-size: 10px; }
.craft-hero h1 { font-size: clamp(62px,7.3vw,106px); font-weight: 600; letter-spacing: -.075em; line-height: 1.27; white-space: nowrap; }
.craft-hero h1>span { color: var(--rust); }
.craft-hero__lead { font-size: 14px; line-height: 2.1; color: #4b4d46; margin: 32px 0 18px; }
.craft-hero__copy .craft-link { min-width: 215px; justify-content: space-between; }
.craft-hero__bottom { position: absolute; bottom: 28px; left: 5vw; right: 5vw; border-top: 1px solid var(--rule); padding-top: 22px; display: flex; justify-content: space-between; align-items: flex-end; font: 10px/1.7 'Outfit',sans-serif; letter-spacing: .1em; z-index: 2; }
.craft-hero__bottom>a { display: flex; gap: 25px; align-items: center; }
.craft-hero__bottom>a>span { font-size: 25px; }
.craft-object { position: absolute; width: 57%; aspect-ratio: 1; right: 0; top: 115px; pointer-events: none; }
.craft-object:after { content: ''; position: absolute; width: 50%; height: 5%; left: 27%; bottom: 11%; border-radius: 50%; background: #4a493e; filter: blur(22px); opacity: .15; }
.craft-object canvas,.craft-object model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.craft-object model-viewer { display: block; background: transparent; --poster-color: transparent; --progress-bar-height: 0px; --progress-bar-color: transparent; }
.craft-object__caption { position: absolute; right: 4vw; top: 44%; writing-mode: vertical-rl; font: 9px 'Outfit',sans-serif; letter-spacing: .14em; color: #63655a; }
.motion-toggle { position: absolute; right: 5vw; bottom: 119px; z-index: 3; font-size: 10px; color: #55574d; display: flex; align-items: center; gap: 16px; padding: 8px 0 8px 12px; }
.motion-toggle[hidden] { display: none; }
.motion-toggle span { font-size: 14px; }
.craft-intro { border-top: 1px solid var(--rule); background: rgba(242,240,233,.74); backdrop-filter: blur(2px); }
.craft-intro .craft-kicker { padding-top: 17px; }
.craft-intro__aside { min-width: 0; }
.craft-intro__visual { position: relative; margin-top: 48px; aspect-ratio: 4/5; overflow: hidden; background: #d9dedc; border: 1px solid rgba(57,71,73,.35); }
.craft-intro__visual::before { content: ''; position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(255,255,255,.24); pointer-events: none; }
.craft-intro__visual::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(9,20,26,.58)); pointer-events: none; }
.craft-intro__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.78) contrast(1.04); scale: 1.012; transition: scale 1.4s var(--ease-craft),filter 1.4s var(--ease-craft); }
.craft-intro__visual:hover img { scale: 1.055; filter: saturate(.92) contrast(1.02); }
.craft-intro__visual figcaption { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.88); font: 8px/1.4 'Outfit',sans-serif; letter-spacing: .12em; }
.craft-intro__visual figcaption span:first-child { color: #92cff4; }
.craft-intro__body { margin-top: 34px; max-width: 590px; font-size: 15px; line-height: 2.2; }
.craft-intro__body p+p { margin-top: 22px; }
.craft-web { background: var(--ink); color: #bdc0b3; padding-block: 125px 90px; }
.craft-web__grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: 7vw; }
.craft-web__sticky { position: sticky; top: 150px; padding-bottom: 40px; }
.craft-web .craft-kicker { color: #c5b5a0; }
.craft-web .craft-title { color: var(--paper); font-size: clamp(28px,3vw,44px); margin: 35px 0 22px; }
.craft-web .craft-link { margin-top: 36px; }
.web-scene { padding-bottom: 80px; }
.web-scene--last { padding-bottom: 20px; }
.web-scene__copy { border-top: 1px solid #4b4d42; margin-top: 24px; padding-top: 20px; }
.web-scene__copy>span { font: 10px 'Outfit',sans-serif; letter-spacing: .1em; color: #acaf9f; }
.web-scene__copy h3 { color: var(--paper); font-size: 23px; font-weight: 500; margin: 18px 0 12px; }
.web-scene__copy p { font-size: 13px; line-height: 2; max-width: 510px; }
.design-study { background: #e4e0d3; color: #34382e; padding: 23px 25px 16px; overflow: hidden; transform-origin: center; }
.design-study__nav,.design-study__footer { display: flex; justify-content: space-between; align-items: center; font: 7px 'Outfit','Noto Sans JP',sans-serif; }
.design-study__nav { padding-bottom: 14px; border-bottom: 1px solid #a4a596; }
.design-study__nav strong { font-size: 10px; letter-spacing: -.02em; }
.design-study__main { height: 240px; position: relative; display: flex; align-items: center; }
.design-study__main>p { font: 500 clamp(32px,3.5vw,54px)/.95 'Outfit',sans-serif; letter-spacing: -.06em; z-index: 1; }
.design-study__sculpture { position: absolute; right: 9%; top: 12%; width: 110px; height: 190px; transform: skewY(-12deg) rotate(-6deg); }
.design-study__sculpture i { position: absolute; inset: 0; border: 19px solid #686f57; border-bottom-width: 38px; border-top-width: 38px; box-shadow: 8px 8px 0 #b0b29e; }
.design-study__sculpture i:nth-child(2) { transform: translate(23px, -12px); border-color: #959b80; }
.design-study__sculpture i:nth-child(3) { transform: translate(46px, -24px); border-color: #bbc0a8; }
.design-study__footer { padding-top: 16px; border-top: 1px solid #a4a596; }
.motion-study { min-height: 290px; background: #b95031; color: #f2e5d0; position: relative; overflow: hidden; padding: 34px; display: flex; align-items: center; }
.motion-study>span { font: 500 clamp(52px,6vw,88px)/.86 'Outfit',sans-serif; letter-spacing: -.055em; z-index: 1; }
.motion-study em { font-family: Georgia,serif; font-weight: 400; }
.motion-study>small { position: absolute; left: 34px; bottom: 18px; font: 8px 'Outfit',sans-serif; letter-spacing: .1em; }
.motion-study__lines { position: absolute; inset: 0; transform: translateX(calc(var(--scene-progress, .3) * 45px)); }
.motion-study__lines i { position: absolute; right: -35%; top: -40%; width: 90%; aspect-ratio: 1; border: 1px solid #edab86; border-radius: 50%; opacity: .7; }
.motion-study__lines i:nth-child(2) { top: -23%; }.motion-study__lines i:nth-child(3) { top: -6%; }.motion-study__lines i:nth-child(4) { top: 11%; }.motion-study__lines i:nth-child(5) { top: 28%; }.motion-study__lines i:nth-child(6) { top: 45%; }
.system-study { min-height: 265px; background: #2c2f27; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 32px; }
.system-study>div { border: 1px solid #737663; width: 85%; padding: 15px; text-align: center; font: 19px 'Outfit',sans-serif; color: #ececdf; letter-spacing: .04em; }
.system-study>div:last-child { border-color: #c1714e; }.system-study span { display: block; margin-top: 5px; font: 9px 'Noto Sans JP',sans-serif; color: #acaf9f; }
.system-study>i { color: #cc7954; font-size: 21px; font-style: normal; }
.study-note { font-size: 10px; color: #b4b6a9; }
.capabilities { border-top: 1px solid var(--rule); }
.capability { display: grid; grid-template-columns: 50px 1fr 1.25fr 35px; gap: 30px; align-items: start; padding: 42px 0; border-bottom: 1px solid var(--rule); color: var(--ink); position: relative; transition: padding .45s var(--ease-craft),background .3s; }
.capability:hover { padding-inline: 15px; background: #e9e7de; }
.capability__number { font: 12px 'Outfit',sans-serif; padding-top: 7px; color: var(--brand-blue); }
.capability__en { font: 400 clamp(23px,2.7vw,39px)/1.15 'Outfit',sans-serif; letter-spacing: -.04em; }
.capability h3 { margin-top: 12px; font-size: 14px; font-weight: 500; }
.capability__body p { font-size: 13px; line-height: 2; color: #55574e; }
.capability__tags { display: block; font-size: 10px; color: #6a6d61; margin-top: 15px; }
.capability__arrow { display: grid; place-items: center; justify-self: end; width: 32px; height: 32px; overflow: visible; font: 32px/1 'Outfit',sans-serif; text-align: center; transition: transform .3s; }
.capability:hover .capability__arrow { transform: translate(4px,-4px); color: var(--rust); }
.craft-process { background: #e5e3da; }
.craft-process .craft-title { font-size: clamp(30px,3.1vw,45px); margin-bottom: 24px; }
.craft-steps { border-top: 1px solid #b9bcad; }
.craft-steps li { padding: 28px 0; display: grid; grid-template-columns: 35px 1fr; gap: 20px; border-bottom: 1px solid #b9bcad; }
.craft-steps__number { font: 12px 'Outfit',sans-serif; color: var(--brand-blue); padding-top: 7px; }
.craft-steps__en { font: 28px 'Outfit',sans-serif; color: var(--ink); letter-spacing: -.03em; }
.craft-steps h3 { font-size: 18px; font-weight: 500; margin: 8px 0 12px; }
.craft-steps p { font-size: 13px; line-height: 2; }
.craft-news .craft-title { font-size: 34px; margin-bottom: 25px; }
.craft-news__list { border-top: 1px solid var(--rule); }
.craft-news__list>a { display: grid; grid-template-columns: 90px 1fr 22px; gap: 14px; padding: 29px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.craft-news__list time { font: 11px 'Outfit',sans-serif; color: #686a62; }
.craft-news__list span { color: var(--ink); font-size: 13px; line-height: 1.8; }
.craft-news__list b { font: 21px 'Outfit',sans-serif; }
.craft-news__list a:hover span { color: var(--rust); }
.craft-resources { border-top: 1px solid var(--rule); background: #e5e3da; }
.craft-resources__lead { max-width: 620px; margin-top: 24px; color: var(--color-text); font-size: 14px; line-height: 2.1; }
.craft-resources__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.craft-resource { display: flex; min-height: 330px; flex-direction: column; padding: 34px 40px 32px 0; color: var(--ink); transition: background .3s ease,padding .3s ease; }
.craft-resource + .craft-resource { padding-left: 40px; border-left: 1px solid rgba(32,33,30,.28); }
.craft-resource:hover { background: rgba(242,240,233,.52); padding-left: 24px; padding-right: 24px; }
.craft-resource__meta { color: var(--rust); font: 500 10px/1.5 'Outfit',sans-serif; letter-spacing: .12em; }
.craft-resource h3 { margin: 52px 0 20px; font-size: clamp(27px,3vw,42px); font-weight: 500; letter-spacing: -.035em; }
.craft-resource p { max-width: 460px; color: var(--color-text); font-size: 14px; line-height: 2; }
.craft-resource__link { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 36px; font-size: 12px; font-weight: 500; }
.craft-resource__link b { font: 28px/1 'Outfit',sans-serif; transition: transform .3s ease; }
.craft-resource:hover .craft-resource__link b { transform: translate(4px,-4px); color: var(--rust); }
.craft-contact { background: var(--rust); color: #f8f2e4; padding-block: 80px 64px; }
.craft-contact .craft-kicker { color: #f0d5c7; }
.craft-contact__action { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d4866d; padding-bottom: 50px; }
.craft-contact__title { color: #fff7e9; font-size: clamp(48px,6vw,84px); font-weight: 500; line-height: 1.4; letter-spacing: -.065em; }
.craft-contact__action>span { font: clamp(90px,14vw,200px)/1 'Outfit',sans-serif; transition: transform .5s var(--ease-craft); }
.craft-contact__action:hover>span { transform: translate(8px,-8px); }
.craft-contact__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; gap: 30px; }
.craft-contact__bottom p { font-size: 13px; line-height: 2; }
.craft-contact .craft-link { border-color: #e4ae98; color: #fff7e9; }
/* Bring existing PHP detail pages into the same visual system. */
.has-fixed-header .hero { background: var(--paper); border-bottom: 1px solid var(--rule); }
.has-fixed-header .hero-mesh,.has-fixed-header .hero-grid { display: none; }
.has-fixed-header .hero-h1 { color: var(--ink); font-size: clamp(32px,5vw,64px); font-weight: 500; line-height: 1.45; letter-spacing: -.05em; }
.has-fixed-header .hero-sub { color: var(--color-text); font-size: 15px; line-height: 2; }
.has-fixed-header .hero-eyebrow { color: var(--brand-navy); }
.hero-eyebrow__dot,.eyebrow__dot { background: var(--brand-blue) !important; border-radius: 0; }
.eyebrow { color: var(--brand-navy); font-family: 'Outfit','Noto Sans JP',sans-serif; }
.sec-title { font-family: 'Outfit','Noto Sans JP',sans-serif; font-weight: 500; letter-spacing: -.045em; line-height: 1.6; }
.text-accent,.text-link,.btn-text { color: var(--brand-navy); }
.card,.svc-card { background: var(--paper); border-radius: 0; box-shadow: none; border-top: 1px solid var(--rule); padding-inline: 0; }
.card:hover,.svc-card:hover { box-shadow: none; transform: none; }
.btn-cta,.btn-primary { background: var(--ink); color: white; border-radius: 0; font-family: 'Outfit','Noto Sans JP',sans-serif; }
.btn-cta:hover,.btn-primary:hover { background: var(--rust); box-shadow: none; }
.btn-ghost { color: var(--rust); border-color: var(--rule); border-radius: 0; }
.cta-sec { background: var(--ink); }
.cta-sec:before,.cta-sec:after { display: none; }
.cta-sec .eyebrow { color: #d6b296; }
.news-row__link:hover { background: #e8e6dd; }
[data-animate] { opacity: 1; transform: none; }
.reveal-ready [data-animate]:not(.is-animated) { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(7px); clip-path: inset(0 0 14% 0); }
.reveal-ready [data-animate] { transition: opacity .85s var(--ease-craft), transform 1.05s var(--ease-craft), filter .9s var(--ease-craft), clip-path 1.05s var(--ease-craft); }
.reveal-ready [data-animate].is-animated { opacity: 1; transform: none; filter: blur(0); clip-path: inset(-10px); }

/* Motion system inspired by DevSnips M-013/M-015, N-001/N-002 and L-002/L-003. */
@property --prism-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.craft-hero__inner { z-index: 2; }
.craft-hero__mesh { position: absolute; inset: 4% -8% 3% 38%; z-index: 0; overflow: hidden; opacity: .2; filter: saturate(.82); pointer-events: none; mask-image: radial-gradient(ellipse at center, #000 35%, transparent 76%); }
.craft-hero__mesh i { position: absolute; width: 48%; aspect-ratio: 1; border-radius: 50%; filter: blur(68px); will-change: transform; }
.craft-hero__mesh i:nth-child(1) { left: 8%; top: 2%; background: #3498db; animation: mesh-drift-a 13s ease-in-out infinite alternate; }
.craft-hero__mesh i:nth-child(2) { right: 4%; top: 10%; background: #e8cbb8; animation: mesh-drift-b 17s ease-in-out infinite alternate; }
.craft-hero__mesh i:nth-child(3) { left: 27%; bottom: 0; background: #b5472b; opacity: .65; animation: mesh-drift-c 15s ease-in-out infinite alternate; }
.craft-hero__mesh i:nth-child(4) { right: 22%; bottom: 18%; width: 31%; background: #d8d5c7; animation: mesh-drift-a 19s ease-in-out infinite alternate-reverse; }
.craft-hero__mesh i:nth-child(5) { left: 42%; top: 31%; width: 29%; background: #1a3a5c; opacity: .6; animation: mesh-drift-b 14s ease-in-out infinite alternate-reverse; }
@keyframes mesh-drift-a { to { transform: translate(32%,-13%) scale(1.13); } }
@keyframes mesh-drift-b { to { transform: translate(-27%,24%) scale(.88); } }
@keyframes mesh-drift-c { to { transform: translate(18%,-28%) scale(1.16); } }

.site-nav__list { position: relative; }
.site-nav__indicator { --indicator-x: 0px; --indicator-width: 0px; position: absolute; left: 0; bottom: 0; width: var(--indicator-width); height: 2px; background: linear-gradient(90deg,var(--brand-navy),var(--brand-blue)); transform: translateX(var(--indicator-x)); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-craft),width .5s var(--ease-craft),opacity .25s ease; }
.site-nav__list.has-nav-indicator .site-nav__link.is-active { border-bottom-color: transparent; }

.craft-web { position: relative; isolation: isolate; overflow: clip; }
.craft-web::before { content: ''; position: absolute; z-index: 0; width: min(55vw,760px); aspect-ratio: 1; left: -18vw; top: 25%; border-radius: 50%; background: radial-gradient(circle,rgba(52,152,219,.16),rgba(52,152,219,0) 68%); filter: blur(12px); transform: translate3d(0,var(--parallax-y,0),0); will-change: transform; }
.craft-web__grid { position: relative; z-index: 1; }
.motion-frame { position: relative; isolation: isolate; overflow: hidden; padding: 1px; background: #4b4d42; box-shadow: 8px 8px 0 #30322c,16px 16px 0 #131411; translate: 0 0; transition: translate .7s var(--ease-craft),box-shadow .7s var(--ease-craft); }
.motion-frame::before { content: ''; position: absolute; z-index: 0; inset: -120%; background: conic-gradient(from var(--prism-angle),transparent 0 39%,rgba(52,152,219,.3) 43%,#78c9ff 46%,#f1e4ce 49%,#d56a49 52%,rgba(181,71,43,.25) 56%,transparent 61%); animation: prism-orbit 9s linear infinite; }
.motion-frame>* { position: relative; z-index: 1; }
.motion-frame:hover { translate: -5px -7px; box-shadow: 13px 15px 0 #30322c,25px 28px 0 #131411; }
.motion-frame:hover::before { animation-duration: 4.5s; }
@keyframes prism-orbit { to { --prism-angle: 1turn; } }
.design-study__sculpture,.motion-study__lines,.system-study>div { scale: 1; transition: scale 1.1s var(--ease-craft),filter 1.1s var(--ease-craft),transform 1.1s var(--ease-craft); }
.motion-frame:hover .design-study__sculpture { scale: 1.09; filter: saturate(1.08); }
.motion-frame:hover .motion-study__lines { scale: 1.12; }
.motion-frame:hover .system-study>div:first-child { transform: translateY(-5px); }
.motion-frame:hover .system-study>div:last-child { transform: translateY(5px); }

.craft-process { position: relative; isolation: isolate; overflow: clip; }
.craft-process::after { content: ''; position: absolute; z-index: 0; right: -12vw; top: 3%; width: min(52vw,720px); aspect-ratio: 1; border: 1px solid rgba(52,152,219,.17); border-radius: 50%; box-shadow: 0 0 0 70px rgba(52,152,219,.025),0 0 0 140px rgba(181,71,43,.02); transform: translate3d(0,var(--parallax-y,0),0); will-change: transform; }
.craft-process>.craft-wrap { position: relative; z-index: 1; }
.craft-steps { position: relative; --step-progress: 0; }
.craft-steps::before,.craft-steps::after { content: ''; position: absolute; left: 4px; top: 38px; width: 1px; pointer-events: none; }
.craft-steps::before { bottom: 38px; background: #b9bcad; }
.craft-steps::after { bottom: 38px; background: linear-gradient(var(--brand-blue),var(--rust)); transform: scaleY(var(--step-progress)); transform-origin: top; transition: transform .35s var(--ease-craft); }
.craft-steps li { position: relative; }
.craft-steps li::before { content: ''; position: absolute; z-index: 1; left: 0; top: 36px; width: 9px; height: 9px; border-radius: 50%; background: #e5e3da; border: 1px solid #9fa194; transform: scale(.7); transition: transform .45s var(--ease-craft),background .45s ease,box-shadow .45s ease; }
.craft-steps li.is-complete::before { background: var(--brand-blue); border-color: var(--brand-blue); }
.craft-steps li.is-active::before { background: var(--paper); border-color: var(--brand-blue); transform: scale(1.35); box-shadow: 0 0 0 5px rgba(52,152,219,.12); }
.craft-steps li.is-active .craft-steps__en { color: var(--brand-navy); }
.craft-steps__number { padding-left: 18px; transition: color .35s ease; }

/* Home — scroll-driven horizontal reel for .craft-web (docs/home-sequence.md, part A).
   Everything reel-specific is gated behind the size query AND (prefers-reduced-motion:no-preference),
   so narrow/short viewports and reduced-motion users both keep today's plain vertical stack untouched. */
.reel-meter { display: none; }
@media (min-width:1024px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
  .craft-web[data-reel] { --reel-panels: 3; height: calc(100svh + var(--reel-panels) * 78vh); padding-block: 0; }
  .craft-web__viewport { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
  .craft-web[data-reel] .craft-web__grid { width: 100%; max-width: none; align-items: center; padding-right: 0; padding-left: max(5vw, calc((100vw - 1440px)/2 + 5vw)); grid-template-columns: .82fr 1.18fr; }
  .craft-web[data-reel] .craft-web__sticky { position: static; padding-bottom: 0; }
  .craft-web__sequence { overflow: clip; min-width: 0; }
  .craft-web__track { display: flex; gap: 3vw; width: max-content; translate: var(--reel-x,0px) 0; will-change: translate; }
  .craft-web[data-reel] .web-scene { width: clamp(320px,29vw,460px); flex: none; padding-bottom: 0; }
  .craft-web[data-reel] .web-scene__copy p { font-size: 12.5px; }
  .craft-web[data-reel] .study-note { margin-top: 26px; }
  .craft-web[data-reel] .reel-meter { display: flex; align-items: center; gap: 14px; margin-top: 44px; font: 11px 'Outfit',sans-serif; letter-spacing: .08em; color: #acaf9f; }
  .reel-meter__index { color: var(--paper); }
  .reel-meter__rail { position: relative; width: 120px; height: 1px; background: #4b4d42; overflow: hidden; }
  .reel-meter__rail i { position: absolute; inset: 0; display: block; background: linear-gradient(90deg,var(--brand-blue),var(--rust)); transform: scaleX(var(--reel-progress,0)); transform-origin: 0 50%; }
  /* Active panel stays full-strength; the others recede so the reel reads as one subject swapping in. */
  .craft-web[data-reel] .web-scene { opacity: .34; scale: .93; filter: saturate(.45); transition: opacity .6s var(--ease-craft), scale .8s var(--ease-craft), filter .6s var(--ease-craft); }
  .craft-web[data-reel] .web-scene.is-active { opacity: 1; scale: 1; filter: none; }
}
@media (prefers-reduced-motion:reduce) {
  .craft-web[data-reel] { height: auto; }
  .craft-web__viewport { position: static; height: auto; display: block; }
  .craft-web__track { display: block; width: auto; translate: none; }
}

@media (min-width: 1600px) { .craft-wrap { padding-inline: 80px; }.craft-hero__bottom { left: 80px; right: 80px; } }
@media (max-width: 1100px) { .site-nav__list { gap: 20px; }.site-nav__cta { margin-left: 20px; }.craft-object { top: 165px; }.craft-hero__copy { padding-top: 60px; }.craft-hero__inner { min-height: 780px; }.capability { gap: 20px; grid-template-columns: 32px 1fr 1.2fr 25px; }.craft-split,.craft-section-heading { gap: 5vw; grid-template-columns: 1fr 1.4fr; } }
@media (max-width: 767px) {
  :root { --header-height: 72px; }.site-header__inner,.craft-wrap { padding-inline: 6vw; }.site-logo__text { font-size: 23px; }.site-logo__img { width: 31px; }
  .craft-breadcrumb { margin-bottom: 22px; font-size: 10px; }
  .craft-section { padding-block: 72px; }.craft-kicker { font-size: 10px; margin-bottom: 25px; }.craft-index { margin-right: 20px; }.craft-title { font-size: clamp(29px,6.8vw,44px); }
  .craft-split,.craft-section-heading { grid-template-columns: 1fr; gap: 32px; }.craft-section-heading { margin-bottom: 40px; }.craft-section-heading .craft-kicker { margin-bottom: 0; }
  .craft-hero__inner { padding-top: 72px; min-height: 950px; }.craft-hero__topline { padding-top: 18px; font-size: 8px; }
  .craft-hero__copy { width: 100%; padding-top: 52px; padding-bottom: 0; }.craft-hero__copy .craft-kicker { font-size: 8px; margin-bottom: 20px; }
  .craft-hero h1 { font-size: clamp(59px,13vw,95px); }.craft-hero__lead { font-size: 14px; margin-top: 23px; line-height: 2; }.craft-hero__copy .craft-link { margin-top: 0; font-size: 13px; }
  .craft-object { width: 88%; top: 518px; right: -5%; max-height: 400px; }.craft-object__caption { right: 11vw; top: auto; bottom: 0; writing-mode: horizontal-tb; font-size: 8px; }
  .craft-hero__bottom { left: 6vw; right: 6vw; bottom: 21px; padding-top: 16px; font-size: 8px; }.craft-hero__bottom>a { gap: 10px; }
  .motion-toggle { right: auto; left: 6vw; bottom: 112px; padding-left: 0; font-size: 9px; }
  .craft-intro .craft-kicker { padding: 0; }.craft-intro__visual { margin-top: 26px; aspect-ratio: 16/11; }.craft-intro__visual img { object-position: 50% 68%; }.craft-intro__body { font-size: 14px; line-height: 2.2; margin-top: 25px; }
  .craft-web { padding-block: 72px; }.craft-web__grid { grid-template-columns: 1fr; gap: 12px; }.craft-web__sticky { position: static; }.craft-web .craft-title { font-size: 31px; }.craft-web .craft-lead { font-size: 14px; }.craft-web .craft-link { margin-top: 20px; }.web-scene { padding-bottom: 50px; }.design-study__main { height: 230px; }.design-study__main>p { font-size: 47px; }.motion-study { min-height: 270px; }.motion-study>span { font-size: 76px; }.web-scene__copy h3 { font-size: 22px; }
  .capability { grid-template-columns: 28px minmax(0,1fr) 32px; padding: 30px 0; gap: 12px; }.capability__heading { grid-column: 2; min-width: 0; }.capability__body { grid-column: 2; grid-row: 2; min-width: 0; }.capability__arrow { grid-column: 3; grid-row: 1; }.capability__en { font-size: 31px; }.capability h3 { font-size: 14px; margin-top: 8px; }.capability__body p { font-size: 14px; }.capability__tags { font-size: 11px; }.capability:hover { padding-inline: 0; }
  .craft-process .craft-title { font-size: 31px; }.craft-steps li { gap: 12px; grid-template-columns: 27px 1fr; }.craft-news__list>a { grid-template-columns: 1fr 25px; gap: 9px; padding-block: 22px; }.craft-news__list time { grid-column: 1; }.craft-news__list span { grid-column: 1; font-size: 14px; }.craft-news__list b { grid-column: 2; grid-row: 2; }
  .craft-resources__lead br { display: none; }.craft-resources__grid { grid-template-columns: 1fr; }.craft-resource,.craft-resource + .craft-resource { min-height: 280px; padding: 28px 0; border-left: 0; }.craft-resource + .craft-resource { border-top: 1px solid rgba(32,33,30,.28); }.craft-resource:hover { padding-inline: 0; }.craft-resource h3 { margin-top: 36px; }.craft-resource__link { padding-top: 28px; }
  .craft-contact { padding-block: 55px; }.craft-contact__title { font-size: 45px; }.craft-contact__action { padding-bottom: 32px; }.craft-contact__action>span { font-size: 84px; }.craft-contact__bottom { flex-direction: column; align-items: flex-start; gap: 15px; }.craft-contact__bottom p { font-size: 14px; }
  .site-footer__top,.site-footer__bottom { padding-inline: 6vw; }.site-footer__top { gap: 32px; }.site-footer__tagline span { font-size: 10px; }
  .has-fixed-header .hero-sub br { display: none; }.has-fixed-header .hero { padding-block: 125px 45px !important; }.news-list__item { flex-wrap: wrap; gap: 8px !important; }
  #hubspot-form-container { min-width: 0; }.desktop-break { display: none; }.sp-break { display: inline; }
}
@media (max-width: 374px) { .craft-hero h1 { font-size: 53px; }.craft-hero__inner { min-height: 905px; }.craft-object { top: 520px; }.craft-contact__title { font-size: 39px; }.craft-contact__action>span { font-size: 65px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .home-loader { display: none !important; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal-ready [data-animate]:not(.is-animated) { opacity: 1; transform: none; }
  .motion-study__lines { transform: none; }
}

/* Replaces the inline margin that used to sit on the mobile CTA in header.php. */
.mobile-nav__sub .mobile-nav__cta { margin-bottom: 12px; }