/* =========================================================
   PERKTOLD — "Patina"  ·  design system + homepage
   Concept: copper, and the verdigris green it becomes.
   ========================================================= */
:root{
  --bg:      oklch(1.000 0.000 0);
  --surface: oklch(0.965 0.008 205);
  --surface-2: oklch(0.945 0.012 205);
  --ink:     oklch(0.240 0.020 205);
  --muted:   oklch(0.480 0.022 205);
  --line:    oklch(0.900 0.010 205);
  --primary: oklch(0.460 0.078 205);
  --primary-hi: oklch(0.560 0.100 205);
  --accent:  oklch(0.555 0.205 27);
  --accent-hi: oklch(0.605 0.215 29);
  --deep:    oklch(0.385 0.045 205);
  --deep-2:  oklch(0.300 0.048 206);
  --on-deep: oklch(0.965 0.012 205);

  --ff-display:'Montserrat', system-ui, sans-serif;
  --ff-body:'Hanken Grotesk', system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  --wrap: 1200px;
  --hh: 68px;
  --gutter: clamp(1.1rem, 4vw, 2.6rem);
  --sp-section: clamp(4rem, 8vw, 8rem);
  --radius: 14px;

  --z-sticky: 100; --z-modal: 300; --z-toast: 400;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff-body);font-size:var(--step-0);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--ff-display);font-weight:700;line-height:1.04;
  letter-spacing:-0.02em;text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--muted)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.7rem 1rem;z-index:500}
.skip-link:focus{left:.6rem;top:.6rem}
section{scroll-margin-top:84px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ff-body);font-weight:600;font-size:var(--step--1);
  padding:.72em 1.25em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
  white-space:nowrap;line-height:1}
.btn-lg{font-size:var(--step-0);padding:.85em 1.6em}
.btn-accent{background:var(--accent);color:var(--bg);box-shadow:0 6px 18px -8px oklch(0.555 0.205 27 / .7)}
.btn-accent:hover{background:var(--accent-hi);transform:translateY(-2px);box-shadow:0 12px 26px -10px oklch(0.555 0.205 27 / .8)}
.btn-ghost{background:oklch(1 0 0 / .1);color:#fff;border-color:oklch(1 0 0 / .55);backdrop-filter:blur(2px)}
.btn-ghost:hover{background:oklch(1 0 0 / .2);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky);--hdr-ink:#fff;
  background:linear-gradient(180deg, oklch(0.15 0.02 205 / .48), oklch(0.15 0.02 205 / 0));
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background-color .3s}
.site-header.scrolled{--hdr-ink:var(--ink);
  background:oklch(1 0 0 / .85);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom-color:var(--line);box-shadow:0 8px 30px -22px oklch(0.24 0.02 205 / .5)}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--hdr-ink);flex:0 0 auto}
