/* =========================================================
   Tokens
   ========================================================= */
:root{
  /* color */
  --cream:#f6f3ed;--bone:#ebe6dc;--charcoal:#17191a;--charcoal-2:#222628;
  --brass:#c4a362;--brass-light:#d8b977;--brass-dark:#8a6c2f;
  --gray:#62665f;--line:#d9d4c8;
  --light:#f1eee7;--light-2:#cfcbc1;--light-3:#b9b6ad;--light-4:#a9a69d;--footer-text:#8d8f88;
  /* type */
  --ff-sans:'Hanken Grotesk',system-ui,sans-serif;
  --ff-serif:'Lora',Georgia,serif;
  --fs-h1:clamp(2rem,1.2rem + 4.6vw,5.25rem);
  --fs-h2:clamp(2rem,1.3rem + 3vw,3.6rem);
  --fs-h3:clamp(1.4rem,1.2rem + .7vw,1.8rem);
  --fs-h4:clamp(1.25rem,1.15rem + .4vw,1.4rem);
  --fs-display:clamp(1.5rem,1rem + 2.1vw,2.6rem);
  --fs-detail:clamp(1.3rem,1.15rem + .7vw,1.6rem);
  --fs-lead:clamp(1.05rem,.95rem + .5vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-sm:.95rem;
  --fs-xs:.8rem;
  /* space & layout */
  --gutter:clamp(1.25rem,4vw,1.5rem);
  --container:1200px;
  --section-y:clamp(4rem,3rem + 6vw,8rem);
  --stack-head:clamp(2.25rem,1.5rem + 3vw,4rem);
  --col-gap:clamp(1.5rem,6vw,6rem);
  --header-h:112px;
  --logo-h:100px;
  --gallery-gap:clamp(.75rem,1.5vw,1.125rem);
  --radius:3px;
}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 var(--fs-body)/1.7 var(--ff-sans);color:var(--charcoal);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--ff-serif);font-weight:400;line-height:1.15;margin:0;letter-spacing:-.015em;text-wrap:balance}
h1,h2{font-weight:500;line-height:1.1;letter-spacing:-.02em}
img{max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(var(--container),100% - 2 * var(--gutter));margin-inline:auto}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.9rem 1.8rem;border-radius:var(--radius);font:500 var(--fs-sm)/1.2 var(--ff-sans);letter-spacing:.02em;text-align:center;text-decoration:none;white-space:nowrap;border:1px solid var(--brass);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn.primary{background:var(--brass);color:var(--charcoal)}.btn.primary:hover{background:var(--brass-light);border-color:var(--brass-light)}
.btn.secondary{background:transparent;color:inherit;border-color:currentColor}.btn.secondary:hover{background:rgba(255,255,255,.14)}
.eyebrow{display:inline-block;font:500 var(--fs-xs)/1.4 var(--ff-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}

/* =========================================================
   Header
   ========================================================= */
header{position:fixed;inset:0 0 auto;z-index:10;color:#fff;transition:background .3s,box-shadow .3s}
header.scrolled{background:rgba(23,25,26,.94);backdrop-filter:blur(8px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--header-h)}
.logo{display:flex;align-items:center;flex:none;padding-block:.25rem;text-decoration:none}
.logo img{display:block;height:var(--logo-h);width:auto;margin-left:calc(var(--logo-h) * -.207)}
nav{display:flex;gap:clamp(1rem,2.5vw,2.2rem);align-items:center;font-size:var(--fs-sm);font-weight:500}
nav a{text-decoration:none}
nav a:not(.btn){padding-block:.6rem}
nav a:hover{color:var(--brass-light)}
nav .btn{min-height:2.75rem;padding:.55rem 1.3rem}nav .btn:hover{color:#fff}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--charcoal) url(../../img/hero.jpg) center 62%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,25,26,.55) 0%,rgba(23,25,26,.2) 30%,rgba(23,25,26,.82) 100%),linear-gradient(90deg,rgba(23,25,26,.55),transparent 65%)}
.hero .wrap{position:relative;padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4rem))}
.hero h1{font-size:var(--fs-h1);max-width:16ch;margin:1rem 0 1.3rem}
.hero p{font-size:var(--fs-lead);max-width:48ch;color:#e5e2da;margin:0 0 2.2rem}
.actions{display:flex;gap:.9rem;flex-wrap:wrap}
.guarantees{position:relative;margin-top:clamp(3rem,7vw,5.5rem);border-top:1px solid rgba(255,255,255,.28);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.guarantees div{padding:1.5rem 2rem 1.9rem 0}
.guarantees div+div{padding-left:2rem;border-left:1px solid rgba(255,255,255,.2)}
.guarantees h3{font-size:var(--fs-h4);margin-bottom:.35rem}
.guarantees p{margin:0;color:var(--light-2);font-size:var(--fs-sm);line-height:1.5}

/* =========================================================
   Sections and section heads
   ========================================================= */
section{padding:var(--section-y) 0}
h2{font-size:var(--fs-h2)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--col-gap);align-items:end;margin-bottom:var(--stack-head)}
.section-head p{margin:0;color:var(--gray);max-width:48ch}
.section-head h2,.contact h2{font-size:var(--fs-display)}

/* intro */
.intro{background:var(--bone)}
.intro p{font:400 var(--fs-display)/1.3 var(--ff-serif);width:80%;margin:0 auto;text-align:left}
.intro p em{color:var(--brass-dark)}

/* gallery: grid so the visual order matches the lightbox order */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gallery-gap)}
.gallery button{display:block;width:100%;margin:0;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:var(--bone);cursor:zoom-in;position:relative;aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s,filter .3s}
.gallery button:hover img{transform:scale(1.03)}
.gallery .placeholder{display:grid;place-items:center;aspect-ratio:4/5;background:var(--bone);color:var(--gray)}

