/* =========================================================
   Roofing by Little Kokoto — website styles
   Brand system (from the logo pack & business cards):
     Reed        #C79A4E   Reed dark #A87F35   Wood #9C6B3C
     Terracotta  #B0562F   Papyrus green #6E8B4A / dark #55703A
     Ink         #3A3229   Paper (cream) ~#F7F0E6
   Type: Zilla Slab (SIL OFL). Design language: business-card "Variant A".
   ========================================================= */

/* =========================================================
   Zilla Slab — self-hosted. No external request, ever.
   © 2017 The Mozilla Foundation, SIL Open Font License 1.1.
   Full licence text ships next to the files: /assets/fonts/OFL.txt
   (required by the OFL, clause 2 — the licence must travel with the font).

   Cuts loaded here are exactly the ones this stylesheet uses:
     400 — body copy (body{font-weight:400})
     500 — nav links, bar labels, field labels, pull-quote
     600 — headings h2/h3, buttons, kicker, eyebrow, table head, pills
     700 — h1, stat numbers, person names, step numbers
     400 italic — <em>, used in the "projects" intro in all three languages
   300 was requested from Google but never used in the CSS — dropped.

   Two files per cut: "latin" plus "latin-ext". The unicode-range keeps
   latin-ext unfetched unless a page actually shows such a character, so
   English, German and Italian normally cost one file per cut.
   ========================================================= */

/* --- 400 regular --- */
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/zilla-slab-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/zilla-slab-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 400 italic --- */
@font-face{
  font-family:"Zilla Slab"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/zilla-slab-400-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Zilla Slab"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/zilla-slab-400-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 500 medium --- */
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/zilla-slab-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/zilla-slab-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 600 semibold --- */
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/zilla-slab-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/zilla-slab-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 700 bold --- */
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/zilla-slab-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Zilla Slab"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/zilla-slab-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --reed:#C79A4E; --reed-dark:#A87F35; --wood:#9C6B3C;
  --terra:#B0562F; --terra-dark:#8f4425;
  --green:#6E8B4A; --green-dark:#55703A;
  --ink:#3A3229; --ink-2:#6f6152; --ink-3:#948676;
  --paper:#F7F0E6; --paper-2:#FBF6EE; --sand:#EFE1C8; --line:#E4D6BD;
  --white:#FFFDFA;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(58,50,41,.05), 0 10px 30px rgba(58,50,41,.07);
  --shadow-sm:0 1px 2px rgba(58,50,41,.06), 0 4px 14px rgba(58,50,41,.06);
  --wrap:1160px;
  --font: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--paper); line-height:1.6; font-size:18px;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--terra); text-decoration:none}
a:hover{color:var(--terra-dark)}
h1,h2,h3{line-height:1.12; margin:0 0 .4em; font-weight:600; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}

/* icons */
.icon{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.125em}
.icon.flip{transform:scaleX(-1)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family:var(--font); font-size:1rem; font-weight:600; letter-spacing:.01em;
  padding:.72em 1.25em; border-radius:999px; border:2px solid transparent;
  transition:transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-align:center; line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn .icon{font-size:1.05em}
.btn-primary{background:var(--terra); color:var(--white); border-color:var(--terra)}
.btn-primary:hover{background:var(--terra-dark); border-color:var(--terra-dark); color:var(--white)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--reed); color:var(--ink); background:var(--paper-2)}
.btn-sm{padding:.55em 1em; font-size:.95rem}

/* =============================== HEADER =============================== */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(247,240,230,.92);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:74px}
.brand{display:flex; align-items:center}
.brand-logo{height:46px; width:auto}
.nav{display:flex; align-items:center; gap:26px}
.nav a{color:var(--ink); font-weight:500; font-size:1rem; letter-spacing:.005em}
.nav a:not(.btn):hover{color:var(--terra)}
.nav .nav-cta{color:var(--white)}
.header-tools{display:flex; align-items:center; gap:14px}
.lang-switch{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper-2)}
.lang-switch button{font-family:var(--font); font-size:.82rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-2); background:transparent; border:0; padding:.42em .8em; cursor:pointer; line-height:1;
  transition:background .15s ease, color .15s ease}
.lang-switch button:hover{color:var(--terra)}
.lang-switch button.active{background:var(--terra); color:var(--white)}
.nav-toggle{display:none; background:transparent; border:0; color:var(--ink); font-size:1.5rem; padding:8px; cursor:pointer; line-height:0}

