/* ==========================================================================
   Ian Bland - Landing Home Dynamic Styles
   For SiteOrigin Page Builder
   All sections editable via PB interface
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ib-green-dark: #356909;
  --ib-green-heading: #507108;
  --ib-green-accent: #6ea020;
  --ib-green-border: #4b8e21;
  --ib-orange: #f95b02;
  --ib-yellow: #fdc232;
  --ib-yellow-line: #e8a317;
  --ib-dark: #252426;
  --ib-text-muted: rgba(0,0,0,0.7);
  --ib-white: #ffffff;
  --ib-font-h: 'Bree Serif', serif;
  --ib-font-b: 'Inter', sans-serif;
  --ib-font-hw: 'Caveat', cursive;
  
  
  
  --hero-text-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3.5' height='3.5' viewBox='0 0 3.5 3.5'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .333 .333 .333 0 0' result='whiteNoise'/%3E%3CfeComponentTransfer in='whiteNoise'%3E%3CfeFuncA type='table' tableValues='0 .34'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

}

/* ---------- Landing Page Wrapper ---------- */
.landing-home {
  width: 100%;
  overflow-x: hidden;
}

/* Remove SiteOrigin default widget bottom margins */
.landing-home .panel-grid .widget {
  margin-bottom: 0 !important;
}

#pg-41461-0, #pg-41461-2, #pg-41461-3, #pg-41461-4, #pg-41461-5, #pl-41461 .so-panel{
    margin-bottom: 0px !important;
}

/* Remove default cell padding - set per row instead */
.landing-home .panel-grid-cell {
  padding: 0 !important;
}

/* Full width stretched rows */
.landing-home .panel-row-style.vgrid-stretch {
  max-width: 100% !important;
}


/* ==========================================================================
   1. HERO SECTION
   PB Setup: Row → ID: hero-section
             Layout: Full Width Stretched
             Row Styles: Background Image = hero photo
             Cell 1 (~58%) → SiteOrigin Editor Widget (hero-content HTML)
             Cell 2 (~42%) → SiteOrigin Editor Widget (hero-visuals HTML)
   ========================================================================== */

#hero-section .panel-row-style {
  position: relative;
  min-height: 800px;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#hero-section .panel-grid-cell {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}


/* Hero content block */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 692px;
  padding: 100px 0 100px 0px;
}

/* Main heading */
.hero-content .hero-heading {
    font-family: var(--ib-font-h), "Bree Serif", serif !important;
    font-size: 56px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    margin: 0 0 12px 0 !important;

    color: #292728 !important;
}

.hero-content .hero-heading .accent {
    color: var(--ib-green-dark);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero-content .hero-heading,
    .hero-content .hero-heading .accent {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        -webkit-background-clip: text;
        background-clip: text;

        background-image:
            var(--hero-text-noise),
            radial-gradient(
                circle,
                rgba(255, 255, 255, 0.14) 0,
                rgba(255, 255, 255, 0.14) 0.8px,
                transparent 0.9px
            );

        background-repeat: repeat;
        background-size: 3.5px 3.5px, 3px 3px;
    }

    .hero-content .hero-heading {
        background-color: #292728;
    }

    .hero-content .hero-heading .accent {
        background-color: var(--ib-green-dark);
    }
}
/* Handwritten subheading */
.hero-content .hero-sub p {
  font-family: var(--ib-font-hw) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #161917 !important;
  text-transform: capitalize;
  line-height: 1.25 !important;
  margin: 0 0 2px 0 !important;
}

/* Curved yellow underline */
.decoration {
  position: relative;
  width: 100%;
  max-width: 345px;
  height: 14px;
  overflow: hidden;
  margin-top: -2px;
}

.decoration .decoration-inside {
    position: relative;
    width: 100%;
    height: 63px;
    left: -11%;
    bottom: 0;
    border-top: 3px solid var(--ib-yellow-line);
    border-radius: 50%;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    transform: rotate(-0.5deg);
}

.decoration p { display: none; }

/* Check-point list */
.hero-content .hero-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 40px 0 !important;
}

.hero-content .hero-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  font-family: var(--ib-font-b);
  font-size: 16px;
  font-weight: 500;
  color: #000;
  text-transform: capitalize;
}

