/* ============================================================
   SKOGSRÄV HOME — v5 — Direct 1:1 from Lovable Hero.tsx + Services.tsx
   Source files (Oskarspolaroaks/skogsrav GitHub repo):
     src/index.css        — design tokens
     src/tailwind.config.ts — font-sizes
     src/components/Hero.tsx — hero structure & styles
     src/components/Services.tsx — services cards
   No approximations — all values translated from Tailwind classes literally.
   ============================================================ */

/* === LOVABLE TOKENS (from src/index.css :root) === */
.sr-home {
  --bg: hsl(220 15% 97%);
  --fg: hsl(220 30% 10%);
  --card: hsl(0 0% 100%);
  --card-fg: hsl(220 30% 10%);
  --primary: hsl(220 45% 15%);
  --secondary: hsl(220 12% 92%);
  --muted: hsl(220 10% 88%);
  --muted-fg: hsl(220 12% 45%);
  --accent: hsl(24 95% 53%);
  --border: hsl(220 12% 85%);
  --input: hsl(220 12% 85%);
  --ring: hsl(24 95% 53%);
  --radius: 0.625rem;
  --navy-deep: hsl(220 50% 10%);
  --navy-medium: hsl(220 45% 18%);
  --navy-light: hsl(220 40% 25%);
  --cream: hsl(40 30% 96%);
  --orange: hsl(24 95% 53%);
  --orange-light: hsl(28 90% 60%);
  --orange-dark: hsl(20 95% 45%);
  --orange-glow: hsl(24 100% 55%);

  /* gradients */
  --gradient-orange: linear-gradient(135deg, hsl(28 90% 55%) 0%, hsl(20 95% 50%) 100%);
  --gradient-orange-text: linear-gradient(135deg, hsl(28 90% 58%) 0%, hsl(24 95% 53%) 50%, hsl(20 95% 48%) 100%);

  /* shadows */
  --shadow-sm: 0 1px 4px 0 hsl(220 30% 10% / 0.06);
  --shadow-md: 0 6px 20px -4px hsl(220 30% 10% / 0.12);
  --shadow-lg: 0 20px 50px -12px hsl(220 30% 10% / 0.18);
  --shadow-card: 0 6px 16px -4px hsl(220 30% 10% / 0.08), 0 2px 6px -2px hsl(220 30% 10% / 0.04);
  --shadow-glow: 0 0 40px -8px hsl(24 95% 53% / 0.4);
  --shadow-orange: 0 8px 30px -6px hsl(24 95% 53% / 0.35);

  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  color: var(--fg);
  background: var(--bg);
  width: 100%;
  line-height: 1.625;
}
.sr-home, .sr-home * { box-sizing: border-box; }

/* Full-bleed: kill Kadence container constraints on Home (page-id-4) */
body.page-id-4 .entry-content,
body.page-id-4 .entry-content-wrap,
body.page-id-4 .content-container,
body.page-id-4 .content-wrap,
body.page-id-4 .site-container,
body.page-id-4 main.site-main,
body.page-id-4 article.entry,
body.page-id-4 .single-content {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.page-id-4 .entry-content > * { margin: 0 !important; }
body.page-id-4 .entry-content .sr-home { margin: 0 !important; max-width: 100% !important; }

/* Tailwind container: center, padding 2rem, max 1400px */
.sr-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 1400px;
}
@media (min-width: 1024px) { .sr-container { padding-left: 2rem; padding-right: 2rem; } }

/* === TYPOGRAPHY UTILITIES (from src/index.css @layer utilities) === */
.sr-home h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.sr-home h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.10; }
.sr-home h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.25; }
.sr-home h4 { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; }

/* heading-hero: text-5xl md:text-7xl lg:text-[6.5rem] (48 / 72 / 104px) */
.sr-hero-h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 48px;       /* text-5xl base */
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.10)); /* drop-shadow-lg */
}
@media (min-width: 768px) { .sr-hero-h1 { font-size: 72px; } }     /* md:text-7xl */
@media (min-width: 1024px) { .sr-hero-h1 { font-size: 6.5rem; } }  /* lg:text-[6.5rem] = 104px */

/* heading-section: text-3xl md:text-4xl lg:text-5xl (30 / 36 / 48px) */
.sr-h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
@media (min-width: 768px) { .sr-h2 { font-size: 36px; } }
@media (min-width: 1024px) { .sr-h2 { font-size: 48px; } }
.sr-h2-light { color: #ffffff; }
.sr-h2-center { text-align: center; }
.sr-dot { color: var(--orange); }

/* heading-card: text-xl lg:text-2xl (20 / 24px) font-semibold */
.sr-svc-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 12px;     /* mb-3 */
  color: var(--fg);
  transition: color 0.3s ease;
}
@media (min-width: 1024px) { .sr-svc-title { font-size: 24px; } }

/* section-label: inline-flex items-center gap-3 text-sm font-bold tracking-widest uppercase text-orange */
.sr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 16px;     /* mb-4 default */
}
/* w-12 h-0.5 bg-gradient-to-r from-orange to-orange-light = 48x2px gradient */
.sr-eyebrow-dash {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: linear-gradient(to right, hsl(24 95% 53%), hsl(28 90% 60%));
  flex-shrink: 0;
}
.sr-eyebrow > .sr-eyebrow-dash:not(:first-of-type) { display: none !important; }

/* body-large: text-lg md:text-xl leading-relaxed (18 / 20px, 1.625 lh) */
.sr-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.625;
  color: hsl(0 0% 100% / 0.90);     /* text-white/90 */
  max-width: 42rem;                  /* max-w-2xl = 672px */
  margin: 0 0 48px;                  /* mb-12 */
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07));    /* drop-shadow-md */
}
@media (min-width: 768px) { .sr-hero-sub { font-size: 20px; } }
.sr-hero-tag-orange {
  color: var(--orange);
  font-weight: 700;
}

/* ============ BUTTONS — variant="hero" size="xl" =================
   .button base: inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium
   variant="hero": bg-orange text-white font-bold hover:bg-orange-light shadow-orange
   variant="hero-outline": border-2 border-white/40 text-white hover:bg-white/10 hover:border-white/60
   size="xl": h-12 rounded-md px-10 text-base */
.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 8px;     /* rounded-md = 8px */
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;        /* text-base */
  font-weight: 700;       /* font-bold */
  height: 48px;           /* h-12 */
  padding: 0 40px;        /* px-10 */
  transition: background 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  border: 0;
  line-height: 1;
}
.sr-btn-primary {
  background: var(--orange);
  color: #ffffff !important;
  box-shadow: var(--shadow-orange);
}
.sr-btn-primary:hover {
  background: var(--orange-light);
  color: #ffffff !important;
}
.sr-btn-ghost {
  background: transparent;
  color: #ffffff !important;
  border: 2px solid hsl(0 0% 100% / 0.40);
}
.sr-btn-ghost:hover {
  border-color: hsl(0 0% 100% / 0.60);
  background: hsl(0 0% 100% / 0.10);
}
.sr-btn-block { width: 100%; }

/* ============ HERO ============
   <section className="relative min-h-screen flex items-center overflow-hidden">
   Background image w-full h-full object-cover scale-105
   4-layer overlays: gradient + vignette + backdrop-blur + bottom accent
*/
.sr-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
  color: #ffffff;
}
.sr-hero-bg {
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2026/04/hero-bmw-lovable.jpg') center / cover no-repeat;
  transform: scale(1.05);
  z-index: 1;
}
/* Layer 1: premium left-to-right gradient */
.sr-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    hsl(220 50% 8% / 0.88) 0%,
    hsl(220 50% 8% / 0.82) 25%,
    hsl(220 50% 8% / 0.55) 50%,
    hsl(220 50% 8% / 0.25) 70%,
    transparent 100%);
  z-index: 2;
}
/* Layer 2: top/bottom vignette (from-navy-deep/50 via-transparent to-navy-deep/60) */
.sr-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    hsl(220 50% 10% / 0.50) 0%,
    transparent 50%,
    hsl(220 50% 10% / 0.60) 100%);
  z-index: 3;
  pointer-events: none;
}
/* Layer 3: backdrop blur on left 55% with feathered mask */
.sr-hero-inner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}
/* Layer 4: bottom orange accent line */
.sr-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(to right, var(--orange), var(--orange-light), transparent);
  opacity: 0.7;
  z-index: 5;
}

