/* ============================================================
   ANDP — shared styles
   Brand palette taken from the original andp.com.au theme.
   ============================================================ */
:root {
  --c-primary:   #0476d0;   /* blue */
  --c-accent:    #b20303;   /* red */
  --c-green:     #008037;   /* top notice */
  --c-success:   #90bf55;
  --c-dark:      #352219;
  --c-text:      #3e3836;
  --c-muted:     #89807c;
  --c-line:      #eceae6;
  --c-soft:      #f3f2f0;
  --c-white:     #ffffff;
  --font-sans:   "Poppins", sans-serif;      /* exact match to original */
  --font-serif:  "Libre Baskerville", serif; /* exact match to original */
  --radius:      4px;
  --maxw:        1200px;
  --shadow-sm:   0 2px 6px rgba(0,0,0,.06);
  --shadow-md:   0 8px 24px rgba(0,0,0,.08);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  background: #f3f2f0;
  letter-spacing: -0.17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-serif);
  color: var(--c-dark);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .75em;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.6rem); }
h3 { font-size: 1.75rem; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-dark); color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: relative;
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}

/* Home page: header overlays the banner (header_position_over).
   The nav row stays 90% white so the banner shows faintly through it. */
.page-home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  background: transparent;
  box-shadow: none;
}

/* Top notice (COVID / announcement bar) */
.top-notice {
  background: var(--c-green);
  color: #fff;
  font-size: 14px;     /* theme base (html 14px > 1279px) */
  line-height: 1.785;  /* ≈ marquee line-height, scales with font */
  padding: 1.15em 0;   /* 0.9em inner row + spacer on live; scales with font */
  overflow: hidden;
}
.top-notice .container { padding: 0 10px; }

/* Theme breakpoint: html drops 14px -> 13px at 1279px, so nav + notice follow */
@media (max-width: 1279px) {
  .primary-nav .menu { font-size: 13px; }
  .top-notice        { font-size: 13px; }
}
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee > span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee > span { animation: none; padding-left: 0; white-space: normal; text-align: center; display: block; }
}

/* Main header row — matches live site (88px tall, no row padding) */
.header-main { background: rgba(255, 255, 255, 0.9); }
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 20px;
  min-height: 88px;
}
.logo { display: inline-block; line-height: 0; }
.logo img {
  display: block;
  height: 78px;        /* exact rendered height on live site */
  width: auto;
  max-width: 100%;
}

/* Primary navigation — matches andp.com.au Pathwell theme exactly */
.primary-nav .menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;                 /* theme base (html 14px > 1279px); links use em to scale */
  line-height: 1.5em;
}
.primary-nav .menu-item > a {
  display: inline-block;
  position: relative;
  padding: 2.5em 1em;              /* exact em-based value from live site (= 35px 14px) */
  color: #000;                     /* non-active items are black on live site */
  font-weight: 700;                /* non-active items are bold 700 on live site */
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0;
  text-decoration: none;
  transition: color .25s ease;
}
.primary-nav .menu-item > a:hover {
  color: #90bf55;                  /* exact hover green */
}
/* Active/current item: greyed brown, lighter weight (as live site) */
.primary-nav .menu-item.current-menu-item > a {
  color: #5e4f48;
  font-weight: 600;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 3px;
  background: var(--c-dark);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}

