/* ==========================================================================
   STADO GMBH — design tokens
   "Stado" — a herd: many independent parts that move as one. The page is
   built on that idea. A live flock in the header, sticky section markers
   that travel alongside the content, and a floating nav that follows you.
   Ground is meadow pistachio — no white, no beige, no blue.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Epilogue:wght@400;500;600&family=Courier+Prime:wght@400;700&display=swap');

:root{
  --meadow:   #e6eec6;   /* page */
  --meadow-2: #dbe5b4;   /* recessed */
  --meadow-3: #cfdb9f;   /* hover */
  --ink:      #1b2411;   /* text + dark blocks */
  --ink-2:    #26331a;
  --ink-sft:  #55603f;
  --ink-dim:  #7d8867;
  --rule:     #bcc999;
  --berry:    #bd2f6b;   /* accent */
  --berry-in: #fdf4f7;

  --display: 'Outfit', 'Trebuchet MS', sans-serif;
  --body: 'Epilogue', -apple-system, 'Segoe UI', sans-serif;
  --type: 'Courier Prime', ui-monospace, 'Courier New', monospace;

  --wrap: 1160px;
  --pad: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--meadow);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:84px; /* room for the floating nav */
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-0.03em;
  margin:0;
}
h4{ font-family:var(--body); margin:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.type{
  font-family:var(--type);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ------------------------------- top strip ------------------------------ */

.top{ border-bottom:1px solid var(--rule); }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:78px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand .glyph{ width:40px; height:26px; flex:none; }
.brand .nm{ font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; }
.brand .co{ display:block; font-family:var(--type); font-size:10px; letter-spacing:.14em; color:var(--ink-dim); margin-top:-3px; }

.top .tel{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:15px;
  border:2px solid var(--ink); padding:9px 16px; transition:background .2s, color .2s;
}
.top .tel:hover{ background:var(--ink); color:var(--meadow); }

/* ------------------------------- floating nav --------------------------- */

.dock{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:70;
  display:flex; align-items:center; gap:4px;
  background:var(--ink); padding:6px; border-radius:999px;
  box-shadow:0 10px 30px rgba(27,36,17,.24);
  max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none;
}
.dock::-webkit-scrollbar{ display:none; }
.dock a{
  text-decoration:none; color:var(--meadow); font-size:13.5px; font-weight:500;
  padding:9px 15px; border-radius:999px; white-space:nowrap; transition:background .2s, color .2s;
}
.dock a:hover{ background:var(--ink-2); }
.dock a.here{ background:var(--berry); color:var(--berry-in); }
@media (max-width:560px){ .dock a{ padding:9px 12px; font-size:13px; } }

/* ------------------------------- hero ----------------------------------- */

.hero{ position:relative; border-bottom:1px solid var(--rule); overflow:hidden; }
#flock{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero .wrap{ position:relative; z-index:2; padding-block:clamp(52px,8vw,104px); pointer-events:none; }
.hero .wrap a{ pointer-events:auto; }
.hero h1{ font-size:clamp(42px,8vw,94px); max-width:14ch; }
.hero h1 .mark{ color:var(--berry); }
.hero .lede{ margin-top:24px; font-size:18px; color:var(--ink-sft); max-width:48ch; background:color-mix(in srgb, var(--meadow) 72%, transparent); }
.hero .kick{ color:var(--berry); }
.hero-actions{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px;
  font-family:var(--display); font-weight:600; font-size:15.5px;
  text-decoration:none; border:2px solid var(--ink); cursor:pointer;
}
.btn-solid{ background:var(--berry); border-color:var(--berry); color:var(--berry-in); }
.btn-solid:hover{ opacity:.88; }
.btn-out{ background:transparent; color:var(--ink); }
.btn-out:hover{ background:var(--ink); color:var(--meadow); }

.tally{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); }
.tally div{ padding:20px var(--pad); border-right:1px solid var(--rule); }
.tally div:last-child{ border-right:0; }
.tally .k{ font-family:var(--type); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.tally .v{ font-family:var(--display); font-weight:600; font-size:18px; margin-top:5px; }
@media (max-width:760px){ .tally{ grid-template-columns:1fr; } .tally div{ border-right:0; border-bottom:1px solid var(--rule); } .tally div:last-child{ border-bottom:0; } }

/* ------------------------------- sections ------------------------------- */

section.band{ border-bottom:1px solid var(--rule); }
section.band > .wrap{
  display:grid; grid-template-columns:230px 1fr; gap:clamp(20px,4vw,52px);
  padding-block:clamp(48px,7vw,92px);
}
.marker{ position:sticky; top:26px; align-self:start; }
.marker .no{ font-family:var(--type); font-size:11px; letter-spacing:.12em; color:var(--berry); }
.marker h2{ font-size:clamp(25px,3vw,34px); margin-top:10px; }
.marker .sub{ margin-top:12px; color:var(--ink-sft); font-size:14.5px; max-width:26ch; }
@media (max-width:860px){
  section.band > .wrap{ grid-template-columns:1fr; gap:22px; }
  .marker{ position:static; }
  .marker .sub{ max-width:52ch; }
}

section.dark{ background:var(--ink); color:var(--meadow); border-bottom-color:var(--ink); }
section.dark .marker .sub{ color:#a9b78c; }
section.dark .rule{ border-color:#3a4a27; }

/* services — stacked entries with a moving dot */
.list{ border-top:2px solid var(--ink); }
.item{
  display:grid; grid-template-columns:18px 1fr; gap:18px;
  padding-block:22px; border-bottom:1px solid var(--rule);
  transition:padding-left .22s ease;
}
.item:hover{ padding-left:10px; }
.item .dot{ width:10px; height:10px; border-radius:50%; background:var(--rule); margin-top:9px; transition:background .22s, transform .22s; }
.item:hover .dot{ background:var(--berry); transform:scale(1.35); }
.item h3{ font-size:20px; }
.item p{ color:var(--ink-sft); font-size:15.5px; margin-top:6px; max-width:58ch; }

/* sectors — chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1.5px solid var(--rule); padding:14px 18px; max-width:100%;
  transition:border-color .2s, background .2s;
}
.chip:hover{ border-color:var(--berry); background:var(--meadow-2); }
.chip .t{ font-family:var(--type); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--berry); }
.chip h3{ font-size:17px; margin-top:8px; }

/* process — connected nodes */
.flowline{ display:flex; flex-direction:column; }
.node{ display:grid; grid-template-columns:34px 1fr; gap:18px; padding-bottom:26px; position:relative; }
.node:not(:last-child)::before{
  content:""; position:absolute; left:16px; top:26px; bottom:0; width:2px; background:#3a4a27;
}
.node .pin{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--berry);
  display:grid; place-items:center; font-family:var(--type); font-size:11px; color:var(--berry);
  background:var(--ink); position:relative; z-index:2;
}
.node h3{ font-size:21px; }
.node p{ color:#a9b78c; font-size:15px; margin-top:6px; max-width:54ch; }

/* firm */
.prose p{ color:var(--ink-sft); font-size:16.5px; max-width:56ch; }
.prose p + p{ margin-top:15px; }
.pledges{ list-style:none; margin:26px 0 0; padding:0; }
.pledges li{ padding:16px 0; border-top:1px solid var(--rule); }
.pledges li:last-child{ border-bottom:1px solid var(--rule); }
.pledges h4{ font-size:15.5px; font-weight:600; }
.pledges h4::before{ content:"●"; color:var(--berry); font-size:9px; vertical-align:middle; margin-right:10px; }
.pledges p{ color:var(--ink-sft); font-size:14.5px; padding-left:22px; margin-top:3px; }

/* contact */
.cgrid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,5vw,58px); }
.info .row{ padding:15px 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:86px 1fr; gap:14px; }
.info .row:last-child{ border-bottom:1px solid var(--rule); }
.info dt{ font-family:var(--type); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-dim); padding-top:4px; }
.info dd{ margin:0; font-size:15.5px; }
.info a{ text-decoration:none; box-shadow:inset 0 -2px 0 var(--berry); }

.form{ display:flex; flex-direction:column; gap:16px; }
.f{ display:flex; flex-direction:column; gap:6px; }
.f label{ font-family:var(--type); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-dim); }
.f input,.f select,.f textarea{
  border:1.5px solid var(--rule); background:var(--meadow-2);
  padding:11px 12px; font-size:15.5px; font-family:inherit; color:var(--ink);
}
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--berry); }
.f textarea{ resize:vertical; min-height:96px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; } }
@media (max-width:800px){ .cgrid{ grid-template-columns:1fr; } }
.note{ font-size:12.5px; color:var(--ink-dim); }
.ok{ display:none; padding:12px 14px; background:var(--ink); color:var(--meadow); font-size:14.5px; }
.ok.show{ display:block; }

