/* ═══════════════════════════════════════════════════════════════
   CONTIDEAL  v4  ·  main.css
   Palette  "Slate & Bernstein"
   Struktur  /de/  /en/  /tr/  ·  CSS/JS: ../assets/
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --slate:       #1c2b3a;
  --slate-mid:   #2e4057;
  --slate-lt:    #3d5570;
  --slate-pale:  #eaf0f6;
  --gold:        #c07d2a;
  --gold-br:     #d4943a;
  --gold-pl:     #e8c97a;
  --gold-bg:     #fdf8f0;
  --body-bg:     #f5f2ec;
  --alt-bg:      #ede8e0;
  --white:       #ffffff;
  --heading:     #1a2530;
  --body-txt:    #526070;
  --border:      rgba(28,43,58,.12);
  --border-gold: rgba(192,125,42,.25);

  /* Shadows */
  --sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --sh-md: 0 3px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);

  /* Typography — system stack, no external requests */
  --f-display: 'Georgia', 'Times New Roman', 'Palatino Linotype', serif;
  --f-body:    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-cond:    'Arial Narrow', 'Franklin Gothic Medium', Impact, Arial, sans-serif;

  /* Scale */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.0625rem;   /* ~17 px – body text */
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;

  --t: 0.22s ease;
}

/* ── 2. Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body  { font-family:var(--f-body); font-size:var(--fs-base); line-height:1.78; color:var(--heading); background:var(--body-bg); overflow-x:hidden; }
img   { max-width:100%; display:block; }
a     { color:inherit; text-decoration:none; }
button{ cursor:pointer; font-family:inherit; }
ul,ol { list-style:none; }

/* Skip link */
.skip { position:absolute; left:-9999px; top:0; z-index:9999; background:var(--gold); color:var(--slate); padding:.5rem 1.2rem; font-weight:700; font-size:var(--fs-sm); }
.skip:focus { left:0; }

/* ── 3. Image Placeholders ────────────────────────────────────── */
/*
  BILDER EINSETZEN
  ─────────────────────────────────────────────────────────────────
  Jede <figure class="img-ph"> ist ein Platzhalter.
  1. Bild in /assets/img/ ablegen
  2. <img src="../assets/img/dateiname.jpg" alt="..."> einfügen
  3. class="img-ph ..." und data-label entfernen
  ─────────────────────────────────────────────────────────────────
*/
.img-ph {
  position:relative; display:block; width:100%; overflow:hidden;
  background:#c0cdd8;
}
.img-ph::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    45deg, rgba(28,43,58,.07) 0, rgba(28,43,58,.07) 1px, transparent 0, transparent 26px);
}
.img-ph::after {
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(28,43,58,.38); text-align:center; padding:1.2rem; line-height:1.5;
}
.img-ph--hero { padding-top:56.25%; }
.img-ph--card { padding-top:66%; }
.img-ph--sq   { padding-top:100%; }
.img-ph img   { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.img-wrap         { position:relative; }
.img-wrap-accent  { position:absolute; bottom:-1.3rem; right:-1.3rem; width:100px; height:100px; background:var(--gold); z-index:-1; }

/* ── 4. Layout ────────────────────────────────────────────────── */
.container { max-width:1300px; margin:0 auto; padding:0 2.5rem; }
section    { padding:5.5rem 0; }

.bg-alt    { background:var(--alt-bg); }
.bg-white  { background:var(--white); }
.bg-gold   { background:var(--gold-bg); border-top:2px solid var(--border-gold); }
.bg-slate  { background:var(--slate); }
.tc        { text-align:center; }

/* ── 5. Typography ────────────────────────────────────────────── */
.eyebrow {
  font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--slate-mid);
  display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;
}
.eyebrow::before { content:''; display:block; width:28px; height:2px; background:var(--gold); flex-shrink:0; }
.eyebrow--c      { justify-content:center; }
.eyebrow--gold   { color:var(--gold); }

h2.ht {
  font-family:var(--f-display);
  font-size:clamp(1.85rem,3vw,2.75rem); font-weight:400;
  color:var(--heading); line-height:1.18; margin-bottom:1.1rem;
}
h2.ht--light { color:var(--white); }

.lead     { font-size:var(--fs-base); line-height:1.82; color:var(--body-txt); max-width:600px; }
.bodytext { font-size:var(--fs-base); line-height:1.82; color:var(--body-txt); margin-bottom:1.1rem; }

