/* === HERO BASE === */
/* Full-width hero background on desktop */
.section-with-hero {
    width: 100vw;
    max-width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
}

/* Control hero text container */
.hero-content {
    max-width: 650px;
    padding: 80px 40px 80px 40px;
}

/* Stop stupid mid-word breaking */
.hero-content h1 {
    word-break: normal;
    hyphens: manual;
}
/* Meet the Team – fix skinny layout on mobile */
@media (max-width: 768px) {

  /* Remove big desktop padding on phones */
  .nc-team-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Make sure the inner grid/columns can use full width */
  .nc-team-section .wp-block-kadence-rowlayout,
  .nc-team-section .kt-row-column-wrap,
  .nc-team-section .kt-row-column-inner,
  .nc-team-section .kt-inside-inner-col,
  .nc-team-section .wp-block-kadence-column {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 100% !important;
  }
}

/* === MOBILE TWEAKS === */
@media (max-width: 768px) {

    /* Let mobile behave like a normal section, no 100vw hack */
    .section-with-hero {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .hero-content {
        max-width: 100%;
        padding: 60px 16px 40px 16px; /* uses that left gap more */
    }

    .hero-content h1 {
        font-size: 28px;
        line-height: 1.1;
        word-break: normal;
        hyphens: manual;
    }
}
/* Shared container styles */
.nc-container {
  max-width: 1450px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* ABOUT PAGE spacing & image control – CLEAN VERSION */

/* Container width */
.nc-container {
  max-width: 1450px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* Image height limiting */
.page-id-509 .wp-block-image img {
  max-height: 420px !important;
  width: auto;
  height: auto;
  object-fit: cover;
}
/* ===== MEET THE TEAM – centred grid ===== */

.page-id-509 .nc-team-section {
  max-width: 1450px;
  margin: 0 auto 80px auto;
  padding: 0 20px;
}

/* Grid that holds all team members */
.page-id-509 .nc-team-section .team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centres the row */
  gap: 40px 60px;            /* row / column spacing */
}

/* Each team member card */
.page-id-509 .nc-team-section .team-member {
  flex: 0 1 300px;           /* 3 per row on big screens, 2 on medium */
  max-width: 340px;
  text-align: left;          /* change to center if you prefer */
}

/* Team images – consistent size */
.page-id-509 .nc-team-section .team-member img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  display: block;
  margin-bottom: 16px;
}

/* Stack nicely on smaller screens */
@media (max-width: 900px) {
  .page-id-509 .nc-team-section .team-member {
    flex: 0 1 45%;
  }
}

@media (max-width: 600px) {
  .page-id-509 .nc-team-section .team-grid {
    gap: 32px;
  }
  .page-id-509 .nc-team-section .team-member {
    flex: 0 1 100%;
  }
}
/* ABOUT US – fix broken text on mobile */
@media (max-width: 767px) {
  /* Only target the About Us page (ID 509) */
  body.page-id-509 .entry-content h2,
  body.page-id-509 .entry-content h3,
  body.page-id-509 .entry-content p {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
  }

  /* Let the content actually use the full width on mobile */
  body.page-id-509 .entry-content,
  body.page-id-509 .entry-content .wp-block-kadence-rowlayout,
  body.page-id-509 .entry-content .wp-block-kadence-rowlayout .kt-row-column-wrap,
  body.page-id-509 .entry-content .kt-inside-inner-col {
    max-width: 100% !important;
  }
}
/* Process step cards – subtle hover lift */
.process-step-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
}
/* Global image scroll animation */
.nc-anim-img {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.nc-anim-img.nc-anim-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Opt-out class for images that shouldn't animate */
.nc-anim-disable {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Make sure Kadence galleries are never hidden by animation */
.kadence-blocks-gallery .nc-anim-img {
  opacity: 1 !important;
  transform: none !important;
}

/* ===========================
   HERO ANIMATION
   =========================== */

/* Initial states */
.nc-hero-image {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.nc-hero-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease-out 0.3s, transform 0.9s ease-out 0.3s;
}

/* When active */
.nc-hero.nc-hero-in-view .nc-hero-image {
  opacity: 1;
  transform: translateX(0);
}

.nc-hero.nc-hero-in-view .nc-hero-text {
  opacity: 1;
  transform: translateY(0);
}
/* Disable hero animations inside the block editor so content is visible */
.editor-styles-wrapper .nc-hero-image,
.editor-styles-wrapper .nc-hero-text {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Hero text – subtle lift only, no ugly box */
.nc-hero-text h1,
.nc-hero-text p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.nc-hero-text p {
  font-weight: 500;
}
/* === EXTRA MOBILE HERO FIX FOR iPHONE / SAFARI === */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 25px !important; /* slightly smaller to prevent wrapping */
        line-height: 1.12;
    }
}
/* Completely exclude Kadence gallery images from animation */
.kb-gallery-item img,
.kadence-blocks-gallery img,
.wp-block-kadence-advancedgallery img {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.hero-content {
  position: relative;
  display: inline-block;
}

.hero-content::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -12px;
  right: -12px;
  bottom: -8px;
  background: rgba(0,0,0,0.20);
  filter: blur(18px);
  border-radius: 8px;
  z-index: -1;
}
/* === MOBILE: stop "Northumberland" wrapping === */
@media (max-width: 600px) {
  .hero-content {
    max-width: 100vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .hero-content h1,
  .hero-content .wp-block-heading {
    font-size: 22px !important;
    line-height: 1.05 !important;
    word-break: keep-all !important;
    hyphens: manual !important;
  }
}

/* Extra-tight for very small phones */
@media (max-width: 430px) {
  .hero-content h1,
  .hero-content .wp-block-heading {
    white-space: nowrap !important;  /* force single line */
    font-size: 20px !important;
  }
}
/* === MOBILE: trim hero button === */
@media (max-width: 600px) {

  .hero-content .kb-button,
  .hero-content .wp-block-button__link,
  .hero-content .wp-block-button {
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
  }
}

/* Extra small screens */
@media (max-width: 430px) {
  .hero-content .kb-button,
  .hero-content .wp-block-button__link,
  .hero-content .wp-block-button {
    font-size: 13px !important;
    padding: 6px 12px !important;
  }
}
/* ==============================
   GLOBAL MOBILE OPTIMISATION
   ============================== */
@media (max-width: 768px) {

  /* Limit side padding for all content blocks */
  .entry-content > *,
  .kb-row-layout-wrap,
  .wp-block-group,
  .wp-block-cover__inner-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Prevent over-narrow text blocks */
  .entry-content {
    max-width: 100%;
  }

  /* Headings – mobile scale */
  h1 {
    font-size: 28px;
    line-height: 1.15;
  }

  h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  h3 {
    font-size: 20px;
    line-height: 1.3;
  }

  h4 {
    font-size: 18px;
    line-height: 1.35;
  }

  /* Body text readability */
  p,
  li {
    font-size: 16px;
    line-height: 1.6;
  }

}
/* ==============================
   MOBILE: TIGHTER PADDING + SMALLER HEADERS
   ============================== */
@media (max-width: 768px) {

  /* Kill excessive Kadence inner padding */
  .kb-row-layout-wrap,
  .kb-row-layout,
  .kb-row-layout > .kt-row-column-wrap,
  .kb-row-layout .kt-inside-inner-col,
  .wp-block-group,
  .wp-block-group__inner-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Also catch stacked / nested blocks */
  .entry-content > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }