/* ==========================================================================
   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;
}

/* 2026-08-22: a display:none !important rule here used to hide the hero lead
   button. It was added while the inline hero form still existed, to suppress a
   duplicate CTA sitting 20px under that form. The form was removed on
   2026-08-22, so the rule's precondition is gone and all it did was hide the
   ONLY remaining hero CTA on 28 pages. Removed, not overridden. */


/* ==========================================================================
   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; }
  /* 2026-08-22: MUST stay scoped to .hero-inner. display:contents dissolves
     .hero-content so its children become flex items of the nearest laid-out
     ancestor. Inside .hero-inner that ancestor is flex-direction:column, which
     is the intent. But five of the six homepages have NO .hero-inner wrapper,
     so there the children landed directly in #hero, which is display:flex with
     the default direction:row. The h1, paragraph, checklist, button and social
     proof rendered as five narrow columns side by side and the hero was
     unreadable on every phone. Unscoping this again re-breaks 5 of 6 homepages. */
  .hero-inner > .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; }
  /* 2026-08-22: the hero lead button replaced the inline form. On mobile
     .hero-content is display:contents, so every hero child is a flex item of
     .hero-inner and is placed by EXPLICIT order. A child with no order gets 0
     and jumps above the h1, which is exactly what the button did when it was
     first added. Anything new in the hero needs a slot in this list. */
  .hero-content > .btn.open-lead-form { order: 6; }
  .hero-social-proof { order: 7; }

  /* 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;
}

/* 2026-08-22: the inline hero form was removed in favour of the lead modal.
   .hero-inner is a two-column grid (1.08fr / .92fr) and the form card was
   the second column, so without this the surviving column keeps its 1.08fr
   track and the right 47% of the hero renders empty. Mobile is unaffected,
   .hero-inner is flex-column below 700px. */
.hero-inner--solo { grid-template-columns: 1fr; }





/* ===================================================================
   SOCIAL PROOF  (2026-08-22)
   Replaces #ratings + #google-reviews, which were two adjacent sections
   restating the same two scores. #google-reviews was Google-branded but
   carried Reco reviews; that is fixed in index.php, this is the styling.

   PREMIUM PASS v2. v1 shipped correct CONTENT in a cluttered frame: 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 as pill + footer, and again on the CTA button). The fix is
   subtraction, not restyling: ONE surface treatment, each fact stated
   ONCE, colour reserved for the two platform marks and the stars.

   The old #ratings / #google-reviews / .gr-header / .gr-google-badge rules
   are left in style.css on purpose: they now match nothing on these six
   sites, but the same stylesheet lineage is shared with ~14 other tree
   sites that still use those sections. Do not delete them from style.css.
   Everything below is scoped to #social-proof or to an .sp-* class that
   exists only on these six sites, so this file 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 two 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. */
.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;
}
.sp-score .gr-stars { font-size: 0.8rem; color: #D9A400; letter-spacing: 0.09em; line-height: 1; }
.sp-score .gr-count { font-size: 0.72rem; color: #8a9089; white-space: nowrap; }

/* platform marks. These two colours are the ONLY brand colour in the
   section and they carry the whole two-platform argument. Everything else
   is greyscale plus the one dark green. Do not add a third hue here. */
.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 { 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 on each side of two centred badges,
   which read 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`. style.css puts a full border on
   .rating-badge, so zeroing one side left the other three drawing a box 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 on both badges turned
   into grey mush: the "4" and the "10" were unreadable, so the section was
   spending vertical space on a decoration nobody could parse. Measured
   against the v1 render, which used 72px and was legible but card-bound.
   No mix-blend-mode. It was there to hide the JPGs' background, but that
   only nulls pure white and reco-badge-rekommenderad's field was
   rgb(225,236,242), so it left a pale blue box on the page. Both badges are
   now alpha PNGs cropped to the emblem (badge-alpha.cjs), which also drops
   the "Veravi AB 4,9 / 226 recensioner" caption strip that was baked into
   the rekommenderad artwork and rendered as a smudge at this size. */
#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; }
#social-proof .gr-stars-sm { font-size: 0.72rem; color: #D9A400; 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. v1 made this a filled pill AND kept a "Reco-verifierad
   kund" footer underneath, so every card claimed its source twice. The
   footer is gone (index.php) 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 real Google reviews sit in the same row. */
.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 Reco iframe, folded away.
       It is the one element a visitor cannot suspect Veravi 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
       "226 / 4.9", its own competing "Läs alla omdömen" CTA and its own
       grey legal paragraph. 225px restating the score 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. --- */
.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.
       Both of these say "go read reviews", which is not the money action.
       As two solid buttons they out-weighted "Få offert" in the nav. As
       quiet links they still get clicked and stop competing. --- */
.sp-cta {
  display: flex; justify-content: center; align-items: center;
  gap: 10px 26px; flex-wrap: wrap;
}
/* 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; underline on
   hover carries the affordance without the misalignment. */
.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; }
}

/* ---------------- phone ----------------
   Measured, not guessed. An earlier draft of this block stacked .sp-scores
   vertically and the section came out 2380px at 390px, TALLER than the two
   sections it replaced (2168px). The two scores each hold one short line
   and sit side by side comfortably at 358px. If you edit this block,
   re-measure at 390px, do not eyeball it. */
@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-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 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; }
}