/* ============================================================
   hortus — GaLaBau & Tiefbau · DUAL-SPARTE / ENGINEERED-BOLD
   site.css — brand tokens · self-hosted fonts · base · nav · footer
   ============================================================ */

/* ---------- Self-hosted fonts (zero-tracking) ---------- */
@font-face { font-family:'Space Grotesk'; font-weight:500; font-display:swap; src:url('../fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:600; font-display:swap; src:url('../fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap; src:url('../fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:700; font-display:swap; src:url('../fonts/archivo-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:800; font-display:swap; src:url('../fonts/archivo-800.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root{
  --ink:#2b3033;
  --ink-deep:#1e2224;
  --ink-black:#15181a;
  --amber:#c98a2e;
  --amber-light:#d99b3c;
  --amber-glow:rgba(201,138,46,.16);
  --concrete:#8a8d8c;
  --concrete-light:#c7c5bf;
  --cream:#ede6d8;
  --cream-soft:#d8d0c0;
  --paper:#f5f1e9;
  --paper-warm:#efe9dd;
  --green:#5c7a4a;
  --line:rgba(43,48,51,.14);
  --line-soft:rgba(43,48,51,.08);

  --f-display:'Space Grotesk','Archivo',system-ui,sans-serif;
  --f-mega:'Archivo','Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;

  --shell:1240px;
  --shell-wide:1480px;
  --shell-tight:880px;
  --gap-xs:.5rem; --gap-sm:1rem; --gap:1.6rem; --gap-lg:2.6rem; --gap-xl:4.5rem;
  --pad-sec:clamp(4.5rem,9vw,9rem);
  --radius:14px; --radius-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -28px rgba(21,24,26,.5);
  --shadow-lg:0 40px 90px -34px rgba(21,24,26,.62);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:clamp(1rem,.55vw + .9rem,1.075rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
::selection{background:var(--amber);color:#fff}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}
.shell-wide{max-width:var(--shell-wide);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}
.shell-tight{max-width:var(--shell-tight);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem)}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--amber),var(--amber-light));z-index:999;will-change:transform}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);padding:1.15rem 0}
.nav-inner{max-width:var(--shell-wide);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.4rem);display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.nav.scrolled{background:rgba(245,241,233,.92);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line-soft),0 14px 36px -28px rgba(21,24,26,.5);padding:.7rem 0}
.nav-brand{display:flex;align-items:center;gap:.7rem}
.nav-logo{height:42px;width:auto;transition:height .4s var(--ease)}
.nav.scrolled .nav-logo{height:34px}
/* nav logo color flips: on transparent (top, dark hero) use light variant */
.nav .nav-logo-dark{display:none}
.nav.scrolled .nav-logo-light{display:none}
.nav.scrolled .nav-logo-dark{display:block}

.nav-menu{display:flex;align-items:center;gap:.35rem}
.nav-menu a{font-family:var(--f-display);font-weight:600;font-size:.9rem;letter-spacing:.01em;color:var(--cream);padding:.55rem .85rem;border-radius:9px;transition:color .25s,background .25s;position:relative}
.nav.scrolled .nav-menu a{color:var(--ink)}
.nav-menu a:hover{color:var(--amber-light)}
.nav.scrolled .nav-menu a:hover{color:var(--amber);background:var(--amber-glow)}
.nav-menu a.active{color:var(--amber-light)}
.nav.scrolled .nav-menu a.active{color:var(--amber)}
.nav-cta{background:var(--amber)!important;color:#fff!important;padding:.62rem 1.25rem!important;border-radius:999px!important;box-shadow:0 10px 26px -10px rgba(201,138,46,.7);transition:transform .25s var(--ease),box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(201,138,46,.8);color:#fff!important}

.nav-burger{display:none;flex-direction:column;gap:5px;padding:.5rem}
.nav-burger span{display:block;width:26px;height:2px;background:var(--cream);border-radius:2px;transition:.3s var(--ease)}
.nav.scrolled .nav-burger span{background:var(--ink)}
.nav-mobile{position:fixed;inset:0;top:0;background:var(--ink-deep);display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:2rem clamp(1.5rem,6vw,3rem);transform:translateY(-100%);transition:transform .45s var(--ease);z-index:199}
.nav-mobile.open{transform:translateY(0)}
.nav-mobile a{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,6vw,2.4rem);color:var(--cream);padding:.5rem 0;border-bottom:1px solid rgba(237,230,216,.1);transition:color .25s,padding-left .25s}
.nav-mobile a:hover{color:var(--amber-light);padding-left:.8rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink-black);color:var(--cream-soft);padding:clamp(3.5rem,7vw,6rem) 0 2rem;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--amber),transparent 60%)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.4rem;align-items:start}
.footer-brand img{height:46px;margin-bottom:1.1rem}
.footer-brand p{font-size:.92rem;line-height:1.7;color:var(--concrete-light);max-width:30ch}
.footer-col h4{font-family:var(--f-display);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--amber-light);margin-bottom:1rem}
.footer-col a,.footer-col p{display:block;color:var(--cream-soft);font-size:.92rem;padding:.22rem 0;transition:color .25s,padding-left .25s}
.footer-col a:hover{color:#fff;padding-left:.4rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid rgba(237,230,216,.12);font-size:.82rem;color:var(--concrete)}
.footer-bottom a{color:var(--concrete-light)}
.footer-bottom a:hover{color:var(--amber-light)}
.footer-zero{font-size:.78rem;color:var(--concrete);opacity:.85}

/* ---------- Demo notice pill ---------- */
.demo-notice{position:fixed;left:1rem;bottom:1rem;z-index:300;background:rgba(30,34,36,.92);backdrop-filter:blur(8px);color:var(--cream);font-size:.72rem;font-weight:500;padding:.55rem .9rem;border-radius:999px;border:1px solid rgba(217,155,60,.4);max-width:min(86vw,360px);line-height:1.4;box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.demo-notice strong{color:var(--amber-light)}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:250;background:var(--amber);color:#fff;text-align:center;font-family:var(--f-display);font-weight:600;font-size:1.02rem;padding:1rem;box-shadow:0 -8px 24px -10px rgba(0,0,0,.4)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important}
  .hero-bg{animation:none!important}
  .char{opacity:1!important;transform:none!important;filter:none!important}
}

/* ---------- Responsive nav/footer ---------- */
@media (max-width:920px){
  .nav-menu{display:none}
  .nav-burger{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brand{grid-column:1 / -1}
  .sticky-cta{display:block}
  body{padding-bottom:0}
}
@media (max-width:540px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .demo-notice{font-size:.66rem;left:.6rem;bottom:4.4rem;max-width:80vw}
}