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

   Every `background` here is `!important` and that is deliberate, not sloppy.

   style.css defines `.btn` TWICE, and the second one (line 592) is
   `background: #3d6b47 !important; color: #fff !important`. Both selectors are
   `.btn`, i.e. specificity (0,1,0), identical to this rule. redesign.css loads
   after style.css, so on a tie the later file wins -- but ONLY between
   declarations of equal importance. `color` here is !important so it won,
   `background` was not, so style.css's !important beat it.

   The result was the worst possible half-applied state: the amber ink designed
   for `--accent` (#FFC24B) rendered on style.css's dark green (#3d6b47).
   Measured 2.24:1 in a real browser on the primary "Fa kostnadsfri offert" CTA.
   Either colour on its own partner is fine (#3A2A05 on #FFC24B is 8.99:1); it
   is the mismatched pair that is unreadable, which is why reading either file
   alone looks correct and why this has to be measured rather than reviewed.

   Raising specificity would NOT fix it. An !important declaration beats a
   non-important one at any specificity. Matching !important is the fix, exactly
   as already documented for .nav-cta in the CONTRAST PASS section below.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent) !important;
  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 !important;   /* vs style.css .btn:hover background:#2d5237 !important */
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255,194,75,.42);
  text-decoration: none;
}

/*
 * The hero pair is a separate fight: style.css defines `#hero .btn` twice too
 * (lines 547 and 614), both `background:#fff !important; color:#1e7a40 !important`.
 * Same (1,1,0) specificity as this rule, so without !important the hero CTA
 * rendered amber ink on WHITE. That happens to pass contrast, which is why it
 * survived the audit, but it is not the design and it reads as a broken button
 * on a dark hero.
 *
 * `#hero .btn:hover` is defined here even though the base :hover exists,
 * because style.css line 624 has `#hero .btn:hover` at (1,2,0) which outranks
 * `.btn:hover` at (0,2,0) regardless of file order. Without a matching hero
 * hover rule the button flipped from amber to near-white green on mouseover.
 */
#hero .btn {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-radius: var(--r-sm);
}
#hero .btn:hover {
  background: #FFD275 !important;
  color: var(--accent-ink) !important;
}

.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
   ========================================================================== */




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

/*
 * The multi-column footer is NEW markup (parts/site-footer.php) and it shipped
 * with no layout rule at all. Measured in a real browser, not reviewed by eye:
 *
 *   .footer-inner  ->  display: block, gridTemplateColumns: none
 *   .footer-col    ->  x:168 w:1104 for every column, textAlign: center
 *   .footer-col h4 ->  rgb(20,32,26) on rgb(11,31,20) = 1.03:1
 *
 * So all three or four columns stacked full width, centre-aligned, with
 * headings that were mathematically invisible. Every anchor was `inline`, so
 * the service and town link lists ran together as one centred paragraph of
 * touching words.
 *
 * This is one root cause with three symptoms, and the cause is that the OLD
 * footer was a one-line stub. style.css line 345 still describes that stub:
 * `#site-footer { padding: 36px 20px; text-align: center }`. It was correct for
 * a single centred copyright line and is wrong for a four-column link surface.
 * Replacing the markup without replacing its stylesheet left the new footer
 * inheriting the old one's layout.
 *
 * The lesson worth keeping: none of this was visible from the PHP, which reads
 * as a perfectly ordinary four-column footer, and none of it broke a build
 * check. It took measuring computed style on the live page.
 *
 * SPECIFICITY: `#site-footer` in style.css is (1,0,0) with no !important, so
 * this (1,0,0) rule wins on file order. But `#site-footer p` is (1,0,1), which
 * beats `.footer-col p` at (0,1,1) regardless of order -- the same trap already
 * documented for `#site-footer .footer-col a`. Hence the (1,1,1) selectors.
 */
#site-footer {
  background: var(--ink);
  padding: 64px 20px 0;
  text-align: left;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
