/* ===== TOKENS: edit colours and fonts here ===== */
:root{
  --ivory:#F5F0E8; --cream:#E9DFD2; --sand:#D3C0AA; --taupe:#A49382;
  --terracotta:#A7654D; --walnut:#49372D; --espresso:#241C18; --white:#FCFAF6;
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"Jost","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
  --pad:clamp(1.25rem,5vw,5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{background:var(--ivory);color:var(--walnut);font:300 1rem/1.75 var(--font-body);overflow-x:hidden}
body.is-loading{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover;background:var(--cream)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.08;color:var(--walnut)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--white);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
.section{padding:clamp(4rem,9vw,8rem) var(--pad)}
.center{text-align:center;margin-top:3.5rem}
.head{max-width:46rem;margin-bottom:3rem}
.head p{margin-top:1rem;color:var(--taupe)}
.rule{display:block;width:4rem;height:1px;background:var(--terracotta);margin:1.8rem 0}

/* Buttons & links */
.btn{display:inline-block;font:400 .74rem/1 var(--font-body);letter-spacing:.2em;padding:1.1rem 1.9rem;border:1px solid transparent;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.btn--small{padding:.8rem 1.2rem}
.btn--dark{background:var(--walnut);color:var(--white)}
.btn--dark:hover{background:var(--terracotta)}
.btn--light{background:var(--white);color:var(--espresso)}
.btn--light:hover{background:var(--sand)}
.btn--ghost{border-color:rgba(252,250,246,.7);color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--espresso)}
.btn--wa{border-color:var(--walnut);color:var(--walnut);margin-left:.6rem}
.btn--wa:hover{background:var(--walnut);color:var(--white)}
.link{display:inline-block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.3rem;transition:background-size .5s var(--ease),color .3s}
.link:hover{background-size:30% 1px;color:var(--terracotta)}

/* Intro: overlay covers the whole screen; the content block is sized to the SMALL viewport
   (svh) and padded for safe areas, so it is centred in the area that is always visible. */
.intro{position:fixed;inset:0;z-index:200;overflow:hidden;background:var(--ivory);color:var(--espresso);display:flex;justify-content:center;align-items:flex-start;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease)}
.intro.done{clip-path:inset(0 0 100% 0);pointer-events:none}
.intro.gone{display:none}
.intro__inner{width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;gap:clamp(1rem,3svh,1.6rem);text-align:center;padding:max(1.5rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}
.intro__word{--ls:.28em;max-width:100%;font-family:var(--font-display);font-size:clamp(2rem,5vw,4.5rem);line-height:1.15;letter-spacing:var(--ls);word-spacing:var(--ls);text-wrap:balance;opacity:0}
.intro.ready .intro__word{opacity:1}
.intro__word .w{display:inline-block;white-space:nowrap;margin-right:calc(var(--ls)*-1)} /* cancels trailing letter-spacing so every line is truly centred */
.intro__word .l{display:inline-block;opacity:0;transform:translateY(40%);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.intro.play .intro__word .l{opacity:1;transform:none}
.intro__line{display:block;flex:none;height:1px;width:0;background:var(--terracotta);transition:width .9s var(--ease) .45s}
.intro.play .intro__line{width:clamp(7rem,50vw,18rem)}
.intro__sub{max-width:100%;font-size:.72rem;letter-spacing:.4em;padding-left:.4em;text-transform:uppercase;text-wrap:balance;color:var(--taupe);opacity:0;transition:opacity .7s .8s}
.intro.play .intro__sub{opacity:1}

/* Nav
   The blurred bar background lives on ::before, NOT on .nav itself: backdrop-filter on an ancestor
   makes it the containing block of position:fixed children, which trapped the mobile menu inside the header. */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.3rem var(--pad);color:var(--white);transition:padding .5s,color .5s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(245,240,232,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(73,55,45,.12);opacity:0;transition:opacity .5s}
.nav.scrolled{color:var(--walnut);padding-block:.8rem}
.nav.scrolled::before{opacity:1}
.nav.menu-open{color:var(--ivory)}
.nav.menu-open::before{opacity:0}
.logo{flex:none;white-space:nowrap;font-family:var(--font-display);font-size:1.45rem;letter-spacing:.22em}
.logo span{font-size:.7em;letter-spacing:.32em;opacity:.75}
.nav__links{display:flex;align-items:center;gap:clamp(1.1rem,2.1vw,2rem);white-space:nowrap;font-size:.82rem;letter-spacing:.08em}
.nav__links a:not(.btn){background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding:.2rem 0;transition:background-size .4s var(--ease)}
.nav__links a:not(.btn):hover{background-size:100% 1px}
.nav .btn{border-color:currentColor;color:inherit}
.nav .btn:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--white)}
.burger{display:none;background:none;border:0;width:2.6rem;height:2.6rem;position:relative;color:inherit;cursor:pointer}
.burger span{position:absolute;left:.5rem;right:.5rem;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:1.05rem}.burger span:last-child{top:1.55rem}
.burger[aria-expanded=true] span:first-child{top:1.3rem;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:1.3rem;transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--white);overflow:hidden;background:var(--espresso)}
.hero__media{position:absolute;inset:-6% 0;transform:scale(1.12);transition:transform 2.6s var(--ease)}
.loaded .hero__media{transform:scale(1)}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,28,24,.45),rgba(36,28,24,.1) 40%,rgba(36,28,24,.75))}
.hero__content{position:relative;padding:0 var(--pad) clamp(5rem,12vh,8rem);max-width:60rem}
.hero__title{font-size:clamp(2.8rem,8.5vw,7rem);color:var(--white);font-weight:400}
.hero__title span{display:inline-block}
.hero__text{max-width:30rem;margin:1.5rem 0 2.2rem;font-size:1.1rem}
.hero__btns{display:flex;flex-wrap:wrap;gap:1rem}
.hero__title,.hero__text,.hero__btns .btn{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.loaded .hero__title,.loaded .hero__text,.loaded .hero__btns .btn{opacity:1;transform:none}
.loaded .hero__text{transition-delay:.25s}
.loaded .hero__btns .btn:nth-child(1){transition-delay:.45s}.loaded .hero__btns .btn:nth-child(2){transition-delay:.6s}
.scroll{position:absolute;right:var(--pad);bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll i{width:1px;height:3.5rem;background:rgba(252,250,246,.4);position:relative;overflow:hidden}
.scroll i::after{content:"";position:absolute;inset:0;background:var(--white);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* About */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.about__imgs{position:relative;padding-bottom:4rem}
.about__main{aspect-ratio:4/5;overflow:hidden}
.about__small{position:absolute;right:-8%;bottom:0;width:42%;aspect-ratio:1;border:.6rem solid var(--ivory);overflow:hidden}
.about__text h2{margin-bottom:0}
.about__text p{margin-bottom:1.2rem;max-width:34rem}
.about__text .link{margin-top:.8rem;color:var(--terracotta)}

/* Services */
.services{background:var(--cream)}
.services__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem) 2rem}
.svc{grid-column:span 4;display:flex;flex-direction:column;border-top:1px solid var(--taupe);padding-top:1rem}
.svc__img{overflow:hidden;aspect-ratio:4/5;margin:1rem 0}
.svc__img img{transition:transform 1.2s var(--ease)}
.svc:hover .svc__img img{transform:scale(1.06)}
.svc__num{font-family:var(--font-display);color:var(--terracotta);font-size:1.1rem}
.svc h3{font-size:1.9rem;margin-bottom:.5rem}
.svc p{max-width:26rem;font-size:.95rem}
.svc:nth-child(1),.svc:nth-child(4){grid-column:span 7;flex-direction:row;gap:2rem;flex-wrap:wrap}
.svc:nth-child(1) .svc__img,.svc:nth-child(4) .svc__img{flex:1 1 55%;aspect-ratio:4/3;margin:0}
.svc:nth-child(1) .svc__txt,.svc:nth-child(4) .svc__txt{flex:1 1 30%;align-self:flex-end}
.svc:nth-child(2){grid-column:span 5}
.svc:nth-child(3){grid-column:span 5}

/* Portfolio */
.filters{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-bottom:2.5rem}
.filters button{background:none;border:0;font:400 .8rem var(--font-body);letter-spacing:.1em;color:var(--taupe);padding:.4rem 0;cursor:pointer;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.filters button:hover,.filters button[aria-pressed=true]{color:var(--walnut);border-color:var(--terracotta)}
.grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(13rem,22vw,21rem);grid-auto-flow:dense;gap:1.2rem}
.card{position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left;color:var(--white);grid-column:span 2;background:var(--cream);transition:opacity .5s,transform .8s var(--ease)}
.card--wide{grid-column:span 4}.card--tall{grid-row:span 2}.card--hide{display:none}
.card img{transition:transform 1.4s var(--ease)}
.card:hover img,.card:focus-visible img{transform:scale(1.07)}
.card__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem;background:linear-gradient(0deg,rgba(36,28,24,.7),transparent 55%);opacity:.85;transition:opacity .5s}
.card__ov small{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.card__ov b{font:400 1.6rem/1.15 var(--font-display);transform:translateY(.6rem);transition:transform .6s var(--ease)}
.card:hover .card__ov b,.card:focus-visible .card__ov b{transform:none}
.card:hover .card__ov{opacity:1;background:linear-gradient(0deg,rgba(36,28,24,.85),rgba(36,28,24,.15))}
.note{font-size:.78rem;color:var(--taupe);margin-top:1.5rem}

/* Feature */
.feature{position:relative;height:clamp(26rem,80vh,46rem);overflow:hidden;display:grid;place-items:center}
.feature img{position:absolute;inset:-8% 0;height:116%}
.feature__shade{position:absolute;inset:0;background:rgba(36,28,24,.5)}
.feature__text{position:relative;color:var(--white);font:400 clamp(2rem,6vw,5rem)/1.1 var(--font-display);text-align:center;padding:0 1.25rem;text-shadow:0 2px 24px rgba(0,0,0,.35)}

/* Approach */
.approach h2{max-width:44rem}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem;padding:0;position:relative}
.steps li{border-top:1px solid var(--taupe);padding-top:1.4rem;position:relative}
.steps li::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--terracotta);transition:width 1.4s var(--ease)}
.steps li.in::before{width:100%}
.steps .n{font:italic 400 2.6rem/1 var(--font-display);color:var(--terracotta)}
.steps h3{font-size:1.7rem;margin:.8rem 0 .6rem}
.steps li:nth-child(even){margin-top:2.5rem}

