/* INNESTO — Visual System V2
   Editorial architecture refinement. Loaded after styles.css. */

:root{
  --paper:#eee7dc;
  --paper-2:#e4dacb;
  --ink:#10110e;
  --oxide:#c44f2a;
  --oxide-deep:#9f3f24;
  --blue:#173d43;
  --sage:#6e7569;
  --line:rgba(16,17,14,.18);
  --line-light:rgba(255,255,255,.16);
  --header-h:72px;
  --pad:clamp(20px,3vw,54px);
  --section-y:clamp(104px,10vw,178px);
}

html,body{background:var(--paper)}
body{font-size:15px;letter-spacing:-.01em}

/* HEADER */
.site-header{
  height:var(--header-h);
  padding:0 var(--pad);
  grid-template-columns:1fr auto 1fr;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled,.site-header--solid{
  background:rgba(238,231,220,.92);
  border-bottom-color:rgba(16,17,14,.13);
  box-shadow:0 8px 30px rgba(27,24,18,.04);
}
.brand strong{font-size:20px;letter-spacing:-.045em}
.brand span{font-size:7px;letter-spacing:.16em;margin-top:5px;color:currentColor;opacity:.62}
.desktop-nav{gap:34px;font-size:8px;letter-spacing:.17em}
.header-cta{font-size:8px;letter-spacing:.13em;padding:12px 15px;gap:22px;background:rgba(238,231,220,.05)}

/* HERO */
.hero{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  min-height:100svh;
  padding-top:var(--header-h);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(16,17,14,.035) calc(50% - .5px), rgba(16,17,14,.035) calc(50% + .5px), transparent calc(50% + .5px)),
    var(--paper);
}
.hero-copy{
  min-width:0;
  padding:clamp(82px,10vh,120px) clamp(28px,4vw,72px) 42px var(--pad);
  gap:48px;
}
.hero-copy .micro{color:#55564f}
.hero-copy h1{
  max-width:8.15ch;
  font-size:clamp(70px,6.35vw,118px);
  line-height:.83;
  letter-spacing:-.067em;
  text-wrap:balance;
}
.hero-copy h1 em{color:var(--oxide)}
.hero-bottom{grid-template-columns:minmax(0,1fr);max-width:410px;gap:30px}
.hero-bottom>p{font-size:13px;line-height:1.65;max-width:39ch;color:#45453f}
.hero-bottom .arrow-link{min-width:0;width:min(100%,300px);font-size:8.5px;padding-bottom:10px}
.hero-image{
  height:calc(100svh - var(--header-h) - 20px);
  min-height:620px;
  margin:10px 18px 10px 0;
  border-radius:2px;
  background:#8d8579;
  box-shadow:0 18px 60px rgba(42,32,22,.08);
}
.hero-image img{filter:saturate(.86) contrast(1.02);transform-origin:center center}
.hero-image:after{background:linear-gradient(to bottom,rgba(8,9,7,.03) 35%,rgba(8,9,7,.42) 100%)}
.hero-image figcaption{left:20px;right:20px;bottom:18px;font-size:7.5px;letter-spacing:.14em}
.hero-cut{left:calc(46% - 2px);top:calc(var(--header-h) + 10px);bottom:10px;width:4px;background:var(--oxide)}

/* SHARED SECTION RHYTHM */
.statement,.projects,.method,.contact{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.statement{border-top:1px solid var(--line)}
.statement-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr);gap:clamp(56px,9vw,150px);margin-top:58px;align-items:end}
.statement h2,.section-heading h2,.material-copy h2,.method h2,.process-copy h2,.contact h2,.case-strategy h2,.before-after h2,.materials h2,.next-project h2{
  font-size:clamp(50px,5.75vw,102px);
  line-height:.89;
  letter-spacing:-.06em;
}
.statement-grid>p,.section-heading>p:last-child{font-size:13px;line-height:1.72;color:#57564f}

/* SECTION HOUSE — make the interactive part the hero of the section */
.section-house{
  min-height:auto;
  grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);
  padding:clamp(22px,2.2vw,38px);
  gap:clamp(20px,2.6vw,44px);
  background:#11120f;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.section-house-copy{
  padding:clamp(64px,7vw,112px) clamp(12px,2vw,34px) 46px clamp(12px,2vw,34px);
  display:flex;
  flex-direction:column;
  min-height:760px;
}
.section-house-copy h2{
  font-size:clamp(66px,6.5vw,112px);
  line-height:.86;
  letter-spacing:-.065em;
  margin:30px 0 30px;
  max-width:6ch;
}
.section-intro{font-size:13px;line-height:1.7;max-width:31ch;color:#a8a197}
.phase-controls{margin-top:auto;width:min(100%,430px);border-top-color:rgba(255,255,255,.2)}
.phase{grid-template-columns:42px 1fr auto;padding:16px 0;position:relative}
.phase:after{content:'↗';font:400 10px/1 var(--mono);opacity:0;transform:translate(-8px,8px);transition:.3s}
.phase:hover:after,.phase.is-active:after{opacity:1;transform:none}
.phase span{font-size:10px;letter-spacing:.11em}
.interaction-hint{position:static;margin-top:24px;font-size:7px;letter-spacing:.15em;color:#77736b}

.section-stage{
  min-height:760px;
  height:min(82svh,900px);
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px),
    radial-gradient(circle at 50% 42%,#38372f 0,#22231e 35%,#141511 68%,#10110e 100%);
  background-size:72px 72px,72px 72px,auto;
  isolation:isolate;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 28px 80px rgba(0,0,0,.22);
}
.section-stage:before{
  content:'SECTION / 01:50';
  position:absolute;
  z-index:4;
  left:22px;
  top:20px;
  font:400 7px/1 var(--mono);
  letter-spacing:.16em;
  color:#7f7a72;
  pointer-events:none;
}
.section-stage:after{
  content:'';
  position:absolute;
  z-index:1;
  inset:9% 8%;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none;
}
#section-canvas{z-index:2;filter:contrast(1.03) saturate(.95)}
.section-fallback{
  inset:14% 10% 16%;
  transform:rotateX(59deg) rotateZ(-34deg) scale(1.02);
  opacity:.82;
  filter:drop-shadow(0 30px 24px rgba(0,0,0,.32));
  transition:opacity .7s ease;
}
.section-fallback i{border-width:1px;box-shadow:0 0 18px currentColor}
.f-shell{inset:10% 5%;color:#aaa398;background:rgba(255,255,255,.018)}
.f-structure{inset:21% 17%;color:var(--oxide);transform:translate3d(42px,-30px,0)}
.f-services{inset:32% 29%;color:#5d929c;transform:translate3d(72px,-58px,0)}
.f-finish{inset:42% 39%;color:#e8ded0;transform:translate3d(-10px,-88px,0)}
.stage-axis{right:18px;top:17px;gap:4px}
.stage-axis span{width:23px;height:23px;font-size:7px;background:rgba(16,17,14,.45)}
.stage-caption{left:22px;right:22px;bottom:18px;font-size:7px;letter-spacing:.14em;color:#918b83}

/* PROJECTS */
.section-heading{grid-template-columns:.52fr 1.25fr .55fr;gap:clamp(30px,5vw,82px);margin-bottom:clamp(58px,7vw,105px)}
.section-heading>p:first-child{padding-top:8px}
.projects{background:var(--paper)}
.project figure{background:#aaa197}
.project--lead figure{aspect-ratio:1.84/1;max-height:780px}
.project-meta{margin-top:12px;padding-top:14px;grid-template-columns:1fr auto 30px;border-top-color:rgba(16,17,14,.26)}
.project-meta h3{font-size:16px;letter-spacing:-.025em;text-transform:uppercase}
.project-meta p{font-size:8px;letter-spacing:.07em;color:#6d685f}
.project-pair{gap:clamp(28px,5.5vw,90px);margin-top:clamp(86px,10vw,150px)}
.project-pair .project figure{aspect-ratio:4/3}
.project--offset{margin-top:clamp(100px,13vw,210px)}
.project figure img{filter:saturate(.84) contrast(1.015)}

/* MATERIAL + PROCESS */
.material-break{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);min-height:780px;background:#d7ccbb}
.material-break figure{min-height:780px}
.material-copy{padding:clamp(72px,7vw,118px) clamp(34px,5vw,88px)}
.material-copy h2{font-size:clamp(58px,5vw,88px);margin:48px 0 auto;max-width:7ch}
.material-copy>p:not(.micro){font-size:13px;color:#4f4b45}
.material-index{margin-top:12px}
.material-index span{font-size:7.5px;padding:14px 0}

.section-heading--method{grid-template-columns:.52fr 1.3fr .5fr}
.method-list{margin-top:45px}
.method-list li{grid-template-columns:70px minmax(220px,.8fr) 1fr;gap:clamp(20px,4vw,60px);padding:31px 0 34px}
.method-list h3{font-size:clamp(30px,3.1vw,50px)}
.method-list p{font-size:13px;color:#55534c}

.process-photo{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);min-height:780px;background:#153b40}
.process-photo figure{min-height:780px}
.process-copy{padding:clamp(72px,7vw,118px) clamp(34px,5vw,88px)}
.process-copy h2{font-size:clamp(54px,4.8vw,86px);max-width:8ch}
.process-copy>p:last-child{font-size:13px;color:#d0c8bd}

/* CONTACT */
.contact{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(70px,10vw,170px);border-top:1px solid var(--line)}
.contact-copy h2{max-width:7ch;margin:42px 0 40px}
.contact-copy>p:last-child{font-size:13px;color:#56534d}
.brief-form{background:rgba(255,255,255,.14);padding:0 24px 24px;border:1px solid rgba(16,17,14,.13);border-top:2px solid var(--ink)}
.brief-form label{padding-top:23px;padding-bottom:23px}
.brief-form label span{font-size:7.5px}
.brief-form input,.brief-form select,.brief-form textarea{font-size:15px}
.brief-form button{margin-top:26px;padding:19px 18px;background:var(--ink);transition:background .25s,transform .25s}
.brief-form button:hover{background:var(--oxide);transform:translateY(-1px)}

/* FOOTER */
.site-footer{padding-top:48px;background:#10110e}
.footer-brand{font-size:clamp(88px,15.5vw,270px);letter-spacing:-.07em;padding-bottom:32px}
.footer-grid{padding:30px 0 58px}
.footer-grid p{font-size:11px;color:#c1bbb1}

/* CASE STUDY */
.case-page{padding-top:var(--header-h)}
.case-hero{min-height:560px;grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);padding-top:clamp(76px,8vw,120px);padding-bottom:70px;gap:clamp(60px,9vw,150px)}
.case-hero h1{font-size:clamp(92px,10.5vw,180px);line-height:.72;letter-spacing:-.07em;margin-top:30px}
.case-intro>p:last-child{font-size:14px;color:#535149;max-width:46ch}
.case-hero-image{height:min(68vw,820px);max-height:820px;min-height:560px;margin:0 var(--pad);overflow:hidden}
.case-hero-image img{filter:saturate(.84) contrast(1.02)}
.before-after{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.ba-head{grid-template-columns:.45fr 1.2fr .55fr;gap:clamp(30px,5vw,80px);margin-bottom:68px}
.ba-head>p:last-child{font-size:13px;color:#5d5952}
.compare{max-height:760px;aspect-ratio:1.75/1;background:#8f8b83}
.compare-label{font-size:7px;letter-spacing:.14em}
.compare-line i{width:42px;height:42px}
.case-strategy{grid-template-columns:1.2fr .65fr;gap:clamp(70px,12vw,190px);padding-top:100px;padding-bottom:140px;border-bottom:1px solid var(--line)}
.case-strategy>p{font-size:14px;color:#55534c}
.materials{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.materials li{grid-template-columns:70px 1fr .75fr;padding:27px 0}
.materials li h3{font-size:clamp(26px,2.6vw,44px)}
.case-detail-grid{gap:12px;background:var(--paper);padding:12px}
.case-detail-grid figure{height:62vw;max-height:780px;min-height:560px}
.next-project{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.next-project h2{max-width:8ch}

/* MOBILE */
@media(max-width:900px){
  :root{--header-h:64px;--pad:18px;--section-y:92px}
  .site-header{padding:0 18px}.brand strong{font-size:18px}
  .hero{grid-template-columns:minmax(0,1fr);background:var(--paper)}
  .hero-copy{min-height:570px;padding:64px 18px 30px;gap:32px}
  .hero-copy h1{font-size:clamp(50px,13.7vw,66px);max-width:8.4ch;line-height:.84;letter-spacing:-.064em}
  .hero-bottom{gap:22px;max-width:100%}.hero-bottom>p{font-size:12.5px}.hero-bottom .arrow-link{width:100%;max-width:none}
  .hero-image{height:62svh;min-height:470px;margin:0 12px 12px;border-radius:0}
  .hero-cut{left:12px;right:auto;top:auto;bottom:12px;height:62svh;width:3px}
  .statement{padding-left:18px;padding-right:18px}.statement-grid{grid-template-columns:minmax(0,1fr);gap:34px;margin-top:40px}
  .statement h2,.section-heading h2,.material-copy h2,.method h2,.process-copy h2,.contact h2,.case-strategy h2,.before-after h2,.materials h2,.next-project h2{font-size:clamp(42px,11.7vw,58px);line-height:.9}
  .section-house{grid-template-columns:minmax(0,1fr);padding:0;gap:0}
  .section-house-copy{min-height:auto;padding:74px 18px 46px}.section-house-copy h2{font-size:clamp(56px,14vw,72px);max-width:7ch;margin-bottom:26px}.phase-controls{margin-top:48px;width:100%}.interaction-hint{margin-top:20px}
  .section-stage{height:64svh;min-height:500px;margin:0 12px 12px;background-size:48px 48px,48px 48px,auto}.section-stage:after{inset:8% 6%}.section-fallback{inset:16% 6% 18%;transform:rotateX(58deg) rotateZ(-34deg) scale(.9)}
  .projects,.method,.contact{padding-left:18px;padding-right:18px}.section-heading,.section-heading--method{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:56px}.section-heading>p:last-child{max-width:40ch}
  .project--lead figure{aspect-ratio:4/5}.project-meta{grid-template-columns:1fr 24px}.project-pair{grid-template-columns:minmax(0,1fr);gap:0;margin-top:78px}.project--offset{margin-top:64px}.project-pair .project figure{aspect-ratio:4/3}
  .material-break,.process-photo{grid-template-columns:minmax(0,1fr);min-height:auto}.material-break figure,.process-photo figure{min-height:520px;height:68svh}.material-copy,.process-copy{padding:72px 18px 82px}.material-copy h2,.process-copy h2{font-size:clamp(48px,12vw,62px);max-width:8ch;margin:40px 0 68px}
  .method-list li{grid-template-columns:42px 1fr;gap:18px}.method-list p{grid-column:2}.method-list h3{font-size:34px}
  .contact{grid-template-columns:minmax(0,1fr);gap:58px}.brief-form{padding:0 16px 18px}.brief-form label,.brief-form label:nth-child(odd),.brief-form label:nth-child(even){padding:20px 0}.brief-form button{min-height:56px}
  .footer-brand{font-size:24vw}.footer-grid{grid-template-columns:1fr;gap:20px}
  .case-hero{grid-template-columns:minmax(0,1fr);padding:76px 18px 48px;gap:44px}.case-hero h1{font-size:24vw;margin:30px 0 0}.case-hero-image{height:66svh;min-height:500px;margin:0 12px}.before-after{padding-left:18px;padding-right:18px}.ba-head{grid-template-columns:minmax(0,1fr);gap:24px}.compare{aspect-ratio:4/5;max-height:none}.case-strategy{grid-template-columns:minmax(0,1fr);padding:76px 18px 100px;gap:36px}.materials{padding-left:18px;padding-right:18px}.materials li{grid-template-columns:42px 1fr}.materials li p{grid-column:2}.case-detail-grid{grid-template-columns:minmax(0,1fr);padding:8px}.case-detail-grid figure{height:68svh;min-height:520px}.next-project{padding-left:18px;padding-right:18px}
}

@media(max-width:430px){
  .hero-copy{min-height:540px}.hero-copy h1{font-size:clamp(47px,13vw,56px)}
  .section-heading h2{font-size:clamp(39px,11vw,48px)}
  .section-stage{min-height:470px}.section-stage:before{left:16px;top:16px}.stage-caption{left:16px;right:16px}
  .material-break figure,.process-photo figure{min-height:480px}
  .footer-brand{font-size:23.5vw}
}

@media(min-width:1500px){
  .hero-copy h1{font-size:clamp(82px,6vw,120px)}
  .section-house{grid-template-columns:minmax(410px,.7fr) minmax(0,1.3fr)}
  .section-stage{max-height:920px}
}