/* services (shares background with work: no double spacing) */
.services{background:var(--cream)}
#work + .services{padding-top:0}
.services ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--charcoal);counter-reset:s}
/* the 3rd column starts where the .section-head paragraph does (1fr / 1.15fr + --col-gap) */
.services li{--num:70px;--g:1.5rem;counter-increment:s;display:grid;grid-template-columns:var(--num) calc((100% - var(--col-gap)) / 2.15 + var(--col-gap) - var(--num) - 2 * var(--g)) minmax(0,1fr);gap:var(--g);align-items:baseline;padding:1.7rem 0;border-bottom:1px solid var(--line);transition:padding .25s}
.services li::before{content:"0" counter(s);font:italic 1.5rem/1 var(--ff-serif);color:var(--brass-dark)}
.services h3{font-size:var(--fs-h3)}
.services p{margin:0;color:var(--gray)}
@media(hover:hover){.services li:hover{padding-left:.8rem}}

/* process */
.process{background:var(--charcoal);color:var(--light)}
.process .section-head p{color:var(--light-4)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);padding:0;margin:0;list-style:none;counter-reset:p}
.steps li{counter-increment:p;border-top:1px solid rgba(196,163,98,.6);padding-top:1.4rem}
.steps li::before{content:counter(p);font:italic 3rem/1 var(--ff-serif);color:var(--brass)}
.steps h3{font-size:var(--fs-h4);margin:.6rem 0}
.steps p{margin:0;color:var(--light-3)}

/* contact */
.contact .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,7vw,6rem);align-items:start}
.contact .eyebrow{color:var(--brass-dark)}
.contact h2{margin:.8rem 0 clamp(1.5rem,3vw,2rem)}
.contact-item{margin:0 0 1.5rem;color:var(--gray);font-size:var(--fs-sm)}
.contact-item b{display:block;color:var(--charcoal);font:400 var(--fs-detail)/1.2 var(--ff-serif);margin-top:.15rem}
.contact-item a{display:inline-block;padding-block:.2rem;text-decoration:none}
.contact-item a:hover{color:var(--brass-dark)}

