:root{
  --bone:#F4EFE8;
  --bone-2:#ECE5DB;
  --ink:#0A0A0A;
  --ink-soft:#6E665B;
  --espresso:#000000;
  --espresso-soft:#928D87;
  --cream:#EFE9DF;
  --line:#D9D1C4;
  --line-dark:#242424;
  --clay:#9E5A3C;
  --container:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-synthesis:none;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--clay);color:var(--bone)}

/* ---------- type ---------- */
.serif{font-family:'Prata',serif}
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  font-weight:500;color:var(--ink-soft);display:inline-block;
}
h1,h2,h3{font-family:'Prata',serif;font-weight:400;line-height:1.16;letter-spacing:0}
h1 em,h2 em,h3 em{font-family:'Prata',serif;font-style:normal;font-weight:500;letter-spacing:.01em}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-soft);line-height:1.7;font-weight:300}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1.4rem,5vw,4.5rem)}
section{position:relative}
.pad{padding:clamp(5rem,11vw,9.5rem) 0}
.rule{height:1px;background:var(--line);border:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  padding:1.05em 2em;border:1px solid var(--ink);color:var(--ink);
  background:transparent;cursor:pointer;transition:.5s var(--ease);
  border-radius:0;
}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn--light{border-color:var(--cream);color:var(--cream)}
.btn--light:hover{background:var(--cream);color:var(--espresso)}
.btn--solid{background:var(--ink);color:var(--bone)}
.btn--solid:hover{background:var(--clay);border-color:var(--clay)}
.tlink{
  display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;padding-bottom:.45em;position:relative;
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .55s var(--ease)}
.tlink:hover::after{transform:scaleX(0);transform-origin:right}
.tlink .arr{transition:transform .5s var(--ease)}
.tlink:hover .arr{transform:translateX(5px)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem clamp(1.4rem,5vw,4.5rem);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.scrolled{background:var(--bone);padding:1rem clamp(1.4rem,5vw,4.5rem);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;flex-direction:column;line-height:1;color:var(--cream);transition:color .5s var(--ease)}
.nav.scrolled .brand{color:var(--clay)}
.brand b{font-family:'Prata',serif;font-weight:400;font-size:1.45rem;letter-spacing:.2em}
.brand span{font-size:.5rem;letter-spacing:.42em;text-transform:uppercase;margin-top:.35em;opacity:.8}
.nav-links{display:flex;align-items:center;gap:2.4rem}
.nav-links a{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--cream);transition:color .5s var(--ease),opacity .3s}
.nav.scrolled .nav-links a{color:var(--ink)}
.nav-links a:not(.nav-cta):hover{opacity:.55}
.nav-cta{border:1px solid currentColor;padding:.85em 1.6em}
.nav-cta:hover{background:var(--cream);color:var(--espresso)!important;border-color:var(--cream)}
.nav.scrolled .nav-cta:hover{background:var(--ink);color:var(--bone)!important;border-color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.5px;background:var(--cream);transition:.4s var(--ease)}
.nav.scrolled .burger span{background:var(--ink)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:95;background:var(--espresso);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.8rem;
  opacity:0;pointer-events:none;transition:opacity .55s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{color:var(--cream);font-family:'Prata',serif;font-size:2.2rem;font-weight:500}
.mobile-menu .close{position:absolute;top:1.6rem;right:1.6rem;background:none;border:0;color:var(--cream);font-size:2rem;cursor:pointer;font-family:'Prata',serif}

/* ---------- hero ---------- */
.hero{height:100vh;min-height:620px;position:relative;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-slide.active{opacity:1}
.hero-slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}
.hero-slide . kb,.hero-slide-img{position:absolute;inset:0;animation:kb 9s linear infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hero-content{position:absolute;z-index:3;left:0;bottom:clamp(3.5rem,10vh,7rem);width:100%}
.hero-content .container{display:flex;flex-direction:column;gap:1.5rem;max-width:var(--container)}
.hero .eyebrow{color:var(--cream);opacity:.9}
.hero h1{color:var(--cream);font-size:clamp(2.9rem,7vw,6rem);font-weight:500;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--cream)}
.hero p{color:var(--cream);max-width:46ch;font-weight:300;opacity:.92;font-size:clamp(1rem,1.4vw,1.15rem)}
.hero-actions{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.6rem}
/* Slide progress. One line per room under the buttons; the active line fills
   over --hero-dur and widens to show the room's name. The fill animation is
   the timer (app.js listens for animationend), so the line and the slide can
   never drift apart. */
.hero-progress{display:flex;gap:clamp(.9rem,2vw,1.6rem);width:min(100%,520px);margin-top:clamp(.6rem,2.4vh,1.6rem)}
.hp-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.85rem;padding:.7rem 0;margin:0;
  background:none;border:0;color:var(--cream);font:inherit;text-align:left;cursor:pointer;
  transition:flex-grow .9s var(--ease)}
