/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 07 2026 | 04:56:12 */
/* ==========================================================================
   Tree Range Arborists – Emergency Works page
   Every rule is scoped to #trs-page (the page wrapper's id). The id gives these
   rules enough weight to beat Divi's module styles (list bullets and padding,
   paragraph/heading padding, link colours). Fonts: Poppins (headings) and
   Nunito Sans (body), assumed to be loaded by the theme.
   ========================================================================== */

#trs-page {
  --trs-forest: #1E3A2C;      /* primary dark green */
  --trs-forest-deep: #142A1F; /* footer / pressed */
  --trs-moss: #2F5A43;        /* hover on dark */
  --trs-leaf: #4A6E45;        /* icons, accents on light */
  --trs-sage: #BFD6B8;        /* muted text on dark */
  --trs-mist: #F2F5F0;        /* light section background */
  --trs-line: #E2E8DF;        /* borders on light */
  --trs-pill: #C9D6C5;        /* suburb pill border */
  --trs-ink: #1C241F;         /* body text */
  --trs-ink-soft: #3B4740;    /* secondary text */
  --trs-on-dark: #E6EEE3;     /* body text on forest */
  --trs-alert: #9A4A0B;       /* safety steps (passes AA with white) */
  --trs-white: #FFFFFF;

  --trs-font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --trs-font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  --trs-radius-lg: 16px;
  --trs-radius-md: 14px;
  --trs-radius-sm: 10px;
  --trs-wrap: 1400px;

  font-family: var(--trs-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--trs-ink);
  background: var(--trs-white);
}

/* ---------- Reset theme styles inside the page ---------- */

#trs-page ul,
#trs-page ol {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

#trs-page li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#trs-page p,
#trs-page h1,
#trs-page h2,
#trs-page h3 {
  padding: 0;
  margin: 0;
}

#trs-page figure { margin: 0; }

/* WordPress auto-formatting can inject empty paragraphs and line breaks */
#trs-page p:empty,
#trs-page br { display: none; }

#trs-page *,
#trs-page *::before,
#trs-page *::after { box-sizing: border-box; }

#trs-page img { max-width: 100%; height: auto; display: block; }

#trs-page a { color: var(--trs-forest); }
#trs-page a:hover { color: var(--trs-moss); }

#trs-page :focus-visible {
  outline: 3px solid #E0A458;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */

#trs-page .trs-wrap {
  max-width: var(--trs-wrap);
  margin: 0 auto;
  padding: 72px 40px;
}

#trs-page .trs-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 56px;
  align-items: center;
}

#trs-page .trs-section--mist { background: var(--trs-mist); }
#trs-page .trs-section--dark { background: var(--trs-forest); color: var(--trs-white); }

#trs-page .trs-stack { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Type ---------- */

#trs-page h1,
#trs-page h2,
#trs-page h3 {
  font-family: var(--trs-font-head);
  margin: 0;
  color: inherit;
}

#trs-page h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--trs-forest);
}

#trs-page .trs-section--dark h2 { color: var(--trs-white); }

#trs-page h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

#trs-page p { margin: 0; }

#trs-page .trs-lead { font-size: 20px; line-height: 1.55; max-width: 34em; }
#trs-page .trs-muted { color: var(--trs-ink-soft); }
#trs-page .trs-measure { max-width: 34em; }

/* ---------- Buttons ---------- */

#trs-page .trs-btns { display: flex; flex-wrap: wrap; gap: 16px; }

#trs-page .trs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 26px;
  border-radius: var(--trs-radius-sm);
  font-family: var(--trs-font-body);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#trs-page .trs-btn svg { flex: none; }

#trs-page .trs-btn--light { background: var(--trs-white); color: var(--trs-forest); }
#trs-page .trs-btn--light:hover { background: var(--trs-mist); color: var(--trs-forest); }

#trs-page .trs-btn--outline-light { border-color: var(--trs-white); color: var(--trs-white); }
#trs-page .trs-btn--outline-light:hover { background: var(--trs-moss); color: var(--trs-white); }

#trs-page .trs-btn--dark { background: var(--trs-forest); color: var(--trs-white); }
#trs-page .trs-btn--dark:hover { background: var(--trs-moss); color: var(--trs-white); }

#trs-page .trs-btn--large { font-size: 22px; min-height: 60px; padding: 16px 30px; }

/* ---------- Hero ---------- */

#trs-page .trs-hero .trs-wrap { padding-top: 72px; padding-bottom: 64px; }

#trs-page .trs-hero h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.1;
}

#trs-page .trs-hero__sub {
  font-family: var(--trs-font-head);
  font-weight: 500;
  font-size: 18px;
  color: var(--trs-sage);
}

#trs-page .trs-hero .trs-lead { color: var(--trs-on-dark); }