/* ── 6. Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-block; font-family:var(--f-cond);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  padding:.95rem 2.3rem; border:none; cursor:pointer; line-height:1;
  transition:background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.btn--gold   { background:var(--gold);      color:var(--white); box-shadow:0 2px 10px rgba(192,125,42,.32); }
.btn--gold:hover   { background:var(--gold-br); transform:translateY(-2px); box-shadow:0 6px 18px rgba(192,125,42,.42); }
.btn--ghost  { background:transparent; color:rgba(255,255,255,.88); border:1.5px solid rgba(255,255,255,.38); }
.btn--ghost:hover  { border-color:var(--gold-pl); color:var(--gold-pl); }
.btn--slate  { background:var(--slate);     color:var(--white); box-shadow:0 2px 10px rgba(28,43,58,.28); }
.btn--slate:hover  { background:var(--slate-mid); transform:translateY(-2px); }
.btn--outline{ background:transparent; color:var(--body-txt); border:1px solid var(--border); }
.btn--outline:hover{ border-color:var(--gold); color:var(--slate); }

/* ── 7. Header ────────────────────────────────────────────────── */
#site-header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(28,43,58,.97); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-gold);
  transition:box-shadow var(--t);
}
#site-header.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.28); }

.header-inner {
  max-width:1340px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; height:68px; gap:1rem;
}
.logo { font-family:var(--f-cond); font-size:1.5rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--white); flex-shrink:0; }
.logo span { color:var(--gold-pl); }

#main-nav { display:flex; gap:0; align-items:center; flex:1; justify-content:center; }
#main-nav a {
  font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.6);
  padding:.55rem .9rem; position:relative; transition:color var(--t); white-space:nowrap;
}
#main-nav a::after { content:''; position:absolute; bottom:0; left:.9rem; right:.9rem; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
#main-nav a:hover, #main-nav a.active { color:var(--gold-pl); }
#main-nav a:hover::after, #main-nav a.active::after { transform:scaleX(1); }

.header-right  { display:flex; align-items:center; gap:1.2rem; flex-shrink:0; }
.lang-sw       { display:flex; align-items:center; gap:.38rem; font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; }
.lang-sw a     { color:rgba(255,255,255,.38); transition:color var(--t); }
.lang-sw a:hover, .lang-sw a.act { color:var(--gold-pl); }
.lang-sw .sep  { color:rgba(255,255,255,.16); font-size:.55rem; }
.hdr-phone     { font-size:var(--fs-xs); color:rgba(255,255,255,.44); transition:color var(--t); white-space:nowrap; }
.hdr-phone:hover { color:var(--gold-pl); }

/* Hamburger */
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; min-width:34px; min-height:34px; justify-content:center; align-items:center; }
.burger span { display:block; width:22px; height:2px; background:rgba(255,255,255,.72); transition:transform .3s, opacity .3s; transform-origin:center; }
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav panel */
#mobile-nav {
  display:none; flex-direction:column;
  position:fixed; top:68px; left:0; right:0; bottom:0;
  background:var(--slate); overflow-y:auto; z-index:190; padding:1.5rem 2rem 3rem;
}
#mobile-nav.open { display:flex; }
#mobile-nav a { display:block; font-family:var(--f-cond); font-size:1.1rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.08); transition:color var(--t); }
#mobile-nav a:hover, #mobile-nav a.active { color:var(--gold-pl); }
.mob-lang { display:flex; gap:1.5rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); }
.mob-lang a { font-family:var(--f-cond); font-size:.85rem; font-weight:700; letter-spacing:.13em; color:rgba(255,255,255,.4); border-bottom:none !important; }
.mob-lang a.act { color:var(--gold-pl); }
.mob-contact { margin-top:1.5rem; font-size:.9rem; color:rgba(255,255,255,.35); line-height:1.75; }
.mob-contact a { color:var(--gold-pl); font-weight:600; }

/* ── 8. Hero (home) ───────────────────────────────────────────── */
.hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; position:relative; background:var(--slate); }
.hero::before { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 24% 62%, rgba(192,125,42,.1) 0%, transparent 58%); pointer-events:none; }