/* =============================== HERO =============================== */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 400px at 80% -10%, rgba(199,154,78,.18), transparent 60%),
  var(--paper);
  border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-block:clamp(40px,7vw,84px)}
.eyebrow{display:inline-flex; align-items:center; gap:.5em; color:var(--green-dark); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; margin:0 0 1rem}
.eyebrow-ic{color:var(--terra)}
.hero-copy h1{color:var(--ink)}
.lead{font-size:1.2rem; color:var(--ink-2); max-width:34ch; margin-bottom:1.6rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1.8rem}
.hero-trust{list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; padding:0; margin:0;
  color:var(--ink-2); font-size:.98rem}
.hero-trust li{display:inline-flex; align-items:center; gap:.5em}
.hero-trust .icon{color:var(--green)}
.hero-trust a{color:var(--ink-2)} .hero-trust a:hover{color:var(--terra)}

.hero-art{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); background:var(--sand); aspect-ratio:640/520}
.hero-photo,.hero-scene{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-photo{z-index:2}
.art-tag{position:absolute; left:12px; bottom:10px; z-index:3; font-size:.72rem; color:var(--ink-3);
  background:rgba(251,246,238,.82); padding:3px 9px; border-radius:999px; letter-spacing:.02em}
.hero-photo ~ .art-tag{display:none} /* hide the "illustration" tag once a real photo loads */

/* =============================== STATS =============================== */
.stats{background:var(--ink); color:var(--paper); padding-block:clamp(28px,4vw,44px)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.stat{display:flex; flex-direction:column; gap:4px}
.stat-num{font-size:clamp(2rem,4.4vw,2.9rem); font-weight:700; color:var(--reed); line-height:1;
  display:flex; align-items:baseline; gap:.14em}
.stat-unit{font-size:.9rem; font-weight:600; color:var(--paper); opacity:.7; letter-spacing:.02em}
.stat-label{font-size:.92rem; color:var(--paper); opacity:.8}
.stats-foot{margin:18px auto 0; color:var(--paper); opacity:.62; font-size:.82rem; max-width:var(--wrap)}

/* =============================== SECTION =============================== */
.section{padding-block:clamp(52px,8vw,96px)}
.section-alt{background:var(--paper-2); border-block:1px solid var(--line)}
.kicker{color:var(--green-dark); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-size:.78rem; margin:0 0 .7rem}
.section-title{max-width:20ch}
.section-intro{max-width:60ch; color:var(--ink-2); font-size:1.1rem; margin-bottom:2.2rem}
code{background:var(--sand); padding:.1em .4em; border-radius:6px; font-size:.86em;
  font-family:"SFMono-Regular",Consolas,monospace; color:var(--wood)}

/* cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card-ic{display:inline-grid; place-items:center; width:50px; height:50px; border-radius:12px;
  background:var(--sand); color:var(--terra); font-size:1.35rem; margin-bottom:14px}
.card h3{margin-bottom:.35em}
.card p{margin:0; color:var(--ink-2); font-size:.98rem}

/* =============================== CHART =============================== */
.chart{margin:0 0 40px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px clamp(18px,3vw,32px); box-shadow:var(--shadow-sm)}
.chart-title{font-size:1.12rem; font-weight:600; margin-bottom:2px}
.chart-sub{color:var(--ink-3); font-weight:400; font-size:.92rem}
.bars{display:flex; flex-direction:column; gap:14px; margin-top:22px}
.bar-row{display:grid; grid-template-columns:190px 1fr; gap:16px; align-items:center}
.bar-name{font-size:.94rem; font-weight:500; color:var(--ink)}
.bar-name .bar-note{display:block; font-size:.76rem; color:var(--ink-3); font-weight:400}
.bar-track{position:relative; height:26px; background:var(--sand); border-radius:8px; overflow:hidden}
.bar-fill{position:absolute; top:0; bottom:0; border-radius:8px; display:flex; align-items:center;
  justify-content:flex-end; padding-right:9px; color:var(--white); font-size:.8rem; font-weight:600;
  min-width:34px; transition:width .9s cubic-bezier(.2,.7,.2,1), left .9s cubic-bezier(.2,.7,.2,1)}
.bar-fill span{text-shadow:0 1px 2px rgba(58,50,41,.35); white-space:nowrap}
.bar-row.is-reed .bar-fill{background:linear-gradient(90deg,var(--reed),var(--reed-dark))}
.bar-row.is-reed .bar-name{font-weight:700}
.bar-row.is-reed .bar-name::after{content:attr(data-badge); margin-left:8px; font-size:.66rem; font-weight:700;
  color:var(--green-dark); background:rgba(110,139,74,.14); padding:2px 7px; border-radius:999px; letter-spacing:.03em}
.bar-fill.c-makuti{background:#b79256} .bar-fill.c-mabati{background:#8a8172}
.bar-fill.c-tile{background:var(--terra)} .bar-fill.c-synth{background:var(--green)}
.bar-fill.c-grass{background:#a99a6f}
.chart-axis{display:flex; justify-content:space-between; margin:16px 0 0; padding-left:206px; color:var(--ink-3); font-size:.74rem}
.chart-axis span{position:relative}
.chart-foot{margin:16px 0 0; color:var(--ink-3); font-size:.82rem}

/* =============================== TABLE =============================== */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--white)}
table.compare{border-collapse:collapse; width:100%; min-width:760px; font-size:.93rem}
table.compare th, table.compare td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top}
table.compare thead th{background:var(--ink); color:var(--paper); font-weight:600; font-size:.86rem;
  letter-spacing:.02em; position:sticky; top:0}
table.compare tbody tr:last-child td{border-bottom:0}
table.compare tbody tr:nth-child(even){background:var(--paper-2)}
table.compare tr.row-reed{background:rgba(199,154,78,.1)}
table.compare tr.row-reed td:first-child{box-shadow:inset 4px 0 0 var(--reed)}
.cell-mat{font-weight:600; color:var(--ink)}
.cell-mat small{display:block; font-weight:400; color:var(--ink-3); font-size:.8rem; margin-top:2px}
.pill{display:inline-block; font-size:.74rem; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap}
.pill.good{background:rgba(110,139,74,.16); color:var(--green-dark)}
.pill.mid{background:rgba(199,154,78,.2); color:#8a6a26}
.pill.bad{background:rgba(176,86,47,.14); color:var(--terra-dark)}

/* honesty callout */
.honesty{margin-top:34px; background:var(--white); border:1px solid var(--line); border-left:5px solid var(--green);
  border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow-sm)}
.honesty h3{display:flex; align-items:center; gap:.5em; color:var(--green-dark)}
.honesty h3 .icon{color:var(--green)}
.honesty ul{margin:.4rem 0 0; padding-left:1.1rem; color:var(--ink-2)}
.honesty li{margin-bottom:.55rem}
.honesty li:last-child{margin-bottom:0}

/* =============================== BEFORE / AFTER =============================== */
.ba{position:relative; width:100%; aspect-ratio:11/5; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line); user-select:none; touch-action:pan-y}
.ba-frame{position:absolute; inset:0}
.ba-frame .ba-svg,.ba-frame .ba-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba-frame .ba-photo{z-index:2}
.ba-before{z-index:3; clip-path:inset(0 50% 0 0)} /* JS updates the right inset to reveal the "before" layer */
.ba-handle{position:absolute; top:0; bottom:0; left:50%; z-index:5; width:44px; transform:translateX(-50%);
  cursor:ew-resize; display:flex; align-items:center; justify-content:center}