/* Hero photo: full-bleed right half on desktop */
#trs-page .trs-hero { position: relative; overflow: hidden; background: #2B4A38; }

#trs-page .trs-hero .trs-figure { position: relative; }
#trs-page .trs-hero .trs-figure img { aspect-ratio: 3 / 2; object-position: center; }

#trs-page .trs-hero .trs-figure figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(20, 42, 31, 0.78);
  color: var(--trs-white);
  font-size: 14px;
}

@media (min-width: 1000px) {
  #trs-page .trs-hero .trs-wrap { padding-top: 104px; padding-bottom: 104px; }

  #trs-page .trs-hero .trs-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 560px;
  }

  #trs-page .trs-hero .trs-stack { padding-right: 32px; }

  #trs-page .trs-hero .trs-figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
  }

  #trs-page .trs-hero .trs-figure img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  #trs-page .trs-hero .trs-figure figcaption { left: 24px; bottom: 24px; }
}

#trs-page .trs-trust {
  list-style: none;
  margin: 8px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #3D5E4B;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  font-size: 16px;
  color: var(--trs-on-dark);
}

#trs-page .trs-trust li,
#trs-page .trs-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

#trs-page .trs-trust svg,
#trs-page .trs-checks svg { flex: none; margin-top: 3px; }

/* ---------- Figures ---------- */

#trs-page .trs-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }

#trs-page .trs-figure img {
  width: 100%;
  border-radius: var(--trs-radius-lg);
  object-fit: cover;
}

#trs-page .trs-figure--landscape img { aspect-ratio: 3 / 2; }

#trs-page .trs-figure--portrait { align-items: center; }
#trs-page .trs-figure--portrait img { max-width: 460px; aspect-ratio: 2 / 3; }
#trs-page .trs-figure--portrait figcaption { width: 100%; max-width: 460px; }

#trs-page .trs-figure figcaption { font-size: 15px; color: var(--trs-ink-soft); }
#trs-page .trs-section--dark .trs-figure figcaption { color: var(--trs-sage); }

/* ---------- Steps (what to do first) ---------- */

#trs-page .trs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

#trs-page .trs-card {
  background: var(--trs-white);
  border: 1px solid var(--trs-line);
  border-radius: var(--trs-radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#trs-page .trs-card p { font-size: 17px; color: var(--trs-ink-soft); }

#trs-page .trs-step__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--trs-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--trs-white);
  background: var(--trs-forest);
}

#trs-page .trs-step--safety .trs-step__num { background: var(--trs-alert); }

/* ---------- Make safe ---------- */

#trs-page .trs-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#trs-page .trs-panel {
  background: var(--trs-mist);
  border-radius: var(--trs-radius-md);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#trs-page .trs-panel h3 { font-size: 18px; color: var(--trs-forest); }
#trs-page .trs-panel p { font-size: 17px; color: var(--trs-ink-soft); }

/* ---------- Services ---------- */

#trs-page .trs-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

#trs-page .trs-services + p { font-size: 17px; }
#trs-page .trs-services + p a { font-weight: 700; }

/* ---------- Where we work ---------- */

#trs-page .trs-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  color: var(--trs-ink-soft);
}

#trs-page .trs-facts span { display: flex; gap: 8px; align-items: center; }

#trs-page .trs-areas { gap: 48px; }

#trs-page .trs-areas__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px 40px;
  padding-top: 40px;
  border-top: 1px solid var(--trs-line);
}

#trs-page .trs-areas__group { display: flex; flex-direction: column; gap: 14px; }
#trs-page .trs-areas__group h3 { font-size: 18px; color: var(--trs-forest); }

#trs-page .trs-suburbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#trs-page .trs-suburbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--trs-pill);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

#trs-page .trs-suburbs a:hover { background: var(--trs-mist); border-color: var(--trs-leaf); }

/* ---------- FAQs ---------- */

#trs-page .trs-faq .trs-wrap { max-width: 880px; }

#trs-page .trs-faq__list { display: flex; flex-direction: column; gap: 12px; }

#trs-page .trs-faq details {
  background: var(--trs-white);
  border: 1px solid var(--trs-line);
  border-radius: 12px;
}

#trs-page .trs-faq summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--trs-font-head);
  font-size: 19px;
  font-weight: 600;
}

#trs-page .trs-faq summary::-webkit-details-marker { display: none; }

#trs-page .trs-faq__icon {
  font-size: 26px;
  line-height: 1;
  color: var(--trs-leaf);
  transition: transform 0.2s ease;
}

#trs-page .trs-faq details[open] .trs-faq__icon { transform: rotate(45deg); }

#trs-page .trs-faq details p {
  padding: 0 24px 22px;
  font-size: 17px;
  color: var(--trs-ink-soft);
}