/* HBG has no town pages (hbg/town-data.php is deliberately empty), so its
   footer renders THREE columns, not four. Let the grid size itself off the
   actual children instead of hardcoding a count that is wrong on one site. */
.footer-inner:has(> .footer-col:nth-child(3):last-child) {
  grid-template-columns: 1.4fr 1fr 1fr;
}

#site-footer .footer-col h4 {
  color: #fff;                 /* 17.2:1 on --ink. Was inheriting body ink. */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
#site-footer .footer-col p {
  color: rgba(255,255,255,.78);   /* ~10:1 on --ink */
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0 0 8px;
}
/* Links were inline, so a column of eight town links rendered as one run-on
   line. Block turns each into its own row and gives it a real tap target. */
#site-footer .footer-col a { display: block; padding: 4px 0; }
#site-footer .footer-col a.footer-phone {
  display: inline-block;
  font-size: 1.0625rem;
  margin-bottom: 6px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 48px;
  padding: 22px 0;
  text-align: center;
}

@media (max-width: 900px) {
  .footer-inner,
  .footer-inner:has(> .footer-col:nth-child(3):last-child) {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  #site-footer { padding-top: 48px; }
}
@media (max-width: 560px) {
  .footer-inner,
  .footer-inner:has(> .footer-col:nth-child(3):last-child) {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================================================
   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 another site in this estate. 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; }
  /* 2026-08-27, and the comment three lines up predicted it exactly.
     index.php now wraps the CTA and the tel: link in .hero-actions, so
     `.hero-content > .btn.open-lead-form` stops matching on the homepage: the
     button is no longer a DIRECT child. .hero-actions itself had no order, got
     the default 0, and the whole action row rendered ABOVE the eyebrow and the
     h1 on every phone. Caught on a 390x844 screenshot, not by reading the CSS.
     The direct-child rule is kept because town.php and service.php still place
     a bare button in the hero with no .hero-actions wrapper. */
  .hero-actions { order: 6; align-self: stretch; margin-top: 4px; }
  .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. */

#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 */


/* 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. */

.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 a 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; }

/*
 * The closing CTA is the highest-intent button on every page: it is the last
 * thing a reader sees on the homepage, every service page and every town page.
 *
 * style.css line 337 paints it `background:#fff !important; color:var(--green)`.
 * That was coherent while the hero button was also white-on-dark, which is what
 * style.css line 614 forced. Now that `#hero .btn` is amber, leaving this one
 * white would give the site two different primary buttons on two visually
 * identical dark-green bands. Measured 6.51:1, so this is NOT a contrast fix --
 * it is a consistency fix, and it is worth being explicit about the difference
 * so nobody later "reverts the contrast change" and undoes it.
 *
 * !important is required for the same reason as everywhere else in this file:
 * style.css's declaration is !important at the same (1,1,0) specificity.
 */
#cta-bottom .btn {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}
#cta-bottom .btn:hover {
  background: #FFD275 !important;
  color: var(--accent-ink) !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; }

/*
 * Hero action row: the primary CTA and a tel: link side by side.
 *
 * The phone link is deliberately NOT a .btn. hero-check.mjs fails a hero that
 * carries two competing primary CTAs, and it is right to: two equally loud
 * buttons is a choice, and a choice is a pause. So the button is the button and
 * the number reads as a number that happens to be tappable.
 *
 * Wraps rather than shrinks on narrow screens, because a tel: link that has to
 * be aimed at is worse than no tel: link on the device where it actually works.
 */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-phone {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 2px solid rgba(255,194,75,.55);
  transition: border-color .16s ease, color .16s ease;
}
.hero-phone::before {
  content: '';
  width: 18px; height: 18px;
  background: var(--accent);
  /* mask, not background-image: the glyph then inherits --accent and cannot
     drift out of sync with the underline if the accent is ever retuned. */
  -webkit-mask: var(--phone-ico) center/contain no-repeat;
          mask: var(--phone-ico) center/contain no-repeat;
}
:root {
  --phone-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.hero-phone:hover { color: var(--accent); border-bottom-color: var(--accent); }









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




/* 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. */











/* --- 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. --- */








/* 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. */





.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); }


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


