:root{--bg:#f9f6f1;--ink:#33302b;--mute:#5d5850;--teal:#2f5f78;--teal2:#41778f;--or:#d6782c;--gold:#b8924a;--dark:#171410;--deep:#1c3a40;--line:#e4dccf;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Montserrat",system-ui,sans-serif;--w:1120px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 .9rem/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0}
h2{font-size:clamp(1.7rem,3.4vw,2.2rem);text-align:center;letter-spacing:.02em}
p{margin:0 0 1rem}
em{font-style:italic;color:var(--or)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--teal);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.wrap{width:min(var(--w),100% - 2.5rem);margin-inline:auto}
section{padding:clamp(3rem,7vw,5rem) 0}
.btn{display:inline-block;background:var(--teal);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.5rem;border:1px solid var(--teal);border-radius:2px;transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--teal2);transform:translateY(-1px)}
.btn.line{background:none;color:var(--teal)}
.btn.line:hover{background:var(--teal);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1b1610}
.btn.gold:hover{background:#c9a35d}
.more{color:var(--teal);font-size:.78rem;font-weight:500;display:inline-flex;gap:.5rem;transition:gap .25s}
.more:hover{gap:.85rem}
/* header */
header{position:sticky;top:0;z-index:50;background:var(--bg);transition:box-shadow .3s}
header.on{box-shadow:0 2px 18px rgba(0,0,0,.09)}
.bar{display:flex;align-items:center;gap:1.5rem;height:62px;width:min(1280px,100% - 2.5rem);margin-inline:auto}
.logo img{height:38px;width:auto}
nav{margin-left:auto}
nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
nav a{white-space:nowrap;font-size:.68rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:.4rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover,nav a[aria-current]{color:var(--teal);border-color:var(--teal)}
.lang{font-size:.68rem;font-weight:600;display:flex;gap:.6rem}
.lang a+a{border-left:1px solid var(--line);padding-left:.6rem}
.lang a:hover{color:var(--or)}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:0;cursor:pointer;margin-left:auto}
.burger span,.burger span::before,.burger span::after{display:block;width:22px;height:2px;background:var(--ink);margin:auto;position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded=true] span{background:none}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1080px){
.burger{display:block}
.bar>.btn,.bar>.lang{display:none}
nav{position:absolute;inset:62px 0 auto;background:var(--bg);margin:0;padding:0 1.5rem;max-height:0;overflow:hidden;transition:max-height .35s;box-shadow:0 12px 20px rgba(0,0,0,.08)}
nav.open{max-height:520px;padding-bottom:1.2rem}
nav ul{flex-direction:column;gap:0}
nav a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line)}
nav .lang,nav .btn{display:flex;margin-top:1rem}
nav .btn{justify-content:center}
}
@media(min-width:1081px){nav .lang,nav .btn{display:none}.bar>.lang{margin-left:0}}
/* hero */
.hero{position:relative;background:var(--dark);color:#f4efe8;padding:0;min-height:clamp(440px,50vw,560px);display:flex;align-items:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 0 auto;width:70%;background:url(assets/hero.jpg) center/cover;animation:zoom 14s ease-out both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 30%,rgba(23,20,16,.6) 52%,transparent 80%)}
.hero .wrap{position:relative;z-index:1;animation:rise 1.1s .15s both}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem);max-width:12em;margin-bottom:1.4rem}
.hero h1 span{font-size:.62em;display:block;font-weight:400;opacity:.9}
.hero p{max-width:26rem;font-size:.85rem}
.hero .tag{font-weight:500;margin:1rem 0 1.6rem}
.hero .tag i{font-family:var(--serif);font-size:1.1rem;color:#8db7cc}
@keyframes zoom{from{transform:scale(1.06)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:760px){.hero::before{width:100%}.hero::after{background:linear-gradient(180deg,rgba(23,20,16,.6),rgba(23,20,16,.85))}.hero{padding:4rem 0}}
/* intro */
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.intro h2{text-align:left;margin-bottom:1.5rem;font-size:clamp(1.8rem,3.4vw,2.3rem)}
.intro em{color:var(--teal)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.pillars img{height:56px;width:auto;margin:0 auto 1rem}
.pillars h3{font:600 .78rem var(--sans);letter-spacing:.1em;color:var(--teal);margin-bottom:.6rem}
.pillars p{font-size:.76rem;line-height:1.6;color:var(--mute)}
@media(max-width:900px){.intro{grid-template-columns:1fr}}
@media(max-width:560px){.pillars{grid-template-columns:1fr;gap:2rem}}
/* team */
.team{background:var(--dark);color:#eee7dc}
.team h2{font:400 1.25rem var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2.5rem}
.team h2::after{content:"";display:block;width:36px;height:1px;background:var(--gold);margin:.8rem auto 0}
.people{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.person{display:flex;gap:1.6rem;background:rgba(255,255,255,.04);padding:1.2rem}
.person img{width:140px;height:auto;aspect-ratio:1/1.45;object-fit:cover;flex:none}
.person h3{font-size:1.7rem;margin-bottom:.5rem}
.person h4{margin:0 0 1rem;font:500 .66rem/1.5 var(--sans);letter-spacing:.09em;color:var(--gold)}
.person p{font-size:.78rem;color:#cfc7ba}
@media(max-width:960px){.people{grid-template-columns:1fr}}
@media(max-width:480px){.person{flex-direction:column}.person img{width:100%;aspect-ratio:1/.9}}
/* help */
.help{background:#f1ede6;padding:2.5rem 0}
.help h2{font:400 1.2rem var(--sans);letter-spacing:.07em;text-transform:uppercase;margin-bottom:1.6rem}
.help ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr)}
.help li{text-align:center;padding:.5rem 1rem;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:1rem;border-left:1px solid var(--line)}
.help li:first-child{border:0}
.help img{height:56px;width:auto}
@media(max-width:900px){.help ul{grid-template-columns:repeat(3,1fr);row-gap:1.5rem}.help li:nth-child(4){border:0}}
@media(max-width:520px){.help ul{grid-template-columns:repeat(2,1fr)}.help li{border:0}}
/* services */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:0 2.4rem;margin:1.4rem 0 1.6rem;border-bottom:1px solid var(--line)}
.tabs button{font:500 .7rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.7rem 0;cursor:pointer;transition:color .2s,border-color .2s}
.tabs button[aria-selected=true]{color:var(--teal);border-color:var(--teal)}
.tabs button:hover{color:var(--teal)}
[role=tabpanel]:not([hidden]){animation:fade .5s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sub{max-width:40rem;margin:0 auto 1.8rem;text-align:center;color:var(--mute);font-family:var(--serif);font-size:1.2rem;line-height:1.45}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(60,40,10,.1)}
.card img,.ph{aspect-ratio:1.65;object-fit:cover;width:100%}
.ph{background:linear-gradient(135deg,#ece5d8,#e0d6c5)}
.card>div:not(.ph){padding:.8rem .8rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card h3{font:600 .85rem var(--sans)}
.card p{font-size:.76rem;line-height:1.5;color:var(--mute);margin:0;flex:1}
.card .more{font-size:.74rem}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.cards{grid-template-columns:1fr}}
/* why */
.why{padding-top:1rem}
.why ul{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.why li{text-align:center;padding:0 1.2rem;border-left:1px solid var(--line)}
.why li:first-child{border:0}
.why img{height:48px;width:auto;margin:0 auto 1rem}
.why h3{font:600 .7rem var(--sans);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.why p{font-size:.72rem;line-height:1.55;color:var(--mute);margin:0}
@media(max-width:960px){.why ul{grid-template-columns:repeat(2,1fr);row-gap:2rem}.why li:nth-child(odd){border:0}.why li:last-child{grid-column:1/-1}}
@media(max-width:520px){.why ul{grid-template-columns:1fr}.why li{border:0}}
/* testimonials */
.quotes{background:linear-gradient(135deg,#17312f,var(--deep) 60%,#122a2c);color:#e9e4da}
.quotes h2{font:400 1.25rem var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2.2rem}
.track{--g:1.5rem;list-style:none;margin:0;padding:0;display:flex;gap:var(--g);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track li{flex:0 0 calc((100% - 2*var(--g))/3);scroll-snap-align:start;display:flex}
.quotes blockquote{margin:0;width:100%;display:flex;flex-direction:column;padding:1.6rem 1.6rem 1.4rem;background:rgba(255,255,255,.05);border-top:2px solid var(--or)}
.quotes blockquote::before{content:"\201C";display:block;font:700 3.2rem/.8 var(--serif);color:var(--or);margin-bottom:.4rem}
.quotes p{font-size:.84rem;flex:1;margin-bottom:1.2rem}
.quotes cite{font:600 .8rem var(--sans);font-style:normal;color:var(--or)}
.ctrl{display:flex;justify-content:center;gap:.8rem;margin-top:1.6rem}
.ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(233,228,218,.4);background:none;color:#e9e4da;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,opacity .25s}
.ctrl button:hover:not(:disabled){background:var(--or);border-color:var(--or)}
.ctrl button:disabled{opacity:.3;cursor:default}
.ctrl svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
@media(max-width:900px){.track li{flex-basis:calc((100% - var(--g))/2)}}
@media(max-width:600px){.track li{flex-basis:88%}}
/* cta + footer */
.cta{position:relative;overflow:hidden;padding:clamp(2.5rem,5vw,3.5rem) 0}
.cta::after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:linear-gradient(90deg,var(--bg),transparent 40%),url(assets/cta.jpg) center/cover;z-index:0}
.cta .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.cta h2{text-align:left;font-size:clamp(1.6rem,3vw,2rem);margin-bottom:1rem}
.cta .lead{margin-bottom:1.5rem}
address{font-style:normal;display:grid;gap:1.3rem;border-left:1px solid var(--line);padding-left:2.5rem}
address a,address div{display:flex;gap:1rem;align-items:center;font-size:.85rem;font-weight:500}
address small{display:block;font-size:.6rem;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
address svg{width:26px;height:26px;flex:none;stroke:var(--mute);fill:none;stroke-width:1.2}
@media(max-width:960px){.cta::after{opacity:.35;width:100%;background:url(assets/cta.jpg) center/cover}.cta .wrap{grid-template-columns:1fr;gap:2rem}address{border:0;padding:0}}
footer{background:var(--dark);color:#cfc7ba;font-size:.7rem;padding:1.1rem 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between}
footer img{height:28px;width:auto;filter:brightness(1.6)}
footer nav{margin:0;position:static;display:flex;gap:2rem;max-height:none;padding:0;box-shadow:none;background:none}
footer a:hover{color:#fff}
.soc{display:flex;gap:1rem}
.soc svg{width:20px;height:20px;stroke:#e9e4da;fill:none;stroke-width:1.5}
/* reveal + motion */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.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}}
/* under construction */
.wip{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:2rem;text-align:center;padding:2rem}
.wip img{width:min(420px,80vw)}
.wip h1{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--teal)}