/* container mx-auto px-6 lg:px-8 + max-w-5xl + relative z-10 + pt-32 pb-20 */
.sr-hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 0 auto;
  max-width: 1400px;
  padding: 128px 24px 80px;     /* pt-32 pb-20, px-6 */
}
@media (min-width: 1024px) { .sr-hero-inner { padding: 128px 32px 80px; } }

.sr-hero-content {
  max-width: 64rem;     /* max-w-5xl */
  position: relative;
  z-index: 1;
}

/* Hero eyebrow: inside hero, white default not orange (mb-8 = 32px) */
.sr-hero-inner .sr-eyebrow { margin: 0 0 32px; }

/* H1 spacing — mb-8 = 32px */
.sr-hero-inner .sr-hero-h1 { margin: 0 0 32px; }

.sr-hero-h1-line {
  display: inline-block;
}
.sr-hero-h1-accent {
  display: inline-block;
  background-image: linear-gradient(135deg, hsl(28 90% 58%) 0%, hsl(24 95% 53%) 50%, hsl(20 95% 48%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: none;
}

/* CTAs: flex flex-col sm:flex-row gap-4 = 16px gap */
.sr-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) { .sr-hero-ctas { flex-direction: row; } }

/* === STATS (Trust Indicators) =====================================
   In Lovable, stats are INSIDE Hero with mt-24 pt-10 border-t border-white/20
   In our HTML, stats live in their own .sr-stats section RIGHT BELOW hero with same navy bg.
   We make them visually look like one block. */
.sr-stats {
  background: var(--navy-deep);
  position: relative;
  margin: 0;
  padding: 0 24px 0;
}
@media (min-width: 1024px) { .sr-stats { padding: 0 32px 0; } }

.sr-stats-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 96px;     /* bottom of hero block */
}
.sr-stats-inner > .sr-stats-grid {
  margin: 0 auto 0 0;
  max-width: 64rem;     /* match hero content max-w-5xl */
  padding-top: 40px;     /* pt-10 */
  border-top: 1px solid hsl(0 0% 100% / 0.20);     /* border-t border-white/20 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (min-width: 768px) {
  .sr-stats-inner > .sr-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

/* Stat block: text-center md:text-left + group cursor-default */
.sr-stat {
  text-align: center;
  cursor: default;
  transition: transform 0.2s ease;
}
@media (min-width: 768px) { .sr-stat { text-align: left; } }
.sr-stat:hover { transform: scale(1.05); }     /* whileHover scale 1.05 */

/* Stat number: text-4xl md:text-5xl font-serif font-bold text-white */
.sr-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;     /* text-4xl */
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;     /* mb-1 */
  color: #ffffff;     /* TEXT-WHITE default, NOT orange */
  transition: color 0.3s, text-shadow 0.3s;
}
@media (min-width: 768px) { .sr-stat-num { font-size: 48px; } }
.sr-stat:hover .sr-stat-num {
  color: var(--orange);
  text-shadow: 0 0 20px hsl(24 95% 53% / 0.5), 0 0 40px hsl(24 95% 53% / 0.3);
}
.sr-stat-num-word {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
}
@media (min-width: 768px) { .sr-stat-num-word { font-size: 44px; } }
.sr-plus { color: inherit; }     /* white default, hover orange via parent */

/* Stat label: text-sm font-bold text-white/50 tracking-wider uppercase */
.sr-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(0 0% 100% / 0.50);
  transition: color 0.3s ease;
}
.sr-stat:hover .sr-stat-label { color: hsl(0 0% 100% / 0.70); }

/* Scroll indicator: w-6 h-10 (24x40) rounded-full border-2 border-white/30, navy capsule + orange dot */
.sr-scroll-indicator {
  position: absolute;
  bottom: 32px;     /* bottom-8 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.sr-scroll-mouse {
  width: 24px;
  height: 40px;
  border-radius: 9999px;
  border: 2px solid hsl(0 0% 100% / 0.30);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0;
}
.sr-scroll-dot {
  width: 6px;
  height: 12px;
  border-radius: 9999px;
  background: var(--orange);
  animation: sr-scroll-bob 2s ease-in-out infinite;
}
@keyframes sr-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* === FEATURES (4 trust pills) ========================================
   Below hero block; same navy bg continuous */
.sr-features {
  background: var(--navy-deep);
  padding: 0 24px 96px;
}
@media (min-width: 1024px) { .sr-features { padding: 0 32px 96px; } }
.sr-features-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) { .sr-features-inner { grid-template-columns: repeat(4, 1fr); } }

.sr-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid hsl(0 0% 100% / 0.15);
  border-radius: 10px;
  background: hsl(220 50% 12% / 0.5);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.sr-chip-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: hsl(24 95% 53% / 0.15);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-chip-icon svg { width: 16px; height: 16px; }

/* === SERVICES (Vehicle Repossession — 1:1 from Services.tsx) =====
   <section className="py-24 lg:py-32 bg-background">
     container mx-auto px-6 lg:px-8
     header: flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16
     grid: md:grid-cols-2 lg:grid-cols-4 gap-6
     card: group relative p-8 bg-card rounded-xl border-2 border-border
           hover:border-orange/50 hover:shadow-lg
           whileHover y:-8 duration 0.3 ease-out
     number: absolute top-4 right-4 text-5xl font-bold text-muted/30 font-serif
     icon box: w-14 h-14 rounded-xl bg-orange/10 group-hover:bg-orange/20
               whileHover scale 1.1 rotate 5
     icon svg: w-7 h-7 text-orange
     title: heading-card text-foreground mb-3 group-hover:text-orange
     desc: text-muted-foreground leading-relaxed
*/
.sr-services {
  padding: 96px 24px;
  background: var(--bg);
}
@media (min-width: 1024px) { .sr-services { padding: 128px 32px; } }
.sr-services-inner { max-width: 1400px; margin: 0 auto; }

.sr-services-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 64px;     /* mb-16 */
}
@media (min-width: 1024px) {
  .sr-services-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.sr-services-head-left { max-width: 42rem; }
.sr-services-head-left .sr-eyebrow { margin: 0 0 16px; }     /* mb-4 */
.sr-services-head-left .sr-h2 { margin: 0; }

.sr-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;     /* text-lg */
  font-weight: 700;     /* font-bold */
  color: var(--fg);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sr-link-arrow:hover { color: var(--orange); }
.sr-link-arrow::after { content: none !important; }     /* HTML already has &rarr; */

.sr-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .sr-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sr-services-grid { grid-template-columns: repeat(4, 1fr); } }

.sr-svc-card {
  position: relative;
  padding: 32px;     /* p-8 */
  background: var(--card);
  border-radius: 12px;     /* rounded-xl */
  border: 2px solid var(--border);     /* border-2 border-border */
  transition: all 0.3s ease;
}
.sr-svc-card:hover {
  border-color: hsl(24 95% 53% / 0.5);     /* hover:border-orange/50 */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);     /* shadow-lg */
  transform: translateY(-8px);     /* whileHover y:-8 */
}
/* Number indicator: absolute top-4 right-4 text-5xl font-bold text-muted/30 font-serif */
.sr-svc-num {
  position: absolute;
  top: 16px; right: 16px;     /* top-4 right-4 */
  font-family: 'Playfair Display', serif;
  font-style: normal;     /* NOT italic */
  font-weight: 700;     /* font-bold */
  font-size: 48px;     /* text-5xl */
  line-height: 1;
  color: hsl(220 12% 45% / 0.30);     /* text-muted/30 */
}
.sr-svc-top { margin-bottom: 24px; }     /* icon block mb-6 */
.sr-svc-top .sr-svc-num { display: none !important; }     /* hide flex copy */

