/* ==========================================================================
   Services / Pricing — "Dark Editorial Hybrid" (LIGHT side).
   Scoped: loaded only on the Services template. Global styles untouched.
   Tokens per approved design direction; no blue/purple/gradient-mesh.
   ========================================================================== */
:root{
  --ink:#0b0b0d; --ink-soft:#151418; --ink-line:rgba(255,255,255,.09); --cream:#f2f0ec;
  --paper:#f6f4ef; --paper-soft:#eeebe2; --paper-line:rgba(17,17,17,.08); --charcoal:#16151a;
  --red:#b5121b; --red-bright:#d4222c; --gold:#c9a227;
  --f-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-label:'Space Grotesk', system-ui, sans-serif;
}

/* Page canvas → warm paper (this file only loads on the Services page) */
body{ background:#f6f4ef !important; color:var(--charcoal); font-family:var(--f-body); }
body::before{ display:none !important; } /* neutralise any global radial wash */

.services-hero, .services-hero .hero-wrap{ background:transparent !important; }
main .section{ padding:clamp(64px,9vw,104px) 0; }

/* ---------- shared bits ---------- */
.svc-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-label); font-weight:600; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin:0 0 14px;
}
.svc-eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); border-radius:2px; }

.svc-hero h1, .svc-panel h2, .price-top h2, .cta h2{
  font-family:var(--f-serif); font-weight:500; letter-spacing:-.01em; color:var(--charcoal);
}
.svc-hero h1 em, .svc-panel h2 em{ font-style:italic; font-weight:500; }