.hp-item.is-active{flex-grow:2.4}
.hp-line{position:relative;display:block;height:2px;background:rgba(239,233,223,.26);overflow:hidden}
.hp-fill{position:absolute;inset:0;background:var(--cream);transform:scaleX(0);transform-origin:left center}
.hp-item.is-active .hp-fill{animation:hpFill var(--hero-dur,6.5s) linear forwards}
.hero-progress.is-paused .hp-item.is-active .hp-fill{animation-play-state:paused}
@keyframes hpFill{to{transform:scaleX(1)}}
.hp-label{display:flex;align-items:baseline;gap:.75rem;min-width:0;white-space:nowrap;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase}
.hp-num{opacity:.5;font-variant-numeric:tabular-nums;transition:opacity .5s var(--ease)}
.hp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(5px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hp-item.is-active .hp-num,.hp-item:hover .hp-num{opacity:1}
.hp-item.is-active .hp-name{opacity:.9;transform:none;transition-delay:.3s}
.hp-item:focus-visible{outline:1px solid var(--cream);outline-offset:5px}
@media(prefers-reduced-motion:reduce){
  /* no autoplay, so the active line simply reads as full */
  .hp-item.is-active .hp-fill{transform:scaleX(1)}
}
@media(max-width:760px){
  .hero-progress{width:100%;gap:.9rem}
  .hp-item.is-active{flex-grow:3}
  .hp-label{font-size:.6rem;letter-spacing:.18em;gap:.6rem}
  /* the vertical label ran into the eyebrow on phones */
  .scroll-cue{display:none}
  /* equal-width buttons, side by side when they fit, full width when they don't */
  .hero-actions{gap:.8rem}
  .hero-actions .btn{flex:1 1 0;min-width:max-content;justify-content:center}
}
.scroll-cue{position:absolute;z-index:3;right:clamp(1.4rem,5vw,4.5rem);top:50%;transform:translateY(-50%) rotate(90deg);
  color:var(--cream);font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;opacity:.7}

/* ---------- intro / manifesto ---------- */
.intro{text-align:center}
.intro .container{max-width:1020px}
.intro h2{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:400;line-height:1.22;letter-spacing:.01em}
.intro h2 em{font-style:normal;color:var(--clay)}
.intro p{margin-top:2rem;max-width:60ch;margin-left:auto;margin-right:auto}

/* ---------- section heading ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2,.sec-head h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:500}
.sec-head .eyebrow{display:block;margin-bottom:1.1rem}

/* ---------- work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.4vw,2.2rem)}
.work-item{position:relative;overflow:hidden;cursor:pointer}
.work-item .imgwrap{overflow:hidden;position:relative}
.work-item .imgwrap::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .6s var(--ease)}
.work-item:hover .imgwrap::after{background:rgba(0,0,0,.12)}
.work-item img{transition:transform 1.1s var(--ease)}
.work-item:hover img{transform:scale(1.05)}
.work-item .imgwrap{aspect-ratio:4/5}
.work-item.wide .imgwrap{aspect-ratio:16/11}
.work-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1.1rem}
.work-meta h3{font-size:1.5rem;font-weight:500}
.work-meta .type{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.work-view{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);
  opacity:0;transform:translateY(6px);transition:.5s var(--ease);margin-top:.5rem;display:inline-flex;gap:.5em;align-items:center}
.work-item:hover .work-view{opacity:1;transform:translateY(0)}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c5{grid-column:span 5}.c12{grid-column:span 12}.c4{grid-column:span 4}
.work-foot{margin-top:clamp(2.8rem,5vw,4rem);text-align:center}

/* ---------- why (dark) ---------- */
.dark{background:var(--espresso);color:var(--cream)}
.dark .eyebrow{color:var(--espresso-soft)}
.dark .sec-head h2,.dark .sec-head h1{color:var(--cream)}
.why-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0}
.why-item{position:relative;padding-right:clamp(1rem,2vw,2rem)}
.why-item .idx{font-family:'Prata',serif;font-weight:500;font-size:clamp(3.4rem,6vw,5.6rem);
  line-height:.8;color:var(--clay);display:block;margin-bottom:1.3rem}
