/* KLINTHILLS VENTURES — style.css | tokens, base, layout, components */
:root{
  --ink:#202327; --paper:#eceeeb; --paper-2:#e0e3df; --white:#fafaf8;
  --stone:#8d918c; --stone-d:#5d615c; --copper:#b9753a; --copper-d:#8a531f; --green:#34503f;
  --line:rgba(32,35,39,.18); --line-l:rgba(236,238,235,.2);
  --f-display:'Archivo',system-ui,sans-serif; --f-body:'Source Sans 3',system-ui,sans-serif;
  --wrap:1240px; --gut:clamp(1.1rem,4vw,2.5rem); --hdr:72px;
  --fs-0:clamp(1rem,.97rem + .15vw,1.0625rem); --fs-1:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --fs-2:clamp(1.5rem,1.2rem + 1.4vw,2.3rem); --fs-3:clamp(2rem,1.3rem + 3vw,3.6rem); --fs-4:clamp(2.35rem,1.3rem + 4.8vw,5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font:400 var(--fs-0)/1.65 var(--f-body);color:var(--ink);background:var(--paper);overflow-x:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;margin:0 0 .6em;font-weight:700;letter-spacing:-.02em}
h1{font-size:var(--fs-4);font-weight:800;letter-spacing:-.035em}
h2{font-size:var(--fs-3);letter-spacing:-.03em} h3{font-size:var(--fs-1)}
p{margin:0 0 1.1em;max-width:62ch} a{color:inherit}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--copper);color:#1a1209;padding:.7rem 1rem;z-index:200}
.skip:focus{left:0}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
section{position:relative}
.sec{padding:clamp(4rem,9vw,8rem) 0}
.dark{background:var(--ink);color:var(--paper)} .dark p{color:#c9ccc8}
.alt{background:var(--paper-2)}

/* signature: dimension line, a ruled line with end ticks that carries a section label */
.dim{display:flex;align-items:center;gap:.9rem;font:600 .9rem/1 var(--f-display);color:var(--copper-d);margin-bottom:1.6rem}
.dark .dim,.hero .dim,.phero .dim{color:var(--copper)}
.dim::before,.dim::after{content:"";height:1px;background:currentColor;opacity:.6}
.dim::before{width:2.2rem}.dim::after{flex:1;max-width:14rem}
.dim i{font-style:normal;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.8rem 1.5rem;font:600 .98rem/1 var(--f-display);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;border-radius:2px}
.btn-p{background:var(--copper);color:#1a1209;border-color:var(--copper)} .btn-p:hover{background:#cc8648;border-color:#cc8648;transform:translateY(-2px)}
.btn-o{border-color:currentColor;background:transparent} .btn-o:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-o.on-light:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn svg{width:18px;height:18px;fill:currentColor}
.row{display:flex;flex-wrap:wrap;gap:.8rem}

/* header */
.hdr{position:fixed;inset:0 0 auto;height:var(--hdr);z-index:100;color:var(--paper);transition:background .3s,box-shadow .3s,height .3s}
.hdr.solid{background:rgba(32,35,39,.96);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line-l);height:64px}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{text-decoration:none;display:flex;align-items:center;gap:.7rem;line-height:1}
.brand svg{width:40px;height:40px;flex:none}
.brand b{display:block;font:800 1.18rem/1 var(--f-display);letter-spacing:.06em}
.brand small{display:block;font:500 .66rem/1 var(--f-display);letter-spacing:.42em;color:var(--copper);margin-top:.3rem}
.nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font:500 .94rem var(--f-display);padding:.4rem 0;border-bottom:1.5px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--copper)}
.hdr .btn{min-height:42px;padding:.55rem 1.15rem;font-size:.9rem}
.burger{display:none;width:48px;height:48px;background:none;border:0;color:inherit;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:12px;width:24px;height:2px;background:currentColor;transition:transform .25s,top .25s}
.burger span{top:23px}.burger span::before{content:"";top:-8px;left:0}.burger span::after{content:"";top:8px;left:0}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.nav .mob{display:none}
@media(max-width:980px){
  .burger{display:block}.hdr .btn-top{display:none}
  .nav{position:fixed;inset:64px 0 0 0;background:var(--ink);padding:2rem var(--gut);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;overflow:auto}
  .nav.open{opacity:1;transform:none;visibility:visible}
  .nav ul{flex-direction:column;gap:0}.nav li{border-bottom:1px solid var(--line-l)}
  .nav a{display:block;font-size:1.5rem;padding:1.1rem 0;border:0}
  .nav .mob{display:flex;flex-direction:column;gap:.7rem;margin-top:2rem}
  .nav .mob a{font-size:1rem;padding:.8rem 1.5rem}
}