.hero-left { display:flex; flex-direction:column; justify-content:center; padding:10rem 4rem 6rem 6rem; position:relative; z-index:2; }
.hero-tag  { font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:.75rem; margin-bottom:1.8rem; }
.hero-tag::before { content:''; display:block; width:32px; height:1px; background:var(--gold); }
.hero h1   { font-family:var(--f-display); font-size:clamp(2.4rem,4vw,3.8rem); font-weight:400; line-height:1.13; color:var(--white); margin-bottom:1.7rem; }
.hero h1 em{ font-style:normal; color:var(--gold-pl); }
.hero-desc { font-size:var(--fs-md); line-height:1.8; color:rgba(255,255,255,.6); max-width:430px; margin-bottom:2.7rem; }
.hero-cta  { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-right { position:relative; overflow:hidden; }

/* ── Hero Slider ──────────────────────────────────────────────── */
/*
  SLIDER-BILDER AUSTAUSCHEN
  ──────────────────────────────────────────────────────────────
  Im HTML der jeweiligen index.html:
  <div class="hs-slide [active]">
    <img src="../assets/img/hero-MOTIV.jpg" alt="..." data-caption="...">
  </div>
  Eigene Dateien in /assets/img/ ablegen, src anpassen.
  ──────────────────────────────────────────────────────────────
*/
.hero-slider  { position:absolute; inset:0; z-index:0; }
.hs-slide     { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease-in-out; }
.hs-slide.active { opacity:1; }
.hs-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.07); transition:transform 7s ease-out; }
.hs-slide.active img { transform:scale(1); }

.hero-overlay {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right, var(--slate) 0%, rgba(28,43,58,.3) 38%, transparent 65%),
    linear-gradient(to top,   rgba(28,43,58,.72) 0%, transparent 42%);
}
.hs-caption { position:absolute; bottom:5.2rem; left:2rem; z-index:5; font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.48); transition:opacity .5s; }
.hs-dots    { position:absolute; bottom:1.9rem; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:.6rem; }
.hs-dot     { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); border:none; padding:0; cursor:pointer; transition:background .4s, transform .4s; }
.hs-dot.active { background:var(--gold); transform:scale(1.45); }
.hs-dot:hover:not(.active) { background:rgba(255,255,255,.62); }

.hero-stats   { position:absolute; bottom:3rem; right:3rem; z-index:5; display:flex; flex-direction:column; gap:1.4rem; }
.stat         { text-align:right; }
.stat-num     { font-family:var(--f-display); font-size:2.3rem; font-weight:400; color:var(--gold-pl); line-height:1; }
.stat-label   { font-size:.67rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-top:.28rem; }

/* ── 9. Page Hero (inner pages) ───────────────────────────────── */
.page-hero { background:var(--slate); padding:9rem 0 5rem; min-height:360px; display:flex; align-items:flex-end; position:relative; overflow:hidden; }
.page-hero-img { position:absolute; top:0; right:0; width:44%; height:100%; z-index:0; }
.page-hero-img .img-ph { position:absolute; inset:0; padding-top:0; height:100%; }
.page-hero-img::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to right, var(--slate) 0%, rgba(28,43,58,.45) 55%, transparent 100%); }
.page-hero-content { position:relative; z-index:2; width:100%; }
.page-hero h1 { font-family:var(--f-display); font-size:clamp(2.1rem,3.8vw,3.3rem); font-weight:400; color:var(--white); line-height:1.15; margin-bottom:1rem; }
.page-hero .lead { color:rgba(255,255,255,.52); }

/* ── 10. Split layout ─────────────────────────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:5.5rem; align-items:center; }

/* ── 11. Service cards ────────────────────────────────────────── */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.svc-card  { background:var(--white); border:1px solid var(--border); padding:2.4rem 2.2rem; transition:box-shadow var(--t), transform var(--t), border-color var(--t); }
.svc-card:hover { box-shadow:var(--sh-md); transform:translateY(-3px); border-color:rgba(192,125,42,.3); }
.svc-icon  { font-size:1.2rem; margin-bottom:1.2rem; width:44px; height:44px; background:var(--slate-pale); display:flex; align-items:center; justify-content:center; color:var(--slate); }
.svc-card h3 { font-family:var(--f-cond); font-size:.95rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--heading); margin-bottom:.75rem; }
.svc-card p  { font-size:var(--fs-base); line-height:1.78; color:var(--body-txt); }

/* ── 12. Process band ─────────────────────────────────────────── */
.process-band { background:var(--slate-mid); padding:5.5rem 0; position:relative; overflow:hidden; }
.process-band::before { content:''; position:absolute; top:-30%; right:-5%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(192,125,42,.1) 0%, transparent 70%); }
.process-band .eyebrow { color:var(--gold); }
.process-band .lead    { color:rgba(255,255,255,.55); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(232,201,122,.18); margin-top:3.5rem; }
.step { padding:2.2rem 2rem; border-right:1px solid rgba(232,201,122,.14); }
.step:last-child { border-right:none; }
.step-num { font-family:var(--f-display); font-size:2.8rem; font-weight:400; color:rgba(232,201,122,.18); line-height:1; margin-bottom:.8rem; }
.step h4  { font-family:var(--f-cond); font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:.6rem; }
.step p   { font-size:var(--fs-base); line-height:1.72; color:rgba(255,255,255,.46); }