.brand-mark{width:34px;height:22px;color:var(--accent)}
.brand-word{font-family:var(--ff-display);font-weight:700;font-size:1.4rem;letter-spacing:-0.03em}
.brand .logo{height:42px;width:auto;display:block}
.site-header .logo-solid{display:none}
.site-header.scrolled .logo-hero{display:none}
.site-header.scrolled .logo-solid{display:block}
@media (max-width:560px){.brand .logo{height:36px}}
.nav{display:flex;gap:1.55rem;margin-inline:auto;font-weight:500}
.nav a{position:relative;color:var(--hdr-ink);font-size:.98rem;padding:.2rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.header-cta .tel{font-weight:700;color:var(--hdr-ink);font-size:.98rem;white-space:nowrap}
.header-cta .tel:hover{color:var(--accent)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:26px;height:2.5px;background:var(--hdr-ink);border-radius:2px;transition:transform .3s,opacity .3s,background-color .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-nav{display:none;flex-direction:column;gap:.2rem;padding:1rem var(--gutter) 1.6rem;border-top:1px solid var(--line);background:var(--bg)}
.mobile-nav a{padding:.75rem .2rem;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-nav a.btn{margin-top:.8rem;border-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff;padding-top:var(--hh)}
.hero-media{position:absolute;inset:-8% 0 0 0;z-index:-2;will-change:transform}
.hero-media img{width:100%;height:112%;object-fit:cover;object-position:center 60%}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, oklch(0.15 0.03 205 / .88) 0%, oklch(0.17 0.03 205 / .64) 40%, oklch(0.18 0.03 205 / .22) 72%, oklch(0.18 0.03 205 / .04) 100%),
    linear-gradient(180deg, oklch(0.15 0.03 205 / 0) 30%, oklch(0.12 0.03 205 / .55) 100%)}
.hero-content{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(1.6rem,4vh,3.4rem)}
.hero-eyebrow{font-weight:600;letter-spacing:.02em;font-size:var(--step--1);
  color:oklch(0.9 0.05 205);margin-bottom:1rem}
.hero h1{font-size:var(--step-4);font-weight:800;letter-spacing:-0.035em;max-width:16ch;
  text-shadow:0 2px 30px oklch(0.15 0.03 205 / .5)}
.hero h1 em{font-style:normal;color:oklch(0.86 0.09 205)}
.hero-sub{margin-top:1.15rem;max-width:52ch;font-size:var(--step-1);color:oklch(0.96 0.01 205 / .95);line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.trust-strip{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:0;
  background:oklch(0.20 0.035 205 / .92);backdrop-filter:blur(4px)}
.trust-strip li{flex:1 1 auto;min-width:180px;padding:1.05rem var(--gutter);color:oklch(0.85 0.02 205);
  font-size:var(--step--1);display:flex;flex-direction:column;gap:.1rem;
  border-left:1px solid oklch(1 0 0 / .08)}
.trust-strip li:first-child{border-left:0}
.trust-strip strong{color:#fff;font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:-0.01em}

/* ---------- intro ---------- */
.intro{padding-block:var(--sp-section);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.intro-lead h2{font-size:var(--step-3);letter-spacing:-0.03em;max-width:15ch}
.intro-body p{font-size:var(--step-1);color:var(--ink);line-height:1.55}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(1rem,3vw,2.4rem);margin:2rem 0 0;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column-reverse;gap:.15rem}
.facts dt{margin:0;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:0;font-family:var(--ff-display);font-weight:700;font-size:clamp(1.6rem,4vw,2.3rem);
  color:var(--primary);letter-spacing:-0.03em;line-height:1}

/* ---------- services ---------- */
.services{padding-block:var(--sp-section);background:var(--surface)}
.section-head{max-width:60ch;margin-bottom:clamp(2rem,5vw,3.4rem)}
.section-head h2{font-size:var(--step-3);letter-spacing:-0.03em}
.section-head p{margin-top:.9rem;color:var(--muted);font-size:var(--step-1)}
.svc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,4vw,3.6rem);align-items:center;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  padding-block:clamp(1.4rem,3.5vw,2.6rem)}
.svc + .svc{border-top:1px solid var(--line)}
.svc.alt .svc-media{order:2}
.svc-media{border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -40px oklch(0.24 0.05 205 / .6)}
.svc-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.svc:hover .svc-media img{transform:scale(1.045)}
.svc-index{display:inline-block;font-family:var(--ff-display);font-weight:600;color:var(--accent);
  font-size:.95rem;letter-spacing:.01em;margin-bottom:.6rem}
.svc-text h3{font-size:var(--step-2);letter-spacing:-0.025em}
.svc-text p{margin-top:.75rem;color:var(--muted);max-width:46ch}
.svc-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem}
.svc-list li{position:relative;padding-left:1.4rem;font-size:.96rem;font-weight:500}
.svc-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--primary);transform:rotate(45deg)}