.ba-line{position:absolute; top:0; bottom:0; width:3px; background:var(--paper); box-shadow:0 0 0 1px rgba(58,50,41,.15)}
.ba-grip{display:grid; grid-auto-flow:column; gap:1px; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--white); color:var(--terra); box-shadow:var(--shadow); border:1px solid var(--line); font-size:.7rem}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible .ba-grip{outline:3px solid var(--terra); outline-offset:2px}
.ba-tag{position:absolute; bottom:14px; z-index:4; font-size:.82rem; font-weight:600; color:var(--white);
  background:rgba(58,50,41,.62); padding:5px 12px; border-radius:999px; backdrop-filter:blur(2px)}
.ba-tag-l{left:14px} .ba-tag-r{right:14px}

/* =============================== PROCESS =============================== */
.steps{list-style:none; counter-reset:step; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.step{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow-sm)}
.step-no{display:inline-block; font-size:1.4rem; font-weight:700; color:var(--reed-dark);
  background:var(--sand); width:52px; height:52px; border-radius:12px; text-align:center; line-height:52px; margin-bottom:14px}
.step h3{margin-bottom:.35em}
.step p{margin:0; color:var(--ink-2); font-size:.96rem}
.step::after{content:""; position:absolute; right:-15px; top:52px; width:22px; height:2px; background:var(--line)}
.step:last-child::after{display:none}