/* ── 13. Values ───────────────────────────────────────────────── */
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px; background:var(--border); margin-top:3.5rem; }
.value-card  { background:var(--alt-bg); padding:1.9rem 1.75rem; transition:background var(--t); }
.value-card:hover { background:var(--white); }
.value-num   { font-family:var(--f-display); font-size:2rem; font-weight:400; color:var(--gold); line-height:1; margin-bottom:.5rem; }
.value-card h4 { font-family:var(--f-cond); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--heading); margin-bottom:.55rem; }
.value-card p  { font-size:var(--fs-base); line-height:1.67; color:var(--body-txt); }

/* ── 14. Locations ────────────────────────────────────────────── */
.locations { display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2rem; }
.location  { border-left:2px solid var(--gold); padding-left:1rem; }
.loc-name  { font-family:var(--f-cond); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--heading); margin-bottom:.18rem; }
.loc-det   { font-size:var(--fs-sm); color:var(--body-txt); }

/* ── 15. Services detail ──────────────────────────────────────── */
.svc-detail { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); }
.sd-item    { padding:2.8rem 2.6rem; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.sd-item:nth-child(even)      { border-right:none; }
.sd-item:nth-last-child(-n+2) { border-bottom:none; }
.sd-icon { font-size:1.5rem; color:var(--gold); margin-bottom:1.1rem; display:block; }
.sd-item h3 { font-family:var(--f-display); font-size:var(--fs-xl); font-weight:500; color:var(--heading); margin-bottom:.8rem; }
.sd-item p  { font-size:var(--fs-base); line-height:1.82; color:var(--body-txt); }
.sd-item ul { margin-top:.9rem; }
.sd-item ul li { font-size:var(--fs-base); color:var(--body-txt); padding:.22rem 0 .22rem 1rem; position:relative; }
.sd-item ul li::before { content:'–'; position:absolute; left:0; color:var(--gold); }

/* ── 16. Partner / Portfolio ──────────────────────────────────── */
.partner-card { border:1px solid var(--border); background:var(--white); overflow:hidden; margin-bottom:2rem; transition:box-shadow var(--t); }
.partner-card:hover { box-shadow:var(--sh-md); }
.partner-head { background:var(--slate); padding:1.9rem 2.4rem; display:flex; align-items:center; gap:1.5rem; border-bottom:2px solid var(--gold); }
.partner-logo { width:52px; height:52px; flex-shrink:0; background:var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--f-cond); font-size:.6rem; font-weight:700; letter-spacing:.08em; color:var(--slate); text-align:center; line-height:1.2; }
.partner-head h3 { font-family:var(--f-display); font-size:var(--fs-xl); font-weight:400; color:var(--white); margin-bottom:.2rem; }
.partner-head span { font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.partner-body { padding:2.2rem 2.4rem; }
.partner-body > p { font-size:var(--fs-base); line-height:1.82; color:var(--body-txt); margin-bottom:1.8rem; }
.partner-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.p-tag { font-family:var(--f-cond); font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .85rem; border:1px solid var(--border); color:var(--body-txt); background:var(--alt-bg); }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); margin-top:1.8rem; }
.prod-tile    { background:var(--alt-bg); padding:1.7rem 1.4rem; transition:background var(--t); }
.prod-tile:hover { background:var(--white); }
.prod-icon { font-size:1.5rem; margin-bottom:.7rem; display:block; }
.prod-tile h4 { font-family:var(--f-cond); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--heading); margin-bottom:.45rem; }
.prod-tile p  { font-size:var(--fs-sm); line-height:1.65; color:var(--body-txt); }
.partner-meta { display:flex; gap:2.5rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid rgba(0,0,0,.07); margin-bottom:1.4rem; }
.pm-label { font-family:var(--f-cond); font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--body-txt); margin-bottom:.22rem; }
.pm-value { font-size:var(--fs-sm); font-weight:700; color:var(--heading); }
.partner-link { font-family:var(--f-cond); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); transition:color var(--t); }
.partner-link:hover { color:var(--gold-br); }