/* Materials */
.materials{background:var(--espresso)}
.materials h2{color:var(--ivory);margin-bottom:3rem}
.materials__grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(10rem,16vw,15rem);gap:1rem}
.mat{overflow:hidden;position:relative;grid-column:span 2}
.mat:nth-child(1){grid-column:span 3;grid-row:span 2}.mat:nth-child(2){grid-column:span 3}
.mat:nth-child(3){grid-column:span 1}.mat:nth-child(4){grid-column:span 2}
.mat:nth-child(5){grid-column:span 2;grid-row:span 2}.mat:nth-child(6){grid-column:span 2}
.mat img{filter:saturate(.85) sepia(.15);transition:transform 1.4s var(--ease),filter .8s}
.mat:hover img{transform:scale(1.06);filter:none}
.mat span{position:absolute;left:1rem;bottom:.8rem;color:var(--white);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* Why */
.why__list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3.5rem}
.why__item{padding:0 1.6rem;border-left:1px solid var(--sand)}
.why__item:first-child{padding-left:0;border-left:0}
.why__item .n{font-size:.8rem;letter-spacing:.2em;color:var(--terracotta)}
.why__item h3{font-size:1.75rem;margin:.8rem 0}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);background:var(--cream)}
.contact__intro p{max-width:28rem;margin-top:1.2rem}
.details{list-style:none;padding:0;margin-top:2rem;display:grid;gap:.5rem;font-size:.95rem}
.details a{border-bottom:1px solid var(--taupe)}
.details .ph{color:var(--taupe);font-style:italic}
.field{margin-bottom:1.3rem;display:flex;flex-direction:column}
label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.4rem}
input,select,textarea{font:inherit;color:var(--walnut);background:transparent;border:0;border-bottom:1px solid var(--taupe);padding:.6rem 0;border-radius:0;transition:border-color .3s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--terracotta)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#9a3b2b}
.err{color:#9a3b2b;font-size:.8rem;min-height:1.1rem;margin-top:.25rem}
.status{margin-top:1.2rem;font-size:.92rem}
.status.ok{color:var(--walnut)}.status.bad{color:#9a3b2b}
[hidden]{display:none!important}

/* Footer */
.footer{background:var(--espresso);color:var(--ivory);padding:4.5rem var(--pad) 2rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem}
.footer p{color:var(--sand);font-size:.92rem;margin-top:1rem;max-width:22rem}
.footer h3{font:400 .72rem var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1rem}
.footer nav a{display:block;padding:.2rem 0;color:var(--sand);font-size:.92rem;transition:color .3s,transform .3s var(--ease)}
.footer nav a:hover{color:var(--white);transform:translateX(4px)}
.footer .footer__copy{grid-column:1/-1;border-top:1px solid rgba(211,192,170,.2);padding-top:1.5rem;margin:0;max-width:none;font-size:.8rem}

/* Modal */
.modal{margin:auto;border:0;padding:0;width:min(62rem,94vw);max-height:92vh;background:var(--ivory);color:var(--walnut);overflow:auto;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease),overlay .5s allow-discrete,display .5s allow-discrete}
.modal[open]{opacity:1;transform:none}
@starting-style{.modal[open]{opacity:0;transform:translateY(24px)}}
.modal::backdrop{background:rgba(36,28,24,.75);backdrop-filter:blur(3px)}
.modal__close{position:absolute;top:.8rem;right:1rem;z-index:2;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--white);font-size:1.6rem;line-height:1;cursor:pointer}
.modal__imgs{display:grid;grid-template-columns:2fr 1fr;gap:.5rem}
.modal__imgs img{aspect-ratio:4/3}.modal__imgs img:first-child{grid-row:span 2;aspect-ratio:auto;min-height:20rem}
.modal__body{padding:2rem clamp(1.25rem,4vw,3rem) 2.5rem}
.modal .cat{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta)}
.modal h3{font-size:2.4rem;margin:.4rem 0 1rem}
.modal ul{margin:1.2rem 0 0;padding-left:1.1rem;color:var(--taupe)}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Content additions: bullet lists, sub-headings, About label */
.label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);line-height:1.4}
.about__text .label{margin-bottom:.6rem}
.svc ul{max-width:26rem;font-size:.95rem;padding-left:1.1rem;margin-top:.6rem}
.sub{font-size:1.75rem;margin-top:2rem}
.approach__list{max-width:44rem;padding-left:1.1rem;margin-top:1rem}
.approach__list + .sub{margin-top:3.5rem}
.approach .sub + .steps{margin-top:2rem}