/* ---------- materials / oxidation ---------- */
.materials{padding-block:var(--sp-section);background:var(--bg)}
.materials-head{font-size:var(--step-3);letter-spacing:-0.03em;max-width:18ch}
.materials-sub{margin-top:.9rem;color:var(--muted);font-size:var(--step-1);max-width:52ch}
.swatches{list-style:none;margin:clamp(2rem,5vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.swatch{display:flex;flex-direction:column;gap:.75rem;font-weight:600;font-size:.95rem}
.chip{display:block;height:96px;border-radius:12px;border:1px solid oklch(0.5 0.02 205 / .18);
  background:linear-gradient(150deg, oklch(0.68 0.14 48), oklch(0.55 0.13 42));
  transition:background 1.6s var(--ease)}
.chip.zink{background:linear-gradient(150deg, oklch(0.7 0.008 250), oklch(0.55 0.01 250))}
.chip.alu{background:linear-gradient(150deg, oklch(0.86 0.004 250), oklch(0.72 0.006 250))}
.chip.uginox{background:linear-gradient(150deg, oklch(0.8 0.006 220), oklch(0.66 0.008 225))}
.chip.stahl{background:linear-gradient(150deg, oklch(0.75 0.012 245), oklch(0.6 0.014 245))}

/* interactive metal detail — click a swatch, a panel slides out underneath */
.swatches .swatch{margin:0}
.swatch-btn{width:100%;text-align:left;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);
  background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:.75rem}
.swatch-btn .chip{transition:transform .4s var(--ease),box-shadow .4s var(--ease),outline-color .2s}
.swatch-btn:hover .chip{transform:translateY(-3px);box-shadow:0 16px 32px -18px oklch(0.4 0.06 205 / .65)}
.swatch-btn .sw-name{display:inline-flex;align-items:center;gap:.45rem}
.swatch-btn .sw-name::after{content:"+";font-family:var(--ff-display);font-weight:700;color:var(--accent);
  font-size:1.15em;line-height:1;transition:transform .3s var(--ease)}
.swatch-btn[aria-expanded="true"] .sw-name::after{transform:rotate(45deg)}
.swatch-btn[aria-expanded="true"] .chip,.swatch-btn:focus-visible .chip{outline:2.5px solid var(--accent);outline-offset:3px}
.swatch-btn:focus-visible{outline:none}

.metal-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);margin-top:1.4rem}
.metal-detail>.md-wrap{overflow:hidden;min-height:0}
.metal-detail.open{grid-template-rows:1fr}
.md-card{margin-top:.3rem;padding:clamp(1.4rem,3vw,2.1rem);border-radius:calc(var(--radius) + 4px);
  background:var(--surface);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:1rem 1.5rem;align-items:start}
.md-chip{width:64px;height:64px;border-radius:12px;border:1px solid oklch(0.5 0.02 205 / .18);
  background:linear-gradient(150deg, oklch(0.68 0.14 48), oklch(0.55 0.13 42))}
