/* ==========================================================================
   LEADGEN DESIGN SYSTEM v3 — "trad" family
   Override layer. Loads AFTER style.css so nothing below the fold breaks.
   Bjorn, 2026-08-14.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Base — deep forest ink, not the old muddy mid-green */
  --ink:        #0B1F14;
  --ink-2:      #12301F;
  --ink-3:      #1B4029;

  /* Brand */
  --green:      #1D6B3F;
  --green-dark: #14522F;
  --green-light:#EFF7F1;

  /* Accent — warm amber. High contrast against every green on the page,
     which is the whole point: the CTA must not be another green. */
  --accent:     #FFC24B;
  --accent-dk:  #E8A317;
  --accent-ink: #3A2A05;

  /* Neutrals */
  --text:       #14201A;
  --text-muted: #5A6B61;
  --border:     #E2EAE5;
  --white:      #fff;

  /* 960 was leaving 480px of dead margin on a 1440 screen */
  --max-w:      1200px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-md: 0 4px 18px rgba(11,31,20,.08);
  --shadow-lg: 0 18px 50px rgba(11,31,20,.20);
  --shadow-xl: 0 30px 70px rgba(11,31,20,.28);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
}

h1, h2, h3, .nav-brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -0.022em;
  line-height: 1.14;
  font-weight: 800;
  color: var(--ink);
}

h2 { font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem); margin-bottom: .75rem; }
h3 { font-size: 1.1875rem; letter-spacing: -.014em; }

.wrap, .nav-inner, .hero-inner, .footer-inner, .trust-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}

/* ==========================================================================
   NAV — transparent over the hero, solid once you scroll
   ========================================================================== */

#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: none;
  padding: 0;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

#site-nav.is-stuck {
  background: rgba(11,31,20,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 6px 26px rgba(0,0,0,.22);
}

.nav-inner { height: 80px; gap: 28px; }

/* --- Brand lockup: real wordmark, not a JPG cropped into a circle --- */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }

.nav-logo img {
  height: 42px;
  width: 42px;
  border-radius: 11px !important;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.nav-brand-text { display: flex; flex-direction: column; line-height: 1.05; }

.nav-brand-name {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

.nav-brand-sub {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }

.nav-links a {
  color: rgba(255,255,255,.86);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color .18s ease;
}
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { text-decoration: none; color: var(--accent); }
.nav-phone svg { opacity: .8; }

.nav-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,194,75,.30);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.nav-cta:hover {
  background: #FFD275;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255,194,75,.42);
}

/* ==========================================================================
   HERO — split layout. Copy left, capture card right.
   The old build stacked the form under the copy and wasted the right
   half of every desktop screen.
   ========================================================================== */

#hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: 150px 0 90px !important;
  background-color: var(--ink) !important;
  overflow: hidden;
}

/* Directional scrim: dark where the words are, image stays visible on the
   right. The old flat rgba(15,35,20,.42) blanket over an already dark forest
   photo turned the image into mud and contributed nothing. */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(97deg,
      rgba(9,26,17,.96) 0%,
      rgba(9,26,17,.88) 34%,
      rgba(9,26,17,.55) 62%,
      rgba(9,26,17,.30) 100%);
  z-index: 0;
}
/* kill the old flat overlay */
#hero::after { display: none !important; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: 64px;
  align-items: center;
  width: 100%;
}

.hero-content { position: relative; z-index: 2; padding: 0; max-width: 620px; }

/* --- Eyebrow pill --- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
}
.hero-eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,194,75,.22);
}

.hero-content h1 {
  color: #fff;
  font-size: clamp(2.35rem, 1.2rem + 3.3vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  max-width: 15ch;
  margin: 0 0 20px;
  text-shadow: none;           /* the scrim does the work now */
}
.hero-content h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-content p {
  color: rgba(255,255,255,.80);
  font-size: 1.1875rem;
  line-height: 1.62;
  max-width: 50ch;
  margin-bottom: 28px;
}

/* --- Check list --- */
.hero-checks { margin: 0 0 32px; display: grid; gap: 12px; }
.hero-checks li {
  color: rgba(255,255,255,.94);
  font-size: 1rem;
  font-weight: 500;
  padding: 0;
  gap: 12px;
  align-items: flex-start;
}
.hero-checks li::before {
  content: '';
  flex: 0 0 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255,194,75,.16);
  border: 1px solid rgba(255,194,75,.42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC24B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Social proof row --- */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hsp-av {
  width: 38px; height: 38px;
  border: 2px solid var(--ink);
  background: linear-gradient(140deg, var(--green), var(--ink-3));
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
}
.hsp-stars { color: var(--accent); letter-spacing: 2px; }
.hsp-label { color: rgba(255,255,255,.72); font-size: .8125rem; }

/* ==========================================================================
   HERO CAPTURE CARD — this is the revenue. Give it real presence.
   ========================================================================== */

.hero-form-card {
  position: relative;
  z-index: 3;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,.5);
}

.hero-form-card .hfc-head { margin-bottom: 20px; }

.hero-form-card .hfc-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.024em;
  color: var(--ink);
  line-height: 1.16;
  margin: 0 0 6px;
}
.hero-form-card .hfc-sub {
  font-size: .9375rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

#hero-inline-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
  background: transparent !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#hero-inline-form input {
  width: 100%;
  padding: 14px 16px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  font-family: 'Inter', sans-serif;
  font-size: 16px !important;
  color: var(--text) !important;
  background: #FBFCFB;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  min-width: 0 !important;
  flex: none !important;
}
#hero-inline-form input::placeholder { color: #9AA8A0; }
#hero-inline-form input:focus {
  outline: none;
  background: #fff;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 4px rgba(29,107,63,.13);
}
#hero-inline-form input[name="name"]  { grid-column: 1 / -1; }
#hero-inline-form input[name="phone"] { grid-column: 1 / 2; }
#hero-inline-form input[name="zip"]   { grid-column: 2 / 3; }

