/* =========================================================================
   GOLDSTUBE BRUCHMÜHLBACH — Design System
   Aesthetic: haute-joaillerie / editorial luxury
   Warm near-black · metallic gold · Cormorant Garamond + Jost
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Great+Vibes&family=Jost:wght@300;400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --ink:            #0c0b09;   /* page background (warm near-black) */
  --ink-2:          #131108;   /* deep panel */
  --surface:        #17140d;   /* card surface */
  --surface-2:      #1f1b12;   /* raised surface */
  --hairline:       rgba(212,175,55,.16);
  --hairline-soft:  rgba(233,224,207,.08);

  --gold:           #d4af37;
  --gold-bright:    #f1d98a;
  --gold-deep:      #a8801e;
  --gold-1:         #8a6a16;
  --gold-2:         #d4af37;
  --gold-3:         #f4e4a6;

  --cream:          #f4efe3;
  --parchment:      #e7ddc9;
  --muted:          #a99f88;
  --muted-2:        #9a9078;

  /* gradients */
  --grad-gold: linear-gradient(135deg,#8a6a16 0%,#d4af37 38%,#f6e9b0 55%,#c9a227 72%,#8a6a16 100%);
  --grad-gold-text: linear-gradient(180deg,#f7ead2 0%,#e8c766 45%,#c9a227 70%,#a8801e 100%);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(212,175,55,.18), transparent 70%);

  /* type */
  --serif: "Cormorant Garamond", "Georgia", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;

  /* metrics */
  --maxw: 1200px;
  --gap: clamp(1rem, 2vw, 1.75rem);
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 24px 60px -28px rgba(0,0,0,.75);
  --shadow-gold: 0 18px 50px -22px rgba(212,175,55,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--cream);
  background:var(--ink);
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* grain + vignette atmosphere */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(100% 60% at 100% 100%, rgba(138,106,22,.08), transparent 60%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app, .site{ position:relative; z-index:2; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.06; margin:0; letter-spacing:.01em; }
.display{
  font-size:clamp(2.9rem,7vw,6rem);
  font-weight:500;
  letter-spacing:-.01em;
}
.h2{ font-size:clamp(2.1rem,4.4vw,3.6rem); }
.h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.serif-it{ font-style:italic; }
p{ margin:0 0 1rem; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--parchment); font-weight:300; }

.gold-text{
  background:var(--grad-gold-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:500;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:""; width:26px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* ---------- Layout ---------- */
.container{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }
.section{ padding:clamp(4.5rem,9vw,8rem) 0; position:relative; }
.section--tight{ padding:clamp(3rem,6vw,5rem) 0; }
.center{ text-align:center; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--hairline),transparent); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  --pad-y:.95em; --pad-x:1.7em;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--sans); font-weight:500; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
  border-radius:var(--radius); border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn-gold{ color:#20180a; background:var(--grad-gold); box-shadow:var(--shadow-gold); }
.btn-gold::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transition:transform .7s var(--ease);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 22px 46px -18px rgba(212,175,55,.5); }
.btn-gold:hover::after{ transform:translateX(120%); }
.btn-outline{ color:var(--cream); border-color:var(--hairline); background:rgba(255,255,255,.015); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px); }
.btn-ghost{ color:var(--gold); padding-inline:0; letter-spacing:.14em; }
.btn-ghost::after{ content:"→"; transition:transform .3s var(--ease); }
.btn-ghost:hover::after{ transform:translateX(5px); }
.btn-block{ width:100%; }

/* ---------- Top announcement bar ---------- */
.topbar{
  position:relative; z-index:60;
  background:linear-gradient(90deg,#100e08,#1b160c,#100e08);
  border-bottom:1px solid var(--hairline);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment);
}
.topbar .container{ display:flex; align-items:center; justify-content:center; gap:2.2rem; min-height:40px; flex-wrap:wrap; padding-block:.4rem; }
.topbar span{ display:inline-flex; align-items:center; gap:.55em; }
.topbar span svg{ width:14px; height:14px; color:var(--gold); }
.topbar .tb-hide-sm{ display:none; }

/* ---------- Header / nav ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(12,11,9,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.header.scrolled{ background:rgba(10,9,7,.94); border-bottom-color:var(--hairline); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:78px; }
.nav-links{ display:none; align-items:center; gap:2rem; }
.nav-links a{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--parchment);
  position:relative; padding:.4rem 0; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--gold-bright); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:1.2rem; }
.nav-phone{ display:none; align-items:center; gap:.55em; font-size:.9rem; letter-spacing:.04em; color:var(--cream); }
.nav-phone svg{ width:16px; height:16px; color:var(--gold); }
.nav-phone:hover{ color:var(--gold-bright); }

/* logo (wordmark) */
.logo{ display:inline-flex; align-items:center; gap:.7rem; }
.logo .mark{ width:38px; height:38px; flex:none; }
.logo .wm{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.logo .wm b{
  font-family:var(--script); font-weight:400; font-size:2.1rem; letter-spacing:.01em; line-height:.82;
  background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0 .05em;
}
.logo .wm small{ font-family:var(--sans); font-weight:400; font-size:.55rem; letter-spacing:.34em; text-transform:uppercase; color:var(--parchment); margin-top:-.05em; padding:0 0 .25em; border-bottom:1px solid var(--hairline); align-self:stretch; text-align:center; }

/* burger */
.burger{ display:block; width:44px; height:44px; border:1px solid var(--hairline); border-radius:var(--radius); background:transparent; position:relative; }
.burger span{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--cream); transition:.3s var(--ease); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:45; background:rgba(8,7,5,.98);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:2rem;
  transform:translateY(-100%); transition:transform .5s var(--ease), visibility 0s linear .5s; pointer-events:none; visibility:hidden;
}
.mobile-nav.open{ transform:translateY(0); pointer-events:auto; visibility:visible; transition:transform .5s var(--ease), visibility 0s; }
.mobile-nav a{ font-family:var(--serif); font-size:2rem; color:var(--cream); padding:.5rem 0; border-bottom:1px solid var(--hairline-soft); }
.mobile-nav a:hover{ color:var(--gold-bright); }
.mobile-nav .m-actions{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.mobile-nav .m-actions .btn{ width:100%; font-size:.76rem; letter-spacing:.08em; --pad-x:1rem; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(4rem,9vw,7.5rem) 0 clamp(3.5rem,7vw,6rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:var(--glow); pointer-events:none; }
.hero-inner{ position:relative; display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero-copy{ max-width:640px; }
.hero h1{ margin:.2em 0 .5em; }
.hero .buy-line{
  font-family:var(--sans); font-weight:300; font-size:clamp(.92rem,1.3vw,1.05rem);
  color:var(--muted); line-height:1.9; margin-bottom:2rem; max-width:36ch;
}
.hero .buy-line b{ color:var(--parchment); font-weight:400; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero-trust{ margin-top:2.6rem; display:flex; gap:1rem 1.4rem; flex-wrap:wrap; }
.hero-trust li{ display:flex; align-items:center; gap:.6em; font-size:.82rem; letter-spacing:.06em; color:var(--parchment); }
.hero-trust svg{ width:18px; height:18px; color:var(--gold); flex:none; }

/* hero visual — gilded emblem panel */
.hero-visual{ position:relative; max-width:440px; margin-inline:auto; aspect-ratio:16/12; border-radius:var(--radius-lg); overflow:hidden;
  background:
    radial-gradient(120% 100% at 30% 10%, rgba(212,175,55,.22), transparent 55%),
    linear-gradient(160deg,#1c1810,#0e0c08 70%);
  border:1px solid var(--hairline); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.hero-visual .emblem{ width:78%; height:auto; opacity:.96; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.hero-visual .shine{ position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(246,233,176,.10) 50%,transparent 60%); }
.hero-badge{
  position:absolute; bottom:1.4rem; left:1.4rem; right:1.4rem;
  display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem;
  background:rgba(10,9,6,.72); backdrop-filter:blur(6px);
  border:1px solid var(--hairline); border-radius:var(--radius);
}
.hero-badge .price{ font-family:var(--serif); font-size:1.7rem; color:var(--gold-bright); line-height:1; }
.hero-badge small{ display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ---------- Section head ---------- */
.sec-head{ max-width:640px; }
.sec-head.center{ margin-inline:auto; }
.sec-head p{ color:var(--muted); margin-top:.9rem; }

/* ---------- Services grid ---------- */
.services{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; }
.svc{
  background:var(--surface); padding:clamp(1.6rem,2.4vw,2.4rem); position:relative;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.svc::before{ content:""; position:absolute; inset:0; background:var(--glow); opacity:0; transition:opacity .4s; pointer-events:none; }
.svc:hover{ background:var(--surface-2); }
.svc:hover::before{ opacity:.5; }
.svc-icon{ width:52px; height:52px; color:var(--gold); margin-bottom:1.3rem; }
.svc h3{ font-size:1.5rem; margin-bottom:.4rem; }
.svc p{ color:var(--muted); font-size:.92rem; margin:0; }
.svc .idx{ position:absolute; top:1.4rem; right:1.6rem; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--gold-deep); opacity:.6; }

/* ---------- Trust strip ---------- */
.trust-strip{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.trust-strip .ti{ text-align:center; padding:1.5rem 1rem; }
.trust-strip .ti svg{ width:34px; height:34px; color:var(--gold); margin:0 auto 1rem; }
.trust-strip .ti .ti-title{ font-family:var(--serif); font-weight:500; line-height:1.1; font-size:1.35rem; margin:0 0 .35rem; }
.trust-strip .ti p{ font-size:.85rem; color:var(--muted); margin:0; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split-copy{ order:-1; } /* mobile: heading & text lead, decorative panel follows */
.split-media{
  position:relative; aspect-ratio:16/11; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--hairline); box-shadow:var(--shadow);
  background:radial-gradient(120% 100% at 70% 20%, rgba(212,175,55,.16), transparent 55%), linear-gradient(160deg,#1b1710,#0d0b07 72%);
  display:flex; align-items:center; justify-content:center;
}
.split-media .art{ width:62%; color:var(--gold); opacity:.9; filter:drop-shadow(0 16px 30px rgba(0,0,0,.5)); }
.split-media .tag{ position:absolute; top:1.2rem; left:1.2rem; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); padding:.4rem .8rem; border:1px solid var(--hairline); border-radius:100px; background:rgba(10,9,6,.5); }
.split-copy .eyebrow{ margin-bottom:1rem; }
.split-copy h2{ margin-bottom:1.2rem; }
.split-copy p{ color:var(--parchment); }
.split-copy .btn{ margin-top:1rem; }
.check-list{ margin:1.4rem 0; display:grid; gap:.7rem; }
.check-list li{ display:flex; gap:.7em; align-items:flex-start; color:var(--parchment); font-size:.95rem; }
.check-list svg{ width:18px; height:18px; color:var(--gold); flex:none; margin-top:.25em; }

/* ---------- "Was wir ankaufen" tag cloud ---------- */
.buy-panel{ background:var(--ink-2); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3.5rem); box-shadow:var(--shadow); }
.tags{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.tag-pill{
  font-size:.86rem; letter-spacing:.02em; color:var(--parchment);
  padding:.55rem 1.1rem; border:1px solid var(--hairline); border-radius:100px;
  background:rgba(255,255,255,.015); transition:.35s var(--ease);
}
.tag-pill:hover{ border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px); }

/* ---------- Process ---------- */
.steps{ display:grid; grid-template-columns:1fr; gap:var(--gap); counter-reset:step; }
.step{ position:relative; padding:2.2rem 1.6rem; border:1px solid var(--hairline); border-radius:var(--radius-lg); background:var(--surface); }
.step .num{ font-family:var(--serif); font-size:2.6rem; line-height:1; color:transparent; background:var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; margin-bottom:.8rem; display:block; }
.step h3{ font-size:1.5rem; margin-bottom:.5rem; }
.step p{ color:var(--muted); font-size:.9rem; margin:0; }
.step:not(:last-child)::after{ content:"↓"; position:absolute; bottom:-1.3rem; right:50%; transform:translateX(50%); color:var(--gold-deep); z-index:2; }

/* ---------- Contact / CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center; padding:clamp(4rem,8vw,7rem) 0;
  background:radial-gradient(80% 120% at 50% 0%, rgba(212,175,55,.14), transparent 60%), var(--ink-2);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.cta-band h2{ max-width:18ch; margin:0 auto 1.2rem; }
.cta-band .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

/* contact block on home */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem); align-items:stretch; }
.info-card{ border:1px solid var(--hairline); border-radius:var(--radius-lg); background:var(--surface); padding:clamp(1.8rem,3vw,2.6rem); }
.info-row{ display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--hairline-soft); }
.info-row:last-child{ border-bottom:0; padding-bottom:0; }
.info-row:first-child{ padding-top:0; }
.info-row .ic{ width:40px; height:40px; flex:none; border:1px solid var(--hairline); border-radius:50%; display:grid; place-items:center; color:var(--gold); }
.info-row .ic svg{ width:18px; height:18px; }
.info-row .io-label{ font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:.2rem 0 .35rem; }
.info-row p, .info-row a{ margin:0; color:var(--cream); font-size:1.02rem; }
.info-row a:hover{ color:var(--gold-bright); }

/* ---------- Forms ---------- */
.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--cream);
  background:rgba(255,255,255,.02); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:.9rem 1rem; transition:border-color .3s, background .3s;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:rgba(212,175,55,.04); }
.field.row2{ grid-template-columns:1fr; gap:1.1rem; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.82rem; color:var(--muted); line-height:1.5; }
.consent input{ margin-top:.25rem; accent-color:var(--gold); width:16px; height:16px; flex:none; }
.consent a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.form-note{ font-size:.78rem; color:var(--muted-2); }
.form-status{ font-size:.9rem; padding:.4rem 0; min-height:1.2rem; }
.form-status.ok{ color:var(--gold-bright); }

/* ---------- Map ---------- */
.map-wrap{ position:relative; border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; min-height:360px; height:100%; background:linear-gradient(160deg,#16130c,#0c0b07); }
.map-wrap iframe{ width:100%; height:100%; min-height:360px; border:0; filter:grayscale(.2) contrast(1.08) brightness(.92); display:block; }
.map-link{ position:absolute; top:.8rem; right:.8rem; z-index:2; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); background:rgba(10,9,6,.8); backdrop-filter:blur(6px); border:1px solid var(--hairline); border-radius:100px; padding:.45rem .9rem; transition:color .3s var(--ease), border-color .3s var(--ease); }
.map-link:hover{ color:var(--gold-bright); border-color:var(--gold); }

/* ---------- Footer ---------- */
.footer{ background:var(--ink-2); border-top:1px solid var(--hairline); padding:clamp(3.5rem,6vw,5rem) 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,4rem); }
.footer .logo{ margin-bottom:1.3rem; }
.footer p{ color:var(--muted); font-size:.92rem; max-width:34ch; }
.footer h6{ font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 1.1rem; }
.footer-links li{ margin-bottom:.7rem; }
.footer-links a{ color:var(--parchment); font-size:.92rem; transition:color .3s; }
.footer-links a:hover{ color:var(--gold-bright); }
.footer-contact li{ display:flex; gap:.6em; align-items:center; color:var(--parchment); font-size:.92rem; margin-bottom:.7rem; }
.footer-contact svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.footer-bottom{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem; border-top:1px solid var(--hairline-soft);
  display:flex; flex-direction:column; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--muted-2); letter-spacing:.04em; }
.footer-bottom a{ color:var(--muted); } .footer-bottom a:hover{ color:var(--gold); }

/* ---------- Cookie banner ---------- */
.cookie{
  position:fixed; z-index:80; left:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  max-width:520px; margin-left:auto;
  background:rgba(14,12,8,.97); backdrop-filter:blur(10px);
  border:1px solid var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:1.5rem 1.6rem; transform:translateY(140%); transition:transform .6s var(--ease), visibility 0s linear .6s; visibility:hidden;
}
.cookie.show{ transform:translateY(0); visibility:visible; transition:transform .6s var(--ease), visibility 0s; }
.cookie h4{ font-size:1.35rem; margin-bottom:.4rem; }
.cookie p{ font-size:.84rem; color:var(--muted); margin-bottom:1.1rem; }
.cookie p a{ color:var(--gold); text-decoration:underline; }
.cookie-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cookie-actions .btn{ --pad-y:.7em; --pad-x:1.2em; font-size:.72rem; }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{ position:relative; padding:clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem); text-align:center; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:var(--glow); }
.page-hero .crumbs{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; position:relative; }
.page-hero .crumbs a:hover{ color:var(--gold); }
.page-hero h1{ position:relative; }

/* ---------- Legal / long-form ---------- */
.legal{ max-width:800px; margin-inline:auto; }
.legal h2{ font-size:1.7rem; margin:2.5rem 0 1rem; color:var(--gold-bright); }
.legal h3{ font-size:1.25rem; margin:1.8rem 0 .6rem; }
.legal p, .legal li{ color:var(--parchment); font-size:.98rem; line-height:1.8; }
.legal ul{ list-style:disc; padding-left:1.3rem; margin:0 0 1.2rem; }
.legal li{ margin-bottom:.5rem; }
.legal a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.legal strong{ color:var(--cream); font-weight:500; }
.legal .lead-box{ border-left:2px solid var(--gold); padding:1rem 0 1rem 1.4rem; margin:0 0 2rem; color:var(--parchment); }
.legal .updated{ font-size:.8rem; color:var(--muted-2); letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Reveal animation ---------- */
/* Hidden state only applies when JS is available (html.js), so no-JS users
   always see the content. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive — mobile-first (min-width, progressive enhancement) ----------
   Base styles above target mobile. These breakpoints enhance upward. */

/* ≥ 560px — large phones / small tablets */
@media (min-width:560px){
  .services{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .field.row2{ grid-template-columns:1fr 1fr; }
  .hero-trust{ gap:2rem; }
  .footer-bottom{ flex-direction:row; }
}

/* ≥ 820px — tablets: full nav + side-by-side sections */
@media (min-width:820px){
  .nav-links{ display:flex; }
  .nav-phone{ display:inline-flex; }
  .burger{ display:none; }
  .topbar .tb-hide-sm{ display:inline-flex; }
  .split{ grid-template-columns:1fr 1fr; }
  .split-copy{ order:0; }
  .split.rev .split-media{ order:2; }
  .split-media{ aspect-ratio:5/4; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .step:not(:last-child)::after{ content:"→"; top:2.4rem; bottom:auto; right:-1.1rem; transform:none; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
}

/* ≥ 1000px — desktop: widest multi-column layouts */
@media (min-width:1000px){
  .hero-inner{ grid-template-columns:1.15fr .85fr; }
  .hero-visual{ max-width:none; margin-inline:0; aspect-ratio:4/5; }
  .services{ grid-template-columns:repeat(3,1fr); }
  .trust-strip{ grid-template-columns:repeat(4,1fr); }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
}