
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ivory:#f5f1e9;--sand:#e7dfd2;--ink:#171714;--gold:#b69a69;--muted:#77786c;--white:#fff;--line:rgba(23,23,20,.16);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--max:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}img{display:block;max-width:100%;width:100%;object-fit:cover}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.container{width:min(var(--max),calc(100% - 64px));margin:auto}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";width:28px;height:1px;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500;line-height:.98;letter-spacing:-.035em}h1,h2{font-family:var(--serif)}h1{font-size:clamp(54px,8vw,112px);max-width:900px;margin:24px 0}h2{font-size:clamp(42px,6vw,78px);margin:18px 0 24px}h3{font-size:clamp(27px,3vw,38px);font-family:var(--serif)}.lead{font-size:clamp(16px,1.6vw,19px);max-width:600px;color:#55564e}.small{font-size:12px;color:var(--muted)}.section{padding:120px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:54px}.section-head>div{max-width:760px}.text-link{display:inline-flex;align-items:center;gap:18px;border-bottom:1px solid var(--gold);padding:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.text-link span{font-size:18px;transition:transform .25s}.text-link:hover span{transform:translateX(5px)}.btn{display:inline-flex;justify-content:center;align-items:center;gap:18px;padding:16px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--ivory);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}.btn:hover{background:transparent;color:var(--ink)}.btn-light{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}.btn-light:hover{background:transparent;color:var(--ivory)}.btn-outline{background:transparent;color:var(--ink)}.btn-outline:hover{background:var(--ink);color:var(--ivory)}.site-header{height:86px;position:fixed;z-index:1000;top:0;left:0;right:0;display:flex;align-items:center;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;color:var(--ivory)}.site-header.scrolled{background:rgba(245,241,233,.96);backdrop-filter:blur(18px);color:var(--ink);border-color:var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand-mark{width:34px;height:34px;border:1px solid currentColor;display:grid;place-items:center;font-family:var(--serif);font-size:24px;line-height:1}.brand-name{font-size:12px;font-weight:700;letter-spacing:.19em;line-height:1.2}.brand-name small{display:block;font-size:8px;letter-spacing:.25em;font-weight:500;margin-top:5px}.nav{display:flex;align-items:center;gap:clamp(13px,2vw,28px)}.nav a{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:relative;white-space:nowrap}.nav a:not(.btn):after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--gold);transition:width .25s}.nav a:hover:after,.nav a.active:after{width:100%}.header-cta{padding:13px 15px;font-size:9px}.menu-toggle{display:none;background:none;border:0;color:inherit;padding:10px;cursor:pointer}.menu-toggle span{display:block;width:24px;height:1px;background:currentColor;margin:6px}.hero{min-height:780px;height:100svh;max-height:1050px;position:relative;display:flex;align-items:end;color:#fff;background:#333;overflow:hidden}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroZoom 16s ease-out both}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,13,.64),rgba(15,15,13,.1) 80%),linear-gradient(0deg,rgba(15,15,13,.48),transparent 55%)}.hero-content{position:relative;z-index:1;padding:160px 0 90px;width:100%}.hero .eyebrow{color:#eee}.hero h1{max-width:850px}.hero p{max-width:530px;color:rgba(255,255,255,.82);margin-bottom:30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-bottom{position:absolute;z-index:2;bottom:35px;right:32px;display:flex;gap:25px;align-items:center;font-size:9px;letter-spacing:.17em;text-transform:uppercase}.scroll-line{width:54px;height:1px;background:rgba(255,255,255,.65)}.intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%;align-items:center}.intro-image{height:620px;position:relative}.intro-image img{height:100%}.image-caption{position:absolute;bottom:20px;left:20px;background:var(--ivory);padding:12px 16px;font-size:9px;letter-spacing:.13em;text-transform:uppercase}.intro-copy{padding:30px 0}.intro-copy h2{max-width:600px}.intro-copy .lead{margin-bottom:30px}.project-grid{display:grid;grid-template-columns:1fr .82fr;gap:60px 26px;align-items:start}.project-card:nth-child(even){margin-top:110px}.project-image{overflow:hidden;position:relative;background:var(--sand)}.project-image img{height:clamp(300px,44vw,610px);transition:transform .8s cubic-bezier(.2,.65,.3,1)}.project-card:nth-child(even) .project-image img{height:clamp(270px,34vw,470px)}.project-card:hover .project-image img{transform:scale(1.045)}.project-meta{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.project-meta h3{margin:0;font-size:30px}.project-meta span{font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;padding-top:8px}.services-list{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:70px 1fr 1fr 40px;gap:20px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .3s}.service-row:hover{padding-left:12px}.service-number{font-family:var(--serif);font-size:25px;color:var(--gold)}.service-row h3{margin:0}.service-row p{margin:0;color:var(--muted);font-size:13px;max-width:400px}.service-arrow{font-size:24px;text-align:right}.statement{min-height:640px;display:flex;align-items:center;color:white;position:relative;background:#444;overflow:hidden}.statement img{position:absolute;inset:0;height:100%;filter:brightness(.55)}.statement .container{position:relative;z-index:1}.statement h2{max-width:880px;font-size:clamp(48px,7vw,92px)}.statement .eyebrow{color:#eee}.statement p{max-width:500px;color:#eee}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:55px}.process-step{border-top:1px solid var(--gold);padding-top:22px}.process-step .num{font-family:var(--serif);font-size:36px;color:var(--gold)}.process-step h3{font-size:29px;margin:15px 0}.process-step p{font-size:13px;color:var(--muted)}.feature-band{background:var(--sand);padding:80px 0}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.feature-grid img{height:500px}.feature-list{list-style:none;margin:30px 0 0;padding:0}.feature-list li{padding:13px 0;border-bottom:1px solid rgba(23,23,20,.18);font-size:13px}.feature-list li:before{content:"↗";color:var(--gold);margin-right:15px}.cta-band{padding:100px 0;background:var(--ink);color:var(--ivory)}.cta-grid{display:flex;align-items:end;justify-content:space-between;gap:35px}.cta-grid h2{max-width:790px;margin-bottom:0}.cta-grid p{max-width:400px;color:#c7c3b8}.site-footer{background:#171714;color:var(--ivory);padding:75px 0 25px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px}.footer-intro p{max-width:300px;color:#aaa99e;font-size:13px;margin-top:24px}.footer-col h4{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}.footer-col a,.footer-col p{display:block;font-size:12px;color:#d4d1c8;margin:0 0 12px}.footer-col a:hover{color:var(--gold)}.footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#a9a69c;font-size:10px}.page-hero{padding:190px 0 80px;background:var(--sand)}.page-hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end}.page-hero h1{font-size:clamp(55px,7vw,92px);margin:22px 0}.page-hero p{max-width:530px;color:#626259}.page-hero-image{height:400px;overflow:hidden}.page-hero-image img{height:100%}.content-split{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.content-split img{height:560px}.content-split .copy{max-width:560px}.content-split .copy p{color:#66665d}.content-split.reverse .image-side{order:2}.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:65px 0;border-bottom:1px solid var(--line)}.service-detail:nth-child(even) .service-detail-image{order:2}.service-detail-image{height:470px;overflow:hidden}.service-detail-image img{height:100%;transition:transform .6s}.service-detail:hover img{transform:scale(1.03)}.service-detail p{color:#626259}.service-detail .eyebrow{margin-bottom:18px}.kitchen-types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kitchen-type{background:var(--sand)}.kitchen-type img{height:230px}.kitchen-type div{padding:17px}.kitchen-type h3{font-size:25px;margin:0 0 8px}.kitchen-type p{font-size:12px;color:#66665d;margin:0}.form-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:9%}.contact-info h3{font-size:30px}.contact-info a{display:block;margin:12px 0;color:#57574e}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}.field label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}.field input,.field select,.field textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;outline:none;color:var(--ink)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}.field textarea{min-height:110px;resize:vertical}.form-note{grid-column:1/-1;color:var(--muted);font-size:12px}.form-message{grid-column:1/-1;padding:15px;background:var(--sand);display:none}.form-message.show{display:block}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:35px}.filter-btn{border:1px solid var(--line);background:transparent;padding:10px 15px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.filter-btn.active,.filter-btn:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px}.portfolio-card[hidden]{display:none}.portfolio-card button{padding:0;border:0;background:none;text-align:left;width:100%;cursor:pointer;color:inherit}.portfolio-card img{height:clamp(280px,42vw,570px);transition:transform .6s}.portfolio-card .project-image{overflow:hidden}.portfolio-card button:hover img{transform:scale(1.04)}.lightbox{position:fixed;inset:0;background:rgba(12,12,11,.94);z-index:2000;display:none;align-items:center;justify-content:center;padding:30px}.lightbox.open{display:flex}.lightbox img{max-width:min(1100px,90vw);max-height:82vh;object-fit:contain}.lightbox-close{position:absolute;right:25px;top:20px;border:1px solid #aaa;background:none;color:white;font-size:28px;width:48px;height:48px;cursor:pointer}.faq-list{max-width:900px;margin:40px auto 0;border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-question{width:100%;background:none;border:0;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:24px 0;font-family:var(--serif);font-size:26px;cursor:pointer;color:var(--ink)}.faq-answer{display:none;max-width:700px;padding:0 0 22px;color:var(--muted);font-size:14px}.faq-item.open .faq-answer{display:block}.faq-question span{font-family:var(--sans);font-size:20px;color:var(--gold)}.floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:900;background:#263d31;color:white;border-radius:50px;padding:14px 18px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 30px #0002}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-delay{transition-delay:.15s}.not-found{min-height:70vh;display:grid;place-items:center;text-align:center;padding:150px 20px}@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}@media(max-width:1050px){.container{width:min(var(--max),calc(100% - 42px))}.nav{gap:13px}.nav a{font-size:9px}.header-cta{display:none}.section{padding:90px 0}.footer-grid{grid-template-columns:1.2fr 1fr 1fr;}.footer-intro{grid-column:1/-1}.kitchen-types{grid-template-columns:repeat(2,1fr)}}@media(max-width:780px){.container{width:calc(100% - 38px)}.site-header{height:72px}.menu-toggle{display:block;z-index:3}.nav{position:fixed;inset:0;background:var(--ivory);color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:80px 10vw;gap:20px;transform:translateX(100%);transition:transform .35s ease}.nav.open{transform:translateX(0)}.nav a{font-family:var(--serif);font-size:clamp(30px,8vw,48px);font-weight:500;letter-spacing:-.02em;text-transform:none}.nav a:after{display:none}.nav .header-cta{display:inline-flex;font-family:var(--sans);font-size:10px;padding:14px 18px;margin-top:10px}.hero{min-height:740px;height:92svh}.hero-content{padding:130px 0 105px}.hero h1{font-size:clamp(52px,14vw,82px)}.hero-bottom{right:20px;bottom:22px}.section-head{display:block;margin-bottom:35px}.section-head .text-link{margin-top:10px}.intro-grid,.feature-grid,.content-split,.page-hero .container,.form-layout{grid-template-columns:1fr;gap:35px}.intro-image{height:440px;order:2}.intro-copy{padding:0}.project-grid{gap:38px 16px}.project-image img{height:350px}.project-card:nth-child(even){margin-top:65px}.project-card:nth-child(even) .project-image img{height:290px}.project-meta{display:block}.project-meta h3{font-size:26px}.project-meta span{display:block}.service-row{grid-template-columns:35px 1fr 24px;gap:12px;padding:22px 0}.service-row p{grid-column:2;grid-row:2}.service-arrow{grid-column:3;grid-row:1/3}.process-grid{grid-template-columns:1fr 1fr;gap:28px 18px}.statement{min-height:560px}.statement h2{font-size:clamp(46px,12vw,70px)}.cta-grid{display:block}.cta-grid .btn{margin-top:25px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-intro{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}.page-hero{padding:145px 0 45px}.page-hero .container{gap:25px}.page-hero-image{height:300px}.content-split img{height:420px}.content-split.reverse .image-side{order:0}.service-detail{grid-template-columns:1fr;gap:25px;padding:45px 0}.service-detail:nth-child(even) .service-detail-image{order:0}.service-detail-image{height:330px}.kitchen-types{gap:10px}.kitchen-type img{height:170px}.kitchen-type div{padding:12px}.kitchen-type h3{font-size:23px}.portfolio-grid{gap:30px 14px}.portfolio-card img{height:300px}.contact-form{grid-template-columns:1fr}.field.full,.form-note,.form-message{grid-column:1}.floating-whatsapp{right:12px;bottom:12px}.section{padding:75px 0}}@media(max-width:420px){.container{width:calc(100% - 30px)}.brand-name{font-size:10px}.brand-mark{width:30px;height:30px}.project-grid{grid-template-columns:1fr}.project-card:nth-child(even){margin-top:0}.project-card:nth-child(even) .project-image img,.project-image img{height:350px}.process-grid{grid-template-columns:1fr}.kitchen-types{grid-template-columns:1fr 1fr}.kitchen-type img{height:140px}.portfolio-grid{grid-template-columns:1fr}.portfolio-card img{height:330px}.hero-actions .btn{width:100%}.footer-grid{grid-template-columns:1fr 1fr}.footer-intro{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}