.why-item h3{font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:500;color:var(--cream);margin-bottom:1rem;max-width:15ch;line-height:1.12}
.why-item p{color:var(--espresso-soft);font-weight:300;font-size:1.05rem;line-height:1.75;max-width:36ch}
.why-item:nth-child(1){grid-column:1/6;grid-row:1}
.why-item:nth-child(2){grid-column:8/13;grid-row:1;margin-top:7rem}
.why-item:nth-child(3){grid-column:1/5;grid-row:2;margin-top:4.5rem}
.why-item:nth-child(4){grid-column:7/13;grid-row:2;margin-top:9rem}
.why-item:nth-child(5){grid-column:2/9;grid-row:3;margin-top:4.5rem}

/* ---------- process ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line)}
.proc-step{padding:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,2.4vw,2.6rem) clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,1.8vw,1.8rem);
  border-right:1px solid var(--line);position:relative}
.proc-step:first-child{padding-left:0}
.proc-step:last-child{border-right:0;padding-right:0}
.proc-step .num{font-family:'Prata',serif;font-size:1rem;color:var(--clay);letter-spacing:.1em}
.proc-step .dot{width:9px;height:9px;border-radius:50%;background:var(--bone);border:1px solid var(--ink);
  position:absolute;top:-5px;left:clamp(1.2rem,1.8vw,1.8rem)}
.proc-step:first-child .dot{left:0}
.proc-step.fill .dot{background:var(--clay);border-color:var(--clay)}
.proc-step h3{font-size:1.3rem;font-weight:500;margin:1.1rem 0 .5rem}
.proc-step p{font-size:.86rem;color:var(--ink-soft);line-height:1.6}
.proc-time{margin-top:clamp(2.6rem,5vw,3.8rem);display:flex;gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--line)}
.proc-time .t{flex:1;min-width:180px}
.proc-time .t b{font-family:'Prata',serif;font-size:2.6rem;font-weight:500;display:block;line-height:1}
.proc-time .t span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:.6rem}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.svc-card{background:var(--bone);border:1px solid var(--line);padding:clamp(2rem,4vw,3.2rem);
  display:flex;flex-direction:column;transition:.6s var(--ease)}
.svc-card:hover{border-color:var(--ink);transform:translateY(-4px)}
.svc-card .tag{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);font-weight:500}
.svc-card h3{font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:500;margin:1rem 0 .8rem}
.svc-card>p{color:var(--ink-soft);font-weight:300;margin-bottom:1.8rem}
.svc-card ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin-bottom:2.2rem}
.svc-card li{display:flex;gap:.9rem;font-size:.94rem;line-height:1.5;align-items:flex-start}
.svc-card li::before{content:"";width:6px;height:6px;background:var(--clay);margin-top:.55em;flex-shrink:0}
.svc-card .btn{align-self:flex-start;margin-top:auto}
.svc-note{margin-top:clamp(2.2rem,4vw,3rem);text-align:center;font-family:'Prata',serif;
  font-style:normal;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--ink);max-width:60ch;margin-left:auto;margin-right:auto}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.about-copy h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;margin-bottom:1.6rem}
.about-copy p{color:var(--ink-soft);font-weight:300;margin-bottom:1.2rem;max-width:50ch}
.about-img .imgwrap{aspect-ratio:4/5;overflow:hidden}
.founder{margin-top:clamp(4rem,8vw,7rem);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
/* Her full note now sits beside the portrait, so it is a full 4:5 portrait
   (the photo's own ratio, no crop) rather than the small square it was. */
.founder .imgwrap{aspect-ratio:4/5;overflow:hidden}
.founder-sec .founder{margin-top:0}
/* The home page crops a square out of a 4:5 portrait. Dead-centre would
   shave the top of the head off, because a person photographed standing
   sits high in the frame. Bias the crop upward. */