.sr-svc-icon {
  width: 56px; height: 56px;     /* w-14 h-14 */
  border-radius: 12px;     /* rounded-xl */
  background: hsl(24 95% 53% / 0.10);     /* bg-orange/10 */
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
.sr-svc-card:hover .sr-svc-icon {
  background: hsl(24 95% 53% / 0.20);     /* group-hover:bg-orange/20 */
  transform: scale(1.1) rotate(5deg);     /* whileHover scale 1.1 rotate 5 */
}
.sr-svc-icon svg {
  width: 28px; height: 28px;     /* w-7 h-7 */
  stroke: var(--orange);
}
.sr-svc-card:hover .sr-svc-title { color: var(--orange); }     /* group-hover:text-orange */
.sr-svc-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.625;     /* leading-relaxed */
  color: var(--muted-fg);
  margin: 0;
}

/* === PAN-EUROPEAN REACH ============================================
   Section bg-background, py-24 lg:py-32
   Layout: grid 1fr 1.3fr (left text + right map) */
.sr-reach {
  padding: 96px 24px;
  background: var(--bg);
}
@media (min-width: 1024px) { .sr-reach { padding: 128px 32px 160px; } }
.sr-reach-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) { .sr-reach-inner { grid-template-columns: 1fr 1.3fr; gap: 64px; } }

.sr-reach-left .sr-eyebrow { margin: 0 0 16px; }
.sr-reach-left .sr-h2 { margin: 0 0 20px; }
.sr-reach-lead {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.625;
  color: var(--muted-fg);
  margin: 0 0 32px;
}

.sr-countries ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.sr-countries li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--fg);
}
.sr-country-pin {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  position: relative;
  flex-shrink: 0;
}
.sr-country-pin::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  background: var(--orange);
  border-radius: 50%;
}

.sr-reach-right { position: relative; padding-bottom: 40px; }
.sr-map-card { position: relative; }
.sr-map-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.sr-map-stats {
  position: absolute;
  bottom: -38px;
  left: 24px; right: 24px;
  display: flex;
  gap: 14px;
  z-index: 6;
}
.sr-map-stat {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: var(--shadow-card);
}
.sr-map-stat-num {
  font-family: 'Playfair Display', serif;
  color: var(--orange);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1;
}
.sr-map-stat-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted-fg);
  text-transform: uppercase;
  font-weight: 600;
}

/* === TRUSTED PARTNERS ============================================== */
.sr-partners {
  padding: 96px 24px;
  background: var(--card);
  text-align: center;
}
@media (min-width: 1024px) { .sr-partners { padding: 128px 32px; } }
.sr-partners-inner { max-width: 1400px; margin: 0 auto; }
.sr-partners .sr-eyebrow { justify-content: center; margin: 0 0 16px; }
.sr-partners .sr-h2 { margin: 0 auto 56px; max-width: 720px; text-align: center; }
.sr-partners-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px;
  align-items: center;
  justify-items: center;
}
@media (min-width: 768px) { .sr-partners-logos { grid-template-columns: repeat(4, 1fr); } }
.sr-partner-logo {
  max-height: 40px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: opacity 0.3s, filter 0.3s;
}
.sr-partner-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}
.sr-partners-note {
  margin-top: 40px;
  color: var(--muted-fg);
  font-size: 13px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* === PROCESS (How We Work) ========================================= */
.sr-process {
  padding: 96px 24px;
  background: var(--navy-deep);
}
@media (min-width: 1024px) { .sr-process { padding: 128px 32px; } }
.sr-process-inner { max-width: 1400px; margin: 0 auto; }
.sr-process-head { margin-bottom: 64px; }
.sr-process-head .sr-eyebrow { margin: 0 0 16px; }
.sr-process-head .sr-h2 { color: #ffffff; margin: 0 0 16px; }
.sr-process-lead {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: hsl(0 0% 100% / 0.75);
  max-width: 640px;
  line-height: 1.625;
}
.sr-process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}
.sr-process-steps::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 8%; right: 8%;
  height: 1px;
  background: hsl(24 95% 53% / 0.45);
  z-index: 1;
}
.sr-step {
  position: relative;
  text-align: center;
  z-index: 2;
}
.sr-step-num {
  font-family: 'Playfair Display', serif;
  width: 60px; height: 60px;
  background: var(--navy-deep);
  border: 1.5px solid var(--orange);
  color: var(--orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  font-style: italic;
  margin-bottom: 24px;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.sr-step:hover .sr-step-num {
  background: var(--orange);
  color: #ffffff;
  transform: scale(1.1);
}
.sr-step-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}
.sr-step-desc {
  font-size: 13.5px;
  color: hsl(0 0% 100% / 0.65);
  line-height: 1.6;
  max-width: 200px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .sr-process-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .sr-process-steps::before { display: none; }
}

/* === WHY US (Trust) =============================================== */
.sr-why {
  padding: 96px 24px;
  background: var(--bg);
}
@media (min-width: 1024px) { .sr-why { padding: 128px 32px; } }
.sr-why-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) { .sr-why-inner { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.sr-why-left .sr-eyebrow { margin: 0 0 16px; }
.sr-why-left .sr-h2 { margin: 0 0 32px; }
.sr-why-quote {
  background: var(--navy-deep);
  color: #ffffff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 440px;
  position: relative;
  font-style: italic;
  font-size: 16px;
}
.sr-quote-mark {
  position: absolute;
  top: 16px; left: 24px;
  color: var(--orange);
  font-size: 24px;
  line-height: 1;
}
.sr-why-quote p { margin: 24px 0 0; }

.sr-trust-list { display: flex; flex-direction: column; gap: 12px; }
.sr-trust-card {
  background: #ffffff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.sr-trust-card:hover {
  border-color: hsl(24 95% 53% / 0.5);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.sr-trust-check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: hsl(24 95% 53% / 0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-trust-check::before { content: '✓'; font-weight: 700; font-size: 14px; }
.sr-trust-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px;
}
.sr-trust-desc {
  font-size: 14px;
  color: var(--muted-fg);
  margin: 0;
  line-height: 1.55;
}

/* === CONTACT ====================================================== */
.sr-contact {
  padding: 96px 24px;
  background: var(--navy-deep);
}
@media (min-width: 1024px) { .sr-contact { padding: 128px 32px; } }
.sr-contact-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) { .sr-contact-inner { grid-template-columns: 1fr 1.2fr; gap: 64px; } }
.sr-contact-left .sr-eyebrow { margin: 0 0 16px; }
.sr-contact-left .sr-h2 { color: #ffffff; margin: 0 0 16px; }
.sr-contact-lead {
  color: hsl(0 0% 100% / 0.70);
  font-size: 17px;
  margin: 0 0 32px;
}
.sr-contact-cards { display: flex; flex-direction: column; gap: 12px; }
.sr-contact-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: hsl(220 50% 13% / 0.6);
  border: 1px solid hsl(0 0% 100% / 0.10);
  border-radius: 10px;
  padding: 16px 20px;
}
.sr-contact-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: hsl(24 95% 53% / 0.15);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-contact-icon svg { width: 20px; height: 20px; }
.sr-contact-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: hsl(0 0% 100% / 0.55);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2px;
}
.sr-contact-value { color: #ffffff; font-size: 15px; font-weight: 500; }

.sr-contact-right {
  background: #ffffff;
  border-radius: 16px;
  padding: 36px;
  box-shadow: var(--shadow-lg);
}
.sr-form-head { margin-bottom: 20px; }
.sr-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}
.sr-form-sub { color: var(--muted-fg); font-size: 14px; margin: 0; }
.sr-contact-form { display: flex; flex-direction: column; gap: 14px; }
.sr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sr-form-field { display: flex; flex-direction: column; gap: 6px; }
.sr-form-field label { font-size: 13px; font-weight: 500; color: var(--fg); }
.sr-req { color: var(--orange); }
.sr-form-field input,
.sr-form-field textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--fg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sr-form-field input:focus,
.sr-form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px hsl(24 95% 53% / 0.15);
}
.sr-form-field textarea { resize: vertical; min-height: 96px; }
.sr-form-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted-fg);
  margin-top: 8px;
}

