/* ============ TOKENS ============ */
:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --color-bg:#F8F5F0;
  --color-surface:#FCFAF7;
  --color-surface-offset:#F0EAE1;
  --color-divider:#E2D9CC;
  --color-border:#D6CBBB;
  --color-text:#1C1917;
  --color-text-muted:#6B6157;
  --color-text-faint:#A79C8E;
  --color-text-inverse:#F8F5F0;
  --color-primary:#8A5A2B;
  --color-primary-hover:#6E4620;
  --color-ink:#14120F;

  --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.5rem;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --shadow-md:0 4px 16px oklch(.2 .01 60 / .07);
  --shadow-lg:0 18px 48px oklch(.2 .01 60 / .13);

  --content-wide:1240px;
  --font-display:'Zodiak','Georgia',serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;
}
[data-theme="dark"] {
  --color-bg:#17150F;
  --color-surface:#1E1B15;
  --color-surface-offset:#231F19;
  --color-divider:#2E291F;
  --color-border:#3D372C;
  --color-text:#EDE6DA;
  --color-text-muted:#A3998A;
  --color-text-faint:#6E655A;
  --color-text-inverse:#17150F;
  --color-primary:#C89058;
  --color-primary-hover:#DCA66E;
  --color-ink:#0F0E0A;
  --shadow-md:0 4px 16px rgb(0 0 0 / .4);
  --shadow-lg:0 18px 48px rgb(0 0 0 / .55);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5.5rem;text-size-adjust:none}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}
img,svg{display:block;max-width:100%;height:auto}
ul[role=list],ol[role=list]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
h1,h2,h3{text-wrap:balance;line-height:1.12;font-family:var(--font-display);font-weight:500;letter-spacing:-.015em}
p,li{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a,button,input,textarea,select,summary{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),opacity var(--transition-interactive)}
::selection{background:color-mix(in oklab,var(--color-primary) 25%,transparent)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-4);top:var(--space-4);z-index:99;background:var(--color-surface);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ============ SHARED ============ */
.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--color-primary)}
.eyebrow--light{color:color-mix(in oklab,#E8B57A 85%,white)}
.lede{font-size:var(--text-lg);line-height:1.5;color:var(--color-text-muted);max-width:52ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  background:var(--color-ink);color:#F8F5F0;font-size:var(--text-sm);font-weight:700;
  letter-spacing:.01em;padding:var(--space-4) var(--space-8);border-radius:var(--radius-md);
  text-decoration:none;border:1px solid var(--color-ink)}
.btn:hover{background:var(--color-primary);border-color:var(--color-primary)}
[data-theme=dark] .btn{background:var(--color-primary);border-color:var(--color-primary);color:#17150F}
[data-theme=dark] .btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
.btn--ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}
.btn--ghost:hover{background:transparent;border-color:var(--color-text);color:var(--color-text)}
[data-theme=dark] .btn--ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)}
[data-theme=dark] .btn--ghost:hover{background:transparent;border-color:var(--color-text);color:var(--color-text)}
.btn--light{background:#F8F5F0;color:#1C1917;border-color:#F8F5F0}
.btn--light:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
[data-theme=dark] .btn--light{background:#EDE6DA;color:#17150F;border-color:#EDE6DA}
.btn--full{width:100%}

.sec{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-16),9vw,var(--space-32)) var(--space-6)}
.sec--alt{max-width:none;background:var(--color-surface-offset);border-block:1px solid var(--color-divider)}
.sec--alt>*{max-width:var(--content-wide);margin-inline:auto}
.sec__hd{max-width:62ch;margin-bottom:clamp(var(--space-10),5vw,var(--space-16))}
.sec__hd h2{font-size:var(--text-xl)}
.sec__hd p{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--text-base)}

/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transition-interactive)}
.hdr--scrolled{border-bottom-color:var(--color-divider)}
.hdr__in{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-4) var(--space-6);
  display:flex;align-items:center;gap:var(--space-8)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);margin-right:auto}
