/* =====================================================================
   DECISIONS WITH PRECISION — CUSTOM CSS (Zoho Sites)
   ---------------------------------------------------------------------
   NOTES FOR EDITORS
   - Zoho applies inline styles to elements, so most custom rules need
     !important or they are silently overridden.
   - Many sections use a "frame / tab / content" layout: the Section is
     position: relative, and each box inside is position: absolute.
     Zoho boxes can't be nested, so everything is a sibling positioned
     against the Section.
   - Some absolutely-positioned elements need large NEGATIVE top values
     (e.g. .about-tab) because of how Zoho stacks boxes in document flow.
     These are intentional.
   - These rules override the Section panel settings (e.g. the hero's
     Position dropdown).
   - Brand red: #A71D24   Brand light blue: #D8EBF3

   BLOCKS (order matters; keep them in this order)
     0. Global ............... no media query
     1. Desktop .............. no media query (all widths)
     2. Mobile + tablet ...... max-width: 768px
     3. Tablet only .......... 600px – 768px  (overrides block 2)
     4. Phone only ........... max-width: 599px (overrides block 2)
     5. Desktop only ......... min-width: 769px
   ===================================================================== */


/* =====================================================================
   TEMPLATE DEFAULTS (Zoho theme hero styles, large desktop only)
   .zphero min-height is overridden by .hero-section in block 5.
   ===================================================================== */

@media only screen and (min-width: 992px) {
  .zphero-boxed { width: 95%; padding-top: 0px; margin: 0 auto; }
  .zphero { min-height: 85vh !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); }
  .zphero h1, .zphero h2, .zphero h3, .zphero h4, .zphero h5, .zphero h6 { line-height: normal; }
  .zphero h2.zpheading { font-size: 11em; text-shadow: -9px 6px 0px rgba(0, 0, 0, 0.1); }
}


/* =====================================================================
   0. GLOBAL
   ===================================================================== */

/* Stops phones force-darkening the site in dark mode
   (pairs with the color-scheme meta tag in Header code) */
:root {
  color-scheme: light only !important;
}


/* =====================================================================
   1. DESKTOP
   ===================================================================== */

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

/* Height is set in block 5 (desktop) and block 2 (mobile/tablet) */
.hero-section {
  background-size: cover !important;
  background-position: center 50% !important;
}

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

.services-section {
  position: relative;
}

.services-frame {
  min-height: 425px;
  z-index: 1;
}

.services-tab {
  position: absolute;
  top: 0px;
  left: -20px;
  width: 220px;
  height: 50px;
  margin: 0;
  z-index: 2;
}

.services-col-1 {
  position: absolute;
  top: 60px;
  left: 5%;
  width: 29%;
  z-index: 2;
}

.services-col-2 {
  position: absolute;
  top: 60px;
  left: 36%;
  width: 29%;
  z-index: 2;
}

.services-col-3 {
  position: absolute;
  top: 60px;
  left: 67%;
  width: 29%;
  z-index: 2;
}

/* ---------- About ---------- */

.about-section {
  position: relative !important;
}

.about-frame {
  min-height: 900px;
  z-index: 1;
}