/* === MOTION ======================================================= */
@keyframes sr-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sr-fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sr-slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Hero entrance — Framer Motion → CSS keyframes (delays from Hero.tsx) */
.sr-hero-inner .sr-eyebrow { animation: sr-slideInLeft 0.5s ease-out 0.2s both; }
.sr-hero-inner .sr-hero-h1 { animation: sr-fadeUp 0.7s ease-out 0.3s both; }
.sr-hero-inner .sr-hero-sub { animation: sr-fadeUp 0.6s ease-out 0.4s both; }
.sr-hero-inner .sr-hero-ctas { animation: sr-fadeUp 0.6s ease-out 0.5s both; }
.sr-stats-grid { animation: sr-fadeUp 0.8s ease-out 0.8s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* === RESPONSIVE FIXES ============================================== */
@media (max-width: 768px) {
  .sr-hero-inner { padding: 96px 24px 48px; }
  .sr-hero-inner::before { display: none; }
  .sr-hero { min-height: 88vh; }
  .sr-services-head { margin-bottom: 48px; }
  .sr-h2 { font-size: 28px; }
}

/* v5.1: HTML has .sr-stat directly inside .sr-stats-inner (no .sr-stats-grid wrapper)
   Apply grid directly to .sr-stats-inner */
.sr-stats-inner {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 0 96px !important;
  border-top: 1px solid hsl(0 0% 100% / 0.20);
  position: relative;
}
@media (min-width: 768px) {
  .sr-stats-inner {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
  }
}
.sr-stats-inner > .sr-scroll-indicator {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin-top: 40px;
}

/* v5.2: HTML has .sr-svc-num INSIDE .sr-svc-top, but we want it positioned absolute (top:16 right:16) like Lovable's motion.div pattern. Override the display:none from v5. */
.sr-svc-card .sr-svc-num,
.sr-svc-top .sr-svc-num {
  display: block !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 1 !important;
  color: hsl(220 12% 45% / 0.30) !important;
  margin: 0 !important;
  z-index: 1;
}
.sr-svc-top {
  margin-bottom: 24px !important;
  /* Remove flex justify-between behavior — icon stays left, num is absolute */
  display: block !important;
}

/* ============================================================
   v5.3 — STRICT MODE corrections
   Source of truth: Lovable production at skogsrav.com (rendered)
   Action: replicate, do NOT improve
   ============================================================ */

/* H1: Lovable production renders ~80px at 1440px viewport
   (text-[6.5rem]=104px would push stats below fold; production overrides) */
.sr-hero-h1 { font-size: 48px !important; }
@media (min-width: 768px) { .sr-hero-h1 { font-size: 64px !important; } }
@media (min-width: 1024px) { .sr-hero-h1 { font-size: 5rem !important; } }   /* 80px */

/* Remove backdrop-blur pseudo on .sr-hero-inner (was bleeding into header zone)
   Lovable layer 3 blur is on a SEPARATE absolute div over background — not on content container */
.sr-hero-inner::before { content: none !important; display: none !important; backdrop-filter: none !important; }

/* Remove vignette pseudo (Lovable uses an HTML div, not a pseudo on .sr-hero) */
.sr-hero::before { content: none !important; }

/* Re-add Lovable layer 3 blur correctly: use .sr-hero-overlay::after instead
   (.sr-hero-overlay is absolute inset-0, so its ::after sits over the bg image, not content) */
.sr-hero-overlay { position: absolute; inset: 0; }
.sr-hero-overlay::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
  pointer-events: none;
}

/* Re-add vignette as ::before on overlay (so it sits over bg, not over content) */
.sr-hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    hsl(220 50% 10% / 0.50) 0%,
    transparent 50%,
    hsl(220 50% 10% / 0.60) 100%);
  pointer-events: none;
}

/* Hero section padding adjustment to match Lovable: pt-32 = 128px (top), pb-20 = 80px (bottom).
   But total hero is min-h-screen = 100vh — content centered, not pushed to top. */
.sr-hero-inner {
  padding-top: 96px !important;     /* slightly less so stats fit fold @ 1440x900 */
  padding-bottom: 64px !important;
}

/* v5.4: H1 spans must break line. Lovable uses inline-block + <br> in HTML.
   Our HTML lacks <br>, so force block on each span. */
.sr-hero-h1-line { display: block !important; }
.sr-hero-h1-accent { display: block !important; }

/* ============================================================
   v5.5 — STRICT MODE 1:1 from Lovable .tsx components
   Sources: TrustStamps.tsx, EuropeanScope.tsx, TrustedPartners.tsx
   ============================================================ */

/* === TrustStamps (Features) — py-8 lg:py-10 bg-navy-deep border-t border-white/10 === */
.sr-features {
  padding: 32px 24px !important;
  background: var(--navy-deep) !important;
  border-top: 1px solid hsl(0 0% 100% / 0.10) !important;
}
@media (min-width: 1024px) { .sr-features { padding: 40px 32px !important; } }
.sr-features-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}
@media (min-width: 1024px) {
  .sr-features-inner {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

.sr-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  border: 1px solid hsl(0 0% 100% / 0.10) !important;
  background: hsl(0 0% 100% / 0.05) !important;
  color: #ffffff !important;
  cursor: default;
  transition: all 0.3s ease !important;
}
.sr-chip:hover {
  border-color: hsl(24 95% 53% / 0.50) !important;
  background: hsl(24 95% 53% / 0.10) !important;
  transform: translateY(-2px) scale(1.03);
}
.sr-chip-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: hsl(24 95% 53% / 0.20) !important;
  color: var(--orange);
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, transform 0.3s !important;
}
.sr-chip:hover .sr-chip-icon {
  background: hsl(24 95% 53% / 0.30) !important;
  transform: rotate(10deg);
}
.sr-chip-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--orange);
}
.sr-chip > span:not(.sr-chip-icon),
.sr-chip-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.025em !important;
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}
@media (min-width: 1024px) {
  .sr-chip > span:not(.sr-chip-icon),
  .sr-chip-text { font-size: 16px !important; }
}
.sr-chip:hover > span:not(.sr-chip-icon),
.sr-chip:hover .sr-chip-text { color: var(--orange) !important; }

/* === EuropeanScope (Pan-European) — py-24 lg:py-32 bg-cream === */
.sr-reach {
  padding: 96px 24px !important;
  background: var(--cream) !important;
  overflow: hidden;
}
@media (min-width: 1024px) { .sr-reach { padding: 128px 32px !important; } }
.sr-reach-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: block;
}
@media (min-width: 1024px) {
  .sr-reach-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
}
.sr-reach-left { margin-bottom: 48px; }
@media (min-width: 1024px) { .sr-reach-left { margin-bottom: 0; } }
.sr-reach-left .sr-eyebrow { margin: 0 0 16px !important; }
.sr-reach-left .sr-h2 { margin: 0 0 24px !important; }
.sr-reach-lead {
  font-size: 18px !important;
  line-height: 1.625;
  color: var(--muted-fg) !important;
  margin: 0 0 40px !important;
}
@media (min-width: 768px) { .sr-reach-lead { font-size: 20px !important; } }

.sr-countries ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sr-countries li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--fg);
  cursor: default;
  transition: color 0.2s, transform 0.2s;
}
.sr-countries li:hover {
  color: var(--orange);
  transform: translateX(5px);
}