.brand__mark{width:auto;height:46px;flex:none;display:block;object-fit:contain}
[data-theme="dark"] .brand__mark{filter:invert(1) brightness(1.12)}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brand__sub{font-size:.6875rem;text-transform:uppercase;letter-spacing:.13em;color:var(--color-text-faint);font-weight:500;white-space:nowrap}
.nav{display:flex;gap:var(--space-6)}
.nav a{font-size:var(--text-sm);text-decoration:none;color:var(--color-text-muted);font-weight:500}
.nav a:hover{color:var(--color-text)}
.hdr__act{display:flex;align-items:center;gap:var(--space-3)}
.tog{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-md);color:var(--color-text-muted);border:1px solid var(--color-border)}
.tog:hover{color:var(--color-text);border-color:var(--color-text)}
@media (max-width:860px){.nav{display:none}.hdr__in{gap:var(--space-4)}}
@media (max-width:620px){
  .brand__sub{display:none}
  .brand__mark{height:38px}
  .hdr__in{padding:var(--space-3) var(--space-5)}
  .hdr__act .btn--sm{white-space:nowrap;padding:var(--space-3) var(--space-4);letter-spacing:0}
  .tog{width:32px;height:32px}
}
@media (max-width:380px){.hdr__act .btn--sm{font-size:.75rem;padding:var(--space-3)}}

/* ============ HERO ============ */
.hero{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-12),6vw,var(--space-24)) var(--space-6) clamp(var(--space-16),8vw,var(--space-24));
  display:grid;grid-template-columns:1fr .88fr;gap:clamp(var(--space-10),5vw,var(--space-20));align-items:center}
.hero h1{font-size:var(--text-2xl);margin:var(--space-5) 0 var(--space-6);max-width:19ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero__img{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--color-surface-offset)}
.hero__img img{width:100%;height:auto;display:block}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:var(--space-10)}.hero h1{max-width:24ch}}

/* ============ TRUST ============ */
.trust{background:var(--color-ink);color:#EDE6DA}
.trust ul{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-6);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.trust li{display:flex;align-items:baseline;gap:var(--space-3);font-size:var(--text-sm);font-weight:500;line-height:1.4}
.trust span{font-size:.6875rem;font-weight:700;letter-spacing:.1em;color:#C89058;flex:none}
@media (max-width:820px){.trust ul{grid-template-columns:repeat(2,1fr);gap:var(--space-5)}}
@media (max-width:440px){.trust ul{grid-template-columns:1fr}}

/* ============ PROJECTS ============ */
.proj{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));
  align-items:center;padding-block:clamp(var(--space-10),5vw,var(--space-16));border-top:1px solid var(--color-divider)}
.proj:first-of-type{border-top:none;padding-top:0}
.proj--flip .proj__img{order:2}
.proj__img{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-offset);box-shadow:var(--shadow-md)}
.proj__img img{width:100%;height:auto;display:block}
.tag{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--color-primary)}
.proj__txt h3{font-size:var(--text-lg);margin:var(--space-3) 0 var(--space-4)}
.proj__txt p:not(.tag){color:var(--color-text-muted);max-width:48ch}
.spec{margin-top:var(--space-6);display:grid;gap:var(--space-3);border-top:1px solid var(--color-divider);padding-top:var(--space-5)}
.spec li{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--space-4);font-size:var(--text-sm);line-height:1.45}
.spec span{font-size:.6875rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:var(--color-text-faint);padding-top:.25em}
@media (max-width:900px){
  .proj{grid-template-columns:1fr;gap:var(--space-6)}
  .proj--flip .proj__img{order:0}

}
@media (max-width:480px){.spec li{grid-template-columns:1fr;gap:var(--space-1)}}

/* ============ MORE WORK GALLERY ============ */
.more{margin-top:clamp(var(--space-12),5vw,var(--space-16));padding-top:clamp(var(--space-10),4vw,var(--space-14));border-top:1px solid var(--color-divider)}
.more__hd{font-size:var(--text-lg);margin-bottom:var(--space-8)}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(var(--space-8),3vw,var(--space-12))}
.gal__it{margin:0}
.gal__it img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:var(--color-surface-offset)}
.gal__it figcaption{display:block;padding-top:var(--space-5)}
.gal__it figcaption b{display:block;font-family:var(--font-display);font-size:1.125rem;font-weight:700;margin:var(--space-2) 0 var(--space-3);color:var(--color-text)}
.gal__it figcaption>span:last-child{display:block;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65;max-width:46ch}
@media (max-width:760px){.gal{grid-template-columns:1fr}}