/* Mobile overlay */
.mobile-menu {
  position: fixed; inset: 0;
  background: rgb(50, 44, 41);
  color: #fff;
  z-index: 100002;
  display: block;
  overflow-y: auto;
  padding: 0;
}
.mobile-menu[hidden] { display: none; }
.mobile-close {
  position: absolute; top: 0; right: 0;
  width: 65px; height: 65px;
  background: transparent; border: 0; color: #fff;
  font-size: 28px; line-height: 65px;
  text-align: center;
  cursor: pointer;
}
.mobile-logo {
  display: block;
  text-align: center;
  margin: 52px 0 0;
  padding: 0 17px;
}
.mobile-logo img { display: inline; width: auto; height: 23px; }
.mobile-menu ul {
  list-style: none;
  padding: 0 0 0 47px;
  margin: 10px 0 0;
  text-align: left;
}
.mobile-menu li { margin: 0; padding: 0; }
.mobile-menu li a {
  display: inline-block;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 27px;
  padding: 1px 45px 1px 0;
  text-decoration: none;
}
.mobile-menu li.is-current a { color: #0476d0; }

/* Responsive header */
@media (max-width: 900px) {
  .primary-nav { display: none; }
  .nav-toggle  { display: block; }
}

/* ============================================================
   HOME BANNER
   ============================================================ */
.home-banner {
  height: 46vw;             /* taller banner for more room */
  min-height: 640px;
  max-height: 880px;
  box-sizing: border-box;
  padding-top: 148px;       /* room for the overlaying header; INCLUDED in height (no stacking) */
  position: relative;
  overflow: hidden;
}
/* Background image layer (own layer so it can zoom in on entrance) */
.banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform-origin: center;
  /* Loops like the slider: zoom in, hold, fade/zoom out, repeat */
  animation: bannerImgLoop 9s infinite both;
}
@keyframes bannerImgLoop {
  0%   { transform: scale(1.16); opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  13%  { transform: scale(1.06); opacity: 1; }
  90%  { transform: scale(1.06); opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { transform: scale(1.16); opacity: 0; }
}
/* Slide overlay: fine dotted texture across the whole image (SR bg overlay type 1) */
.home-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.42) 1px, transparent 1.3px);
  background-size: 4px 4px;
  z-index: 1;
  pointer-events: none;
}
/* Content area BELOW the header; holds the blue panel + caption so the blue never goes behind the header */
.banner-body {
  position: relative;
  z-index: 2;
  height: 100%;          /* fills the content box (banner height minus the header padding) */
  display: flex;
  align-items: center;
}
/* Navy panel on the left: rounded right corners (200px), like the SR shape layer.
   Entrance: slides in from the left + fade (SR shape "in", start 1.5s, 1s, power3.inOut). */