/* ---------------- 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. */



/* ---- footer links must look like links (added 2026-08-27) --------------
   Anton opened the angelholmvvs.se footer on his phone on 2026-08-27 and
   asked why the majority of the towns and services were not links. They
   were. They just did not look like it.

   Same defect is in this theme, and worse. style.css has

       .footer-col p, .footer-col a { color: rgba(255,255,255,0.6); }
       .footer-col a { text-decoration: none; }

   so a link and the paragraph beside it are the SAME colour, the SAME
   weight and carry no underline. There is no affordance at all. A link
   nobody can see earns neither the click nor the internal PageRank the
   footer was built to pass, and the footer is this site's main internal
   link surface.

   SPECIFICITY, which is the part that bites: this theme's style.css also
   carries `#site-footer a { color: rgba(255,255,255,0.93) }`. That is
   (1,0,1). A rule written as `.footer-col a` is (0,1,1) and LOSES to it no
   matter which file it sits in, so the colour would silently not apply.
   Hence `#site-footer .footer-col a` at (1,1,1).

   The phone number is deliberately exempt: it is a link but it reads as a
   number, and underlining it makes it look like a typo. That exemption has
   to be written at matching specificity for the same reason.
------------------------------------------------------------------------ */
#site-footer .footer-col a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.5);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
#site-footer .footer-col a:hover {
  color: #fff;
  text-decoration-color: #fff;
}
#site-footer .footer-col a.footer-phone {
  text-decoration: none;
  font-weight: 600;
}

/* ------------------------------------------------------------------------
   HOMEPAGE: linked service cards, method deep links, static area pills.

   These three classes are new in this port and they exist because of one
   measured problem: the homepage passed almost no link equity anywhere.

   The service cards were plain <div>s with no href, so the most linked page
   on the site handed nothing to the service pages. They are <a> now, so the
   WHOLE card is the click target, not a small "read more" link. .service-card
   in style.css is already the card chrome; these rules only undo the anchor
   defaults that would otherwise underline the heading and paint it green.

   The area pills were unclickable inline-styled <span>s, all sixteen of them,
   which is what Anton was asking about when he said "why majority of towns and
   services not linked". Towns WITH a page are now real <a class="area-pill">
   and inherit the existing pill styling. Towns without one stay static, and
   .area-pill--static makes that visually honest: no hover lift, no pointer
   cursor, muted. A pill that looks clickable and is not is worse than a pill
   that plainly is not.

   SPECIFICITY NOTE, same trap as the footer: style.css carries
   `.area-pill { background: var(--green); color: #fff }` and redesign.css
   later carries `a.area-pill` at (0,1,1). A bare `.area-pill--static` is
   (0,1,0) and would LOSE to `a.area-pill`. It does not need to win against it
   (a static pill is a <span>, never an <a>), but it does need to beat the base
   `.area-pill`, which it does at equal specificity by source order.
------------------------------------------------------------------------ */
a.service-card,
a.service-card:link,
a.service-card:visited {
  color: inherit;
  text-decoration: none;
  display: block;
}
a.service-card h3 { color: var(--ink, #1a1a1a); }
.service-card-more {
  display: inline-block;
  margin-top: 12px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--green, #2d5a27);
}
a.service-card:hover .service-card-more { text-decoration: underline; text-underline-offset: 3px; }
a.service-card:focus-visible { outline: 2px solid var(--green, #2d5a27); outline-offset: 3px; }

.method-more { margin-top: 10px; margin-bottom: 0; font-size: .92rem; font-weight: 600; }
.method-more a { color: var(--green, #2d5a27); text-decoration: underline; text-underline-offset: 3px; }

.area-pill--static {
  background: #E7EBE7;
  color: #4a544a;
  border-color: #d7ded7;
  cursor: default;
}
.area-pill--static:hover { background: #E7EBE7; color: #4a544a; border-color: #d7ded7; transform: none; }