.sr-reach-right {
  position: relative;
  padding-bottom: 0 !important;
}
.sr-map-card {
  position: relative;
  border-radius: 16px;
  overflow: visible;
  box-shadow: var(--shadow-lg);
}
.sr-map-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
}
.sr-map-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(to top, hsl(220 50% 10% / 0.60) 0%, transparent 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.sr-map-stats {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  right: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 0 !important;
  z-index: 3 !important;
}
.sr-map-stat {
  flex: 0 0 auto !important;
  background: hsl(0 0% 100% / 0.95) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px !important;
  padding: 12px 20px !important;
  box-shadow: var(--shadow-lg);
  border: 0;
}
.sr-map-stat-num {
  font-family: 'Playfair Display', serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  line-height: 1;
  margin: 0;
}
.sr-map-stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  text-transform: uppercase;
  letter-spacing: 0.025em !important;
}

/* === TrustedPartners — py-16 md:py-20 bg-slate-50 === */
.sr-partners {
  padding: 64px 24px !important;
  background: hsl(210 40% 98%) !important;
  text-align: center;
}
@media (min-width: 768px) { .sr-partners { padding: 80px 24px !important; } }
@media (min-width: 1024px) { .sr-partners { padding: 80px 32px !important; } }
.sr-partners-inner { max-width: 1400px; margin: 0 auto; }

.sr-partners > .sr-eyebrow,
.sr-partners-inner .sr-eyebrow {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: hsl(220 12% 45% / 0.60) !important;
  margin: 0 0 24px !important;
  text-align: center;
}
.sr-partners .sr-eyebrow-dash { display: none !important; }

.sr-partners .sr-h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: hsl(220 30% 10% / 0.80) !important;
  margin: 0 auto 48px !important;
  max-width: 42rem !important;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0;
}
@media (min-width: 768px) { .sr-partners .sr-h2 { font-size: 20px !important; } }

.sr-partners-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: center;
  gap: 48px !important;
  margin-bottom: 40px !important;
  padding: 0 !important;
}
@media (min-width: 768px) { .sr-partners-logos { gap: 80px !important; } }
@media (min-width: 1024px) { .sr-partners-logos { gap: 112px !important; } }

.sr-partner-logo {
  width: auto;
  height: 32px !important;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.60;
  transition: opacity 0.3s, filter 0.3s;
  max-height: none !important;
}
@media (min-width: 768px) { .sr-partner-logo { height: 40px !important; } }
.sr-partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.sr-partner-logo--lg,
img[alt*="MC"], img[src*="mc-finance"], img[src*="mc_finance"] {
  height: 48px !important;
}
@media (min-width: 768px) {
  .sr-partner-logo--lg,
  img[alt*="MC"], img[src*="mc-finance"], img[src*="mc_finance"] { height: 64px !important; }
}

.sr-partners-note {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: hsl(220 12% 45% / 0.50) !important;
  max-width: 28rem !important;
  margin: 0 auto !important;
  text-align: center;
}

/* ============================================================
   v5.6 — STRICT MODE 1:1 from Process.tsx, WhySkogsrav.tsx,
                                   Contact.tsx, Footer.tsx
   ============================================================ */

/* === Process — py-24 lg:py-32 bg-navy-deep === */
.sr-process {
  padding: 96px 24px !important;
  background: var(--navy-deep) !important;
  overflow: hidden;
}
@media (min-width: 1024px) { .sr-process { padding: 128px 32px !important; } }
.sr-process-inner { max-width: 1400px; margin: 0 auto; }

.sr-process-head {
  max-width: 48rem !important;
  margin: 0 0 64px !important;
}
@media (min-width: 1024px) { .sr-process-head { margin-bottom: 80px !important; } }
.sr-process-head .sr-eyebrow { margin: 0 0 16px !important; }
.sr-process-head .sr-h2 { color: #ffffff !important; margin: 0 0 24px !important; }
.sr-process-lead {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.625 !important;
  color: hsl(0 0% 100% / 0.70) !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .sr-process-lead { font-size: 20px !important; } }

.sr-process-steps {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  position: relative !important;
}
@media (min-width: 1024px) {
  .sr-process-steps { grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; }
}
.sr-process-steps::before {
  content: '' !important;
  display: none !important;
  position: absolute;
  top: 64px !important;
  left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(to right,
    hsl(24 95% 53% / 0.20) 0%,
    hsl(24 95% 53% / 0.50) 50%,
    hsl(24 95% 53% / 0.20) 100%) !important;
  z-index: 1;
}
@media (min-width: 1024px) { .sr-process-steps::before { display: block !important; } }

.sr-step {
  position: relative !important;
  text-align: center !important;
  z-index: 2;
  cursor: default;
  transition: transform 0.2s ease;
}
.sr-step:hover { transform: translateY(-5px); }

.sr-step-num {
  font-family: 'Playfair Display', serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  width: 128px !important;
  height: 128px !important;
  margin: 0 auto 24px !important;
  background: var(--navy-medium) !important;
  border: 2px solid hsl(24 95% 53% / 0.30) !important;
  color: var(--orange) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 36px !important;
  transition: all 0.3s ease !important;
}
@media (min-width: 1024px) {
  .sr-step-num { width: 112px !important; height: 112px !important; font-size: 30px !important; }
}
.sr-step:hover .sr-step-num {
  border-color: var(--orange) !important;
  box-shadow: var(--shadow-orange);
  transform: scale(1.08);
  background: var(--navy-medium) !important;
  color: var(--orange) !important;
}

.sr-step-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}
@media (min-width: 1024px) { .sr-step-title { font-size: 18px !important; } }
.sr-step:hover .sr-step-title { color: var(--orange) !important; }

.sr-step-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: hsl(0 0% 100% / 0.60) !important;
  line-height: 1.625 !important;
  margin: 0 auto !important;
  max-width: none !important;
  padding: 0 8px;
}

/* === WhySkogsrav (Trust) — py-24 lg:py-32 bg-cream === */
.sr-why {
  padding: 96px 24px !important;
  background: var(--cream) !important;
}
@media (min-width: 1024px) { .sr-why { padding: 128px 32px !important; } }
.sr-why-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: block;
}
@media (min-width: 1024px) {
  .sr-why-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
}
.sr-why-left { margin-bottom: 48px; }
@media (min-width: 1024px) { .sr-why-left { margin-bottom: 0; } }
.sr-why-left .sr-eyebrow { margin: 0 0 16px !important; }
.sr-why-left .sr-h2 { margin: 0 0 32px !important; }
.sr-why-left .sr-h2 .sr-h2-accent {
  color: var(--orange) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-style: normal !important;
}

.sr-why-quote {
  position: relative !important;
  padding: 32px !important;
  background: var(--navy-deep) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg);
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-style: italic !important;
  color: #ffffff !important;
  line-height: 1.625 !important;
  max-width: none !important;
}
@media (min-width: 1024px) { .sr-why-quote { font-size: 24px !important; } }
.sr-why-quote p { margin: 0 !important; }
.sr-quote-mark {
  position: absolute !important;
  top: -12px !important;
  left: 32px !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--orange) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 24px !important;
  font-weight: 600;
  line-height: 1;
}

.sr-trust-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.sr-trust-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 24px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  cursor: default;
  transition: all 0.3s ease !important;
}
.sr-trust-card:hover {
  border-color: hsl(24 95% 53% / 0.30) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateX(8px) !important;
}
.sr-trust-check {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: hsl(24 95% 53% / 0.10) !important;
  color: var(--orange) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease !important;
}
.sr-trust-card:hover .sr-trust-check {
  background: var(--orange) !important;
  color: #ffffff !important;
  transform: scale(1.2) rotate(10deg);
}
.sr-trust-check::before {
  content: '✓' !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
.sr-trust-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  margin: 0 0 4px !important;
  line-height: 1.25;
  transition: color 0.3s ease;
}
@media (min-width: 1024px) { .sr-trust-title { font-size: 24px !important; } }
.sr-trust-card:hover .sr-trust-title { color: var(--orange) !important; }
.sr-trust-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--muted-fg) !important;
  margin: 0 !important;
  line-height: 1.625 !important;
}

