.elementor-13415 .elementor-element.elementor-element-3f3297e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-3f3297e */<style>
  /* ═══════════════════════════════════════════
     PALETTE — aligned to homepage
     ═══════════════════════════════════════════ */
  :root {
    --color-forest: #3D7F8A;
    --color-forest-deep: #1A3A42;
    --color-forest-light: #5A9CA6;
    --color-cream: #F9F7F3;
    --color-cream-dark: #EFECE6;
    --color-sand: #9AACB0;
    --color-charcoal: #1A3A42;
    --color-charcoal-soft: #2E535C;
    --color-stone: #5B7A80;
    --color-terracotta: #C26A2E;
    --color-terracotta-hover: #AD5F25;
    --color-terracotta-light: rgba(194, 106, 46, 0.08);
    --color-terracotta-glow: rgba(194, 106, 46, 0.15);
    --color-forest-wash: #E6F0F2;
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --shadow-cta: 0 4px 16px rgba(194,106,46,0.25);
    --shadow-cta-hover: 0 8px 24px rgba(194,106,46,0.35);
    --shadow-card: 0 8px 32px rgba(26, 58, 66, 0.06);
    --shadow-card-lift: 0 20px 50px rgba(26, 58, 66, 0.10);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
  }

  .skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: var(--color-charcoal);
    color: white;
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.2s ease;
  }
  .skip-link:focus { top: 0; }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: var(--font-body);
    background: var(--color-cream);
    color: var(--color-charcoal);
    -webkit-font-smoothing: antialiased;
  }

  /* ═══════════════════════════════════════════
     SHARED — section + heading rhythm
     ═══════════════════════════════════════════ */
  .section-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .section-inner.narrow { max-width: 600px; }
  .section-inner.wide   { max-width: 980px; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-forest);
    padding: 7px 16px 7px 12px;
    background: var(--color-terracotta-light);
    border: 1px solid rgba(194, 106, 46, 0.22);
    border-radius: 100px;
    margin-bottom: 20px;
  }
  .eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(194, 106, 46, 0.18);
  }
  /* Eyebrow variant for dark backgrounds */
  .eyebrow--light {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(194, 106, 46, 0.22);
    border-color: rgba(194, 106, 46, 0.45);
  }

  .section-title {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-charcoal);
    line-height: 1.1;
    letter-spacing: -0.005em;
  }

  .section-sub {
    font-size: 1rem;
    color: var(--color-stone);
    line-height: 1.65;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ═══════════════════════════════════════════
     1) HERO — forest gradient, white text
     Matches the brand's primary hero treatment
     ═══════════════════════════════════════════ */
  .hero {
    background: linear-gradient(165deg, var(--color-forest-deep) 0%, var(--color-charcoal-soft) 50%, var(--color-forest) 100%);
    padding: 80px 24px 72px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    top: -200px; right: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 106, 46, 0.18) 0%, transparent 65%);
    pointer-events: none;
  }
  .hero .section-inner { color: white; }

  .hero-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2.6rem, 5.6vw, 4.2rem);
    color: white;
    line-height: 1.04;
    letter-spacing: -0.012em;
    margin-bottom: 18px;
  }
  .hero-sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
    max-width: 464px;
    margin: 0 auto;
  }

  /* ═══════════════════════════════════════════
     SERVICE AREAS — band between hero and booking
     Confident, prominent, treated as a heading moment
     ═══════════════════════════════════════════ */
  .areas-band {
    background: linear-gradient(135deg, var(--color-forest-deep) 0%, var(--color-charcoal-soft) 60%, var(--color-forest-deep) 100%);
    padding: 56px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Break out of the Elementor HTML-widget container so the green band
       reaches the actual viewport edges (the parent .e-con has padding). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .areas-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
  }
  .areas-band-inner {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0 auto;
  }
  .areas-band-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 16px;
  }
  .areas-band-label svg {
    width: 14px;
    height: 14px;
    color: var(--color-terracotta);
  }
  .areas-band-locations {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    color: white;
    line-height: 1.15;
    letter-spacing: -0.005em;
    font-weight: 400;
    margin: 0;
  }
  .areas-band-locations a,
  .areas-band-locations a:link,
  .areas-band-locations a:visited {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
    transition: color 0.2s;
  }
  .areas-band-locations a:hover,
  .areas-band-locations a:focus { color: var(--color-terracotta) !important; }
  .section-sub a,
  .section-sub a:link,
  .section-sub a:visited {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
    transition: color 0.2s;
  }
  .section-sub a:hover,
  .section-sub a:focus { color: var(--color-terracotta) !important; }
  .areas-band-locations .dot {
    color: var(--color-terracotta);
    margin: 0 14px;
    font-style: normal;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 0.85em;
    vertical-align: middle;
  }

  /* ═══════════════════════════════════════════
     CALL CARD — sits below the message form
     ═══════════════════════════════════════════ */
  .call-section {
    background: var(--color-cream);
    padding: 64px 24px 24px;
  }
  .call-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px 14px 14px;
    background: white;
    border: 1.5px solid rgba(61, 127, 138, 0.3);
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(61, 127, 138, 0.10);
    transition: all 0.3s ease;
  }
  .call-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(61, 127, 138, 0.18);
    border-color: var(--color-forest);
  }
  .call-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--color-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .call-card-icon svg {
    width: 20px;
    height: 20px;
    color: white;
  }
  .call-card-text { text-align: left; }
  .call-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-stone);
    margin-bottom: 2px;
  }
  .call-card-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1.1;
  }

  /* ═══════════════════════════════════════════
     2) BOOKING — primary action, centered card
     ═══════════════════════════════════════════ */
  .booking {
    background: var(--color-cream);
    padding: 80px 24px 80px;
  }
  .booking .section-title {
    font-size: clamp(2rem, 3.2vw, 2.4rem);
    margin-bottom: 10px;
  }
  .booking .section-sub { margin-bottom: 32px; }

  /* Booking card wrapper — LatePoint renders inside, no boxing */
  .booking-card {
    margin-top: 4px;
  }

  /* Trust strip — slim inline pills below booking */
  .trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin-top: 12px;
  }
  .trust-tile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-charcoal);
    padding: 4px 0;
  }
  .trust-tile-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(61, 127, 138, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .trust-tile-icon svg {
    width: 13px; height: 13px;
    color: var(--color-forest);
  }

  /* ═══════════════════════════════════════════
     3) MESSAGE — secondary path, cream-dark
     ═══════════════════════════════════════════ */
  .message {
    background: var(--color-cream-dark);
    padding: 80px 24px 104px;
  }
  .message .section-title {
    font-size: clamp(1.8rem, 2.8vw, 2.2rem);
    margin-bottom: 8px;
  }
  .message .section-sub { margin-bottom: 28px; }

  .message-card {
    position: relative;
    background: white;
    border: 1px solid var(--color-cream-dark);
    border-radius: 18px;
    padding: 36px 32px 32px;
    box-shadow: var(--shadow-card);
    text-align: left;
    overflow: hidden;
  }
  .message-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-forest);
  }

  .form-group { margin-bottom: 18px; }
  .form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
  }
  .form-input,
  .form-textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-charcoal);
    background: var(--color-cream);
    border: 1.5px solid var(--color-cream-dark);
    border-radius: 10px;
    transition: all 0.2s ease;
    outline: none;
  }
  .form-input:focus,
  .form-textarea:focus {
    border-color: var(--color-forest);
    background: white;
    box-shadow: 0 0 0 3px rgba(61, 127, 138, 0.1);
  }
  .form-input::placeholder,
  .form-textarea::placeholder { color: var(--color-sand); }
  .form-textarea { resize: vertical; min-height: 120px; }

  .form-response-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-forest);
    text-align: center;
  }
  .form-response-line svg {
    width: 15px; height: 15px;
    color: var(--color-forest);
  }

  .form-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    background: var(--color-forest);
    color: white;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(61, 127, 138, 0.25);
    margin-bottom: 20px;
  }
  .form-submit:hover {
    background: var(--color-forest-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(61, 127, 138, 0.35);
  }
  .form-submit svg { width: 20px; height: 20px; }

  .form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-stone);
    text-align: center;
  }
  .form-privacy svg {
    width: 13px; height: 13px;
    color: var(--color-stone);
    opacity: 0.7;
  }

  /* WPForms Name field — full-width 50/50 First/Last */
  /* 1. Force the field wrapper itself to full width (overrides wpforms-field-medium cap) */
  #wpforms-13477 .wpforms-field,
  #wpforms-13477 .wpforms-field-name,
  #wpforms-13477 .wpforms-field-medium {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* 2. Make the row a true flex container */
  #wpforms-13477 .wpforms-field-name .wpforms-field-row {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 3. Each half (.wpforms-one-half / .wpforms-first) gets equal share, no margins */
  #wpforms-13477 .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block,
  #wpforms-13477 .wpforms-field-name .wpforms-field-row > .wpforms-one-half,
  #wpforms-13477 .wpforms-field-name .wpforms-field-row > .wpforms-first {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  /* 4. Inputs fill their half */
  #wpforms-13477 .wpforms-field-name input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ═══════════════════════════════════════════
     4) TESTIMONIALS — social proof, cream
     ═══════════════════════════════════════════ */
  .testimonials {
    background: var(--color-cream);
    padding: 80px 24px 104px;
  }
  .testimonials .section-title {
    font-size: clamp(1.8rem, 2.8vw, 2.2rem);
    margin-bottom: 48px;
  }
  .testimonials-call {
    margin-top: 64px;
    text-align: center;
  }

  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    text-align: left;
    margin-top: 8px;
  }
  .testimonial-card {
    background: white;
    border-radius: 16px;
    padding: 28px 28px 24px;
    border-left: 3px solid var(--color-forest);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-lift);
  }
  .testimonial-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-charcoal);
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .testimonial-attr {
    font-size: 0.85rem;
    color: var(--color-stone);
    font-weight: 500;
  }
  .testimonial-source {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }
  .google-icon { display: inline-flex; align-items: center; }
  .google-icon svg { width: 16px; height: 16px; }
  .google-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
  }
  .google-stars svg { width: 14px; height: 14px; }

  /* ═══════════════════════════════════════════
     SCROLL REVEAL
     ═══════════════════════════════════════════ */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .testimonial-card.reveal:nth-child(2) { transition-delay: 0.12s; }

  /* ═══════════════════════════════════════════
     STICKY MOBILE CTA
     ═══════════════════════════════════════════ */
  .sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    border-top: 1px solid var(--color-cream-dark);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  }
  .sticky-cta.visible { transform: translateY(0); }
  .sticky-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--color-terracotta);
    color: white;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: var(--shadow-cta);
  }
  .sticky-cta-btn--call {
    background: var(--color-charcoal);
    box-shadow: none;
    padding: 12px 16px;
  }
  .sticky-cta-btn--book { flex: 1; justify-content: center; }
  .sticky-cta-btn svg { width: 16px; height: 16px; }
  @media (min-width: 769px) { .sticky-cta { display: none; } }

  /* ═══════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════ */
  @media (max-width: 768px) {
    .hero { padding: 72px 20px 64px; }
    .hero::after { width: 320px; height: 320px; top: -120px; right: -100px; }
    .booking { padding: 16px 20px 56px; }
    .trust-strip {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .trust-tile { flex-direction: row; padding: 14px 16px; text-align: left; }
    .message { padding: 56px 20px; }
    .message-card { padding: 28px 22px 28px; }
    .call-section { padding: 48px 20px 16px; }
    .call-card {
      flex-direction: row;
      padding: 12px 20px 12px 12px;
    }
    .testimonials { padding: 56px 20px; }
    .testimonials-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    body { padding-bottom: 76px; }
  }

  @media (max-width: 480px) {
    .call-card { gap: 12px; }
    .call-card-number { font-size: 1.1rem; }
  }
</style>
</head>
<body>

<a href="#main" class="skip-link">Skip to main content</a>

<!-- ═══════════════════ 1) HERO ═══════════════════ -->
<section class="hero" id="main">
  <div class="section-inner">
    <h1 class="hero-title">Let's start with a chat.</h1>
    <p class="hero-sub">Whatever's brought you here, share as much or as little as you like. Let's have a conversation.</p>
  </div>