#hero-inline-form button[type="submit"] {
  grid-column: 1 / -1;
  width: 100%;
  padding: 16px 24px !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800 !important;
  font-size: 1.0625rem !important;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,194,75,.34);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  min-width: 0 !important;
  flex: none !important;
}
#hero-inline-form button[type="submit"]:hover:not(:disabled) {
  background: #FFD275 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255,194,75,.44);
}
#hero-inline-form button[type="submit"]:disabled { opacity: .72; cursor: default; }

#hero-inline-msg {
  grid-column: 1 / -1;
  margin: 2px 0 0 !important;
  font-size: .8125rem !important;
  color: var(--text-muted) !important;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.45;
}

/* trust strip under the card */
.hfc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.hfc-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
}
.hfc-trust span::before {
  content: '';
  width: 15px; height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6B3F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* The old duplicate "FÅ OFFERT" button sat directly under the form.
   Two competing primary CTAs 20px apart is not a choice, it is noise. */
#hero > .hero-content > .btn.open-lead-form,
.hero-content > .btn.open-lead-form { display: none !important; }

/* ==========================================================================
   HERO CARD CTA — the button that replaced the inline form
   ==========================================================================
   The card used to hold #hero-inline-form (Namn / Telefon / Postnummer). It
   was measured losing to the modal about 8 to 1 on the Veravi sites, and worse
   on quality: 3 leads with 0 email addresses and 0 ever contacted, against 41
   leads with 37 emails and 2 won. See the block comment in index.php.

   TWO THINGS TO KNOW BEFORE YOU TOUCH THIS:

   1. `.hfc-cta` is deliberately NOT `.btn`. The rule immediately above hides
      `.hero-content > .btn.open-lead-form` with !important, because the pack
      once shipped a duplicate CTA next to the form. `.hfc-cta` sits inside
      `.hero-form-card`, not `.hero-content`, so it is not caught by that rule
      — but naming it `.btn` and moving it one level up would silently make the
      hero's only CTA invisible, with no error and no visual clue. That exact
      hide rule is what corrupted the first round of form-vs-button data.

   2. `#hero-inline-form` rules further up this file are now dead on any site
      that has made this swap. They are left in place because the pack's own
      index.php still ships the form, and deleting them would break the pack
      sites that have not been converted yet.
   ========================================================================== */
.hero-form-card .hfc-cta {
  display: block;
  width: 100%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  padding: 18px 24px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,194,75,.34);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.hero-form-card .hfc-cta:hover {
  background: #FFD275;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(255,194,75,.46);
}
.hero-form-card .hfc-cta:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.hero-form-card .hfc-call {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
}
.hero-form-card .hfc-call:hover { text-decoration: underline; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: var(--accent-ink) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  padding: 16px 34px;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(255,194,75,.30);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover {
  background: #FFD275;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255,194,75,.42);
  text-decoration: none;
}

#hero .btn {
  background: var(--accent);
  color: var(--accent-ink) !important;
  border-radius: var(--r-sm);
}

.btn-outline {
  background: transparent;
  color: var(--ink) !important;
  border: 1.5px solid var(--border);
  box-shadow: none;
}
.btn-outline:hover { background: var(--green-light); border-color: var(--green); transform: translateY(-1px); box-shadow: none; }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */

/* Every selector here is scoped to #trust ON PURPOSE.
   `.trust-item` is NOT a unique class name. parts/trust-strip.php, added
   2026-08-14, reuses it on a WHITE background and therefore sets a DARK
   colour. Both were written as a bare `.trust-item` at equal specificity, so
   the later declaration won and painted #1a3a26 text onto this bar's #12301F
   background: contrast ratio 1.14:1, invisible on a phone. Only the ticks
   survived, because `.trust-item::before` in style.css carries its own green.
   Scoping BOTH blocks means neither can reach the other again. Do not
   un-scope this to "clean it up". */
#trust { background: var(--ink-2); border: 0; }
#trust .trust-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; padding-top: 22px; padding-bottom: 22px; }
#trust .trust-item { color: rgba(255,255,255,.86); font-size: .9375rem; font-weight: 600; }

/* ==========================================================================
   CARDS — lift the whole page to the same radius/shadow language
   ========================================================================== */

.service-card, .method-card, .gr-card, .faq-item, .owner-card, .rut-box, .rating-badge {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover, .method-card:hover, .gr-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #CFE0D5;
}

/* --------------------------------------------------------------------------
   FAQ — .faq-item is a CARD now, so it needs card padding
   --------------------------------------------------------------------------
   Same class-sharing failure as the #trust bar. style.css designed .faq-item
   as a divider LIST row: `summary { padding: 1.25rem 0 }` is vertical-only,
   which is correct when there is no border for the text to sit against. The
   CARDS group selector directly above then promoted .faq-item to a bordered,
   rounded, shadowed card and added no horizontal padding, so every question
   and answer rendered flush against its own border. It shipped that way and
   sat live for four days, because at desktop width a 1px edge next to text
   just reads as "tight" -- it is only unmistakable at 375px.

   THREE consumers share this class and all three must keep working:
     index.php        <details class="faq-item"><summary>..</summary><p>..</p>
     town.php:221     <div class="faq-item"><h3>..</h3><p>..</p></div>
     service.php:203  same <div> form
   So the padding goes on the ITEM, not on `summary`. Putting it on `summary`
   would have padded the homepage accordion and left both <div> forms flush,
   which is the bug again on the pages nobody screenshots.

   Only index.php wraps its items in `.faq-list`. town.php and service.php
   drop the <div class="faq-item"> straight into `.wrap`, so `#faq .faq-list
   { max-width: 780px; margin: 2rem auto 0 }` in style.css never applied
   there -- those cards ran the full width of the wrap with zero gap between
   them. Hence max-width and the bottom margin live on the item, not on the
   list: that is the one place all three templates actually share.

   Restated below, deliberately: `.faq-item:last-child { border-bottom: none }`
   (style.css:514). Correct for the divider list, wrong for cards -- it strips
   the bottom edge off the last card only. It cannot be fixed by source order,
   because :last-child is (0,2,0) and outranks the single-class card selector
   at (0,1,0) no matter where either one sits. style.css is left intact so it
   remains a coherent standalone design; the card decision is overridden here,
   in the layer that made it.

   #faq prefix everywhere = (1,1,0), which clears both (0,2,0) and the base
   (0,1,1) `.faq-item p` rule without needing !important anywhere.
   -------------------------------------------------------------------------- */

#faq .faq-item {
  background: #fff;
  padding: 0 22px;
  max-width: 780px;
  margin: 0 auto 14px;
}
/* Full border on the last card, and no trailing gap under the group. */
#faq .faq-item:last-child { border-bottom: 1px solid var(--border); margin-bottom: 0; }

