/* V10: usability, content structure and responsive polish. The V9 FrameShift motion language is preserved. */
:root{--border-light:#acb9ae;--muted-ink:#536659}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #b5d3b2;outline-offset:4px}
html{scroll-padding-top:90px}
.header-contact{font-size:10px;font-weight:600;letter-spacing:.12em;border-bottom:1px solid #d9e4d7a8;padding:5px 0;text-decoration:none;white-space:nowrap}
.ending-action{display:inline-flex;align-items:center;gap:40px;margin-top:25px;padding:13px 0;border-bottom:1px solid #e2e6d9;font-size:11px;letter-spacing:.13em;font-weight:600}
.ending-action:hover,.header-contact:hover{color:#c0d3bf}
.full-title{pointer-events:none}
.full-project-cta{pointer-events:auto;background:transparent;border:0;border-bottom:1px solid #efeee2d1;padding:12px 0;color:inherit;font-size:11px;letter-spacing:.15em;font-weight:600;margin-top:25px}
.full-project-cta:hover{color:#d7e5d3}
.project-cta{min-height:42px;padding:7px 0!important;opacity:1!important;letter-spacing:.13em}
.service-item{border-top:1px solid #9eada0}
.service-item:last-child{border-bottom:1px solid #9eada0}
.service-trigger{background:none;width:100%;display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:center;text-align:left;color:var(--ink);border:0;padding:24px 0;min-height:76px}
.service-trigger .num{font-size:11px;color:#738678}
.service-trigger .name{font-size:clamp(25px,3.5vw,55px);letter-spacing:-.056em;line-height:1.1}
.service-trigger .arr{font-size:26px;line-height:1;font-weight:400;transition:transform .24s ease}
.service-trigger:hover .name{text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:1px}
.service-description{color:#4c6752;font-size:clamp(13px,1.1vw,17px);max-width:640px;line-height:1.8;padding:0 35px 32px 100px}
.service-description[hidden]{display:none}
.about-studio,.process,.project-inquiry{border-top:1px solid #b7c3b8;padding:clamp(95px,10vw,156px) 0}
.section-intro{max-width:750px}
.section-intro h2{font-size:clamp(56px,6.9vw,112px);letter-spacing:-.08em;line-height:.96;font-weight:500;margin:26px 0 0}
.about-studio{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(45px,6vw,130px)}
.about-copy{padding-top:60px}.about-copy p{font-size:clamp(16px,1.5vw,22px);line-height:1.64;color:#4a5d50;margin:0 0 22px;letter-spacing:-.025em}
.about-copy span{display:block;margin-top:42px;font-size:10px;color:#677a6c;letter-spacing:.14em}

/* V42: The Process section uses the shared green atmosphere system. */
.process-hero{display:block}
.process-hero .section-intro{max-width:780px}

.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,60px);margin-top:clamp(65px,7vw,115px)}
.process-grid article{border-top:1px solid #829686;padding-top:26px}
.process-grid article span{font-size:10px;letter-spacing:.15em;color:#617768}
.process-grid h3{font-weight:500;letter-spacing:-.055em;font-size:clamp(25px,2.9vw,42px);line-height:1.07;margin:35px 0 17px}
.process-grid p{max-width:340px;font-size:14px;line-height:1.75;color:#596c5d}
.project-inquiry{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,7vw,110px)}
.project-inquiry .section-intro>p{max-width:430px;font-size:16px;line-height:1.7;color:#526554}
.inquiry-warning{background:#d1d9ce;padding:18px 20px;border-left:2px solid #6d866e;font-size:12px!important}
.inquiry-form{display:flex;flex-direction:column;gap:23px;padding-top:5px}
.inquiry-form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:#36483a}
.inquiry-form input,.inquiry-form textarea,.inquiry-form select{appearance:none;width:100%;margin-top:12px;background:transparent;border:0;border-bottom:1px solid #829688;padding:12px 0 15px;min-height:48px;border-radius:0;outline:none;color:#1d3022;font-size:15px;letter-spacing:normal;text-transform:none;font-weight:400}
.inquiry-form textarea{min-height:122px;resize:vertical}
.inquiry-form :is(input,textarea,select):focus-visible{outline:none;border-bottom:2px solid #315d3b}
.inquiry-form ::placeholder{color:#7f9280}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.inquiry-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:5px}
.inquiry-actions button{min-height:46px;border:1px solid #2e4934;background:#284b30;color:#f2f4ee;padding:12px 18px;font-size:11px;font-weight:600;letter-spacing:.1em}
.inquiry-actions button:disabled{cursor:not-allowed;opacity:.45}
.inquiry-actions .secondary-action{background:transparent;color:#233e2b}
.inquiry-actions .secondary-action:hover{background:#d3dfd0}
.inquiry-status{font-size:12px;line-height:1.5;color:#526b54;min-height:18px;margin:0}
.detail-navigation{display:flex;gap:25px;flex-wrap:wrap}
.detail-navigation button{min-height:46px}
.detail-inquire{display:inline-block;border-bottom:1px solid #bed0bb;margin-top:24px;padding:13px 0;font-size:11px;letter-spacing:.14em}
.detail-inquire:hover{color:#b9d8b8}
@media(max-width:850px){.about-studio,.project-inquiry{grid-template-columns:1fr;gap:24px}.about-copy{padding-top:10px}.process-grid{gap:24px}.process-grid h3{font-size:25px}.service-trigger{grid-template-columns:38px 1fr auto}.service-description{padding-left:58px}}
@media(max-width:600px){
  .header-contact{display:none}
  .project-cta{display:inline-block!important;font-size:9px!important;margin-top:4px!important;min-height:34px;padding:6px 0!important}
  .panel-copy .num{top:83px!important}
  .panel-copy{padding-bottom:12px!important}
  .panel-copy h2{font-size:clamp(27px,7.1vw,41px)!important;margin:0 0 6px!important}
  .full-project-cta{margin-top:16px;font-size:10px;min-height:44px}
  .full-title{bottom:23vh}
  .hero-photo{object-position:50% 48%!important}
  .chapter:first-child .panel-image img{object-position:50% 49%!important}
  .service-trigger{grid-template-columns:33px 1fr auto;gap:10px;min-height:75px;padding:21px 0}
  .service-trigger .name{font-size:clamp(21px,5.7vw,32px)}
  .service-trigger .arr{font-size:22px}
  .service-description{padding:0 4px 23px 43px;font-size:13px}
  .about-studio,.process,.project-inquiry{padding:90px 0}
  .section-intro h2{font-size:clamp(49px,11vw,75px)}
  .process-grid{grid-template-columns:1fr;gap:25px;margin-top:52px}
  .process-grid article{padding-top:20px}
  .process-grid h3{margin:15px 0 12px;font-size:29px}
  .field-pair{grid-template-columns:1fr;gap:23px}
  .ending-action{font-size:10px;gap:24px}
  .inquiry-form{gap:20px}
  .detail-navigation{gap:12px}
}
@media(max-width:400px){.hero-content h1{font-size:clamp(49px,12.7vw,61px)!important}.hud-hint{display:none}.full-title h3{font-size:clamp(47px,11.7vw,63px)}.panel-copy{padding-top:70px!important}}
/* Accessibility: the linear non-animated flow must not leave the scenes in an absolute stack. */
@media(prefers-reduced-motion:reduce){
 .story,.stage{height:auto!important;min-height:0!important}
 .stage{position:relative!important;overflow:visible!important}
 .hero,.chapter,.ending{position:relative!important;display:block;min-height:100svh;height:100svh;clip-path:none!important;pointer-events:auto!important}
 .chapters{position:relative!important;inset:auto!important;pointer-events:auto!important}
 .chapter .panel-copy{display:flex!important;opacity:1!important;transform:none!important}
 .chapter .panel-image{left:38%!important;width:62%!important;height:100%!important;top:0!important}
 .full-title{display:none!important}
 .ending{display:flex}
 .hero-content{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:600px){
 .chapter .panel-copy{inset:0 0 61% 0!important;padding:78px var(--g) 15px!important}
 .chapter .panel-image{top:39%!important;left:0!important;width:100%!important;height:61%!important}
 .project-cta{display:inline-block!important}
}


/* V11 menu refinement: richer editorial navigation without changing the overall structure. */
.menu{background:radial-gradient(circle at 82% 14%,rgba(50,74,56,.38),transparent 32%),linear-gradient(140deg,#0e1714 0%,#101b16 44%,#0c1512 100%);justify-content:space-between;overflow:auto;padding:92px var(--g) 34px}
.menu::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) .65px,transparent .7px);background-size:12px 12px;opacity:.06;mix-blend-mode:soft-light}
.menu-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.78fr);gap:clamp(34px,5vw,92px);align-items:center;min-height:calc(100svh - 150px)}
.menu-nav{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(5px,.8vw,12px)}
.menu-link{display:flex!important;align-items:flex-end;gap:16px;position:relative;color:#f1eee6;opacity:.62;transform:translateX(0);transition:color .28s ease,opacity .28s ease,transform .32s cubic-bezier(.2,.7,.1,1);text-decoration:none;padding-right:20px;line-height:1}
.menu-link::after{content:"";position:absolute;left:0;right:auto;bottom:-7px;width:0;height:1px;background:#cfdbcd;opacity:.7;transition:width .34s ease}
.menu-link:hover,.menu-link:focus-visible,.menu-link.is-active{opacity:1;color:#fff;transform:translateX(10px)}
.menu-link:hover::after,.menu-link:focus-visible::after,.menu-link.is-active::after{width:calc(100% - 20px)}
.menu-link .menu-item-index{display:inline-block;min-width:24px;padding-bottom:.62em;font-size:10px;font-weight:600;letter-spacing:.16em;color:#9daea1}
.menu-link .menu-item-label{font-size:clamp(56px,8vw,124px);font-weight:500;letter-spacing:-.082em;line-height:.92}
.menu-preview{justify-self:end;width:min(100%,540px);opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .45s ease}
.menu.open .menu-preview{opacity:1;transform:none;transition-delay:.16s}
.menu-preview-card{display:flex;flex-direction:column;gap:18px}
.menu-preview-media{position:relative;aspect-ratio:4/4.85;overflow:hidden;border-radius:2px;background:#1a2520;box-shadow:0 25px 90px rgba(0,0,0,.3)}
.menu-preview-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,13,11,.4),rgba(8,13,11,.04) 45%,transparent 62%);pointer-events:none}
.menu-preview-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:54% 52%;transform:scale(1.01);transition:transform .65s ease,filter .4s ease,opacity .3s ease;filter:saturate(.92)}
.menu-link:hover~.menu-preview .menu-preview-media img,.menu-link.is-active~.menu-preview .menu-preview-media img{transform:scale(1.035)}
.menu-preview-copy{display:grid;gap:10px}
.menu-preview-kicker{font-size:10px;font-weight:600;letter-spacing:.18em;color:#9faf9f}
.menu-preview-title{margin:0;font-size:clamp(30px,3.2vw,42px);line-height:1;letter-spacing:-.055em;font-weight:500;color:#f2efe8}
.menu-preview-text{margin:0;max-width:47ch;font-size:14px;line-height:1.8;color:#bfcbc0}
.menu-preview-meta{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:6px;font-size:10px;letter-spacing:.14em;color:#8ea18f;text-transform:uppercase}
.menu-footer-note{padding-top:18px;font-size:10px;letter-spacing:.16em;color:#8aa18d}
.menu-close{top:24px;right:var(--g);display:inline-flex;align-items:center;gap:10px;padding:7px 0;color:#dce4d6;border-bottom:1px solid rgba(223,232,218,.28);transition:color .25s ease,border-color .25s ease}
.menu-close:hover{color:#fff;border-color:rgba(238,243,236,.8)}
.menu.open .menu-link{opacity:0;transform:translateX(-18px)}
.menu.open .menu-link:nth-child(1){animation:menuRise .48s .05s forwards cubic-bezier(.18,.7,.18,1)}
.menu.open .menu-link:nth-child(2){animation:menuRise .48s .1s forwards cubic-bezier(.18,.7,.18,1)}
.menu.open .menu-link:nth-child(3){animation:menuRise .48s .15s forwards cubic-bezier(.18,.7,.18,1)}
.menu.open .menu-link:nth-child(4){animation:menuRise .48s .2s forwards cubic-bezier(.18,.7,.18,1)}
.menu.open .menu-link:nth-child(5){animation:menuRise .48s .25s forwards cubic-bezier(.18,.7,.18,1)}
.menu.open .menu-link:nth-child(6){animation:menuRise .48s .3s forwards cubic-bezier(.18,.7,.18,1)}
@keyframes menuRise{from{opacity:0;transform:translateX(-18px)}to{opacity:.62;transform:none}}
.menu.open .menu-link.is-active{opacity:1}
@media(max-width:980px){.menu{padding-top:82px}.menu-shell{grid-template-columns:1fr;align-items:start;min-height:auto}.menu-preview{width:min(100%,420px);justify-self:start}.menu-link .menu-item-label{font-size:clamp(52px,12vw,98px)}}
@media(max-width:700px){.menu-preview{display:none}.menu-link{gap:10px}.menu-link::after{bottom:-5px}.menu-link .menu-item-index{padding-bottom:.5em;font-size:9px}.menu-link .menu-item-label{font-size:clamp(46px,15vw,86px)}.menu-footer-note{margin-top:30px}.menu{padding-bottom:28px}}
@media(max-width:420px){.menu{padding-top:76px}.menu-shell{gap:12px}.menu-nav{gap:4px}.menu-link .menu-item-label{font-size:clamp(42px,15vw,76px)}.menu-close{font-size:10px}}

/* V12 — hover-driven cinematic camera drift on the existing menu image.
   A restrained pan/zoom keeps the chair and lamp visible without changing artwork or page layout. */
.menu-preview-media img{
  transform:translate3d(var(--menu-pan-x,0%),var(--menu-pan-y,0%),0) scale(var(--menu-zoom,1.065));
  transform-origin:50% 50%;
  transition:transform 970ms cubic-bezier(.19,1,.22,1),filter 820ms ease;
  filter:saturate(.92) brightness(var(--menu-luma,1));
  will-change:transform;
  backface-visibility:hidden;
}
.menu-preview-copy.is-refreshing > :is(.menu-preview-kicker,.menu-preview-title,.menu-preview-text,.menu-preview-meta){
  animation:v12CaptionIn 450ms cubic-bezier(.22,1,.36,1) both;
}
.menu-preview-copy.is-refreshing > .menu-preview-title{animation-delay:35ms}
.menu-preview-copy.is-refreshing > .menu-preview-text{animation-delay:70ms}
.menu-preview-copy.is-refreshing > .menu-preview-meta{animation-delay:100ms}
@keyframes v12CaptionIn{
  from{opacity:.2;transform:translate3d(0,9px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
/* No image motion on compact navigation, and respect reduced-motion preferences. */
@media(max-width:700px){
  .menu-preview-media img{will-change:auto}
}
@media(prefers-reduced-motion:reduce){
  .menu-preview-media img{transform:scale(1.01)!important;filter:saturate(.92)!important;transition:none!important;will-change:auto}
  .menu-preview-copy.is-refreshing > :is(.menu-preview-kicker,.menu-preview-title,.menu-preview-text,.menu-preview-meta){animation:none!important}
}

/* V23 — Header contrast adapts only when it overlaps the light content area.
   No change to the cinematic hero, menu dimensions or navigation structure. */
.site-header{
  background-color:transparent;
  transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.site-header .wordmark small{transition:color .3s ease}
.site-header .header-contact{transition:color .3s ease,border-color .3s ease}
.site-header.is-on-light{
  background-color:rgba(238,236,229,.96);
  color:#202d25;
  box-shadow:0 1px 0 rgba(32,45,37,.12);
}
.site-header.is-on-light .wordmark small{color:#506356}
.site-header.is-on-light .header-contact{border-bottom-color:rgba(32,45,37,.45)}
.site-header.is-on-light .header-contact:hover{color:#446749;border-bottom-color:currentColor}
@media(prefers-reduced-motion:reduce){
 .site-header,.site-header .wordmark small,.site-header .header-contact{transition:none}
}


/* V28 — elevated cinematic menu-hover interaction.
   Only affects the open navigation overlay; dimensions, type and imagery stay unchanged. */
/* The original entrance animation held the inactive 0.62 opacity even after
   hovering. Keep the entrance, but restore legible contrast for the current item. */
.menu.open .menu-nav .menu-link:is(:hover,:focus-visible,.is-active){
  color:#f4f5ef!important;
  opacity:1!important;
}
@media (hover:hover) and (pointer:fine){
  .menu-link .menu-item-label{
    display:inline-block;
    position:relative;
    transform:translate3d(0,0,0);
    transition:transform 660ms cubic-bezier(.16,1,.3,1), color 320ms ease;
    will-change:transform;
  }
  .menu-link .menu-item-index{
    transition:color 350ms ease,transform 580ms cubic-bezier(.16,1,.3,1);
  }
  .menu-link:hover .menu-item-label,
  .menu-link:focus-visible .menu-item-label,
  .menu-link.is-active .menu-item-label{
    transform:translate3d(12px,-3px,0);
  }
  .menu-link:hover .menu-item-index,
  .menu-link:focus-visible .menu-item-index,
  .menu-link.is-active .menu-item-index{
    color:#dce9da;
    transform:translate3d(0,-4px,0);
  }
  /* A tiny trailing accent appears only on the selected word. */
  .menu-link .menu-item-label::after{
    content:"↗";
    position:absolute;
    top:.06em;
    right:-.48em;
    font-size:.19em;
    font-weight:400;
    line-height:1;
    letter-spacing:0;
    color:#d2e7d2;
    opacity:0;
    transform:translate3d(-9px,9px,0);
    transition:opacity 300ms ease,transform 580ms cubic-bezier(.16,1,.3,1);
    pointer-events:none;
  }
  .menu-link:hover .menu-item-label::after,
  .menu-link:focus-visible .menu-item-label::after,
  .menu-link.is-active .menu-item-label::after{
    opacity:.87;
    transform:translate3d(0,0,0);
  }
}
/* A restrained light sweep accompanies changes of the editorial preview. */
.menu-preview-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(245,244,226,.075) 50%,transparent 67%);
  opacity:0;
  transform:translate3d(-100%,0,0);
}
.menu-preview-media.is-shifting::before{
  animation:v28PreviewSweep 780ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes v28PreviewSweep{
  0%{opacity:0;transform:translate3d(-100%,0,0)}
  16%{opacity:1}
  76%{opacity:.8}
  100%{opacity:0;transform:translate3d(100%,0,0)}
}
/* The preview caption arrives in a measured sequence after each selection. */
.menu-preview-copy.is-refreshing > :is(.menu-preview-kicker,.menu-preview-title,.menu-preview-text,.menu-preview-meta){
  animation-duration:590ms;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
}
.menu-preview-copy.is-refreshing > .menu-preview-title{animation-delay:40ms}
.menu-preview-copy.is-refreshing > .menu-preview-text{animation-delay:90ms}
.menu-preview-copy.is-refreshing > .menu-preview-meta{animation-delay:145ms}
@media (max-width:700px){
  /* No hover adornments on touch navigation; preserve available width. */
  .menu-link .menu-item-label::after{display:none}
  .menu-preview-media::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* The V11 entrance animation normally reveals the links; show them without it. */
  .menu.open .menu-link{opacity:.72!important;transform:none!important}
  .menu-link,.menu-link .menu-item-label,.menu-link .menu-item-index,
  .menu-link .menu-item-label::after{transition:none!important;animation:none!important;transform:none!important}
  .menu-preview-media::before{animation:none!important;display:none!important}
  .menu-preview-copy.is-refreshing > :is(.menu-preview-kicker,.menu-preview-title,.menu-preview-text,.menu-preview-meta){animation:none!important}
}