/* photo slots: set --img (or add an <img>); the pattern underneath shows until then */
.photo{position:relative;overflow:hidden;background:var(--img,none) center/cover no-repeat,repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px),linear-gradient(160deg,#3a3f46,#23272c 70%)}
.photo>svg{position:absolute;inset:0;width:100%;height:100%}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* hero */
.hero{background:var(--ink);color:var(--paper);min-height:100svh;padding-top:calc(var(--hdr) + 2.5rem);display:grid;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,5vw,5rem);align-items:center;padding-bottom:3rem}
.hero h1{max-width:12ch}
.hero p.lead{font-size:var(--fs-1);line-height:1.5;color:#d3d6d2;max-width:34ch;margin-bottom:2rem}
.hero .where{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--line-l);display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font:500 .95rem var(--f-display);color:#c9ccc8}
.hero .where span{display:flex;align-items:center;gap:.5rem}
.hero .where span::before{content:"";width:7px;height:7px;background:var(--copper)}
.hero-art{aspect-ratio:4/5;max-height:76svh;width:100%;margin-left:auto}
.hero-art .tag{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;justify-content:space-between;gap:1rem;font:500 .78rem var(--f-display);color:var(--paper);opacity:.85}
.hero-in>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-in>*:nth-child(2){animation-delay:.12s}.hero-in>*:nth-child(3){animation-delay:.24s}.hero-in>*:nth-child(4){animation-delay:.36s}.hero-in>*:nth-child(5){animation-delay:.48s}
.hero-art{animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-art{aspect-ratio:16/11;max-height:none;order:-1}.hero{min-height:auto}}

.phero{background:var(--ink);color:var(--paper);padding:calc(var(--hdr) + 4.5rem) 0 4rem;overflow:hidden}
.phero h1{font-size:var(--fs-3);max-width:20ch}.phero p{font-size:var(--fs-1);line-height:1.5;color:#cfd2ce;max-width:46ch}
.crumbs{font:500 .85rem var(--f-display);color:#aeb2ad;margin-bottom:1.5rem}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--copper)}.crumbs span{margin:0 .5rem;opacity:.5}

.strip{background:var(--paper-2);border-bottom:1px solid var(--line)}
.strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.strip li{padding:1.6rem 1.4rem 1.6rem 0;border-right:1px solid var(--line);margin-right:1.4rem}
.strip li:last-child{border:0;margin:0}
.strip b{display:block;font:700 1.15rem var(--f-display);margin-bottom:.15rem}.strip span{font-size:.95rem;color:var(--stone-d);line-height:1.4;display:block}
@media(max-width:760px){.strip ul{grid-template-columns:1fr 1fr}.strip li{border:0;margin:0;padding:1.2rem .5rem 1.2rem 0;border-bottom:1px solid var(--line)}}

.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.about-photo{aspect-ratio:3/4;margin-top:3rem}
.facts{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.facts b{font:600 .95rem var(--f-display)}
@media(max-width:860px){.split{grid-template-columns:1fr}.about-photo{margin-top:0;aspect-ratio:16/10}.facts li{grid-template-columns:1fr;gap:.2rem}}

.svc{border-top:1px solid var(--line-l);margin-top:2.5rem}
.svc-i{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) auto;gap:1.5rem 3rem;align-items:start;padding:2rem 0;border-bottom:1px solid var(--line-l);transition:padding .3s,background .3s}
.svc-i:hover{background:linear-gradient(90deg,rgba(185,117,58,.12),transparent 70%);padding-left:1rem}
.svc-i h3{font-size:var(--fs-2);margin:0}.svc-i p{margin:0;color:#c3c6c2}
.svc-i a{font:600 .95rem var(--f-display);color:var(--copper);text-decoration:none;white-space:nowrap;padding:.4rem 0;border-bottom:1.5px solid var(--copper)}
@media(max-width:860px){.svc-i{grid-template-columns:1fr;gap:.8rem}}

.mat{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
.mat-i{background:var(--paper);padding:1.7rem;display:flex;flex-direction:column;justify-content:space-between;min-height:210px;grid-column:span 3;transition:background .25s,color .25s}
.mat-i:nth-child(1),.mat-i:nth-child(6){grid-column:span 6;background:var(--ink);color:var(--paper)}
.mat-i:nth-child(1) p,.mat-i:nth-child(6) p{color:#c3c6c2}
.mat-i:nth-child(4),.mat-i:nth-child(5),.mat-i:nth-child(7){grid-column:span 4}
.mat-i:hover{background:var(--copper);color:#1a1209}.mat-i:hover p{color:#2b1c0c!important}
.mat-i svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.5;margin-bottom:1.5rem}
.mat-i h3{font-size:1.25rem;margin-bottom:.4rem}.mat-i p{font-size:.95rem;margin:0;color:var(--stone-d)}
.note{font-size:.92rem;color:var(--stone-d);margin-top:1.2rem;max-width:70ch}
@media(max-width:900px){.mat-i,.mat-i:nth-child(n){grid-column:span 6}.mat-i:nth-child(1),.mat-i:nth-child(6){grid-column:span 12}}
@media(max-width:520px){.mat-i,.mat-i:nth-child(n){grid-column:span 12;min-height:0}}

.why{display:grid;grid-template-columns:repeat(5,1fr);margin-top:3rem;border-top:1px solid var(--line)}
.why>div{padding:1.6rem 1.4rem 0 0}.why>div:nth-child(2),.why>div:nth-child(4){padding-top:3.5rem}
.why h3{font-size:1.15rem}.why p{font-size:.97rem;color:var(--stone-d)}
@media(max-width:980px){.why{grid-template-columns:1fr 1fr}.why>div:nth-child(n){padding:1.4rem 1.2rem 0 0}}
@media(max-width:520px){.why{grid-template-columns:1fr}}

.show{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:end}
.show .big{grid-column:1/9;aspect-ratio:16/10}.show .small{grid-column:9/13;aspect-ratio:3/4}
.show .cap{grid-column:2/8;margin-top:-4.5rem;position:relative;background:var(--paper);color:var(--ink);padding:2rem 2.2rem;border-left:4px solid var(--copper)}
.show .cap p{margin:0;color:var(--ink)}.show .cap h3{font-size:var(--fs-2)}
@media(max-width:860px){.show .big{grid-column:1/-1}.show .small{display:none}.show .cap{grid-column:1/-1;margin:-3rem 1rem 0;padding:1.4rem}}

.locs{display:grid;grid-template-columns:7fr 5fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
.loc{background:var(--paper);padding:clamp(1.6rem,3vw,2.8rem)}
.loc.hq{background:var(--ink);color:var(--paper)}.loc.hq p,.loc.hq address{color:#cfd2ce}
.loc h3{font-size:var(--fs-2);margin-bottom:.4rem}.loc .tagl{font:600 .88rem var(--f-display);color:var(--copper-d);margin-bottom:1rem}
.hq .tagl{color:var(--copper)}
.loc address{font-style:normal;margin-bottom:1.1rem}.loc .tel{display:block;font:700 1.5rem var(--f-display);text-decoration:none;margin-bottom:1.4rem}
.loc .tel:hover{color:var(--copper)}
@media(max-width:860px){.locs{grid-template-columns:1fr}}

.testi blockquote{margin:0 0 1.5rem;padding-left:1.2rem;border-left:3px solid var(--copper);font-size:var(--fs-1)}
.testi[hidden]{display:none}

.cta{background:var(--green);color:var(--paper);padding:clamp(4rem,8vw,6.5rem) 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.07) 119px 120px);pointer-events:none}
.cta .wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:end}
.cta h2{margin:0 0 .5em;max-width:14ch}.cta p{color:#d7e0da}
@media(max-width:860px){.cta .wrap{grid-template-columns:1fr}}

.prose h2{font-size:var(--fs-2);margin-top:2.2em}.prose h3{margin-top:1.8em}.prose ul{padding-left:1.1rem;max-width:62ch}.prose li{margin-bottom:.45em}
.prose a{color:var(--copper-d);text-underline-offset:3px}
.aside{border:1px solid var(--line);padding:1.6rem;background:var(--white);position:sticky;top:90px}
.aside h3{font-size:1.15rem}.aside .tel{display:block;font:700 1.2rem var(--f-display);text-decoration:none;margin:.3rem 0 1rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:2rem 0;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);font:800 1.5rem var(--f-display);color:var(--copper-d)}
.steps b{display:block;font-family:var(--f-display)}
@media(max-width:860px){.aside{position:static}}

.form{display:grid;gap:1.1rem}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form label{display:block;font:600 .92rem var(--f-display);margin-bottom:.35rem}
.form input,.form select,.form textarea{width:100%;font:inherit;padding:.85rem .9rem;min-height:50px;background:var(--white);border:1.5px solid #8d918c;border-radius:2px;color:var(--ink)}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--copper);outline:3px solid rgba(185,117,58,.3);outline-offset:0}
.form .err{color:#a02a1c;font-size:.88rem;margin-top:.25rem}
.form .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.msg{padding:1rem 1.2rem;border-left:4px solid;margin-bottom:1.2rem;font-weight:500}.msg.ok{background:#dfeadf;border-color:var(--green)}.msg.bad{background:#f3dcd8;border-color:#a02a1c}
@media(max-width:560px){.form .two{grid-template-columns:1fr}}
.maps{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.mapbox{border:1px solid var(--line);padding:1.5rem;background:var(--white);display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
@media(max-width:700px){.maps{grid-template-columns:1fr}}

.ftr{background:#17191c;color:#c3c6c2;padding:4.5rem 0 1.5rem}
.ftr-g{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--line-l)}
.ftr h4{font:600 1rem var(--f-display);color:var(--paper);margin-bottom:1rem}
.ftr ul{list-style:none;margin:0;padding:0}.ftr li{margin-bottom:.45rem}
.ftr a{text-decoration:none}.ftr a:hover{color:var(--copper)}
.ftr address{font-style:normal;font-size:.95rem;line-height:1.55;margin-bottom:1rem}.ftr address b{color:var(--paper);display:block;font-family:var(--f-display)}
.soc{display:flex;gap:.7rem;margin-top:1rem}
.soc a{width:44px;height:44px;border:1px solid var(--line-l);display:grid;place-items:center}.soc a svg{width:19px;height:19px;fill:currentColor}
.soc a[hidden]{display:none}.soc a:hover{background:var(--copper);color:#1a1209;border-color:var(--copper)}
.ftr-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;padding-top:1.4rem;font-size:.88rem}
@media(max-width:900px){.ftr-g{grid-template-columns:1fr 1fr}}@media(max-width:520px){.ftr-g{grid-template-columns:1fr}}

.wa{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:.6rem;background:#1f9d55;color:#fff;text-decoration:none;font:600 .92rem var(--f-display);height:54px;padding:0 1.1rem 0 .95rem;border-radius:30px;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .2s,background .2s}
.wa:hover{transform:translateY(-3px);background:#188548}.wa svg{width:26px;height:26px;fill:#fff}
@media(max-width:600px){.wa{width:54px;padding:0;justify-content:center}.wa span{display:none}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
.hero h1{font-size:clamp(2.2rem,1.2rem + 3.9vw,4.1rem);max-width:15ch}
.soc a svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-art .ph-art{opacity:.95}
.t-link{color:var(--copper-d);font-weight:600;text-underline-offset:3px}.dark .t-link{color:var(--copper)}
.hub{display:grid;grid-template-columns:7fr 5fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:860px){.hub{grid-template-columns:1fr}}
/* image slots: add files with these names in assets/images/ (jpg). Missing files simply show the pattern. */
.i-hero{--img:url(../images/hero.jpg)}.i-about{--img:url(../images/about.jpg)}.i-p1{--img:url(../images/project-1.jpg)}.i-p2{--img:url(../images/project-2.jpg)}
.mapframe{width:100%;height:300px;border:0;background:var(--paper-2);filter:grayscale(.25)}
.prose .mapframe{margin:1.5rem 0;height:340px}
@media(max-width:600px){.mapframe{height:260px}}
.split.wide{grid-template-columns:7fr 5fr}
@media(max-width:860px){.split.wide{grid-template-columns:1fr}}