/* === Contact — py-24 lg:py-32 bg-navy-deep === */
.sr-contact {
  padding: 96px 24px !important;
  background: var(--navy-deep) !important;
  position: relative !important;
  overflow: hidden;
}
@media (min-width: 1024px) { .sr-contact { padding: 128px 32px !important; } }
.sr-contact::before {
  content: '' !important;
  position: absolute !important;
  top: 0; right: 0;
  width: 33.333%;
  height: 100%;
  background: linear-gradient(to left, hsl(24 95% 53% / 0.05) 0%, transparent 100%);
  pointer-events: none;
}
.sr-contact-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: block;
}
@media (min-width: 1024px) {
  .sr-contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
  }
}
.sr-contact-left { margin-bottom: 48px; }
@media (min-width: 1024px) { .sr-contact-left { margin-bottom: 0; } }
.sr-contact-left .sr-eyebrow { margin: 0 0 16px !important; }
.sr-contact-left .sr-h2 { color: #ffffff !important; margin: 0 0 24px !important; }
.sr-contact-lead {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.625 !important;
  color: hsl(0 0% 100% / 0.70) !important;
  margin: 0 0 40px !important;
}
@media (min-width: 768px) { .sr-contact-lead { font-size: 20px !important; } }

.sr-contact-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.sr-contact-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  background: hsl(0 0% 100% / 0.05) !important;
  border: 1px solid hsl(0 0% 100% / 0.10) !important;
  border-radius: 12px !important;
  transition: border-color 0.3s ease;
}
.sr-contact-card:hover {
  border-color: hsl(24 95% 53% / 0.30) !important;
}
.sr-contact-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: hsl(24 95% 53% / 0.20) !important;
  color: var(--orange) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-contact-icon svg {
  width: 20px !important;
  height: 20px !important;
}
.sr-contact-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: hsl(0 0% 100% / 0.50) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}
.sr-contact-value {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.sr-contact-right {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1024px) { .sr-contact-right { padding: 40px !important; } }
.sr-form-head { margin-bottom: 32px !important; }
.sr-form-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  margin: 0 0 8px !important;
  line-height: 1.25;
}
@media (min-width: 1024px) { .sr-form-title { font-size: 24px !important; } }
.sr-form-sub {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: var(--muted-fg) !important;
  font-size: 16px !important;
  margin: 0 !important;
}
.sr-contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.sr-form-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
@media (min-width: 768px) { .sr-form-row { grid-template-columns: 1fr 1fr !important; } }

.sr-form-field { display: flex; flex-direction: column; gap: 8px; }
.sr-form-field label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
  margin: 0 !important;
}
.sr-req { color: var(--orange) !important; }
.sr-form-field input,
.sr-form-field textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  padding: 12px 16px !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg) !important;
  color: var(--fg) !important;
  transition: border-color 0.2s ease !important;
  width: 100%;
}
.sr-form-field input:focus,
.sr-form-field textarea:focus {
  outline: none !important;
  border-color: var(--orange) !important;
  box-shadow: none !important;
}
.sr-form-field input::placeholder,
.sr-form-field textarea::placeholder {
  color: var(--muted-fg) !important;
}
.sr-form-field textarea { resize: none !important; min-height: 100px; }

/* Submit button: variant=corporate size=xl w-full shadow-orange */
.sr-btn-block {
  width: 100% !important;
  height: 48px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.025em !important;
  background: var(--orange) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-orange) !important;
  border-radius: 8px !important;
}

.sr-form-note {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--muted-fg) !important;
  text-align: center !important;
  margin-top: 0 !important;
}

/* ============================================================
   HERO — STRICT MODE 1:1 from Lovable Hero.tsx
   ============================================================ */

/* Section: relative min-h-screen flex items-center overflow-hidden */
.sr-home .sr-hero {
  position: relative !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  background: hsl(220 50% 10%) !important;
}

/* Eyebrow fix: section-label = text-sm (14px) font-bold (700) tracking-widest (0.1em) text-orange (#F97316) mb-8 (32px) */
.sr-home .sr-hero-inner .sr-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: hsl(24 95% 53%) !important;
  margin-bottom: 32px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.sr-home .sr-hero-inner .sr-eyebrow-dash {
  width: 48px !important;
  height: 2px !important;
  background: linear-gradient(to right, hsl(24 95% 53%), hsl(28 90% 60%)) !important;
  display: inline-block !important;
  flex-shrink: 0;
}

/* H1: leading-[1.02] = exactly 1.02 line-height (override global h1 1.05) */
.sr-home .sr-hero-h1 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 32px !important;
  color: #ffffff !important;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.10)) !important;
}

/* Subheadline: body-large text-white/90 max-w-2xl mb-12 drop-shadow-md */
.sr-home .sr-hero-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.625 !important;
  color: hsl(0 0% 100% / 0.90) !important;
  max-width: 42rem !important;
  margin: 0 0 16px !important;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) !important;
}
@media (min-width: 768px) { .sr-home .sr-hero-sub { font-size: 20px; } }

/* Tag "Discreet. Compliant. Results-driven." — Lovable: <span class="text-orange font-bold"> INSIDE p */
.sr-home .sr-hero-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: hsl(24 95% 53%) !important;
  margin: 0 0 48px !important;     /* completes mb-12 from sub */
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) !important;
}
@media (min-width: 768px) { .sr-home .sr-hero-tag { font-size: 20px; } }

/* CTAs container: flex flex-col sm:flex-row gap-4 (16px) */
.sr-home .sr-hero-ctas {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
@media (min-width: 640px) { .sr-home .sr-hero-ctas { flex-direction: row !important; } }

/* Button base — variant=hero size=xl: h-12 (48px) px-10 (40px) text-base (16px) font-bold rounded-md */
.sr-home .sr-hero-ctas .sr-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 40px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 8px !important;
  border: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}