</section>

<!-- ═══════════════════ 2) BOOKING — primary action ═══════════════════ -->
<section class="booking">
  <div class="section-inner">
    <h2 class="section-title">Book your 15-min chat</h2>
    <p class="section-sub">Choose to chat with <a href="https://heartsinaction.com.au/about-us/">Matt</a> or <a href="https://heartsinaction.com.au/our-team/">Antaylia</a> about your support needs.</p>

    <div class="booking-card" id="booking-embed">
      [wpcode id="12606"]
    </div>

    <div class="trust-strip">
      <div class="trust-tile">
        <span class="trust-tile-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </span>
        Registered NDIS Provider
      </div>
      <div class="trust-tile">
        <span class="trust-tile-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </span>
        No obligation
      </div>
      <div class="trust-tile">
        <span class="trust-tile-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </span>
        We're here to listen
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════ 3) MESSAGE — secondary path ═══════════════════ -->
<section class="message">
  <div class="section-inner narrow">
    <h2 class="section-title">Prefer to write?</h2>
    <p class="section-sub">Send us a message and we'll be in touch.</p>

    <div class="message-card">
      [wpforms id="13477" title="false"]
    </div>
  </div>
</section>

<!-- ═══════════════════ 4) TESTIMONIALS ═══════════════════ -->
<section class="testimonials">
  <div class="section-inner wide">
    <h2 class="section-title">What families say about us</h2>

    <div class="testimonials-grid">
      <div class="testimonial-card reveal">
        <div class="testimonial-quote">"He's in safe hands — the happiest and most relaxed I've ever seen him."</div>
        <div class="testimonial-attr">— Vickie Trinder, Sister</div>
        <div class="testimonial-source">
          <span class="google-icon"><svg width="14" height="14" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59A14.5 14.5 0 0 1 9.5 24c0-1.59.28-3.14.76-4.59l-7.98-6.19A23.99 23.99 0 0 0 0 24c0 3.77.9 7.35 2.56 10.52l7.97-5.93z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 5.93C6.51 42.62 14.62 48 24 48z"/></svg></span>
          <span class="google-stars"><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
        </div>
      </div>
      <div class="testimonial-card reveal">
        <div class="testimonial-quote">"Always on time, reliable and kind. I feel safe and supported."</div>
        <div class="testimonial-attr">— Helen Judge, Participant</div>
        <div class="testimonial-source">
          <span class="google-icon"><svg width="14" height="14" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59A14.5 14.5 0 0 1 9.5 24c0-1.59.28-3.14.76-4.59l-7.98-6.19A23.99 23.99 0 0 0 0 24c0 3.77.9 7.35 2.56 10.52l7.97-5.93z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 5.93C6.51 42.62 14.62 48 24 48z"/></svg></span>
          <span class="google-stars"><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><svg viewBox="0 0 24 24" fill="#FBBC05"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
        </div>
      </div>
    </div>

    <div class="testimonials-call">
      <a href="tel:+61728122406" class="call-card" aria-label="Call us at 07 2812 2406">
        <span class="call-card-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path 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"/></svg>
        </span>
        <span class="call-card-text">
          <span class="call-card-label">Call us directly</span>
          <span class="call-card-number">07 2812 2406</span>
        </span>
      </a>
    </div>
  </div>