.placeholder-card { border:1px dashed rgba(192,125,42,.3); padding:3rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:190px; background:rgba(192,125,42,.025); }
.placeholder-card p { font-size:var(--fs-base); color:var(--body-txt); line-height:1.75; max-width:380px; margin-top:.7rem; }

.cta-band { background:var(--slate); border:1px solid var(--border-gold); padding:2.8rem 3rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-top:4rem; }
.cta-band p { font-size:var(--fs-md); line-height:1.75; color:rgba(255,255,255,.55); max-width:550px; margin:0; }
.cta-band strong { color:var(--gold-pl); font-weight:600; }

/* ── 17. Contact ──────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.form-group   { margin-bottom:1.35rem; }
.form-group label { display:block; font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--body-txt); margin-bottom:.45rem; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; background:var(--white); border:1px solid rgba(28,43,58,.15); padding:.87rem 1rem; font-family:var(--f-body); font-size:var(--fs-base); color:var(--heading); outline:none; appearance:none; transition:border-color var(--t); border-radius:0; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--gold); }
.form-group textarea { resize:vertical; min-height:132px; }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.hp-field  { position:absolute; left:-9999px; opacity:0; pointer-events:none; }
.form-note { font-size:var(--fs-sm); color:var(--body-txt); margin-bottom:1.2rem; line-height:1.65; }
.form-note a { color:var(--gold); }
.form-msg  { display:none; margin-top:1rem; padding:1rem; font-size:var(--fs-sm); line-height:1.6; }
.form-msg--ok  { background:rgba(192,125,42,.12); border-left:3px solid var(--gold); color:var(--heading); font-weight:700; }
.form-msg--err { background:rgba(180,0,0,.07); border-left:3px solid #c00; color:#700; }

.contact-info h3 { font-family:var(--f-display); font-size:var(--fs-2xl); font-weight:400; color:var(--heading); margin-bottom:1rem; }
.contact-info > p { font-size:var(--fs-base); line-height:1.82; color:var(--body-txt); margin-bottom:2rem; }
.contact-details  { display:flex; flex-direction:column; gap:1.15rem; }
.contact-row { display:flex; gap:1rem; align-items:flex-start; }
.contact-icon { width:35px; height:35px; flex-shrink:0; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.87rem; }
.contact-text { font-size:var(--fs-base); line-height:1.6; color:var(--heading); }
.contact-text strong { display:block; font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--body-txt); margin-bottom:.18rem; }
.contact-text a:hover { color:var(--gold); }
.note-box  { margin-top:2.2rem; padding:1.6rem; background:var(--alt-bg); border-left:3px solid var(--gold); }
.note-box p{ font-size:var(--fs-sm); line-height:1.78; color:var(--body-txt); margin:0; }
.note-box strong { font-weight:700; color:var(--heading); }

/* ── 18. Legal ────────────────────────────────────────────────── */
.legal-wrap { max-width:800px; padding-top:1rem; }
.legal-wrap h2 { font-family:var(--f-display); font-size:var(--fs-xl); font-weight:500; color:var(--heading); margin:2.2rem 0 .75rem; }
.legal-wrap h3 { font-family:var(--f-cond); font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--heading); margin:1.5rem 0 .55rem; }
.legal-wrap p  { font-size:var(--fs-base); line-height:1.82; color:var(--body-txt); margin-bottom:.95rem; }
.legal-wrap ul { padding-left:1.3rem; list-style:disc; margin-bottom:.95rem; }
.legal-wrap ul li { font-size:var(--fs-base); line-height:1.78; color:var(--body-txt); margin-bottom:.32rem; }
.legal-wrap a  { color:var(--gold); }