/* Interior Boys brand refresh and responsive refinements */
.site-header{z-index:1000;background:rgba(245,241,233,.97);backdrop-filter:blur(18px);color:var(--ink);box-shadow:0 6px 25px rgba(23,23,20,.05)}
.site-header.scrolled{background:rgba(245,241,233,.98)}
.header-inner{min-height:92px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;max-width:280px}
.brand-mark{display:none!important}
.brand-logo{width:clamp(150px,17vw,235px);height:auto;object-fit:contain;max-height:68px;filter:brightness(0) saturate(100%) sepia(20%) hue-rotate(5deg) saturate(500%)}
.brand-name{color:var(--ink);font-size:15px;letter-spacing:.14em;line-height:1.4}
.brand-name small{color:#82765e;font-size:9px;letter-spacing:.2em}
.nav{gap:clamp(10px,1.25vw,22px)}
.nav>a{white-space:nowrap}
.nav>a:not(.btn){font-size:10px;letter-spacing:.07em}
.header-cta{font-size:10px!important;padding:15px 17px!important}
.menu-toggle{display:none;position:relative;z-index:1100;width:48px;height:48px;border:1px solid var(--line);background:var(--ivory);color:var(--ink);border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer}
.menu-toggle span{display:block;width:19px;height:2px;background:currentColor;transition:transform .25s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.hero{min-height:min(850px,calc(100svh - 90px));position:relative;overflow:hidden;background:#292721}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform 8s}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,13,.72),rgba(15,15,13,.28) 58%,rgba(15,15,13,.06)),linear-gradient(0deg,rgba(15,15,13,.38),transparent 40%);pointer-events:none}
.hero-content,.hero-bottom,.hero-controls{z-index:2}
.hero-content{position:relative;padding-top:clamp(90px,13vh,170px);padding-bottom:150px;color:#fff}
.hero .eyebrow,.hero .lead{color:rgba(255,255,255,.84)}
.hero h1{max-width:850px;text-wrap:balance}
.hero-slide{display:none;animation:heroIn .7s ease both}
.hero-slide.active{display:block}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-controls{position:absolute;right:max(32px,calc((100vw - var(--max))/2));bottom:55px;display:flex;align-items:center;gap:14px;color:white}
.hero-controls button{width:42px;height:42px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:transparent;color:white;font-size:20px;cursor:pointer}
.hero-dots{display:flex;gap:7px}.hero-dots button{width:8px;height:8px;padding:0;border:0;background:rgba(255,255,255,.45)}.hero-dots button.active{background:#fff;transform:scale(1.25)}
.keyword-strip{padding:25px 0;background:#201f1a;color:#f5f1e9}
.keyword-strip .container{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.keyword-strip strong{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-right:10px;color:#d4bd8c}
.keyword-chip{border:1px solid rgba(245,241,233,.22);border-radius:100px;padding:8px 13px;font-size:11px;color:#f5f1e9;transition:.25s}
.keyword-chip:hover{background:var(--gold);color:#171714}
.testimonial-grid,.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:42px}
.testimonial-card{padding:32px;background:#fffdf8;border:1px solid var(--line);display:flex;flex-direction:column;min-height:280px}
.stars{color:#ad8e51;letter-spacing:.2em;margin-bottom:20px}
.testimonial-card blockquote{font-family:var(--serif);font-size:25px;line-height:1.25;margin:0 0 28px}
.testimonial-card .reviewer{margin-top:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.testimonial-card .reviewer small{display:block;font-weight:400;letter-spacing:.03em;color:var(--muted);margin-top:4px}
.faq-list{max-width:900px;margin-top:35px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;display:flex;justify-content:space-between;gap:24px;text-align:left;border:0;background:transparent;padding:24px 0;font-size:16px;font-weight:600;cursor:pointer;color:var(--ink)}
.faq-question span{font-size:24px;color:var(--gold);transition:transform .2s}
.faq-question[aria-expanded="true"] span{transform:rotate(45deg)}
.faq-answer{display:none;padding:0 50px 24px 0;color:var(--muted);max-width:760px}
.faq-item.open .faq-answer{display:block;animation:heroIn .3s ease}
.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.social-links a,.contact-socials a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 13px;font-size:11px;transition:.25s}
.social-links a:hover,.contact-socials a:hover{background:var(--gold);border-color:var(--gold);color:#171714}
.contact-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.contact-socials svg{width:17px;height:17px}
.founder-panel{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;align-items:center;gap:clamp(30px,7vw,100px);background:#e9e0d2;padding:clamp(28px,5vw,70px);margin-top:40px}
.founder-photo{height:520px;max-height:70vh;object-fit:contain;object-position:center bottom;background:linear-gradient(140deg,#d7cbb8,#f4eee5)}
.founder-panel h2{font-size:clamp(40px,5vw,68px)}
.blog-card{background:#fffdf8;border:1px solid var(--line);overflow:hidden}
.blog-card img{height:245px;transition:transform .6s}
.blog-card:hover img{transform:scale(1.045)}
.blog-card .blog-copy{padding:25px}
.blog-card .eyebrow{font-size:9px}
.blog-card h3{font-size:30px;line-height:1.05;margin:17px 0}
.blog-card p{color:var(--muted);font-size:13px}
.blog-card .text-link{margin-top:5px}
.floating-actions{position:fixed;right:18px;bottom:22px;z-index:900;display:flex;flex-direction:column;gap:10px}
.floating-actions a{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#171714;color:white;box-shadow:0 8px 25px #0002;font-size:20px}
.floating-actions a.whatsapp{background:#218c54}
.floating-actions svg{width:23px;height:23px;fill:currentColor}
.cta-band .cta-grid{align-items:center}
.cta-band .btn-light{margin-top:10px}
.site-footer{padding-bottom:20px}
.footer-grid{grid-template-columns:1.5fr .7fr 1fr 1.1fr}
.footer-col a{display:block;margin:7px 0}
.footer-bottom{flex-wrap:wrap;gap:12px}
.page-hero .page-hero-image img{min-height:360px}
.reveal{will-change:transform,opacity}
@media(max-width:1200px){
 .header-inner{min-height:82px}.brand-logo{width:170px}
 .menu-toggle{display:flex}
 .nav{display:none;position:fixed;inset:0 0 0 auto;width:min(390px,88vw);height:100dvh;overflow-y:auto;padding:105px 28px 35px;background:var(--ivory);box-shadow:-20px 0 60px #0002;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;z-index:1050}
 .nav.open{display:flex;animation:navIn .25s ease}
 .nav>a:not(.btn){font-size:13px;padding:17px 0;border-bottom:1px solid var(--line)}
 .nav .header-cta{margin-top:22px;text-align:center}
 @keyframes navIn{from{transform:translateX(30px);opacity:.5}to{transform:translateX(0);opacity:1}}
}
@media(max-width:760px){
 .container{width:calc(100% - 38px)}
 .header-inner{min-height:74px}.brand-logo{width:155px;max-height:52px}
 .hero{min-height:calc(88svh - 74px)}
 .hero-content{padding-top:95px;padding-bottom:155px}
 .hero h1{font-size:clamp(48px,13vw,74px)}
 .hero-controls{right:19px;bottom:64px;gap:8px}
 .hero-controls button{width:36px;height:36px}
 .hero-bottom{left:19px;right:19px;bottom:23px;font-size:9px}
 .section{padding:75px 0}
 .section-head{display:block;margin-bottom:32px}.section-head>.text-link{margin-top:20px}
 .testimonial-grid,.blog-grid{grid-template-columns:1fr;gap:15px}
 .testimonial-card{min-height:unset;padding:25px}
 .founder-panel{grid-template-columns:1fr;gap:25px}
 .founder-photo{height:390px;max-height:none;object-position:center 20%}
 .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
 .footer-intro{grid-column:1/-1}
 .cta-grid{grid-template-columns:1fr!important;gap:20px}
 .keyword-strip .container{gap:8px}
 .keyword-chip{font-size:10px;padding:7px 10px}
 .page-hero .container{gap:30px}
 .page-hero-image img{min-height:260px!important}
 .service-detail{grid-template-columns:1fr!important;gap:22px}
 .service-detail-image img{height:260px!important}
 .process-grid{grid-template-columns:1fr 1fr!important}
 .form-layout{grid-template-columns:1fr!important}
 .portfolio-grid{grid-template-columns:1fr!important}
}
@media(max-width:420px){
 .container{width:calc(100% - 30px)}
 .brand-logo{width:140px}
 .footer-grid{grid-template-columns:1fr}
 .footer-intro{grid-column:auto}
 .process-grid{grid-template-columns:1fr!important}
 .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
 .hero-actions .btn{font-size:10px;padding:13px 15px}
}


/* =========================================================
   RESPONSIVE REFINEMENTS — Interior Boys
   These overrides fix hero spacing, mobile navigation,
   buttons, controls, footer branding, and mobile carousels.
   ========================================================= */
.hero-content {
  width: min(var(--max), calc(100% - 64px));
  margin-inline: auto;
  padding-inline: 0;
}
.hero-slide {
  width: 100%;
  max-width: 900px;
  animation: heroIn .65s ease both;
}
.hero h1 {
  max-width: 850px;
  overflow-wrap: normal;
  text-wrap: balance;
  font-size: clamp(48px, 7.2vw, 108px);
}
.hero .lead {
  max-width: 560px;
}
.hero .btn-light {
  background: #f5f1e9;
  color: #171714;
  border-color: #f5f1e9;
}
.hero .btn-outline.btn-light {
  background: rgba(23, 23, 20, .5);
  color: #fff;
  border-color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.hero .btn-outline.btn-light:hover {
  background: #f5f1e9;
  color: #171714;
  text-shadow: none;
}
.menu-toggle {
  position: relative;
  z-index: 1102;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--ink);
  background: var(--ivory);
}
.menu-toggle span {
  width: 21px;
  height: 2px;
  margin: 3px 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
body.menu-open .menu-toggle {
  position: fixed;
  top: 13px;
  right: 16px;
  color: var(--ink);
  background: var(--ivory);
}
body.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
body.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav {
  overscroll-behavior: contain;
  padding-top: 100px;
}
.nav.open { z-index: 1101; }
.nav a { color: var(--ink); }
.nav .header-cta { color: var(--ivory); background: var(--ink); }
.hero-controls { z-index: 5; }
.hero-controls button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 1;
  color: #fff;
  background: rgba(18, 18, 16, .45);
  backdrop-filter: blur(8px);
}
.hero-dots button {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
}
.footer-intro .brand-logo {
  filter: brightness(0) invert(1);
  opacity: .96;
}
.mission-vision-section > .container > h2 { max-width: 780px; }
.mission-intro { max-width: 700px; color: var(--muted); }
.mission-vision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 45px;
}
.mission-vision-grid .process-step {
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, .72);
}
.mission-vision-grid .process-step h3 { max-width: 430px; }
.map-frame {
  width: 100%;
  height: clamp(300px, 42vw, 520px);
  margin: 28px 0 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #e9e0d2;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.floating-actions { right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.floating-actions a {
  width: 54px;
  height: 54px;
  font-size: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.floating-actions a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #0003; }
.floating-actions svg { width: 25px; height: 25px; display: block; }
.journal-section .blog-grid { align-items: stretch; }
@media (max-width: 1200px) {
  .site-header { color: var(--ink); }
  .menu-toggle { display: flex; }
  .hero-content { width: calc(100% - 64px); }
}
@media (max-width: 760px) {
  .hero { min-height: 690px; height: 92svh; max-height: 900px; align-items: center; }
  .hero-content { width: calc(100% - 38px); padding: 110px 0 155px; }
  .hero-slide { max-width: 100%; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .13em; line-height: 1.7; }
  .hero h1 { font-size: clamp(42px, 10.5vw, 68px); line-height: .98; margin: 20px 0; max-width: 100%; }
  .hero p { font-size: 15px; line-height: 1.6; max-width: 100%; }
  .hero-actions { gap: 9px; }
  .hero-actions .btn { width: auto; max-width: 100%; padding: 13px 14px; font-size: 9px; letter-spacing: .08em; }
  .hero-controls { right: 18px; bottom: 68px; gap: 8px; }
  .hero-controls button { width: 31px; height: 31px; font-size: 16px; }
  .hero-dots { gap: 6px; }
  .hero-dots button { width: 6px; height: 6px; min-width: 6px; min-height: 6px; }
  .hero-bottom { left: 19px; right: 19px; bottom: 25px; gap: 10px; font-size: 8px; letter-spacing: .1em; }
  .scroll-line { width: 25px; }
  .mission-vision-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .mission-vision-grid .process-step { padding: 24px; }
  .journal-section .blog-grid {
    display: grid;
    grid-auto-columns: minmax(82%, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1px;
    padding: 2px 1px 18px;
    margin-right: -19px;
    scrollbar-width: thin;
  }
  .journal-section .blog-card { min-width: 0; scroll-snap-align: start; }
  .journal-section .blog-card img { height: 220px; }
  .map-frame { height: 340px; }
  .floating-actions { right: 10px; bottom: 12px; gap: 8px; }
  .floating-actions a { width: 46px; height: 46px; }
  .floating-actions svg { width: 22px; height: 22px; }
  .footer-intro .brand-logo { max-width: 165px; }
}
@media (max-width: 420px) {
  .hero { min-height: 670px; }
  .hero-content { width: calc(100% - 30px); padding-top: 100px; padding-bottom: 150px; }
  .hero h1 { font-size: clamp(39px, 10.2vw, 48px); }
  .hero-actions .btn { width: 100%; }
  .hero-controls { bottom: 65px; }
  .hero-bottom { font-size: 7px; }
  .journal-section .blog-grid { grid-auto-columns: 88%; }
  .map-frame { height: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .floating-actions a { animation: none !important; transition: none !important; }
}

/* HEADER LAYOUT HOTFIX — desktop navigation spacing */
.site-header {
  height: 86px;
  min-height: 86px;
  padding: 0;
}
.site-header .header-inner {
  width: min(var(--max), calc(100% - 48px));
  min-height: 86px;
  height: 86px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.site-header .brand {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
}
.site-header .brand-logo {
  display: block;
  width: 160px;
  max-width: 160px;
  max-height: 54px;
  height: auto;
  object-fit: contain;
}
.site-header .nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 0;
  margin: 0;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, .85vw, 15px);
  background: transparent;
  box-shadow: none;
  transform: none;
}
.site-header .nav > a:not(.btn) {
  flex: 0 0 auto;
  padding: 8px 0;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .045em;
  white-space: nowrap;
  border: 0;
}
.site-header .nav .header-cta {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0 0 0 4px;
  padding: 13px 15px;
  font-size: 9px;
  white-space: nowrap;
}
.site-header .menu-toggle { display: none; }

@media (max-width: 1450px) {
  .site-header { color: var(--ink); background: rgba(245,241,233,.97); }
  .site-header .header-inner { width: calc(100% - 42px); }
  .site-header .brand-logo { width: 155px; max-width: 155px; }
  .site-header .menu-toggle {
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  .site-header .nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(390px, 88vw);
    height: 100dvh;
    overflow-y: auto;
    padding: 100px 28px 35px;
    margin: 0;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--ivory);
    box-shadow: -20px 0 60px #0002;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
    z-index: 1101;
  }
  .site-header .nav.open {
    transform: translateX(0);
    visibility: visible;
  }
  .site-header .nav > a:not(.btn) {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.02em;
    text-transform: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .site-header .nav .header-cta {
    display: inline-flex;
    margin: 20px 0 0;
    padding: 14px 18px;
    justify-content: center;
    font-family: var(--sans);
    font-size: 10px;
  }
  body.menu-open .site-header .menu-toggle {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 1102;
    background: var(--ivory);
    color: var(--ink);
  }
}
@media (max-width: 760px) {
  .site-header, .site-header .header-inner { height: 72px; min-height: 72px; }
  .site-header .header-inner { width: calc(100% - 30px); }
  .site-header .brand-logo { width: 145px; max-width: 145px; max-height: 48px; }
}


/* =========================================================
   HOME PAGE — ONLY THE REQUESTED MOBILE CAROUSELS
   Selected Inspiration, What We Do, Our Process, Testimonials,
   Interior Boys Expertise and Interior Boys Journal.
   All other homepage sections retain their original layout.
   ========================================================= */
@media (max-width: 760px) {
  .home-page .project-grid,
  .home-page .services-list,
  .home-page .process-grid,
  .home-page .testimonial-grid,
  .home-page .journal-section .blog-grid,
  .home-page .keyword-strip .container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 14px !important;
    padding: 4px 2px 18px;
    margin-left: 0;
    margin-right: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .home-page .project-grid::-webkit-scrollbar,
  .home-page .services-list::-webkit-scrollbar,
  .home-page .process-grid::-webkit-scrollbar,
  .home-page .testimonial-grid::-webkit-scrollbar,
  .home-page .journal-section .blog-grid::-webkit-scrollbar,
  .home-page .keyword-strip .container::-webkit-scrollbar {
    display: none;
  }

  /* Selected Inspiration — project cards */
  .home-page .project-grid { align-items: stretch; }
  .home-page .project-card {
    flex: 0 0 86%;
    width: 86%;
    min-width: 0;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  .home-page .project-card .project-image img,
  .home-page .project-card:nth-child(even) .project-image img {
    height: 290px;
  }
  .home-page .project-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
  }
  .home-page .project-meta h3 { font-size: 25px; }
  .home-page .project-meta span { padding-top: 0; font-size: 9px; }

  /* What We Do — each service is one swipeable card */
  .home-page .services-list { border-top: 0; }
  .home-page .service-row {
    flex: 0 0 84%;
    width: 84%;
    min-width: 0;
    min-height: 190px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    grid-template-rows: auto 1fr;
    align-content: start;
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 22px 18px;
    border: 1px solid var(--line);
    background: #fffdf8;
    scroll-snap-align: start;
  }
  .home-page .service-row:hover { padding-left: 18px; }
  .home-page .service-row .service-number { font-size: 23px; }
  .home-page .service-row h3 { font-size: 25px; line-height: 1.08; }
  .home-page .service-row p {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: 6px;
    font-size: 12px;
  }
  .home-page .service-row .service-arrow {
    grid-column: 3;
    grid-row: 1;
    font-size: 21px;
  }

  /* Our Process — four process cards */
  .home-page .process-grid { align-items: stretch; margin-top: 30px; }
  .home-page .process-step {
    flex: 0 0 76%;
    width: 76%;
    min-width: 0;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    background: #fffdf8;
    scroll-snap-align: start;
  }
  .home-page .process-step .num { font-size: 30px; }
  .home-page .process-step h3 { font-size: 27px; }

  /* Testimonials — swipeable review cards */
  .home-page .testimonial-grid { margin-top: 26px; }
  .home-page .testimonial-card {
    flex: 0 0 86%;
    width: 86%;
    min-width: 0;
    min-height: 250px;
    padding: 23px;
    scroll-snap-align: start;
  }
  .home-page .testimonial-card blockquote { font-size: 23px; }

  /* Interior Boys Expertise — horizontally scrollable chips */
  .home-page .keyword-strip .container {
    align-items: center;
    padding-bottom: 10px;
  }
  .home-page .keyword-strip strong,
  .home-page .keyword-chip { flex: 0 0 auto; white-space: nowrap; }

  /* Interior Boys Journal — swipeable blog cards */
  .home-page .journal-section .blog-grid { margin-top: 26px; }
  .home-page .journal-section .blog-card {
    flex: 0 0 86%;
    width: 86%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .home-page .journal-section .blog-card img { height: 220px; }
  .home-page .journal-section .blog-copy { padding: 20px; }
  .home-page .journal-section .blog-card h3 { font-size: 26px; }

  /* Space the two About statement buttons so they never touch/overlap. */
  .home-page .statement .container > .btn {
    display: inline-flex;
    margin: 8px 10px 0 0;
    vertical-align: top;
  }
}

@media (max-width: 420px) {
  .home-page .project-card,
  .home-page .testimonial-card,
  .home-page .journal-section .blog-card { flex-basis: 90%; width: 90%; }
  .home-page .service-row { flex-basis: 90%; width: 90%; }
  .home-page .process-step { flex-basis: 84%; width: 84%; }
  .home-page .statement .container > .btn {
    display: flex;
    width: 100%;
    max-width: 360px;
    margin: 10px 0 0;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .project-grid,
  .home-page .services-list,
  .home-page .process-grid,
  .home-page .testimonial-grid,
  .home-page .journal-section .blog-grid,
  .home-page .keyword-strip .container {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}