/* ---------- hero ---------- */
.svc-hero .hero-wrap{ border:0; box-shadow:none; border-radius:0; padding:0; }
.svc-hero .container{ padding-top:clamp(56px,8vw,88px); padding-bottom:clamp(40px,6vw,64px); }
.svc-hero h1{ font-size:clamp(38px,6vw,76px); line-height:1.02; max-width:17ch; margin:0; }
.svc-hero .sub{ color:#514e57; font-size:clamp(16px,1.6vw,19px); line-height:1.55; max-width:58ch; margin-top:18px; }
.svc-hero .lead-note{ color:#736f78; font-weight:500; margin-top:10px; }
.svc-hero .hero-cta{ margin-top:26px; }

/* ---------- buttons → pill ---------- */
.btn{ border-radius:2px !important; font-family:var(--f-label); font-weight:600; letter-spacing:.01em; box-shadow:none; }
.btn.primary{ background:var(--red); border:1px solid var(--red); color:#fff; transition:.3s; }
.btn.primary:hover{ background:var(--red-bright); border-color:var(--red-bright); transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(181,18,27,.5); }
.btn:not(.primary){ background:transparent; border:1px solid rgba(17,17,17,.28); color:var(--charcoal); }
.btn:not(.primary):hover{ border-color:var(--charcoal); background:rgba(17,17,17,.04); transform:translateY(-1px); }

/* ---------- pricing cards ---------- */
.pricing{ gap:20px; }
.price-card{
  background:var(--paper-soft); border:1px solid var(--paper-line); border-radius:2px;
  box-shadow:none; overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
  display:flex; flex-direction:column;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(17,17,17,.22); }
.price-top{ background:transparent !important; color:var(--charcoal); padding:26px 26px 0; }
.price-top h2{ font-size:23px; margin:0; letter-spacing:-.01em; }
.price-row{ margin-top:14px; }
.price{ font-family:var(--f-label); font-weight:700; font-size:32px; letter-spacing:-.01em; color:var(--charcoal); }
.price.is-quote{ font-size:20px; font-weight:600; line-height:1.25; }
.price-body{ display:flex; flex-direction:column; flex:1; padding:20px 26px 26px; }
.desc{ color:#57545d; font-weight:500; line-height:1.55; margin:0 0 16px; }
.features{ display:grid; gap:11px; margin:2px 0 0; }
.features li{ color:#3a383f; font-weight:500; font-size:15px; align-items:center; }
.ic{ width:20px; height:20px; border-radius:50%; background:rgba(181,18,27,.12); border:0; flex:0 0 20px; }
/* Same saturated red on every card. -webkit-text-fill-color defeats any inherited
   gradient text-fill that was washing the first card's checkmarks to pink. */
.ic.ok::before{ content:"✓"; color:var(--red); -webkit-text-fill-color:var(--red); font-weight:800; font-size:12px; }
.divline{ background:var(--paper-line); margin-top:auto; }
.price-actions{ margin-top:16px; }
.btn.full{ border-radius:2px !important; }

/* Featured card — dark charcoal, cream text, red badge */
.price-card.is-recommended{
  position:relative; background:var(--charcoal); border-color:transparent; color:var(--cream);
  box-shadow:0 34px 70px -34px rgba(181,18,27,.4);
}
.price-card.is-recommended .price-top, .price-card.is-recommended .price-top h2,
.price-card.is-recommended .price{ color:var(--cream); }
.price-card.is-recommended .desc{ color:rgba(242,240,236,.68); }
.price-card.is-recommended .features li{ color:rgba(242,240,236,.9); }
.price-card.is-recommended .ic{ background:rgba(212,34,44,.20); }
.price-card.is-recommended .ic.ok::before{ color:var(--red-bright); -webkit-text-fill-color:var(--red-bright); }
.price-card.is-recommended .divline{ background:var(--ink-line); }
/* In-flow pill ABOVE the heading (not an absolute corner overlay) so it never
   collides with longer EN/DE titles like "Professional Website" / "Professionelle Website". */
.svc-badge{
  align-self:flex-start; margin:20px 26px 0;
  font-family:var(--f-label); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--red); padding:6px 12px; border-radius:2px;
}
.price-card.is-recommended .price-top{ padding-top:12px; }

/* This page shows all features (no toggle), including on mobile */
@media (max-width:980px){ .pricing .price-card .features li{ display:flex; } }

/* ---------- specialized panels ---------- */
.svc-panel{
  margin-top:0; padding:clamp(24px,3vw,40px);
  background:var(--paper-soft); border:1px solid var(--paper-line);
  border-radius:2px; box-shadow:none;
}
.svc-panel-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:start; }
.svc-panel h2{ font-size:clamp(26px,3vw,38px); margin:0; line-height:1.08; }
.svc-panel .desc{ margin:14px 0 0; color:#57545d; }
.svc-price-line{ margin:20px 0 0; font-family:var(--f-label); font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--charcoal); }
.svc-price-line small{ font-size:14px; font-weight:600; color:#736f78; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:9px; margin:2px 0 0; padding:0; list-style:none; }
.svc-tags .tag{
  font-family:var(--f-label); font-weight:500; font-size:12.5px; color:#403d45;
  background:rgba(17,17,17,.03); border:1px solid var(--paper-line); border-radius:2px; padding:8px 14px;
}
.svc-note{ margin:16px 0 0; color:#736f78; font-size:13px; line-height:1.55; }
.svc-actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.svc-panel .features{ margin-top:2px; }
.svc-panel .features li{ font-size:15px; }
/* real-estate capability list → red-checkmark items in two columns (was a flat pill cloud) */
.svc-caps{ grid-template-columns:1fr 1fr; gap:11px 26px; margin-top:4px; }
@media (max-width:560px){ .svc-caps{ grid-template-columns:1fr; } }

/* ---------- final CTA ---------- */
.cta{
  background:var(--charcoal) !important; border:0 !important; border-radius:2px;
  box-shadow:0 40px 80px -40px rgba(181,18,27,.4);
  padding:clamp(28px,4vw,48px) !important; color:var(--cream);
}
.cta h2{ color:var(--cream); font-size:clamp(28px,3.4vw,44px); }
.cta .meta{ color:rgba(242,240,236,.66); margin-top:8px; }
.svc-cta-copy h2{ margin:0 0 4px; }

/* ---------- disclaimer ---------- */
.svc-disclaimer{
  margin-top:26px; padding-top:16px; border-top:1px solid var(--paper-line);
  color:#8a8790; font-size:12.5px; line-height:1.65; max-width:86ch;
}

/* ---------- fade-up reveal (JS toggles .is-in) ---------- */
/* Hidden start state gated on html.js so no-JS / JS-failure never hides content. */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-in{ opacity:1 !important; transform:none !important; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .svc-panel-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .price-card, .btn{ transition:none !important; }
}