/* =============================== GALLERY =============================== */
/* 2026-09-01: zwei statt sechs Kacheln, deshalb zwei Spalten und ein breiteres Bildformat.
   Bei drei Spalten haetten zwei Bilder wie eine Luecke gewirkt; so sieht die Auswahl gewollt aus.
   Unter 720px stapeln sie ohnehin, das regelt die Media-Query weiter unten. */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.gallery .tile{aspect-ratio:3/2}
.tile{position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); background:var(--sand)}
.tile .ba-svg,.tile svg,.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tile img{z-index:2}
.tile figcaption{position:absolute; left:0; right:0; bottom:0; z-index:3; color:var(--white); font-size:.85rem;
  padding:26px 14px 12px; background:linear-gradient(transparent, rgba(58,50,41,.7))}

/* =============================== QUOTE =============================== */
.section-quote{background:
  linear-gradient(rgba(58,50,41,.02), rgba(58,50,41,.02)),
  var(--paper)}
.pull{max-width:44ch; margin:0 auto; text-align:center}
.quote-mark{font-size:2.6rem; color:var(--reed); opacity:.5}
.pull blockquote{font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:500; color:var(--ink); margin:.4em 0 .6em; line-height:1.3}
.pull figcaption{color:var(--ink-2); font-size:.98rem}
.pull .muted{color:var(--ink-3)}

/* =============================== CONTACT =============================== */
.contact-grid{display:grid; grid-template-columns:1fr .9fr; gap:48px; align-items:start}
.people{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:6px 0 24px}
.person{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm)}
.person-name{font-weight:700; font-size:1.1rem; margin:0}
.person-role{color:var(--green-dark); font-weight:500; margin:0 0 .6rem; font-size:.94rem}
.person-lines{display:flex; flex-direction:column; gap:6px; margin:0}
.person-lines a{display:inline-flex; align-items:center; gap:.5em; color:var(--ink); font-size:.96rem}
.person-lines a:hover{color:var(--terra)}
.person-lines .icon{color:var(--terra)}
.contact-meta{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; color:var(--ink-2)}
.contact-meta li{display:flex; align-items:flex-start; gap:.6em}
.contact-meta .icon{color:var(--terra); margin-top:.25em}

.quote-form{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; box-shadow:var(--shadow)}
.quote-form h3{margin-bottom:1rem}
.field{margin-bottom:14px; display:flex; flex-direction:column; gap:6px}
.field label{font-size:.88rem; font-weight:500; color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:var(--font); font-size:1rem; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.62em .8em; width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--reed); outline-offset:1px; background:var(--white)}
.field textarea{resize:vertical}
.form-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.form-note{font-size:.82rem; color:var(--ink-3); margin:12px 0 0}

/* =============================== FOOTER =============================== */
.site-footer{background:var(--ink); color:var(--paper); padding-top:52px; position:relative}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:36px; padding-bottom:36px}
.footer-logo{height:52px; width:auto; margin-bottom:12px;
  /* the wordmark art is dark ink on transparent — lift it on the dark footer */
  filter:brightness(0) invert(1) sepia(.15) saturate(1.6) hue-rotate(347deg) opacity(.92)}
.footer-brand .claim{color:var(--reed); letter-spacing:.14em; font-size:.82rem; text-transform:uppercase; margin:0}
.footer-nav{display:flex; flex-direction:column; gap:9px}
.footer-nav a{color:var(--paper); opacity:.82; font-size:.96rem}
.footer-nav a:hover{opacity:1; color:var(--reed)}
.footer-contact{display:flex; flex-direction:column; gap:10px}
.footer-contact a,.footer-contact span{display:inline-flex; align-items:center; gap:.5em; color:var(--paper); opacity:.82; font-size:.96rem}
.footer-contact a:hover{opacity:1; color:var(--reed)}
.footer-contact .icon{color:var(--reed); opacity:1}
.footer-bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-block:20px 26px;
  border-top:1px solid rgba(247,240,230,.14); color:var(--paper); font-size:.82rem}
.footer-bar>span{opacity:.6}
.footer-credits{opacity:.5}
.footer-rule{height:8px; background:var(--terra)} /* the business-card terracotta bar */

/* =============================== RESPONSIVE =============================== */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .hero-art{max-width:560px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr; gap:32px}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:22px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:680px){
  body{font-size:17px}
  .nav{position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper-2); border-bottom:1px solid var(--line); padding:8px 22px 18px;
    transform:translateY(-140%); transition:transform .28s ease; box-shadow:var(--shadow)}
  .nav.open{transform:translateY(0)}
  .nav a{padding:13px 4px; border-bottom:1px solid var(--line)}
  .nav .nav-cta{margin-top:12px; justify-content:center; border-bottom:0}
  .nav-toggle{display:inline-flex}
  .cards,.gallery,.people{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .bar-row{grid-template-columns:1fr; gap:6px}
  .bar-name{display:flex; align-items:baseline; gap:8px}
  .chart-axis{padding-left:0}
  .bar-row.is-reed .bar-name::after{margin-left:auto}
  .footer-grid{grid-template-columns:1fr}
  .hero-trust{font-size:.92rem}
  .ba{aspect-ratio:16/10} /* panorama crops get too small on phones — taller frame, cover-cropped */
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}