/* form */
form{display:grid;gap:1.1rem;background:#fff;padding:clamp(1.25rem,3.2vw,2.6rem);border-radius:var(--radius);box-shadow:0 20px 50px -28px rgba(23,25,26,.35)}
label{font-weight:500;display:grid;gap:.4rem;font-size:.92rem;line-height:1.4}
input,select,textarea{font:inherit;line-height:1.4;min-height:3rem;padding:.8rem .95rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);color:var(--charcoal);width:100%;font-weight:400}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brass);outline:none;background:#fff}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px rgba(196,163,98,.35)}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.1rem}
.field-error{color:#a3261b;font-size:.85rem;font-weight:400;line-height:1.3}
[aria-invalid="true"]{border-color:#a3261b}
form .btn{width:100%}
#form-status{min-height:1.4em;font-weight:500;margin:0}#form-status.success{color:#1d6b3a}#form-status.error{color:#a3261b}

/* footer */
footer{background:var(--charcoal);color:var(--footer-text);padding:clamp(2.5rem,5vw,3.5rem) 0 1.8rem;font-size:.92rem}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.6rem 2rem}
.footer-logo{--w:min(100%,clamp(190px,20vw,240px));grid-column:1/-1;justify-self:start;display:block;width:var(--w);height:auto;margin:0 0 clamp(1.25rem,2.5vw,2rem) calc(var(--w) * -.08)}

/* mobile bar */
.mobile-bar{display:none}

/* lightbox */
dialog{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible}
dialog::backdrop{background:rgba(10,12,12,.92)}
dialog img{max-width:92vw;max-height:88vh;max-height:88dvh;border-radius:var(--radius);display:block}
dialog .close,dialog .nav{position:fixed;display:grid;place-items:center;background:rgba(23,25,26,.55);color:#fff;border:1px solid rgba(255,255,255,.25);width:46px;height:46px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .2s}
dialog .close:hover,dialog .nav:hover{background:rgba(23,25,26,.8)}
dialog .close{top:18px;right:18px}
dialog .nav{top:50%;transform:translateY(-50%)}
dialog .nav.prev{left:16px}dialog .nav.next{right:16px}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.js .reveal.visible{opacity:1;transform:none}

/* =========================================================
   Small laptop / landscape tablet (≤ 1024px)
   ========================================================= */
@media(max-width:1024px){
 .contact .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
}

/* =========================================================
   Tablet (≤ 768px)
   ========================================================= */
@media(max-width:768px){
 :root{--header-h:80px;--logo-h:64px}
 .section-head,.contact .grid,.steps{grid-template-columns:minmax(0,1fr)}
 .section-head{gap:1rem}
 .guarantees{grid-template-columns:minmax(0,1fr)}
 .guarantees div,.guarantees div+div{padding:1.1rem 0;border-left:0;border-top:1px solid rgba(255,255,255,.2)}
 .guarantees div:first-child{border-top:0}
 .services li{grid-template-columns:44px minmax(0,1fr);gap:.4rem 1rem;padding:1.5rem 0}
 .services li p{grid-column:2}
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 nav a:not(.btn){display:none}
 .mobile-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;inset:auto 0 0;z-index:9;background:var(--charcoal);border-top:1px solid #34393a;padding-bottom:env(safe-area-inset-bottom)}
 .mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.75rem;text-decoration:none;color:#fff;font-weight:500}
 .mobile-bar a+a{background:var(--brass);color:var(--charcoal)}
 footer{padding-bottom:calc(3.25rem + 1.8rem + env(safe-area-inset-bottom))}
 dialog .nav.prev{left:8px}dialog .nav.next{right:8px}dialog .close{top:12px;right:12px}
}

/* =========================================================
   Mobile (≤ 480px)
   ========================================================= */
@media(max-width:480px){
 .actions .btn{flex:1 1 100%}
 footer .wrap{grid-template-columns:minmax(0,1fr)}
}

/* Mobile (≤ 440px): compact single-line header */
@media(max-width:440px){
 :root{--logo-h:54px}
 header .wrap{gap:.75rem}
 nav .btn{padding:.5rem .65rem;font-size:.78rem;letter-spacing:.01em}
}
@media(max-width:360px){
 :root{--gutter:1rem;--logo-h:48px}
}

/* Short screens (landscape phones): the headline must not fill the whole screen */
@media(max-height:500px) and (orientation:landscape){
 :root{--header-h:64px;--logo-h:52px}
 .hero .wrap{padding-top:calc(var(--header-h) + 1.5rem)}
 .hero h1{font-size:min(var(--fs-h1),14vh);margin:.6rem 0 1rem}
 .hero p{margin-bottom:1.5rem}
 .guarantees{margin-top:2.5rem}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}}