.founder .imgwrap img{object-position:center 20%}
.founder h3{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:500;margin-bottom:.4rem}
.founder .role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:1.6rem}
.founder p{color:var(--ink-soft);font-weight:300;margin-bottom:1.2rem;max-width:52ch}
.founder .sig{font-family:'Prata',serif;font-style:normal;font-size:1.7rem;color:var(--ink);margin-top:.5rem}

/* ---------- testimonial ---------- */
.testi{text-align:center}
.testi .container{max-width:980px}
.testi .quotemark{font-family:'Prata',serif;font-size:5rem;line-height:0;color:var(--clay);display:block;height:2.2rem}
/* Stack every slide in one grid cell so the track is always as tall as the
   LONGEST quote. Previously only `.active` was in flow (the rest were
   absolute), so the section resized to whichever review was showing and the
   whole page below it jumped every 5s. Invisible with same-length demo copy,
   obvious once real reviews of 128 and 253 characters went in. */
.testi-track{position:relative;min-height:200px;display:grid}
/* visibility (delayed on the way out) takes hidden slides out of the tab order,
   so keyboard users never land on a "Read full review" they cannot see */
/* centred in the shared height: a short review sits balanced, instead of
   leaving a hole between it and the controls */
.testi-slide{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s var(--ease),visibility 0s linear .9s}
.testi-slide.active{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.testi blockquote{font-family:'Prata',serif;font-size:clamp(1.6rem,3.2vw,2.5rem);
  font-weight:400;line-height:1.4;color:var(--ink)}
.testi .who{margin-top:2rem}
.testi .who b{display:block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.testi .who span{font-size:.74rem;color:var(--ink-soft);letter-spacing:.06em}

/* ---------- contact ---------- */
.contact{background:var(--bone-2)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,5rem)}
.contact-left h2{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:500;margin-bottom:1.4rem}
.contact-left p{color:var(--ink-soft);font-weight:300;max-width:42ch;margin-bottom:2.4rem}
.contact-channels{display:flex;flex-direction:column;gap:1.3rem;border-top:1px solid var(--line);padding-top:2rem}
.contact-channels a{display:flex;align-items:center;gap:1rem;font-size:.95rem}
.contact-channels svg{width:20px;height:20px;flex-shrink:0}
.contact-channels .lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);width:90px}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.field{display:flex;flex-direction:column;gap:.55rem}
.field.full{grid-column:span 2}
.field label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:.7rem 0;
  font-family:inherit;font-size:1rem;color:var(--ink);border-radius:0;transition:border-color .4s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--clay)}
.field textarea{resize:vertical;min-height:70px}
.field select{cursor:pointer}
.form-foot{grid-column:span 2;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:.6rem}
.form-msg{font-size:.85rem;color:var(--clay);font-weight:500;opacity:0;transition:opacity .4s}
.form-msg.show{opacity:1}

/* ---------- footer ---------- */
.footer{background:var(--espresso);color:var(--cream)}
.footer .pad{padding-top:clamp(4rem,8vw,6rem);padding-bottom:2.5rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line-dark)}
.foot-brand b{font-family:'Prata',serif;font-size:1.85rem;font-weight:400;letter-spacing:.2em;display:block;color:var(--clay)}
.foot-brand span{font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:var(--espresso-soft);margin-top:.6rem;display:block}
.foot-brand p{margin-top:1.6rem;color:var(--espresso-soft);font-weight:300;max-width:34ch;font-size:.95rem}
.foot-col h4,.foot-col .foot-title{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--espresso-soft);font-weight:500;margin-bottom:1.4rem}
.foot-col a,.foot-col p{display:block;color:var(--cream);font-size:.92rem;margin-bottom:.9rem;font-weight:300;transition:color .3s}
.foot-col a:hover{color:var(--clay)}
.foot-social{display:flex;gap:1rem;margin-top:.4rem}
.foot-social a{width:40px;height:40px;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;transition:.4s var(--ease)}
.foot-social a:hover{background:var(--cream);border-color:var(--cream)}
.foot-social svg{width:17px;height:17px;color:var(--cream);transition:color .4s}
.foot-social a:hover svg{color:var(--espresso)}
.foot-news{display:flex;border-bottom:1px solid var(--line-dark);max-width:280px}
.foot-news input{background:none;border:0;color:var(--cream);font-family:inherit;font-size:.88rem;padding:.6rem 0;flex:1}
.foot-news input:focus{outline:0}
.foot-news button{background:none;border:0;color:var(--clay);cursor:pointer;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:2.2rem}
.foot-bottom p{font-size:.74rem;color:var(--espresso-soft);letter-spacing:.04em}