/* ── 19. Footer ───────────────────────────────────────────────── */
footer { background:var(--slate); border-top:2px solid var(--border-gold); padding:3.5rem 0 2rem; }
.footer-inner { max-width:1300px; margin:0 auto; padding:0 2.5rem; display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:2.5rem; }
.footer-logo  { font-family:var(--f-cond); font-size:1.22rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--white); display:block; margin-bottom:.9rem; }
.footer-logo span { color:var(--gold-pl); }
.footer-brand p   { font-size:var(--fs-sm); line-height:1.72; color:rgba(255,255,255,.36); max-width:240px; }
.footer-col h5 { font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-col a  { display:block; font-size:var(--fs-sm); color:rgba(255,255,255,.42); margin-bottom:.5rem; transition:color var(--t); }
.footer-col a:hover { color:rgba(255,255,255,.82); }
.footer-col a.legal { margin-top:.8rem; color:rgba(255,255,255,.24); font-size:.77rem; }
.footer-col a.legal:hover { color:rgba(255,255,255,.55); }
.footer-col p  { font-size:var(--fs-sm); color:rgba(255,255,255,.4); line-height:1.72; }
.footer-col p a{ color:rgba(255,255,255,.4); }
.footer-col p a:hover { color:var(--gold-pl); }
.footer-addr { display:block; margin-top:.5rem; }

.footer-bottom { max-width:1300px; margin:0 auto; padding:1.5rem 2.5rem 0; border-top:1px solid rgba(255,255,255,.08); }
.footer-bottom p { font-size:.75rem; color:rgba(255,255,255,.26); }

/* ── 20. Cookie Banner ────────────────────────────────────────── */
#cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9000; background:var(--slate); border-top:2px solid var(--gold); padding:1.4rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; box-shadow:0 -4px 24px rgba(0,0,0,.3); }
#cookie-banner.hidden { display:none; }
#cookie-banner p { font-size:var(--fs-sm); line-height:1.65; color:rgba(255,255,255,.62); max-width:680px; margin:0; }
#cookie-banner p a { color:var(--gold-pl); }
.cookie-btns { display:flex; gap:.75rem; flex-shrink:0; }
.c-accept  { font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.65rem 1.6rem; background:var(--gold); color:var(--white); border:none; cursor:pointer; transition:background var(--t); }
.c-accept:hover  { background:var(--gold-br); }
.c-decline { font-family:var(--f-cond); font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.65rem 1.4rem; background:transparent; color:rgba(255,255,255,.44); border:1px solid rgba(255,255,255,.2); cursor:pointer; transition:border-color var(--t), color var(--t); }
.c-decline:hover { border-color:rgba(255,255,255,.5); color:rgba(255,255,255,.75); }

/* ── 21. Animations ───────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.fade-up   { animation:fadeUp .55s ease both; }
.d1 { animation-delay:.1s; }
.d2 { animation-delay:.22s; }
.d3 { animation-delay:.34s; }

/* ── 22. Responsive ───────────────────────────────────────────── */
@media (max-width:1100px) {
  .footer-inner  { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .values-grid   { grid-template-columns:1fr 1fr; }
  #main-nav a    { padding:.55rem .7rem; font-size:.72rem; }
  .hero-left     { padding:9rem 3rem 5rem 4rem; }
}

@media (max-width:860px) {
  /* Header – mobile */
  #main-nav    { display:none !important; }
  .hdr-phone   { display:none; }
  .burger      { display:flex; }

  /* Hero */
  .hero        { grid-template-columns:1fr; }
  .hero-right  { display:none; }
  .hero-left   { padding:8rem 1.8rem 4rem; }

  /* Layout */
  .split         { grid-template-columns:1fr; gap:3rem; }
  .contact-grid  { grid-template-columns:1fr; gap:3rem; }
  .card-grid     { grid-template-columns:1fr; gap:1rem; }
  .steps-grid    { grid-template-columns:1fr; }
  .step          { border-right:none; border-bottom:1px solid rgba(232,201,122,.14); }
  .step:last-child{ border-bottom:none; }
  .svc-detail    { grid-template-columns:1fr; }
  .sd-item       { border-right:none; }
  .sd-item:nth-last-child(-n+2) { border-bottom:1px solid var(--border); }
  .sd-item:last-child           { border-bottom:none; }
  .product-grid  { grid-template-columns:1fr 1fr; }
  .partner-meta  { flex-direction:column; gap:1rem; }
  .cta-band      { flex-direction:column; }
  .form-row      { grid-template-columns:1fr; }
  .page-hero-img { display:none; }
  .values-grid   { grid-template-columns:1fr 1fr; }

  /* Footer */
  .footer-inner  { grid-template-columns:1fr; gap:1.8rem; padding:0 1.5rem; }
  .footer-bottom { padding:1.5rem 1.5rem 0; }
  .container     { padding:0 1.5rem; }

  /* Cookie */
  #cookie-banner { flex-direction:column; align-items:flex-start; }
}

@media (max-width:540px) {
  .hero-left    { padding:7rem 1.3rem 3.5rem; }
  .hero h1      { font-size:2.3rem; }
  .hero-cta     { flex-direction:column; }
  section       { padding:3.5rem 0; }
  .product-grid { grid-template-columns:1fr; }
  .values-grid  { grid-template-columns:1fr; }
  .cookie-btns  { width:100%; }
  .c-accept,.c-decline { flex:1; text-align:center; }
}