.hero-content .hero-list li img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* CTA button */
.btn-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  background: var(--ib-orange) !important;
  color: var(--ib-white) !important;
  font-family: var(--ib-font-b) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  padding: 16px 24px !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  height: 58px;
  box-sizing: border-box;
  transition: background 0.3s, transform 0.2s;
  border: none !important;
}

.btn-cta:hover {
  background: #e05000 !important;
  transform: translateY(-2px);
  color: var(--ib-white) !important;
}

.btn-cta img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* Quote button */
.btn-quote {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  background: var(--ib-white) !important;
  color: var(--ib-green-border) !important;
  font-family: var(--ib-font-b) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  padding: 16px 24px !important;
  border-radius: 99px !important;
  border: 1px solid var(--ib-green-border) !important;
  text-decoration: none !important;
  height: 58px;
  box-sizing: border-box;
  transition: background 0.3s, transform 0.2s;
}

.btn-quote:hover {
  background: #f0f7e8 !important;
  transform: translateY(-2px);
  color: var(--ib-green-border) !important;
}

.btn-quote img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Trusted badge */
.hero-content .hero-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 40px;
  font-family: var(--ib-font-b);
  font-size: 16px;
  font-weight: 500;
  color: #000;
  text-transform: capitalize;
}

.hero-content .hero-trust img {
    width: 4%;
    height: 10%;
    flex-shrink: 0;
}

.hero-content .hero-trust .hl {
  color: var(--ib-green-accent);
  font-weight: 600;
}

/* ---- Right cell: visuals only ---- */
.hero-visuals {
  /* position: relative; */
  width: 100%;
  height: 100%;
  min-height: 500px;
  overflow: visible;
}

/* Sale badge - tucked into the top-right corner, slightly clipped */
.hero-visuals .hero-badge {
  position: absolute;
  top: 20%;
  right: 7%;
  z-index: 3;
  width: 280px;
  max-width: 50%;
  transform: rotate(-3.4deg);
}

.hero-visuals .hero-badge img { width: 100%; height: auto; }

/* Bottom banner - spans the bottom-right edge of the photo */
.hero-visuals .hero-banner {
    position: absolute;
    bottom: -60%;
    right: 23%;
    z-index: 3;
    width: 600px;
    max-width: 100%;
}

.hero-visuals .hero-banner img { width: 100%; height: auto; }

/* ==========================================================================
   2. WHY SCHOOLS BOOK ME
   PB Setup: Row → ID: why-book-me
             Layout: Full Width Stretched
             Padding: 40px top/bottom
             1 Cell → SiteOrigin Editor Widget
   ========================================================================== */

#why-book-me {
  text-align: center;
  background: #F8F4E8;
}

#why-book-me .panel-row-style {
  padding: 40px 80px;
}

/* Section heading with leaf images */
.heading-leafs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 9px;
}

.heading-leafs.left-align {
  justify-content: flex-start;
}

.heading-leafs img {
  width: 27px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

img.left-leafs {
    width: 28px;
    height: 32px;
    object-fit: cover;
    margin-top: 25px;
}

.heading-leafs h2 {
  font-family: var(--ib-font-h) !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: var(--ib-green-heading) !important;
  margin: 0 !important;
  white-space: nowrap;
  line-height: 1.3 !important;
}

.heading-sub {
  font-family: var(--ib-font-h) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--ib-dark) !important;
  margin: 0 0 40px 0 !important;
  text-align: center;
}

/* 6-column card grid */
.cards-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.cards-6 .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.cards-6 .card .c-img {
  width: 153px;
  height: 153px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.cards-6 .card .c-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cards-6 .card h3 {
  font-family: var(--ib-font-h) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #000 !important;
  margin: 0 !important;
}

.cards-6 .card p {
  font-family: var(--ib-font-b);
  font-size: 14px;
  color: var(--ib-text-muted);
  line-height: 1.48;
  margin: 0;
}


/* ==========================================================================
   3. WHAT'S INCLUDED
   PB Setup: Row → ID: whats-included
             Layout: Full Width Stretched
             2 Cells: 35% left | 65% right
             Cell 1 → SiteOrigin Editor Widget (checklist + testimonial)
             Cell 2 → SiteOrigin Editor Widget (image collage HTML)
   ========================================================================== */

#whats-included .panel-row-style {
  display: flex;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 80px;
  gap: 40px;
}