.md-chip.zink{background:linear-gradient(150deg, oklch(0.7 0.008 250), oklch(0.55 0.01 250))}
.md-chip.alu{background:linear-gradient(150deg, oklch(0.86 0.004 250), oklch(0.72 0.006 250))}
.md-chip.uginox{background:linear-gradient(150deg, oklch(0.8 0.006 220), oklch(0.66 0.008 225))}
.md-chip.stahl{background:linear-gradient(150deg, oklch(0.75 0.012 245), oklch(0.6 0.014 245))}
.md-body h3{font-family:var(--ff-display);font-size:var(--step-1);letter-spacing:-0.02em;margin-bottom:.35rem}
.md-desc{color:var(--muted);max-width:62ch;font-size:.98rem}
.md-facts{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:1.05rem 0 0;padding:0;list-style:none}
.md-facts div{display:flex;flex-direction:column-reverse;gap:.1rem}
.md-facts dt{margin:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.md-facts dd{margin:0;font-family:var(--ff-display);font-weight:700;color:var(--primary);font-size:1.02rem;letter-spacing:-0.01em}
@media (max-width:560px){.md-card{grid-template-columns:1fr}.md-chip{width:52px;height:52px}}
@media (prefers-reduced-motion: reduce){.metal-detail{transition:none}.swatch-btn .chip,.swatch-btn .sw-name::after{transition:none}}

/* ---------- references ---------- */
.references{padding-block:var(--sp-section);background:var(--deep);color:var(--on-deep)}
.ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,5vw,4rem);align-items:center}
.ref-copy h2{font-size:var(--step-3);letter-spacing:-0.03em;color:#fff}
.ref-copy p{margin-top:1rem;color:oklch(0.86 0.02 205);max-width:44ch;font-size:var(--step-1)}
.ref-index{list-style:none;margin:1.8rem 0 0;padding:0;
  columns:2;column-gap:1.5rem;font-weight:500}
.ref-index li{padding:.5rem 0;border-bottom:1px solid oklch(1 0 0 / .12);
  break-inside:avoid;color:oklch(0.93 0.015 205);font-size:.98rem}
.ref-index li::marker{content:""}
.ref-photo{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 70px -40px #000}
.ref-photo img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.ref-photo figcaption{background:var(--deep-2);color:oklch(0.8 0.03 205);font-size:.85rem;
  padding:.7rem 1rem;font-weight:500}
.review{margin-top:clamp(2.5rem,6vw,4rem);text-align:center;padding-top:2.4rem;border-top:1px solid oklch(1 0 0 / .14)}
.review p{font-family:var(--ff-display);font-weight:600;font-size:var(--step-3);letter-spacing:-0.03em;color:#fff}
.review cite{display:block;margin-top:.9rem;font-style:normal;color:oklch(0.85 0.02 205);font-size:.95rem}
.review .stars{color:var(--accent-hi);letter-spacing:.15em;margin-right:.4rem}

/* ---------- heritage ---------- */
.heritage{padding-block:var(--sp-section);background:var(--surface)}
.heritage-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,5vw,4rem);align-items:center}
.heritage-photos{position:relative;min-height:340px}
.heritage-photos img{border-radius:var(--radius);box-shadow:0 30px 60px -40px oklch(0.24 0.05 205 / .55);object-fit:cover}
.hp-1{width:78%;aspect-ratio:16/10}
.hp-2{position:absolute;right:0;bottom:-8%;width:52%;aspect-ratio:5/4;border:6px solid var(--surface)}
.heritage-text h2{font-size:var(--step-2);letter-spacing:-0.025em;max-width:20ch}
.heritage-text p{margin-top:1rem;color:var(--muted);max-width:48ch}
.link-arrow{display:inline-block;margin-top:1.3rem;font-weight:700;color:var(--primary);
  border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.link-arrow:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- karriere ---------- */
.karriere{padding-block:clamp(3rem,6vw,5rem);background:var(--bg)}
.karriere-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem;
  padding:clamp(1.8rem,4vw,3rem);background:var(--surface-2);border-radius:calc(var(--radius) + 6px);border:1px solid var(--line)}
.karriere-inner > div{max-width:56ch}
.kicker-solo{display:inline-block;font-weight:700;color:var(--accent);font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem}
.karriere h2{font-size:var(--step-2);letter-spacing:-0.025em}
.karriere p{margin-top:.7rem;color:var(--muted)}

/* ---------- cta band ---------- */
.cta-band{padding-block:var(--sp-section);background:
  radial-gradient(120% 140% at 15% 0%, var(--deep) 0%, var(--deep-2) 100%);color:var(--on-deep)}
.cta-inner{max-width:960px}
.cta-band h2{font-size:var(--step-3);letter-spacing:-0.03em;color:#fff}
.cta-band > .wrap > p{margin-top:.9rem;color:oklch(0.86 0.02 205);font-size:var(--step-1);max-width:50ch}
.cta-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3.2rem);margin-top:2.4rem;align-items:start}
.cta-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field-full{grid-column:1/-1}
.cta-form label{font-size:.85rem;font-weight:600;color:oklch(0.85 0.02 205)}
.cta-form input,.cta-form textarea{width:100%;font:inherit;font-size:.98rem;color:#fff;
  background:oklch(1 0 0 / .06);border:1.5px solid oklch(1 0 0 / .2);border-radius:10px;padding:.7rem .85rem;
  transition:border-color .25s,background .25s}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:oklch(0.8 0.02 205 / .6)}