/* ---------- whatsapp float ---------- */
.wa-float{position:fixed;right:1.4rem;bottom:1.4rem;z-index:80;width:54px;height:54px;border-radius:50%;
  background:var(--espresso);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(28,24,20,.28);transition:.45s var(--ease)}
.wa-float:hover{background:var(--clay);transform:translateY(-3px)}
.wa-float svg{width:26px;height:26px}
/* Official WhatsApp green for the floating button: this is a service mark, and
   people look for that exact green. The bubble stays brand ink so it still
   belongs to the site. */
.wa-float{background:#25D366}
.wa-float:hover{background:#1EBE57}
.wa-icon{display:block;flex:0 0 auto}
.contact-channels .wa-icon,.foot-social .wa-icon{width:20px;height:20px}

/* ---------- image bands (parallax) ---------- */
.imgband{position:relative;height:clamp(420px,82vh,820px);overflow:hidden;background:var(--bone-2)}
.imgband-bg{position:absolute;left:0;right:0;top:-14%;height:128%;background-size:cover;background-position:center;
  background-color:var(--bone-2);will-change:transform}
.imgband.dim::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34);z-index:1}
.imgband-cap{position:absolute;left:0;bottom:clamp(2.5rem,7vw,5rem);width:100%;z-index:2}
.imgband-cap .eyebrow{color:var(--cream);opacity:.85;display:block;margin-bottom:1.1rem}
.imgband-cap h2{color:var(--cream);font-size:clamp(2.1rem,5vw,4.2rem);font-weight:500;max-width:20ch;line-height:1.1}
.imgband-cap h2 em{font-style:normal}

