:root{--paper:#f5f1ea;--paper-light:#faf7f2;--paper-warm:#f0e9df;--sand:#e3d6c6;--sand-deep:#d9c9b8;--stone:#817262;--stone-dark:#493f37;--ink:#403630;--ink-soft:rgba(64,54,48,.78);--ink-faint:rgba(64,54,48,.50);--line:rgba(64,54,48,.12);--line-strong:rgba(64,54,48,.22);--serif:"Instrument Serif",serif;--display:"Bodoni Moda",serif;--sans:"Manrope","Noto Sans JP",sans-serif;--jp:"Noto Sans JP",sans-serif;--container:1510px;--header-h:96px;--ease:cubic-bezier(.22,.72,.28,1);--shadow:0 24px 70px rgba(48,39,33,.07)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-width:320px;margin:0;overflow-x:hidden;color:var(--ink);background:var(--paper);font-family:var(--jp);font-weight:300;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{padding:0;border:0;background:transparent;cursor:pointer}
button:focus,a:focus{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1px solid rgba(64,54,48,.44);outline-offset:3px}
::selection{color:#fffaf3;background:var(--stone)}
.container{position:relative;z-index:3;width:min(var(--container),calc(100% - 62px));margin-inline:auto}
section[id]{scroll-margin-top:var(--header-h)}
#contact-form{scroll-margin-top:calc(var(--header-h) + 30px)}
.no-js .opening{display:none}
.opening{position:fixed;z-index:9999;inset:0;overflow:hidden;background:#f3eee7;opacity:1;visibility:visible}
.opening__texture{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 18%,rgba(76,63,53,.03),transparent 27%),radial-gradient(circle at 83% 76%,rgba(76,63,53,.03),transparent 26%)}
.opening__inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:translateY(42px)}
.opening__studio{margin:25px 0 0;font-family:var(--sans);font-size:.84rem;font-weight:500;letter-spacing:.31em}
.opening__copy{display:flex;align-items:center;flex-direction:column;gap:8px;margin-top:22px}
.opening__copy>span{color:var(--ink-soft);font-family:var(--serif);font-size:clamp(1.7rem,1.9vw,2.05rem);font-style:italic}
.opening__copy small{color:var(--ink-faint);font-size:.92rem}
.wordmark{display:inline-flex;align-items:baseline;color:var(--ink);font-family:var(--serif);line-height:1;white-space:nowrap}
.wordmark__t,.wordmark__ing{position:relative;z-index:2;display:inline-block}
.wordmark__gate{position:relative;z-index:1;display:inline-block;width:.67em;height:.99em;align-self:baseline;flex:none;overflow:visible}
.wordmark__gate img{position:absolute;top:0;left:50%;width:auto;max-width:none;height:100%;object-fit:contain;filter:grayscale(1) brightness(.17) contrast(1.25);transform:translate(-50%,6.1%)}
.wordmark--opening{gap:clamp(9px,.62vw,12px);font-size:clamp(6.2rem,9vw,9.5rem);letter-spacing:-.035em}
.wordmark--opening .wordmark__t{transform:translateX(-3px)}
.wordmark--opening .wordmark__ing{letter-spacing:.025em}
.brand{display:inline-flex;width:max-content;align-items:flex-start;flex-direction:column;gap:5px}
.wordmark--header{gap:5px;font-size:2.18rem;letter-spacing:-.025em}
.wordmark--header .wordmark__ing{letter-spacing:.01em}
.wordmark--footer{gap:5px;font-size:2rem}
.brand__studio{padding-left:1px;color:var(--ink-faint);font-family:var(--sans);font-size:.77rem;letter-spacing:.25em}
.site-progress{position:fixed;z-index:9000;top:0;left:0;width:100%;height:2px;pointer-events:none}
.site-progress span{display:block;width:0;height:100%;background:rgba(64,54,48,.4)}
.header{position:sticky;z-index:7000;top:0;height:var(--header-h);border-bottom:1px solid var(--line);background:rgba(245,241,234,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header__inner{display:grid;width:calc(100% - 28px);height:100%;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-inline:auto}
.header .brand{justify-self:start}
.global-nav{display:flex;align-items:center;justify-self:center;gap:clamp(30px,3vw,54px)}
.global-nav a{position:relative;color:var(--ink-soft);font-family:var(--sans);font-size:.97rem}
.global-nav a::after{position:absolute;right:0;bottom:-8px;left:0;height:1px;content:"";background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.global-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header-contact{display:flex;width:184px;height:62px;align-items:center;justify-content:space-between;justify-self:end;padding:0 20px;border:1px solid rgba(64,54,48,.35);font-size:1rem;transition:color .5s var(--ease),background .5s var(--ease)}
.header-contact:hover{color:#fffaf3;background:var(--ink)}
.menu-button{position:relative;display:none;width:44px;height:44px;justify-self:end}
.menu-button span{position:absolute;left:10px;width:24px;height:1px;background:var(--ink);transition:top .5s var(--ease),transform .5s var(--ease)}
.menu-button span:first-child{top:17px}
.menu-button span:last-child{top:25px}
.menu-button.is-active span:first-child{top:21px;transform:rotate(45deg)}
.menu-button.is-active span:last-child{top:21px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;z-index:6500;inset:var(--header-h) 0 0;display:none;flex-direction:column;justify-content:space-between;padding:30px 24px;opacity:0;visibility:hidden;pointer-events:none;background:rgba(245,241,234,.985);transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu nav{display:grid}
.mobile-menu nav a{display:grid;width:100%;grid-template-columns:34px 1fr auto;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);text-align:left}
.mobile-menu small{color:var(--ink-faint);font-size:.76rem}
.mobile-menu strong{font-size:1.3rem;font-weight:500}
.mobile-menu span{color:var(--ink-soft);font-size:.92rem}
.mobile-menu__bottom{display:grid;gap:6px;color:var(--ink-faint);font-size:.86rem}
.hero{position:relative;min-height:calc(100svh - var(--header-h));overflow:hidden;background:var(--paper)}
.hero__grid{position:absolute;inset:0;pointer-events:none;opacity:.4;background-image:linear-gradient(to right,rgba(64,54,48,.032) 1px,transparent 1px);background-size:12.5% 100%}
.hero__inner,.hero__layout{min-height:calc(100svh - var(--header-h))}
@media (min-width:981px){.hero__inner{width:calc(100% - 62px)}}
.hero__layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(540px,1.1fr);align-items:center}
.hero__copy{position:relative;z-index:5;max-width:800px;padding:46px 0 74px}
.hero__brand-copy{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 22px;margin-bottom:30px}
.hero__brand-copy em{color:var(--stone);font-family:var(--serif);font-size:clamp(2rem,2.2vw,2.6rem);font-style:italic}
.hero__brand-copy strong{color:var(--ink-soft);font-size:clamp(1.18rem,1.36vw,1.48rem);font-weight:300}
.hero-title{position:relative;z-index:6;margin:0;font-size:clamp(3.55rem,5.05vw,5.85rem);font-weight:300;line-height:1.09;letter-spacing:-.06em}
.hero-title__mask{display:block;overflow:hidden;white-space:nowrap}
.hero-title__mask>span{display:inline-block}
.hero-title em{font-family:var(--serif);font-weight:400;font-style:italic}
.hero__description{max-width:690px;margin:31px 0 0;color:var(--ink-soft);font-size:1.08rem;line-height:1.95}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:31px}
.cta{display:flex;min-width:245px;height:64px;align-items:center;justify-content:space-between;padding:0 22px;border:1px solid var(--line-strong);font-size:1rem;transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.cta i{font-style:normal}
.cta--main{color:#fffaf3;border-color:var(--stone);background:var(--stone)}
.cta--main:hover{background:var(--stone-dark);transform:translateY(-2px)}
.cta--sub:hover{background:rgba(64,54,48,.05);transform:translateY(-2px)}
.hero-visual{position:relative;min-height:calc(100svh - var(--header-h));height:100%;overflow:visible}
.hero-visual__frame{position:absolute;top:7%;right:-18%;bottom:0;left:-17%;border:1px solid rgba(64,54,48,.052)}
.hero-visual__gate{position:absolute;z-index:1;inset:0;overflow:visible;opacity:.072;pointer-events:none}
.hero-visual__gate img{position:absolute;top:-1%;right:auto;left:6%;width:auto;height:180%;max-width:none;object-fit:contain;clip-path:none;transform:translateX(-20%);transform-origin:20% 50%}
.hero-visual__gate::after{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(90deg,rgba(245,241,234,.11),transparent 24%,transparent 80%,rgba(245,241,234,.02))}
.hero-visual__arch{position:absolute;z-index:2;top:17%;right:-9%;width:min(31vw,485px);aspect-ratio:1;border:1px solid rgba(64,54,48,.05);border-radius:50%}
.hero-visual__arch::before{position:absolute;right:18%;bottom:-45%;width:73%;aspect-ratio:1;content:"";border:1px solid rgba(64,54,48,.047);border-radius:50%}
.hero-visual__line{position:absolute;z-index:2;background:rgba(64,54,48,.045)}
.hero-visual__line--v1{top:10%;bottom:0;left:16%;width:1px}
.hero-visual__line--v2{top:8%;right:5%;bottom:0;width:1px}
.hero-visual__line--h{top:55%;right:-18%;left:-18%;height:1px}
.hero-visual__dot{position:absolute;z-index:3;width:6px;aspect-ratio:1;border-radius:50%;background:rgba(64,54,48,.25)}
.hero-visual__dot--1{top:55%;left:16%}
.hero-visual__dot--2{top:43%;right:1%}
.hero-visual__dot--3{right:19%;bottom:8%}
.hero-scroll{position:absolute;z-index:6;bottom:34px;left:max(31px,calc((100vw - var(--container)) / 2));display:flex;align-items:center;gap:14px;color:var(--ink-faint);font-family:var(--sans);font-size:.73rem;letter-spacing:.18em}
.hero-scroll i{display:block;width:74px;height:1px;background:var(--line-strong)}
.section,.contact{position:relative;overflow:hidden}
.section{padding:48px 0 110px}
.section--samples{background:var(--paper-light)}
.section--plans{background:var(--sand)}
.section--services{background:var(--paper-warm)}
.section--process{background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.26),transparent 44%),#d9cbb9}
.section--faq{background:var(--paper-light)}
.section-heading{position:relative;width:100%;margin-bottom:36px}
.section-heading__row{display:flex;width:100%;align-items:flex-end;justify-content:space-between;gap:40px}
.section-heading__index{color:var(--ink);font-family:var(--sans);font-size:clamp(1.55rem,2.05vw,2.15rem);font-weight:400;line-height:1.15;letter-spacing:.075em}
.section-heading__row h2{margin:0 0 2px;color:var(--ink-soft);font-size:clamp(1.05rem,1.22vw,1.3rem);font-weight:400;line-height:1.4;letter-spacing:.01em;white-space:nowrap}
.section-heading__line{display:block;width:100%;height:1px;margin-top:17px;background:rgba(64,54,48,.20);transform-origin:left center}
.section-heading__note{margin:13px 0 0;color:var(--ink-faint);font-size:.93rem;line-height:1.85}
.section-heading--compact{margin-bottom:31px}
.ambient{position:absolute;z-index:1;pointer-events:none}
.ambient--samples{top:9%;right:-120px;width:390px;height:390px;border:1px solid rgba(64,54,48,.035);border-radius:50%}
.ambient--plans{top:9%;right:7%;width:250px;height:330px;border-top:1px solid rgba(64,54,48,.055);border-left:1px solid rgba(64,54,48,.055)}
.ambient--services{bottom:-170px;left:-170px;width:390px;height:390px;border:1px solid rgba(64,54,48,.045);border-radius:50%}
.ambient--process{top:28%;right:-100px;width:420px;height:1px;background:rgba(64,54,48,.05)}
.ambient--faq{right:7%;bottom:8%;width:270px;height:270px;border:1px solid rgba(64,54,48,.035);border-radius:50%}
.samples-grid{display:grid;grid-template-columns:285px minmax(0,1fr);align-items:start;gap:50px}
.sample-aside{position:sticky;top:calc(var(--header-h) + 24px)}
.sample-filter-group{position:relative}
.sample-filter-group+.sample-filter-group{margin-top:34px}
.sample-filter-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 12px;border-bottom:1px solid var(--line-strong);color:var(--ink-faint);font-family:var(--sans);font-size:.72rem;letter-spacing:.14em}
.sample-filter-head span:first-child{color:var(--ink-soft);text-align:left}
.sample-filter-head span:last-child{margin-left:auto;text-align:right}
.sample-filter-list{margin-top:9px}
.sample-filter-button{position:relative;display:grid;width:100%;min-height:70px;grid-template-columns:38px minmax(0,1fr) 66px 16px;align-items:center;gap:10px;padding:0 10px;border-bottom:1px solid var(--line);text-align:left;transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.sample-filter-button::before{position:absolute;top:0;bottom:0;left:0;width:2px;content:"";background:var(--stone);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.sample-filter-button:hover{background:rgba(120,106,93,.05)}
.sample-filter-button.is-active{background:rgba(120,106,93,.10)}
.sample-filter-button.is-active::before{transform:scaleY(1)}
.sample-filter-button__number{color:rgba(64,54,48,.62);font-family:var(--serif);font-size:1.55rem}
.sample-filter-button__name{font-family:var(--sans);font-size:.97rem;font-weight:500}
.sample-filter-button__jp,.sample-filter-button__status{color:var(--ink-soft);font-size:.75rem}
.sample-filter-button__arrow{color:var(--ink-faint)}
.sample-filter-group--plan{max-height:260px;opacity:1;transform:translateY(0);overflow:hidden;transition:max-height .85s var(--ease),opacity .55s var(--ease),transform .75s var(--ease),margin .75s var(--ease)}
.sample-filter-group--plan.is-locked{max-height:0;margin-top:0!important;opacity:0;transform:translateY(-8px);pointer-events:none}
.sample-aside__note{margin-top:28px;padding-top:12px;border-top:1px solid var(--line)}
.sample-aside__note span{color:var(--ink-faint);font-family:var(--sans);font-size:.68rem;letter-spacing:.15em}
.sample-aside__note p{margin:6px 0 0;color:var(--ink-soft);font-size:.86rem}
.sample-main{min-width:0}
.sample-project-bar{display:grid;grid-template-columns:minmax(330px,1fr) auto;align-items:end;gap:42px;padding:10px 0 24px;border-bottom:1px solid var(--line-strong)}
.sample-project-bar__identity{display:flex;justify-content:flex-end;flex-direction:column}
.sample-project__index{display:block;margin-bottom:10px;color:var(--ink-faint);font-family:var(--sans);font-size:.73rem;letter-spacing:.16em}
.sample-project-bar h3{margin:0;font-size:clamp(2.15rem,2.8vw,3.05rem);font-weight:400;line-height:1.02;letter-spacing:-.035em}
.sample-project-meta{display:grid;grid-template-columns:minmax(120px,1fr) minmax(150px,1fr) auto;align-items:end;gap:clamp(28px,3vw,54px);padding-bottom:2px}
.sample-project-meta__item{position:relative;display:flex;min-width:120px;justify-content:flex-end;flex-direction:column;padding:0;border:0}
.sample-project-meta__item small{position:absolute;left:0;bottom:calc(100% + 8px);color:var(--ink-faint);font-family:var(--sans);font-size:.66rem;line-height:1;letter-spacing:.13em}
.sample-project-meta__item strong{display:block;color:var(--ink-soft);font-size:.98rem;font-weight:400;line-height:1.02;white-space:nowrap}

/* =========================================================
   SAMPLE VIEW BUTTON
========================================================= */

.sample-project-meta__view{
  align-self:end;
  display:inline-flex;
  min-width:118px;
  height:42px;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:1px solid rgba(64,54,48,.28);
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:400;
  line-height:1;
  letter-spacing:.1em;
  white-space:nowrap;
  transform:translateY(8px);
  transition:
    background-color .45s var(--ease),
    color .45s var(--ease),
    border-color .45s var(--ease),
    transform .45s var(--ease);
}

.sample-project-meta__view:hover{
  color:var(--paper);
  border-color:var(--ink);
  background:var(--ink);
  transform:translateY(6px);
}

.sample-project-meta__view.is-disabled{
  color:var(--ink-faint);
  border-color:var(--line);
  background:transparent;
  pointer-events:none;
}

.sample-page-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0 18px}
.sample-page-button{display:flex;min-height:76px;align-items:flex-start;justify-content:center;flex-direction:column;gap:5px;padding:0 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;transition:background .45s var(--ease),border-color .45s var(--ease)}
.sample-page-button span{color:var(--ink-faint);font-family:var(--sans);font-size:.67rem}
.sample-page-button strong{width:100%;font-family:var(--sans);font-size:.9rem;font-weight:500;text-align:left}
.sample-page-button:hover{background:rgba(255,255,255,.18)}
.sample-page-button.is-active{border-top-color:rgba(64,54,48,.5);background:rgba(255,255,255,.25)}
.sample-page-nav.is-disabled{opacity:.25;pointer-events:none}
.sample-browser{overflow:hidden;border:1px solid rgba(64,54,48,.13);background:rgba(255,255,255,.3);box-shadow:var(--shadow)}
.sample-browser__top{display:flex;height:52px;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid var(--line)}
.sample-browser__top-left{display:flex;align-items:center;gap:15px}
.sample-browser__dots{display:flex;gap:7px}
.sample-browser__dots i{width:7px;aspect-ratio:1;border-radius:50%;background:rgba(64,54,48,.22)}
.sample-browser__label,.sample-browser__top a{color:var(--ink-faint);font-family:var(--sans);font-size:.7rem;letter-spacing:.13em}
.sample-browser__viewport{position:relative;width:100%;min-height:420px;overflow:hidden;background:#e9e0d4}
.sample-browser__viewport img{display:block;width:100%;height:auto;opacity:1;object-fit:contain;object-position:top center;transition:none!important}
.sample-coming{display:flex;min-height:520px;align-items:center;justify-content:center;flex-direction:column;padding:40px;text-align:center;background:radial-gradient(circle at center,rgba(255,255,255,.38),transparent 45%),#eee6db}
.sample-coming[hidden]{display:none}
.sample-coming span{color:var(--ink-faint);font-family:var(--sans);font-size:.7rem;letter-spacing:.16em}
.sample-coming strong{margin-top:10px;font-family:var(--serif);font-size:clamp(3.5rem,6vw,6.5rem);font-weight:400}
.sample-coming p{margin:16px 0 0;color:var(--ink-soft)}
.plans-layout{display:grid;grid-template-columns:390px minmax(0,1fr);gap:34px}
.plan-selector{border-top:1px solid var(--line-strong)}
.plan-button{position:relative;display:grid;width:100%;min-height:92px;grid-template-columns:48px 1fr 20px;align-items:center;gap:14px;padding:0 10px;border-bottom:1px solid var(--line);text-align:left;transition:background .55s var(--ease),transform .55s var(--ease)}
.plan-button::before{position:absolute;top:0;bottom:0;left:0;width:2px;content:"";background:var(--stone-dark);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.plan-button:hover{background:rgba(255,255,255,.13)}
.plan-button.is-active{background:rgba(255,255,255,.28)}
.plan-button.is-active::before{transform:scaleY(1)}
.plan-button__number{color:rgba(64,54,48,.60);font-family:var(--serif);font-size:1.8rem}
.plan-button__title{display:grid;gap:4px}
.plan-button__title strong{font-family:var(--sans);font-size:1.42rem;font-weight:400;line-height:1.2}
.plan-button__title small{color:var(--ink-faint);font-family:var(--sans);font-size:.68rem;letter-spacing:.14em}
.plan-button i{color:var(--ink-faint);font-style:normal}
.plan-view{--plan-accent:rgba(64,54,48,.24);position:relative;min-height:530px;overflow:hidden;padding:36px 38px 34px;border:1px solid rgba(64,54,48,.14);background:rgba(255,255,255,.18);box-shadow:0 15px 45px rgba(64,54,48,.02);transition:color .75s var(--ease),background .75s var(--ease),border-color .75s var(--ease),box-shadow .75s var(--ease)}
.plan-view::before{position:absolute;z-index:0;inset:11px;content:"";pointer-events:none;opacity:0;border:1px solid transparent;transition:opacity .75s var(--ease),border-color .75s var(--ease)}
.plan-view::after{position:absolute;z-index:0;top:-120px;right:-82px;width:330px;aspect-ratio:1;content:"";border:1px solid var(--plan-accent);border-radius:50%;opacity:.42;transition:transform .85s var(--ease),opacity .75s var(--ease),border-color .75s var(--ease)}
.plan-view>*{position:relative;z-index:2}
.plan-view__top{display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line);color:var(--ink-faint);font-family:var(--sans);font-size:.72rem;letter-spacing:.14em}
.plan-view__top>div{display:flex;gap:14px}
.plan-view__headline{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:34px 0 24px;border-bottom:1px solid var(--line)}
.plan-view__headline h3{margin:0;font-family:var(--sans);font-size:clamp(3rem,3.85vw,4.25rem);font-weight:300;line-height:1;letter-spacing:-.04em;transition:font-family .4s var(--ease),letter-spacing .4s var(--ease)}
.plan-view__headline p{margin:14px 0 0;color:var(--ink-soft);font-size:1.02rem}
.plan-view__headline strong{font-family:var(--display);font-size:clamp(3.15rem,3.85vw,4.3rem);font-weight:400;line-height:1;letter-spacing:-.05em;white-space:nowrap}
.plan-view__description{max-width:790px;margin:26px 0 0;color:var(--ink-soft);font-size:1.02rem}
.plan-view__includes{margin-top:27px}
.plan-view__includes-head{display:flex;justify-content:flex-start;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--ink-faint);font-family:var(--sans);font-size:.7rem;letter-spacing:.14em}
.plan-view__includes-head span:last-child{display:none}
.plan-features{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.plan-features span{padding:8px 12px;border:1px solid var(--line);background:rgba(255,255,255,.18);color:var(--ink-soft);font-size:.92rem;transition:background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.plan-view__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:30px;padding-top:19px;border-top:1px solid var(--line)}
.plan-view__bottom small{color:var(--ink-faint);font-family:var(--sans);font-size:.68rem}
.plan-view__bottom span{display:block;margin-top:5px;color:var(--ink-soft);font-size:.96rem}
.plan-view__bottom a{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.plan-view__bottom a:hover{opacity:.58;transform:translateX(3px)}
.plan-view[data-tier="template"]{--plan-accent:rgba(64,54,48,.08);background:linear-gradient(135deg,rgba(255,255,255,.21),rgba(255,255,255,.10));border-color:rgba(64,54,48,.11);box-shadow:none}
.plan-view[data-tier="template"]::after{width:290px;opacity:.35}
.plan-view[data-tier="standard"]{--plan-accent:rgba(119,101,82,.13);background:radial-gradient(circle at 83% 10%,rgba(255,255,255,.50),transparent 34%),linear-gradient(135deg,rgba(255,255,255,.36),rgba(248,241,233,.22));border-color:rgba(94,78,65,.17);box-shadow:0 24px 60px rgba(74,60,49,.055)}
.plan-view[data-tier="standard"]::before{opacity:.48;border-color:rgba(94,78,65,.065)}
.plan-view[data-tier="standard"]::after{opacity:.72;transform:translate(-10px,8px) scale(1.06)}
.plan-view[data-tier="standard"] .plan-view__headline h3{letter-spacing:-.055em}
.plan-view[data-tier="standard"] .plan-features span{background:rgba(255,255,255,.25)}
.plan-view[data-tier="premium"]{--plan-accent:rgba(130,104,76,.18);background:radial-gradient(circle at 82% 8%,rgba(255,255,255,.72),transparent 31%),linear-gradient(145deg,rgba(251,247,241,.88),rgba(223,208,190,.48));border-color:rgba(105,85,67,.22);box-shadow:0 32px 78px rgba(72,57,45,.09)}
.plan-view[data-tier="premium"]::before{opacity:1;border-color:rgba(112,89,67,.11)}
.plan-view[data-tier="premium"]::after{width:370px;top:-148px;right:-54px;opacity:1;transform:rotate(-8deg)}
.plan-view[data-tier="premium"] .plan-view__headline h3{font-family:var(--serif);letter-spacing:-.025em}
.plan-view[data-tier="premium"] .plan-view__top::after{content:"PREMIUM EDITION";position:absolute;top:76px;right:38px;color:rgba(97,76,57,.20);font-family:var(--sans);font-size:.63rem;letter-spacing:.2em}
.plan-view[data-tier="premium"] .plan-features span{border-color:rgba(100,80,63,.17);background:rgba(255,255,255,.40)}
.plan-view[data-tier="brand"]{--line:rgba(245,238,230,.13);--ink-soft:rgba(245,238,230,.72);--ink-faint:rgba(245,238,230,.52);--plan-accent:rgba(231,210,184,.13);color:#f5eee6;border-color:rgba(245,238,230,.13);background:radial-gradient(circle at 83% 7%,rgba(218,194,168,.13),transparent 34%),linear-gradient(145deg,#5b4d43 0%,#493d35 55%,#3c322c 100%);box-shadow:0 36px 92px rgba(49,39,33,.20)}
.plan-view[data-tier="brand"]::before{opacity:1;border-color:rgba(245,238,230,.14)}
.plan-view[data-tier="brand"]::after{width:380px;top:-150px;right:-48px;opacity:1}
.plan-view[data-tier="brand"] .plan-view__headline h3{font-family:var(--serif);letter-spacing:-.025em}
.plan-view[data-tier="brand"] .plan-view__headline strong{font-size:clamp(3.15rem,3.85vw,4.3rem);color:#f5eee6}
.plan-view[data-tier="brand"] .plan-features span{color:rgba(245,238,230,.82);border-color:rgba(245,238,230,.16);background:rgba(255,255,255,.035)}
.plan-view[data-tier="brand"] .plan-view__bottom a{color:#f5eee6}
.price-note{display:grid;gap:6px;margin-top:18px;color:var(--ink-faint)}
.price-note span{font-family:var(--sans);font-size:.7rem}
.price-note p{margin:0;font-size:.95rem}
.service-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid rgba(64,54,48,.15);background:rgba(255,255,255,.15);box-shadow:0 24px 70px rgba(64,54,48,.035)}
.service-item{position:relative;min-height:500px;overflow:hidden;padding:30px 28px 34px;border-right:1px solid rgba(64,54,48,.12);transition:background .7s var(--ease),transform .7s var(--ease)}
.service-item:last-child{border-right:0}
.service-item::before{position:absolute;top:0;left:28px;width:1px;height:0;content:"";background:rgba(64,54,48,.38);transition:height .8s var(--ease)}
.service-item::after{position:absolute;right:-42%;bottom:-36%;width:240px;aspect-ratio:1;content:"";border:1px solid rgba(64,54,48,.055);border-radius:50%;transform:scale(.8);opacity:0;transition:transform .85s var(--ease),opacity .65s var(--ease)}
.service-item:hover{background:rgba(255,255,255,.30)}
.service-item:hover::before{height:88px}
.service-item:hover::after{transform:scale(1);opacity:1}
.service-figure{position:relative;width:100%;height:154px;margin-bottom:18px;opacity:.62;transition:opacity .65s var(--ease),transform .75s var(--ease)}
.service-item:hover .service-figure{opacity:.90;transform:translateY(-4px)}
.service-figure::before{position:absolute;top:13px;right:0;color:rgba(64,54,48,.23);font-family:var(--sans);font-size:.62rem;letter-spacing:.16em}
.service-item:nth-child(1) .service-figure::before{content:"01 / FRAME"}
.service-item:nth-child(2) .service-figure::before{content:"02 / SYSTEM"}
.service-item:nth-child(3) .service-figure::before{content:"03 / VOICE"}
.service-item:nth-child(4) .service-figure::before{content:"04 / RELEASE"}
.service-figure span,.service-figure i{position:absolute;border:1px solid rgba(64,54,48,.18);transition:transform .75s var(--ease)}
.service-figure--web span:first-child{top:44px;right:11%;bottom:15px;left:3%}
.service-figure--web span:nth-child(2){top:25px;right:0;bottom:36px;left:19%}
.service-figure--web i{top:78px;left:49%;width:12px;height:12px;border-radius:50%;background:rgba(64,54,48,.06)}
.service-item:hover .service-figure--web span:nth-child(2){transform:translate(6px,-5px)}
.service-figure--design span:first-child{top:29px;left:38%;width:88px;height:88px;border-radius:50%}
.service-figure--design span:nth-child(2){top:18px;left:55%;width:1px;height:113px}
.service-figure--design i{top:75px;left:18%;width:67%;height:1px;border:0;background:rgba(64,54,48,.18)}
.service-item:hover .service-figure--design span:first-child{transform:rotate(9deg) scale(1.04)}
.service-figure--content span,.service-figure--content i{left:8%;height:1px;border:0;background:rgba(64,54,48,.18)}
.service-figure--content span:first-child{top:52px;width:53%}
.service-figure--content span:nth-child(2){top:104px;width:78%}
.service-figure--content i{top:78px;width:65%}
.service-item:hover .service-figure--content i{transform:translateX(10px)}
.service-figure--setup span{border-radius:50%}
.service-figure--setup span:first-child{top:21px;left:35%;width:103px;height:103px}
.service-figure--setup span:nth-child(2){top:48px;left:calc(35% + 27px);width:49px;height:49px}
.service-figure--setup i{top:65px;left:calc(35% + 44px);width:15px;height:15px;border-radius:50%;background:rgba(64,54,48,.05)}
.service-item:hover .service-figure--setup span:first-child{transform:scale(1.07)}
.service-item__number{display:block;margin-top:13px;color:rgba(64,54,48,.72);font-family:var(--serif);font-size:2.55rem;line-height:1}
.service-item>small{display:block;margin-top:16px;color:var(--ink-faint);font-family:var(--sans);font-size:.68rem;letter-spacing:.17em}
.service-item h3{margin:9px 0 0;font-size:clamp(1.5rem,1.7vw,1.85rem);font-weight:300;line-height:1.28;letter-spacing:-.04em}
.service-item h3::after{display:block;width:34px;height:1px;margin-top:18px;content:"";background:rgba(64,54,48,.28);transition:width .65s var(--ease)}
.service-item:hover h3::after{width:68px}
.service-item p{margin:18px 0 0;color:var(--ink-soft);font-size:.96rem;line-height:1.95}
.process-track{position:relative;z-index:3;padding-top:78px}
.process-track::before,.process-track::after{position:absolute;z-index:0;content:"";pointer-events:none;border:1px solid rgba(64,54,48,.07);border-radius:50%}
.process-track::before{top:-110px;left:20%;width:52%;height:230px;border-bottom-color:transparent;border-left-color:transparent;transform:rotate(4deg)}
.process-track::after{top:-82px;right:-6%;width:38%;height:210px;border-bottom-color:transparent;transform:rotate(-6deg)}
.process-route{position:absolute;z-index:5;top:20px;right:0;left:0;height:1px;background:rgba(64,54,48,.18)}
.process-route span{position:absolute;top:0;left:0;width:0;height:1px;background:rgba(64,54,48,.58)}
.process-route i{position:absolute;top:-4px;left:0;width:9px;aspect-ratio:1;border-radius:50%;background:var(--stone);transform:translateX(-50%)}
.process-geometry{position:absolute;z-index:0;top:-55px;right:0;left:0;height:220px;overflow:hidden;pointer-events:none;opacity:.5}
.process-geometry__arch{position:absolute;border:1px solid rgba(64,54,48,.07);border-radius:50% 50% 0 0}
.process-geometry__arch--1{top:12px;left:28%;width:34%;height:185px}
.process-geometry__arch--2{top:42px;right:4%;width:26%;height:155px}
.process-geometry__line{position:absolute;top:0;width:1px;height:160px;background:rgba(64,54,48,.05)}
.process-geometry__line--1{left:40%}
.process-geometry__line--2{left:73%}
.process-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(64,54,48,.13);background:rgba(255,255,255,.16);box-shadow:0 24px 70px rgba(64,54,48,.035)}
.process-step{position:relative;min-height:470px;overflow:hidden;padding:28px 28px 34px;border-right:1px solid rgba(64,54,48,.11);transition:background .65s var(--ease)}
.process-step:last-child{border-right:0}
.process-step:hover{background:rgba(255,255,255,.20)}
.process-step:not(:last-child)::after{position:absolute;z-index:4;top:50%;right:-10px;display:grid;width:20px;height:20px;place-items:center;content:"›";color:rgba(64,54,48,.50);background:#d9cbb9;font-family:var(--serif);font-size:1.45rem;line-height:1;transform:translateY(-50%)}
.process-step__figure{position:relative;height:150px;margin-bottom:15px;opacity:.70;transition:transform .8s var(--ease),opacity .7s var(--ease)}
.process-step:hover .process-step__figure{transform:translateY(-4px);opacity:.95}
.process-step__figure span{position:absolute;border:1px solid rgba(64,54,48,.22);transition:transform .8s var(--ease)}
.process-step__figure--hearing span{width:10px;height:10px;border-radius:50%;background:rgba(64,54,48,.10)}
.process-step__figure--hearing span:first-child{top:46px;left:18%}
.process-step__figure--hearing span:nth-child(2){top:88px;left:51%}
.process-step__figure--hearing span:nth-child(3){top:31px;left:78%}
.process-step:hover .process-step__figure--hearing span:nth-child(2){transform:translateY(-8px)}
.process-step__figure--scope span{left:16%;height:1px;border:0;background:rgba(64,54,48,.24)}
.process-step__figure--scope span:first-child{top:49px;width:45%}
.process-step__figure--scope span:nth-child(2){top:79px;width:31%}
.process-step__figure--scope span:nth-child(3){top:110px;width:62%}
.process-step:hover .process-step__figure--scope span:nth-child(3){transform:translateX(12px)}
.process-step__figure--build span{width:47%;height:64px}
.process-step__figure--build span:first-child{top:62px;left:9%}
.process-step__figure--build span:nth-child(2){top:32px;left:31%}
.process-step__figure--build span:nth-child(3){top:50px;left:52%}
.process-step:hover .process-step__figure--build span:nth-child(2){transform:translateY(-6px)}
.process-step__figure--launch span{border-radius:50%}
.process-step__figure--launch span:first-child{top:20px;left:34%;width:110px;height:110px}
.process-step__figure--launch span:nth-child(2){top:46px;left:calc(34% + 26px);width:58px;height:58px}
.process-step__figure--launch span:nth-child(3){top:65px;left:calc(34% + 45px);width:20px;height:20px;background:rgba(64,54,48,.05)}
.process-step:hover .process-step__figure--launch span:first-child{transform:scale(1.07)}
.process-step__number{display:block;margin-bottom:12px;color:rgba(64,54,48,.82);font-family:var(--serif);font-size:3rem;line-height:1}
.process-step small{display:block;margin-bottom:10px;color:rgba(64,54,48,.60);font-family:var(--sans);font-size:.68rem;letter-spacing:.13em}
.process-step small::after{display:block;width:34px;height:1px;margin-top:15px;content:"";background:rgba(64,54,48,.28)}
.process-step h3{margin:14px 0 12px;color:var(--ink);font-size:clamp(1.25rem,1.45vw,1.55rem);font-weight:300;line-height:1.35;letter-spacing:-.035em;white-space:nowrap}
.process-step p{margin:0;color:rgba(64,54,48,.80);font-size:.95rem;line-height:1.95}
.faq-list{position:relative;z-index:3;width:min(1060px,100%);margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{display:grid;width:100%;min-height:92px;grid-template-columns:1fr 32px;align-items:center;gap:18px;text-align:center}
.faq-question>span{display:none}
.faq-question strong{padding-left:32px;font-size:1.08rem;font-weight:400;text-align:center;letter-spacing:.01em}
.faq-question i{position:relative;width:18px;height:18px}
.faq-question i::before,.faq-question i::after{position:absolute;top:50%;left:0;width:18px;height:1px;content:"";background:var(--ink-soft);transition:transform .55s var(--ease)}
.faq-question i::after{transform:rotate(90deg)}
.faq-item.is-open .faq-question i::after{transform:rotate(0)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.faq-answer>div{overflow:hidden}
.faq-answer p{max-width:720px;margin:0 auto;padding:0 0 28px;color:var(--ink-soft);font-size:.98rem;text-align:center;opacity:0;transition:opacity .55s var(--ease)}
.faq-item.is-open .faq-answer{grid-template-rows:1fr}
.faq-item.is-open .faq-answer p{opacity:1}
.contact{padding:48px 0 0;background:radial-gradient(circle at 81% 40%,rgba(255,255,255,.18),transparent 37%),var(--sand-deep)}
.contact::before,.contact::after{position:absolute;z-index:1;content:"";pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease),transform 1.7s var(--ease)}
.contact::before{top:215px;right:-110px;width:430px;height:430px;border:1px solid rgba(64,54,48,.08);border-radius:50%;transform:scale(.82) translateX(38px)}
.contact::after{top:345px;right:105px;width:220px;height:220px;border:1px solid rgba(64,54,48,.065);border-radius:50%;transform:scale(.74) translateY(28px)}
.contact.is-contact-active::before,.contact.is-contact-active::after{opacity:1;transform:scale(1) translate(0)}
.contact__gate{position:absolute;z-index:1;right:-165px;bottom:62px;width:min(510px,35vw);opacity:.023;pointer-events:none;transform:translateX(55px);transition:transform 1.8s var(--ease),opacity 1.6s var(--ease);-webkit-mask-image:linear-gradient(to left,#000 30%,rgba(0,0,0,.72) 62%,transparent 100%);mask-image:linear-gradient(to left,#000 30%,rgba(0,0,0,.72) 62%,transparent 100%)}
.contact.is-contact-active .contact__gate{transform:translateX(0);opacity:.035}
.contact__gate img{width:100%;filter:grayscale(1) brightness(.25) contrast(.95)}
.section-heading--contact{position:relative;z-index:4}
.contact-main{position:relative;z-index:4;width:min(1100px,100%);margin-inline:auto;padding:30px 0 88px}
.contact-inquiry{position:relative;max-width:790px;margin-inline:auto;text-align:center}
.contact-inquiry::before,.contact-inquiry::after{position:absolute;top:48%;width:110px;height:1px;content:"";background:rgba(64,54,48,.14);transform:scaleX(0);transition:transform 1.2s .35s var(--ease)}
.contact-inquiry::before{right:calc(100% + 35px);transform-origin:right}
.contact-inquiry::after{left:calc(100% + 35px);transform-origin:left}
.contact.is-contact-active .contact-inquiry::before,.contact.is-contact-active .contact-inquiry::after{transform:scaleX(1)}
.contact-inquiry__eyebrow{display:block;color:var(--ink-faint);font-family:var(--sans);font-size:.7rem;letter-spacing:.17em}
.contact-inquiry h3{margin:18px 0 0;font-size:clamp(2.5rem,3.55vw,3.8rem);font-weight:300;line-height:1.25;letter-spacing:-.055em}
.contact-inquiry__lead{max-width:650px;margin:20px auto 0;color:var(--ink-soft);font-size:.98rem;line-height:1.95}
.contact-inquiry__meta{max-width:690px;margin:29px auto 0;padding-top:18px;border-top:1px solid rgba(64,54,48,.18)}
.contact-inquiry__meta span{color:var(--ink-faint);font-family:var(--sans);font-size:.67rem;letter-spacing:.16em}
.contact-inquiry__meta p{margin:8px 0 0;color:var(--ink-soft);font-size:.91rem;line-height:1.85}
.contact-form-shell{position:relative;width:min(1000px,100%);margin:52px auto 0;padding:38px 42px 36px;border:1px solid rgba(64,54,48,.11);border-radius:14px;background:rgba(250,247,242,.95);box-shadow:0 28px 75px rgba(64,54,48,.065)}
.contact-form-shell::before{position:absolute;top:0;right:42px;left:42px;height:1px;content:"";background:rgba(64,54,48,.13)}
.contact-form-shell__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:27px}
.contact-form-shell__head>div{display:grid;gap:4px}
.contact-form-shell__head span{color:var(--ink-faint);font-family:var(--sans);font-size:.66rem;letter-spacing:.17em}
.contact-form-shell__head strong{font-size:1.1rem;font-weight:400}
.contact-form-shell__head>small{color:var(--ink-faint);font-size:.78rem}
.contact-form{position:relative}
.contact-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.contact-field{display:grid;gap:8px}
.contact-field__label{display:flex;min-height:24px;align-items:center;gap:8px;color:var(--ink);font-size:.9rem;font-weight:500}
.contact-field__label small{display:inline-flex;min-width:32px;height:18px;align-items:center;justify-content:center;padding:0 6px;border-radius:20px;color:#fffaf4;background:#9b8066;font-family:var(--sans);font-size:.55rem;font-weight:500;letter-spacing:.08em}
.contact-field__label em{color:var(--ink-faint);font-size:.7rem;font-style:normal;font-weight:300}
.contact-field input,.contact-field select,.contact-field textarea{width:100%;outline:none;border:1px solid rgba(64,54,48,.17);border-radius:6px;background:rgba(255,255,255,.84);transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
.contact-field input,.contact-field select{height:56px;padding:0 16px}
.contact-field textarea{min-height:176px;padding:16px;resize:vertical;line-height:1.8}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(64,54,48,.30)}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{border-color:rgba(64,54,48,.42);background:#fffdf9;box-shadow:0 0 0 3px rgba(120,106,93,.05)}
.contact-field--message{grid-column:1/-1}
.contact-field__count{margin-left:auto;color:var(--ink-faint);font-family:var(--sans);font-size:.68rem;font-weight:300}
.contact-field__count b{font-weight:400}
.contact-select{position:relative;display:block}
.contact-select::after{position:absolute;top:50%;right:18px;width:7px;height:7px;content:"";pointer-events:none;border-right:1px solid rgba(64,54,48,.55);border-bottom:1px solid rgba(64,54,48,.55);transform:translateY(-70%) rotate(45deg)}
.contact-select select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.contact-form__agreement{display:flex;justify-content:center;margin-top:28px}
.agreement-check{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.agreement-check input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.agreement-check__box{position:relative;display:block;width:22px;height:22px;flex:none;border:1px solid rgba(64,54,48,.35);border-radius:4px;background:#fffdf9;transition:background .3s ease,border-color .3s ease}
.agreement-check__box::after{position:absolute;top:4px;left:7px;width:5px;height:9px;content:"";opacity:0;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);transition:opacity .3s ease}
.agreement-check input:checked+.agreement-check__box{border-color:var(--stone-dark);background:var(--stone-dark)}
.agreement-check input:checked+.agreement-check__box::after{opacity:1}
.agreement-check__text{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:.87rem}
.agreement-check__text small{color:#8c6e56;font-size:.67rem}
.contact-form__send{display:flex;justify-content:center;margin-top:23px}
.contact-form__submit{display:flex;width:min(360px,100%);height:64px;align-items:center;justify-content:space-between;padding:0 22px 0 26px;border-radius:5px;color:#fffaf3;background:var(--stone-dark);transition:background .45s var(--ease),transform .45s var(--ease),opacity .45s var(--ease)}
.contact-form__submit:hover{background:#3f3731;transform:translateY(-2px)}
.contact-form__submit:disabled{opacity:.5;transform:none;cursor:wait}
.contact-form__submit span{font-size:.95rem;font-weight:500}
.contact-form__submit i{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;font-size:.9rem;font-style:normal}
.contact-form__status{min-height:24px;margin:15px 0 0;font-size:.84rem;text-align:center}
.contact-form__status.is-success{color:rgba(52,93,64,.95)}
.contact-form__status.is-error{color:rgba(125,59,51,.95)}
.form-honeypot{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}
.footer{position:relative;z-index:4;border-top:1px solid rgba(64,54,48,.16)}
.footer__inner{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:30px;padding:29px 0 31px}
.footer__copy{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:15px 31px;color:rgba(64,54,48,.67);font-size:.88rem}

@media (max-width:1200px){
.hero__layout{grid-template-columns:minmax(0,1fr) minmax(430px,.95fr)}
.sample-project-bar{grid-template-columns:minmax(280px,1fr) auto;gap:28px}
.sample-project-meta{grid-template-columns:110px 135px auto;gap:22px}
.plans-layout{grid-template-columns:340px minmax(0,1fr)}
.process-step{padding-inline:21px}
.process-step h3{font-size:1.25rem}
.contact-inquiry::before,.contact-inquiry::after{width:60px}
}

@media (max-width:980px){
:root{--header-h:80px}
.container{width:calc(100% - 32px)}
.header__inner{width:calc(100% - 26px);grid-template-columns:1fr auto}
.global-nav,.header-contact{display:none}
.menu-button{display:block}
.mobile-menu{display:flex}
.hero,.hero__inner{min-height:auto}
.hero__layout{min-height:auto;grid-template-columns:1fr}
.hero__copy{padding:72px 0 20px}
.hero-visual{min-height:470px}
.hero-scroll{display:none}
.section{padding:42px 0 92px}
.samples-grid,.plans-layout{grid-template-columns:1fr}
.sample-aside{position:static}
.sample-aside__note{display:none}
.sample-project-bar{grid-template-columns:1fr;gap:54px}
.sample-project-meta{grid-template-columns:1fr 1fr auto;gap:28px;padding-bottom:4px}
.service-grid{grid-template-columns:1fr 1fr}
.service-item:nth-child(2){border-right:0}
.service-item:nth-child(-n+2){border-bottom:1px solid rgba(64,54,48,.12)}
.process-grid{grid-template-columns:1fr 1fr}
.process-step{min-height:430px}
.process-step:nth-child(2){border-right:0}
.process-step:nth-child(-n+2){border-bottom:1px solid rgba(64,54,48,.11)}
.process-step:nth-child(2)::after{display:none}
.process-step h3{font-size:1.5rem}
.contact-main{width:100%;padding-top:24px}
.contact-inquiry::before,.contact-inquiry::after{display:none}
.contact-form-shell{padding:36px 30px 34px}
.contact-form-shell::before{right:30px;left:30px}
.contact__gate{right:-185px;width:430px}
}

@media (max-width:640px){
.opening__inner{transform:translateY(23px)}
.wordmark--opening{gap:7px;font-size:4.5rem}
.wordmark--opening .wordmark__t{transform:translateX(-2px)}
.opening__copy>span{font-size:1.4rem}
.opening__copy small{font-size:.82rem}
.wordmark--header{gap:4px;font-size:1.85rem}
.wordmark--footer{gap:4px}
.brand__studio{font-size:.68rem}
.hero__copy{padding-top:56px}
.hero__brand-copy{margin-bottom:22px}
.hero__brand-copy em{font-size:1.55rem}
.hero__brand-copy strong{width:100%;font-size:1rem}
.hero-title{font-size:clamp(2.55rem,11vw,3.7rem)}
.hero__description{font-size:.99rem}
.hero__description br{display:none}
.hero-actions{flex-direction:column}
.cta{width:100%}
.hero-visual{min-height:370px}
.section{padding-top:34px}
.section-heading{margin-bottom:29px}
.section-heading__row{align-items:flex-start;gap:14px}
.section-heading__index{font-size:1.25rem;letter-spacing:.06em}
.section-heading__row h2{margin-top:1px;font-size:.95rem;text-align:right}
.section-heading__line{margin-top:12px}
.section-heading__note{margin-top:9px;font-size:.84rem}
.sample-filter-button{grid-template-columns:32px minmax(0,1fr) 58px 15px;min-height:64px;padding-inline:7px}
.sample-project-bar h3{font-size:2rem}
.sample-project-meta{grid-template-columns:1fr 1fr auto;gap:18px}
.sample-project-meta__item{min-width:0}
.sample-project-meta__item strong,.sample-project-meta__view{font-size:.82rem}

.sample-project-meta__view{
  min-width:96px;
  height:38px;
  padding:0 14px;
  font-size:.7rem;
  transform:translateY(6px);
}

.sample-project-meta__view:hover{
  transform:translateY(4px);
}

.sample-page-nav{grid-template-columns:1fr 1fr}
.sample-page-button{min-height:68px}
.sample-browser__top a{display:none}
.sample-browser__viewport{min-height:240px}
.sample-coming{min-height:320px}
.plan-view{min-height:0;padding:27px 20px}
.plan-view__headline{align-items:flex-start;flex-direction:column}
.plan-view__headline h3,.plan-view__headline strong{font-size:2.8rem}
.plan-view__bottom{align-items:flex-start;flex-direction:column}
.service-grid{grid-template-columns:1fr}
.service-item{min-height:430px;border-right:0;border-bottom:1px solid rgba(64,54,48,.12)}
.service-item:last-child{border-bottom:0}
.process-track{padding-top:32px}
.process-route{display:none}
.process-geometry{top:-25px;height:140px}
.process-grid{grid-template-columns:1fr}
.process-step{min-height:0;padding:28px 22px 34px;border-right:0;border-bottom:1px solid rgba(64,54,48,.11)}
.process-step:last-child{border-bottom:0}
.process-step::after{display:none!important}
.process-step__figure{height:125px}
.process-step h3{font-size:1.45rem;white-space:normal}
.faq-list{width:100%}
.faq-question{min-height:84px;grid-template-columns:1fr 24px;gap:8px}
.faq-question strong{padding-left:24px;font-size:.98rem}
.faq-answer p{padding:0 18px 24px;font-size:.92rem}
.contact{padding-top:34px}
.contact-main{padding:22px 0 66px}
.contact-inquiry h3{font-size:clamp(2rem,9vw,2.7rem)}
.contact-inquiry__lead{font-size:.93rem}
.contact-inquiry__meta{margin-top:25px}
.contact-form-shell{margin-top:40px;padding:30px 18px;border-radius:11px}
.contact-form-shell::before{right:18px;left:18px}
.contact-form-shell__head{align-items:flex-start;flex-direction:column;gap:5px;margin-bottom:24px}
.contact-form__grid{grid-template-columns:1fr;gap:18px}
.contact-field--message{grid-column:auto}
.contact-field input,.contact-field select{height:54px}
.contact-field textarea{min-height:160px}
.contact-form__agreement{justify-content:flex-start;margin-top:25px}
.agreement-check{align-items:flex-start}
.agreement-check__text{align-items:flex-start;flex-wrap:wrap}
.contact-form__send{margin-top:22px}
.contact-form__submit{width:100%}
.contact__gate{right:-210px;bottom:80px;width:365px}
.footer__inner{align-items:flex-start;flex-direction:column}
.footer__copy{align-items:flex-start;flex-direction:column;gap:7px}
}

.section-heading{margin-bottom:38px}
.section-heading__row{display:flex;align-items:baseline;justify-content:flex-start;gap:clamp(14px,1.35vw,24px);width:100%}
.section-heading__index{flex:none;color:var(--ink);font-family:var(--sans);font-size:clamp(1.95rem,2.45vw,2.65rem);font-weight:400;line-height:1;letter-spacing:.055em;white-space:nowrap}
.section-heading__row h2{flex:none;margin:0;color:var(--ink-soft);font-size:clamp(1.05rem,1.18vw,1.28rem);font-weight:400;line-height:1.2;letter-spacing:.005em;text-align:left;white-space:nowrap}
.section-heading__line{margin-top:18px;background:rgba(64,54,48,.22)}
.section-heading__note{max-width:760px;margin-top:13px;font-size:.94rem}
.section-heading__index,.section-heading__row h2,.section-heading__line{will-change:transform,opacity}
.sample-filter-head{justify-content:flex-start;gap:18px}
.sample-filter-head span:last-child{margin-left:0;text-align:left}

/* Brandまで4プランを表示 */
.sample-filter-group--plan.is-unlocked{max-height:380px}

.sample-project-bar{align-items:end}
.sample-project-bar__identity{padding-bottom:1px}
.sample-project-meta{align-items:end;padding-bottom:1px}
.sample-project-meta__item{border:0!important}
.sample-project-meta__item strong,.sample-project-meta__view{line-height:1}
.plan-view__top,.plan-view__headline{position:relative}
.plan-view[data-tier="template"]{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07));border-color:rgba(64,54,48,.11);box-shadow:none}
.plan-view[data-tier="template"]::before{opacity:0}
.plan-view[data-tier="template"]::after{width:275px;opacity:.24}
.plan-view[data-tier="standard"]{background:linear-gradient(90deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.15) 54%,rgba(246,239,230,.24) 100%);border-color:rgba(86,70,58,.17);box-shadow:0 22px 56px rgba(63,49,40,.055)}
.plan-view[data-tier="standard"]::before{opacity:1;inset:12px;border-color:rgba(86,70,58,.055)}
.plan-view[data-tier="standard"]::after{width:320px;opacity:.65}
.plan-view[data-tier="standard"] .plan-view__headline::before{position:absolute;left:0;bottom:-1px;width:86px;height:1px;content:"";background:rgba(64,54,48,.48)}
.plan-view[data-tier="premium"]{background:radial-gradient(circle at 84% 8%,rgba(255,255,255,.82),transparent 31%),linear-gradient(145deg,rgba(251,247,241,.94),rgba(222,205,185,.52));border-color:rgba(99,76,57,.24);box-shadow:0 32px 80px rgba(61,46,35,.10),inset 0 0 0 1px rgba(255,255,255,.28)}
.plan-view[data-tier="premium"]::before{inset:10px;opacity:1;border-color:rgba(104,78,57,.13)}
.plan-view[data-tier="premium"]::after{width:390px;opacity:1;border-color:rgba(120,91,67,.19)}
.plan-view[data-tier="premium"] .plan-view__headline h3{font-family:var(--serif);letter-spacing:-.025em}
.plan-view[data-tier="premium"] .plan-view__top::after{content:none}
.plan-view[data-tier="premium"] .plan-view__top::before{content:"03 / SIGNATURE";position:absolute;top:2px;right:0;color:rgba(64,54,48,.28);font-family:var(--sans);font-size:.61rem;letter-spacing:.18em}
.plan-view[data-tier="premium"] .plan-features span{border-color:rgba(100,80,63,.17);background:rgba(255,255,255,.40)}
.plan-view[data-tier="brand"]{--line:rgba(245,238,230,.13);--ink-soft:rgba(245,238,230,.72);--ink-faint:rgba(245,238,230,.52);--plan-accent:rgba(231,210,184,.13);color:#f5eee6;border-color:rgba(245,238,230,.13);background:radial-gradient(circle at 83% 7%,rgba(218,194,168,.13),transparent 34%),linear-gradient(145deg,#5b4d43 0%,#493d35 55%,#3c322c 100%);box-shadow:0 36px 92px rgba(49,39,33,.20)}
.plan-view[data-tier="brand"]::before{opacity:1;border-color:rgba(245,238,230,.14)}
.plan-view[data-tier="brand"]::after{width:380px;top:-150px;right:-48px;opacity:1}
.plan-view[data-tier="brand"] .plan-view__headline h3{font-family:var(--serif);letter-spacing:-.025em}
.plan-view[data-tier="brand"] .plan-view__headline strong{font-size:clamp(3.15rem,3.85vw,4.3rem);color:#f5eee6}
.plan-view[data-tier="brand"] .plan-features span{color:rgba(245,238,230,.82);border-color:rgba(245,238,230,.16);background:rgba(255,255,255,.035)}
.plan-view[data-tier="brand"] .plan-view__bottom a{color:#f5eee6}
.price-note{display:grid;gap:6px;margin-top:18px;color:var(--ink-faint)}
.price-note span{font-family:var(--sans);font-size:.7rem}
.price-note p{margin:0;font-size:.95rem}
.service-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid rgba(64,54,48,.15);background:rgba(255,255,255,.15);box-shadow:0 24px 70px rgba(64,54,48,.035)}
.service-item{position:relative;min-height:500px;overflow:hidden;padding:30px 28px 34px;border-right:1px solid rgba(64,54,48,.12);transition:background .7s var(--ease),transform .7s var(--ease)}
.service-item:last-child{border-right:0}
.service-item::before{position:absolute;top:0;left:28px;width:1px;height:0;content:"";background:rgba(64,54,48,.38);transition:height .8s var(--ease)}
.service-item::after{position:absolute;right:-42%;bottom:-36%;width:240px;aspect-ratio:1;content:"";border:1px solid rgba(64,54,48,.055);border-radius:50%;transform:scale(.8);opacity:0;transition:transform .85s var(--ease),opacity .65s var(--ease)}
.service-item:hover{background:rgba(255,255,255,.30)}
.service-item:hover::before{height:88px}
.service-item:hover::after{transform:scale(1);opacity:1}
.service-figure{position:relative;width:100%;height:154px;margin-bottom:18px;opacity:.62;transition:opacity .65s var(--ease),transform .75s var(--ease)}
.service-item:hover .service-figure{opacity:.90;transform:translateY(-4px)}
.service-figure::before{position:absolute;top:13px;right:0;color:rgba(64,54,48,.23);font-family:var(--sans);font-size:.62rem;letter-spacing:.16em}
.service-item:nth-child(1) .service-figure::before{content:"01 / FRAME"}
.service-item:nth-child(2) .service-figure::before{content:"02 / SYSTEM"}
.service-item:nth-child(3) .service-figure::before{content:"03 / VOICE"}
.service-item:nth-child(4) .service-figure::before{content:"04 / RELEASE"}
.service-figure span,.service-figure i{position:absolute;border:1px solid rgba(64,54,48,.18);transition:transform .75s var(--ease)}
.service-figure--web span:first-child{top:44px;right:11%;bottom:15px;left:3%}
.service-figure--web span:nth-child(2){top:25px;right:0;bottom:36px;left:19%}
.service-figure--web i{top:78px;left:49%;width:12px;height:12px;border-radius:50%;background:rgba(64,54,48,.06)}
.service-item:hover .service-figure--web span:nth-child(2){transform:translate(6px,-5px)}
.service-figure--design span:first-child{top:29px;left:38%;width:88px;height:88px;border-radius:50%}
.service-figure--design span:nth-child(2){top:18px;left:55%;width:1px;height:113px}
.contact-inquiry{max-width:760px}
.contact-inquiry::before,.contact-inquiry::after{width:92px;background:rgba(64,54,48,.17)}
.contact-inquiry h3{font-size:clamp(2.45rem,3.35vw,3.65rem)}
.contact-form-shell{width:min(920px,100%);margin-top:44px;padding:34px 38px 32px;border-radius:12px;box-shadow:0 30px 76px rgba(64,54,48,.075),0 0 0 1px rgba(255,255,255,.26) inset}
.contact-form-shell::before{right:38px;left:38px}
.contact-form-shell__head{margin-bottom:24px}
.contact-form__grid{gap:19px 17px}
.contact-field input,.contact-field select{height:52px}
.contact-field textarea{min-height:150px}
.contact-form__agreement{margin-top:24px}
.contact-form__send{margin-top:20px}
.contact-form__submit{width:min(340px,100%);height:60px}
.contact-operation{display:grid;width:min(920px,100%);grid-template-columns:1fr 1.45fr 1.45fr;gap:0;margin:22px auto 0;border-top:1px solid rgba(64,54,48,.16);border-bottom:1px solid rgba(64,54,48,.16)}
.contact-operation__label,.contact-operation__item{min-height:78px;padding:16px 18px}
.contact-operation__label{display:flex;align-items:center;color:var(--ink-faint);font-family:var(--sans);font-size:.63rem;letter-spacing:.17em}
.contact-operation__item{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:10px;border-left:1px solid rgba(64,54,48,.12)}
.contact-operation__item span{color:rgba(64,54,48,.48);font-family:var(--serif);font-size:1.2rem}
.contact-operation__item p{margin:0;color:var(--ink-soft);font-size:.78rem;line-height:1.65}
.footer{background:rgba(245,241,234,.36)}
.footer__inner{display:grid;grid-template-columns:1.2fr 1.7fr .85fr;align-items:start;gap:56px;padding:42px 0 36px}
.footer__brand-column{display:grid;justify-items:start;gap:15px}
.footer__tagline{margin:0;color:var(--ink-faint);font-family:var(--serif);font-size:1rem;font-style:italic}
.footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(64,54,48,.13)}
.footer__nav a{display:flex;min-height:48px;align-items:center;gap:10px;border-bottom:1px solid rgba(64,54,48,.10);color:var(--ink-soft);font-family:var(--sans);font-size:.73rem;letter-spacing:.08em;transition:padding-left .45s var(--ease),color .45s var(--ease)}
.footer__nav a:nth-child(odd){padding-right:16px}
.footer__nav a:nth-child(even){padding-left:16px;border-left:1px solid rgba(64,54,48,.10)}
.footer__nav a:hover{padding-left:7px;color:var(--ink)}
.footer__nav a:nth-child(even):hover{padding-left:23px}
.footer__nav span{color:var(--ink-faint);font-family:var(--serif);font-size:.95rem}
.footer__company{display:grid;gap:5px;padding-top:2px}
.footer__company-label{color:var(--ink-faint);font-family:var(--sans);font-size:.61rem;letter-spacing:.18em}
.footer__company strong{font-family:var(--sans);font-size:.92rem;font-weight:500}
.footer__company p{margin:0;color:var(--ink-faint);font-size:.76rem}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0 22px;border-top:1px solid rgba(64,54,48,.12);color:var(--ink-faint);font-family:var(--sans);font-size:.62rem;letter-spacing:.11em}

@media (max-width:980px){
.section-heading__index{font-size:clamp(1.7rem,3.3vw,2.15rem)}
.section-heading__row h2{font-size:1.05rem}
.service-item{min-height:500px}
.process-step{min-height:485px}
.contact-blueprint{right:-120px;width:650px;opacity:.55}
.contact-operation{grid-template-columns:1fr 1fr}
.contact-operation__label{grid-column:1/-1;min-height:50px;border-bottom:1px solid rgba(64,54,48,.12)}
.contact-operation__item:first-of-type{border-left:0}
.footer__inner{grid-template-columns:1fr 1.6fr}
.footer__company{grid-column:1/-1;padding-top:6px;border-top:1px solid rgba(64,54,48,.10)}
}

@media (max-width:640px){
.section-heading__row{align-items:baseline;flex-direction:row;justify-content:flex-start;gap:11px}
.section-heading__index{font-size:1.38rem;letter-spacing:.04em}
.section-heading__row h2{margin:0;font-size:.9rem;text-align:left}
.sample-filter-head{gap:12px}
.sample-project-meta{align-items:end}
.service-item{min-height:455px}
.process-step{min-height:430px}
.faq-question strong{padding-left:0;text-align:left}
.faq-answer p{padding:0 28px 24px 0}
.contact-blueprint{top:150px;right:-250px;width:560px;height:520px}
.contact-main{padding-bottom:60px}
.contact-form-shell{width:100%;margin-top:36px;padding:28px 17px}
.contact-operation{grid-template-columns:1fr}
.contact-operation__label,.contact-operation__item{min-height:auto;padding:14px 0}
.contact-operation__label{grid-column:auto}
.contact-operation__item{border-top:1px solid rgba(64,54,48,.10);border-left:0}
.footer__inner{display:grid;grid-template-columns:1fr;gap:30px;padding-top:34px}
.footer__nav{grid-template-columns:1fr;width:100%}
.footer__nav a,.footer__nav a:nth-child(even),.footer__nav a:nth-child(odd){padding:0;border-left:0}
.footer__nav a:hover,.footer__nav a:nth-child(even):hover{padding-left:6px}
.footer__company{grid-column:auto}
.footer__bottom{align-items:flex-start;flex-direction:column;gap:7px}
}

@media (max-width:980px){
.hero-visual__gate img{top:-18%;right:auto;left:16%;width:auto;height:142%;clip-path:none;transform:translateX(-20%);transform-origin:20% 50%}
}

@media (max-width:640px){
.hero-visual__gate img{top:-15%;right:auto;left:10%;width:auto;height:145%;clip-path:none;transform:translateX(-20%);transform-origin:20% 50%}
}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.opening{display:none}
}

.section-heading__row{justify-content:flex-start!important;align-items:baseline!important;gap:clamp(15px,1.15vw,21px)!important}
.section-heading__index{font-size:clamp(2.15rem,2.7vw,3.05rem);line-height:1}
.section-heading__row h2{margin:0!important;margin-left:0!important;font-size:clamp(1.08rem,1.18vw,1.28rem);line-height:1.15;text-align:left!important}
.plan-view__headline strong{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:.12em}
.plan-price__currency{display:inline-block;flex:none;font-size:.68em;line-height:1;letter-spacing:0;transform:translateY(-.025em)}
.plan-price__amount{display:inline-block;line-height:1;letter-spacing:-.05em}
.contact-operation{display:block;width:min(920px,100%);margin:24px auto 0;padding:6px 0 0;border:0}
.contact-operation__label,.contact-operation__item{min-height:0;padding:0;border:0}
.contact-operation__label{display:block;margin-bottom:10px;color:var(--ink-faint);font-family:var(--sans);font-size:.65rem;letter-spacing:.17em}
.contact-operation__item{display:block}
.contact-operation__item+.contact-operation__item{margin-top:7px}
.contact-operation__item span{display:none}
.contact-operation__item p{max-width:650px;margin:0;color:var(--ink-soft);font-size:.84rem;line-height:1.8}
.footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;border:0}
.footer__nav a,.footer__nav a:nth-child(odd),.footer__nav a:nth-child(even){position:relative;width:max-content;min-height:0;padding:0!important;border:0!important;transition:color .45s var(--ease)}
.footer__nav a::after{position:absolute;right:0;bottom:-5px;left:0;height:1px;content:"";background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--ease)}
.footer__nav a:hover,.footer__nav a:nth-child(even):hover{padding-left:0!important;color:var(--ink)}
.footer__nav a:hover::after{transform:scaleX(1);transform-origin:left center}
.faq-question,.faq-question strong,.faq-answer p{text-align:left!important}
.faq-question strong{padding-left:0!important}

@media (max-width:980px){
.section-heading__index{font-size:clamp(1.85rem,3.8vw,2.35rem)}
.contact-operation{display:block;width:min(920px,100%);border:0}
.contact-operation__label{display:block;min-height:0;margin-bottom:10px;padding:0;border:0}
.contact-operation__item,.contact-operation__item:first-of-type{display:block;min-height:0;padding:0;border:0}
}

@media (max-width:640px){
.section-heading__row{gap:10px!important}
.section-heading__index{font-size:1.48rem}
.section-heading__row h2{font-size:.92rem}
.plan-view__headline strong{gap:.11em}
.contact-operation{margin-top:20px;padding-top:2px}
.contact-operation__item+.contact-operation__item{margin-top:8px}
.footer__nav{grid-template-columns:1fr;gap:13px}
}

.sample-filter-group--project[hidden]{display:none!important}
.sample-filter-group--project .sample-filter-button__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:980px){
.sample-filter-group--project{margin-top:28px}
}

@media (max-width:640px){
.sample-filter-group--project{margin-top:24px}
}

/* =========================================================
   2026.08 / ART DIRECTION UPGRADE
   QUIET ARCHITECTURE / EDITORIAL BLUEPRINT
========================================================= */

/* ---------------------------------------------------------
   HERO / ARCHITECTURAL NOTATION
--------------------------------------------------------- */

.hero-blueprint{
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
  color:rgba(64,54,48,.42);
  font-family:var(--sans);
  font-size:.59rem;
  line-height:1;
  letter-spacing:.18em;
}

.hero-blueprint>span{
  position:absolute;
  white-space:nowrap;
}

.hero-blueprint__axis{top:12.5%;left:18%;}
.hero-blueprint__studio{top:12.5%;right:6%;}
.hero-blueprint__location{right:6%;bottom:9.5%;}
.hero-blueprint__scope{left:18%;bottom:9.5%;}

.hero-blueprint__measure{
  position:absolute;
  top:21%;
  right:6.5%;
  bottom:19%;
  width:1px;
  background:rgba(64,54,48,.08);
}

.hero-blueprint__measure::before,
.hero-blueprint__measure::after{
  position:absolute;
  left:-5px;
  width:11px;
  height:1px;
  content:"";
  background:rgba(64,54,48,.14);
}

.hero-blueprint__measure::before{top:0;}
.hero-blueprint__measure::after{bottom:0;}

.hero-blueprint__cross{
  position:absolute;
  width:13px;
  height:13px;
}

.hero-blueprint__cross::before,
.hero-blueprint__cross::after{
  position:absolute;
  content:"";
  background:rgba(64,54,48,.14);
}

.hero-blueprint__cross::before{
  top:6px;
  left:0;
  width:13px;
  height:1px;
}

.hero-blueprint__cross::after{
  top:0;
  left:6px;
  width:1px;
  height:13px;
}

.hero-blueprint__cross--1{top:31%;left:18%;}
.hero-blueprint__cross--2{right:6%;bottom:24%;}

/* ---------------------------------------------------------
   SAMPLES / OVERVIEW FIRST
--------------------------------------------------------- */

.section--samples{
  background:
    linear-gradient(90deg,rgba(64,54,48,.018) 1px,transparent 1px),
    var(--paper-light);
  background-size:12.5% 100%;
}

.section--samples .ambient--samples{
  top:6%;
  right:-90px;
  width:310px;
  height:460px;
  border-radius:0;
  border-right:0;
  border-bottom:0;
  opacity:.72;
}

.samples-grid{
  grid-template-columns:minmax(250px,285px) minmax(0,1fr);
  gap:clamp(48px,5.2vw,82px);
}

.sample-aside{
  top:calc(var(--header-h) + 30px);
}

.sample-filter-group--plan{
  max-height:none;
  overflow:visible;
  opacity:1;
  transform:none;
}

.sample-filter-group--plan.is-locked{
  max-height:none;
  margin-top:34px!important;
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.sample-filter-button{
  min-height:66px;
  padding:0 7px;
  background:transparent;
}

.sample-filter-button:hover{
  background:rgba(120,106,93,.035);
}

.sample-filter-button.is-active{
  background:transparent;
}

.sample-filter-button.is-active::after{
  position:absolute;
  right:7px;
  bottom:-1px;
  left:7px;
  height:1px;
  content:"";
  background:rgba(64,54,48,.48);
}

.sample-filter-button__status{
  text-align:right;
}

.sample-main{
  position:relative;
}

.sample-intro[hidden],
.sample-detail[hidden]{
  display:none!important;
}

.sample-intro{
  position:relative;
  min-height:clamp(610px,49vw,760px);
}

.sample-intro__canvas{
  position:relative;
  width:100%;
  min-height:clamp(610px,49vw,760px);
  overflow:hidden;
  border-top:1px solid rgba(64,54,48,.18);
  border-bottom:1px solid rgba(64,54,48,.14);
  background:
    linear-gradient(to right,rgba(64,54,48,.038) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(64,54,48,.028) 1px,transparent 1px),
    rgba(255,255,255,.18);
  background-size:25% 100%,100% 25%,auto;
}

.sample-intro__canvas::before{
  position:absolute;
  z-index:0;
  top:8.5%;
  right:8%;
  width:34%;
  aspect-ratio:1;
  content:"";
  border:1px solid rgba(64,54,48,.055);
  border-radius:50%;
}

.sample-intro__canvas::after{
  position:absolute;
  z-index:0;
  bottom:7%;
  left:6%;
  width:29%;
  height:1px;
  content:"";
  background:rgba(64,54,48,.11);
}

.sample-intro__frame{
  position:absolute;
  z-index:2;
  margin:0;
  overflow:hidden;
  background:#ded4c7;
  box-shadow:0 22px 55px rgba(48,39,33,.09);
}

.sample-intro__frame::after{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}

.sample-intro__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transform:scale(1.002);
}

.sample-intro__frame--lento{
  top:9%;
  left:0;
  width:34%;
  height:39%;
}

.sample-intro__frame--nagi{
  top:0;
  right:5%;
  width:48%;
  height:43%;
}

.sample-intro__frame--rive{
  right:0;
  bottom:6%;
  width:39%;
  height:37%;
}

.sample-intro__frame--tane{
  z-index:3;
  bottom:0;
  left:18%;
  width:43%;
  height:41%;
}

.sample-intro__frame--tane img{
  object-position:center 38%;
}

.sample-intro__line{
  position:absolute;
  z-index:1;
  background:rgba(64,54,48,.10);
}

.sample-intro__line--h{
  top:54%;
  right:0;
  left:0;
  height:1px;
}

.sample-intro__line--v{
  top:0;
  bottom:0;
  left:61%;
  width:1px;
}

.sample-intro__point{
  position:absolute;
  z-index:4;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(64,54,48,.38);
}

.sample-intro__point--1{
  top:54%;
  left:61%;
  transform:translate(-50%,-50%);
}
.sample-intro__point--2{
  top:8%;
  right:3%;
}

.sample-intro__notation{
  position:absolute;
  z-index:5;
  right:2.5%;
  bottom:49.5%;
  display:grid;
  justify-items:end;
  gap:4px;
  color:rgba(64,54,48,.45);
  font-family:var(--sans);
  line-height:1.2;
  letter-spacing:.16em;
  text-align:right;
  transform:translateY(50%);
}

.sample-intro__notation span{
  font-size:.62rem;
}

.sample-intro__notation small{
  font-size:.56rem;
}

/* Detail: image first, information second */

.sample-detail{
  position:relative;
}

.sample-project-bar{
  grid-template-columns:auto minmax(250px,1fr) auto;
  align-items:end;
  gap:clamp(24px,3.2vw,50px);
  padding:4px 0 21px;
  border-top:1px solid rgba(64,54,48,.20);
  border-bottom:1px solid rgba(64,54,48,.13);
}

.sample-project-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  align-self:center;
  padding:8px 0;
  color:var(--ink-faint);
  font-family:var(--sans);
  font-size:.63rem;
  letter-spacing:.14em;
  white-space:nowrap;
  transition:color .4s var(--ease),transform .4s var(--ease);
}

.sample-project-back span{
  font-size:.9rem;
  line-height:1;
}

.sample-project-back strong{
  font-size:inherit;
  font-weight:500;
}

.sample-project-back:hover{
  color:var(--ink);
  transform:translateX(-3px);
}

.sample-project__index{
  margin-bottom:7px;
  font-size:.64rem;
}

.sample-project-bar h3{
  font-family:var(--serif);
  font-size:clamp(2.15rem,2.75vw,3.15rem);
  letter-spacing:-.025em;
}

.sample-project-meta{
  grid-template-columns:auto auto auto;
  gap:clamp(24px,2.5vw,44px);
}

.sample-project-meta__item{
  min-width:98px;
}

.sample-project-meta__item small{
  bottom:calc(100% + 7px);
  font-size:.58rem;
  letter-spacing:.17em;
}

.sample-project-meta__item strong{
  font-family:var(--sans);
  font-size:.84rem;
}

.sample-project-meta__view{
  min-width:0;
  height:auto;
  padding:5px 0 4px;
  border:0;
  border-bottom:1px solid rgba(64,54,48,.34);
  font-size:.66rem;
  transform:none;
}

.sample-project-meta__view:hover{
  color:var(--ink);
  background:transparent;
  border-color:var(--ink);
  transform:translateX(3px);
}

.sample-page-nav{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  gap:0;
  margin:24px 0 14px;
  border-top:1px solid rgba(64,54,48,.12);
  border-bottom:1px solid rgba(64,54,48,.12);
}

.sample-page-button{
  position:relative;
  min-height:58px;
  gap:2px;
  padding:9px 14px 8px;
  border:0;
  border-right:1px solid rgba(64,54,48,.08);
  background:transparent;
}

.sample-page-button:last-child{
  border-right:0;
}

.sample-page-button::after{
  position:absolute;
  right:14px;
  bottom:-1px;
  left:14px;
  height:1px;
  content:"";
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}

.sample-page-button span{
  font-size:.58rem;
}

.sample-page-button strong{
  font-size:.75rem;
  letter-spacing:.06em;
}

.sample-page-button:hover,
.sample-page-button.is-active{
  background:rgba(64,54,48,.025);
  border-top-color:transparent;
}

.sample-page-button.is-active::after{
  transform:scaleX(1);
}

.sample-browser{
  overflow:hidden;
  border:0;
  background:transparent;
  box-shadow:none;
}

.sample-browser__top{
  height:38px;
  padding:0 1px;
  border:0;
}

.sample-browser__dots{
  display:none;
}

.sample-browser__top-left{
  gap:0;
}

.sample-browser__label,
.sample-browser__top a{
  font-size:.59rem;
  letter-spacing:.16em;
}

.sample-browser__top a{
  position:relative;
  padding-bottom:3px;
}

.sample-browser__top a::after{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  content:"";
  background:currentColor;
  transform:scaleX(.35);
  transform-origin:right;
  transition:transform .45s var(--ease);
}

.sample-browser__top a:hover::after{
  transform:scaleX(1);
}

.sample-browser__viewport{
  min-height:460px;
  border:1px solid rgba(64,54,48,.12);
  background:#e6ddd1;
  box-shadow:0 28px 72px rgba(48,39,33,.085);
}

.sample-browser__viewport::after{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ---------------------------------------------------------
   PLANS / EDITORIAL SHEET
--------------------------------------------------------- */

.section--plans{
  background:
    linear-gradient(to right,rgba(64,54,48,.025) 1px,transparent 1px),
    var(--sand);
  background-size:25% 100%;
}

.plans-layout{
  grid-template-columns:minmax(290px,340px) minmax(0,1fr);
  gap:clamp(44px,5vw,80px);
}

.plan-selector{
  align-self:start;
  border-top:1px solid rgba(64,54,48,.28);
}

.plan-button{
  min-height:98px;
  grid-template-columns:52px 1fr 18px;
  padding:0 8px;
  background:transparent;
}

.plan-button:hover{
  background:rgba(255,255,255,.10);
}

.plan-button.is-active{
  background:transparent;
}

.plan-button.is-active::after{
  position:absolute;
  right:8px;
  bottom:-1px;
  left:8px;
  height:1px;
  content:"";
  background:rgba(64,54,48,.55);
}

.plan-button__number{
  font-size:2.15rem;
}

.plan-button__title strong{
  font-size:1.28rem;
}

.plan-view{
  min-height:565px;
  padding:38px clamp(28px,3.4vw,52px) 38px;
  border-top:1px solid rgba(64,54,48,.26);
  border-right:0;
  border-bottom:1px solid rgba(64,54,48,.18);
  border-left:0;
  box-shadow:none;
}

.plan-view::before{
  inset:15px 0;
  border-right:0;
  border-left:0;
}

.plan-view__ghost{
  position:absolute;
  z-index:0;
  top:-.11em;
  right:1.5%;
  color:rgba(64,54,48,.052);
  font-family:var(--display);
  font-size:clamp(10rem,16vw,17rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.08em;
  pointer-events:none;
  user-select:none;
}

.plan-view[data-tier="brand"] .plan-view__ghost{
  color:rgba(245,238,230,.065);
}

.plan-view__top{
  padding-bottom:16px;
}

.plan-view__headline{
  position:relative;
  align-items:flex-start;
  padding:34px 0 27px;
}

.plan-view__headline h3{
  font-size:clamp(3.35rem,4.5vw,5rem);
}

.plan-view__headline strong{
  align-self:flex-end;
  font-size:clamp(2.7rem,3.45vw,3.9rem);
}

.plan-view__description{
  width:min(720px,86%);
  margin-top:28px;
  line-height:2;
}

.plan-view__includes{
  margin-top:32px;
}

.plan-features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  padding-top:0;
  border-top:1px solid var(--line);
}

.plan-features span{
  position:relative;
  min-height:48px;
  display:flex;
  align-items:center;
  padding:0 22px 0 18px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent!important;
  font-size:.84rem;
}

.plan-features span:nth-child(odd){
  border-right:1px solid var(--line);
}

.plan-features span::before{
  position:absolute;
  left:0;
  width:5px;
  height:5px;
  content:"";
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.32;
}

/* ---------------------------------------------------------
   SERVICES / CAPABILITY FIELD
--------------------------------------------------------- */

.section--services{
  background:
    radial-gradient(circle at 13% 14%,rgba(255,255,255,.30),transparent 28%),
    var(--paper-warm);
}

.service-field{
  position:relative;
  padding-top:38px;
  border-top:1px solid rgba(64,54,48,.20);
}

.service-field::before{
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  content:"";
  background:rgba(64,54,48,.045);
}

.service-field__meta{
  position:absolute;
  top:-25px;
  right:0;
  left:0;
  display:flex;
  justify-content:space-between;
  color:rgba(64,54,48,.45);
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.17em;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:auto;
  column-gap:clamp(20px,2.5vw,40px);
  row-gap:clamp(44px,5vw,78px);
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
}

.service-item{
  min-height:410px;
  padding:24px 0 34px;
  overflow:visible;
  border-top:1px solid rgba(64,54,48,.18);
  border-right:0;
  background:transparent;
}

.service-item:nth-child(1){
  grid-column:1 / span 6;
  grid-row:1;
}

.service-item:nth-child(2){
  grid-column:8 / span 5;
  grid-row:1;
  margin-top:78px;
}

.service-item:nth-child(3){
  grid-column:2 / span 5;
  grid-row:2;
}

.service-item:nth-child(4){
  grid-column:7 / span 5;
  grid-row:2;
  margin-top:66px;
}

.service-item::before{
  left:0;
}

.service-item::after{
  right:-8%;
  bottom:-14%;
}

.service-item:hover{
  background:transparent;
}

.service-figure{
  width:min(76%,390px);
  height:128px;
  margin:0 0 23px auto;
}

.service-item:nth-child(2n) .service-figure{
  margin-right:auto;
  margin-left:0;
}

.service-item__number{
  margin-top:5px;
  font-size:3.2rem;
}

.service-item>small{
  margin-top:13px;
}

.service-item h3{
  font-size:clamp(1.7rem,2vw,2.15rem);
}

.service-item p{
  max-width:380px;
  margin-top:17px;
}

.service-item__scope{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:12px;
  border-top:1px solid rgba(64,54,48,.09);
  color:var(--ink-faint);
  font-family:var(--sans);
  line-height:1.2;
}

.service-item__scope span{
  font-size:.57rem;
  letter-spacing:.16em;
}

.service-item__scope strong{
  font-size:.61rem;
  font-weight:500;
  letter-spacing:.11em;
}

/* ---------------------------------------------------------
   PROCESS / ARCHITECTURAL ROUTE
--------------------------------------------------------- */

.section--process{
  background:
    linear-gradient(90deg,rgba(64,54,48,.022) 1px,transparent 1px),
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.26),transparent 44%),
    #d9cbb9;
  background-size:12.5% 100%,auto,auto;
}

.process-track{
  padding-top:74px;
  padding-bottom:96px;
}

.process-route{
  top:17px;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(18px,2vw,32px);
  align-items:start;
  border:0;
  background:transparent;
  box-shadow:none;
}

.process-step{
  min-height:425px;
  padding:24px 18px 30px;
  overflow:visible;
  border-top:1px solid rgba(64,54,48,.20);
  border-right:0;
  border-bottom:1px solid rgba(64,54,48,.09);
  background:rgba(255,255,255,.06);
}

.process-step:nth-child(1){
  grid-column:1 / span 3;
  margin-top:0;
}

.process-step:nth-child(2){
  grid-column:4 / span 3;
  margin-top:66px;
}

.process-step:nth-child(3){
  grid-column:7 / span 3;
  margin-top:132px;
}

.process-step:nth-child(4){
  grid-column:10 / span 3;
  margin-top:198px;
}

.process-step:not(:last-child)::after{
  top:25px;
  right:-21px;
  width:12px;
  height:12px;
  content:"";
  border:1px solid rgba(64,54,48,.28);
  border-radius:50%;
  background:#d9cbb9;
  transform:none;
}

.process-step:hover{
  background:rgba(255,255,255,.11);
}

.process-step__figure{
  height:112px;
  margin-bottom:8px;
}

.process-step__number{
  font-size:3.6rem;
}

.process-step h3{
  white-space:normal;
  font-size:clamp(1.35rem,1.55vw,1.7rem);
}

.process-step__output{
  margin-top:26px;
  padding-top:12px;
  border-top:1px solid rgba(64,54,48,.11);
}

.process-step__output span{
  display:block;
  color:var(--ink-faint);
  font-family:var(--sans);
  font-size:.56rem;
  letter-spacing:.16em;
}

.process-step__output strong{
  display:block;
  margin-top:5px;
  color:var(--ink-soft);
  font-size:.76rem;
  font-weight:400;
}

/* ---------------------------------------------------------
   FAQ / INTENTIONAL QUIET
--------------------------------------------------------- */

.section--faq{
  padding-top:70px;
  padding-bottom:130px;
}

.faq-list{
  width:min(980px,100%);
}

.faq-question{
  min-height:88px;
}

/* ---------------------------------------------------------
   CONTACT / FINAL ARCHITECTURAL SPACE
--------------------------------------------------------- */

.contact{
  background:
    linear-gradient(90deg,rgba(64,54,48,.026) 1px,transparent 1px),
    radial-gradient(circle at 81% 40%,rgba(255,255,255,.18),transparent 37%),
    var(--sand-deep);
  background-size:12.5% 100%,auto,auto;
}

.contact-main{
  width:min(1240px,100%);
  display:grid;
  grid-template-columns:minmax(280px,.74fr) minmax(0,1.26fr);
  align-items:start;
  gap:clamp(54px,7vw,112px);
  padding:34px 0 94px;
}

.contact-inquiry{
  position:sticky;
  top:calc(var(--header-h) + 34px);
  max-width:none;
  margin:0;
  padding-top:32px;
  text-align:left;
}

.contact-inquiry::before,
.contact-inquiry::after{
  display:none;
}

.contact-inquiry h3{
  margin-top:26px;
  font-size:clamp(2.45rem,3.1vw,3.45rem);
}

.contact-inquiry__lead{
  max-width:520px;
  margin:24px 0 0;
}

.contact-inquiry__meta{
  max-width:520px;
  margin:36px 0 0;
}

.contact-form-shell{
  width:100%;
  margin:0;
  padding:36px clamp(24px,3vw,40px) 34px;
  border-radius:0;
  border-top:1px solid rgba(64,54,48,.22);
  border-right:1px solid rgba(64,54,48,.09);
  border-bottom:1px solid rgba(64,54,48,.13);
  border-left:1px solid rgba(64,54,48,.09);
  background:rgba(250,247,242,.83);
  box-shadow:0 30px 78px rgba(64,54,48,.065);
}

.contact-form-shell::before{
  right:40%;
  left:0;
  background:rgba(64,54,48,.24);
}

.contact-operation{
  grid-column:2;
  width:100%;
  margin:0;
  padding-top:0;
}

.contact-operation__label{
  margin-top:18px;
}

.contact-blueprint{
  right:-2%;
  width:min(50vw,760px);
  opacity:0;
}

/* ---------------------------------------------------------
   RESPONSIVE / TABLET
--------------------------------------------------------- */

@media (max-width:1200px){

  .sample-intro,
  .sample-intro__canvas{
    min-height:650px;
  }

  .sample-project-bar{
    grid-template-columns:auto minmax(230px,1fr);
  }

  .sample-project-meta{
    grid-column:2;
    margin-top:7px;
  }

  .service-grid{
    column-gap:28px;
    row-gap:58px;
  }

  .service-item:nth-child(1){grid-column:1 / span 6;}
  .service-item:nth-child(2){grid-column:7 / span 6;margin-top:58px;}
    .service-item:nth-child(3){grid-column:1 / span 6;}
  .service-item:nth-child(4){grid-column:7 / span 6;margin-top:48px;}

  .process-step{
    padding-inline:15px;
  }

  .contact-main{
    gap:54px;
  }

}

@media (max-width:980px){

  .hero-blueprint__studio,
  .hero-blueprint__scope{
    display:none;
  }

  .hero-blueprint__axis{
    top:12%;
    left:10%;
  }

  .hero-blueprint__location{
    right:8%;
    bottom:12%;
  }

  .samples-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .sample-aside{
    position:static;
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:24px;
  }

  .sample-filter-group+.sample-filter-group,
  .sample-filter-group--plan.is-locked{
    margin-top:0!important;
  }

  .sample-filter-group--project,
  .sample-aside__note{
    grid-column:1/-1;
  }

  .sample-intro,
  .sample-intro__canvas{
    min-height:620px;
  }

  .sample-project-bar{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:24px;
  }

  .sample-project-meta{
    grid-column:auto;
    margin:0;
    grid-template-columns:auto auto auto;
    gap:20px;
  }

  .sample-project-meta__item{
    min-width:80px;
  }

  .plans-layout{
    grid-template-columns:1fr;
    gap:36px;
  }

  .plan-selector{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .plan-button:nth-child(odd){
    border-right:1px solid var(--line);
  }

  .service-field{
    padding-top:34px;
  }

  .service-grid{
    grid-template-columns:1fr 1fr;
    gap:54px 30px;
  }

  .service-item,
  .service-item:nth-child(1),
  .service-item:nth-child(2),
  .service-item:nth-child(3),
  .service-item:nth-child(4){
    grid-column:auto;
    grid-row:auto;
    min-height:405px;
    margin-top:0;
    border-bottom:0;
  }

  .service-item:nth-child(2),
  .service-item:nth-child(4){
    transform:translateY(42px);
  }

  .process-track{
    padding-bottom:35px;
  }

  .process-grid{
    grid-template-columns:1fr 1fr;
    gap:34px 26px;
  }

  .process-step,
  .process-step:nth-child(1),
  .process-step:nth-child(2),
  .process-step:nth-child(3),
  .process-step:nth-child(4){
    grid-column:auto;
    min-height:400px;
    margin-top:0;
  }

  .process-step:nth-child(2),
  .process-step:nth-child(4){
    transform:translateY(46px);
  }

  .process-step:not(:last-child)::after{
    display:none;
  }

  .contact-main{
    display:block;
    width:min(920px,100%);
  }

  .contact-inquiry{
    position:relative;
    top:auto;
    max-width:720px;
    margin:0 auto 48px;
    padding-top:0;
    text-align:center;
  }

  .contact-inquiry__lead,
  .contact-inquiry__meta{
    margin-right:auto;
    margin-left:auto;
  }

  .contact-operation{
    width:100%;
  }

}

/* ---------------------------------------------------------
   RESPONSIVE / MOBILE
--------------------------------------------------------- */

@media (max-width:640px){

  .hero-blueprint{
    font-size:.52rem;
  }

  .hero-blueprint__axis{
    top:8%;
    left:8%;
  }

  .hero-blueprint__location{
    right:7%;
    bottom:8%;
  }

  .hero-blueprint__measure{
    top:18%;
    right:7%;
    bottom:20%;
  }

  .hero-blueprint__cross--1{
    top:31%;
    left:8%;
  }

  .section--samples{
    background-size:25% 100%;
  }

  .sample-aside{
    display:block;
  }

  .sample-filter-group+.sample-filter-group,
  .sample-filter-group--plan.is-locked{
    margin-top:28px!important;
  }

  .sample-intro{
    min-height:0;
  }

  .sample-intro__canvas{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    min-height:0;
    padding:10px 0 28px;
    overflow:visible;
    background-size:50% 100%,100% 25%,auto;
  }

  .sample-intro__canvas::before,
  .sample-intro__canvas::after,
  .sample-intro__line,
  .sample-intro__point{
    display:none;
  }

  .sample-intro__frame,
  .sample-intro__frame--lento,
  .sample-intro__frame--nagi,
  .sample-intro__frame--rive,
  .sample-intro__frame--tane{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:auto;
    height:auto;
    box-shadow:0 14px 36px rgba(48,39,33,.08);
  }

  .sample-intro__frame--nagi{
    grid-column:1/-1;
    aspect-ratio:16/9;
  }

  .sample-intro__frame--lento{
    grid-column:1;
    aspect-ratio:4/5;
    margin-top:16px;
  }

  .sample-intro__frame--tane{
    grid-column:2;
    aspect-ratio:4/5;
    margin-top:42px;
  }

  .sample-intro__frame--rive{
    grid-column:1/-1;
    width:82%;
    aspect-ratio:16/9;
    margin-top:-10px;
    margin-left:auto;
  }

  .sample-intro__notation{
    position:relative;
    right:auto;
    bottom:auto;
    grid-column:1/-1;
    justify-items:start;
    margin-top:8px;
    text-align:left;
    transform:none;
  }

  .sample-project-bar{
    grid-template-columns:1fr;
    gap:20px;
    padding-top:0;
  }

  .sample-project-back{
    justify-self:start;
  }

  .sample-project-meta{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    grid-column:auto;
    gap:18px;
    margin-top:14px;
    padding-top:16px;
    border-top:1px solid rgba(64,54,48,.09);
  }

  .sample-project-meta__item small{
    position:static;
    margin-bottom:6px;
  }

  .sample-project-meta__view{
    align-self:end;
  }

  .sample-page-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:20px;
  }

  .sample-page-button:nth-child(2n){
    border-right:0;
  }

  .sample-browser__viewport{
    min-height:230px;
  }

  .plan-selector{
    grid-template-columns:1fr;
  }

  .plan-button:nth-child(odd){
    border-right:0;
  }

  .plan-view{
    padding:28px 18px 30px;
  }

  .plan-view__ghost{
    top:.02em;
    right:2%;
    font-size:8.5rem;
  }

  .plan-view__description{
    width:100%;
  }

  .plan-features{
    grid-template-columns:1fr;
  }

  .plan-features span:nth-child(odd){
    border-right:0;
  }

  .service-field__meta{
    display:grid;
    gap:4px;
  }

  .service-field__meta span:last-child{
    display:none;
  }

  .service-field::before{
    left:24px;
  }

  .service-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .service-item,
  .service-item:nth-child(1),
  .service-item:nth-child(2),
  .service-item:nth-child(3),
  .service-item:nth-child(4){
    min-height:390px;
    padding-left:36px;
    transform:none;
  }

  .service-item:nth-child(2n){
    margin-left:18px;
  }

  .service-figure,
  .service-item:nth-child(2n) .service-figure{
    width:82%;
    margin-right:0;
    margin-left:auto;
  }

  .process-track{
    padding-top:40px;
    padding-bottom:0;
  }

  .process-route{
    display:none;
  }

  .process-grid{
    position:relative;
    grid-template-columns:1fr;
    gap:0;
    padding-left:28px;
  }

  .process-grid::before{
    position:absolute;
    top:12px;
    bottom:12px;
    left:7px;
    width:1px;
    content:"";
    background:rgba(64,54,48,.18);
  }

  .process-step,
  .process-step:nth-child(1),
  .process-step:nth-child(2),
  .process-step:nth-child(3),
  .process-step:nth-child(4){
    min-height:0;
    padding:28px 0 34px 18px;
    transform:none;
    background:transparent;
    border-bottom:1px solid rgba(64,54,48,.10);
  }

  .process-step::before{
    position:absolute;
    top:36px;
    left:-25px;
    width:7px;
    height:7px;
    content:"";
    border:1px solid rgba(64,54,48,.36);
    border-radius:50%;
    background:#d9cbb9;
  }

  .process-step__figure{
    height:96px;
  }

  .contact{
    background-size:25% 100%,auto,auto;
  }

  .contact-inquiry{
    margin-bottom:38px;
    text-align:left;
  }

  .contact-inquiry__lead,
  .contact-inquiry__meta{
    margin-right:0;
    margin-left:0;
  }

  .contact-form-shell{
    padding:28px 17px 30px;
  }

}

/* TANE overview uses the TOP composition as the project identifier. */
.sample-intro__frame--tane img{
  object-position:top center;
}

/* =========================================================
   2026.08 / HTML CLASS ALIGNMENT PATCH
   Matches the current index.html structure.
========================================================= */

/* HERO blueprint: current HTML uses axis / label / measure. */

.hero-blueprint__axis{
  position:absolute;
  display:block;
  background:rgba(64,54,48,.10);
}

.hero-blueprint__axis--x{
  top:55%;
  right:6%;
  left:12%;
  width:auto;
  height:1px;
}

.hero-blueprint__axis--y{
  top:12%;
  bottom:10%;
  left:18%;
  width:1px;
  height:auto;
}

.hero-blueprint__label{
  position:absolute;
  display:block;
  color:rgba(64,54,48,.42);
  font-family:var(--sans);
  font-size:.57rem;
  line-height:1;
  letter-spacing:.17em;
  white-space:nowrap;
}

.hero-blueprint__label--01{
  top:12%;
  left:20%;
}

.hero-blueprint__label--02{
  right:6%;
  bottom:10%;
}

.hero-blueprint__label--03{
  left:20%;
  bottom:10%;
}

.hero-blueprint__measure{
  top:20%;
  right:6%;
  bottom:auto;
  width:auto;
  height:auto;
  padding-left:12px;
  color:rgba(64,54,48,.34);
  background:transparent;
  font-family:var(--sans);
  font-size:.53rem;
  line-height:1;
  letter-spacing:.14em;
  writing-mode:vertical-rl;
}

.hero-blueprint__measure::before{
  top:0;
  bottom:auto;
  left:0;
  width:1px;
  height:100%;
  background:rgba(64,54,48,.10);
}

.hero-blueprint__measure::after{
  display:none;
}

/* SAMPLES detail utility: current HTML uses ALL WORKS button. */

.sample-detail__utility{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:16px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(64,54,48,.10);
}

.sample-overview-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink-faint);
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.15em;
  transition:color .4s var(--ease),transform .4s var(--ease);
}

.sample-overview-link:hover{
  color:var(--ink);
  transform:translateX(-3px);
}

.sample-detail__mode{
  color:rgba(64,54,48,.38);
  font-family:var(--sans);
  font-size:.56rem;
  line-height:1;
  letter-spacing:.18em;
}

/* PLAN drawing layer: current HTML contains empty structural elements. */

.plan-view__drawing{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.plan-view__ghost{
  position:absolute;
  z-index:0;
  top:-.13em;
  right:1.5%;
  color:rgba(64,54,48,.052);
  font-family:var(--display);
  font-size:clamp(10rem,16vw,17rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.08em;
  pointer-events:none;
  user-select:none;
}

.plan-view__ghost::before{
  content:"02";
}

.plan-view[data-tier="template"] .plan-view__ghost::before{
  content:"01";
}

.plan-view[data-tier="standard"] .plan-view__ghost::before{
  content:"02";
}

.plan-view[data-tier="premium"] .plan-view__ghost::before{
  content:"03";
}

.plan-view[data-tier="brand"] .plan-view__ghost::before{
  content:"04";
}

.plan-view[data-tier="brand"] .plan-view__ghost{
  color:rgba(245,238,230,.065);
}

.plan-view__axis{
  position:absolute;
  display:block;
  background:var(--line);
  opacity:.6;
}

.plan-view__axis--v{
  top:0;
  bottom:0;
  right:27%;
  width:1px;
}

.plan-view__axis--h{
  top:31%;
  right:0;
  left:0;
  height:1px;
}

.plan-view__point{
  position:absolute;
  top:31%;
  right:27%;
  width:7px;
  height:7px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.24;
  transform:translate(50%,-50%);
}

/* SERVICE field axis is decorative and must not consume a grid cell. */

.service-grid{
  position:relative;
  padding-top:30px;
}

.service-field__axis{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  left:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  color:rgba(64,54,48,.40);
  font-family:var(--sans);
  font-size:.56rem;
  line-height:1;
  letter-spacing:.17em;
  pointer-events:none;
}

.service-field__axis i{
  display:block;
  width:100%;
  height:1px;
  background:rgba(64,54,48,.12);
}

.service-grid > .service-item:nth-of-type(1){
  grid-column:1 / span 6;
  grid-row:1;
}

.service-grid > .service-item:nth-of-type(2){
  grid-column:8 / span 5;
  grid-row:1;
  margin-top:78px;
}

.service-grid > .service-item:nth-of-type(3){
  grid-column:2 / span 5;
  grid-row:2;
}

.service-grid > .service-item:nth-of-type(4){
  grid-column:7 / span 5;
  grid-row:2;
  margin-top:66px;
}

/* PROCESS route legend. */

.process-track__legend{
  position:absolute;
  z-index:6;
  top:0;
  right:0;
  left:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  color:rgba(64,54,48,.43);
  font-family:var(--sans);
  font-size:.56rem;
  line-height:1;
  letter-spacing:.17em;
  pointer-events:none;
}

.process-track__legend i{
  display:block;
  width:100%;
  height:1px;
  background:rgba(64,54,48,.12);
}

.process-track .process-route{
  top:28px;
}

@media (max-width:1200px){

  .service-grid > .service-item:nth-of-type(1){
    grid-column:1 / span 6;
  }

  .service-grid > .service-item:nth-of-type(2){
    grid-column:7 / span 6;
    margin-top:58px;
  }

  .service-grid > .service-item:nth-of-type(3){
    grid-column:1 / span 6;
  }

  .service-grid > .service-item:nth-of-type(4){
    grid-column:7 / span 6;
    margin-top:48px;
  }

}

@media (max-width:980px){

  .hero-blueprint__axis--x{
    right:8%;
    left:10%;
  }

  .hero-blueprint__axis--y{
    left:10%;
  }

  .hero-blueprint__label--01{
    left:12%;
  }

  .hero-blueprint__label--02{
    right:8%;
    bottom:12%;
  }

  .hero-blueprint__label--03{
    display:none;
  }

  .hero-blueprint__measure{
    right:8%;
  }

  .service-grid > .service-item:nth-of-type(1),
  .service-grid > .service-item:nth-of-type(2),
  .service-grid > .service-item:nth-of-type(3),
  .service-grid > .service-item:nth-of-type(4){
    grid-column:auto;
    grid-row:auto;
    margin-top:0;
  }

  .service-grid > .service-item:nth-of-type(2),
  .service-grid > .service-item:nth-of-type(4){
    transform:translateY(42px);
  }

}

@media (max-width:640px){

  .hero-blueprint__axis--x{
    right:7%;
    left:8%;
  }

  .hero-blueprint__axis--y{
    left:8%;
  }

  .hero-blueprint__label--01{
    top:8%;
    left:10%;
  }
    .hero-blueprint__label--02{
    right:7%;
    bottom:8%;
  }

  .hero-blueprint__measure{
    top:18%;
    right:7%;
    font-size:.49rem;
  }

  .sample-detail__utility{
    margin-bottom:14px;
  }

  .sample-detail__mode{
    font-size:.52rem;
  }

  .plan-view__axis--v{
    right:20%;
  }

  .plan-view__point{
    right:20%;
  }

  .service-grid{
    padding-top:26px;
  }

  .service-field__axis{
    grid-template-columns:auto 1fr;
    font-size:.51rem;
  }

  .service-field__axis span:last-child{
    display:none;
  }

  .service-grid > .service-item:nth-of-type(1),
  .service-grid > .service-item:nth-of-type(2),
  .service-grid > .service-item:nth-of-type(3),
  .service-grid > .service-item:nth-of-type(4){
    grid-column:auto;
    grid-row:auto;
    margin-top:0;
    transform:none;
  }

  .service-grid > .service-item:nth-of-type(2),
  .service-grid > .service-item:nth-of-type(4){
    margin-left:18px;
  }

  .process-track__legend{
    font-size:.50rem;
  }

  .process-track .process-route{
    display:none;
  }
}

/* =========================================================
   2026.08 / FINAL ART-DIRECTION REVISION
   Architecture / Editorial / Creative Studio
========================================================= */

[hidden]{
  display:none!important;
}

/* ---------------------------------------------------------
   HERO / MORE CREATIVE-STUDIO DENSITY
--------------------------------------------------------- */

.hero{
  background:
    linear-gradient(90deg,rgba(64,54,48,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%),
    var(--paper);
  background-size:12.5% 100%,auto,auto;
}

.hero-visual{
  isolation:isolate;
}

.hero-visual::before{
  position:absolute;
  z-index:0;
  top:8%;
  right:-11%;
  bottom:6%;
  left:-14%;
  content:"";
  border-top:1px solid rgba(64,54,48,.075);
  border-bottom:1px solid rgba(64,54,48,.055);
  pointer-events:none;
}

.hero-visual::after{
  position:absolute;
  z-index:2;
  inset:0;
  content:"";
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(245,241,234,.56) 0%,
      transparent 24%,
      transparent 86%,
      rgba(245,241,234,.18) 100%
    );
}

.hero-visual__gate{
  z-index:1;
  opacity:.082;
}

.hero-blueprint{
  z-index:4;
}

.hero-studio-layer{
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  color:rgba(64,54,48,.52);
  font-family:var(--sans);
}

.hero-studio-layer__index{
  position:absolute;
  top:7.2%;
  right:4.5%;
  left:18%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(64,54,48,.11);
  font-size:.56rem;
  letter-spacing:.18em;
}

.hero-studio-layer__index span{
  color:rgba(64,54,48,.42);
}

.hero-studio-layer__index strong{
  color:rgba(64,54,48,.58);
  font-size:.58rem;
  font-weight:500;
}

.hero-studio-layer__word{
  position:absolute;
  z-index:-1;
  top:16%;
  right:-.13em;
  color:transparent;
  font-family:var(--display);
  font-size:clamp(6.2rem,9.2vw,10.2rem);
  font-weight:400;
  line-height:.85;
  letter-spacing:-.075em;
  -webkit-text-stroke:1px rgba(64,54,48,.055);
  opacity:.94;
  transform:rotate(90deg) translateX(65%);
  transform-origin:right top;
  white-space:nowrap;
}

.hero-studio-layer__disciplines{
  position:absolute;
  right:4.5%;
  bottom:5.5%;
  left:18%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(64,54,48,.12);
  border-bottom:1px solid rgba(64,54,48,.10);
}

.hero-studio-layer__disciplines>div{
  position:relative;
  display:grid;
  min-height:78px;
  align-content:center;
  gap:3px;
  padding:12px 13px 11px 26px;
  border-right:1px solid rgba(64,54,48,.08);
}

.hero-studio-layer__disciplines>div:last-child{
  border-right:0;
}

.hero-studio-layer__disciplines span{
  position:absolute;
  top:15px;
  left:10px;
  color:rgba(64,54,48,.34);
  font-family:var(--serif);
  font-size:.88rem;
}

.hero-studio-layer__disciplines strong{
  color:rgba(64,54,48,.64);
  font-size:.58rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
}

.hero-studio-layer__disciplines small{
  color:rgba(64,54,48,.38);
  font-size:.51rem;
  line-height:1.4;
  letter-spacing:.09em;
}

.hero-studio-layer__caption{
  position:absolute;
  top:46%;
  right:1.5%;
  color:rgba(64,54,48,.33);
  font-size:.50rem;
  letter-spacing:.21em;
  writing-mode:vertical-rl;
}

/* ---------------------------------------------------------
   SAMPLES / SELECT FIRST, THEN PLAN
--------------------------------------------------------- */

.sample-filter-group--plan[hidden]{
  display:none!important;
}

.sample-filter-group--plan{
  max-height:none!important;
  overflow:visible!important;
  opacity:1!important;
  transform:none!important;
}

.sample-filter-group--plan.is-entering{
  animation:samplePlanReveal .66s var(--ease) both;
}

@keyframes samplePlanReveal{
  from{
    opacity:0;
    transform:translateY(-8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.sample-filter-button{
  background:transparent!important;
}

.sample-filter-button::before{
  width:2px;
  background:rgba(64,54,48,.55);
}

.sample-filter-button:not(.is-active)::before{
  transform:scaleY(0)!important;
}

.sample-filter-button:not(.is-active)::after{
  transform:scaleX(0)!important;
}

.sample-filter-button.is-active{
  background:rgba(255,255,255,.22)!important;
}

.sample-filter-button.is-active::before{
  transform:scaleY(1)!important;
}

/* ---------------------------------------------------------
   SAMPLES / COHESIVE COLLAGE
--------------------------------------------------------- */

.sample-intro{
  min-height:clamp(690px,52vw,820px);
}

.sample-intro__canvas{
  position:relative;
  min-height:clamp(690px,52vw,820px);
  overflow:hidden;
  border-top:1px solid rgba(64,54,48,.17);
  border-bottom:1px solid rgba(64,54,48,.15);
  background:
    linear-gradient(90deg,rgba(64,54,48,.033) 1px,transparent 1px),
    linear-gradient(rgba(64,54,48,.025) 1px,transparent 1px),
    rgba(255,255,255,.12);
  background-size:20% 100%,100% 25%,auto;
}

.sample-intro__cluster{
  position:absolute;
  z-index:2;
  top:7%;
  right:6%;
  bottom:8%;
  left:6%;
  transform:translateZ(0);
}

.sample-intro__frame{
  position:absolute;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.38);
  background:#ded4c7;
  box-shadow:
    0 25px 65px rgba(48,39,33,.105),
    0 0 0 1px rgba(64,54,48,.035);
  will-change:transform;
}

.sample-intro__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

.sample-intro__frame--nagi{
  z-index:4;
  top:8%;
  left:26%;
  width:53%;
  height:44%;
}

.sample-intro__frame--lento{
  z-index:3;
  top:24%;
  left:4%;
  width:31%;
  height:39%;
}

.sample-intro__frame--tane{
  z-index:2;
  top:53%;
  left:23%;
  width:36%;
  height:37%;
}

.sample-intro__frame--rive{
  z-index:5;
  top:49%;
  left:53%;
  width:40%;
  height:35%;
}

.sample-intro__frame--tane img{
  object-position:top center!important;
}

.sample-intro__drawing{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
}

.sample-intro__line{
  position:absolute;
  background:rgba(64,54,48,.09);
}

.sample-intro__line--h{
  top:52%;
  right:0;
  left:0;
  height:1px;
}

.sample-intro__line--v{
  top:0;
  bottom:0;
  left:54%;
  width:1px;
}

.sample-intro__line--short{
  top:17%;
  right:3%;
  width:22%;
  height:1px;
}

.sample-intro__point{
  position:absolute;
  width:6px;
  height:6px;
  border:1px solid rgba(64,54,48,.36);
  border-radius:50%;
  background:var(--paper-light);
}

.sample-intro__point--1{
  top:52%;
  left:54%;
  transform:translate(-50%,-50%);
}

.sample-intro__point--2{
  top:17%;
  right:3%;
  transform:translateY(-50%);
}

.sample-intro__notation{
  position:absolute;
  z-index:7;
  right:2%;
  bottom:2.7%;
  display:grid;
  justify-items:end;
  gap:4px;
  color:rgba(64,54,48,.42);
  font-family:var(--sans);
  line-height:1.25;
  letter-spacing:.16em;
  text-align:right;
}

.sample-intro__notation span{
  font-size:.58rem;
}

.sample-intro__notation small{
  color:rgba(64,54,48,.30);
  font-size:.50rem;
}

/* ---------------------------------------------------------
   PLANS / INCLUDED BACK TO SOFT WHITE FRAMES
--------------------------------------------------------- */

.plan-features{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding-top:16px!important;
  border-top:0!important;
}

.plan-features span{
  min-height:0!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:9px 13px!important;
  border:1px solid rgba(255,255,255,.56)!important;
  background:rgba(255,255,255,.17)!important;
  color:var(--ink-soft);
  font-size:.84rem!important;
  line-height:1.35;
  box-shadow:inset 0 0 0 1px rgba(64,54,48,.018);
}

.plan-features span::before{
  display:none!important;
}

.plan-features span:nth-child(odd){
  border-right:1px solid rgba(255,255,255,.56)!important;
}

.plan-view[data-tier="standard"] .plan-features span,
.plan-view[data-tier="premium"] .plan-features span{
  background:rgba(255,255,255,.23)!important;
}

.plan-view[data-tier="brand"] .plan-features span{
  color:rgba(245,238,230,.84)!important;
  border-color:rgba(255,255,255,.17)!important;
  background:rgba(255,255,255,.045)!important;
}

/* ---------------------------------------------------------
   SERVICES / FOUR-COLUMN CREATIVE MATRIX
--------------------------------------------------------- */

.section--services{
  padding-bottom:124px;
  background:
    linear-gradient(90deg,rgba(64,54,48,.023) 1px,transparent 1px),
    radial-gradient(circle at 16% 26%,rgba(255,255,255,.34),transparent 28%),
    var(--paper-warm);
  background-size:12.5% 100%,auto,auto;
}

.service-board{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(64,54,48,.20);
  border-bottom:1px solid rgba(64,54,48,.16);
  background:rgba(255,255,255,.10);
}

.service-board::before{
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  content:"";
  background:rgba(64,54,48,.035);
}

.service-board::after{
  position:absolute;
  z-index:0;
  top:11%;
  right:-7%;
  width:27%;
  aspect-ratio:1;
  content:"";
  border:1px solid rgba(64,54,48,.045);
  border-radius:50%;
}

.service-board__axis{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  min-height:44px;
  padding:0 16px;
  border-bottom:1px solid rgba(64,54,48,.10);
  color:rgba(64,54,48,.42);
  font-family:var(--sans);
  font-size:.54rem;
  letter-spacing:.17em;
}

.service-board__axis i{
  height:1px;
  background:rgba(64,54,48,.10);
}

.service-grid{
  position:relative;
  z-index:2;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.service-item,
.service-grid>.service-item:nth-of-type(1),
.service-grid>.service-item:nth-of-type(2),
.service-grid>.service-item:nth-of-type(3),
.service-grid>.service-item:nth-of-type(4){
  position:relative;
  grid-column:auto!important;
  grid-row:auto!important;
  min-height:560px!important;
  margin:0!important;
  padding:24px 24px 26px!important;
  overflow:hidden!important;
  border-top:0!important;
  border-right:1px solid rgba(64,54,48,.10)!important;
  border-bottom:0!important;
  background:transparent!important;
  transform:none!important;
  transition:background .65s var(--ease);
}

.service-grid>.service-item:last-child{
  border-right:0!important;
}

.service-item::before{
  position:absolute!important;
  z-index:0;
  top:0!important;
  bottom:auto!important;
  left:0!important;
  width:100%!important;
  height:2px!important;
  content:"";
  background:var(--ink)!important;
  transform:scaleX(0)!important;
  transform-origin:left!important;
  transition:transform .7s var(--ease)!important;
}

.service-item::after{
  display:none!important;
}

.service-item:hover{
  background:rgba(255,255,255,.22)!important;
}

.service-item:hover::before{
  transform:scaleX(1)!important;
}

.service-item__head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  min-height:72px;
}

.service-item__number{
  margin:0!important;
  color:rgba(64,54,48,.78)!important;
  font-family:var(--serif)!important;
  font-size:clamp(3.2rem,4vw,4.45rem)!important;
  line-height:.86!important;
  letter-spacing:-.04em;
}

.service-item__head small{
  max-width:110px;
  padding-top:5px;
  color:rgba(64,54,48,.44);
  font-family:var(--sans);
  font-size:.53rem;
  line-height:1.45;
  letter-spacing:.15em;
  text-align:right;
}

.service-figure{
  position:relative!important;
  width:100%!important;
  height:170px!important;
  margin:10px 0 26px!important;
  opacity:.86!important;
  transform:none!important;
}

.service-figure::before{
  position:absolute;
  top:0;
  left:0;
  color:rgba(64,54,48,.28);
  font-family:var(--sans);
  font-size:.50rem;
  letter-spacing:.16em;
}

.service-item--web .service-figure::before{
  content:"FRAME / GRID";
}

.service-item--design .service-figure::before{
  content:"AXIS / SYSTEM";
}

.service-item--content .service-figure::before{
  content:"VOICE / EDITORIAL";
}

.service-item--setup .service-figure::before{
  content:"RELEASE / SIGNAL";
}

.service-figure span,
.service-figure i{
  position:absolute;
  border-color:rgba(64,54,48,.18)!important;
  transition:
    transform .75s var(--ease),
    opacity .75s var(--ease);
}

.service-figure--web span:nth-child(1){
  top:36px;
  right:11%;
  bottom:20px;
  left:4%;
  border:1px solid rgba(64,54,48,.17);
}

.service-figure--web span:nth-child(2){
  top:56px;
  right:1%;
  bottom:0;
  left:24%;
  border:1px solid rgba(64,54,48,.14);
}

.service-figure--web span:nth-child(3){
  top:23px;
  bottom:10px;
  left:43%;
  width:1px;
  border:0;
  background:rgba(64,54,48,.11);
}
.service-figure--web i{
  top:91px;
  left:43%;
  width:7px;
  height:7px;
  border:1px solid rgba(64,54,48,.33);
  border-radius:50%;
  background:var(--paper-warm);
  transform:translate(-50%,-50%);
}

.service-item--web:hover .service-figure--web span:nth-child(2){
  transform:translate(7px,-7px);
}

.service-figure--design span:nth-child(1){
  top:32px;
  left:28%;
  width:102px;
  height:102px;
  border:1px solid rgba(64,54,48,.17);
  border-radius:50%;
}

.service-figure--design span:nth-child(2){
  top:12px;
  bottom:10px;
  left:49%;
  width:1px;
  border:0;
  background:rgba(64,54,48,.12);
}

.service-figure--design span:nth-child(3){
  top:83px;
  right:2%;
  left:4%;
  height:1px;
  border:0;
  background:rgba(64,54,48,.12);
}

.service-figure--design i{
  top:83px;
  left:49%;
  width:8px;
  height:8px;
  border:1px solid rgba(64,54,48,.32);
  border-radius:50%;
  background:var(--paper-warm);
  transform:translate(-50%,-50%);
}

.service-item--design:hover .service-figure--design span:nth-child(1){
  transform:scale(1.08) rotate(7deg);
}

.service-figure--content span:nth-child(1),
.service-figure--content span:nth-child(2),
.service-figure--content span:nth-child(3){
  left:4%;
  height:1px;
  border:0;
  background:rgba(64,54,48,.16);
}

.service-figure--content span:nth-child(1){
  top:46px;
  width:72%;
}

.service-figure--content span:nth-child(2){
  top:83px;
  width:91%;
}

.service-figure--content span:nth-child(3){
  top:120px;
  width:58%;
}

.service-figure--content i{
  top:39px;
  right:4%;
  width:34px;
  height:88px;
  border:1px solid rgba(64,54,48,.13);
  background:transparent;
}

.service-item--content:hover .service-figure--content span:nth-child(2){
  transform:translateX(12px);
}

.service-figure--setup span:nth-child(1),
.service-figure--setup span:nth-child(2),
.service-figure--setup span:nth-child(3){
  border:1px solid rgba(64,54,48,.17);
  border-radius:50%;
}

.service-figure--setup span:nth-child(1){
  top:20px;
  left:30%;
  width:122px;
  height:122px;
}

.service-figure--setup span:nth-child(2){
  top:48px;
  left:calc(30% + 28px);
  width:66px;
  height:66px;
}

.service-figure--setup span:nth-child(3){
  top:72px;
  left:calc(30% + 52px);
  width:18px;
  height:18px;
}

.service-figure--setup i{
  top:81px;
  right:2%;
  left:3%;
  height:1px;
  border:0;
  background:rgba(64,54,48,.11);
}

.service-item--setup:hover .service-figure--setup span:nth-child(1){
  transform:scale(1.09);
}

.service-item__body{
  position:relative;
  z-index:2;
  padding-top:20px;
  border-top:1px solid rgba(64,54,48,.10);
}

.service-item__body h3{
  margin:0!important;
  font-size:clamp(1.45rem,1.55vw,1.8rem)!important;
  font-weight:300;
  line-height:1.35;
  letter-spacing:-.035em;
}

.service-item__body h3::after{
  display:block;
  width:30px;
  height:1px;
  margin-top:14px;
  content:"";
  background:rgba(64,54,48,.28);
}

.service-item__body p{
  margin:16px 0 0!important;
  color:var(--ink-soft);
  font-size:.90rem!important;
  line-height:1.88!important;
}

.service-item__scope{
  position:absolute!important;
  right:24px!important;
  bottom:24px!important;
  left:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  padding-top:12px!important;
  border-top:1px solid rgba(64,54,48,.09)!important;
}

.service-item__scope span{
  color:rgba(64,54,48,.36)!important;
  font-size:.50rem!important;
  letter-spacing:.16em!important;
}

.service-item__scope strong{
  color:rgba(64,54,48,.53)!important;
  font-size:.51rem!important;
  font-weight:500!important;
  letter-spacing:.12em!important;
  text-align:right;
}

.service-board__footer{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:42px;
  align-items:center;
  border-top:1px solid rgba(64,54,48,.10);
  color:rgba(64,54,48,.30);
  font-family:var(--sans);
  font-size:.49rem;
  letter-spacing:.18em;
}

.service-board__footer span{
  padding-left:24px;
}

/* ---------------------------------------------------------
   PROCESS / CINEMATIC HORIZONTAL STORY
--------------------------------------------------------- */

.section--process{
  position:relative;
  padding:56px 0 0!important;
  overflow:hidden;
  color:#f4eee6;
  background:
    linear-gradient(90deg,rgba(244,238,230,.035) 1px,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(221,197,170,.10),transparent 30%),
    #403630!important;
  background-size:12.5% 100%,auto,auto!important;
}

.section--process .section-heading__index,
.section--process .section-heading__row h2{
  color:#f4eee6;
}

.section--process .section-heading__row h2{
  color:rgba(244,238,230,.70);
}

.section--process .section-heading__line{
  background:rgba(244,238,230,.20);
}

.section--process .section-heading__note{
  color:rgba(244,238,230,.54);
}

.process-bg{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.process-bg__circle,
.process-bg__line,
.process-bg__word{
  position:absolute;
}

.process-bg__circle{
  border:1px solid rgba(244,238,230,.055);
  border-radius:50%;
}

.process-bg__circle--1{
  top:8%;
  right:-8%;
  width:38vw;
  aspect-ratio:1;
}

.process-bg__circle--2{
  bottom:-18%;
  left:22%;
  width:29vw;
  aspect-ratio:1;
}

.process-bg__line--1{
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(244,238,230,.035);
}

.process-bg__line--2{
  top:43%;
  right:0;
  left:0;
  height:1px;
  background:rgba(244,238,230,.035);
}

.process-bg__word{
  right:-.04em;
  bottom:-.10em;
  color:transparent;
  font-family:var(--display);
  font-size:clamp(9rem,18vw,22rem);
  line-height:.78;
  letter-spacing:-.08em;
  -webkit-text-stroke:1px rgba(244,238,230,.035);
  white-space:nowrap;
}

.process-story{
  position:relative;
  z-index:2;
}

.process-story__pin{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.process-story__meta{
  display:grid;
  grid-template-columns:auto minmax(180px,1fr) auto;
  align-items:center;
  gap:20px;
  margin-bottom:36px;
  color:rgba(244,238,230,.48);
  font-family:var(--sans);
  font-size:.54rem;
  letter-spacing:.18em;
}

.process-story__meta>div:first-child{
  display:flex;
  align-items:center;
  gap:16px;
}

.process-story__meta small{
  color:rgba(244,238,230,.28);
  font-size:.49rem;
}

.process-story__progress{
  position:relative;
  height:1px;
  background:rgba(244,238,230,.13);
}

.process-story__progress span{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:1px;
  background:rgba(244,238,230,.74);
}

.process-story__progress i{
  position:absolute;
  top:50%;
  left:0;
  width:7px;
  height:7px;
  border:1px solid rgba(244,238,230,.74);
  border-radius:50%;
  background:#403630;
  transform:translate(-50%,-50%);
}

.process-story__viewport{
  width:100%;
  overflow:hidden;
}

.process-story__track{
  display:flex;
  width:max-content;
  gap:clamp(44px,6vw,110px);
  padding-left:max(31px,calc((100vw - var(--container))/2));
  padding-right:18vw;
  will-change:transform;
}

.process-panel{
  position:relative;
  flex:0 0 min(74vw,1060px);
  min-height:510px;
  display:grid;
  grid-template-columns:minmax(320px,.9fr) minmax(380px,1.1fr);
  align-items:center;
  overflow:hidden;
  border-top:1px solid rgba(244,238,230,.18);
  border-bottom:1px solid rgba(244,238,230,.13);
  background:linear-gradient(120deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
  opacity:.56;
  transition:
    opacity .6s var(--ease),
    background .6s var(--ease);
}

.process-panel.is-active{
  opacity:1;
  background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
}

.process-panel__ghost{
  position:absolute;
  z-index:0;
  top:-.19em;
  right:.02em;
  color:rgba(244,238,230,.035);
  font-family:var(--display);
  font-size:clamp(12rem,18vw,20rem);
  line-height:.9;
  letter-spacing:-.10em;
  pointer-events:none;
}

.process-panel__visual{
  position:relative;
  z-index:2;
  height:100%;
  min-height:510px;
  border-right:1px solid rgba(244,238,230,.09);
}

.process-panel__visual::before{
  position:absolute;
  top:28px;
  left:28px;
  color:rgba(244,238,230,.28);
  font-family:var(--sans);
  font-size:.49rem;
  letter-spacing:.18em;
}

.process-panel__visual--hearing::before{
  content:"INPUT / SIGNAL";
}

.process-panel__visual--direction::before{
  content:"AXIS / DIRECTION";
}

.process-panel__visual--build::before{
  content:"FRAME / BUILD";
}

.process-panel__visual--launch::before{
  content:"OUTPUT / RELEASE";
}

.process-panel__visual span,
.process-panel__visual i{
  position:absolute;
  border-color:rgba(244,238,230,.18);
}

.process-panel__visual--hearing span{
  width:11px;
  height:11px;
  border:1px solid rgba(244,238,230,.25);
  border-radius:50%;
  background:#403630;
}

.process-panel__visual--hearing span:nth-child(1){
  top:34%;
  left:24%;
}

.process-panel__visual--hearing span:nth-child(2){
  top:51%;
  left:52%;
}

.process-panel__visual--hearing span:nth-child(3){
  top:27%;
  left:74%;
}

.process-panel__visual--hearing i{
  top:34%;
  left:24%;
  width:52%;
  height:1px;
  border:0;
  background:linear-gradient(
    90deg,
    rgba(244,238,230,.18),
    rgba(244,238,230,.04)
  );
  transform:rotate(18deg);
  transform-origin:left;
}

.process-panel__visual--direction span:nth-child(1){
  top:26%;
  left:22%;
  width:52%;
  height:1px;
  border:0;
  background:rgba(244,238,230,.16);
}

.process-panel__visual--direction span:nth-child(2){
  top:45%;
  left:22%;
  width:34%;
  height:1px;
  border:0;
  background:rgba(244,238,230,.16);
}

.process-panel__visual--direction span:nth-child(3){
  top:64%;
  left:22%;
  width:63%;
  height:1px;
  border:0;
  background:rgba(244,238,230,.16);
}

.process-panel__visual--direction i{
  top:20%;
  bottom:18%;
  left:66%;
  width:1px;
  border:0;
  background:rgba(244,238,230,.09);
}

.process-panel__visual--build span:nth-child(1){
  top:26%;
  left:16%;
  width:48%;
  height:30%;
  border:1px solid rgba(244,238,230,.16);
}

.process-panel__visual--build span:nth-child(2){
  top:36%;
  left:31%;
  width:48%;
  height:30%;
  border:1px solid rgba(244,238,230,.15);
}

.process-panel__visual--build span:nth-child(3){
  top:46%;
  left:46%;
  width:38%;
  height:26%;
  border:1px solid rgba(244,238,230,.13);
}

.process-panel__visual--build i{
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  border:0;
  background:rgba(244,238,230,.06);
}

.process-panel__visual--launch span:nth-child(1){
  top:20%;
  left:27%;
  width:170px;
  height:170px;
  border:1px solid rgba(244,238,230,.18);
  border-radius:50%;
}

.process-panel__visual--launch span:nth-child(2){
  top:28%;
  left:calc(27% + 38px);
  width:94px;
  height:94px;
  border:1px solid rgba(244,238,230,.18);
  border-radius:50%;
}

.process-panel__visual--launch span:nth-child(3){
  top:35%;
  left:calc(27% + 70px);
  width:30px;
  height:30px;
  border:1px solid rgba(244,238,230,.22);
  border-radius:50%;
}

.process-panel__visual--launch i{
  top:36%;
  right:9%;
  left:9%;
  height:1px;
  border:0;
  background:rgba(244,238,230,.09);
}

.process-panel__content{
  position:relative;
  z-index:2;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:52px clamp(34px,5vw,74px);
}

.process-panel__eyebrow{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:34px;
}

.process-panel__eyebrow span{
  color:rgba(244,238,230,.72);
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:1;
}

.process-panel__eyebrow small{
  color:rgba(244,238,230,.42);
  font-family:var(--sans);
  font-size:.57rem;
  letter-spacing:.15em;
}

.process-panel__content h3{
  margin:0;
  color:#f4eee6;
  font-size:clamp(2.35rem,3.6vw,4.35rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.055em;
}

.process-panel__content p{
  max-width:620px;
  margin:28px 0 0;
  color:rgba(244,238,230,.62);
  font-size:.98rem;
  line-height:2;
}

.process-panel__output{
  display:grid;
  gap:5px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid rgba(244,238,230,.12);
}

.process-panel__output span{
  color:rgba(244,238,230,.30);
  font-family:var(--sans);
  font-size:.50rem;
  letter-spacing:.18em;
}

.process-panel__output strong{
  color:rgba(244,238,230,.72);
  font-size:.82rem;
  font-weight:400;
}

/* ---------------------------------------------------------
   RESPONSIVE FINAL TUNING
--------------------------------------------------------- */

@media (max-width:1200px){

  .service-item,
  .service-grid>.service-item:nth-of-type(1),
  .service-grid>.service-item:nth-of-type(2),
  .service-grid>.service-item:nth-of-type(3),
  .service-grid>.service-item:nth-of-type(4){
    min-height:540px!important;
    padding-inline:20px!important;
  }

  .service-item__scope{
    right:20px!important;
    left:20px!important;
  }

  .process-panel{
    flex-basis:min(82vw,980px);
  }

}

@media (max-width:980px){

  .hero-studio-layer__index{
    left:10%;
    right:8%;
  }

  .hero-studio-layer__word{
    right:-.25em;
    font-size:7.2rem;
    opacity:.70;
  }

  .hero-studio-layer__disciplines{
    left:10%;
    right:8%;
  }

  .hero-studio-layer__caption{
    right:2%;
  }

  .sample-intro,
  .sample-intro__canvas{
    min-height:660px;
  }

  .sample-intro__cluster{
    top:5%;
    right:3%;
    bottom:7%;
    left:3%;
  }

  .sample-intro__frame--nagi{
    left:25%;
    width:56%;
  }

  .sample-intro__frame--lento{
    left:2%;
    width:34%;
  }

  .sample-intro__frame--tane{
    left:20%;
    width:39%;
  }

  .sample-intro__frame--rive{
    left:51%;
    width:44%;
  }

  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .service-item,
  .service-grid>.service-item:nth-of-type(1),
  .service-grid>.service-item:nth-of-type(2),
  .service-grid>.service-item:nth-of-type(3),
  .service-grid>.service-item:nth-of-type(4){
    min-height:520px!important;
    border-bottom:1px solid rgba(64,54,48,.10)!important;
    transform:none!important;
  }

  .service-grid>.service-item:nth-of-type(2),
  .service-grid>.service-item:nth-of-type(4){
    border-right:0!important;
  }

  .service-board__footer{
    grid-template-columns:repeat(2,1fr);
  }

  .section--process{
    padding-bottom:88px!important;
  }

  .process-story__pin{
    min-height:0;
    display:block;
    overflow:visible;
  }

  .process-story__meta{
    margin-bottom:28px;
  }

  .process-story__viewport{
    overflow:visible;
  }

  .process-story__track{
    display:grid;
    width:auto;
    gap:24px;
    padding:0 16px;
        transform:none!important;
  }

  .process-panel{
    width:auto;
    min-height:460px;
    grid-template-columns:.72fr 1.28fr;
    opacity:1;
  }

  .process-panel__visual{
    min-height:460px;
  }

  .process-bg__word{
    font-size:11rem;
  }
}

@media (max-width:640px){

  .hero-studio-layer__index{
    top:4%;
    right:7%;
    left:8%;
  }

  .hero-studio-layer__word{
    top:20%;
    right:-.36em;
    font-size:5.3rem;
  }

  .hero-studio-layer__disciplines{
    right:7%;
    bottom:4%;
    left:8%;
  }

  .hero-studio-layer__disciplines>div{
    min-height:61px;
    padding:10px 7px 9px 20px;
  }

  .hero-studio-layer__disciplines span{
    top:12px;
    left:6px;
    font-size:.70rem;
  }

  .hero-studio-layer__disciplines strong{
    font-size:.47rem;
  }

  .hero-studio-layer__disciplines small{
    display:none;
  }

  .hero-studio-layer__caption{
    display:none;
  }

  .sample-aside{
    display:block!important;
  }

  .sample-filter-group--plan{
    margin-top:28px!important;
  }

  .sample-intro{
    min-height:0;
  }

  .sample-intro__canvas{
    min-height:0;
    padding:12px 0 34px;
    overflow:visible;
    background-size:50% 100%,100% 25%,auto;
  }

  .sample-intro__cluster{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    min-height:0;
  }

  .sample-intro__frame,
  .sample-intro__frame--nagi,
  .sample-intro__frame--lento,
  .sample-intro__frame--tane,
  .sample-intro__frame--rive{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:auto;
    height:auto;
    transform:none!important;
  }

  .sample-intro__frame--nagi{
    grid-column:1/-1;
    aspect-ratio:16/9;
  }

  .sample-intro__frame--lento{
    grid-column:1;
    aspect-ratio:4/5;
    margin-top:10px;
  }

  .sample-intro__frame--tane{
    grid-column:2;
    aspect-ratio:4/5;
    margin-top:36px;
  }

  .sample-intro__frame--rive{
    grid-column:1/-1;
    width:86%;
    aspect-ratio:16/9;
    margin:-8px 0 0 auto;
  }

  .sample-intro__drawing{
    display:none;
  }

  .sample-intro__notation{
    position:relative;
    right:auto;
    bottom:auto;
    justify-items:start;
    margin-top:16px;
    text-align:left;
  }

  .plan-features{
    gap:7px!important;
  }

  .plan-features span{
    padding:8px 11px!important;
    font-size:.78rem!important;
  }

  .service-board__axis{
    grid-template-columns:auto 1fr;
    font-size:.48rem;
  }

  .service-board__axis span:last-child{
    display:none;
  }

  .service-grid{
    grid-template-columns:1fr!important;
  }

  .service-item,
  .service-grid>.service-item:nth-of-type(1),
  .service-grid>.service-item:nth-of-type(2),
  .service-grid>.service-item:nth-of-type(3),
  .service-grid>.service-item:nth-of-type(4){
    min-height:500px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(64,54,48,.10)!important;
    padding:24px 18px 24px!important;
  }

  .service-item__scope{
    right:18px!important;
    left:18px!important;
  }

  .service-board__footer{
    display:none;
  }

  .section--process{
    padding-top:40px!important;
    padding-bottom:64px!important;
  }

  .process-story__meta{
    grid-template-columns:auto 1fr;
    gap:14px;
    padding-inline:16px;
  }

  .process-story__meta>span:last-child{
    display:none;
  }

  .process-story__meta>div:first-child{
    display:grid;
    gap:3px;
  }

  .process-story__track{
    gap:14px;
    padding-inline:16px;
  }

  .process-panel{
    min-height:0;
    display:block;
    border:1px solid rgba(244,238,230,.11);
  }

  .process-panel__visual{
    min-height:230px;
    border-right:0;
    border-bottom:1px solid rgba(244,238,230,.08);
  }

  .process-panel__content{
    min-height:320px;
    padding:30px 22px;
  }

  .process-panel__content h3{
    font-size:2.25rem;
  }

  .process-panel__content p{
    margin-top:20px;
    font-size:.91rem;
  }

  .process-panel__eyebrow{
    margin-bottom:24px;
  }

  .process-panel__ghost{
    font-size:10rem;
  }

  .process-bg__word{
    font-size:7rem;
  }
}