/* ============ CARDS ============ */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),3vw,var(--space-10))}
.card h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.card p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6}
@media (max-width:760px){.grid{grid-template-columns:1fr}}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}
.steps li{border-top:2px solid var(--color-primary);padding-top:var(--space-5)}
.steps__n{display:block;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-3)}
.steps h3{font-size:1.0625rem;font-family:var(--font-body);font-weight:700;letter-spacing:0;margin-bottom:var(--space-2)}
.steps p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ============ TRADE ============ */
.trade{background:var(--color-ink);color:#EDE6DA}
.trade__in{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-16),8vw,var(--space-24)) var(--space-6)}
.trade h2{font-size:var(--text-xl);margin:var(--space-4) 0 var(--space-5);color:#F8F5F0}
.trade .lede{color:#BFB4A4}
.trade__list{margin:var(--space-8) 0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4) var(--space-8);max-width:62rem}
.trade__list li{position:relative;padding-left:var(--space-6);font-size:var(--text-sm);color:#D8CFC1;line-height:1.5}
.trade__list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:2px;background:#C89058}
@media (max-width:760px){.trade__list{grid-template-columns:1fr}}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--color-border);max-width:64rem}
.faq details{border-bottom:1px solid var(--color-border)}
.faq summary{list-style:none;cursor:pointer;padding:var(--space-5) var(--space-10) var(--space-5) 0;
  font-weight:700;font-size:var(--text-base);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:var(--space-2);top:50%;width:11px;height:2px;
  background:var(--color-primary);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:calc(var(--space-2) + 4.5px);top:50%;width:2px;height:11px;
  background:var(--color-primary);transform:translateY(-50%);transition:opacity var(--transition-interactive)}
.faq details[open] summary::before{opacity:0}
.faq summary:hover{color:var(--color-primary)}
.faq p{padding:0 var(--space-10) var(--space-6) 0;color:var(--color-text-muted);font-size:var(--text-sm);max-width:62ch}

/* ============ QUOTE ============ */
.quote{background:var(--color-surface-offset);border-top:1px solid var(--color-divider)}
.quote__grid{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-16),8vw,var(--space-24)) var(--space-6);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-10),5vw,var(--space-20))}
.quote h2{font-size:var(--text-xl);margin-bottom:var(--space-4)}
.quote__direct{margin-top:var(--space-10);display:grid;gap:var(--space-3);max-width:22rem}
.direct{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}
.direct:hover{border-color:var(--color-primary)}
.direct__l{font-size:.6875rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--color-text-faint)}
.direct__v{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--color-text)}
.note{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--color-text-faint)}

.form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),3vw,var(--space-10));display:grid;gap:var(--space-4);align-content:start}
.form label{display:grid;gap:var(--space-2);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.11em;font-weight:700;color:var(--color-text-muted)}
.form input,.form select,.form textarea{width:100%;background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--color-text)}
.form textarea{resize:vertical;min-height:6rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 16%,transparent)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form__msg{font-size:var(--text-sm);text-transform:none;letter-spacing:0;font-weight:500;color:var(--color-primary);min-height:1.4em;line-height:1.6}
.form__msg a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.form__msg--err{color:#B4432B}
.form__msg--ok{padding:var(--space-5);margin-top:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-offset);color:var(--color-text)}
.form__msg--ok b{color:var(--color-primary)}
.form__acts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.form__acts .btn{flex:0 0 auto}
[data-theme=dark] .form__msg--ok{background:rgba(255,255,255,.04)}
[data-theme=dark] .form__msg--err{color:#E0836B}
@media (max-width:900px){.quote__grid{grid-template-columns:1fr}}
@media (max-width:480px){.f2{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.ftr{background:var(--color-ink);color:#BFB4A4}
.ftr__in{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-16),6vw,var(--space-20)) var(--space-6) var(--space-10);
  display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--space-10)}
.ftr__logo{width:auto;height:132px;display:block;margin-bottom:var(--space-5);filter:invert(1) brightness(1.05)}
.ftr__tag{margin-top:0;font-family:var(--font-body);font-size:var(--text-sm);font-weight:400;color:#BFB4A4;max-width:34ch;line-height:1.6}
.ftr__col h3{font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-body);
  font-weight:700;color:#8C8272;margin-bottom:var(--space-4)}
.ftr__col a{display:block;text-decoration:none;font-size:var(--text-sm);padding-block:var(--space-2);color:#D8CFC1}
.ftr__col a:hover{color:#C89058}
.ftr__base{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-6);
  border-top:1px solid #2E291F;display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  font-size:var(--text-xs);color:#8C8272}
@media (max-width:760px){.ftr__in{grid-template-columns:1fr;gap:var(--space-8)}}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(18px)}
.rv--in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}