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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 860px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

/* ===========================================================================
   2026-08-20 Bjorn. THE TABLET DEAD BAND.
   This file hides .nav-links at max-width:860px, but style.css only reveals
   .nav-toggle at max-width:768px. Between 769 and 860 there was therefore no
   nav menu AND no hamburger, on every template including the homepage.
   Scoped to 769-860 only so that <=768 keeps the exact behaviour it has today.
   =========================================================================== */
@media (min-width: 769px) and (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(11,31,20,.97);
    backdrop-filter: saturate(180%) blur(14px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 0.75rem 0;
    z-index: 999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 22px; }
}