/* ---------- card scroll effects ---------- */
.clipr .imgwrap{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.clipr.in .imgwrap{clip-path:inset(0 0 0 0)}
.about-img .imgwrap,.founder .imgwrap{position:relative}
.pimg{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;will-change:transform}

/* ---------- animation system ---------- */
.js .hero h1,.js .intro h2,.js .sec-head h2,.js .sec-head h1,.js .about-copy h2,.js .contact-left h2,.js .imgband-cap h2{opacity:0}
.anim-text{opacity:1!important}
.anim-text .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.anim-text .wi{display:inline-block;transform:translateY(118%);transition:transform .95s var(--ease)}
.anim-text.in .wi{transform:translateY(0)}

.reveal{opacity:0;transform:translateY(20px);filter:blur(7px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}

.clipr-self{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.clipr-self.in,.svc-grid.in .clipr-self{clip-path:inset(0 0 0 0)}

.proc-grid{position:relative;border-top:0!important}
.proc-grid::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease)}
.proc-grid.in::before{transform:scaleX(1)}
.proc-step .dot{transform:scale(0);transition:transform .5s var(--ease)}
.proc-grid.in .proc-step .dot{transform:scale(1)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .work-grid{grid-template-columns:repeat(6,1fr)}
  .c6,.c7,.c5,.c4,.c12{grid-column:span 6}
  .why-item:nth-child(n){grid-column:1/-1;grid-row:auto;margin-top:0;padding-right:0}
  .why-grid{gap:clamp(2.6rem,7vw,3.5rem) 0}
  .proc-grid{grid-template-columns:1fr 1fr}
  .proc-step{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .proc-step:nth-child(odd){border-right:1px solid var(--line);padding-right:1.4rem}
  .svc-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-img{order:-1}
  .founder{grid-template-columns:1fr}
  .founder .imgwrap{max-width:440px}
  .contact-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  form{grid-template-columns:1fr}
  .field.full,.form-foot{grid-column:span 1}
  .proc-grid{grid-template-columns:1fr}
  .proc-step,.proc-step:nth-child(odd){border-right:0;padding-right:0}
  .foot-top{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* ========== TYPE SCALE — single consistent Prata hierarchy ========== */
:root{
  --t1:clamp(3rem,6.4vw,5.3rem);   /* hero */
  --t2:clamp(2rem,3.9vw,3.1rem);   /* section titles */
  --t3:clamp(1.5rem,2.3vw,2rem);   /* sub / card headings */
  --t4:clamp(1.2rem,1.6vw,1.4rem); /* small headings */
  --tnum:clamp(1.9rem,3vw,2.5rem); /* stat numerals */
}
h1,h2,h3{line-height:1.14;font-weight:400}
h1 em,h2 em,h3 em{font-weight:400}
.hero h1{font-size:var(--t1);line-height:1.03}
.intro h2,.sec-head h2,.sec-head h1,.about-copy h2,.contact-left h2,.imgband-cap h2,.contact-left h2{font-size:var(--t2);line-height:1.12}
.why-item h3,.svc-card h3,.founder h3,.work-meta h3{font-size:var(--t3);line-height:1.15}
.testi blockquote{font-size:clamp(1.6rem,2.7vw,2.25rem);line-height:1.26;font-weight:400}
.proc-step h3{font-size:var(--t4);line-height:1.2}
.proc-time .t b{font-size:var(--tnum);line-height:1}
.why-item .idx{font-size:clamp(3rem,5vw,4.4rem)}
.svc-note{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.3}
.founder .sig{font-size:clamp(1.4rem,2vw,1.7rem)}

/* ---------- form additions (WordPress build) ---------- */
/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs
   but happily fill positioned ones. Never use a name a password manager wants. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-alert{padding:.9rem 1.1rem;margin-bottom:1.6rem;font-size:.9rem;border-left:2px solid var(--clay);background:var(--bone)}
.form-alert--ok{border-left-color:#2f6b46}
.form-alert--err{border-left-color:#9E5A3C}
.foot-news-msg{font-size:.78rem;color:var(--espresso-soft);margin-top:.6rem}
.foot-news{display:flex;gap:.5rem}
.ftr-credit{position:relative;color:inherit;opacity:.72;transition:opacity .4s var(--ease)}
.ftr-credit:hover{opacity:1;color:var(--clay)}

/* ---------- image framing (WordPress build) ----------
   Every photo fills its frame and crops from the centre, so mixed aspect
   ratios (1672x941 renders next to 1448x1086 photos) never letterbox or
   stretch. <picture> introduces an extra element in the box, so it has to
   carry the same sizing as the <img> or the object-fit has nothing to act on. */
.imgwrap,.hero-slide-img,.proj-shot .imgwrap{position:relative;overflow:hidden}
.imgwrap picture,.hero-slide-img picture{display:block;width:100%;height:100%}
.imgwrap img,.hero-slide-img img,.work-item img,.proj-shot img,.about-img img{
  width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
/* NOTE: the work grid's own ratios (4/5 portrait, 16/11 wide) are defined
   further up and are what make the layout asymmetric — do NOT override them
   here. Only the project-page shots, which have no ratio of their own, get one. */
.proj-shot .imgwrap{aspect-ratio:4/5}
.proj-shot--full .imgwrap{aspect-ratio:16/11}
.hero-slide-img{position:absolute;inset:0}
@media(max-width:760px){
  .proj-shot .imgwrap,.proj-shot--full .imgwrap{aspect-ratio:4/5}
}
/* Founder placeholder, shown until a real portrait is uploaded. */
.portrait-placeholder{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;background:var(--bone-2);border:1px solid var(--line);color:var(--espresso-soft)}
.portrait-placeholder span{font-family:'Prata',serif;letter-spacing:.34em;font-size:1.05rem}
.portrait-placeholder small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
/* Project page bits */
.proj-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.8rem)}
.proj-shot--full{grid-column:1/-1}
@media(max-width:760px){.proj-gallery{grid-template-columns:1fr}}
.proj-next .imgband-inner{text-align:center}
.proj-next h2 a{color:inherit}

/* ---------- page transition ----------
   Deliberately OUTGOING only. The curtain starts fully transparent and
   pointer-events:none, and is only ever raised by JS on a link click, so a
   failed script can never leave a visitor staring at a blank overlay — and it
   costs first paint nothing. */
.page-curtain{position:fixed;inset:0;z-index:9999;background:var(--bone);
  opacity:0;pointer-events:none;visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .42s var(--ease),visibility 0s linear .42s}
.page-curtain.is-leaving{opacity:1;visibility:visible;pointer-events:all;transition:opacity .42s var(--ease),visibility 0s}
.page-curtain .mark{font-family:'Prata',serif;letter-spacing:.42em;font-size:1rem;color:var(--clay);
  transform:translateY(6px);opacity:0;transition:opacity .5s var(--ease) .06s,transform .5s var(--ease) .06s}
.page-curtain.is-leaving .mark{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .page-curtain,.page-curtain .mark{transition:none!important}
  .page-curtain.is-leaving{opacity:0;visibility:hidden}
}

/* ---------- brand lockup ---------- */
.brand--logo{display:inline-flex;align-items:center;position:relative;line-height:0}
.brand-logo{display:block;width:clamp(68px,6vw,90px);height:auto;transition:opacity .45s var(--ease)}
.brand-logo img{width:100%;height:auto;display:block}
/* white over the transparent hero nav, brown once it goes light */
.brand-logo--dark{position:absolute;inset:0;opacity:0}
.nav.scrolled .brand-logo--light{opacity:0}
.nav.scrolled .brand-logo--dark{opacity:1}
body.inner .nav .brand-logo--light{opacity:0}
body.inner .nav .brand-logo--dark{opacity:1}
.foot-logo{display:block;width:clamp(130px,12vw,168px);height:auto;margin-bottom:1.4rem}
.foot-logo img{width:100%;height:auto;display:block}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- light pages (no hero behind the nav) ----------
   Any page that does not open with a full-bleed hero needs two things: a solid
   nav so the links are legible, and enough top padding to clear the fixed
   header. These lived in policies.css and so only ever loaded on /policies/,
   which left /work/ with invisible nav links and its title tucked under the
   header. They belong here, shared. */
body.inner .nav{background:var(--bone);box-shadow:0 1px 0 var(--line)}
body.inner .nav .brand,body.inner .nav.scrolled .brand{color:var(--clay)}
body.inner .nav-links a{color:var(--ink)}
body.inner .nav-links .nav-cta{border-color:var(--ink);color:var(--ink)}
body.inner .nav-links .nav-cta:hover{background:var(--ink);color:var(--bone)}
body.inner .nav .burger span{background:var(--ink)}
body.inner .brand-logo--light{opacity:0}
body.inner .brand-logo--dark{opacity:1}
/* clears the fixed nav on any page that opens with a section head */
.policy-head{padding:clamp(10.5rem,17vh,13.5rem) 0 clamp(2.4rem,4vw,3.4rem)}

/* ---------- footer alignment + mobile layout ----------
   `.pad` is `padding: <vertical> 0` and sits AFTER `.container` in this file,
   so on the one element carrying both classes (the footer wrapper) it wiped the
   container's horizontal padding. The footer therefore ran edge-to-edge at every
   width: obvious on mobile, and on desktop it sat 64px left of every other
   section. Restore the gutter on that element only — the footer is the sole
   place the two classes are combined. */
.footer .container.pad{
  padding-left:clamp(1.4rem,5vw,4.5rem);
  padding-right:clamp(1.4rem,5vw,4.5rem);
}

@media(max-width:560px){
  /* Two columns on phones. The brand block and the contact column both need
     the full width (logo lockup, and the newsletter input), so only the two
     short link lists actually pair up. */
  .foot-top{grid-template-columns:1fr 1fr;gap:2.2rem 1.4rem}
  .foot-brand{grid-column:1 / -1}
  .foot-col:last-child{grid-column:1 / -1}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
  .foot-news{max-width:100%}
}
/* The WhatsApp float is fixed bottom-right and was sitting on top of the
   newsletter's Join button on phones. Reserve space rather than move the
   button, which people expect to find in that corner. */
@media(max-width:560px){
  .footer .container.pad{padding-bottom:calc(clamp(5rem,11vw,9.5rem) + 3.5rem)}
  .foot-news{flex-wrap:wrap;gap:.6rem}
  .foot-news input{flex:1 1 100%}
  .foot-news button{flex:0 0 auto}
}

/* ---------- shared pieces that used to live in page stylesheets ----------
   Both of these sat in about.css, which only loads on /about/. The closing
   "Let's design a home" block on /work/, every project page and the 404 uses
   .cta-actions too, so there the buttons had no top margin and sat flush under
   the heading, with only an inline-whitespace gap between the two buttons.
   .r2 was copied into policies.css and missing from project pages entirely.
   A class used on more than one template belongs here, once. */
.cta-actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
.r2{opacity:0;transform:translateY(20px);filter:blur(7px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.r2.in{opacity:1;transform:none;filter:none}

/* ---------- full review ----------
   The slider shows a pull-quote; the whole review opens in a dialog. Motion is
   WAAPI with an expo-out curve (app.js), so it feels like GSAP without loading
   it. The dialog fills the viewport and draws its own backdrop, because the
   native ::backdrop cannot be animated reliably across browsers. */
.testi-more{display:inline-flex;align-items:center;gap:.6em;margin-top:1.7rem;padding:.55rem 0;
  background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);cursor:pointer;
  font:inherit;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.testi-more:hover,.testi-more:focus-visible{color:var(--clay);border-color:var(--clay)}
.testi-more .arr{transition:transform .5s var(--ease)}
.testi-more:hover .arr{transform:translateX(5px)}

html.rd-lock{overflow:hidden}
.review-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:clamp(1rem,4vw,3rem);border:0;background:transparent;color:var(--ink);overflow:hidden}
.review-dialog[open]{display:grid;place-items:center}
.review-dialog::backdrop{background:transparent}
.rd-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.58);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rd-panel{position:relative;display:flex;flex-direction:column;width:min(100%,760px);max-height:min(86vh,880px);
  background:var(--bone);box-shadow:0 50px 140px -30px rgba(0,0,0,.55)}
.rd-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(2.6rem,6vw,4.6rem) clamp(1.5rem,6vw,4.8rem) clamp(2.2rem,5vw,3.8rem)}
.rd-close{position:absolute;z-index:2;top:.75rem;right:.75rem;width:46px;height:46px;border:0;
  background:var(--bone);cursor:pointer;display:grid;place-items:center}
.rd-close span,.rd-close span::after{display:block;width:18px;height:1px;background:var(--ink);transform:rotate(45deg);
  transition:background .3s var(--ease)}
.rd-close span::after{content:"";transform:rotate(90deg)}
.rd-close:hover span,.rd-close:hover span::after{background:var(--clay)}
.rd-close:focus-visible{outline:1px solid var(--ink);outline-offset:-6px}
.rd-mark{display:block;height:2.4rem;font-size:5rem;line-height:.95;color:var(--clay)}
.rd-body{text-align:left}
.rd-body p{margin:0 0 1.15em;color:var(--ink-soft);font-weight:300;font-size:1rem;line-height:1.85}
.rd-body p:first-child{font-family:'Prata',serif;font-weight:400;color:var(--ink);
  font-size:clamp(1.18rem,1.9vw,1.42rem);line-height:1.6;margin-bottom:1.3em}
.rd-sign{margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--line);text-align:left}
.rd-name{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.rd-meta{margin-top:.3rem;font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft)}
@media(max-width:600px){
  /* a bottom sheet on phones: reachable with one thumb, closes downward */
  .review-dialog{padding:0}
  .review-dialog[open]{place-items:end stretch}
  .rd-panel{width:100%;max-height:90vh}
}

/* ---------- review navigation ---------- */
.testi-nav{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);margin-top:clamp(2.4rem,5vw,3.4rem)}
.tn-lines{display:flex;gap:.6rem}
.tn-item{display:block;width:clamp(34px,6vw,56px);padding:1rem 0;margin:0;background:none;border:0;cursor:pointer}
.tn-line{position:relative;display:block;height:2px;background:rgba(10,10,10,.14);overflow:hidden;transition:background .4s var(--ease)}
.tn-item:hover .tn-line{background:rgba(10,10,10,.3)}
.tn-fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left center}
.tn-item.is-active .tn-fill{animation:tnFill var(--testi-dur,8s) linear forwards}
.testi.is-held .tn-item.is-active .tn-fill{animation-play-state:paused}
@keyframes tnFill{to{transform:scaleX(1)}}
.tn-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:1px solid var(--line);
  border-radius:50%;color:var(--ink);cursor:pointer;transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.tn-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tn-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.tn-arrow:focus-visible,.tn-item:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.tn-count{margin-top:.4rem;font-size:.7rem;letter-spacing:.24em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tn-now{color:var(--ink)}
.tn-sep{margin:0 .55em;opacity:.5}
@media(prefers-reduced-motion:reduce){.tn-item.is-active .tn-fill{transform:scaleX(1)}}