/* variant=hero: bg-orange text-white hover:bg-orange-light + shadow-orange */
.sr-home .sr-hero-ctas .sr-btn-primary {
  background: hsl(24 95% 53%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 30px -6px hsl(24 95% 53% / 0.35) !important;
}
.sr-home .sr-hero-ctas .sr-btn-primary:hover {
  background: hsl(28 90% 60%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* variant=hero-outline: border-2 border-white/40 text-white hover:bg-white/10 hover:border-white/60 */
.sr-home .sr-hero-ctas .sr-btn-ghost {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid hsl(0 0% 100% / 0.40) !important;
}
.sr-home .sr-hero-ctas .sr-btn-ghost:hover {
  background: hsl(0 0% 100% / 0.10) !important;
  border-color: hsl(0 0% 100% / 0.60) !important;
  color: #ffffff !important;
}

/* ============================================================
   STATS — STRICT MODE 1:1 from Hero.tsx Trust Indicators
   ============================================================ */

/* Stat label: text-sm font-bold text-white/50 tracking-wider uppercase group-hover:text-white/70 */
.sr-home .sr-stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: hsl(0 0% 100% / 0.50) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease !important;
}
.sr-home .sr-stat:hover .sr-stat-label {
  color: hsl(0 0% 100% / 0.70) !important;
}

/* Stat number group-hover: text-orange + text-glow-hover (text-shadow) */
.sr-home .sr-stat:hover .sr-stat-num {
  color: hsl(24 95% 53%) !important;
  text-shadow: 0 0 20px hsl(24 95% 53% / 0.5), 0 0 40px hsl(24 95% 53% / 0.3) !important;
}
.sr-home .sr-stat-num {
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

/* Whole stat hover: scale 1.05 */
.sr-home .sr-stat {
  cursor: default;
  transition: transform 0.2s ease !important;
}
.sr-home .sr-stat:hover { transform: scale(1.05); }

/* TRUSTSTAMPS — STRICT MODE: text is text-node, style chip directly */
.sr-home .sr-chip {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  color: #ffffff !important;
}
@media (min-width: 1024px) { .sr-home .sr-chip { font-size: 16px !important; } }
.sr-home .sr-chip:hover { color: hsl(24 95% 53%) !important; }

/* Section bg — exact navy-deep #07111e */
.sr-home .sr-features {
  background: hsl(220 50% 10%) !important;
}

/* ============================================================
   SERVICES — STRICT MODE 1:1 from Services.tsx
   ============================================================ */

/* Card: p-8 (32px) — Kadence keeps killing this, force max specificity */
html body.page-id-4 .sr-home .sr-services .sr-svc-card,
html body .sr-home article.sr-svc-card,
html body .sr-services .sr-services-grid .sr-svc-card {
  padding: 32px !important;
  background: hsl(0 0% 100%) !important;
  border: 2px solid hsl(220 12% 85%) !important;
  border-radius: 12px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 280px !important;
}

/* Services eyebrow: text-orange (#F97316) text-sm (14px) font-bold (700) */
.sr-home .sr-services .sr-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: hsl(24 95% 53%) !important;
  letter-spacing: 0.1em !important;
}
.sr-home .sr-services .sr-eyebrow-dash {
  width: 48px !important;
  height: 2px !important;
  background: hsl(24 95% 53%) !important;
}

/* H2 line-height: leading-[1.12] = exactly 1.12 */
.sr-home .sr-services .sr-h2 {
  line-height: 1.12 !important;
}

/* Verify icon size + bg per Lovable */
.sr-home .sr-svc-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  background: hsl(24 95% 53% / 0.10) !important;
  color: hsl(24 95% 53%) !important;
}
.sr-home .sr-svc-card:hover .sr-svc-icon {
  background: hsl(24 95% 53% / 0.20) !important;
  transform: scale(1.1) rotate(5deg) !important;
}
.sr-home .sr-svc-icon svg {
  width: 28px !important;
  height: 28px !important;
  stroke: hsl(24 95% 53%) !important;
}

/* Card hover: y:-8 + border-orange/50 + shadow-lg */
.sr-home .sr-svc-card {
  transition: all 0.3s ease !important;
}
.sr-home .sr-svc-card:hover {
  transform: translateY(-8px) !important;
  border-color: hsl(24 95% 53% / 0.50) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}
.sr-home .sr-svc-card:hover .sr-svc-title {
  color: hsl(24 95% 53%) !important;
}

/* ============================================================
   PAN-EUROPEAN — STRICT MODE 1:1 from EuropeanScope.tsx
   ============================================================ */

/* Eyebrow */
.sr-home .sr-reach .sr-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: hsl(24 95% 53%) !important;
  letter-spacing: 0.1em !important;
}
.sr-home .sr-reach .sr-eyebrow-dash {
  width: 48px !important;
  height: 2px !important;
  background: hsl(24 95% 53%) !important;
}

/* Map wrapper: relative rounded-2xl overflow-HIDDEN shadow-lg */
.sr-home .sr-map-card {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px -12px hsl(220 30% 10% / 0.18) !important;
}

/* Map img: w-full h-auto object-cover */
.sr-home .sr-map-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Overlay gradient: absolute inset-0 bg-gradient-to-t from-navy-deep/60 via-transparent to-transparent */
.sr-home .sr-map-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, hsl(220 50% 10% / 0.60) 0%, transparent 50%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Stats overlay: absolute bottom-6 (24px) left-6 right-6 flex justify-between — INSIDE map */
.sr-home .sr-map-stats {
  position: absolute !important;
  bottom: 24px !important;
  left: 24px !important;
  right: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 0 !important;
  z-index: 3 !important;
  margin: 0 !important;
}

/* Stat card: bg-white/95 backdrop-blur-sm rounded-lg px-5 py-3 shadow-lg */
.sr-home .sr-map-stat {
  flex: 0 0 auto !important;
  background: hsl(0 0% 100% / 0.95) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  box-shadow: 0 20px 50px -12px hsl(220 30% 10% / 0.18) !important;
}

/* Stat number: text-3xl (30px) font-bold text-orange font-serif */
.sr-home .sr-map-stat-num {
  font-family: 'Playfair Display', serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: hsl(24 95% 53%) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Stat label: text-xs (12px) font-semibold text-foreground uppercase tracking-wide (0.025em) */
.sr-home .sr-map-stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: hsl(220 30% 10%) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

/* Reach right padding-bottom: NOT needed since overflow:hidden + bottom:24 inside */
.sr-home .sr-reach-right {
  padding-bottom: 0 !important;
}
.sr-home .sr-reach { padding-bottom: 128px !important; }

/* Decorative elements: absolute -bottom-4 -right-4 w-24 h-24 rounded-xl bg-orange/20 + -top-4 -left-4 w-16 h-16 rounded-xl bg-navy-deep/10 */
.sr-home .sr-reach-right::before {
  content: '' !important;
  position: absolute !important;
  bottom: -16px !important;
  right: -16px !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 12px !important;
  background: hsl(24 95% 53% / 0.20) !important;
  z-index: -1 !important;
}
.sr-home .sr-reach-right::after {
  content: '' !important;
  position: absolute !important;
  top: -16px !important;
  left: -16px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  background: hsl(220 50% 10% / 0.10) !important;
  z-index: -1 !important;
}

/* ============================================================
   TRUSTED PARTNERS — STRICT MODE 1:1 from TrustedPartners.tsx
   ============================================================ */

/* H2: <motion.h2 className="text-lg md:text-xl font-medium text-foreground/80">
   Lovable global h2 is font-serif Playfair, the className overrides only weight (500) not family.
   So H2 here is Playfair Display Medium 18/20px text-foreground/80 */
.sr-home .sr-partners .sr-h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: hsl(220 30% 10% / 0.80) !important;
  margin: 0 auto 48px !important;
  max-width: 42rem !important;
  text-align: center !important;
  line-height: 1.1 !important;
  letter-spacing: -0.005em !important;
}
@media (min-width: 768px) { .sr-home .sr-partners .sr-h2 { font-size: 20px !important; } }

/* ============================================================
   PROCESS — STRICT MODE 1:1 from Process.tsx
   ============================================================ */

.sr-home .sr-process .sr-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: hsl(24 95% 53%) !important;
  letter-spacing: 0.1em !important;
}
.sr-home .sr-process .sr-eyebrow-dash {
  width: 48px !important;
  height: 2px !important;
  background: hsl(24 95% 53%) !important;
}

/* Section bg — exact navy-deep */
.sr-home .sr-process { background: hsl(220 50% 10%) !important; }

/* ============================================================
   WHY US — STRICT MODE 1:1 from WhySkogsrav.tsx
   HTML uses .sr-why-card / .sr-why-check / .sr-why-card-title / .sr-why-card-desc
   ============================================================ */

/* Eyebrow fix */
.sr-home .sr-why .sr-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: hsl(24 95% 53%) !important;
  letter-spacing: 0.1em !important;
}
.sr-home .sr-why .sr-eyebrow-dash {
  width: 48px !important;
  height: 2px !important;
  background: hsl(24 95% 53%) !important;
}

/* Card: flex items-start gap-4 p-6 bg-white rounded-xl border-2 border-transparent */
.sr-home .sr-why-right { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.sr-home .sr-why-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 24px !important;
  background: hsl(0 0% 100%) !important;
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  cursor: default !important;
  transition: all 0.3s ease !important;
}
/* Hover: border-orange/30 + shadow-md + x:8 */
.sr-home .sr-why-card:hover {
  border-color: hsl(24 95% 53% / 0.30) !important;
  box-shadow: 0 6px 20px -4px hsl(220 30% 10% / 0.12) !important;
  transform: translateX(8px) !important;
}