.banner-shape {
  position: absolute;
  top: 12%;
  left: 0;             /* touches the left edge (no left gap) */
  width: 53%;          /* more right padding for the text */
  height: 76%;         /* bigger gap from top & bottom of the banner (~66px each) */
  background: rgba(1, 8, 94, 0.6);
  border-radius: 0 200px 200px 0;
  z-index: 0;
  pointer-events: none;
  /* Loops: slides in from the left, holds, slides back out, repeats */
  animation: bannerShapeLoop 9s infinite both;
}
@keyframes bannerShapeLoop {
  0%, 5.5% { transform: translateX(-100%); opacity: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  18%      { transform: translateX(0);     opacity: 1; }
  90%      { transform: translateX(0);     opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%     { transform: translateX(-110%); opacity: 0; }
}
.banner-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 0 48px;   /* text inset inside the blue box */
}
.banner-caption h1 {
  margin: 0;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30px, 3.28vw, 63px);
  line-height: 1.905;
  letter-spacing: 0;
}
.banner-caption .bl { display: block; }
/* Text: slides in from the left + mask reveal, holds, wipes out, repeats */
.banner-caption h1 {
  animation: bannerTextLoop 9s infinite both;
}
@keyframes bannerTextLoop {
  0%, 14% { clip-path: inset(0 100% 0 0); transform: translateX(-70px); opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  26%     { clip-path: inset(0 0 0 0);    transform: translateX(0);     opacity: 1; }
  86%     { clip-path: inset(0 0 0 0);    transform: translateX(0);     opacity: 1; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  100%    { clip-path: inset(0 0 0 100%); transform: translateX(70px);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-bg, .banner-shape, .banner-caption h1 { animation: none; }
  .banner-bg { transform: scale(1.06); opacity: 1; }
  .banner-shape { transform: none; opacity: 1; }
  .banner-caption h1 { clip-path: none; transform: none; opacity: 1; }
}

@media (max-width: 768px) {
  .home-banner { min-height: 380px; height: 65vw; max-height: 500px; }
  .banner-shape { width: 60%; }
}
@media (max-width: 480px) {
  .home-banner { min-height: 320px; height: 75vw; max-height: 400px; padding-top: 100px; }
  .banner-shape { width: 60%; top: calc(50% - 70px); height: 140px; border-radius: 0 50px 50px 0; bottom: auto; }
}

/* ============================================================
   OUR VISION / WHAT WE DO band
   ============================================================ */
.vision-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.vision-green { background: #90bf55; }
.vision-blue  { background: #1e73be; }
.vision-inner {
  padding: 28px 15px;       /* full-width content with small side padding, like the original */
}
.vision-col h2 {
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.1vw, 50px);   /* 50px at ~1600px, scales down */
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
}
.vision-col p {
  color: #fff;
  font-size: 17px;
  line-height: 25px;
  margin: 0 0 4px;
}
.vision-readmore {
  font-weight: 700;
  font-size: 13px;
}
.vision-readmore-red  { color: #b20303; }
.vision-readmore-red:hover  { color: #fff; }
.vision-readmore-dark { color: #352219; }
.vision-readmore-dark:hover { color: #fff; }

@media (max-width: 768px) {
  .vision-band { grid-template-columns: 1fr; }
}

/* ============================================================
   WHY CHOOSE ANDP?
   ============================================================ */
.why-section {
  padding: 70px 0 60px;
  text-align: center;
}
.why-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 700;
  color: var(--c-dark);
  text-align: center;
  margin: 0 0 50px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.why-item img {
  width: 110px;
  height: auto;
  margin-bottom: 22px;
}
.why-item h4 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OUR SERVICES (dark band)
   ============================================================ */
.services-section {
  background: #2a292a;
  padding: 70px 0 80px;
}
/* full-width content, like the original (not constrained to the 1200px container) */
.services-section > .container {
  max-width: none;
  padding: 0 20px;
}
.services-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 50px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: #fff;             /* white photo frame, like the original */
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: block;
  margin-bottom: 22px;
  box-sizing: border-box;
}
.service-card h3 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 14px;
}
.service-card p {
  color: #fff;
  font-size: 17px;
  line-height: 25px;
  margin: 0;
}
.service-readmore { color: #90bf55; font-weight: 700; }
.service-readmore:hover { color: #fff; }

@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; gap: 40px; max-width: 480px; margin: 0 auto; }
}

/* ============================================================
   OUR IN-HOME SERVICES INCLUDES (tile grid)
   ============================================================ */
.inhome-section {
  padding: 70px 0 70px;
  text-align: center;
  background: var(--c-soft);   /* light gray-cream, matches original (measured #f4f2f0) */
}
.inhome-section > .container {
  max-width: 1200px;
  padding: 0 20px;
}
.inhome-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 700;
  color: var(--c-dark);
  text-align: center;
  margin: 0 0 45px;
}
.inhome-section .inhome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.inhome-tile {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 7 / 5;   /* measured from the live site: ~1.4:1, not the raw 370x208 source ratio */
}
.inhome-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.inhome-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background .3s ease;
}
.inhome-label {
  font-family: var(--font-sans);          /* sans-serif (Poppins), not serif — confirmed from pixels */
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 20px);    /* smaller so text stays on one line in all tile sizes */
  line-height: 1;
  white-space: nowrap;                    /* never wrap the label text */
  color: #fff;
  background: rgba(144, 191, 85, 0.55);   /* measured alpha from pixel math against known bg: ~0.55 */
  width: 51%;                             /* measured: label is 51% of tile width, fixed regardless of text length */
  height: 25%;                            /* measured: label is 25% of tile height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 20px;                    /* rounded on ALL 4 corners (verified by zooming each corner of the original) */
  transition: transform .3s ease, background .3s ease;
}
.inhome-tile:hover .inhome-photo { transform: scale(1.08); }
.inhome-tile:hover .inhome-label { background: rgba(144, 191, 85, 0.92); }

@media (max-width: 768px) {
  .inhome-section .inhome-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .inhome-section .inhome-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

/* ============================================================
   PAGE BANNER (inner pages — About Us, Services, Contact)
   Dark charcoal strip with subtitle + Home / Current breadcrumbs.
   Pixel-matched to andp.com.au at 1900px desktop width.
   ============================================================ */
.page-banner {
  background: #383937;
  text-align: center;
  padding: 110px 0;
}
.page-banner > .container {
  max-width: 1200px;
}
h1.page-banner-sub,
.page-banner .page-banner-sub {
  font-family: sans-serif;         /* matches live: system default sans-serif (not Poppins, not serif) */
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  line-height: 32px;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin: 0;
  padding: 0;
  display: block;
}
@media (max-width: 767px) {
  h1.page-banner-sub,
  .page-banner .page-banner-sub { font-size: 28px; line-height: 36px; }
}
.page-banner .breadcrumbs {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 400;
  line-height: 32px;
  display: block;
  letter-spacing: -0.17px;
  margin-top: 14px;
}
.page-banner .breadcrumbs-item {
  display: inline-block;      /* matches live: inline-block, 19px tall box, 30px glyph overflows baseline */
  color: #8bc349;
  text-decoration: none;
  transition: color .2s;
}
.page-banner a.breadcrumbs-item:hover { color: #a9d96c; }
.page-banner .breadcrumbs-delim {
  color: #b20303;
  font-size: 26px;
  display: inline-block;
  margin: 0 9px;
}
.page-banner .breadcrumbs-delim::before { content: "/"; }

@media (max-width: 700px) {
  .page-banner { padding: 50px 0; }
  .page-banner .breadcrumbs { font-size: 22px; margin-top: 28px; gap: 8px; }
  .page-banner .breadcrumbs-delim { font-size: 22px; }
}

/* ============================================================
   ABOUT PAGE — Why choose ANDP?
   4 photos in a row, each with a bulleted title underneath.
   Values pulled from live andp.com.au About Us page.
   ============================================================ */
.about-why-section {
  padding: 10px 0 40px;
}
.about-why-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.about-why-title {
  font-family: var(--font-serif);     /* Libre Baskerville — matches live h2 */
  font-size: 50px;                     /* live base: 3.5714em at 14px parent = 50px (viewport >=1440px) */
  font-weight: 700;
  font-style: normal;
  line-height: 1.2em;
  color: #352219;                      /* measured */
  text-align: center;
  letter-spacing: -0.3px;
  margin: 42px 0 24px;                 /* measured */
}
/* responsive breakpoints matching live theme stack */
@media (max-width: 1439px) {
  .about-why-title { font-size: 33.3px; }
}
@media (max-width: 1279px) {
  .about-why-title { font-size: 32px; line-height: 45px; margin: 42px 0 24px; }
}
@media (max-width: 1023px) {
  .about-why-title { font-size: 28px; line-height: 38px; margin: 38px 0 20px; }
}
@media (max-width: 767px) {
  .about-why-title { font-size: 26px; line-height: 32px; margin: 30px 0 18px; }
}
@media (max-width: 479px) {
  .about-why-title { font-size: 24px; }
}
.about-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.about-why-item {
  text-align: left;
  position: relative;
  cursor: pointer;
}
.about-why-photo {
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 370 / 208;
  background: #eee;
}
.about-why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease-out;
}
.about-why-label {
  font-family: sans-serif;
  font-size: 16.8px;
  font-weight: 400;
  line-height: 20.28px;
  color: #000;
  margin: 31px 0 0;
  letter-spacing: normal;
  text-transform: uppercase;
  transition: transform 0.25s ease-out;
  transform-origin: center top;
}
.about-why-item:hover .about-why-photo img {
  transform: scale(1.1, 1.1);
}
.about-why-item:hover .about-why-label {
  transform: scale(0.9, 0.9);
}
.about-why-bullet {
  color: #000;
  margin-right: 2px;
}

@media (max-width: 900px) {
  .about-why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 500px) {
  .about-why-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ============================================================
   ABOUT INTRO (collage + text) — pulled from live andp.com.au
   Exact live values: container 964px, image 964×482,
   text Poppins 17px / 23.21 line-height / color #89807c,
   paragraphs separated by 17px bottom margin.
   ============================================================ */
.about-intro-section {
  padding: 50px 0 60px;
}
.about-intro-container {
  width: 100%;
  max-width: 1200px;            /* matches the main site container used on other sections */
  margin: 0 auto;
  padding: 0 20px;
}
.about-collage img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.about-intro-text {
  margin-top: 44px;
}
.about-intro-text p {
  font-family: var(--font-sans);    /* Poppins (live uses "Poppins, sans-serif") */
  font-size: 17px;
  font-weight: 400;
  line-height: 23.2141px;
  color: #89807c;                   /* measured */
  margin: 0 0 17px;
  letter-spacing: -0.17px;
}
.about-intro-text p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .about-intro-section { padding: 36px 0 44px; }
  .about-intro-text { margin-top: 28px; }
}

/* ============================================================
   SCROLL-REVEAL ENTRANCE ANIMATIONS
   Keyframes modelled on WPBakery's rotateInDownLeft / Right.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; animation: none !important; transform: none !important; }
}

[data-reveal="rotateInDownLeft"].is-revealed {
  animation: andpRotateInDownLeft 1s both ease-out;
}
[data-reveal="rotateInDownRight"].is-revealed {
  animation: andpRotateInDownRight 1s both ease-out;
}
[data-reveal="fadeInUp"].is-revealed {
  animation: andpFadeInUp .8s both ease-out;
}
[data-reveal="fadeIn"].is-revealed {
  animation: andpFadeIn .9s both ease-out;
}
[data-reveal="zoomIn"].is-revealed {
  animation: andpZoomIn .7s both ease-out;
}

@keyframes andpRotateInDownLeft {
  0%   { opacity: 0; transform: rotate(-45deg); transform-origin: left bottom; }
  100% { opacity: 1; transform: rotate(0);      transform-origin: left bottom; }
}
@keyframes andpRotateInDownRight {
  0%   { opacity: 0; transform: rotate(45deg); transform-origin: right bottom; }
  100% { opacity: 1; transform: rotate(0);     transform-origin: right bottom; }
}
@keyframes andpFadeInUp {
  0%   { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes andpFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes andpZoomIn {
  0%   { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   DETAILED IN-HOME SERVICES (6 bordered tiles + Read more)
   Pixel-matched to andp.com.au at 1900px desktop width.
   ============================================================ */
.inhome-detail-section {
  background: var(--c-soft);        /* #f3f2f0 — matches live page_wrap */
  padding: 40px 0 70px;
}
.inhome-detail-section > .container {
  max-width: 1200px;
}

.inhome-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 30px;
  margin-top: 30px;
}

.inhome-detail-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid #999;
  border-radius: 3px;
  padding: 10px 14px 10px 10px;
  background: transparent;
}

.inhome-detail-icon {
  flex: 0 0 auto;
  width: 96px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 2px;
}
.inhome-detail-icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.inhome-detail-body { flex: 1 1 auto; min-width: 0; }

.inhome-detail-title {
  font-family: var(--font-sans);     /* live site renders as sans-serif (Poppins stack) */
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: #000;
  margin: 0 0 5px;
  letter-spacing: -0.17px;
}

.inhome-detail-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 19.5px;
  color: var(--c-muted);              /* #89807c */
  margin: 0;
  letter-spacing: -0.17px;
}

.inhome-detail-cta {
  text-align: center;
  margin-top: 36px;
}

.btn-readmore {
  display: inline-block;
  background: #6AB165;                /* live button green */
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.17px;
  padding: 14px 20px;
  border: 1px solid #6AB165;
  border-radius: 5px;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-readmore:hover {
  background: #5a9b55;
  border-color: #5a9b55;
  color: #fff;
}

@media (max-width: 900px) {
  .inhome-detail-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .inhome-detail-tile { flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
  .inhome-detail-icon { width: 120px; height: 90px; }
  .inhome-detail-icon img { width: 90px; height: 88px; }
}

/* ============================================================
   FOOTER — matches andp.com.au
   ============================================================ */
.site-footer { font-size: 14px; line-height: 25px; }   /* links, contact, copyright */

.footer-main {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* parallax, like the original */
  color: #fff;
}
.footer-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);   /* lighter overlay so the photo shows through */
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 equal columns, like vc_col-sm-3 */
  gap: 30px;                               /* 15px inner padding each side on live */
  padding-top: 50px;
  padding-bottom: 50px;
  align-items: start;
}
.footer-badge { text-align: center; }
.footer-badge img { width: 150px; height: auto; margin: 0 auto; }   /* centered in its column, like live */

.footer-title {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #fff;   /* white underline spanning the column */
}
.site-footer p { margin: 0 0 1em; line-height: 25px; color: #fff; }
/* About Us column text is larger on the live site */
.footer-about p, .footer-about .readmore, .footer-reg { font-size: 17px; line-height: 25px; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #90bf55; }
.site-footer a.readmore { color: #90bf55; font-weight: 700; }
.site-footer a.readmore:hover { color: #fff; }
.footer-reg { color: #fff; }

.footer-links ul { list-style: disc; margin: 0; padding: 0 0 0 18px; }
.footer-links li { margin-bottom: 10px; color: #fff; }
.footer-links li a { color: #fff; }
.footer-links li a:hover { color: #90bf55; }

.footer-contact a { word-break: break-word; }

/* Black copyright bar */
.footer-bottom {
  background: #000;
  color: #89807c;
  text-align: center;
  padding: 18px 0;
  font-size: 14px;
}
.footer-bottom a { color: #90bf55; }

/* Back-to-top button */
.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 40px; height: 40px;
  border: 0;
  background: #90bf55;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
  z-index: 99;
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { background: #b20303; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-badge { grid-column: 1 / -1; text-align: center; }
  .footer-main { background-attachment: scroll; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-links ul { list-style: none; padding: 0; }
}

/* ============================================================
   OUR VISION — two-column (text + image), measured from live
   Content width 1100, columns 565/565, title Libre Baskerville
   50px / 33.3px responsive, body Poppins 17px #89807c, image
   with img-thumbnail look (white bg, 1px #ddd, 4px pad, 6px r).
   ============================================================ */
.about-vision-section {
  padding: 20px 0 50px;
}
.about-vision-container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 20px;
}
.about-vision-title {
  font-family: var(--font-serif);
  font-size: 50px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2em;
  color: #352219;
  text-align: center;
  letter-spacing: -0.3px;
  margin: 52px 0 35px;
}
.about-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.about-vision-text p {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  color: #89807c;
  text-align: justify;
  margin: 0;
}
.about-vision-photo img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #ddd;
  padding: 4px;
  border-radius: 6px;
  box-sizing: border-box;
}

@media (max-width: 1439px) {
  .about-vision-title { font-size: 33.3px; }
}
@media (max-width: 1279px) {
  .about-vision-title { font-size: 32px; line-height: 45px; margin: 42px 0 24px; }
}
@media (max-width: 1023px) {
  .about-vision-title { font-size: 28px; line-height: 38px; margin: 38px 0 20px; }
}
@media (max-width: 900px) {
  .about-vision-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-vision-photo { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .about-vision-title { font-size: 26px; line-height: 32px; margin: 30px 0 18px; }
}
@media (max-width: 479px) {
  .about-vision-title { font-size: 24px; }
}

/* ============================================================
   SERVICES PAGE — service section (text + bullets + image)
   Measured from live: content 1130, cols 565/565, h2 Libre
   Baskerville 33.3px, p Poppins 17px #89807c, list Poppins 14px.
   ============================================================ */
.service-section {
  padding: 20px 0 57px;
}
.service-container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 20px;
}
.service-title {
  font-family: var(--font-serif);
  font-size: 50px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2em;
  color: #352219;
  text-align: center;
  letter-spacing: -0.3px;
  margin: 52px 0 35px;
}
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.service-text p {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  color: #89807c;
  text-align: justify;
  margin: 0 0 29px;
}
.service-text p strong {
  color: #352219;
}
.service-list {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 25px;
  color: #89807c;
  list-style: disc;
  padding: 0 0 0 21px;
  margin: 0;
}
.service-list li {
  margin: 0;
  padding: 0;
}
.service-photo img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #ddd;
  padding: 4px;
  border-radius: 6px;
  box-sizing: border-box;
}

@media (max-width: 1439px) {
  .service-title { font-size: 33.3px; }
}
@media (max-width: 1279px) {
  .service-title { font-size: 32px; line-height: 45px; margin: 42px 0 24px; }
}
@media (max-width: 1023px) {
  .service-title { font-size: 28px; line-height: 38px; margin: 38px 0 20px; }
}
@media (max-width: 900px) {
  .service-grid { grid-template-columns: 1fr; gap: 24px; }
  .service-photo { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .service-title { font-size: 26px; line-height: 32px; margin: 30px 0 18px; }
}
@media (max-width: 479px) {
  .service-title { font-size: 24px; }
}

/* Elderly support services grid */
.elderly-support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.elderly-support-item {
  text-align: center;
  cursor: pointer;
}
.elderly-support-photo {
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 370 / 208;
  background: #eee;
}
.elderly-support-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease-out;
}
.elderly-support-label {
  font-family: sans-serif;
  font-size: 16.8px;
  font-weight: 400;
  line-height: 20.28px;
  color: #000;
  margin: 31px 0 0;
  letter-spacing: normal;
  text-transform: uppercase;
  transition: transform 0.25s ease-out;
  transform-origin: center top;
}
.elderly-support-item:hover .elderly-support-photo img {
  transform: scale(1.1, 1.1);
}
.elderly-support-item:hover .elderly-support-label {
  transform: scale(0.9, 0.9);
}

@media (max-width: 900px) {
  .elderly-support-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 500px) {
  .elderly-support-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ---------- In-home services cards ---------- */
.inhome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.inhome-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  border: 2px solid #999;
  border-radius: 3px;
  padding: 11px 10px;
}
.inhome-icon {
  flex-shrink: 0;
  width: 102px;
}
.inhome-icon img {
  max-width: 75%;
  height: auto;
  padding: 5px;
}
.inhome-info {
  flex: 1;
}
.inhome-name {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: #000;
  text-transform: none;
  margin: 0 0 5px;
  line-height: 1.3;
}
.inhome-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  color: #89807c;
  line-height: 19.5px;
  margin: 0;
}

@media (max-width: 767px) {
  .inhome-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
}

/* ---------- Contact Us section ---------- */
.contact-section {
  padding: 40px 0 57px;
}
.contact-container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.contact-heading {
  font-family: var(--font-serif);
  font-size: 33px;
  font-weight: 700;
  color: #352219;
  text-align: center;
  margin-bottom: 30px;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.contact-person {
  text-align: center;
}
.contact-name {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: #352219;
  text-align: center;
  margin: 0 0 5px;
}
.contact-role {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: #352219;
  text-align: center;
  margin: 0 0 40px;
}
.contact-info-block {
  margin-bottom: 40px;
  text-align: center;
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  margin-bottom: 10px;
}
.contact-icon svg {
  width: 26px;
  height: 26px;
  color: #90bf55;
}
.contact-info-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin: 0 0 4px;
}
.contact-info-value {
  font-family: var(--font-sans);
  font-size: 15px;
  color: #89807c;
  margin: 0;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .contact-person { margin-bottom: 30px; }
}

/* ---------- Send Message form ---------- */
.contact-form-section {
  padding: 40px 0 0;
}
.contact-form-container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.contact-form-card {
  background: #fff;
  padding: 50px 60px 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.contact-form-heading {
  font-family: var(--font-serif);
  font-size: 33px;
  font-weight: 700;
  color: #352219;
  text-align: center;
  margin: 0 0 30px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
.contact-form-field input[type="text"],
.contact-form-field input[type="email"],
.contact-form-field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #89807c;
  background: #eceae6;
  border: 2px solid #eceae6;
  border-radius: 30px;
  padding: 17px 20px;
  outline: none;
  transition: border-color .2s;
}
.contact-form-field textarea {
  border-radius: 30px;
  resize: vertical;
  font-size: 17px;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus {
  border-color: #90bf55;
}
.contact-form-field--full {
  margin-bottom: 30px;
}
.contact-form-consent {
  margin-bottom: 20px;
  text-align: center;
}
.contact-form-consent label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: #89807c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-form-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #90bf55;
}
.contact-form-status {
  padding: 14px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  text-align: center;
}
.contact-form-status.success { background: #e8f5e9; color: #2e7d32; }
.contact-form-status.error { background: #fce4ec; color: #c62828; }
.contact-form-submit {
  text-align: center;
}
.contact-form-submit input[type="submit"] {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: #89807c;
  background: #a29c98;
  border: none;
  border-radius: 30px;
  padding: 21px 53px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.contact-form-submit input[type="submit"]:hover {
  background: #90bf55;
  color: #fff;
}

@media (max-width: 767px) {
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 30px 20px 40px; }
}

/* ---------- Contact Map ---------- */
.contact-map {
  line-height: 0;
}
.contact-map iframe {
  display: block;
  width: 100%;
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVE
   ============================================================ */

/* --- Tablet (768px) --- */
@media (max-width: 768px) {
  .home-banner {
    height: 65vw;
    min-height: 380px;
    max-height: 500px;
    padding-top: 120px;
  }
  .banner-inner { padding: 0 0 0 24px; }
  .banner-caption h1 {
    font-size: clamp(18px, 4vw, 32px);
    line-height: 1.6;
  }
  .vision-inner { padding: 24px 15px; }
  .vision-col h2 { font-size: clamp(22px, 4vw, 30px); }
  .vision-col p { font-size: 15px; line-height: 22px; }
  .why-section { padding: 50px 0 40px; }
  .why-title { margin-bottom: 30px; }
  .services-section { padding: 50px 0 60px; }
  .services-title { margin-bottom: 30px; }
  .service-card img { height: 240px; }
  .inhome-section { padding: 50px 0 50px; }
  .inhome-title { margin-bottom: 30px; }
  .inhome-detail-section { padding: 30px 0 50px; }
  .page-banner { padding: 70px 0; }
  .about-intro-section { padding: 36px 0 44px; }
  .about-vision-section { padding: 15px 0 40px; }
  .service-section { padding: 15px 0 40px; }
  .service-text p { text-align: left; }
  .about-vision-text p { text-align: left; }
  .contact-name { font-size: 24px; }
  .contact-role { font-size: 20px; margin-bottom: 30px; }
  .contact-heading { font-size: 28px; }
  .contact-form-heading { font-size: 28px; }
  .contact-map iframe { height: 450px; }
}

/* --- Small mobile (480px) --- */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .container { padding: 0 16px; }
  .home-banner {
    min-height: 320px;
    height: 75vw;
    max-height: 400px;
    padding-top: 100px;
  }
  .banner-shape {
    width: 60%;
    left: 0;
    border-radius: 0 50px 50px 0;
    top: calc(50% - 70px);
    bottom: auto;
    height: 140px;
  }
  .banner-inner { padding: 0 16px; }
  .banner-caption h1 {
    font-size: clamp(15px, 4.2vw, 20px);
    line-height: 1.7;
  }
  .top-notice { font-size: 12px; padding: 0.8em 0; }
  .header-row { min-height: 70px; padding: 0 16px; }
  .logo img { height: 60px; }
  .vision-col h2 { font-size: 22px; }
  .vision-col p { font-size: 14px; line-height: 20px; }
  .vision-readmore { font-size: 12px; }
  .why-section { padding: 40px 0 30px; }
  .why-title { font-size: 26px; margin-bottom: 24px; }
  .why-item img { width: 80px; margin-bottom: 14px; }
  .why-item h4 { font-size: 14px; letter-spacing: 0.5px; }
  .services-section { padding: 40px 0 50px; }
  .services-title { font-size: 26px; margin-bottom: 24px; }
  .service-card h3 { font-size: 24px; }
  .service-card p { font-size: 15px; line-height: 22px; }
  .inhome-section { padding: 40px 0; }
  .inhome-title { font-size: 26px; margin-bottom: 20px; }
  .inhome-detail-section { padding: 20px 0 40px; }
  .inhome-detail-title { font-size: 17px; }
  .inhome-detail-desc { font-size: 13px; line-height: 18px; }
  .page-banner { padding: 40px 0; }
  .page-banner .breadcrumbs { font-size: 18px; }
  .page-banner .breadcrumbs-delim { font-size: 18px; margin: 0 6px; }
  .about-intro-text p { font-size: 15px; line-height: 21px; }
  .about-why-title { font-size: 22px !important; }
  .about-why-label { font-size: 14px; margin-top: 18px; }
  .about-vision-title { font-size: 22px !important; }
  .about-vision-text p { font-size: 15px; line-height: 21px; }
  .service-title { font-size: 22px !important; margin: 30px 0 16px !important; }
  .service-text p { font-size: 15px; line-height: 21px; }
  .service-list { font-size: 13px; line-height: 21px; }
  .elderly-support-label { font-size: 14px; margin-top: 18px; }
  .inhome-name { font-size: 17px; }
  .inhome-desc { font-size: 13px; line-height: 18px; }
  .contact-heading { font-size: 24px; margin-bottom: 20px; }
  .contact-name { font-size: 22px; }
  .contact-role { font-size: 18px; margin-bottom: 24px; }
  .contact-info-block { margin-bottom: 28px; }
  .contact-icon { width: 48px; height: 48px; }
  .contact-icon svg { width: 22px; height: 22px; }
  .contact-info-title { font-size: 17px; }
  .contact-info-value { font-size: 14px; }
  .contact-form-heading { font-size: 24px; }
  .contact-form-card { padding: 24px 16px 30px; }
  .contact-form-submit input[type="submit"] { padding: 16px 40px; font-size: 13px; }
  .contact-map iframe { height: 350px; }
  .footer-title { font-size: 20px; }
  .footer-about p, .footer-about .readmore, .footer-reg { font-size: 15px; }
  .site-footer p { font-size: 14px; }
  .footer-bottom { font-size: 13px; padding: 14px 0; }
  .btn-readmore { padding: 12px 18px; font-size: 13px; }
}

/* --- Service grid reverse order fix on mobile --- */
@media (max-width: 900px) {
  .service-grid--reverse { direction: ltr; }
  .service-grid--reverse .service-photo { order: 2; }
  .service-grid--reverse .service-text { order: 1; }
}

/* Prevent horizontal overflow everywhere */
html { overflow-x: hidden; }
main { overflow-x: hidden; }