</section>

<!-- ═══════ SERVICE AREAS — confident band ═══════ -->
<section class="areas-band" aria-label="Service areas">
  <div class="areas-band-inner">
    <span class="areas-band-label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
      Proudly servicing
    </span>
    <h2 class="areas-band-locations">
      <a href="https://heartsinaction.com.au/ndis-support-worker-gold-coast/">Gold Coast</a><span class="dot">·</span><a href="https://heartsinaction.com.au/ndis-support-worker-logan/">Logan</a><span class="dot">·</span><a href="https://heartsinaction.com.au/ndis-support-worker-ipswich/">Ipswich</a><span class="dot">·</span><a href="https://heartsinaction.com.au/ndis-support-worker-brisbane/">Brisbane</a>
    </h2>
  </div>
</section>

<!-- Sticky mobile CTA -->
<div class="sticky-cta" id="stickyCta">
  <a href="tel:+61728122406" class="sticky-cta-btn sticky-cta-btn--call" aria-label="Call Hearts In Action">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 012 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.09a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 15z"/></svg>
    Call
  </a>
  <a href="#booking-embed" class="sticky-cta-btn sticky-cta-btn--book">
    Book Your Free Chat
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  </a>
</div>

<script>
// Show sticky CTA after scrolling past the booking card
(function() {
  var cta = document.getElementById('stickyCta');
  var anchor = document.getElementById('booking-embed');
  if (!cta || !anchor) return;
  function checkScroll() {
    var rect = anchor.getBoundingClientRect();
    if (rect.bottom < 0) cta.classList.add('visible');
    else cta.classList.remove('visible');
  }
  window.addEventListener('scroll', checkScroll, { passive: true });
  checkScroll();
})();

// Scroll-reveal for below-fold elements
(function() {
  var els = document.querySelectorAll('.reveal');
  if (!els.length) return;
  if ('IntersectionObserver' in window) {
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
    els.forEach(function(el) { observer.observe(el); });
  } else {
    els.forEach(function(el) { el.classList.add('revealed'); });
  }
})();
</script>

</body>
</html>/* End custom CSS */