/* Vertical rhythm stays on the children so the <details> and <div> forms end
   up the same height. Borders on all four sides stop margin collapse, so the
   item itself needs no vertical padding. */
#faq .faq-item summary { padding: 1.15rem 0; }
#faq .faq-item h3 { margin: 1.15rem 0 .5rem; font-size: 1.05rem; line-height: 1.4; }
/* style.css insets the answer with `padding-right: 2rem` to keep it clear of
   the +/- glyph. The glyph is now inside the card padding, so that inset is
   just an asymmetric card. */
#faq .faq-item p { padding-right: 0; }

@media (max-width: 600px) {
  #faq .faq-item { padding: 0 16px; }
}

.services-grid, .methods-grid { gap: 24px; }

.area-pill {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 600;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.area-pill:hover { background: var(--green); border-color: var(--green); color: #fff; }

.section-intro { max-width: 62ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

#site-footer { background: var(--ink); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.10); }

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-content { max-width: 640px; }
  #hero { min-height: 0; padding: 118px 0 64px !important; }
  .hero-content h1 { max-width: 18ch; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-inner { height: 68px; gap: 12px; }
  .nav-logo img { height: 38px; width: 38px; }
  .nav-brand-name { font-size: 1rem; }
  .nav-brand-sub { display: none; }

  #hero { padding: 104px 0 52px !important; }
  #hero::before {
    background: linear-gradient(178deg, rgba(9,26,17,.86) 0%, rgba(9,26,17,.93) 42%, rgba(9,26,17,.97) 100%);
  }

  .hero-eyebrow { margin-bottom: 18px; font-size: .6875rem; padding: 7px 14px; }
  .hero-content h1 { font-size: clamp(2rem, 1.1rem + 4.4vw, 2.6rem); max-width: 100%; }
  .hero-content p { font-size: 1.0625rem; margin-bottom: 22px; }
  .hero-checks { gap: 10px; margin-bottom: 26px; }
  .hero-checks li { font-size: .9375rem; }

  .hero-form-card { padding: 22px; border-radius: var(--r-md); }
  .hero-form-card .hfc-title { font-size: 1.3125rem; }

  /* Scoped: unscoped these also shrank the trust-strip badges on mobile. */
  #trust .trust-inner { gap: 12px 24px; }
  #trust .trust-item { font-size: .875rem; }
}

@media (max-width: 420px) {
  #hero-inline-form { grid-template-columns: 1fr; }
  #hero-inline-form input[name="phone"],
  #hero-inline-form input[name="zip"] { grid-column: 1 / -1; }
  .hero-form-card { padding: 18px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, .nav-cta:hover, .service-card:hover { transform: none; }
}

/* ==========================================================================
   MOBILE HERO CORRECTIONS — 2026-08-14, after looking at the render
   Two faults the desktop view hid:
   (1) the mobile scrim was so heavy the photo read as a flat dark block
   (2) the capture card sat below the checklist and the social proof, which
       pushed the only CTA off the first screen. That is the exact defect
       measured on arborististockholm.se. Do not reintroduce it.
   ========================================================================== */

@media (max-width: 860px) {

  /* let the photograph actually be a photograph */
  #hero::before {
    background:
      linear-gradient(176deg,
        rgba(9,26,17,.70) 0%,
        rgba(9,26,17,.80) 38%,
        rgba(9,26,17,.92) 78%,
        rgba(9,26,17,.97) 100%);
  }

  /* flatten the wrapper so every hero element can be ordered independently */
  .hero-inner   { display: flex; flex-direction: column; gap: 0; }
  .hero-content { display: contents; }

  .hero-eyebrow      { order: 1; align-self: flex-start; }
  .hero-content h1   { order: 2; }
  .hero-content > p  { order: 3; }
  .hero-form-card    { order: 4; margin: 4px 0 28px; }
  .hero-checks       { order: 5; }
  .hero-social-proof { order: 6; }

  /* eyebrow: keep it to one line, it is a label not a sentence */
  .hero-eyebrow {
    font-size: .625rem;
    letter-spacing: .09em;
    padding: 6px 13px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
  }

  .hero-content p { font-size: 1rem; margin-bottom: 24px; max-width: 100%; }
  .hero-checks { margin-top: 4px; }
  .hero-social-proof { margin-top: 22px; }
}

/* Below the fold on a phone the checklist is the supporting act, so it can
   afford to be quieter than the card above it. */
@media (max-width: 860px) {
  .hero-checks li { font-size: .9063rem; color: rgba(255,255,255,.88); }
}

/* ==========================================================================
   AREA PILLS — contrast fix, 2026-08-14
   I overrode .area-pill's background from var(--green) to #fff and did not
   override the paired color:#fff that came with it. White text on a white
   pill. The town names were invisible on every trad site.
   Rule going forward: never override a background in this file without
   restating the colour on the same rule.
   ========================================================================== */

.area-pill {
  background: #fff;
  color: var(--ink) !important;
  border: 1px solid #DCE6DF;
  font-weight: 600;
  font-size: .9375rem;
  padding: .55rem 1.15rem;
  box-shadow: 0 1px 3px rgba(11,31,20,.05);
}
.area-pill:hover,
.area-pill:focus-visible {
  background: var(--green) !important;
  border-color: var(--green);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(29,107,63,.24);
}

/* the areas section was a warm cream that fought the forest palette */
#omraden { background: #F4F7F4; }
#omraden .wrap { max-width: var(--max-w); }

/* keep focus visible for keyboard users across the new components */
.area-pill:focus-visible,
.btn:focus-visible,
.nav-cta:focus-visible,
.nav-links a:focus-visible,
#hero-inline-form button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ==========================================================================
   CONTRAST PASS — 2026-08-14, driven by contrast-audit.mjs not by eye
   ========================================================================== */

/* The original rule is `color: var(--green) !important`, so the v3 override
   silently lost and the header CTA rendered green-on-amber at 4.05:1.
   Matching !important is the correct fix here, not raising specificity. */
.nav-cta,
.nav-cta:hover {
  color: var(--accent-ink) !important;
}

/* Google/Reco gold on white measured 1.71:1. Keep the gold reading as gold
   but make it legible; stars are proof, they have to be seen. */
.gr-stars, .gr-stars-sm, .rb-stars, .hsp-stars { color: #D98F00; }
#hero .hsp-stars, .hero-social-proof .hsp-stars { color: var(--accent); } /* on dark, keep bright */

/* #999 on white = 2.85:1 */
.gr-date { color: #6B7280; }

/* footer small print was rgba(255,255,255,.4) = 3.77:1 on the new darker ink */
#site-footer .footer-bottom p,
#site-footer .footer-bottom { color: rgba(255,255,255,.62); }

/* the Google 'G' chip: white on #4285F4 is 3.56:1, bump the blue down */
.gr-logo, .gr-g { background: #1A66D9 !important; }

/* Stars: the estate used three different golds (#F5A623, #fbbc04, #D98F00),
   none of which cleared AA on white. Unified to one deep amber that does.
   Measured 4.8:1. On dark backgrounds the bright accent stays. */
.gr-stars, .gr-stars-sm, .rb-stars,
.rating-badge .rb-stars, .gr-card .gr-stars-sm { color: #A66200 !important; }
.hero-social-proof .hsp-stars, #hero .hsp-stars { color: var(--accent) !important; }

/* ---------------------------------------------------------------------------
   Area pills are now anchors for the five towns that have their own page.
   Anchors inherit the theme's link underline and link colour, which would
   both undo the contrast fix made earlier today. Restate explicitly rather
   than relying on inheritance: this is the exact class of bug that shipped
   white text on a white pill.
--------------------------------------------------------------------------- */
a.area-pill,
a.area-pill:link,
a.area-pill:visited {
  text-decoration: none !important;
  color: var(--ink) !important;
  display: inline-block;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
a.area-pill:hover,
a.area-pill:focus-visible {
  background: var(--green) !important;
  border-color: var(--green);
  color: #fff !important;
  transform: translateY(-1px);
}
a.area-pill:focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   #cta-bottom sits on dark green. The theme's default link colour is also a
   dark green (rgb(61,107,71)), which lands at contrast 1.43 against it, i.e.
   invisible. Caught by contrast-audit.mjs on the Sollentuna town page before
   release. Restate the colour instead of inheriting it.
--------------------------------------------------------------------------- */
#cta-bottom a,
#cta-bottom a:link,
#cta-bottom a:visited {
  color: var(--accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
#cta-bottom a:hover { color: #fff !important; }


/* ---- footer: town cross-links (added 2026-08-14) ----------------------
   The ortssidor had no footer at all, so they were link dead ends. The
   Orter column is now generated from town-data.php. .footer-here marks
   the current page: still visible, deliberately NOT a self-link. */
.footer-col .footer-here {
  display: block;
  color: rgba(255,255,255,.52);
  font-size: .9375rem;
  padding: 4px 0;
  cursor: default;
}
#narliggande { padding: 56px 20px; background: var(--green-pale, #f2f6f2); }
#narliggande .area-pills { margin-top: 18px; }

/* ---- service tier (added 2026-08-14) ----------------------------------
   Four service pages: stubbfrasning, sektionsfallning, beskarning,
   bortforsling. Only services with a measured Search Console demand
   signal got a page, so this grid is small on purpose.
   #andra-tjanster reuses #narliggande's treatment but must not share its
   selector, because a service page renders andra-tjanster and a town page
   renders narliggande and they need to stay independently adjustable. */
#steg { padding: 56px 20px; }
.steg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 24px;
}
.steg-item {
  background: #fff;
  border: 1px solid var(--line, #dfe6e0);
  border-radius: 10px;
  padding: 20px 22px;
}
.steg-item h3 {
  margin: 0 0 8px 0;
  font-size: 1.0625rem;
  color: var(--green-dk, #1a3a26);
}
.steg-item p { margin: 0; font-size: .9375rem; line-height: 1.6; }
#andra-tjanster { padding: 56px 20px; background: var(--green-pale, #f2f6f2); }
#andra-tjanster .area-pills { margin-top: 18px; }

/* ===========================================================
   TEMPLATE PASS 2026-08-14
   Appended to redesign.css, which is enqueued after style.css,
   so anything here deliberately wins over the base sheet.
   =========================================================== */

/* --- Breadcrumbs -------------------------------------------------------
   Visible trail only. The JSON-LD BreadcrumbList is Yoast's job, see
   parts/breadcrumbs.php. Sits directly under the hero on every template. */
.breadcrumbs {
  background: var(--green-pale, #f2f6f2);
  border-bottom: 1px solid rgba(26, 58, 38, .08);
  padding: 12px 20px;
  font-size: .8125rem;
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before {
  content: "/";
  color: rgba(26, 58, 38, .38);
  font-size: .8125rem;
}
.breadcrumbs a {
  color: var(--green-dk, #1a3a26);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumbs a:hover { border-bottom-color: currentColor; }
/* .62 was 3.81:1 against the #f2f6f2 bar and failed WCAG AA for 13px text.
   .72 is 5.03:1 and still reads as muted next to the full-strength links.
   Score against --green-pale, NOT white: the bar is tinted, so checking this
   against a white page background flatters it by about half a point. */
.breadcrumbs [aria-current="page"] { color: rgba(26, 58, 38, .72); }

/* --- Trust strip -------------------------------------------------------
   Real, attributed, third-party proof only. Note this is NOT .lf-trust-strip,
   which is the small text row inside the lead form modal. */
.trust-strip {
  background: #fff;
  border-bottom: 1px solid rgba(26, 58, 38, .10);
  padding: 18px 20px;
}
.trust-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 34px;
}
/* Scoped to .trust-strip ON PURPOSE. These rules previously used a bare
   `.trust-item`, which is the SAME class the dark homepage trust bar uses.
   This block loads later, so its dark colour overrode the bar's white and made
   the homepage USPs invisible. See the TRUST BAR block above. */
.trust-strip .trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--green-dk, #1a3a26);
}
.trust-strip a.trust-item:hover .trust-text strong { border-bottom: 1px solid currentColor; }
.trust-strip .trust-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 auto;
}
.trust-strip .trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: .8125rem;
  color: rgba(26, 58, 38, .70);
}
.trust-strip .trust-text strong {
  font-size: .9375rem;
  color: var(--green-dk, #1a3a26);
  display: inline-block;
}
.trust-strip .trust-item--plain { padding-left: 2px; }

@media (max-width: 720px) {
  .trust-strip .wrap { gap: 12px 20px; }
  .trust-strip .trust-item img { width: 40px; height: 40px; }
  .trust-strip .trust-text { font-size: .75rem; }
  .trust-strip .trust-text strong { font-size: .875rem; }
}

/* --- Town gallery ------------------------------------------------------
   .gallery-grid already exists in style.css (3 columns, 200px tall, 2 columns
   under 900px). Only the <figure> wrapper needs resetting. */
#galleri .gallery-item { margin: 0; }
#galleri { padding: 56px 20px; }

/* --- Media split -------------------------------------------------------
   Text beside the per-service card image on the service pages. Collapses to
   a single column on mobile with the image last, so the copy still leads. */
.media-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 36px;
  align-items: center;
  margin-top: 18px;
}
.media-split-text h2 { margin-top: 0; }
.media-split-text p { margin-bottom: 0; }
.media-split-img { margin: 0; }
.media-split-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
@media (max-width: 860px) {
  .media-split { grid-template-columns: 1fr; gap: 22px; }
}

/* --- Generic page ------------------------------------------------------
   /om-oss/ and /kontakta-oss/ now render the shared chrome. The page body
   opens with an H2 because the template H1 is authoritative, see the
   trad_demote_content_h1 filter in page.php. */
.generic-page .page-body h2:first-child { margin-top: 0; }
.generic-page .page-cta-box h2 {
  font-size: 1.35rem;
  margin: 0 0 8px;
}

/* ==========================================================================
   SOCIAL PROOF — the merged review section
   Markup: parts/social-proof.php   Data: social-proof-data.php
   Locked into the pack 2026-08-22 after shipping on six Veravi sites.
   ==========================================================================

   Replaces #ratings + #google-reviews, which were two adjacent sections
   restating the same two scores, and one of which was Google-branded while
   carrying Reco reviews.

   THE DESIGN IS SUBTRACTION. The first merged version was factually correct
   and still read as chaotic. Rendered and counted: ten white boxes in four
   different shadow/radius/padding treatments stacked vertically, and the fact
   "4,9 / 226 / Reco" stated SIX separate times — claim paragraph, score chip,
   award badge, inside the Reco iframe, twice per card (coloured pill AND a
   "Reco-verifierad kund" footer one line apart), and again on the CTA button.

   So three rules hold this together. Breaking one is how it becomes cluttered
   again:
     1. ONE SURFACE TREATMENT. The review card is the only box in the section.
        Scores, awards and CTAs are bare content on hairline rules.
     2. EACH FACT ONCE.
     3. COLOUR ONLY ON THE PLATFORM MARKS AND THE STARS.

   Measured on the six sites: mobile 1852px -> 1415px, desktop 1096 -> 904.

   DEGRADATION IS AUTOMATIC. There is no google-only or reco-only variant of
   this block and there must not be. The renderer emits fewer elements and the
   rules below narrow: the `+` divider cannot fire on one score, :only-child
   un-stretches it on a phone, the badge rail and the disclosure are simply
   absent, and the per-card source pill is not rendered at all when only one
   platform is claimed (with one source the pill distinguishes nothing and
   becomes the exact per-card repetition this design removed).

   The old #ratings / #google-reviews / .gr-header / .gr-google-badge rules are
   left in style.css ON PURPOSE. They match nothing once a site is on this
   partial, but ~14 other tree sites share this stylesheet lineage and still
   render those sections. Do not delete them from style.css. Everything below
   is scoped to #social-proof or to an .sp-* class that exists only here, so it
   cannot leak into them.
   ========================================================================== */

#social-proof { background: #f7f9f7; padding: 88px 20px; }
#social-proof .wrap { max-width: 1080px; margin: 0 auto; }

/* --- header: the claim on the left, the scores on a hairline rail.
       v1 made each score a white card with a drop shadow, which put two more
       boxes on a page that already had eight. A number this size does not
       need a container to be seen. --- */
.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap; margin-bottom: 30px;
}
.sp-claim { flex: 1 1 340px; }
.sp-claim h2 {
  margin: 0 0 8px; font-size: 2rem; line-height: 1.15;
  letter-spacing: -0.02em; color: #16281a;
}
.sp-claim p { margin: 0; color: #6b7280; font-size: 0.95rem; line-height: 1.6; max-width: 40ch; }

.sp-scores { display: flex; align-items: stretch; }
/* Dividers via the adjacent-sibling selector, never `border-left` on all plus
   a `:first-child` reset. The reset silently fails the moment anything else is
   the container's first element, and that is exactly what happened to
   .ratings-badges below: it rendered a stray rule to the LEFT of the first
   badge. `x + x` cannot fail that way, and it is also what makes the
   single-platform case free: with one score there is no sibling, so there is
   no divider to suppress. */
.sp-score {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  padding: 4px 28px 4px 0; background: none; box-shadow: none;
  border-radius: 0; border: 0; transition: opacity .18s;
}
.sp-score + .sp-score { border-left: 1px solid rgba(22,40,26,0.12); padding-left: 28px; }
.sp-score:last-child  { padding-right: 0; }
.sp-score:hover { transform: none; box-shadow: none; opacity: 0.62; }
.sp-score-info { display: flex; flex-direction: column; gap: 2px; }
.sp-score .gr-score {
  font-size: 2.1rem; font-weight: 700; color: #16281a;
  line-height: 1; letter-spacing: -0.03em;
}
/* Size and tracking only. The star COLOUR is owned by the contrast override at
   the bottom of this file (#A66200 !important, measured 4.8:1 on white), which
   beats any specificity here. Do not restate a gold in this block: you will
   either write a dead declaration or, worse, add !important and reintroduce
   the 1.71:1 gold that override exists to kill. */
.sp-score .gr-stars { font-size: 0.8rem; letter-spacing: 0.09em; line-height: 1; }
.sp-score .gr-count { font-size: 0.72rem; color: #8a9089; white-space: nowrap; }

/* platform marks. These colours are the ONLY brand colour in the section and
   they carry the whole multi-platform argument. Everything else is greyscale
   plus the one dark green. Do not add a third hue for decoration — but DO add
   one here if you add a genuine third platform, keyed to match the array key
   in social-proof-data.php, because the renderer emits .sp-mark-<key>. */
.sp-mark {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: #fff; font-family: arial, sans-serif;
}
.sp-mark-google { background: #1A66D9; }
.sp-mark-reco   { background: #1F3D2B; }
/* `.sp-mark.sp-mark-sm`, NOT a bare `.sp-mark-sm`. Bare, it is (0,1,0) --
   exactly the specificity of the `.sp-mark` base rule -- so it wins only on
   source order, and the phone media query below restates `.sp-mark` at 28px
   AFTER this point, which silently defeated it. Measured on all six live
   sites: the CTA marks rendered 28px on mobile, the same size as the headline
   score marks, flattening the hierarchy so a secondary "go read the reviews"
   link carried an icon as loud as the score itself. Doubling the class makes
   it (0,2,0), which a later same-specificity rule cannot beat. Same failure
   mode as the `.trust-item` and `.faq-item` bugs: a modifier that works only
   because of where it happens to sit in the file. */
.sp-mark.sp-mark-sm { width: 20px; height: 20px; font-size: 0.68rem; }

/* --- award badges: an editorial rail, not two more cards. They are
       endorsements, so they should support the claim above rather than
       compete with it. Hairline top and bottom, no box, no shadow.
       width:fit-content, not full bleed: stretched to the 1080px wrap the rail
       left ~250px of empty ruled space each side of two centred badges, which
       reads as an unfinished table rather than a deliberate rule. --- */
#social-proof .ratings-badges {
  display: flex; justify-content: center; align-items: stretch; gap: 0;
  width: fit-content; margin: 0 auto 34px; padding: 0;
  border-top: 1px solid rgba(22,40,26,0.10);
  border-bottom: 1px solid rgba(22,40,26,0.10);
  background: none; box-shadow: none;
}
/* `border: 0`, not `border-left: 0`. The CARDS block earlier in this file puts
   a full border on .rating-badge, so zeroing one side left the other three
   drawing and the rail rendered stray vertical rules around the first badge.
   When you are undoing an inherited box, undo the whole box. */
#social-proof .rating-badge {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: none; box-shadow: none; border-radius: 0; width: auto;
  padding: 16px 34px; border: 0; transition: opacity .18s;
}
#social-proof .rating-badge + .rating-badge {
  border-left: 1px solid rgba(22,40,26,0.10);
}
#social-proof .rating-badge:hover { transform: none; box-shadow: none; opacity: 0.62; }
/* 52px, not 40px. At 40 the concentric-ring artwork turned to grey mush: the
   "4" and the "10" were unreadable, so the section was spending vertical space
   on a decoration nobody could parse.
   NO mix-blend-mode. It used to be here to hide the source JPGs' background,
   but multiply only nulls PURE WHITE, and reco-badge-rekommenderad's field was
   rgb(225,236,242), so it never worked and that badge sat in a visible pale
   blue box. A blend mode also makes the asset depend on the section background
   colour; alpha does not. Badges must be alpha PNGs cut with
   tools/badge-alpha.cjs. */
#social-proof .rating-badge img {
  width: 52px !important; height: 52px !important; object-fit: contain;
}
#social-proof .rating-badge-info  { display: flex; flex-direction: column; gap: 1px; }
#social-proof .rating-badge-label { font-size: 0.82rem; font-weight: 600; color: #16281a; }
#social-proof .rating-badge-sub   { font-size: 0.72rem; color: #8a9089; }

/* --- review cards: one hairline, no shadow, more air, no italic.
       v1 stacked italic + literal quote marks + a drop shadow + a coloured
       pill + a footer on every card. Five decorations on one testimonial. --- */
#social-proof .gr-cards { gap: 20px; margin: 0 0 30px; }
#social-proof .gr-card {
  background: #fff; border: 1px solid #e6eae6; border-radius: 18px;
  box-shadow: none; padding: 26px 24px 28px;
}
#social-proof .gr-card-top { align-items: center; gap: 12px; margin-bottom: 15px; }
#social-proof .gr-avatar {
  width: 38px; height: 38px; font-size: 0.9rem; font-weight: 600;
  background: #1F3D2B; color: #fff; flex-shrink: 0;
}
#social-proof .gr-name { font-size: 0.94rem; font-weight: 600; color: #16281a; }
/* size only; colour is the contrast override, same as .gr-stars above */
#social-proof .gr-stars-sm { font-size: 0.72rem; letter-spacing: 0.08em; }
#social-proof .gr-text {
  font-style: normal; font-size: 0.95rem; line-height: 1.7;
  color: #43483f; margin: 0;
}

/* Per-card source mark. Rendered ONLY on multi-platform sites — see
   parts/social-proof.php. v1 made this a filled pill AND kept a
   "Reco-verifierad kund" footer underneath, so every card claimed its source
   twice, one line apart. The footer is gone and the pill loses its fill: the
   word set in the platform's own colour is enough, and it stays readable as a
   distinction once two platforms sit in the same row. Class is .gr-src-<key>,
   keyed to social-proof-data.php. */
.gr-src {
  margin-left: auto; flex-shrink: 0; align-self: center;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 0; border-radius: 0;
  background: none; line-height: 1; white-space: nowrap;
}
.gr-src-reco   { color: #6f7d72; }
.gr-src-google { color: #7b96c4; }

/* --- verification: the review widget, folded away. Reco-only in practice.
       It is the one element a visitor cannot suspect the client of writing, so
       it is kept. But inline it was actively harmful: an unstyleable iframe
       with its own font, its own multicolour logo, its own info buttons, its
       own carousel that CLIPS mid-word at 1440px, its own duplicate of the
       score, its own competing "Läs alla omdömen" CTA and its own grey legal
       paragraph — 225px restating the number 40px above it.
       Collapsed, the claim is made in text we control and the proof is one
       click away. loading="lazy" inside a closed <details> also means the
       iframe never loads unless a visitor asks for it. On a Google-only site
       this block matches nothing, which is the intended degradation. --- */
.sp-verify { margin: 0 0 26px; text-align: center; }
.sp-verify > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; font-size: 0.82rem; color: #6b7280;
  padding: 9px 16px; border-radius: 999px; transition: background .18s, color .18s;
}
.sp-verify > summary::-webkit-details-marker { display: none; }
.sp-verify > summary::marker { content: ''; }
.sp-verify > summary:hover { background: #edf2ed; color: #1F3D2B; }
.sp-verify > summary .sp-chev { transition: transform .2s; font-size: 0.7rem; }
.sp-verify[open] > summary .sp-chev { transform: rotate(180deg); }
.sp-verify .reco-widget-wrap {
  max-width: 760px; margin: 14px auto 0; background: #fff;
  border: 1px solid #e6eae6; border-radius: 16px; padding: 6px; overflow: hidden;
}

/* --- CTAs: text links, not buttons.
       These say "go read reviews", which is not the money action. As solid
       outlined buttons they out-weighted "Få offert" in the nav. As quiet
       links they still get clicked and stop competing.
       No permanent underline: a border-bottom spans the arrow glyph too, which
       left the rule running past the text with a visible gap under the arrow.
       The platform mark plus bold green already reads as a link. --- */
.sp-cta {
  display: flex; justify-content: center; align-items: center;
  gap: 10px 26px; flex-wrap: wrap;
}
.sp-cta .gr-cta-link {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  background: none; border: 0; box-shadow: none; padding: 0;
  font-size: 0.9rem; font-weight: 600; color: #1F3D2B;
  text-decoration: none; text-underline-offset: 4px; transition: opacity .18s;
}
.sp-cta .gr-cta-link:hover { text-decoration: underline; opacity: 0.78; }
.sp-cta .gr-cta-link::after {
  content: '\2192'; font-weight: 400; opacity: 0.45;
  transition: transform .18s; margin-left: -2px;
}
.sp-cta .gr-cta-link:hover::after { transform: translateX(3px); }
.sp-leave { text-align: center; margin: 16px 0 0; font-size: 0.78rem; }
.sp-leave a { color: #9aa29a; text-decoration: underline; text-underline-offset: 2px; }
.sp-leave a:hover { color: #1F3D2B; }

/* ---------------- tablet ---------------- */
@media (max-width: 900px) {
  #social-proof { padding: 64px 20px; }
  .sp-header { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* .sp-claim is `flex: 1 1 340px` above, which is a WIDTH basis only while
     .sp-header is a row. Once it becomes a column the 340px is a HEIGHT basis,
     and the claim block reserved 340px to hold 88px of text: 252px of empty
     space, most of a phone screen. Reset the basis WITH the direction change.
     Same shape of bug as the hero `display:contents` one: a rule that is
     correct in one layout context and silently wrong in another. If you touch
     .sp-header's direction, check this too. */
  .sp-claim  { flex: 0 0 auto; width: 100%; }
  .sp-claim h2 { font-size: 1.75rem; }
  .sp-scores { width: 100%; }
  .sp-score  { flex: 1 1 0; min-width: 0; }
  /* one platform: do not stretch a lone score across the full width, it leaves
     the number marooned on the left of an empty rail */
  .sp-score:only-child { flex: 0 0 auto; }
}

/* ---------------- phone ----------------
   Measured, not guessed. An earlier draft stacked .sp-scores vertically and
   the section came out 2380px at 390px, TALLER than the two sections it
   replaced (2168px). Two scores each hold one short line and sit side by side
   comfortably at 358px. If you edit this block, re-measure at 390px. */
@media (max-width: 700px) {
  #social-proof { padding: 48px 16px; }
  .sp-header   { gap: 18px; margin-bottom: 22px; }
  .sp-claim h2 { font-size: 1.5rem; }
  .sp-claim p  { font-size: 0.88rem; }

  .sp-scores { flex-direction: row; gap: 0; flex-wrap: nowrap; }
  .sp-score  { flex: 1 1 0; min-width: 0; padding: 2px 14px; gap: 10px; }
  .sp-score:only-child { flex: 0 0 auto; padding-left: 0; }
  .sp-mark   { width: 28px; height: 28px; font-size: 0.88rem; }
  .sp-score .gr-score { font-size: 1.6rem; }
  .sp-score .gr-stars { font-size: 0.68rem; letter-spacing: 0.05em; }
  /* base rule is nowrap, which overflows once the score is half-width */
  .sp-score .gr-count { font-size: 0.66rem; white-space: normal; line-height: 1.3; }

  /* Award badges stay side by side and let the label wrap, rather than
     stacking. v1 stacked them into two full-width cards, which cost ~230px for
     the least-read element in the section. Side by side at 390px gives each
     ~163px, which fits "RECO Rekommenderad" on two lines cleanly.
     Full width on a phone: fit-content leaves the rail floating narrow. */
  #social-proof .ratings-badges { width: 100%; margin-bottom: 24px; }
  #social-proof .rating-badge   { flex: 1 1 0; min-width: 0; padding: 13px 10px; gap: 10px; }
  #social-proof .rating-badge:only-child { flex: 0 0 auto; margin: 0 auto; }
  #social-proof .rating-badge img { width: 44px !important; height: 44px !important; }
  #social-proof .rating-badge-label { font-size: 0.74rem; line-height: 1.25; white-space: normal; }
  #social-proof .rating-badge-sub   { font-size: 0.66rem; line-height: 1.25; }

  #social-proof .gr-cards { gap: 14px; margin-bottom: 22px; }
  #social-proof .gr-card  { padding: 20px 18px 22px; border-radius: 16px; }
  #social-proof .gr-text  { font-size: 0.92rem; line-height: 1.65; }

  .sp-verify { margin-bottom: 20px; }
  .sp-verify > summary { font-size: 0.78rem; padding: 8px 12px; }

  .sp-cta { flex-direction: column; align-items: center; gap: 14px; }
  .sp-cta .gr-cta-link { font-size: 0.88rem; }
  .sp-leave { margin-top: 16px; }
}


/* ==========================================================================
   TOWN PAGES (template: town.php, routed from page.php)
   Added 2026-08-22.
   ==========================================================================

   Before this block the eight town pages rendered through page.php's single
   .page-body div: a flat green #page-hero band, then ~4 000 characters of
   bespoke local copy as one undifferentiated column, then a CTA. No images, no
   FAQ cards, no area list, no section rhythm. The copy was good. Nothing
   rendered it as a page.

   Everything here is layout for markup that town.php emits. It adds three new
   section ids/classes -- #lokalt, .town-block, .town-prose -- and reuses
   #metoder, #omraden, #galleri, #faq, #narliggande and #cta-bottom, all of
   which already carry their own rules in style.css and above.

   CASCADE NOTES, because two of these classes are near-misses for existing
   ones and the estate has already lost two deploys to exactly that:

   - `.town-prose` is a NEW name on purpose. The obvious move was to reuse
     `.page-body`, which already has the right typography. But `.page-body`
     carries `margin-bottom: 2.5rem` for its position inside #page-content, and
     `.generic-page .page-body h2:first-child` exists too. Reusing it would
     have meant a shared bare class serving two components again, which is the
     single failure mode behind three of the four v4 bugs.

   - `.town-page #hero` is (1,1,0) and beats the bare `#hero` at (1,0,0), so
     the min-height override below WOULD also win inside the mobile media
     queries further up this file, where `#hero { min-height: 0 }` deliberately
     collapses the hero. That would have forced a 620px hero onto phones. It is
     therefore fenced inside `@media (min-width: 901px)`. Do not lift it out.
--------------------------------------------------------------------------- */

/* The town hero carries a shorter lede than the homepage and does not need
   760px of vertical runway before the first section. Desktop only, see above. */
@media (min-width: 901px) {
  .town-page #hero { min-height: 620px; }
}

/* Body copy inside the three prose sections. 66ch is the readable measure;
   the old rendering ran the full 1200px content width, which is roughly 150
   characters a line and is most of why the pages read as a dump. */
.town-prose {
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text, #33413A);
}
.town-prose p { margin: 0 0 1.15rem; }
.town-prose p:last-child { margin-bottom: 0; }
.town-prose ul { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.town-prose li { margin-bottom: .45rem; }
/* Inline links are the adjacency links between town pages. They must read as
   links: an unstyled inline link inside body copy is an internal link that
   nobody clicks. */
.town-prose a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.town-prose a:hover { color: var(--green-dark); }

/* #metoder on the homepage holds .methods-grid; on a town page it holds prose.
   Only the prose case needs the heading to sit tight to the label. */
#metoder .town-prose { margin-top: 14px; }

/* The media split section: block 1 of the copy beside the town's own photo. */
#lokalt { padding: 72px 20px; background: #fff; }
#lokalt .media-split-text .town-prose { max-width: none; }

/* Remaining prose blocks, tinted so the page alternates instead of running as
   one long white column. */
.town-block { padding: 64px 20px; background: #F7FAF7; }
.town-block h2 { margin: 0 0 14px; }

/* #galleri is a dark strip in style.css. The town gallery uses <figure>
   wrappers, which #galleri .gallery-item already resets, and square source
   photos, which .gallery-grid img crops to 200px with object-fit: cover. */
#galleri .gallery-grid img { height: 220px; }

/* #cta-bottom on a town page carries a phone line under the button. style.css
   gives every #cta-bottom p a 2rem bottom margin, which is right for the lead
   paragraph above the button and leaves a dead gap under the last one. */
#cta-bottom p:last-child { margin-bottom: 0; margin-top: 1.25rem; font-size: .95rem; }

@media (max-width: 900px) {
  #lokalt { padding: 52px 20px; }
  .town-block { padding: 48px 20px; }
  .town-prose { font-size: 1rem; }
}