/* Override PB cell widths if needed */
#whats-included .panel-grid-cell:first-child {
  flex: 0 0 38% !important;
  max-width: 440px;
}

#whats-included .panel-grid-cell:last-child {
  flex: 1 !important;
}

/* Checklist */
.check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 !important;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 23px;
  font-family: var(--ib-font-b);
  font-size: 16px;
  font-weight: 500;
  color: #000;
  text-transform: capitalize;
}

.check-list li img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Rotated testimonial card */
.quote-card {
  position: relative;
  background: var(--ib-white);
  border-radius: 16px;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
  padding: 30px 24px 24px;
  max-width: 360px;
  transform: rotate(-2deg);
  margin-top: 32px;
  margin-left: 10px;
}

.quote-card .qo {
    position: absolute;
    top: -20px;
    left: 14px;
    font-size: 100px;
    color: var(--ib-green-heading);
    font-family: Georgia, serif;
    line-height: 1;
}

.quote-card .qc {
    position: absolute;
    bottom: -32%;
    right: 18px;
    font-size: 100px;
    color: var(--ib-green-heading);
    font-family: Georgia, serif;
    line-height: 1;
}

.quote-card .qt {
  font-family: var(--ib-font-hw) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #161917 !important;
  line-height: 1.2 !important;
  margin: 12px 0 !important;
}

.quote-card .qs { display: flex; gap: 4px; margin-bottom: 8px; }
.quote-card .qs img { width: 24px; height: 24px; }

.quote-card .qn {
  font-family: var(--ib-font-b);
  font-size: 14px;
  color: var(--ib-text-muted);
  margin: 0;
}

/* Image collage */
.img-collage {
  position: relative;
  width: 100%;
  min-height: 500px;
}

.img-collage .img-main {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
  border: 10px solid var(--ib-white);
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

.img-collage .img-left {
  position: absolute;
  bottom: 0px;
  left: -3px;
  width: 52%;
  max-width: 350px;
  object-fit: cover;
  border: 8px solid var(--ib-white);
  /*box-shadow: 0 4px 4px rgba(0,0,0,0.25);*/
  transform: rotate(-0.9deg);
}

.img-collage .img-right {
  position: absolute;
  bottom: 0px;
  right: -2px;
  width: 52%;
  max-width: 285px;
  object-fit: cover;
  border: 8px solid var(--ib-white);
  /*box-shadow: 0 4px 4px rgba(0,0,0,0.25);*/
  transform: rotate(1.6deg);
}


/* ==========================================================================
   4. ABOUT SECTION
   PB Setup: Row → ID: about-section
             Layout: Full Width Stretched
             Background: dark/image
             Padding: 40px 80px
             1 or 2 Cells: Image left | Text right
   ========================================================================== */

#about-section .panel-row-style {
  padding: 40px 80px;
}

#pg-41461-4> .panel-row-style {
    background-image: url(https://www.ianbland.com/wp-content/uploads/2026/08/About_Bg.png);
    background-position: center center;
    background-size: 83% !important;
    background-repeat: no-repeat !important;
    
}

.about-card {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  /*background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);*/
  /*border-radius: 16px;*/
  overflow: hidden;
  padding: 40px;
  /*min-height: 480px;*/
}

.about-card .about-img {
  /*flex-shrink: 0;*/
  width: 330px;
  height: 330px;
  /*border-radius: 50%;*/
  /*overflow: hidden;*/
  /*border: 6px solid rgba(255,255,255,0.1);*/
}

/*.about-card .about-img img {*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: cover;*/
/*}*/

.about-card .about-text {
  flex: 1;
}

.about-card .about-text h2 {
  font-family: var(--ib-font-h) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  color: var(--ib-white) !important;
  margin: 0 0 20px 0 !important;
}

.about-card .about-text p {
  font-family: var(--ib-font-b);
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin: 0 0 16px 0;
}

.about-card .about-text .tagline {
  font-family: var(--ib-font-hw) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ib-yellow) !important;
  margin-top: 20px !important;
}


/* ==========================================================================
   5. CTA BANNER
   PB Setup: Row → ID: cta-section
             Layout: Full Width Stretched
             Padding top/bottom 40px
             1 Cell → SiteOrigin Editor Widget
   ========================================================================== */