/* ---------- Closing CTA + form ---------- */

#trs-page .trs-cta .trs-wrap { padding-top: 80px; padding-bottom: 80px; }
#trs-page .trs-cta .trs-split { align-items: start; }

#trs-page .trs-cta h2 { font-size: 40px; line-height: 1.15; }
#trs-page .trs-cta .trs-lead { color: var(--trs-on-dark); max-width: 30em; }
#trs-page .trs-cta .trs-btn { align-self: flex-start; }
#trs-page .trs-cta__hours { font-size: 16px; color: var(--trs-sage); }

#trs-page .trs-form {
  background: var(--trs-white);
  color: var(--trs-ink);
  border-radius: var(--trs-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#trs-page .trs-form h3 { font-size: 22px; color: var(--trs-forest); }

/* Formidable output inside .trs-form */
#trs-page .trs-form .frm_forms,
#trs-page .trs-form .frm_form_fields,
#trs-page .trs-form fieldset { margin: 0; padding: 0; border: 0; }

#trs-page .trs-form .frm_fields_container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#trs-page .trs-form .frm_form_field { grid-column: 1 / -1; margin: 0; }
#trs-page .trs-form .frm_half { grid-column: span 1; }   /* set Name/Phone to "half" layout in Formidable */

/* Style visible labels only; leave Formidable's hidden/inside label modes alone */
#trs-page .trs-form .frm_top_container .frm_primary_label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--trs-ink);
}

#trs-page .trs-form .frm_required { color: var(--trs-alert); }

/* Labels set to "None" or "Hidden" in Formidable: hide the label (and its stray
   asterisk) visually, but keep it for screen readers */
#trs-page .trs-form .frm_none_container .frm_primary_label,
#trs-page .trs-form .frm_hidden_container .frm_primary_label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#trs-page .trs-form .frm_forms input[type="text"],
#trs-page .trs-form .frm_forms input[type="email"],
#trs-page .trs-form .frm_forms input[type="tel"],
#trs-page .trs-form .frm_forms textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--trs-ink);
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid #9AA89A;
  border-radius: 8px;
  background: var(--trs-white);
  box-shadow: none;
}

#trs-page .trs-form .frm_forms textarea { min-height: 120px; resize: vertical; }

#trs-page .trs-form .frm_forms input::placeholder,
#trs-page .trs-form .frm_forms textarea::placeholder { color: #6B776F; }

#trs-page .trs-form .frm_submit { grid-column: 1 / -1; margin: 4px 0 0; }

#trs-page .trs-form .frm_submit button,
#trs-page .trs-form .frm_button_submit {
  width: 100%;
  min-height: 56px;
  padding: 16px;
  border: 0;
  border-radius: var(--trs-radius-sm);
  background: var(--trs-forest);
  color: var(--trs-white);
  font-family: var(--trs-font-body);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

#trs-page .trs-form .frm_submit button:hover,
#trs-page .trs-form .frm_button_submit:hover { background: var(--trs-moss); }

#trs-page .trs-form .frm_error,
#trs-page .trs-form .frm_error_style { color: var(--trs-alert); font-size: 15px; }

#trs-page .trs-form .frm_message {
  padding: 16px;
  border-radius: 8px;
  background: var(--trs-mist);
  color: var(--trs-forest);
  font-weight: 600;
}

@media (max-width: 520px) {
  #trs-page .trs-form .frm_half { grid-column: 1 / -1; }
}

#trs-page .trs-form__note { font-size: 14px; color: #556158; }

/* ---------- Mobile sticky call bar ---------- */

#trs-page .trs-callbar { display: none; }

@media (max-width: 760px) {
  #trs-page { padding-bottom: 84px; } /* room for the call bar */

  #trs-page .trs-wrap { padding: 56px 20px; }
  #trs-page h2 { font-size: 30px; }
  #trs-page .trs-cta h2 { font-size: 32px; }
  #trs-page .trs-split { gap: 36px; }
  #trs-page .trs-btn { width: 100%; justify-content: center; }

  #trs-page .trs-callbar {
    display: flex;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--trs-white);
    border-top: 1px solid var(--trs-line);
  }

  #trs-page .trs-callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: var(--trs-radius-sm);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
  }

  #trs-page .trs-callbar__call { flex: 1; background: var(--trs-forest); color: var(--trs-white); }
  #trs-page .trs-callbar__call:hover { color: var(--trs-white); }
  #trs-page .trs-callbar__photos { flex: none; padding: 0 18px; border: 2px solid var(--trs-forest); color: var(--trs-forest); }
}

@media (prefers-reduced-motion: reduce) {
  #trs-page *,
#trs-page *::before,
#trs-page *::after { transition: none !important; }
}