/* Responsive */
@media (max-width:1000px){
  .about,.contact{grid-template-columns:1fr}
  .about__small{right:0}
  .steps,.why__list{grid-template-columns:1fr 1fr}
  .steps li:nth-child(even){margin-top:0}
  .why__item{padding:1.2rem 1rem;border-left:0;border-top:1px solid var(--sand)}
  .footer{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}
}
/* Compact nav (burger + full-screen menu). Keep 1100px in sync with NAV_BREAKPOINT in script.js */
@media (max-width:1100px){
  .burger{display:block;z-index:2;margin-right:-.5rem} /* line ends align with the page padding */
  .logo{position:relative;z-index:2}
  .nav__links{position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:flex-start;gap:.25rem;padding:calc(4.5rem + env(safe-area-inset-top,0px)) max(1.25rem,env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom,0px)) max(1.25rem,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;background:var(--espresso);color:var(--ivory);font:400 clamp(1.45rem,5.6vw,1.9rem)/1.3 var(--font-display);letter-spacing:.04em;white-space:normal;visibility:hidden;clip-path:circle(0 at var(--ox,calc(100% - 2.5rem)) var(--oy,2.5rem));transition:clip-path .7s var(--ease),visibility 0s .7s}
  .nav__links.open{visibility:visible;clip-path:circle(150% at var(--ox,calc(100% - 2.5rem)) var(--oy,2.5rem));transition:clip-path .7s var(--ease)}
  .nav__links>:first-child{margin-top:auto}  /* centres the list when it fits, stays scrollable from the top when it does not */
  .nav__links>:last-child{margin-bottom:auto}
  .nav__links a:not(.btn){padding:.6rem .75rem;text-align:center;max-width:100%}
  .nav__links .btn{font:400 .78rem/1.5 var(--font-body);letter-spacing:.15em;margin-top:1.2rem}
}
/* Intro wordmark: wraps onto two balanced lines on phones instead of overflowing */
@media (max-width:700px){
  .intro__word{--ls:.2em;font-size:clamp(1.5rem,8.4vw,2.6rem)}
  .intro__sub{letter-spacing:.3em;padding-left:.3em}
}
@media (max-width:820px){
  .services__grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .svc,.svc:nth-child(n){grid-column:1/-1;flex-direction:column;flex-wrap:nowrap;gap:0;order:0}
  .svc:nth-child(n) .svc__img{flex:none;aspect-ratio:4/3;width:100%;margin:1rem 0}
  .svc:nth-child(n) .svc__txt{flex:none;align-self:auto}
  .grid{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}
  .card,.card--wide{grid-column:span 1}.card--wide{grid-column:span 2}
  .materials__grid{grid-template-columns:1fr 1fr;grid-auto-rows:38vw}
  .mat,.mat:nth-child(n){grid-column:span 1;grid-row:span 1}.mat:nth-child(1),.mat:nth-child(6){grid-column:span 2}
  .scroll{display:none}
  .hero__media img{object-position:62% 50%}
  .btn{line-height:1.5;max-width:100%;text-align:center;padding:1rem 1.4rem;letter-spacing:.15em}
  .filters{flex-wrap:nowrap;overflow-x:auto;gap:1.4rem;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none;white-space:nowrap;padding:.7rem 0}
  .card__ov b{transform:none}
  .feature{height:clamp(22rem,62svh,32rem)}
  h2,h3{overflow-wrap:break-word}
  .footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
  .modal{width:calc(100vw - 1.5rem);max-height:90vh;max-height:90dvh}
  .modal__close{position:sticky;top:.6rem;right:auto;display:block;margin:.6rem .6rem -3.2rem auto}
  .modal__body{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
  .modal h3{font-size:2rem}
  .modal__imgs{grid-template-columns:1fr}.modal__imgs img:first-child{min-height:0;aspect-ratio:4/3}
}
@media (max-width:520px){
  .steps,.why__list,.footer{grid-template-columns:1fr}
  .btn--wa{margin:.8rem 0 0}.hero__btns .btn{width:100%}
  .logo{font-size:clamp(.9rem,4.7vw,1.2rem);letter-spacing:.16em}.logo span{letter-spacing:.24em}
  .hero__title{font-size:clamp(2.3rem,11.4vw,3.4rem)}
  .grid{grid-template-columns:1fr;grid-auto-rows:74vw}
  .card,.card--wide{grid-column:1}.card--tall{grid-row:span 1}
  .card__ov b{font-size:1.45rem}
  .form .btn,.btn--wa{width:100%}
  .about__small{width:46%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal,.hero__title,.hero__text,.hero__btns .btn{opacity:1;transform:none}
  .hero__media{transform:none}
}