#cta-section .panel-row-style {
  padding: 40px 0;
}

.cta-block {
  background: var(--ib-yellow);
  padding: 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-block .cta-inner {
  max-width: 818px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-block h2 {
  font-family: var(--ib-font-h) !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: #2e620d !important;
  margin: 0 0 24px 0 !important;
}

.cta-block .cta-desc {
  font-family: var(--ib-font-h) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--ib-dark) !important;
  line-height: 1.4 !important;
  margin: 0 0 24px 0 !important;
}

.cta-block .cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Side illustrations */
.cta-block .ill-l {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 170px;
  z-index: 1;
}

.cta-block .ill-r {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  z-index: 1;
}

.cta-block .ill-l img,
.cta-block .ill-r img {
  width: 100%;
  height: auto;
}


/* ==========================================================================
   6. TESTIMONIALS
   PB Setup: Row → ID: testimonials
             Layout: Full Width Stretched
             Padding: 40px 80px
             1 Cell → SiteOrigin Editor Widget
   ========================================================================== */

#testimonials {
  text-align: center;
}

#testimonials .panel-row-style {
  padding: 40px 80px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1168px;
  margin: 0 auto;
}

.review-card {
  background: var(--ib-white);
  border-radius: 16px;
  box-shadow: 0 0 2px rgba(0,0,0,0.25);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.review-card .r-stars { display: flex; gap: 4px; justify-content: center; }
.review-card .r-stars img { width: 24px; height: 24px; }

.review-card .r-text {
  font-family: var(--ib-font-h) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--ib-dark) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.review-card .r-name {
  font-family: var(--ib-font-b);
  font-size: 14px;
  color: var(--ib-green-heading);
  margin: 0;
}


/* ==========================================================================
   7. FOOTER ROW
   PB Setup: Row → ID: pg-footer
             Layout: Full Width Stretched
             1 Cell → SiteOrigin Editor Widget
   ========================================================================== */

#pg-footer .panel-row-style {
  padding: 40px 80px;
}

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
}

.foot-row .fi {
  display: flex;
  align-items: center;
  gap: 10px;
}

.foot-row .fi img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.foot-row .fi a {
  font-family: var(--ib-font-b);
  font-size: 16px;
  color: #fff !important;
  text-decoration: none;
  transition: color 0.2s;
}

.foot-row .fi a:hover {
    color: #b9b9b9 !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
  .hero-content { padding-left: 40px; }
  .hero-content .hero-heading { font-size: 46px !important; }
  .hero-visuals .hero-badge { width: 200px; }
  .hero-visuals .hero-banner { width: 380px; bottom: 4%;}
  .cards-6 { grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
  #why-book-me .panel-row-style { padding: 40px 40px; }
  #whats-included .panel-row-style { padding: 40px; }
  .cta-block .ill-l, .cta-block .ill-r { display: none; }
  #testimonials .panel-row-style { padding: 40px; }
  .heading-leafs h2 { font-size: 34px !important; }
  .decoration{
      place-self: center;
  }
 .review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    width: 99%;
    margin: 0 auto;
}
}

@media (max-width: 1024px) {
  #hero-section .panel-row-style { flex-direction: column; }
  #hero-section .panel-grid-cell { height: auto; }
  .hero-visuals { min-height: 360px; margin-top: 20px; }

  #whats-included .panel-row-style { flex-direction: column; align-items: center; }
  #whats-included .panel-grid-cell:first-child { flex: 1 !important; max-width: 100%; }
  .img-collage { max-width: 600px; margin: 0 auto; }
  
  #pg-41461-4> .panel-row-style {
    background-image: url(https://www.ianbland.com/wp-content/uploads/2026/08/About_Bg.png);
    background-position: center center;
    background-size: 93% !important;
    background-repeat: no-repeat !important;
}
  
  .about-card { flex-direction: column; text-align: center; }
  .about-card .about-img { width: 220px; height: 220px; }
}