/* =========================================================
   LEGAL PAGES — legal-notice.html, privacy-policy.html
   All three language versions sit in one file, one
   <article class="legal-doc" data-lang="…"> each. Which one is
   visible is decided here, by the lang attribute that legal.js
   writes on <html>. No JavaScript, no switch: <html lang="en">
   stands and the English version shows, so it is never in doubt
   which text applies.
   ========================================================= */
.legal-doc{display:none}
html[lang="en"] .legal-doc[data-lang="en"],
html[lang="de"] .legal-doc[data-lang="de"],
html[lang="it"] .legal-doc[data-lang="it"]{display:block}

/* the same trick for the few chrome labels outside the documents */
[data-l]{display:none}
html[lang="en"] [data-l="en"],
html[lang="de"] [data-l="de"],
html[lang="it"] [data-l="it"]{display:inline}

/* --- reading column: long prose wants a shorter line than the site grid --- */
.legal{padding-block:clamp(34px,5vw,72px)}
.legal .wrap{max-width:820px}

.legal-head{margin-bottom:34px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.legal-back{display:inline-block; font-weight:500; font-size:.95rem; margin-bottom:20px}
.legal-back-foot{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-weight:500}
.legal h1{font-size:clamp(1.9rem,4.4vw,2.9rem); margin-bottom:.25em}
.legal-sub{color:var(--ink-2); font-size:1.12rem; max-width:52ch; margin:0}
.legal-updated{color:var(--ink-3); font-size:.84rem; margin:14px 0 0; letter-spacing:.02em}

.legal h2{font-size:clamp(1.2rem,2.3vw,1.5rem); margin:2.4rem 0 .7rem; color:var(--ink)}
.legal h3{font-size:1.05rem; margin:1.7rem 0 .5rem}
.legal p,.legal li{color:var(--ink-2); font-size:1rem}
.legal ul,.legal ol{padding-left:1.15rem; margin:0 0 1rem}
.legal li{margin-bottom:.55rem}
.legal li:last-child{margin-bottom:0}
.legal strong{color:var(--ink); font-weight:600}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
  background:var(--sand); border-radius:5px; padding:1px 6px; color:var(--ink)}

/* --- company particulars: a definition list, reed-edged like the cards --- */
.legal-facts{background:var(--white); border:1px solid var(--line); border-left:5px solid var(--reed);
  border-radius:var(--radius); padding:22px 24px; margin:0 0 1.6rem; box-shadow:var(--shadow-sm)}
.legal-facts dl{display:grid; grid-template-columns:minmax(9rem,15rem) 1fr; gap:8px 20px; margin:0}
.legal-facts dt{font-weight:600; color:var(--ink); font-size:.94rem}
.legal-facts dd{margin:0; color:var(--ink-2); font-size:.94rem}

/* --- the "in one paragraph" panel: same green voice as the honesty box --- */
.legal-note{background:var(--white); border:1px solid var(--line); border-left:5px solid var(--green);
  border-radius:var(--radius); padding:22px 24px; margin:0 0 1.8rem; box-shadow:var(--shadow-sm)}
.legal-note h2{margin:0 0 .5rem; color:var(--green-dark)}
.legal-note p:last-child{margin-bottom:0}

/* --- footer: legal links sit below the section links, lightly parted --- */
.footer-nav .legal-link{margin-top:5px; padding-top:11px; border-top:1px solid rgba(247,240,230,.16)}
.footer-nav .legal-link ~ .legal-link{margin-top:0; padding-top:0; border-top:0}

@media (max-width:560px){
  .legal-facts dl{grid-template-columns:1fr; gap:0}
  .legal-facts dt{margin-top:12px}
  .legal-facts dt:first-child{margin-top:0}
  .legal-facts dd{margin-bottom:2px}
}

@media print{
  .site-header,.site-footer,.skip,.legal-back,.legal-back-foot{display:none}
  .legal .wrap{max-width:none; padding-inline:0}
  .legal-facts,.legal-note{box-shadow:none}
}