.cta-form input:focus,.cta-form textarea:focus{outline:none;border-color:var(--accent-hi);background:oklch(1 0 0 / .1)}
.cta-form button{grid-column:1/-1;justify-self:start}
.form-note{grid-column:1/-1;margin-top:.2rem;font-size:.9rem;color:oklch(0.82 0.02 205)}
.form-note a{color:var(--accent-hi);font-weight:600;border-bottom:1px solid oklch(0.605 0.215 29 / .5)}
.cta-contact{font-style:normal}
.cta-contact h3{font-family:var(--ff-display);font-size:var(--step-1);color:#fff}
.cta-contact p{margin-top:.8rem;color:oklch(0.86 0.02 205);line-height:1.7}
.cta-contact a{color:#fff;border-bottom:1px solid oklch(1 0 0 / .3)}
.cta-contact a:hover{color:var(--accent-hi)}
.cta-contact .hours{margin-top:1.1rem}
.cta-contact .hours strong{color:oklch(0.9 0.04 205)}

/* ---------- footer ---------- */
.site-footer{background:var(--deep-2);color:oklch(0.8 0.02 205);padding-block:clamp(2.6rem,5vw,3.6rem) 1.6rem}
.footer-inner{display:grid;grid-template-columns:1.5fr 1.4fr .7fr;gap:clamp(1.6rem,4vw,3rem);padding-bottom:2rem;border-bottom:1px solid oklch(1 0 0 / .1)}
.foot-brand .brand-word{color:#fff;font-size:1.5rem}
.foot-brand p{margin-top:.6rem;font-size:.92rem;line-height:1.6}
.foot-legal{display:flex;flex-direction:column;gap:.6rem;font-size:.95rem}
.foot-nav{columns:2;column-gap:clamp(1.6rem,4vw,3rem);font-size:.95rem}
.foot-nav a{display:block;padding:.32rem 0}
.foot-nav a:hover,.foot-legal a:hover{color:var(--accent-hi)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:1.4rem;font-size:.82rem;color:oklch(0.66 0.02 205)}
.footer-base a{color:oklch(0.8 0.03 205);border-bottom:1px solid transparent}
.footer-base a:hover{border-bottom-color:var(--accent-hi);color:#fff}

/* ---------- reveal motion (visible by default; JS only adds .pre to hide before animating) ---------- */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.pre{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal.pre{opacity:1;transform:none}
  .reveal{transition:none}
  .svc-media img,.chip{transition:none}
  .hero-media{transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav,.header-cta .tel{display:none}
  .burger{display:flex;margin-left:auto}
  .header-cta .btn{display:none}
  .mobile-nav:not([hidden]){display:flex}
  .intro,.ref-grid,.heritage-grid,.cta-grid,.svc,.svc.alt .svc-media{grid-template-columns:1fr}
  .svc{gap:1.2rem}
  .svc.alt .svc-media{order:0}
  .svc-media{max-width:560px}
  .heritage-photos{min-height:0;display:flex;gap:1rem}
  .hp-1{width:64%}
  .hp-2{position:static;width:36%;border:0}
  .footer-inner{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .facts{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .svc-list{grid-template-columns:1fr}
  .ref-index{columns:1}
  .cta-form{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .trust-strip li{min-width:50%;flex:1 1 50%}
  .trust-strip li:nth-child(3){border-left:0}
}

/* =========================================================
   SUB-PAGE COMPONENTS
   ========================================================= */
.page-hero{position:relative;background:radial-gradient(120% 160% at 12% 0%, var(--deep) 0%, var(--deep-2) 100%);
  color:var(--on-deep);padding-block:calc(clamp(3rem,7vw,5.4rem) + var(--hh)) clamp(2.6rem,5vw,4.2rem);overflow:hidden}
.page-hero .crumb{font-size:.85rem;font-weight:600;letter-spacing:.02em;color:oklch(0.8 0.05 205);margin-bottom:1rem}
.page-hero .crumb a{color:inherit;border-bottom:1px solid transparent}
.page-hero .crumb a:hover{border-bottom-color:var(--accent-hi);color:#fff}
.page-hero h1{font-size:var(--step-4);letter-spacing:-0.035em;color:#fff;max-width:18ch}
.page-hero h1 em{font-style:normal;color:oklch(0.86 0.09 205)}
.page-lead{margin-top:1.15rem;max-width:60ch;font-size:var(--step-1);color:oklch(0.88 0.02 205);line-height:1.55}

.pad{padding-block:var(--sp-section)}
.pad-sm{padding-block:clamp(2.6rem,5vw,4rem)}
.surface{background:var(--surface)}
.prose{max-width:68ch}
.prose p{margin-top:1rem;color:var(--muted);font-size:var(--step-0)}
.prose p:first-child{margin-top:0}
.lead-p{font-size:var(--step-1);color:var(--ink);line-height:1.5}

/* process steps — a real ordered sequence */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem;margin-top:clamp(2rem,4vw,3rem);counter-reset:s}
.step{padding-top:1.1rem;border-top:2px solid var(--primary)}
.step .n{counter-increment:s;font-family:var(--ff-display);font-weight:700;color:var(--primary);font-size:1.05rem}
.step .n::before{content:counter(s,decimal-leading-zero)}
.step h4{font-family:var(--ff-display);font-size:1.15rem;margin-top:.4rem;letter-spacing:-0.01em}
.step p{margin-top:.5rem;color:var(--muted);font-size:.95rem}

/* gallery (masonry) */
.gallery{columns:3;column-gap:1rem;margin-top:clamp(1.6rem,4vw,2.4rem)}
.gallery figure{margin:0 0 1rem;break-inside:avoid;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 20px 44px -30px oklch(0.24 0.05 205 / .6)}
.gallery img{width:100%;display:block;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .7rem;color:#fff;font-size:.85rem;font-weight:500;
  background:linear-gradient(180deg,transparent, oklch(0.15 0.03 205 / .82));opacity:0;transition:opacity .3s}
.gallery figure:hover figcaption{opacity:1}

/* timeline */
.timeline{margin-top:clamp(2rem,4vw,3rem);padding-left:1.8rem;border-left:2px solid var(--line);max-width:72ch}
.tl{position:relative;padding-bottom:2.2rem}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:calc(-1.8rem - 7px);top:.35em;width:13px;height:13px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 4px var(--bg)}
.tl .yr{font-family:var(--ff-display);font-weight:700;color:var(--primary);font-size:1.2rem;letter-spacing:-0.02em}
.tl h4{font-family:var(--ff-display);font-size:1.15rem;margin-top:.15rem}
.tl p{margin-top:.4rem;color:var(--muted);font-size:.96rem;max-width:54ch}

/* values / highlights */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:clamp(2rem,4vw,3rem)}
.value{padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.value h4{font-family:var(--ff-display);font-size:1.2rem;letter-spacing:-0.01em}
.value p{margin-top:.5rem;color:var(--muted);font-size:.95rem}

/* team */
.team-lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-top:clamp(2rem,4vw,3rem)}
.lead-card{padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:flex;gap:1rem;align-items:center}
.lead-card .who{font-family:var(--ff-display);font-weight:700;font-size:1.15rem}
.team-cat{margin-top:clamp(2.2rem,5vw,3.4rem)}
.team-cat h3{font-size:var(--step-1);letter-spacing:-0.02em}
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem 1.4rem;margin-top:1.2rem}
.member{display:flex;gap:.85rem;align-items:center}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:#fff;background:var(--primary);letter-spacing:-0.02em}
.avatar.c{background:var(--accent)}
.avatar.d{background:var(--deep)}
.avatar.lg{width:62px;height:62px;font-size:1.25rem}
.member .who{font-weight:600;line-height:1.15}
.member .role{color:var(--muted);font-size:.88rem}
/* team photo cards */
.tgrid{--cols:4;--tg-gap:clamp(1.1rem,2.5vw,1.6rem);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--tg-gap);margin-top:clamp(1.5rem,4vw,2.3rem)}
.tgrid .tmember{flex:0 0 calc((100% - (var(--cols) - 1) * var(--tg-gap)) / var(--cols))}
@media (max-width:900px){.tgrid{--cols:3}}
@media (max-width:560px){.tgrid{--cols:2}}
.tmember img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:var(--surface-2);
  box-shadow:0 18px 40px -30px oklch(0.24 0.05 205 / .6);transition:transform .5s var(--ease)}
.tmember:hover img{transform:translateY(-4px)}
.tmember .who{margin-top:.75rem;font-family:var(--ff-display);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em}
.tmember .role{color:var(--muted);font-size:.9rem;margin-top:.1rem}

/* karriere */
.job{margin-top:clamp(1.6rem,4vw,2.2rem);padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);background:var(--surface)}
.job-head{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between}
.job h3{font-size:var(--step-2);letter-spacing:-0.02em}
.job .tag{font-weight:600;color:var(--accent);font-size:.9rem}
.job-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2.4rem;margin-top:1.4rem}
.job-cols h4{font-family:var(--ff-display);font-size:1.05rem;margin-bottom:.6rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.5rem;color:var(--ink);font-size:.96rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--primary);transform:rotate(45deg)}
.job > .btn{margin-top:clamp(1.6rem,3.5vw,2.2rem)}

/* contact */
.contact-cols{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.info-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1.2rem}
.info-list li{display:grid;gap:.15rem}
.info-list .k{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.info-list .v{font-size:1.05rem;font-weight:500}
.info-list a{color:var(--primary);border-bottom:1px solid transparent}
.info-list a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:380px;background:var(--surface)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:saturate(.92)}

@media (max-width:900px){
  .contact-cols,.job-cols{grid-template-columns:1fr}
  .gallery{columns:2}
}
@media (max-width:560px){
  .gallery{columns:1}
  .steps{grid-template-columns:1fr}
}