/* A shared motion vocabulary: restrained depth, ink strokes and pixel edges. */
.hero{overflow:hidden}.hero-copy h1>span{position:relative;display:inline-block;padding-bottom:9px}.hero-copy h1>span::after{content:"";position:absolute;left:0;bottom:0;width:96px;height:3px;background:var(--accent);transform-origin:left;animation:ink-stroke .8s .25s both cubic-bezier(.2,.7,.2,1)}
@keyframes ink-stroke{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-portrait.portrait-experience{position:relative;align-self:center;display:block;max-width:420px;width:calc(100% - 38px);padding:0;margin:0 auto;perspective:900px;isolation:isolate}
.hero-portrait.portrait-experience::before,.hero-portrait.portrait-experience::after{display:none;content:none}
.portrait-stage{position:relative;width:100%;aspect-ratio:4/4.65;overflow:visible}
.portrait-stage .portrait-original{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 34%;border-radius:0;filter:none}
.portrait-canvas{position:absolute;pointer-events:none;display:none;max-width:none}.portrait-ready .portrait-canvas{display:block}.portrait-ready .portrait-original{opacity:0}
.hero-portrait.portrait-experience figcaption{display:block;margin:0;padding:38px 0 0;background:transparent;color:var(--ink);line-height:1.5;border:0}
.portrait-experience figcaption strong{display:block;font-size:1.12rem}.portrait-experience figcaption span{display:block;margin-top:6px;max-width:none;font-size:.875rem;color:var(--muted)}.portrait-experience figcaption>a{display:inline-block;font-size:.875rem;font-weight:700;margin-top:15px}
.enhanced-motion [data-enter]{opacity:0;transform:translateY(16px);transition:opacity .55s var(--enter-delay,0ms),transform .55s var(--enter-delay,0ms)}.enhanced-motion [data-enter].has-entered{opacity:1;transform:none}
.nav a:not(:last-child){position:relative;border-bottom-color:transparent}.nav a:not(:last-child)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}.nav a:hover::after,.nav a.active:not(.reading-section)::after,.nav a.section-current::after{transform:scaleX(1)}
.text-link{position:relative;text-decoration:none;padding-bottom:4px}.text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .25s}.text-link:hover::after{transform:scaleX(.7)}
.button{position:relative;overflow:hidden;transition:background .2s,color .2s,box-shadow .2s,transform .2s}.button:hover{box-shadow:0 5px 14px #193e301c;transform:translateY(-2px)}.button:active{transform:translateY(1px);box-shadow:none}
.audience-row{position:relative;transition:background .25s}.audience-row::before{content:"";position:absolute;left:-18px;top:35px;bottom:35px;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .35s}.audience-row:hover::before,.audience-row:focus-within::before{transform:scaleY(1)}.audience-row h3{transition:transform .3s}.audience-row:hover h3{transform:translateX(3px)}
.project-preview{display:block;min-width:0}.project-board[data-depth]{transform:perspective(900px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));transition:transform .25s ease,box-shadow .3s;transform-origin:center;min-height:345px}
.project-board[data-depth]:hover{box-shadow:0 12px 30px #193e3014}.project-board-detail[data-depth]{min-height:445px}
.project-board .project-logo-mat img{transition:transform .45s}.project-board:hover .project-logo-mat img{transform:translateY(-4px)}
.project-discover{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:44px;padding:11px 0;margin:0 0 9px;border:0;border-top:1px solid #cad5c9;border-radius:0;background:transparent;color:var(--ink);font-size:.875rem;font-weight:700;text-align:left}
.project-board-kita .project-discover{border-top-color:#ddcebd;color:#754a39}.discover-mark{font-size:1.45rem;line-height:1;font-weight:400;transition:transform .3s}.project-discover:hover .discover-mark{transform:rotate(90deg)}.project-discover[aria-expanded="true"] .discover-mark{transform:rotate(45deg)}
.project-insights[hidden]{display:none!important}.project-insights{flex:1;padding:21px 0 14px;animation:insight-in .3s ease}.project-insights .insights-label{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--project-color);margin:0 0 18px}.project-insights ul{list-style:none;margin:0;padding:0;display:grid;gap:17px}.project-insights li strong{display:block;font-size:.9375rem;line-height:1.4;color:var(--ink)}.project-insights li span{display:block;font-size:.875rem;color:var(--muted);line-height:1.55;margin-top:5px}.project-board.is-open .project-logo-mat{display:none}
@keyframes insight-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.about-section{position:relative}.signature-pixels{position:absolute;top:-20px;right:max(48px,calc((100% - 1180px)/2));display:grid;grid-template-columns:repeat(3,13px);gap:8px;pointer-events:none}.signature-pixels i{display:block;width:13px;height:13px;background:#a7b99d;transform:translateY(calc((var(--pixel-index) - 4)*2px))}.signature-pixels i:nth-child(2n){background:var(--accent)}.signature-pixels i:nth-child(3n){opacity:.6}
.career-timeline li{transition:background .3s}.career-timeline li::before{transition:box-shadow .3s,transform .3s}.career-timeline li:hover::before,.career-timeline li:focus-within::before{box-shadow:0 0 0 5px #e9bc5320;transform:scale(1.25)}
.career-meaning{margin-top:17px}.career-meaning summary{display:flex;justify-content:space-between;align-items:center;gap:13px;min-height:44px;color:var(--accent);font-size:.875rem;cursor:pointer;list-style:none;border-top:1px solid #54715f;padding:9px 0}.career-meaning summary::-webkit-details-marker{display:none}.career-meaning summary>span{font-size:1.3rem;transition:transform .2s}.career-meaning[open] summary>span{transform:rotate(45deg)}.career-meaning>p{padding-top:6px;color:#fff;font-size:.9375rem;line-height:1.65;animation:insight-in .25s ease}
.package-guide{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:0 0 48px;margin-bottom:40px;border-bottom:1px solid var(--line)}.package-guide h2{font-size:1.7rem;line-height:1.25}.package-guide .eyebrow{margin-bottom:16px}.package-guide>div>p:last-child{font-size:.9375rem;max-width:43ch;color:var(--muted)}.package-guide-controls{padding:23px 27px;background:var(--wash);border-left:3px solid var(--accent)}.package-guide-controls>label{display:flex;justify-content:space-between;align-items:center;gap:22px;font-size:.9375rem;line-height:1.5;font-weight:700;color:var(--ink)}.package-guide-controls output{font-size:1.75rem;min-width:28px;text-align:center;line-height:1.25;font-weight:700;letter-spacing:-.04em}.package-guide-controls input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;height:6px;min-height:0;padding:0;margin:23px 0 0;border:0;border-radius:2px;background:linear-gradient(to right,var(--ink) var(--range-fill,0%),#cbd5cd var(--range-fill,0%));cursor:pointer}.package-guide-controls input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:23px;height:23px;border:3px solid white;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink);cursor:grab}.package-guide-controls input[type="range"]::-moz-range-thumb{width:17px;height:17px;border:3px solid white;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink);cursor:grab}.range-labels{display:flex;justify-content:space-between;margin:7px 0 0;font-size:.8125rem;color:var(--muted)}.package-guide-result{margin:22px 0 15px;line-height:1.5}.package-guide-result strong{display:block;color:var(--ink);font-size:1.17rem}.package-guide-result span{display:block;font-size:.875rem;color:var(--muted);margin-top:5px}.package-guide-controls .small{margin-top:19px;font-size:.8125rem!important}.price-card{position:relative}.price-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}.price-card.guide-selected::before{transform:scaleX(1)}
.inquiry-card input,.inquiry-card select,.inquiry-card textarea{transition:border-color .2s,box-shadow .2s}.inquiry-card input:focus,.inquiry-card select:focus,.inquiry-card textarea:focus{border-color:var(--ink);box-shadow:0 0 0 2px #193e300e}.inquiry-card input:user-valid,.inquiry-card textarea:user-valid{border-color:#5c806a}
.footer-signature{display:inline-flex;gap:13px;align-items:center}.footer-pixels{display:grid;grid-template-columns:repeat(2,4px);gap:3px}.footer-pixels i{display:block;width:4px;height:4px;background:var(--ink);transition:transform .3s}.footer-signature:hover i:nth-child(2){transform:translate(4px,-3px)}.footer-signature:hover i:nth-child(3){transform:translate(-3px,3px)}.footer-signature:hover i:nth-child(4){transform:translate(5px,4px)}
@media(max-width:940px){.hero-portrait.portrait-experience{max-width:350px}.package-guide{gap:35px}.project-board[data-depth]{min-height:325px}.project-board-detail[data-depth]{min-height:420px}.portrait-experience figcaption>a{margin-top:12px}}
@media(max-width:700px){.hero-portrait.portrait-experience{align-self:stretch;width:calc(100% - 35px);max-width:350px;margin:0 auto 0 0}.portrait-stage{aspect-ratio:4/4.5}.hero-portrait.portrait-experience figcaption{padding-top:37px}.portrait-experience figcaption strong{font-size:1.08rem}.portrait-experience figcaption span{font-size:.875rem;max-width:28ch}.portrait-experience figcaption>a{margin-top:11px}.package-guide{grid-template-columns:1fr;gap:25px;padding-bottom:32px;margin-bottom:30px}.package-guide-controls{padding:23px 20px}.project-board[data-depth]{min-height:345px}.project-board-detail[data-depth]{min-height:385px}.project-board[data-depth]:hover{box-shadow:none}.signature-pixels{right:24px;grid-template-columns:repeat(3,10px);gap:6px;top:-14px}.signature-pixels i{width:10px;height:10px}.audience-row::before{left:-10px;top:28px;bottom:28px}.career-meaning{max-width:43ch;margin-top:12px}.career-meaning>p{max-width:none}.nav a:not(:last-child)::after{right:auto;width:45px;bottom:7px}.nav a.active:not(.reading-section)::after,.nav a.section-current::after{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.enhanced-motion [data-enter]{opacity:1!important;transform:none!important;transition:none!important}.hero-copy h1>span::after{animation:none}.portrait-ready .portrait-original{opacity:1}.portrait-canvas,.portrait-play{display:none!important}.project-board[data-depth]{transform:none!important;transition:none!important}.button:hover,.audience-row:hover h3,.project-board:hover .project-logo-mat img{transform:none!important}.project-insights,.career-meaning>p{animation:none}.footer-pixels i,.pixel-icon i{transform:none!important}.signature-pixels i{transform:none}.text-link::after,.nav a::after{transition:none}}
@media print{.enhanced-motion [data-enter]{opacity:1!important;transform:none!important}.portrait-canvas,.portrait-play,.project-discover,.signature-pixels{display:none!important}.portrait-ready .portrait-original{opacity:1}.hero-portrait.portrait-experience{max-width:220px}.project-board[data-depth]{transform:none!important;position:static}.package-guide{display:none}.career-meaning summary{color:#000}.career-meaning>p{color:#000}.hero-copy h1>span::after{display:none}}

.signature-pixels.has-entered i{animation:pixel-join .5s calc(var(--pixel-index)*22ms) both cubic-bezier(.2,.7,.2,1)}
@keyframes pixel-join{from{opacity:0;transform:translate(-14px,-12px) rotate(-25deg)}to{opacity:1;transform:translateY(calc((var(--pixel-index) - 4)*2px))}}
@media(prefers-reduced-motion:reduce){.signature-pixels.has-entered i{animation:none!important;transform:none}}
@media print{.signature-pixels.has-entered i{animation:none}}
/* A comfortable touch area around the narrow visual slider track. */
.package-guide-controls input[type="range"]{height:32px;background:transparent;margin-top:12px}
.package-guide-controls input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:2px;background:linear-gradient(to right,var(--ink) var(--range-fill,0%),#cbd5cd var(--range-fill,0%))}
.package-guide-controls input[type="range"]::-webkit-slider-thumb{margin-top:-8.5px}
.package-guide-controls input[type="range"]::-moz-range-track{height:6px;border-radius:2px;background:linear-gradient(to right,var(--ink) var(--range-fill,0%),#cbd5cd var(--range-fill,0%))}

/* Cursor pixel effect for the two project reference visuals. */
.reference-case .project-logo-mat{isolation:isolate}
.reference-pixel-canvas{position:absolute;z-index:3;pointer-events:none;display:none;max-width:none}
.reference-pixel-ready .reference-pixel-canvas{display:block}
.reference-pixel-ready>img{opacity:0}
@media(prefers-reduced-motion:reduce){.reference-pixel-canvas{display:none!important}.reference-pixel-ready>img{opacity:1!important}}
@media(hover:none),(pointer:coarse){.reference-pixel-canvas{display:none!important}.reference-pixel-ready>img{opacity:1!important}}
@media print{.reference-pixel-canvas{display:none!important}.reference-pixel-ready>img{opacity:1!important}}


/* Subtle cursor-ring echo carried over from the earlier site concept. */
.cursor-ring-canvas{position:fixed;inset:0;z-index:90;width:100vw;height:100vh;pointer-events:none;max-width:none;display:block}
@media(hover:hover) and (pointer:fine){html.cursor-ring-active,html.cursor-ring-active body,html.cursor-ring-active body *{cursor:none!important}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.cursor-ring-canvas{display:none!important}}
@media print{.cursor-ring-canvas{display:none!important}}