/* Large negative top is intentional (Zoho document-flow quirk) */
.about-tab {
  position: absolute !important;
  top: -880px !important;
  left: -20px !important;
  width: 220px !important;
  height: 50px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.about-bio {
  position: absolute !important;
  top: 120px !important;
  left: 40px !important;
  width: 500px !important;
  z-index: 2 !important;
}

.about-photo {
  position: absolute !important;
  top: 100px !important;
  left: 520px !important;
  width: 450px !important;
  z-index: 2 !important;
}

.about-cta {
  position: absolute !important;
  top: 420px !important;
  left: 40px !important;
  z-index: 2 !important;
}

/* Light blue panel behind the two overlay boxes */
.about-overlay-bg {
  position: absolute !important;
  top: 760px !important;
  left: 4% !important;
  width: 92% !important;
  height: 390px !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.about-overlay-1 {
  position: absolute !important;
  top: 790px !important;
  left: 6% !important;
  width: 42% !important;
  height: 260px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.about-overlay-2 {
  position: absolute !important;
  top: 790px !important;
  left: 52% !important;
  width: 42% !important;
  height: 260px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* ---------- FAQ ---------- */

.faq-section {
  position: relative !important;
  margin-top: 125px !important;
  min-height: 1150px !important;
}

.faq-frame {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 1150px !important;
  z-index: 1 !important;
}

.faq-tab {
  position: absolute !important;
  top: -45px !important;
  left: -30px !important;
  width: 220px !important;
  height: 50px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.faq-accordion {
  position: relative !important;
  margin-top: 140px !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  z-index: 2 !important;
}

/* ---------- Contact ---------- */

.contact-section {
  position: relative !important;
  margin-bottom: -225px !important;
}

.contact-tab {
  position: absolute !important;
  top: 60px !important;
  left: -40px !important;
  width: 220px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
  background: #A71D24 !important;
  text-align: center !important;
  z-index: 2 !important;
}

.contact-tab, .contact-tab * {
  color: #ffffff !important;
  line-height: 50px !important;
  margin: 0 !important;
}

/* Red border frame; pointer-events: none keeps the form underneath clickable */
.contact-frame {
  position: absolute !important;
  top: 40px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1740px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 4px solid #A71D24 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Embedded Zoho Forms contact form */
iframe[title="contact-form-embed"] {
  position: relative !important;
  top: -220px !important;
  margin-bottom: -220px !important;
  z-index: 3 !important;
}


/* =====================================================================
   2. MOBILE + TABLET (max-width: 768px)
   Absolutely-positioned desktop layouts are switched to stacked layouts.
   ===================================================================== */

@media (max-width: 768px) {

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

  .hero-section {
    height: 700px !important;
    min-height: 0 !important;
    background-position: center bottom !important;
  }

  .hero-title,
  .hero-title * {
    font-size: 9vw !important;
    line-height: 1.1 !important;
  }

  .hero-text br {
    display: none !important;
  }

  /* ---------- Intro (photo above text) ---------- */

  .intro-section .zprow {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  .intro-section img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

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

  .services-frame {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .services-tab {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
    padding: 16px 32px !important;
    z-index: 10 !important;
  }

  .services-col-1,
  .services-col-2,
  .services-col-3 {
    position: static !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding-left: 15px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  /* Column 1 stays position: relative (not static) so z-index applies */
  .services-col-1 {
    position: relative !important;
    margin-top: 70px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
  }

  .services-col-2 {
    margin-top: 0 !important;
  }

  /* ---------- About ---------- */

  .about-frame {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* Desktop tab hidden; .about-tab-mobile replaces it */
  .about-tab {
    display: none !important;
  }

  .about-tab-mobile {
    background-color: #A71D24 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 16px 32px !important;
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    order: 1 !important;
  }

  .about-name {
    order: 2 !important;
    margin: 0 0 20px 0 !important;
  }

  .about-photo {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 0 20px 0 !important;
    order: 3 !important;
  }

  .about-bio {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 0 20px 0 !important;
    order: 4 !important;
  }

  .about-cta {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 0 20px 0 !important;
    order: 5 !important;
  }

  .about-overlay-bg {
    display: none !important;
  }

  .about-overlay-1 {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 20px !important;
    order: 7 !important;
  }

  .about-overlay-2 {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 20px !important;
    order: 8 !important;
  }

  /* ---------- FAQ ---------- */

  .faq-section {
    min-height: auto !important;
  }

  .faq-frame {
    display: none !important;
  }

  .faq-tab {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
    padding: 16px 32px !important;
    z-index: 10 !important;
  }

  .faq-accordion {
    margin-top: 70px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  /* ---------- Contact ---------- */

  .contact-section {
    margin-bottom: -375px !important;
  }

  .contact-frame {
    display: none !important;
  }

  .contact-tab {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
    padding: 16px 32px !important;
    z-index: 10 !important;
  }

  .contact-tab, .contact-tab * {
    line-height: 1.2 !important;
  }

  iframe[title="contact-form-embed"] {
    top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* =====================================================================
   3. TABLET ONLY (600px – 768px)
   Overrides block 2. Must stay AFTER block 2.
   ===================================================================== */

@media (min-width: 600px) and (max-width: 768px) {

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

  .hero-title,
  .hero-title * {
    font-size: 6vw !important;
  }

  /* Moves the title down off the presenter's face */
  .hero-title {
    transform: translateY(100px) !important;
  }

  .hero-text {
    padding-left: 6% !important;
    padding-right: 6% !important;
    box-sizing: border-box !important;
  }

  /* ---------- Intro ---------- */

  .intro-section img {
    max-width: 70% !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .intro-section p {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

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

  .services-section {
    padding-bottom: 50px !important;
  }

  .services-col-1,
  .services-col-2,
  .services-col-3 {
    width: 55% !important;
    margin-left: calc(36% - 28px) !important;
    margin-right: 0 !important;
  }

  .services-col-1 {
    margin-top: 150px !important;
  }

  .services-col-3 {
    margin-bottom: 10px !important;
  }

  /* ---------- About ---------- */

  .about-photo {
    width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- Section titles (centred) ---------- */

  .about-name, .about-name *,
  .brochures-title, .brochures-title *,
  .clients-title, .clients-title * {
    text-align: center !important;
  }

  /* ---------- Shared tablet helpers ---------- */

  .tablet-heading,
  .tablet-heading * {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .tablet-heading {
    margin-top: 28px !important;
  }

  .tablet-btn,
  .tablet-btn a,
  .tablet-btn button {
    font-size: 22px !important;
    padding: 18px 48px !important;
  }

  .tablet-img-small,
  .tablet-img-small img {
    width: 55% !important;
    max-width: 55% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .tablet-icon-small,
  .tablet-icon-small img {
    width: 25% !important;
    max-width: 25% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* ---------- Brochures ---------- */

  .brochure-col {
    display: flex !important;
    flex-direction: column !important;
  }

  .brochure-col .tablet-heading {
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  /* Thin red divider between brochure columns */
  .brochure-col ~ .brochure-col {
    margin-top: 60px !important;
    padding-top: 60px !important;
    background: linear-gradient(#A71D24, #A71D24) top center / 60% 1px no-repeat !important;
  }

  /* ---------- Happy Clients ---------- */

  .clients-logo,
  .clients-logo img {
    width: 55% !important;
    max-width: 55% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* ---------- FAQ ---------- */

  .faq-accordion {
    margin-top: 160px !important;
  }

  /* ---------- Contact ---------- */

  .contact-tab {
    translate: 0 -30px !important;
  }

  iframe[title="contact-form-embed"] {
    top: -20vw !important;
    margin-bottom: -20vw !important;
  }

  /* ---------- Footer ---------- */

  .footer-center {
    text-align: center !important;
    margin-top: -80px !important;
  }

  .footer-center * {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-logo,
  .footer-logo img {
    width: 45% !important;
    max-width: 45% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =====================================================================
   4. PHONE ONLY (max-width: 599px)
   Overrides block 2. Must stay AFTER block 2.
   ===================================================================== */

@media (max-width: 599px) {

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

  .hero-text,
  .hero-text * {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }

  .hero-title,
  .hero-text {
    transform: translateY(60px) !important;
  }

  /* ---------- Intro / brochures imagery ---------- */

  .iq-img {
    margin-top: -75px !important;
    margin-bottom: -40px !important;
  }

  .cmo-divider {
    margin-top: 12px !important;
    position: relative !important;
    top: -45px !important;
  }

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

  .services-tab {
    transform: translate(-50%, 30px) !important;
  }

  .services-col-1 {
    margin-top: -5px !important;
  }

  .services-section ul {
    margin-left: 68px !important;
  }

  /* ---------- Shared phone helpers ---------- */

  .tablet-heading, .tablet-heading * {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .tablet-btn, .tablet-btn * {
    font-size: 22px !important;
  }

  .tablet-btn {
    padding: 20px 36px !important;
  }

  /* ---------- Brochures ---------- */

  .brochure-col {
    display: flex;
    flex-direction: column;
  }

  .brochure-col .tablet-heading {
    order: -1;
    margin-top: 0;
    margin-bottom: 60px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .brochure-col ~ .brochure-col .tablet-heading {
    margin-bottom: -40px !important;
  }

  .brochure-col ~ .brochure-col {
    margin-top: 40px;
    padding-top: 20px;
    background: linear-gradient(#A71D24, #A71D24) top center / 60% 1px no-repeat;
  }

  /* ---------- Contact ---------- */

  .contact-tab {
    translate: 0 -22px !important;
  }

  iframe[title="contact-form-embed"] {
    height: 1060px !important;
    margin-bottom: 225px !important;
  }

  /* ---------- Section tabs (Services / FAQ / Contact) ---------- */

  /* Keeps tab text on one line on narrow phones */
  .services-tab,
  .faq-tab,
  .contact-tab {
    width: max-content !important;
    max-width: 90% !important;
  }

  .services-tab, .services-tab *,
  .faq-tab, .faq-tab *,
  .contact-tab, .contact-tab * {
    white-space: nowrap !important;
  }

  .faq-tab,
  .faq-tab * {
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Space between the contact form and the FAQ tab */
  .faq-section {
    margin-top: 165px !important;
  }
}


/* =====================================================================
   5. DESKTOP ONLY (min-width: 769px)
   ===================================================================== */

@media (min-width: 769px) {

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

  /* height: auto lets the hero grow if the text needs more room */
  .hero-section {
    height: auto !important;
    min-height: max(60vw, 700px) !important;
  }

  /* ---------- About ---------- */

  /* Photo anchored to the right edge; shrinks on smaller screens */
  .about-bio {
    width: min(500px, 48%) !important;
  }

  .about-photo {
    left: auto !important;
    right: 40px !important;
    width: min(450px, 40%) !important;
  }

  .about-photo img {
    width: 100% !important;
    height: auto !important;
  }
}