@media (max-width: 768px) {
  .hero-content { padding: 40px 10px; max-width: 100%; }
  .hero-content .hero-heading { font-size: 32px !important; }
  .hero-content .hero-sub { font-size: 25px !important; }
  .hero-content .hero-sub p {
    font-family: var(--ib-font-hw) !important;
    font-size: 23px !important;
    font-weight: 600 !important;
}
#pg-41461-0> .panel-row-style {
    background-image: url(https://www.ianbland.com/wp-content/uploads/2026/08/Hero.png);
    background-position: left center !important;
    background-size: cover;
    padding: 0px 0px 0px 0px;
}


.hero-content .hero-trust img{
    width: 7%;
    height: 10%;
    flex-shrink: 0;
}
#pgc-41461-2-1> .panel-cell-style{
    padding: 0px !important;
  .decoration { max-width: 260px; place-self: center;}
  .hero-content .hero-list li { font-size: 14px; }
  .btn-cta { font-size: 13px !important; padding: 14px 20px !important; height: 50px; }
  .hero-content .hero-trust { font-size: 14px; flex-wrap: no-wrap; }

  .hero-visuals { min-height: 280px; padding: 0 20px; }
  .hero-visuals .hero-badge { width: 130px; top: -40px; right: 0px; }
  .hero-visuals .hero-banner { width: 230px; left: 0px; bottom: 60%; }

  #why-book-me .panel-row-style { padding: 30px 20px; }
  .cards-6 { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .cards-6 .card .c-img { width: 120px; height: 120px; }
  .heading-leafs h2 { font-size: 26px !important; }
  .heading-leafs img { width: 20px; height: 24px; }
  .heading-sub { font-size: 16px !important; }

  #whats-included .panel-row-style { padding: 30px 20px; }
 .img-collage .img-left, .img-collage .img-right {
    width: 48%;
    border-width: 6px;
    height: 200px;
    max-height: inherit;
    bottom: -50px;
}
.img-collage { max-width: 600px; margin: 0 auto; min-height: auto !important;}

div#hero-second-cell {
    height: 120px;
}
  .img-collage .img-left { left: 0; height: auto;
            min-height: 32%;
            bottom: 1%;}
  .img-collage .img-right { right: 0; height: auto;
            bottom: 1%; }
 .img-collage .img-main {
    border-width: 8px;
    height: auto;
    max-height: 500px !important;
}
  .quote-card { max-width: 95%; }
  .quote-card .qt { font-size: 26px !important; }

  #about-section .panel-row-style { padding: 30px 20px; }
  .about-card { padding: 50px 20px; min-height: auto; gap:10px; }
  .about-card .about-text h2 { font-size: 28px !important; }
  
#pg-41461-4> .panel-row-style {
    background-image: url(https://www.ianbland.com/wp-content/uploads/2026/08/About_Bg.png);
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
  .cta-block { padding: 50px 20px; }
  .cta-block h2 { font-size: 26px !important; }
  .cta-block .cta-desc { font-size: 18px !important; }
  .cta-block .cta-btns { flex-direction: column; gap: 2px; }
  .btn-cta, .btn-quote { width: 100%; max-width: 300px; justify-content: center; }

  #testimonials .panel-row-style { padding: 30px 20px; }
  .review-grid { grid-template-columns: 1fr; max-width: 99%; }
  .review-card .r-text { font-size: 18px !important; }

  #pg-footer .panel-row-style { padding: 30px 20px; }
  .foot-row { flex-direction: column; gap: 20px; align-items: flex-start; }
  .foot-row .fi a { font-size: 14px; }
}

@media (max-width: 480px) {
  .hero-content .hero-heading { font-size: 26px !important; }
  div#pgc-41461-0-1 {
    height: 420px !important;
    width: 100% !important;
    background: url(/wp-content/uploads/2026/08/Frame-28.png);
    background-repeat: no-repeat;
    background-position: center;
}
.hero-visuals{
    display: none ;
}

#pg-41461-4> .panel-row-style {
    background-image: url(https://www.ianbland.com/wp-content/uploads/2026/08/About_Bg.png);
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
  .hero-content .hero-sub { font-size: 18px !important; }
  .cards-6 { grid-template-columns: 1fr; max-width: 200px; margin: 0 auto; }
  .heading-leafs h2 { font-size: 22px !important; white-space: normal; }
  .cta-block h2 { font-size: 22px !important; }
  .cta-block .cta-desc { font-size: 16px !important; }
}