@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');

/* ==========================================================================
   EDJ HERO v4 -- scoped port of the trad-v4 hero capture card + trust bar.
   Bjorn, 2026-08-26.

   WHY THIS FILE EXISTS INSTEAD OF redesign.css.
   The five EDJ themes are independent forks. functions.php has carried a note
   since the social-proof port saying the pack's own redesign.css would restyle
   #hero, #site-nav, .btn and .wrap on top of a fork it was never designed for.
   That note is correct, and it is also why these sites never got the v4 hero:
   the whole sheet was rejected because part of it was unsafe.

   So this is the hero-and-trust subset, rule-for-rule identical to
   redesign.css, with one structural change: the v4 palette is declared on
   #hero and #trust instead of :root. Custom properties inherit, so every
   descendant gets the v4 colours while the rest of the fork keeps its own.
   Nothing outside #hero and #trust is targeted by this file. Check that before
   adding a rule to it -- a single unscoped selector here reintroduces exactly
   the clobber the fork note was warning about.

   NOT PORTED, deliberately: #hero-inline-form and its 420px overrides. Those
   style a component that is being deleted from this cluster, see the
   A BUTTON NOT A FORM note in index.php. Porting dead CSS for a form we are
   removing would invite someone to put the form back.
   ========================================================================== */

#hero, #trust {
  --ink:        #0B1F14;
  --ink-2:      #12301F;
  --ink-3:      #1B4029;
  --green:      #1D6B3F;
  --green-dark: #14522F;
  --green-light:#EFF7F1;
  --accent:     #FFC24B;
  --accent-dk:  #E8A317;
  --accent-ink: #3A2A05;
  --text:       #14201A;
  --text-muted: #5A6B61;
  --border:     #E2EAE5;
  --white:      #fff;
  --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);
}

/* --------------------------------------------------------------- HERO shell */
#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 forks shipped a flat 135deg rgba(22,54,36,.7) blanket in the
   section's own style attribute over an already dark forest photo, which
   turned the image into mud. The markup change drops that gradient from the
   style attribute so this rule is the only scrim. */
#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;
}
#hero::after { display: none !important; }

#hero .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%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

#hero .hero-content {
  position: relative;
  z-index: 2;
  padding: 0;
  max-width: 620px;
  text-align: left;
  margin: 0;
}

/* --------------------------------------------------------- Eyebrow pill */
#hero .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 .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 .hero-content h1 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  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;
}
#hero .hero-content h1 em {
  font-style: normal;
  color: var(--accent);
}

#hero .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 .hero-checks {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
/* The background/border/radius/margin/backdrop-filter resets are not
   decoration, they are the whole reason this rule is longer than the one in
   redesign.css. Ostersund's fork already had a `.hero-checks li` of its own:
   a dark pill, `background rgba(0,0,0,.5); padding 6px 14px; border-radius
   20px; border 1px; margin 4px`. Porting only the properties v4 declares left
   every one of those standing, so `padding: 0` turned a pill into a 1px
   bordered box with zero padding -- four FLUSH findings on the homepage, and
   verify-site.sh caught it after I had already called the render correct.
   A port has to neutralise what the fork sets, not merely set what v4 sets. */
#hero .hero-checks li {
  display: flex;
  color: rgba(255,255,255,.94);
  font-size: 1rem;
  font-weight: 500;
  padding: 0;
  margin: 0;
  gap: 12px;
  align-items: flex-start;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
}
#hero .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;
}

/* ==========================================================================
   HERO CAPTURE CARD -- this is the revenue. Give it real presence.
   ========================================================================== */
#hero .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);
  text-align: left;
}

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

#hero .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 .hero-form-card .hfc-sub {
  font-size: .9375rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* `.hfc-cta` is deliberately NOT `.btn`. On the pack sites there is an
   `!important` rule hiding `.hero-content > .btn.open-lead-form`, left over
   from a duplicate CTA. Renaming this to `.btn` or moving it up one level
   would silently make the hero's only CTA invisible, with no error and no
   visual clue. That exact hide rule corrupted the first round of
   form-vs-button data. Leave the class name alone. */
#hero .hero-form-card .hfc-cta {
  display: block;
  width: 100%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  padding: 18px 24px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,194,75,.34);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
#hero .hero-form-card .hfc-cta:hover {
  background: #FFD275;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(255,194,75,.46);
}
#hero .hero-form-card .hfc-cta:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
#hero .hero-form-card .hfc-call {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
}
#hero .hero-form-card .hfc-call:hover { text-decoration: underline; }

#hero .hfc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
#hero .hfc-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
}
#hero .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;
}

/* Two competing primary CTAs 20px apart is not a choice, it is noise. */
#hero > .hero-content > .btn.open-lead-form,
#hero .hero-content > .btn.open-lead-form { display: none !important; }

/* ------------------------------------------------------------ TRUST BAR */
#trust { background: var(--ink-2); border: 0; }
#trust .trust-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 20px;
}
#trust .trust-item {
  color: rgba(255,255,255,.86);
  font-size: .9375rem;
  font-weight: 600;
}

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

/* MOBILE HERO CORRECTIONS. Two faults the desktop view hides:
   (1) the mobile scrim goes so heavy the photo reads as a flat dark block
   (2) the capture card sits below the checklist, which pushes the only CTA
       off the first screen. That is the exact defect measured on
       arborististockholm.se. Do not reintroduce it. */
@media (max-width: 860px) {
  #hero { padding: 104px 0 52px !important; }
  #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 .hero-inner   { display: flex; flex-direction: column; gap: 0; }
  #hero .hero-content { display: contents; }

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

  #hero .hero-eyebrow {
    font-size: .625rem;
    letter-spacing: .09em;
    padding: 6px 13px;
    max-width: 100%;
    white-space: nowrap;
    margin-bottom: 18px;
  }
  #hero .hero-content h1 { font-size: clamp(2rem, 1.1rem + 4.4vw, 2.6rem); max-width: 100%; }
  #hero .hero-content p { font-size: 1.0625rem; margin-bottom: 22px; }
  #hero .hero-checks { gap: 10px; margin-bottom: 26px; }
  #hero .hero-checks li { font-size: .9375rem; }

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

  #trust .trust-inner { gap: 12px 24px; }
  #trust .trust-item { font-size: .875rem; }
}

@media (max-width: 420px) {
  #hero .hero-form-card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-form-card .hfc-cta { transition: none !important; }
  #hero .hero-form-card .hfc-cta:hover { transform: none; }
}