/* Layout: one centred column (1180px), image-led hero with a dark scrim, alternating light/deep-green bands */
:root{
  --bg:#f5f7f2; --surface:#ffffff; --fg:#10201a; --muted:#3d4f45;
  --line:#d3dccf; --forest:#0f3324; --forest-fg:#f2f7f0; --leaf:#1f6b43;
  --laterite:#a9431e; --on-accent:#ffffff; --chip:#e4ece0;
  --scrim:rgba(6,22,15,.78);
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;
  --step--1:.9375rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.25rem; --step-4:clamp(2.4rem,5.4vw,4rem);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1611; --surface:#13221a; --fg:#eef4ec; --muted:#b9c8bd; --line:#2a3d32;
  --forest:#08120d; --forest-fg:#eef4ec; --leaf:#6fcf97; --laterite:#f08a5d; --on-accent:#0c1611; --chip:#1d3126;
  --scrim:rgba(3,10,7,.82); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1611; --surface:#13221a; --fg:#eef4ec; --muted:#b9c8bd; --line:#2a3d32;
  --forest:#08120d; --forest-fg:#eef4ec; --leaf:#6fcf97; --laterite:#f08a5d; --on-accent:#0c1611; --chip:#1d3126;
  --scrim:rgba(3,10,7,.82); color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--forest)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--laterite);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-family:var(--font-body);font-weight:700;letter-spacing:0}
p{margin:0}
em{font-style:normal;color:var(--leaf)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.section{padding-block:clamp(56px,8vw,104px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--laterite)}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor}
.head{display:grid;gap:14px;max-width:640px}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 48px;margin-bottom:40px}
.lede{max-width:46ch;color:var(--muted);font-size:var(--step-1);line-height:1.55}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s;cursor:pointer;font-family:inherit}
.btn--primary{background:var(--laterite);color:var(--on-accent)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{border-color:currentColor;color:#fff}
.btn svg{width:18px;height:18px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--forest);color:var(--forest-fg)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-body);font-size:1.5rem;font-weight:700;letter-spacing:0}
.brand img{width:30px;height:auto}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-weight:600;font-size:1rem}
.nav-links a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px}
.nav-links .btn{padding:10px 18px}
.nav-toggle{display:none;background:none;border:0;color:inherit;padding:8px;cursor:pointer}
.nav-toggle svg{width:26px;height:26px}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--forest);padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));display:none}
  .nav-links.open{display:flex}
  .nav-links li a:not(.btn){display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav-links .btn{margin-top:14px;justify-content:center}
}