/* ------------------------------- footer --------------------------------- */

.site-footer{ background:var(--ink); color:var(--meadow); padding:42px 0 24px; }
.f-top{ display:grid; grid-template-columns:1.3fr .8fr .9fr; gap:30px; padding-bottom:28px; border-bottom:1px solid #3a4a27; }
.f-brand{ font-family:var(--display); font-weight:800; font-size:21px; }
.f-tag{ margin-top:12px; color:#a9b78c; max-width:38ch; font-size:14px; }
.f-col h5{ margin:0 0 12px; font-family:var(--type); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--berry); font-weight:400; }
.f-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.f-col a,.f-col li{ text-decoration:none; font-size:14px; color:#a9b78c; }
.f-col a:hover{ color:var(--meadow); }
.f-bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:18px; font-family:var(--type); font-size:10.5px; color:#8b9a6d; }
.f-bot a{ color:#8b9a6d; text-decoration:none; }
.f-bot a:hover{ color:var(--meadow); }
@media (max-width:800px){ .f-top{ grid-template-columns:1fr; gap:24px; } }

/* ------------------------------- legal page ----------------------------- */

.legal-hero{ padding-block:clamp(40px,6vw,74px) 18px; border-bottom:1px solid var(--rule); }
.legal-hero h1{ font-size:clamp(33px,5vw,54px); margin-top:12px; }
.legal-date{ margin-top:12px; font-family:var(--type); font-size:11.5px; color:var(--ink-dim); }

.legal-body{ padding-block:clamp(30px,4vw,52px) 70px; }
.legal-body .wrap{ display:grid; grid-template-columns:240px 1fr; gap:clamp(24px,4vw,52px); }
.toc{ position:sticky; top:26px; align-self:start; }
.toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.toc a{ text-decoration:none; font-size:13px; color:var(--ink-sft); padding-left:11px; border-left:2px solid var(--rule); display:block; }
.toc a:hover{ color:var(--berry); border-left-color:var(--berry); }

.legal h2{ font-size:21px; margin:40px 0 11px; scroll-margin-top:26px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--ink-sft); margin-bottom:12px; max-width:66ch; }
.legal ul{ color:var(--ink-sft); padding-left:20px; margin-bottom:12px; max-width:66ch; }
.legal li{ margin-bottom:6px; }
.legal strong{ color:var(--ink); }
@media (max-width:860px){
  .legal-body .wrap{ grid-template-columns:1fr; }
  .toc{ position:static; margin-bottom:24px; }
  .toc ul{ flex-direction:row; flex-wrap:wrap; gap:12px; }
}