@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--paper:#f7f5ed;--paper2:#eeefe6;--ink:#17251f;--muted:#68746c;--line:#d9dfd5;--forest:#173e31;--forest2:#245b46;--mint:#dcece1;--mint2:#b9d7c3;--coral:#f0785e;--butter:#f2d98c;--white:#fffdf8;--sans:'DM Sans',Arial,sans-serif;--serif:'Playfair Display',Georgia,serif;--mono:'DM Mono',monospace;--ease:cubic-bezier(.2,.75,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");mix-blend-mode:multiply}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}.wrap{width:min(1320px,calc(100% - 64px));margin-inline:auto}.eyebrow,.hero-overline,.num,.tag,.small,.work-type,.preview-chip,.hero-meta,.hero-bottomline,.hero-art-caption,.section-tail,.footnote,.topline,.marquee span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.11em}.eyebrow{font-size:10px;color:var(--forest2);display:flex;align-items:center;gap:10px}.eyebrow:before{content:"";width:23px;height:1px;background:var(--coral)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(68px,10.8vw,158px);line-height:.82;letter-spacing:-.095em;font-weight:800;margin:0}h1 em,h2 em{font-family:var(--serif);font-weight:500;letter-spacing:-.07em}h2{font-size:clamp(42px,6vw,82px);line-height:.94;letter-spacing:-.075em;font-weight:800;margin:18px 0 24px}h3{letter-spacing:-.045em}p{line-height:1.75;color:var(--muted)}
/* Header */
[data-site-nav]{position:relative;z-index:50}.topline{display:flex;justify-content:space-between;gap:16px;padding:10px 0;color:#7b867d;font-size:8px;border-bottom:1px solid var(--line)}.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px max(32px,calc((100vw - 1320px)/2));background:#f7f5edeb;border-bottom:1px solid #d9dfd5;backdrop-filter:blur(18px);transition:padding .3s,box-shadow .3s}.nav.is-scrolled{padding-top:12px;padding-bottom:12px;box-shadow:0 12px 30px #173e310c}.logo{font-size:22px;font-weight:900;letter-spacing:-.09em;white-space:nowrap}.logo span{color:var(--coral);padding:0 2px}.navlinks{display:flex;align-items:center;gap:clamp(14px,2vw,29px);font-size:11px;font-weight:600;color:#526158}.navlinks a{position:relative;padding:9px 0}.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;background:var(--coral);transition:right .3s var(--ease)}.navlinks a:hover:after{right:0}.navcta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:15px 20px;background:var(--forest);color:var(--white);border:1px solid var(--forest);font-size:11px;font-weight:700;transition:transform .35s var(--ease),background .3s,box-shadow .3s}.navcta:hover,.btn:hover{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateY(-4px);box-shadow:0 14px 30px #f0785e35}.btn span,.navcta span{font-size:17px;line-height:0}.btn-ghost{background:transparent;color:var(--ink);border-color:#aab7ad}.btn-ghost:hover{background:var(--mint);border-color:var(--mint);color:var(--forest);box-shadow:none}.menu-toggle{display:none;border:0;background:none;font-size:25px;color:var(--forest);cursor:pointer}
/* Hero */
.hero{position:relative;min-height:760px;padding:64px 0 30px;overflow:hidden;background:var(--paper)}.hero:before{content:"";position:absolute;width:55vw;height:55vw;max-width:850px;max-height:850px;border-radius:50%;right:-11vw;top:-13vw;background:var(--mint);opacity:.8}.hero:after{content:"";position:absolute;width:160px;height:160px;right:43%;top:20%;border:1px solid #f0785e80;border-radius:50%;box-shadow:0 0 0 18px #f0785e10,0 0 0 36px #f0785e08;pointer-events:none}.hero .wrap{position:relative;z-index:2}.hero-meta{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#77847a;padding-bottom:28px;border-bottom:1px solid var(--line)}.hero-layout{display:grid;grid-template-columns:1.16fr .84fr;gap:3vw;align-items:center;padding:58px 0 40px}.hero-copy{position:relative;z-index:3}.hero-overline{font-size:10px;color:var(--coral);margin-bottom:27px}.hero h1{max-width:850px}.hero h1 .line-2{display:block;padding-left:8vw}.hero h1 em{color:var(--forest2)}.hero-description{display:flex;align-items:flex-end;gap:28px;margin:40px 0 0 8vw;max-width:580px}.hero-description p{font-size:14px;max-width:310px;margin:0;color:#58665d}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.hero-visual{position:relative;min-height:535px}.hero-image-main{position:absolute;right:2%;top:3%;width:75%;height:77%;overflow:hidden;border-radius:48% 48% 2px 2px;clip-path:inset(0 0 0 0 round 48% 48% 2px 2px)}.hero-image-main img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.82)}.hero:hover .hero-image-main img{transform:scale(1.055)}.hero-image-small{position:absolute;left:0;bottom:7%;width:42%;height:36%;overflow:hidden;border:9px solid var(--paper);box-shadow:0 18px 45px #173e3124;transform:rotate(-6deg);z-index:3}.hero-image-small img{width:100%;height:100%;object-fit:cover}.hero-sticker{position:absolute;right:-1%;bottom:3%;width:132px;height:132px;border-radius:50%;background:var(--coral);color:white;display:grid;place-items:center;text-align:center;font:9px/1.55 var(--mono);letter-spacing:.12em;transform:rotate(10deg);z-index:4;animation:slowSpin 24s linear infinite}.hero-sticker b{font:26px var(--sans);display:block}.hero-image-label{position:absolute;top:10%;left:4%;writing-mode:vertical-rl;transform:rotate(180deg);font:9px var(--mono);letter-spacing:.16em;color:var(--forest)}.hero-bottomline{display:flex;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid var(--line);font-size:8px;color:#849087}.hero-bottomline span:last-child{text-align:right}
/* Motion strip */
.marquee{overflow:hidden;background:var(--forest);color:var(--white);padding:16px 0;white-space:nowrap}.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:marquee 32s linear infinite}.marquee span{font-size:10px;letter-spacing:.18em}.marquee i{font-style:normal;color:var(--coral);font-size:18px}.marquee:hover .marquee-track{animation-play-state:paused}
/* Intro / sections */
.intro-band{padding:125px 0 135px;background:var(--paper2);position:relative;overflow:hidden}.intro-band:after{content:"WS";position:absolute;right:-2vw;bottom:-9vw;font-size:clamp(230px,34vw,510px);font-weight:900;letter-spacing:-.14em;color:#173e3108;line-height:.8;pointer-events:none}.intro-band-inner{display:grid;grid-template-columns:.36fr 1fr;gap:6vw;position:relative;z-index:1}.intro-label{font:10px/1.8 var(--mono);letter-spacing:.14em;color:var(--coral)}.intro-copy h2{font-size:clamp(50px,7.5vw,100px);max-width:900px}.intro-copy h2 em{color:var(--forest2)}.intro-copy p{max-width:520px;font-size:15px;margin-left:16vw}.section{padding:110px 0}.sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}.sectionhead h2{margin-bottom:0}.sectionhead>p{max-width:340px;font-size:13px;margin-bottom:6px}.work-home{background:var(--mint);padding:120px 0 110px;position:relative;overflow:hidden}.work-home:before{content:"SELECTED WORK";position:absolute;top:35px;right:-3vw;font-size:clamp(70px,13vw,180px);font-weight:900;letter-spacing:-.1em;color:#173e3108;white-space:nowrap}.work-home .sectionhead{position:relative;z-index:1}.work-home h2 em{color:var(--coral)}.work-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:55px 26px;align-items:start}.work-card{display:block;min-width:0;position:relative}.work-card:nth-child(2){margin-top:100px}.work-card:nth-child(3){grid-column:1/-1;width:72%;margin-left:auto;margin-top:-15px}.work-preview{height:490px;position:relative;overflow:hidden;background:#c9d5c9}.work-card:nth-child(3) .work-preview{height:430px}.work-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#13271a05 30%,#13271a9c 100%);transition:opacity .5s}.work-photo-sunday,.work-photo-forme,.work-photo-north{background-size:cover;background-position:center;transition:transform 1s var(--ease),filter .6s;filter:saturate(.83)}.work-photo-sunday{background-image:url('https://images.squarespace-cdn.com/content/v1/6732c090fa58c64027e95cfa/2b555a2a-4b3c-4744-a68f-d0f267d91cdc/Blank_Build_Mensa_122024_Jack_Fenby_DSC_0175.jpg')}.work-photo-forme{background-image:url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/64133f238570361.69171de96382c.jpg')}.work-photo-north{background-image:url('https://coohom-biz-sg-s3.coohom.com/ins/static/case/casa-diseno-moderna-exterior-1775490643653774500.jpg')}.work-card:hover .work-preview{transform:translateY(-8px)}.work-card:hover .work-photo-sunday,.work-card:hover .work-photo-forme,.work-card:hover .work-photo-north{transform:scale(1.045);filter:saturate(1)}.preview-chip{position:absolute;z-index:2;top:18px;left:18px;background:var(--paper);padding:10px 12px;font-size:8px;color:var(--forest)}.preview-overlay{position:absolute;z-index:2;left:30px;right:24px;bottom:28px;color:white;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.preview-overlay>span{font:9px var(--mono);letter-spacing:.18em}.preview-overlay strong{font-size:clamp(40px,5.3vw,70px);line-height:.9;letter-spacing:-.08em}.preview-overlay strong i{font:500 1em var(--serif)}.preview-overlay b{font:9px var(--mono);letter-spacing:.14em;border-bottom:1px solid #ffffffa8;padding-bottom:8px;margin-top:6px}.work-info{display:flex;justify-content:space-between;gap:20px;padding:20px 3px 0;transition:transform .35s var(--ease)}.work-card:hover .work-info{transform:translateX(7px)}.work-type{font-size:8px;color:var(--forest2)}.work-info h3{font-size:27px;margin:9px 0 6px}.work-info p{font-size:12px;max-width:370px;margin:0}.work-arrow{font-size:24px;color:var(--coral)}.work-note{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:48px;padding-top:20px;border-top:1px solid #b9d0c0;font:9px var(--mono);letter-spacing:.1em;color:#617568}.textlink{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:6px;transition:color .25s,gap .25s}.textlink:hover{color:var(--coral);gap:18px}
/* services / industries / process */
.services-home{padding:120px 0;background:var(--paper)}.services-home h2 em,.who-section h2 em{color:var(--forest2)}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tile{background:var(--white);border:1px solid var(--line);padding:28px;min-height:225px;position:relative;overflow:hidden;transition:transform .45s var(--ease),background .3s,border-color .3s,box-shadow .4s}.tile:after{content:"↗";position:absolute;right:25px;bottom:15px;font-size:25px;color:var(--coral);transform:translate(-5px,5px);opacity:0;transition:.35s}.tile:hover{transform:translateY(-8px);background:var(--mint);border-color:var(--mint2);box-shadow:0 18px 40px #173e3110}.tile:hover:after{opacity:1;transform:none}.num{font-size:9px;color:var(--coral)}.tile h3{font-size:23px;margin:35px 0 10px}.tile p{font-size:12px;max-width:320px;margin-bottom:15px}.pill{display:inline-block;border:1px solid #d9e0d8;padding:6px 9px;font:8px var(--mono);letter-spacing:.04em;margin:3px 4px 0 0;color:#607166}.section-tail{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:35px;padding-top:20px;border-top:1px solid var(--line);font-size:8px;color:#7b887e}.who-section{background:var(--mint);padding:120px 0}.who-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.who-grid>div:first-child>p{max-width:390px;font-size:14px;margin:30px 0}.industry-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.industry-list .tile{min-height:160px;background:#f7f8f1}.industry-list .tile h3{font-size:18px;margin:25px 0 8px}.industry-list .tile p{font-size:11px;margin:0}.feature-band{background:var(--forest);color:white;padding:100px 0;position:relative;overflow:hidden}.feature-band:after{content:"↗";position:absolute;right:5vw;top:-9vw;font-size:34vw;line-height:1;color:#ffffff08}.feature-grid{display:grid;grid-template-columns:1fr .7fr;gap:9vw;align-items:end;position:relative;z-index:1}.feature-band .eyebrow{color:var(--mint2)}.feature-band h2{font-size:clamp(55px,8vw,105px)}.feature-band h2 em{color:var(--butter)}.feature-copy p{color:#d3e1d6;font-size:15px;max-width:420px}.btn-light{background:var(--butter);color:var(--forest);border-color:var(--butter)}.btn-light:hover{background:var(--coral);border-color:var(--coral);color:white}.process-home{padding:120px 0}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:55px}.process-grid article{padding:25px 20px 0 0;border-right:1px solid var(--line);margin-right:20px;min-height:190px}.process-grid article:last-child{border:0}.process-grid article>span{font:10px var(--mono);color:var(--coral)}.process-grid h3{font-size:20px;margin:36px 0 10px}.process-grid p{font-size:12px;max-width:230px}
/* CTA / footer */
.cta-home{background:var(--butter);padding:110px 0 28px;position:relative;overflow:hidden}.cta-home:before{content:"LET'S MAKE";position:absolute;right:-3vw;top:5%;font-size:clamp(90px,18vw,240px);font-weight:900;letter-spacing:-.11em;color:#173e3109;white-space:nowrap}.cta-home-inner{position:relative;z-index:1}.cta-home .eyebrow{color:#6c6a4b}.cta-home h2{font-size:clamp(58px,9vw,120px);margin:28px 0 35px}.cta-home h2 em{color:var(--forest2)}.cta-link{display:inline-flex;align-items:center;gap:30px;background:var(--forest);color:white;padding:18px 25px;font-size:13px;font-weight:700;transition:gap .3s,background .3s}.cta-link span{font-size:24px}.cta-link:hover{gap:48px;background:var(--coral)}.cta-foot{display:flex;justify-content:space-between;gap:20px;margin-top:100px;padding-top:18px;border-top:1px solid #d6c88f;font:8px var(--mono);letter-spacing:.13em;color:#6f715d}.footer{padding:75px 0 24px}.footergrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;padding-bottom:55px}.footer .logo{font-size:27px}.footer p{font-size:12px}.footerlinks{display:flex;flex-direction:column;gap:13px;font-size:12px;color:#617066}.footerlinks b{font:9px var(--mono);letter-spacing:.13em;color:var(--coral);text-transform:uppercase;margin-bottom:7px}.footerlinks a:hover{color:var(--coral)}.footnote{border-top:1px solid var(--line);padding-top:17px;display:flex;justify-content:space-between;gap:20px;font-size:8px;color:#7d887f}
/* Interior pages */
.pagehero{padding:115px 0 85px;position:relative}.pagehero:after{content:"";position:absolute;right:4%;top:35%;width:170px;height:170px;border:1px solid #f0785e8a;border-radius:50%;box-shadow:0 0 0 16px #f0785e10,0 0 0 32px #f0785e08}.pagehero h1{font-size:clamp(64px,9vw,125px);max-width:1000px;margin:25px 0}.pagehero h1 em{color:var(--forest2)}.lead{font-size:17px;line-height:1.65;max-width:670px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.dark{background:var(--forest);color:white;padding:100px 0}.dark h2,.dark h3{color:white}.dark p{color:#d2ded4}.dark .eyebrow{color:var(--mint2)}.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.manifesto{font:500 clamp(24px,3vw,39px)/1.3 var(--serif);color:var(--forest);letter-spacing:-.03em}.dark .manifesto{color:var(--butter)}.note{background:var(--mint);padding:22px 26px;font-size:12px;line-height:1.7;color:#435a4b}.package{padding:32px;background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;min-height:430px;transition:transform .35s var(--ease),box-shadow .35s}.package:hover{transform:translateY(-8px);box-shadow:0 20px 45px #173e3112}.package.featured{background:var(--forest);color:white;border-color:var(--forest);transform:translateY(-12px)}.package.featured:hover{transform:translateY(-20px)}.package .eyebrow{color:var(--coral)}.package.featured .eyebrow{color:var(--butter)}.price{font-size:43px;letter-spacing:-.08em;margin:25px 0 5px}.package ul{list-style:none;padding:0;margin:15px 0 28px;flex:1}.package li{padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.package.featured li{border-color:#ffffff26}.package .btn{align-self:flex-start}.package.featured .btn{background:var(--butter);border-color:var(--butter);color:var(--forest)}.package.featured .small{color:#d5e1d7}.article{padding:30px 0;border-bottom:1px solid var(--line);max-width:850px}.article h3{font-size:27px;margin:15px 0}.article p{font-size:14px}.tag{font-size:9px;color:var(--coral)}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--white);padding:35px;border:1px solid var(--line)}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}.field label{font:9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#637168}.field input,.field textarea,.field select{width:100%;padding:14px;border:1px solid var(--line);background:var(--paper);outline:none;color:var(--ink)}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--forest2);box-shadow:0 0 0 3px #b9d7c355}.field textarea{min-height:130px;resize:vertical}.small{font-size:9px;color:#7c887e;line-height:1.7}
/* Reveal and motion */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .85s var(--ease),transform .85s var(--ease)}.reveal.is-visible{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:.09s}.reveal-delay-2{transition-delay:.18s}.reveal-delay-3{transition-delay:.27s}.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:var(--coral);z-index:100;pointer-events:none}.hero .hero-overline,.hero h1,.hero-description,.hero-visual{animation:rise .9s var(--ease) both}.hero h1{animation-delay:.1s}.hero-description{animation-delay:.2s}.hero-visual{animation-delay:.25s}@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes slowSpin{to{transform:rotate(370deg)}}
@media(max-width:1000px){.nav{padding-inline:25px}.navlinks{gap:14px}.navlinks a{font-size:10px}.hero{min-height:unset}.hero-layout{grid-template-columns:1fr .8fr}.hero-visual{min-height:430px}.hero-description{margin-left:3vw}.work-preview{height:400px}.who-grid{gap:5vw}}
@media(max-width:760px){.wrap{width:min(100% - 38px,600px)}.topline{font-size:7px}.nav{padding:14px 19px}.navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:20px 22px 28px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:6px}.navlinks.open{display:flex}.navlinks a{font-size:14px;padding:12px 0}.navcta{margin-left:auto;padding:12px 13px;font-size:10px}.menu-toggle{display:block}.hero{padding:35px 0 20px}.hero-meta{font-size:7px}.hero-layout{grid-template-columns:1fr;padding:42px 0 35px}.hero h1{font-size:clamp(62px,14vw,100px)}.hero h1 .line-2{padding-left:5vw}.hero-description{margin:30px 0 0 5vw;display:block}.hero-description p{font-size:13px}.hero-visual{min-height:390px;margin-top:25px}.hero-image-main{width:78%;height:85%;right:6%}.hero-image-small{width:39%;height:34%;bottom:2%}.hero-sticker{width:100px;height:100px;font-size:7px}.hero-sticker b{font-size:20px}.hero:after{right:12%;top:43%;width:100px;height:100px}.hero-bottomline{font-size:7px}.intro-band,.work-home,.services-home,.who-section,.process-home{padding:78px 0}.intro-band-inner{grid-template-columns:1fr;gap:20px}.intro-copy p{margin-left:0}.sectionhead{display:block}.sectionhead>p{margin-top:22px}.work-grid{grid-template-columns:1fr;gap:35px}.work-card:nth-child(2){margin-top:0}.work-card:nth-child(3){grid-column:auto;width:100%;margin:0}.work-preview,.work-card:nth-child(3) .work-preview{height:410px}.work-note{align-items:flex-start;flex-direction:column}.tiles,.grid3{grid-template-columns:1fr 1fr}.who-grid,.feature-grid,.split{grid-template-columns:1fr;gap:38px}.industry-list{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr;row-gap:25px}.process-grid article:nth-child(2){border-right:0}.feature-band,.dark{padding:75px 0}.cta-home{padding:80px 0 22px}.cta-foot{margin-top:75px;font-size:7px}.footergrid{grid-template-columns:1fr 1fr}.footergrid>div:first-child{grid-column:1/-1}.pagehero{padding:75px 0 55px}.pagehero:after{width:90px;height:90px;right:0;top:30%}.pagehero h1{font-size:clamp(60px,12vw,90px)}.grid2{grid-template-columns:1fr}.package.featured{transform:none}.package.featured:hover{transform:translateY(-8px)}}
@media(max-width:480px){.wrap{width:calc(100% - 32px)}.topline span:last-child{display:none}.navcta{display:none}.hero h1{font-size:clamp(56px,15vw,76px)}.hero-description{margin-left:0}.hero-visual{min-height:330px}.hero-image-main{height:82%}.hero-image-small{border-width:6px}.hero-sticker{right:0;bottom:0}.hero-bottomline span:last-child{max-width:45%}.tiles,.grid3,.industry-list{grid-template-columns:1fr}.tile{min-height:190px}.work-preview,.work-card:nth-child(3) .work-preview{height:360px}.work-info h3{font-size:23px}.process-grid{grid-template-columns:1fr}.process-grid article{border-right:0;border-bottom:1px solid var(--line);min-height:140px;margin:0}.process-grid h3{margin-top:24px}.footergrid{grid-template-columns:1fr}.footergrid>div:first-child{grid-column:auto}.footnote{flex-direction:column}.formgrid{grid-template-columns:1fr;padding:20px}.field.full{grid-column:auto}.cta-home h2{font-size:55px}}
@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}}
/* Supporting treatments for interior-page callouts */
.btn.light,.dark .btn.light{background:var(--butter);border-color:var(--butter);color:var(--forest)}
.btn.light:hover,.dark .btn.light:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.cta-band{background:var(--mint);padding:48px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
.cta-band h2{font-size:clamp(32px,4vw,54px);margin:0;max-width:620px}
@media(max-width:760px){.cta-band{padding:30px;align-items:flex-start;flex-direction:column}}


/* =========================================================
   WEBIN SPHERE — COLOUR & SURFACE REVISION
   Richer homepage, no white card UI, stronger text contrast.
   ========================================================= */
:root{
  --paper:#f3e6ad;
  --paper2:#e5efdf;
  --ink:#18382c;
  --muted:#405b4d;
  --line:#b8c9b0;
  --forest:#123d30;
  --forest2:#1d5b43;
  --mint:#c9e3cf;
  --mint2:#a8cfb3;
  --coral:#ed684f;
  --butter:#f4d86f;
  --white:#f4e7b7;
}
body{background:var(--paper);color:var(--ink)}
body:after{opacity:.055;mix-blend-mode:multiply}
.topline{color:#496353;border-color:#b8c9b0}
.nav{background:rgba(243,230,173,.94);border-color:#b8c9b0}
.navlinks{color:#244a39}
.navcta,.btn{background:var(--forest);color:#f4df8a;border-color:var(--forest)}
.navcta:hover,.btn:hover{background:var(--coral);border-color:var(--coral);color:#18382c}
.btn-ghost{color:var(--ink);border-color:#77927e}
.menu-toggle{color:var(--forest)}

/* Homepage opens with a confident, saturated green canvas. */
.hero{background:var(--forest);color:#f4df8a;padding-top:54px}
.hero:before{background:var(--mint);opacity:1;right:-14vw;top:-16vw}
.hero:after{border-color:#ed684f9c;box-shadow:0 0 0 18px #ed684f18,0 0 0 36px #ed684f0c}
.hero-meta{color:#c5ddc9;border-color:#527563}
.hero-overline{color:#f4a18c}
.hero h1{color:#f4df8a}
.hero h1 em{color:#ff9278}
.hero-description p{color:#d9eadb}
.hero-bottomline{color:#c5ddc9;border-color:#527563}
.hero-image-small{border-color:var(--forest);box-shadow:0 18px 45px #071d16aa}
.hero-image-label{color:var(--forest)}
.hero-sticker{background:var(--coral);color:#18382c}
.hero .btn-ghost{color:#f4df8a;border-color:#9dbda5}
.hero .btn-ghost:hover{background:var(--mint);color:var(--forest);border-color:var(--mint)}
.hero .eyebrow{color:var(--butter)}
.hero .eyebrow:before{background:var(--coral)}

/* Light sections are buttery yellow or mint, never flat off-white. */
.intro-band{background:#f5e7a9}
.intro-band:after{color:#123d300d}
.intro-label{color:#b94f3c}
.intro-copy h2 em{color:var(--forest2)}
.intro-copy p{color:#405b4d}
.work-home{background:#c9e3cf}
.work-home:before{color:#123d300d}
.work-home h2 em{color:#d45d48}
.work-note{color:#3e6250;border-color:#91b89b}
.services-home{background:#f3e6ad}
.services-home h2 em,.who-section h2 em{color:#1d5b43}

/* Strip away generic white cards. Let the typography and layout do the work. */
.tile,.industry-list .tile,.package,.formgrid{
  background:transparent;
  border:0;
  border-top:1px solid #9fb69f;
  border-radius:0;
  box-shadow:none;
}
.tile{padding:27px 22px 25px 0}
.tile:hover{background:transparent;border-color:var(--coral);box-shadow:none;transform:translateY(-5px)}
.tile h3{color:var(--ink)}
.tile p{color:#405b4d}
.pill{border-color:#9fb69f;color:#355844;background:transparent}
.industry-list .tile{background:transparent}
.industry-list .tile:hover{background:#d6e9d8}
.who-section{background:#c9e3cf}
.feature-band{background:#123d30;color:#f4df8a}
.feature-band h2,.feature-band h3{color:#f4df8a}
.feature-band h2 em{color:#ff9278}
.feature-copy p{color:#d9eadb}
.feature-band .eyebrow{color:#c9e3cf}
.btn-light{background:#f4d86f;color:#18382c;border-color:#f4d86f}
.btn-light:hover{background:#ed684f;color:#18382c;border-color:#ed684f}
.process-home{background:#f3e6ad}
.process-grid{border-color:#a9bea8}
.process-grid article{border-color:#a9bea8}
.cta-home{background:#ed684f}
.cta-home:before{color:#18382c0c}
.cta-home .eyebrow{color:#18382c}
.cta-home h2,.cta-home h2 em{color:#18382c}
.cta-link{background:#123d30;color:#f4df8a}
.cta-link:hover{background:#f4d86f;color:#18382c}
.cta-foot{border-color:#c95b47;color:#18382c}
.footer{background:#f3e6ad}
.footerlinks{color:#355844}
.footerlinks b{color:#c65340}
.footnote{border-color:#a9bea8;color:#496353}

/* Make portfolio titles readable regardless of the photograph beneath. */
.preview-overlay{
  left:0;right:0;bottom:0;
  padding:24px 28px 26px;
  color:#f4df8a;
  background:linear-gradient(90deg,rgba(18,61,48,.97),rgba(18,61,48,.82));
}
.preview-overlay>span,.preview-overlay b{color:#c9e3cf}
.preview-overlay b{border-color:#c9e3cf}
.preview-chip{background:#f4d86f;color:#18382c}
.work-info h3{color:#18382c}
.work-info p{color:#405b4d}

/* Interior pages: replace white panels with open editorial surfaces. */
body:has(.pagehero){background:#f3e6ad}
.pagehero{background:#f3e6ad}
.pagehero h1 em{color:#1d5b43}
.lead,.article p{color:#405b4d}
.dark{background:#123d30;color:#f4df8a}
.dark h2,.dark h3{color:#f4df8a}
.dark p{color:#d9eadb}
.dark .manifesto{color:#f4d86f}
.note{background:#c9e3cf;color:#18382c}
.package{padding:30px 24px;min-height:430px;border-top:2px solid #8eaa91}
.package.featured{background:#123d30;color:#f4df8a;border:0;border-top:3px solid #ed684f}
.package.featured h3,.package.featured .price{color:#f4df8a}
.package.featured p,.package.featured li{color:#d9eadb}
.package.featured li{border-color:#527563}
.package.featured .small{color:#c9e3cf}
.package.featured .btn{background:#f4d86f;border-color:#f4d86f;color:#18382c}
.formgrid{padding:30px 0;border-top:1px solid #9fb69f}
.field label{color:#355844}
.field input,.field textarea,.field select{background:#f8edc5;border:1px solid #9fb69f;color:#18382c}
.field input::placeholder,.field textarea::placeholder{color:#637969}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#1d5b43;box-shadow:0 0 0 3px #a8cfb355}
.small{color:#496353}
.textlink{color:#18382c}
.textlink:hover{color:#c65340}

/* Accessibility: reduced motion and visible keyboard focus. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid #ed684f;outline-offset:4px
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(max-width:800px){
  .hero{padding-top:38px}
  .hero-layout{gap:28px}
  .hero-description{margin-left:0}
  .preview-overlay{padding:19px}
  .tile{padding-right:0}
}

.btn.light:hover,.dark .btn.light:hover{background:var(--coral);border-color:var(--coral);color:#18382c}


/* =========================================================
   WEBIN SPHERE / ART-DIRECTION PASS 02
   Direction: kinetic editorial studio — forest, acid lime,
   persimmon and mint. No beige canvas. No white card UI.
   ========================================================= */
:root{
  --paper:#10271f;
  --paper2:#17382c;
  --ink:#e5f2c0;
  --muted:#b6cbb5;
  --line:#426454;
  --forest:#10271f;
  --forest2:#1c4c3a;
  --mint:#bce6c8;
  --mint2:#8ec5a1;
  --coral:#ff7258;
  --butter:#d8f36a;
  --white:#e5f2c0;
  --lime:#d8f36a;
  --charcoal:#0b1d17;
}
html{background:var(--forest);scroll-behavior:smooth}
body{background:var(--forest);color:var(--ink)}
p{color:var(--muted)}
.wrap{width:min(1360px,calc(100% - 76px))}
::selection{background:var(--coral);color:#10271f}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:5px}

/* Header becomes a designed control surface, not a plain strip. */
[data-site-nav]{position:relative;z-index:90}
.topline{color:#9fbaa5;border-color:#355746;font-size:8px}
.nav{
  background:rgba(16,39,31,.92);
  color:var(--lime);
  border:0;
  border-bottom:1px solid #426454;
  padding:19px max(38px,calc((100vw - 1360px)/2));
  backdrop-filter:blur(22px);
}
.nav.is-scrolled{padding-top:12px;padding-bottom:12px;background:rgba(11,29,23,.97);box-shadow:0 18px 55px #0005}
.logo{color:var(--lime);font-size:23px;letter-spacing:-.1em}
.logo span{color:var(--coral)}
.navlinks{gap:clamp(14px,2.1vw,32px);color:#d6e7cf;font-size:11px}
.navitem{position:relative}
.navitem>a{display:flex;align-items:center;gap:6px;position:relative;padding:13px 0;transition:color .25s}
.navitem>a i{font-style:normal;color:var(--coral);font-size:13px;transition:transform .3s}
.navitem>a:after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:2px;background:var(--lime);transition:right .35s cubic-bezier(.2,.75,.2,1)}
.navitem:hover>a,.navitem>a:focus-visible,.navitem>a.is-current{color:var(--lime)}
.navitem:hover>a:after,.navitem>a:focus-visible:after,.navitem>a.is-current:after{right:0}
.navitem:hover>a i{transform:translate(3px,3px)}
.navcta{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--lime);color:var(--forest);border:1px solid var(--lime);
  padding:14px 17px;font-size:10px;gap:25px;
  transition:transform .35s,background .3s,color .3s;
}
.navcta:before{content:"";position:absolute;z-index:-1;inset:0;background:var(--coral);transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.navcta:hover{background:var(--coral);color:var(--forest);transform:translate(var(--hover-x,0),var(--hover-y,0))}
.navcta:hover:before{transform:translateY(0)}
.navcta b{font-size:17px;font-weight:400}
.navitem.has-panel .nav-panel{
  position:absolute;left:-24px;top:calc(100% + 9px);width:370px;
  padding:22px 24px 18px;background:#193d2f;border:1px solid #557963;
  box-shadow:0 25px 65px #0007;opacity:0;visibility:hidden;
  transform:translateY(15px) scale(.98);transform-origin:top left;
  transition:opacity .25s,transform .35s cubic-bezier(.2,.75,.2,1),visibility .25s;
}
.navitem.has-panel:hover .nav-panel,.navitem.has-panel:focus-within .nav-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav-panel-kicker,.nav-panel-foot{font:8px var(--mono);letter-spacing:.18em;color:var(--lime)}
.nav-panel>a{display:grid;grid-template-columns:28px 1fr 18px;gap:10px;align-items:start;padding:16px 0;border-bottom:1px solid #456451;color:#e5f2c0;transition:padding .25s,color .25s}
.nav-panel>a:hover{padding-left:8px;color:var(--lime)}
.nav-panel>a>b{font:9px var(--mono);color:var(--coral);padding-top:3px}
.nav-panel>a span{font-size:13px;font-weight:700}
.nav-panel>a small{display:block;margin-top:5px;color:#a9c2ad;font-size:10px;font-weight:400}
.nav-panel>a em{font-style:normal;color:var(--coral)}
.nav-panel-foot{padding-top:16px;color:#9fbaa5;font-size:7px}
.menu-toggle{width:42px;height:42px;border:1px solid #52735f;color:var(--lime);display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column}
.menu-toggle span{width:17px;height:1px;background:currentColor;transition:transform .3s,width .3s}
.menu-open .menu-toggle span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* Hero: full-bleed dark stage, image-led collage and kinetic type. */
.hero{
  min-height:min(850px,calc(100svh - 90px));
  padding:45px 0 26px;
  background:#10271f;color:var(--lime);
  isolation:isolate;
}
.hero:before{
  width:62vw;height:62vw;max-width:900px;max-height:900px;
  right:-17vw;top:-20vw;background:#d8f36a;opacity:1;
  border-radius:50%;z-index:-1;
  animation:hero-orbit 18s ease-in-out infinite alternate;
}
.hero:after{
  width:250px;height:250px;right:36%;top:17%;
  border:1px solid #ff7258a0;
  box-shadow:0 0 0 22px #ff72581b,0 0 0 44px #ff72580d;
  animation:orbit-pulse 7s ease-in-out infinite;
}
.hero-meta{color:#a9c4ad;border-color:#426454;font-size:8px}
.hero-overline{color:var(--coral);letter-spacing:.2em}
.hero h1{
  max-width:950px;color:var(--lime);
  font-size:clamp(72px,11.5vw,170px);
  line-height:.77;letter-spacing:-.105em;
}
.hero h1 .line-2{padding-left:7vw}
.hero h1 em{color:var(--coral);font-weight:500}
.hero-description{margin:38px 0 0 7vw;align-items:flex-start}
.hero-description p{color:#c2d8c1;max-width:345px;font-size:14px;line-height:1.7}
.hero .btn{background:var(--lime);border-color:var(--lime);color:#10271f}
.hero .btn:hover{background:var(--coral);border-color:var(--coral)}
.hero .btn-ghost{background:transparent;border-color:#72927b;color:var(--lime)}
.hero .btn-ghost:hover{background:#d8f36a;color:#10271f;border-color:#d8f36a}
.hero-visual{min-height:600px}
.hero-image-main{
  right:0;top:0;width:78%;height:84%;
  border-radius:48% 48% 0 0;
  clip-path:inset(0 0 0 0 round 48% 48% 0 0);
  box-shadow:0 35px 90px #0005;
}
.hero-image-main img{filter:saturate(.9) contrast(1.04);transform:translateY(var(--parallax-y,0))}
.hero-image-small{
  left:-4%;bottom:3%;width:43%;height:38%;
  border:7px solid #10271f;box-shadow:0 25px 70px #0007;
  transform:rotate(-7deg);transition:transform .7s cubic-bezier(.2,.75,.2,1);
}
.hero:hover .hero-image-small{transform:rotate(-3deg) translateY(-8px)}
.hero-image-small img{transform:scale(1.08);filter:saturate(.82)}
.hero-image-label{color:#18382c;font-size:8px}
.hero-sticker{
  width:145px;height:145px;background:var(--coral);color:#10271f;
  box-shadow:0 15px 50px #0004;font-size:8px;
}
.hero-sticker b{font-size:29px;color:#d8f36a}
.hero-bottomline{border-color:#426454;color:#9fbaa5}
.hero-copy,.hero-visual{animation:hero-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.hero-visual{animation-delay:.18s}
.hero h1 .line-2{animation:line-enter 1.15s cubic-bezier(.16,1,.3,1) .12s both}
@keyframes hero-enter{from{opacity:0;transform:translateY(45px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes line-enter{from{opacity:0;transform:translate(7vw,35px)}to{opacity:1;transform:translate(0,0)}}
@keyframes hero-orbit{from{transform:translate3d(0,0,0) scale(.94)}to{transform:translate3d(-3vw,3vw,0) scale(1.04)}}
@keyframes orbit-pulse{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.08);opacity:1}}
.hero .hero-overline{animation:hero-enter .8s both}
.hero-meta,.hero-bottomline{animation:fade-in .8s .35s both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* Marquee becomes a high-energy lime ribbon. */
.marquee{background:var(--lime);color:#10271f;padding:18px 0}
.marquee i{color:var(--coral);font-size:21px}
.marquee span{color:#10271f;font-weight:500;font-size:10px}
.marquee-track{animation-duration:24s}

/* Sections are deliberately distinct colour fields — no pale beige page. */
.intro-band{
  background:#d8f36a;color:#10271f;padding:145px 0 155px;
}
.intro-label{color:#b84936}
.intro-copy h2{color:#10271f;font-size:clamp(54px,8.5vw,116px);max-width:1050px;line-height:.88}
.intro-copy h2 em{color:#1c5a42}
.intro-copy p{color:#284b39;font-size:15px;max-width:550px;margin-left:22vw}
.intro-band:after{color:#10271f0b;font-size:clamp(280px,40vw,600px)}
.work-home{background:#172c24;color:#e5f2c0;padding:135px 0 125px}
.work-home .eyebrow{color:var(--coral)}
.work-home h2{color:var(--lime)}
.work-home h2 em{color:var(--coral)}
.work-home .sectionhead>p{color:#b7cbb8}
.work-home:before{color:#d8f36a0a}
.work-grid{gap:70px 32px}
.work-card:nth-child(2){margin-top:145px}
.work-card:nth-child(3){width:78%;margin-top:-40px}
.work-preview{height:560px;background:#264e3a;overflow:hidden}
.work-card:nth-child(3) .work-preview{height:490px}
.work-photo-sunday,.work-photo-forme,.work-photo-north{
  position:absolute;inset:0;transform:scale(1.015) translateY(var(--parallax-y,0));
  filter:saturate(.82) contrast(1.05);
}
.work-photo-sunday{background-image:url('https://images.squarespace-cdn.com/content/v1/6732c090fa58c64027e95cfa/2b555a2a-4b3c-4744-a68f-d0f267d91cdc/Blank_Build_Mensa_122024_Jack_Fenby_DSC_0175.jpg')}
.work-photo-forme{background-image:url('https://maxfitsa.co.za/images/portfolio/elcor-2.webp')}
.work-photo-north{background-image:url('https://coohom-biz-sg-s3.coohom.com/ins/static/case/casa-diseno-moderna-exterior-1775490643653774500.jpg')}
.work-preview:after{background:linear-gradient(180deg,#0b1d1700 25%,#0b1d17d9 100%)}
.work-card:hover .work-preview:after{background:linear-gradient(180deg,#0b1d1710 10%,#0b1d17ee 100%)}
.preview-chip{background:var(--lime);color:#10271f;font-size:8px}
.preview-overlay{
  color:var(--lime);background:transparent;padding:25px 30px 28px;
  transition:transform .5s cubic-bezier(.2,.75,.2,1);
}
.preview-overlay strong{font-size:clamp(48px,6.2vw,84px);line-height:.86}
.preview-overlay strong i{color:var(--coral)}
.preview-overlay>span{color:#d8e8d1}
.preview-overlay b{color:var(--lime);border-color:var(--lime)}
.work-card:hover .preview-overlay{transform:translateY(-9px)}
.work-info{padding:22px 3px 0;color:var(--lime)}
.work-type{color:var(--coral)}
.work-info h3{color:var(--lime);font-size:31px}
.work-info p{color:#a9c2ad}
.work-arrow{color:var(--coral);font-size:29px;transition:transform .3s}
.work-card:hover .work-arrow{transform:translate(7px,-7px)}
.work-note{color:#a9c2ad;border-color:#426454}
.work-note .textlink{color:var(--lime)}
.work-note .textlink:hover{color:var(--coral)}

/* Service columns use saturated, varied panels instead of white boxes. */
.services-home{background:#1d4c3b;color:#e5f2c0;padding:130px 0}
.services-home .eyebrow{color:var(--coral)}
.services-home h2{color:var(--lime)}
.services-home h2 em{color:#ff8b70}
.services-home .sectionhead>p{color:#c2d8c1}
.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{
  min-height:280px;padding:27px 25px 25px;
  border:1px solid transparent;border-radius:0;
  display:flex;flex-direction:column;justify-content:space-between;
  background:#285c46;color:#e5f2c0;overflow:hidden;
  transition:transform .65s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s;
}
.tile:nth-child(3n+2){background:#d8f36a;color:#10271f}
.tile:nth-child(3n){background:#ff7258;color:#10271f}
.tile .num{color:var(--coral)}
.tile:nth-child(3n+2) .num,.tile:nth-child(3n) .num{color:#244b38}
.tile h3{font-size:clamp(22px,2.4vw,31px);margin:48px 0 12px;color:inherit}
.tile p{font-size:12px;line-height:1.65;color:inherit;opacity:.84;max-width:330px}
.tile .pill{border-color:currentColor;color:inherit;opacity:.78}
.tile-mark{align-self:flex-end;font-size:25px;line-height:1;margin-top:20px;transition:transform .35s}
.tile:hover{transform:translateY(-11px) rotate(-.6deg);border-color:var(--lime);background:#326d51;box-shadow:0 24px 55px #061b13aa}
.tile:nth-child(3n+2):hover{background:#e5ff7b}
.tile:nth-child(3n):hover{background:#ff8a72}
.tile:hover .tile-mark{transform:translate(5px,-5px)}
.section-tail{color:#b5cdb7;border-color:#537862}
.section-tail .textlink{color:var(--lime)}
.who-section{background:#bce6c8;color:#10271f;padding:135px 0}
.who-section .eyebrow{color:#b84936}
.who-section h2{color:#10271f}
.who-section h2 em{color:#1c5a42}
.who-grid>div:first-child>p{color:#294c3a}
.who-section .textlink{color:#10271f}
.industry-list{gap:10px}
.industry-list .tile{
  min-height:190px;padding:23px 20px;
  background:#1d4c3b;color:#d8f36a;border:0;
}
.industry-list .tile:nth-child(3n+2){background:#d8f36a;color:#10271f}
.industry-list .tile:nth-child(3n){background:#ff7258;color:#10271f}
.industry-list .tile .num{color:#ff927b}
.industry-list .tile:nth-child(3n+2) .num,.industry-list .tile:nth-child(3n) .num{color:#284b39}
.industry-list .tile h3{font-size:21px;margin:32px 0 9px}
.industry-list .tile p{font-size:11px;opacity:.85}
.industry-list .tile:hover{transform:translateY(-7px)}

/* Feature section: cinematic dark green with animated giant glyph. */
.feature-band{background:#0b1d17;color:var(--lime);padding:135px 0;overflow:hidden}
.feature-band:after{color:#d8f36a0c;animation:glyph-drift 15s ease-in-out infinite alternate}
@keyframes glyph-drift{to{transform:translate(-3vw,2vw) rotate(-7deg)}}
.feature-band h2{color:var(--lime);font-size:clamp(60px,9vw,120px)}
.feature-band h2 em{color:var(--coral)}
.feature-copy p{color:#bdd3bf}
.feature-band .eyebrow{color:#bce6c8}
.feature-band .btn-light{background:var(--lime);border-color:var(--lime);color:#10271f}
.feature-band .btn-light:hover{background:var(--coral);border-color:var(--coral)}

/* Process on bright lime, with oversized numbers and animated rules. */
.process-home{background:#d8f36a;color:#10271f;padding:135px 0}
.process-home .eyebrow{color:#b84936}
.process-home h2{color:#10271f}
.process-home h2 em{color:#1c5a42}
.process-home .sectionhead>p{color:#294c3a}
.process-grid{border-color:#779b6d}
.process-grid article{border-color:#779b6d;position:relative;overflow:hidden}
.process-grid article:after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--coral);transition:width .65s cubic-bezier(.2,.75,.2,1)}
.process-grid article:hover:after{width:100%}
.process-grid article>span{font-size:12px;color:#c24f3c}
.process-grid h3{color:#10271f;font-size:23px}
.process-grid p{color:#36553f}

/* CTA and footer finish with a loud colour hit. */
.cta-home{background:#ff7258;color:#10271f;padding:125px 0 30px}
.cta-home:before{color:#10271f0c}
.cta-home .eyebrow{color:#183d2f}
.cta-home h2,.cta-home h2 em{color:#10271f}
.cta-link{background:#10271f;color:var(--lime);padding:20px 27px;transition:gap .35s,background .3s,transform .3s}
.cta-link:hover{background:var(--lime);color:#10271f;gap:48px;transform:translateY(-5px)}
.cta-foot{border-color:#c95442;color:#183d2f}
.footer{background:#10271f;color:var(--lime);padding:75px 0 25px}
.footer .logo{color:var(--lime)}
.footer p{color:#b4cbb6}
.footer-topline{display:flex;justify-content:space-between;padding-bottom:25px;border-bottom:1px solid #426454;color:var(--coral);font:8px var(--mono);letter-spacing:.16em}
.footergrid{padding:55px 0 45px}
.footerlinks{color:#b9d0bc}
.footerlinks b{color:var(--coral)}
.footerlinks a{transition:color .2s,transform .2s}
.footerlinks a:hover{color:var(--lime);transform:translateX(5px)}
.footnote{border-color:#426454;color:#91ad98}

/* Interior pages inherit the dark identity; panels are coloured, not white. */
body:has(.pagehero){background:#10271f;color:#e5f2c0}
.pagehero{background:#10271f;color:var(--lime);padding:130px 0 100px}
.pagehero .eyebrow{color:var(--coral)}
.pagehero h1{color:var(--lime)}
.pagehero h1 em{color:var(--coral)}
.pagehero:after{border-color:#ff725880;box-shadow:0 0 0 18px #ff725814,0 0 0 36px #ff725809}
.lead{color:#bfd3bd}
.section{background:#17382c;color:#e5f2c0}
.section:nth-of-type(even){background:#10271f}
.section h2,.section h3{color:var(--lime)}
.section p{color:#b9d0bc}
.grid2,.grid3{gap:15px}
.dark{background:#0b1d17;color:var(--lime)}
.dark h2,.dark h3{color:var(--lime)}
.dark p{color:#c0d4c0}
.dark .manifesto{color:var(--coral)}
.note{background:#d8f36a;color:#10271f;border:0}
.package{
  background:#1d4c3b;color:#e5f2c0;border:0;border-top:3px solid #8bc49c;
  padding:33px 27px;min-height:470px;position:relative;overflow:hidden;
  transition:transform .55s cubic-bezier(.16,1,.3,1),background .3s;
}
.package:nth-child(2){background:#d8f36a;color:#10271f;border-color:#ff7258}
.package:nth-child(3){background:#ff7258;color:#10271f;border-color:#d8f36a}
.package:hover{transform:translateY(-12px) rotate(-.5deg);box-shadow:0 25px 55px #0004}
.package.featured{background:#d8f36a;color:#10271f;border:0;border-top:4px solid #ff7258;transform:translateY(-15px)}
.package.featured:hover{transform:translateY(-23px)}
.package h3,.package .price{color:inherit}
.package p,.package li{color:inherit;opacity:.85}
.package li{border-color:currentColor;display:flex;gap:9px}
.package li span{color:var(--coral)}
.package .eyebrow{color:#ff927b}
.package:nth-child(2) .eyebrow,.package:nth-child(3) .eyebrow{color:#284b39}
.package .small{color:inherit;opacity:.75}
.package .btn{background:#10271f;color:var(--lime);border-color:#10271f}
.package:nth-child(2) .btn,.package:nth-child(3) .btn{background:#10271f;color:var(--lime)}
.package-index{position:absolute;right:20px;top:14px;font-size:85px;font-weight:900;letter-spacing:-.1em;opacity:.09}
.formgrid{background:#1d4c3b;border:0;padding:35px}
.field label{color:var(--lime)}
.field input,.field textarea,.field select{background:#10271f;border:1px solid #557763;color:#e5f2c0}
.field input::placeholder,.field textarea::placeholder{color:#92ad98}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--lime);box-shadow:0 0 0 3px #d8f36a30}
.small{color:#a8c2ac}
.article{border-color:#426454}
.article h3{color:var(--lime)}
.article p{color:#b9d0bc}
.cta-band{background:#d8f36a;color:#10271f;border:0}
.cta-band h2{color:#10271f}
.cta-band .btn{background:#10271f;color:var(--lime)}
.textlink{color:var(--lime)}
.textlink:hover{color:var(--coral)}
.btn{background:var(--lime);color:#10271f;border-color:var(--lime);transform:translate(var(--hover-x,0),var(--hover-y,0));transition:transform .3s cubic-bezier(.2,.75,.2,1),background .25s,color .25s,border-color .25s,box-shadow .3s}
.btn:hover{background:var(--coral);color:#10271f;border-color:var(--coral);box-shadow:0 16px 35px #0003}
.btn-ghost{background:transparent;color:var(--lime);border-color:#76927e}
.btn-ghost:hover{background:var(--lime);color:#10271f;border-color:var(--lime)}
.btn-light{background:var(--lime);color:#10271f;border-color:var(--lime)}
.formgrid .btn{align-self:flex-start}

/* Stronger visible scroll choreography. */
.reveal{
  opacity:0;transform:translate3d(0,54px,0) scale(.985);
  clip-path:inset(0 0 7% 0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);clip-path:inset(0 0 0 0)}
.work-card.reveal,.tile.reveal,.package.reveal{transform:translate3d(0,60px,0) rotate(.6deg);filter:saturate(.65)}
.work-card.reveal.is-visible,.tile.reveal.is-visible,.package.reveal.is-visible{transform:translate3d(0,0,0) rotate(0);filter:saturate(1)}
.scroll-progress{height:4px;background:var(--coral);box-shadow:0 0 12px #ff725866;z-index:120}
.work-preview:before{content:"";position:absolute;z-index:1;inset:0;background:var(--lime);transform:scaleY(1);transform-origin:bottom;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.work-card.is-visible .work-preview:before{transform:scaleY(0)}
.work-card .work-preview{isolation:isolate}
.work-photo-sunday,.work-photo-forme,.work-photo-north{will-change:transform}
.hero-image-main img,.hero-image-small img{will-change:transform}
.tile,.package,.work-card,.navcta,.btn{will-change:transform}

/* Responsive menu: full-screen overlay with animated link cascade. */
@media(max-width:900px){
  .wrap{width:calc(100% - 42px)}
  .nav{padding-inline:22px}
  .navlinks{gap:13px}
  .navlinks a{font-size:10px}
}
@media(max-width:760px){
  .wrap{width:calc(100% - 34px)}
  .topline{font-size:7px}
  .nav{padding:13px 17px}
  .menu-toggle{display:flex;margin-left:auto}
  .navcta{padding:12px 13px;font-size:9px}
  .navlinks{
    display:flex;visibility:hidden;pointer-events:none;
    position:fixed;inset:0;z-index:1;top:0;left:0;right:0;bottom:0;
    background:#10271f;padding:105px 28px 40px;
    flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
    border:0;opacity:0;transform:translateY(-16px);
    transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1),visibility .35s;
  }
  .navlinks.open{display:flex;visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0)}
  .navitem>a{font-size:clamp(25px,7vw,42px);padding:13px 0;color:var(--lime);font-weight:700;letter-spacing:-.06em}
  .navitem>a:after{height:3px;bottom:6px}
  .navitem>a i{font-size:17px}
  .navitem.has-panel .nav-panel{display:none}
  .navlinks.open .navitem{animation:mobile-link-in .55s both}
  .navlinks.open .navitem:nth-child(2){animation-delay:.05s}
  .navlinks.open .navitem:nth-child(3){animation-delay:.1s}
  .navlinks.open .navitem:nth-child(4){animation-delay:.15s}
  .navlinks.open .navitem:nth-child(5){animation-delay:.2s}
  .navlinks.open .navitem:nth-child(6){animation-delay:.25s}
  @keyframes mobile-link-in{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
  .menu-open .menu-toggle{z-index:5;border-color:var(--coral);color:var(--coral)}
  .hero{min-height:unset;padding:35px 0 23px}
  .hero-layout{grid-template-columns:1fr;padding:40px 0 32px}
  .hero h1{font-size:clamp(62px,14vw,108px)}
  .hero-visual{min-height:420px;margin-top:28px}
  .hero-image-main{width:78%;height:86%;right:4%}
  .hero-image-small{width:42%;height:36%;left:0}
  .hero-sticker{width:112px;height:112px}
  .intro-band,.work-home,.services-home,.who-section,.process-home{padding:82px 0}
  .intro-band-inner{grid-template-columns:1fr;gap:22px}
  .intro-copy p{margin-left:0}
  .work-grid{grid-template-columns:1fr;gap:40px}
  .work-card:nth-child(2){margin-top:0}
  .work-card:nth-child(3){grid-column:auto;width:100%;margin:0}
  .work-preview,.work-card:nth-child(3) .work-preview{height:420px}
  .tiles,.grid3{grid-template-columns:1fr 1fr}
  .tile{min-height:255px}
  .who-grid,.feature-grid,.split{grid-template-columns:1fr;gap:35px}
  .industry-list{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .process-grid article:nth-child(2){border-right:0}
  .pagehero{padding:80px 0 65px}
  .package.featured{transform:none}
  .package.featured:hover{transform:translateY(-8px)}
}
@media(max-width:480px){
  .navcta{display:none}
  .hero h1{font-size:clamp(56px,15vw,78px)}
  .hero-visual{min-height:340px}
  .hero-sticker{width:95px;height:95px}
  .tiles,.grid3,.industry-list{grid-template-columns:1fr}
  .tile{min-height:220px}
  .work-preview,.work-card:nth-child(3) .work-preview{height:360px}
  .process-grid{grid-template-columns:1fr}
  .process-grid article{border-right:0;border-bottom:1px solid #779b6d;min-height:140px}
  .footer-topline{font-size:7px}
  .footergrid{grid-template-columns:1fr}
  .footergrid>div:first-child{grid-column:auto}
  .formgrid{grid-template-columns:1fr;padding:20px}
  .field.full{grid-column:auto}
}
@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;clip-path:none;filter:none}
}

@media(max-width:760px){.menu-open .logo{position:relative;z-index:5}.menu-open .navcta{visibility:hidden}}


/* =========================================================
   WEBIN SPHERE / LIGHT CHARCOAL ART DIRECTION
   A balanced editorial system: light charcoal, sage, chalk,
   muted coral and selective charcoal contrast.
   ========================================================= */
:root{
  --paper:#c7cbc5;
  --paper2:#e1e6df;
  --ink:#28332d;
  --muted:#526057;
  --line:#aab4aa;
  --forest:#34463c;
  --forest2:#526d5d;
  --mint:#dce7dc;
  --mint2:#b8cabb;
  --coral:#d97860;
  --butter:#e4dcae;
  --white:#e8ece5;
  --lime:#d9e3b4;
  --charcoal:#39413c;
}
html,body{background:#c7cbc5;color:#28332d}
p{color:#526057}
::selection{background:#d97860;color:#fff}
.wrap{width:min(1360px,calc(100% - 76px))}
.topline{color:#5b6a60;border-color:#aab4aa}
.nav{background:rgba(199,203,197,.95);color:#28332d;border-color:#aab4aa;backdrop-filter:blur(18px)}
.nav.is-scrolled{background:rgba(199,203,197,.98);box-shadow:0 12px 35px #26352b18}
.logo{color:#28332d}
.navlinks{color:#3d4d43}
.navitem>a{color:#3d4d43}
.navitem>a:hover,.navitem>a.is-current{color:#24342b}
.navitem>a:after{background:#d97860}
.navcta{background:#34463c;color:#e9eee5;border-color:#34463c}
.navcta:before{background:#d97860}
.navcta:hover{color:#26332d}
.navitem.has-panel .nav-panel{background:#e1e6df;border:1px solid #aab4aa;box-shadow:0 25px 60px #26352b25}
.nav-panel-kicker,.nav-panel-foot{color:#d06d55}
.nav-panel>a{color:#28332d;border-color:#bac4b8}
.nav-panel>a small{color:#5b6a60}
.nav-panel>a:hover{color:#d06d55}
.menu-toggle{color:#34463c;border-color:#84958a}

/* Landing page hero: light charcoal canvas, deep readable type. */
.hero{background:#c2c8c1;color:#28332d;min-height:730px}
.hero:before{background:#dce7dc;opacity:.96}
.hero:after{border-color:#d9786080;box-shadow:0 0 0 20px #d9786010,0 0 0 40px #d9786008}
.hero-meta{color:#5b6a60;border-color:#9eaaa0}
.hero-overline{color:#b85d48}
.hero h1{color:#28332d}
.hero h1 em{color:#526d5d}
.hero-description p{color:#45554b}
.hero-bottomline{color:#5b6a60;border-color:#9eaaa0}
.hero-image-small{border-color:#c2c8c1;box-shadow:0 18px 45px #28332d24}
.hero-image-label{color:#34463c}
.hero-sticker{background:#d97860;color:#28332d}
.hero-sticker b{color:#e4dcae}
.hero .eyebrow{color:#526d5d}
.hero .eyebrow:before{background:#d97860}
.hero .btn{background:#34463c;border-color:#34463c;color:#e9eee5}
.hero .btn:hover{background:#d97860;border-color:#d97860;color:#28332d}
.hero .btn-ghost{background:transparent;color:#28332d;border-color:#7f9184}
.hero .btn-ghost:hover{background:#34463c;color:#e9eee5;border-color:#34463c}

/* Sections alternate tone and texture instead of repeating dark blocks. */
.marquee{background:#39413c;color:#e4dcae}
.marquee span{color:#e4dcae}
.marquee i{color:#d97860}
.intro-band{background:#e1e6df;color:#28332d;padding:125px 0 140px}
.intro-band:after{color:#34463c0a}
.intro-label{color:#b85d48}
.intro-copy h2{color:#28332d}
.intro-copy h2 em{color:#526d5d}
.intro-copy p{color:#526057}
.work-home{background:#d4ded4;color:#28332d;padding:120px 0 115px}
.work-home:before{color:#34463c0a}
.work-home .eyebrow{color:#b85d48}
.work-home h2{color:#28332d}
.work-home h2 em{color:#526d5d}
.work-home .sectionhead>p{color:#526057}
.work-grid{gap:60px 32px}
.work-card:nth-child(2){margin-top:120px}
.work-card:nth-child(3){width:76%;margin-top:-25px}
.work-preview{height:530px;background:#87978a}
.work-card:nth-child(3) .work-preview{height:460px}
.work-photo-sunday,.work-photo-forme,.work-photo-north{filter:saturate(.88) contrast(1.02)}
.work-preview:after{background:linear-gradient(180deg,#202c2500 25%,#202c25c7 100%)}
.preview-chip{background:#e4dcae;color:#28332d}
.preview-overlay{color:#f0f2e9;background:linear-gradient(90deg,#28332ddd,#28332d88);padding:22px 25px}
.preview-overlay>span{color:#dce7dc}
.preview-overlay strong{color:#f0f2e9}
.preview-overlay strong i{color:#f1a18a}
.preview-overlay b{color:#e4dcae;border-color:#e4dcae}
.work-info{color:#28332d}
.work-info h3{color:#28332d}
.work-info p{color:#526057}
.work-type{color:#b85d48}
.work-arrow{color:#d06d55}
.work-note{color:#526057;border-color:#aab4aa}
.work-note .textlink{color:#28332d}
.work-note .textlink:hover{color:#b85d48}

/* A cinematic interlude creates a deliberate pause between work and services. */
.studio-interlude{min-height:490px;display:grid;grid-template-columns:1.1fr .9fr;background:#39413c;color:#e8ece5;overflow:hidden}
.interlude-image{min-height:490px;position:relative;overflow:hidden}
.interlude-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#39413c 100%)}
.interlude-image img{width:100%;height:100%;min-height:490px;object-fit:cover;filter:saturate(.72);transition:transform 1.2s cubic-bezier(.2,.75,.2,1)}
.studio-interlude:hover .interlude-image img{transform:scale(1.045)}
.interlude-copy{padding:70px clamp(30px,6vw,100px);display:flex;flex-direction:column;justify-content:center;position:relative}
.interlude-copy .eyebrow{color:#e4dcae}
.interlude-copy p{font-size:clamp(38px,5vw,70px);font-weight:700;line-height:.98;letter-spacing:-.075em;color:#e8ece5;margin:28px 0}
.interlude-copy p em{font:500 1em var(--serif);color:#d9e3b4}
.interlude-index{font:8px var(--mono);letter-spacing:.16em;color:#b9c9bb}

/* Services become open editorial rows, not cards or white columns. */
.services-home{background:#e8ebe5;color:#28332d;padding:120px 0}
.services-home .eyebrow{color:#b85d48}
.services-home h2{color:#28332d}
.services-home h2 em{color:#526d5d}
.services-home .sectionhead>p{color:#526057}
.services-home .tiles{display:block;border-top:1px solid #aab4aa}
.services-home .tile.service-item{
  min-height:0;padding:28px 8px;
  display:grid;grid-template-columns:.45fr 1.5fr 1fr 40px;
  align-items:center;gap:25px;
  background:transparent;color:#28332d;border:0;border-bottom:1px solid #aab4aa;
  transition:padding .4s cubic-bezier(.2,.75,.2,1),background .35s;
}
.services-home .service-item .num{color:#b85d48;align-self:start;padding-top:7px}
.services-home .service-item .tile-body{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:center}
.services-home .service-item h3{font-size:clamp(22px,2.5vw,34px);margin:0;color:#28332d}
.services-home .service-item p{font-size:12px;margin:0;max-width:360px;color:#526057}
.services-home .service-item .pill{border:0;border-bottom:1px solid #aab4aa;padding:5px 4px 5px 0;margin:4px 10px 0 0;color:#526d5d}
.services-home .service-item .tile-mark{color:#d06d55;font-size:30px;margin:0}
.services-home .service-item:hover{background:#dce7dc;padding-left:18px;padding-right:18px;transform:none;box-shadow:none}
.services-home .service-item:hover .tile-mark{transform:translate(5px,-5px)}
.services-home .section-tail{color:#526057;border-color:#aab4aa}
.services-home .section-tail .textlink{color:#28332d}

/* Industry panel gets a mid-tone sage field with staggered editorial blocks. */
.who-section{background:#aebcaf;color:#28332d;padding:120px 0}
.who-section .eyebrow{color:#b85d48}
.who-section h2{color:#28332d}
.who-section h2 em{color:#526d5d}
.who-grid>div:first-child>p{color:#45554b}
.who-section .textlink{color:#28332d}
.industry-list{gap:0 22px}
.industry-list .tile{
  min-height:170px;padding:22px 0;
  background:transparent;color:#28332d;border:0;border-top:1px solid #839487;
  display:flex;flex-direction:column;justify-content:space-between;
}
.industry-list .tile:nth-child(3n+2),.industry-list .tile:nth-child(3n){background:transparent;color:#28332d}
.industry-list .tile .num,.industry-list .tile:nth-child(3n+2) .num,.industry-list .tile:nth-child(3n) .num{color:#b85d48}
.industry-list .tile h3{font-size:21px;margin:28px 0 8px;color:#28332d}
.industry-list .tile p{font-size:11px;color:#45554b;opacity:1}
.industry-list .tile:hover{background:#cbd7ca;padding-left:12px;transform:none;box-shadow:none}

/* Dark section used once as contrast, with restrained light type. */
.feature-band{background:#39413c;color:#e8ece5;padding:115px 0}
.feature-band h2{color:#e8ece5}
.feature-band h2 em{color:#d9e3b4}
.feature-band .eyebrow{color:#e4dcae}
.feature-band:after{color:#e8ece50a}
.feature-copy p{color:#c5cec6}
.feature-band .btn-light{background:#e4dcae;color:#28332d;border-color:#e4dcae}
.feature-band .btn-light:hover{background:#d97860;border-color:#d97860}
.process-home{background:#c7cbc5;color:#28332d;padding:120px 0}
.process-home h2{color:#28332d}
.process-home h2 em{color:#526d5d}
.process-home .eyebrow{color:#b85d48}
.process-home .sectionhead>p{color:#526057}
.process-grid{border-color:#9eaaa0}
.process-grid article{border-color:#9eaaa0}
.process-grid article:after{background:#d97860}
.process-grid article>span{color:#b85d48}
.process-grid h3{color:#28332d}
.process-grid p{color:#526057}
.cta-home{background:#d97860;color:#28332d;padding:110px 0 28px}
.cta-home:before{color:#28332d0b}
.cta-home .eyebrow,.cta-home h2,.cta-home h2 em{color:#28332d}
.cta-link{background:#34463c;color:#e8ece5}
.cta-link:hover{background:#e4dcae;color:#28332d}
.cta-foot{border-color:#bd604b;color:#28332d}
.footer{background:#39413c;color:#e8ece5}
.footer .logo{color:#e8ece5}
.footer p{color:#c5cec6}
.footerlinks{color:#c5cec6}
.footerlinks b{color:#e4dcae}
.footerlinks a:hover{color:#e4dcae}
.footnote{border-color:#66736a;color:#b6c1b8}
.footer-topline{border-color:#66736a;color:#e4dcae}

/* Inner pages use the same light-charcoal base and only selected dark bands. */
body:has(.pagehero){background:#c7cbc5;color:#28332d}
.pagehero{background:#c2c8c1;color:#28332d;padding:110px 0 85px}
.pagehero .eyebrow{color:#b85d48}
.pagehero h1{color:#28332d}
.pagehero h1 em{color:#526d5d}
.pagehero:after{border-color:#d9786080;box-shadow:0 0 0 18px #d9786010,0 0 0 36px #d9786008}
.lead{color:#45554b}
.section{background:#e1e6df;color:#28332d}
.section:nth-of-type(even){background:#c7cbc5}
.section h2,.section h3{color:#28332d}
.section p{color:#526057}
.dark{background:#39413c;color:#e8ece5}
.dark h2,.dark h3{color:#e8ece5}
.dark p{color:#c5cec6}
.dark .manifesto{color:#e4dcae}
.note{background:#dce7dc;color:#28332d}
.package{background:#dce7dc;color:#28332d;border:0;border-top:3px solid #839889}
.package:nth-child(2){background:#c2d1c3;color:#28332d;border-color:#d97860}
.package:nth-child(3){background:#e4dcae;color:#28332d;border-color:#526d5d}
.package.featured{background:#526d5d;color:#f0f2e9;border-top:3px solid #d97860}
.package.featured h3,.package.featured .price{color:#f0f2e9}
.package.featured p,.package.featured li{color:#e0e8df}
.package.featured .small{color:#d6e0d7}
.package .eyebrow{color:#b85d48}
.package.featured .eyebrow{color:#e4dcae}
.package li{border-color:#aab4aa}
.package.featured li{border-color:#8ca294}
.package .btn{background:#34463c;color:#e8ece5;border-color:#34463c}
.package.featured .btn{background:#e4dcae;color:#28332d;border-color:#e4dcae}
.package-index{color:#28332d}
.formgrid{background:#dce7dc;border:0;padding:30px}
.field label{color:#45554b}
.field input,.field textarea,.field select{background:#edf0e9;border:1px solid #aab4aa;color:#28332d}
.field input::placeholder,.field textarea::placeholder{color:#738077}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#526d5d;box-shadow:0 0 0 3px #b8cabb66}
.small{color:#526057}
.article{border-color:#aab4aa}
.article h3{color:#28332d}
.article p{color:#526057}
.cta-band{background:#dce7dc;color:#28332d}
.cta-band h2{color:#28332d}
.cta-band .btn{background:#34463c;color:#e8ece5}
.textlink{color:#28332d}
.textlink:hover{color:#b85d48}
.btn{background:#34463c;color:#e8ece5;border-color:#34463c;transform:translate(var(--hover-x,0),var(--hover-y,0))}
.btn:hover{background:#d97860;color:#28332d;border-color:#d97860}
.btn-ghost{background:transparent;color:#28332d;border-color:#7e8c81}
.btn-ghost:hover{background:#34463c;color:#e8ece5;border-color:#34463c}
.btn-light{background:#e4dcae;color:#28332d;border-color:#e4dcae}

/* Reveal and interaction polish. */
.reveal{opacity:0;transform:translate3d(0,38px,0);clip-path:inset(0 0 5% 0);transition:opacity .8s cubic-bezier(.2,.75,.2,1),transform .8s cubic-bezier(.2,.75,.2,1),clip-path .8s}
.reveal.is-visible{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.work-card.reveal,.tile.reveal,.package.reveal{transform:translate3d(0,42px,0) scale(.985);filter:saturate(.8)}
.work-card.reveal.is-visible,.tile.reveal.is-visible,.package.reveal.is-visible{transform:none;filter:saturate(1)}
.scroll-progress{background:#d97860;box-shadow:0 0 10px #d9786066}
.btn,.navcta,.cta-link{will-change:transform}
@media(max-width:760px){
 .wrap{width:calc(100% - 36px)}
 .services-home .tile.service-item{grid-template-columns:58px 1fr 30px;gap:14px;padding:22px 4px}
 .services-home .service-item .tile-body{grid-template-columns:1fr;gap:8px}
 .services-home .service-item .tile-body>div{margin-top:4px}
 .studio-interlude{grid-template-columns:1fr}
 .interlude-image,.interlude-image img{min-height:300px;height:300px}
 .interlude-image:after{background:linear-gradient(180deg,transparent 65%,#39413c 100%)}
 .interlude-copy{padding:36px 28px 48px}
 .who-grid,.feature-grid,.split{grid-template-columns:1fr;gap:30px}
 .industry-list{grid-template-columns:1fr 1fr}
 .work-grid{grid-template-columns:1fr}
 .work-card:nth-child(2){margin-top:0}
 .work-card:nth-child(3){width:100%;margin-top:0}
}
@media(max-width:480px){
 .industry-list{grid-template-columns:1fr}
 .services-home .tile.service-item{grid-template-columns:48px 1fr 22px}
 .services-home .service-item h3{font-size:22px}
 .hero{min-height:unset}
 .hero-visual{min-height:330px}
 .work-preview,.work-card:nth-child(3) .work-preview{height:360px}
}

@media(max-width:760px){
 .navlinks{background:#39413c}
 .navitem>a{color:#e8ece5}
 .navitem>a:hover,.navitem>a.is-current{color:#e4dcae}
 .navitem>a:after{background:#d97860}
 .menu-open .menu-toggle{color:#d97860;border-color:#d97860}
 .menu-open .logo{color:#e8ece5}
}