/* hero */
.hero{position:relative;color:#fff;background:#173d2a;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--scrim) 0%,rgba(6,22,15,.62) 55%,rgba(6,22,15,.35) 100%)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:40px;align-items:end;padding-block:clamp(72px,10vw,128px)}
.hero__copy{display:grid;gap:22px;max-width:640px}
.trust{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;background:rgba(0,0,0,.35);padding:8px 14px;border-radius:999px;width:fit-content;border:1px solid rgba(255,255,255,.2)}
.stars{display:flex;gap:2px;color:#f6c453}.stars svg{width:15px;height:15px}
.hero h1{font-size:var(--step-4);font-weight:600;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero h1 em{color:#9be3b5;font-style:italic}
.hero p{font-size:var(--step-1);line-height:1.55;color:#eef4ec;max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.hero__card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:rgba(255,255,255,.96);color:#10201a;border-radius:14px;padding:10px;text-decoration:none;max-width:360px;justify-self:end;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.hero__card img{width:96px;height:84px;object-fit:cover;border-radius:10px;background:#cfdccc}
.hero__card b{font-size:1rem}.hero__card span{color:#3d4f45;font-size:.9rem}
@media (max-width:820px){.hero__grid{grid-template-columns:1fr}.hero__card{justify-self:start}}

/* about */
.about__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;margin-bottom:48px}
.about__body{display:grid;gap:16px;color:var(--muted);font-size:var(--step-1);line-height:1.6}
.about__body strong{color:var(--fg)}
.stats{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:12px}
.stat b{display:block;font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--leaf);font-variant-numeric:tabular-nums}
.stat span{font-size:.95rem;font-weight:600;color:var(--muted)}
@media (max-width:820px){.about__top{grid-template-columns:1fr;gap:28px}}

.compare{position:relative;aspect-ratio:16/8;max-width:100%;border-radius:18px;overflow:hidden;background:#cfdccc;--pos:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.compare__knob{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;color:#0f3324;display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.3);pointer-events:none}
.compare__knob svg{width:24px;height:24px}
.compare__label{position:absolute;top:16px;background:rgba(6,22,15,.85);color:#fff;font-size:.85rem;font-weight:700;padding:6px 12px;border-radius:999px;letter-spacing:.04em}
.compare__label--l{left:16px}.compare__label--r{right:16px}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px 48px;margin-top:28px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.feature__head{display:grid;gap:10px;align-content:start}
.feature__title{font-family:var(--font-display);font-size:var(--step-3);font-weight:600;letter-spacing:-.01em}
.feature__where{color:var(--muted);font-weight:600}
.feature__where em{font-style:italic;color:var(--fg)}
.feature__body{display:grid;gap:16px;color:var(--muted)}
.feature__list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.feature__list li{position:relative;padding-left:22px;color:var(--fg)}
.feature__list li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--laterite)}
@media (max-width:820px){.feature{grid-template-columns:1fr;padding:22px}}
@media (max-width:600px){.compare{aspect-ratio:4/3}}

.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr);gap:20px;margin-top:56px}
.pillar{display:grid;gap:10px;align-content:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.pillar .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--chip);color:var(--leaf)}
.pillar .ico svg{width:24px;height:24px}
.pillar p{color:var(--muted);font-size:1rem}
.founder{display:grid;gap:18px;align-content:space-between;padding:28px;background:var(--forest);color:var(--forest-fg);border-radius:16px}
.founder blockquote{margin:0;font-family:var(--font-display);font-size:1.4rem;line-height:1.35}
.founder__id strong{display:block}.founder__id span{font-size:.92rem;opacity:.85}
@media (max-width:1000px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pillars{grid-template-columns:1fr}}

/* services */
.band{background:var(--forest);color:var(--forest-fg)}
.band .eyebrow{color:#f3a37e}.band em{color:#9be3b5}.band .lede{color:#cfe0d4}
.services__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.service{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);background:#fff;color:#10201a;border-radius:18px;overflow:hidden}
.service__body{display:grid;gap:12px;align-content:start;padding:28px}
.service__kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a9431e}
.service p{color:#3d4f45;font-size:1rem}
.service ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:4px 0 0;padding:0}
.service li{font-size:.85rem;font-weight:600;background:#e4ece0;color:#0f3324;padding:5px 12px;border-radius:999px}
.service__img{background:#cfdccc;min-height:200px}
.service__img img{width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.services__grid{grid-template-columns:1fr}}
@media (max-width:560px){.service{grid-template-columns:1fr}.service__img{order:-1;height:200px}}

.process{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:48px 0 0;counter-reset:step}
.process li{counter-increment:step;display:grid;gap:6px;padding:20px;border-top:3px solid #9be3b5;background:rgba(255,255,255,.06);border-radius:0 0 12px 12px}
.process li::before{content:"Step " counter(step);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f3a37e}
.process strong{font-size:1.15rem}
.process span{color:#cfe0d4;font-size:.95rem}
@media (max-width:900px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.process{grid-template-columns:1fr}}
.also{margin-top:28px;color:#cfe0d4}.also b{color:#fff}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{font:inherit;font-weight:600;font-size:.95rem;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:220px;gap:16px}
.shot{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#cfdccc}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;inset:auto 0 0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(4,14,9,.88));color:#fff;display:grid;gap:2px}
.shot figcaption span{font-size:.82rem;font-weight:600;color:#cfe0d4}
.shot figcaption b{font-size:1.1rem}
.shot--a{grid-column:span 4;grid-row:span 2}.shot--b{grid-column:span 2}.shot--c{grid-column:span 2}
.shot--d{grid-column:span 3}.shot--e{grid-column:span 3}
.gallery.filtered .shot{grid-column:span 2;grid-row:span 1}
@media (max-width:760px){.gallery{grid-template-columns:1fr;grid-auto-rows:240px}.gallery .shot{grid-column:auto!important;grid-row:auto!important}}

/* clients */
.clients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0}
.client{display:grid;grid-template-rows:96px auto;align-content:start;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-width:0}
.client__logo{display:grid;place-items:center;background:#ffffff;border:1px solid #e3e9df;border-radius:12px;padding:12px;overflow:hidden}
.client__logo img{max-height:68px;max-width:100%;width:auto;object-fit:contain}
.client__mono{display:none;font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:#0f3324;letter-spacing:.02em}
.client__logo.no-logo{background:var(--chip);border-color:transparent}
.client__logo.no-logo img{display:none}.client__logo.no-logo .client__mono{display:block;color:var(--leaf)}
.client__text{display:grid;gap:2px;min-width:0}
.client b{font-size:1.05rem;line-height:1.3}
.client span.sector{color:var(--muted);font-weight:600;font-size:.9rem}
@media (max-width:900px){.clients{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.client{grid-template-rows:80px auto;padding:16px}}
.brand-panel{display:grid;place-items:center}
.brand-panel img{width:min(220px,60%);height:auto}
footer .brand-foot{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
footer .brand-foot img{width:22px;height:auto}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.contact__copy{display:grid;gap:18px}
.contact__copy p{color:#cfe0d4;font-size:var(--step-1)}
.contact__list{display:grid;gap:10px;list-style:none;padding:0;margin:8px 0 0}
.contact__list li{display:flex;gap:10px;align-items:center;font-weight:600}
.contact__list svg{width:20px;height:20px;color:#9be3b5;flex:none}
form{display:grid;gap:16px;background:#fff;color:#10201a;padding:28px;border-radius:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid #b9c6b5;border-radius:10px;background:#fbfcfa;color:#10201a;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:#1f6b43;box-shadow:0 0 0 3px rgba(31,107,67,.2)}
textarea{min-height:110px;resize:vertical}
.form__ok{background:#e4ece0;color:#0f3324;padding:14px;border-radius:10px;font-weight:600}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
@media (max-width:480px){.row{grid-template-columns:1fr}}

footer{background:var(--forest);color:#cfe0d4;border-top:1px solid rgba(255,255,255,.1);padding-block:28px;font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.form__err{background:#fbe3da;color:#7a2a0e;padding:14px;border-radius:10px;font-weight:600}