﻿/* NIVI — warm architectural editorial */
:root{--paper:#f6f2ea;--ink:#242622;--muted:#66675f;--olive:#8a7046;--line:#dcd5c8;--serif:'Cormorant Garamond',Georgia,serif}
body{font-size:14px;line-height:1.8}h1,h2{letter-spacing:-2.5px}h2{font-size:clamp(48px,5.5vw,84px);line-height:1.02}em{font-style:italic}p{line-height:1.9}.section{padding:120px 7vw}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#826a43}.eyebrow:before{width:36px}.eyebrow.light{color:#dfc99f}
header{height:104px;padding:0 4.5vw;background:var(--paper);border-bottom:0}header nav{gap:30px}header nav a{font-size:11px}.brand>span{font-size:30px;letter-spacing:8px}.brand small{font-size:6px;letter-spacing:1.8px}.header-cta{background:var(--ink);color:#f6f2ea;border:1px solid var(--ink);padding:13px 20px;font-size:10px}.header-cta:hover{background:#45463c}
.hero{margin:0 22px;height:calc(100svh - 126px);min-height:650px;max-height:950px}.hero-image{object-position:65% 55%;filter:saturate(.72)}.hero-shade{background:linear-gradient(90deg,#121712d9 0%,#171c1578 48%,#171c1514 100%),linear-gradient(0deg,#121712a8,transparent 40%)}.hero-content{padding:115px 6vw 130px;max-width:1100px}.hero h1{font-size:clamp(66px,7.2vw,112px);line-height:.98;letter-spacing:-3.5px;margin:0 0 30px}.hero h1 em{color:#e4d1ac;display:inline-block}.hero-content>p:not(.eyebrow){font-size:13px;color:#e7e4da;max-width:460px}.hero .eyebrow{margin-bottom:38px}.button{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;padding:19px 25px;gap:38px}.cream{background:#e9ddc6}.cream:hover{background:#f5ead5}.dark{background:#242622}.hero-bottom{left:6vw;right:6vw;bottom:28px;font-size:8px;letter-spacing:2px}.hero-side{right:20px;letter-spacing:3px;color:#eee4d1}.principles{padding:30px 5vw;font-size:10px;letter-spacing:1.2px;text-transform:uppercase}.principles i{font-size:15px;color:#a68b5d}
.about{gap:11%;padding-top:140px;padding-bottom:140px}.about-visual>img{height:620px;filter:saturate(.65)}.image-caption{position:absolute;bottom:24px;left:24px;right:24px;background:#f6f2eaf2;padding:22px 25px}.image-caption small{color:#88704c}.image-caption>span{font-size:30px}.stamp{background:#e9ddc6;border-color:var(--paper);color:#78613e;top:-28px;right:-34px;width:112px;height:112px}.about-copy>p:not(.eyebrow){font-size:13px}.values{margin-top:38px;padding-top:28px}.values b{font-family:var(--serif);font-size:25px}.values small{font-size:10px}.text-link{font-size:10px;letter-spacing:.5px;border-color:#a58e67;padding-bottom:10px}
.expertise{background:#eae5db}.section-heading{margin-bottom:54px}.section-heading>p{font-size:12px}.service-grid{gap:18px}.service,.service+.service{border:1px solid #d2c8b7;background:#f6f2ea66;padding:30px 23px}.service:hover{background:#f8f5ee;box-shadow:0 16px 34px #3a30230a}.service h3{font-size:33px}.service p{font-size:11px}.service-art{height:165px;color:#867552;filter:sepia(.3)}.service-top>small{color:#8c7754}.service-bottom{border-color:#d2c8b7;font-size:9px;letter-spacing:.7px}.service:after{background:#a88b59}
.design-lab{background:#242622;color:var(--paper);border:0}.design-lab em{color:#cfb686}.design-lab .section-heading>p{color:#bdbdb1}.design-lab .eyebrow{color:#cfb686}.lab-layout{border:1px solid #58594c;background:#30322c;grid-template-columns:minmax(0,1fr) 330px}.model-viewport{background:radial-gradient(ellipse at 50% 35%,#f4f1e6,#d9dacd)}.model-panel{border-color:#58594c;padding:34px 27px}.model-panel>p:not(.eyebrow){color:#bcbdaf}.model-panel h3{font-size:37px}.model-stages button{border-color:#5c5d50;color:#eeede3}.model-stages button.active{background:#4a4c3e;border-color:#b6a67f}.model-stages button:hover{background:#414337}.model-stages small,.model-stages button>span,.palette-control small,.model-range output{color:#c8c6b5}.model-panel .text-link{color:#e1c99c}.model-toolbar{background:#e8e5d9;border-color:#c5c1b3;color:#242622}.model-toolbar button{border-color:#b8b4a6}.swatch{border-color:#30322c}.swatch.active{outline-color:#d8bf8f}.model-caption{color:#32372c}.model-heading{color:#59614c}.model-panel input{accent-color:#c7b084}
.projects{background:#f6f2ea}.project-grid{gap:55px 45px}.project-image img{height:480px;filter:saturate(.7);transition:transform .8s,filter .8s}.project:nth-child(even){padding-top:95px}.project:nth-child(even) img{height:380px}.project:hover img{filter:saturate(1);transform:scale(1.035)}.project-caption h3{font-size:32px}.project-image>small{background:#f6f2eae8;padding:9px 13px;letter-spacing:1.5px}.project-arrow{background:#f6f2ea;width:44px;height:44px}.filters button{border-color:#d6cdbd;padding:10px 17px}.portfolio-note{color:#707064;max-width:610px}.process{background:#ded7c9;color:#242622}.process em{color:#80663c}.process .eyebrow.light{color:#80663c}.process .section-heading>p{color:#66675f}.steps{gap:30px}.steps article{border-color:#a99e87;padding-right:12px}.steps article:before{background:#8b7045}.steps article>span{color:#80663c}.steps h3{font-size:38px}.steps p{color:#66675f;font-size:12px}
.planner{gap:12%}.planner-card{background:#eee8dd;border-color:#d3c9b7;padding:38px;box-shadow:14px 14px 0 #e8e1d4}.planner-card input:not([type=range]),.planner-card select{background:#f8f5ef;border-color:#d3c9b7;padding:13px}.estimate output{font-size:48px}.material-story{height:570px;margin:0 22px}.material-story>img{filter:saturate(.6)}.material-story:after{background:#171c17a8}.material-story h2{font-size:clamp(64px,7vw,104px)}.material-story em{color:#e3cca3}.faq{gap:14%}.faq summary{font-size:13px;padding:26px 0}.faq details p{font-size:12px}.contact{background:#242622;align-items:start;gap:11%;position:relative}.contact h2{font-size:clamp(62px,6.4vw,96px)}.contact em{color:#d4ba8a}.contact>div>p:not(.eyebrow){color:#c1c0b4}.office-details{border-color:#56594a;max-width:410px;padding:25px 0}.office-details h3{color:#cfb686}.office-details address{font-size:14px;color:#f0eade}.office-details .office-landmark{color:#bdbdaf}.contact .text-link{color:#ddcaa6}.brief-form{border:1px solid #57594b;padding:36px;margin-top:12px;background:#ffffff03}.brief-form label{color:#dbd8ca;font-size:10px;letter-spacing:.4px}.brief-form input,.brief-form select,.brief-form textarea{border-color:#686c59;padding-bottom:15px;margin-top:8px}.brief-form .field-row{gap:25px;margin-bottom:28px}.brief-form .form-note{line-height:1.8;color:#bcbeb0}.brief-form .button{font-size:9px;gap:15px}
footer{padding:60px 7vw 24px;background:#eee8dd}.footer-top>p{font-size:32px;line-height:1.2}.footer-top>p em{color:#8a7046}.footer-bottom{margin-top:45px;border-color:#d0c6b4}.dialog-copy h2{font-size:52px}dialog{background:var(--paper)}
@media(min-width:1500px){.section{padding-left:max(7vw,calc((100vw - 1400px)/2));padding-right:max(7vw,calc((100vw - 1400px)/2))}}
@media(max-width:1100px){header nav{gap:18px}.hero-content{padding-top:105px}.hero h1{font-size:84px}.service-grid{gap:10px}.service,.service+.service{padding:24px 16px}.service h3{font-size:29px}.service-art{height:130px}.lab-layout{grid-template-columns:minmax(0,1fr) 290px}.model-panel{padding:26px 21px}.about-visual>img{height:540px}.brief-form{padding:26px}.project-caption{display:block}}
@media(max-width:800px){header{height:86px}.hero{margin:0 14px;min-height:630px;height:calc(100svh - 100px);max-height:820px}.hero h1{font-size:clamp(64px,9vw,84px)}.hero-content{padding:110px 6vw 120px}.hero-bottom p{display:none}header nav{top:86px}.section{padding:85px 6vw}.about{gap:7%}.about-visual>img{height:470px}.stamp{width:85px;height:85px;right:-16px}.service-grid{gap:15px}.service:nth-child(n){border:1px solid #d2c8b7}.service-art{height:165px}.lab-layout{grid-template-columns:1fr}.model-panel{border-left:0;border-top:1px solid #58594c}.project-grid{gap:40px 25px}.project-image img{height:360px}.project:nth-child(even) img{height:290px}.project:nth-child(even){padding-top:60px}.steps{gap:28px}.planner{gap:7%}.planner-card{padding:25px;box-shadow:8px 8px 0 #e8e1d4}.contact{gap:6%}.contact h2{font-size:60px}.brief-form .field-row{grid-template-columns:1fr;gap:22px}.footer-top>p{font-size:26px}}
@media(max-width:560px){h1,h2{letter-spacing:-1.5px}header{padding:0 5vw;gap:12px}.brand>span{font-size:25px}.brand small{font-size:5px}.brand img{width:32px;height:38px}.header-cta{font-size:8px;padding:11px 12px}.header-cta span{margin-left:8px}.hero{margin:0 10px;min-height:610px;height:calc(100svh - 96px);max-height:800px}.hero-content{padding:105px 6vw 110px}.hero h1{font-size:clamp(49px,11.8vw,68px);line-height:1.04;letter-spacing:-1.8px}.hero .eyebrow{font-size:7px;letter-spacing:1.6px;margin-bottom:30px}.hero-content>p:not(.eyebrow){font-size:11px;max-width:270px}.hero-content>p:not(.eyebrow) br{display:none}.hero-bottom{font-size:6px;letter-spacing:1px;bottom:23px;left:6vw;right:6vw}.hero-side{display:none}.hero-image{object-position:61% center}.hero-shade{background:linear-gradient(90deg,#121712d1,#171c1550),linear-gradient(0deg,#121712a8,transparent 45%)}.principles{font-size:8px;gap:12px;padding:24px 5vw;letter-spacing:.8px}.section{padding:72px 6vw}h2{font-size:53px}.about{grid-template-columns:1fr;gap:48px}.about-visual>img{height:470px}.image-caption{bottom:18px;left:18px;right:18px;padding:20px}.stamp{right:12px;top:-22px}.about-copy>p:not(.eyebrow){max-width:none}.values{grid-template-columns:1fr 1fr}.section-heading{margin-bottom:32px}.service-grid{gap:12px}.service,.service+.service{padding:22px 15px}.service h3{font-size:27px}.service-art{height:120px}.service p{font-size:10px;min-height:72px}.service-bottom{font-size:8px;margin-top:18px;gap:7px}.service-top>small{font-size:8px}.model-panel{padding:26px 20px}.model-panel h3{font-size:35px}.lab-layout{margin:0}.project-grid{grid-template-columns:1fr;gap:35px}.project:nth-child(even){padding-top:0}.project-image img,.project:nth-child(even) img{height:390px}.project-caption{display:flex;align-items:baseline;flex-wrap:wrap}.project-caption h3{font-size:30px}.project-caption>span{font-size:9px}.filters{gap:6px}.filters button{font-size:9px;padding:9px 13px}.steps{grid-template-columns:1fr 1fr;gap:32px 22px}.steps h3{font-size:33px;margin-top:25px}.steps p{font-size:11px}.planner{grid-template-columns:1fr;gap:35px}.planner-card{padding:25px}.material-story{margin:0 10px;height:460px;padding:0 20px}.material-story h2{font-size:66px}.faq{grid-template-columns:1fr;gap:25px}.contact{grid-template-columns:1fr;gap:35px}.contact h2{font-size:67px}.brief-form{margin-top:0;padding:25px 22px}.brief-form .field-row{grid-template-columns:1fr 1fr;gap:18px}.brief-form input,.brief-form select,.brief-form textarea{font-size:11px}.office-details{max-width:none}footer{padding:45px 6vw 24px}.footer-top{align-items:flex-start;flex-wrap:wrap;gap:25px}.footer-top>p{font-size:28px;width:100%;order:3}.footer-top>a:last-child{margin-left:auto}.footer-bottom{align-items:flex-start;gap:15px;margin-top:25px}.footer-bottom>span:nth-child(2){display:none}}
@media(max-width:360px){.header-cta{display:none}.hero h1{font-size:46px}.service,.service+.service{padding:18px 12px}.service h3{font-size:24px}.service-art{height:104px}.brief-form .field-row{grid-template-columns:1fr}.hero-bottom{letter-spacing:.5px}.hero-bottom a span{margin-left:10px}.values{gap:15px}}
@media(prefers-reduced-motion:reduce){.hero-content{animation:none}.project-image img{transition:none}}
@media print{.section{padding:25px}.contact,.design-lab,.process{background:white;color:black}.contact p,.contact address,.office-details address{color:black}.brief-form{display:none}.material-story{display:none}}
/* Keep narrow layouts within the viewport, including long field labels. */
.section>*{min-width:0}.planner-card,.brief-form{min-width:0}.eyebrow{overflow-wrap:anywhere}.eyebrow:before{flex-shrink:0}.model-heading>span{min-width:0}
@media(max-width:560px){.planner,.contact,.about,.faq{grid-template-columns:minmax(0,1fr)}.eyebrow{letter-spacing:1.7px;font-size:8px}.planner-card .field-row{gap:12px}.planner-card label>small{display:block;margin-left:0}.contact h2{font-size:clamp(52px,14vw,67px)}}