/* Check icon box: flex-shrink-0 w-10 h-10 rounded-full bg-orange/10 group-hover:bg-orange */
.sr-home .sr-why-check {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: hsl(24 95% 53% / 0.10) !important;
  color: hsl(24 95% 53%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  transition: all 0.3s ease !important;
}
.sr-home .sr-why-card:hover .sr-why-check {
  background: hsl(24 95% 53%) !important;
  color: #ffffff !important;
  transform: scale(1.2) rotate(10deg) !important;
}

/* Title: heading-card = font-serif font-semibold text-xl/2xl (20/24)
   Lovable Tailwind: heading-card text-foreground mb-1 group-hover:text-orange */
.sr-home .sr-why-card-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: hsl(220 30% 10%) !important;
  margin: 0 0 4px !important;
  line-height: 1.25 !important;
  transition: color 0.3s ease !important;
}
@media (min-width: 1024px) { .sr-home .sr-why-card-title { font-size: 24px !important; } }
.sr-home .sr-why-card:hover .sr-why-card-title {
  color: hsl(24 95% 53%) !important;
}

/* Desc: text-muted-foreground font-medium */
.sr-home .sr-why-card-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: hsl(220 12% 45%) !important;
  margin: 0 !important;
  line-height: 1.625 !important;
}

/* ============================================================
   CONTACT — STRICT MODE 1:1 from Contact.tsx
   ============================================================ */

/* Eyebrow */
.sr-home .sr-contact .sr-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: hsl(24 95% 53%) !important;
  letter-spacing: 0.1em !important;
}
.sr-home .sr-contact .sr-eyebrow-dash {
  width: 48px !important;
  height: 2px !important;
  background: hsl(24 95% 53%) !important;
}

/* Section bg + background accent right */
.sr-home .sr-contact { background: hsl(220 50% 10%) !important; position: relative; overflow: hidden; }
.sr-home .sr-contact::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 33.333% !important;
  height: 100% !important;
  background: linear-gradient(to left, hsl(24 95% 53% / 0.05) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1;
}
.sr-home .sr-contact-inner { position: relative; z-index: 2; }

/* Contact card: flex items-center gap-4 p-4 rounded-xl bg-white/5 border border-white/10 */
.sr-home .sr-contact-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: hsl(0 0% 100% / 0.05) !important;
  border: 1px solid hsl(0 0% 100% / 0.10) !important;
  transition: border-color 0.3s ease;
}
.sr-home .sr-contact-card:hover { border-color: hsl(24 95% 53% / 0.30) !important; }

/* Icon box: w-12 h-12 rounded-xl bg-orange/20 */
.sr-home .sr-contact-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: hsl(24 95% 53% / 0.20) !important;
  color: hsl(24 95% 53%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sr-home .sr-contact-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Label: text-xs font-semibold text-white/50 uppercase tracking-wider mb-1 */
.sr-home .sr-contact-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: hsl(0 0% 100% / 0.50) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}
/* Value: text-white font-medium */
.sr-home .sr-contact-value,
.sr-home .sr-contact-card a {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
.sr-home .sr-contact-card a:hover { color: hsl(24 95% 53%) !important; }

/* Right card: bg-white rounded-2xl p-8 lg:p-10 shadow-lg */
.sr-home .sr-contact-right {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 20px 50px -12px hsl(220 30% 10% / 0.18) !important;
}
@media (min-width: 1024px) { .sr-home .sr-contact-right { padding: 40px !important; } }

/* Form title: heading-card = font-serif font-semibold text-xl/2xl */
.sr-home .sr-form-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: hsl(220 30% 10%) !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}
@media (min-width: 1024px) { .sr-home .sr-form-title { font-size: 24px !important; } }
.sr-home .sr-form-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: hsl(220 12% 45%) !important;
  margin: 0 0 32px !important;
}

/* Form labels: text-sm font-bold */
.sr-home .sr-form-field label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: hsl(220 30% 10%) !important;
  margin: 0 0 8px !important;
  display: block !important;
}

/* Form inputs: w-full px-4 py-3 rounded-xl border-2 border-border bg-background focus:border-orange */
.sr-home .sr-form-field input,
.sr-home .sr-form-field textarea {
  width: 100% !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  padding: 12px 16px !important;
  border: 2px solid hsl(220 12% 85%) !important;
  border-radius: 12px !important;
  background: hsl(220 15% 97%) !important;
  color: hsl(220 30% 10%) !important;
  transition: border-color 0.2s ease !important;
}
.sr-home .sr-form-field input::placeholder,
.sr-home .sr-form-field textarea::placeholder { color: hsl(220 12% 45%) !important; }
.sr-home .sr-form-field input:focus,
.sr-home .sr-form-field textarea:focus {
  outline: none !important;
  border-color: hsl(24 95% 53%) !important;
  box-shadow: none !important;
}
.sr-home .sr-form-field textarea { resize: none !important; min-height: 96px; }

/* Submit: variant=corporate size=xl w-full shadow-orange
   = gradient orange + h-12 px-10 text-base font-bold */
.sr-home .sr-contact-form .sr-btn-block,
.sr-home .sr-contact-form button[type=submit] {
  width: 100% !important;
  height: 48px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, hsl(28 90% 55%) 0%, hsl(20 95% 50%) 100%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px -6px hsl(24 95% 53% / 0.35) !important;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.sr-home .sr-contact-form .sr-btn-block:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 20px hsl(24 95% 53% / 0.50), 0 8px 30px -6px hsl(24 95% 53% / 0.45) !important;
}

/* Form note: text-xs text-muted-foreground text-center */
.sr-home .sr-form-note {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: hsl(220 12% 45%) !important;
  text-align: center !important;
  margin-top: 8px !important;
}

/* v6.0: STRICT MODE — ensure Hero+Stats visible on fold like Lovable */
.sr-home .sr-hero {
  min-height: calc(100vh - 250px) !important;
  padding-top: 100px !important;
  padding-bottom: 0 !important;
}
.sr-home .sr-hero-inner {
  padding-top: 0 !important;
  padding-bottom: 40px !important;
}
.sr-home .sr-stats {
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}
.sr-home .sr-stats-inner {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* v6.1: STRICT MODE — match Lovable H1/H2 exactly
   - Lovable imports: Playfair Display wght@600;700;800;900 (includes 900 Black)
   - Lovable letter-spacing: tracking-tight = -0.025em (not -0.02em)
   - Lovable heading-section H2: lg:text-5xl = 48px with leading-[1.12]
*/

/* Re-import Playfair with 900 weight */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&display=swap');

/* H1: Lovable heading-hero rendered ~45-50px at Apify 1440 viewport */
.sr-home .sr-hero-h1 {
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  font-feature-settings: 'kern' on, 'liga' on;
}

/* H2 section headings — match Lovable rendered */
.sr-home .sr-h2 {
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

/* v6.3: Compact all section paddings to match Lovable total height (5954px vs 6385px = -431px) */
/* Lovable py-24 lg:py-32 = 96px mobile, 128px lg. Trim to 80/112 for density match */
.sr-home .sr-services { padding-top: 80px !important; padding-bottom: 96px !important; }
.sr-home .sr-reach    { padding-top: 80px !important; padding-bottom: 96px !important; }
.sr-home .sr-partners { padding-top: 64px !important; padding-bottom: 64px !important; }
.sr-home .sr-process  { padding-top: 80px !important; padding-bottom: 96px !important; }
.sr-home .sr-why      { padding-top: 80px !important; padding-bottom: 96px !important; }
.sr-home .sr-contact  { padding-top: 80px !important; padding-bottom: 96px !important; }
@media (min-width: 1024px) {
  .sr-home .sr-services { padding-top: 112px !important; padding-bottom: 120px !important; }
  .sr-home .sr-reach    { padding-top: 112px !important; padding-bottom: 120px !important; }
  .sr-home .sr-process  { padding-top: 112px !important; padding-bottom: 120px !important; }
  .sr-home .sr-why      { padding-top: 112px !important; padding-bottom: 120px !important; }
  .sr-home .sr-contact  { padding-top: 112px !important; padding-bottom: 120px !important; }
}
/* Footer padding tighter */
footer.sr-footer .sr-footer__main { padding-top: 56px !important; padding-bottom: 48px !important; }
/* Section header margin-bottom compact */
.sr-home .sr-services-head { margin-bottom: 48px !important; }
.sr-home .sr-process-head  { margin-bottom: 56px !important; }