/* =========================================================
   GLOBAL (CLEANED)
========================================================= */

/* Smooth scroll + header offset (keep once) */
html { scroll-behavior: smooth; }

:root{
  scroll-padding-top: 110px; /* adjust if header height differs */
}

/* shared bounce used by arrows */
@keyframes rw-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Utility: make an Image block fill its container */
.image-fill img{
  width: 100%;
  height: auto;
  display: block;
}

/* Hide the page title on ONLY the “New Homepage” page */
.page-id-168 .entry-title{
  display: none !important;
}


/* =========================================================
   MENU / HEADER
========================================================= */

/* Default: sticky header everywhere */
#masthead{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;

  background: rgba(238, 233, 229, 0.92) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(31,42,55,0.10);
  box-shadow: none !important;
}

/* HOME: overlay header on top of hero (CSS-only) */
.home #masthead{
  position: fixed !important;
  left: 0; right: 0;
  top: 0 !important;

  background: transparent !important;
  border-bottom-color: rgba(31,42,55,0.06);
}

/* ✅ REMOVE the gap: do NOT push content down on home */
.home #content{ padding-top: 0 !important; }

/* If Astra adds spacing above content, neutralise it on home */
.home .site-content,
.home #primary,
.home .entry-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Center the menu container */
#masthead .main-header-bar .ast-container{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove logo area safely (hide + remove space) */
#masthead .site-branding,
#masthead .ast-site-identity,
#masthead .ast-header-logo{
  display: none !important;
}

#masthead .site-header-section-left,
#masthead .site-header-section-right{
  display: none !important;
}

/* Menu layout */
#masthead .main-header-menu{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 42px;
  margin: 0 !important;
}

/* Menu typography + hover */
#masthead .main-header-menu > li > a{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1f2a37 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 18px 0 !important;

  position: relative;
  transition: color 180ms ease;
}

#masthead .main-header-menu > li > a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #D22F2B;
  transition: width 220ms ease;
}

#masthead .main-header-menu > li > a:hover{
  color: #D22F2B !important;
}

#masthead .main-header-menu > li > a:hover::after{
  width: 100%;
}

#masthead .main-header-menu > li.current-menu-item > a{
  color: #D22F2B !important;
}

#masthead .main-header-menu > li.current-menu-item > a::after{
  width: 100%;
}

/* Optional: tighten header height */
#masthead .main-header-bar{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* =========================================================
   HERO SECTION (ONLY affects Cover blocks that have hero-cover)
========================================================= */
.hero-cover{
  position: relative;
  min-height: 100vh;
}

.hero-cover .wp-block-cover__inner-container{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   GLOBAL ARROWS (ONE SYSTEM) — NO EXTRA PAGE HEIGHT
   - per-section (not fixed)
   - consistent bottom-right position
   - NO global runway padding (prevents huge blank spaces)
========================================================= */

:root{
  --rw-arrow-x: 40px;
  --rw-arrow-y: 28px;
}

/* Each anchored section is the positioning context */
:where(#section-1,#section-2,#section-3,#section-4,#section-5,#section-6){
  position: relative;
}

/* Place arrows bottom-right inside each section */
:where(#section-1,#section-2,#section-3,#section-4,#section-5,#section-6) .rw-nav{
  position: absolute !important;
  right: var(--rw-arrow-x) !important;
  bottom: var(--rw-arrow-y) !important;

  left: auto !important;
  top: auto !important;

  z-index: 80 !important;
  margin: 0 !important;
  transform: none !important;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Row variant */
:where(#section-1,#section-2,#section-3,#section-4,#section-5,#section-6) .rw-nav--row{
  flex-direction: row;
  gap: 12px;
}

/* Button styling (define once) */
.rw-nav a{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(210,47,43,0.35);

  backdrop-filter: blur(2px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.rw-nav a svg{
  width: 22px;
  height: 22px;
  display: block;
  transition: transform .18s ease;
}

.rw-nav a svg path{
  stroke: #D22F2B;
}

/* Hover */
.rw-nav a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.92);
  border-color: rgba(210,47,43,0.60);
}

.rw-nav a:hover svg{
  transform: scale(1.06);
}

/* Mobile */
@media (max-width: 900px){
  :root{
    --rw-arrow-x: 24px;
    --rw-arrow-y: 22px;
  }
}

/* Section 1: centre the arrow on small phones (e.g. iPhone SE) */
@media (max-width: 420px){
  #section-1 .rw-nav{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}



/* =========================================================
   SECTION 1 (CLEANED) — HERO
========================================================= */

#section-1.hero-cover{
  position: relative;
  min-height: 100vh;
}

#section-1.hero-cover .wp-block-cover__inner-container{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}



//* =========================================================
   SECTION 2 — ABOUT (FINAL, SCOPED TO NEW HOMEPAGE DRAFT)
   Scope: .page-id-168 only
   Fix: desktop icon stays inside image bounds + sizing tuned
========================================================= */

/* ---------- Base ---------- */
.page-id-168 .about-section{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f2a37;
}

.page-id-168 .about-section .about-columns.wp-block-columns{
  max-width: 1100px;
  margin: 0 auto;
  gap: 44px;
  align-items: center;
}

.page-id-168 .about-columns.wp-block-columns > .wp-block-column{
  display: flex;
  flex-direction: column;
}

/* ---------- Left image column ---------- */
.page-id-168 .about-image-col{
  position: relative; /* overlay positioning context */
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-id-168 .wp-block-image.about-image{
  position: relative;
  display: block;
  margin: 0;
}

.page-id-168 .wp-block-image.about-image img{
  width: 100%;
  height: auto;
  display: block;
}

/* Red bar on right edge */
.page-id-168 .wp-block-image.about-image::after{
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 18px;
  height: 100%;
  background-color: #D22F2B;
  pointer-events: none;
}

/* ---------- Overlay heading + icon ---------- */
/* Controls (easy to tweak) */
.page-id-168 #section-2{
  --about-overlay-top: 10%;
  --about-overlay-desktop: clamp(58px, 4.1vw, 74px); /* reduced so it stays inside image */
  --about-overlay-ipad: 56px;                         /* iPad Pro: slightly smaller */
  --about-overlay-mobile: clamp(34px, 7vw, 52px);
  --icon-drop: 0.14em;                                /* lowers icon to align with text */
  --icon-w: 4px;
}

/* The overlay itself */
.page-id-168 #section-2 .about-overlay{
  position: absolute;
  top: var(--about-overlay-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;

  margin: 0;
  padding: 0 0 0 0.70em;          /* IMPORTANT: reserves space so icon stays INSIDE */
  box-sizing: border-box;
  white-space: nowrap;
  display: inline-block;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-align: center;

  font-size: var(--about-overlay-desktop) !important;
  color: #E6E6E6 !important;
}

/* Make inner Gutenberg headings inherit sizing */
.page-id-168 #section-2 .about-overlay h1,
.page-id-168 #section-2 .about-overlay h2,
.page-id-168 #section-2 .about-overlay h3,
.page-id-168 #section-2 .about-overlay p{
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: 0;
}

/* Double lines icon — now INSIDE the overlay box (no negative left) */
.page-id-168 #section-2 .about-overlay::before,
.page-id-168 #section-2 .about-overlay::after{
  content: "";
  position: absolute;
  top: calc(-0.08em + var(--icon-drop));
  width: var(--icon-w);
  background: #E6E6E6;
}

.page-id-168 #section-2 .about-overlay::before{
  left: 0.10em;
  height: 1.05em;
}

.page-id-168 #section-2 .about-overlay::after{
  left: 0.47em;
  height: 0.35em;
}

/* ---------- Right text column ---------- */
.page-id-168 .about-text-col{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 0; /* true vertical alignment */
}

.page-id-168 .about-section .about-lead{
  font-size: 22px;
  line-height: 1.55;
  font-weight: 300;
  margin: 0 0 18px 0;
  max-width: 520px;
}

.page-id-168 .about-section .about-side{
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: #6b7280;
  margin: 0 0 14px 0;
  max-width: 360px;
}

.page-id-168 .about-section .about-name{
  font-size: 15px;
  font-weight: 600;
  margin: 8px 0 2px 0;
}

.page-id-168 .about-section .about-title{
  font-size: 14px;
  font-weight: 300;
  margin: 0;
  color: #6b7280;
}

/* ---------- iPad Pro (≈1024) ---------- */
@media (min-width: 980px) and (max-width: 1100px){
  .page-id-168 #section-2 .about-overlay{
    font-size: var(--about-overlay-ipad) !important;
  }
}

/* ---------- Tablet + down (stacked) ---------- */
@media (max-width: 900px){
  .page-id-168 .about-section .about-columns.wp-block-columns{
    max-width: 100%;
    gap: 12px;
    align-items: stretch;
  }

  .page-id-168 .about-text-col{
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .page-id-168 #section-2 .about-overlay{
    font-size: var(--about-overlay-mobile) !important;
    top: 12% !important;
    padding-left: 0.65em; /* keep icon inside even on small screens */
  }
}

/* ---------- iPhone SE / small phones ---------- */
@media (max-width: 420px){
  .page-id-168 #section-2 .about-overlay{
    font-size: 34px !important;
    top: 12% !important;
  }

  .page-id-168 #section-2 .about-overlay::before,
  .page-id-168 #section-2 .about-overlay::after{
    width: 3px;
  }

  .page-id-168 #section-2 .rw-nav{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}



/* =========================================================
   =========================================================
   SECTION 3 — YOUR TEAM
   Clean + shared strip class (.team-strip)
   =========================================================
========================================================= */


/* =========================================================
   3.1 — COVER BACKGROUND + OVERLAY
========================================================= */

#section-3 .team-cover{
  position: relative;
  padding: 64px 0;
}

#section-3 .team-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(238, 233, 229, 0.86);
  pointer-events: none;
  z-index: 0;
}

#section-3 .team-cover .wp-block-cover__inner-container{
  position: relative;
  z-index: 1;
}


/* =========================================================
   3.2 — SECTION WRAPPER + HEADINGS
========================================================= */

#section-3 .team-section{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f2a37;
}

/* Columns wrapper */
#section-3 .team-section .wp-block-columns{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* Kicker */
#section-3 .team-section .team-kicker,
#section-3 .team-section .wp-block-paragraph.team-kicker{
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1f2a37;
  margin: 0 0 12px 0;
}

/* Title */
#section-3 .team-section .team-title,
#section-3 .team-section h2.team-title,
#section-3 .team-section .wp-block-heading.team-title{
  color: #D22F2B !important;
  font-size: 56px;
  font-weight: 600;
  margin: 0 0 34px 0;
  display: inline-block;
}

#section-3 .team-section .team-title::after{
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #D22F2B;
  margin-left: 12px;
  transform: translateY(-2px);
}


/* =========================================================
   3.3 — TEAM CARD (BASE)
========================================================= */

#section-3 .team-card{
  --name-indent: 64px;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(210, 47, 43, 0.10);
  padding: 26px 26px 22px 26px;

  border-radius: 0;
  border-top-right-radius: 80px;

  backdrop-filter: blur(2px);
  max-width: 360px;
}

#section-3 .team-card p,
#section-3 .team-card li{
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  color: #374151;
}

#section-3 .team-card p{ margin: 0 0 10px 0; }


/* =========================================================
   3.4 — NAME + DOUBLE LINES + QUALIFICATIONS
========================================================= */

#section-3 .team-card .team-name{
  position: relative;
  margin: 0;
  padding-left: var(--name-indent);
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.15;
}

/* Double lines motif */
#section-3 .team-card .team-name::before,
#section-3 .team-card .team-name::after{
  content: "";
  position: absolute;
  left: 0;
  height: 4px;
  background: #1f2a37;
  border-radius: 2px;
}

#section-3 .team-card .team-name::before{ top: 10px; width: 56px; }
#section-3 .team-card .team-name::after{ top: 26px; width: 34px; }

/* Qualifications */
#section-3 .team-card .team-quals{
  margin: 0 0 10px 0;
  padding-left: var(--name-indent);
  font-size: 14px;
  line-height: 1.35;
  color: #6b7280;
  font-weight: 400;
}


/* =========================================================
   3.5 — BEN CARD ONLY (INLINE NAME + QUALS)
========================================================= */

#section-3 .team-card.team-card--ben .team-topline{
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  column-gap: 6px;
  margin-bottom: 2px !important;
}

#section-3 .team-card.team-card--ben .team-topline .team-name{
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

#section-3 .team-card.team-card--ben .team-topline .team-quals{
  padding-left: 0 !important;
  margin: 0;
  font-size: 10px !important;
  line-height: 1.15 !important;

  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: baseline;
}


/* =========================================================
   3.6 — ROLE + BIO + LIST
========================================================= */

#section-3 .team-card .team-role{
  margin: 0 0 18px 0;
  padding-left: var(--name-indent);
  font-size: 16px;
  line-height: 1.35;
  color: #374151;
  font-weight: 500;
}

#section-3 .team-card .team-bio{
  margin: 0 0 18px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #4b5563;
  font-weight: 400;
}

/* Ben: pull role up slightly */
#section-3 .team-card.team-card--ben .team-role{
  margin-top: -8px !important;
  padding-top: 0 !important;
}

/* Plus list */
#section-3 .team-card ul{
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
}

#section-3 .team-card ul li{
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.55;
}

#section-3 .team-card ul li::before{
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: #D22F2B;
  font-weight: 700;
}


/* =========================================================
   3.7 — TEAM STRIP (EMAIL + PHONE) — SHARED STYLE
   Apply class .team-strip to the *Buttons* block
========================================================= */

#section-3 .team-strip{
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

/* second strip under the first */
#section-3 .team-strip + .team-strip{
  margin-top: 12px;
}

#section-3 .team-strip .wp-block-button__link{
  position: relative;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;

  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(210, 47, 43, 0.18) !important;

  color: #111827 !important;
  text-decoration: none !important;

  padding: 14px 14px 14px 86px;
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  border-radius: 0 !important;
  border-top-right-radius: 56px !important;

  box-shadow: none !important;
  outline: none !important;
  transition: none !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* kill Astra hover fill */
#section-3 .team-strip .wp-block-button__link:hover,
#section-3 .team-strip .wp-block-button__link:focus,
#section-3 .team-strip .wp-block-button__link:active{
  background: rgba(255,255,255,0.78) !important;
  color: #111827 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* double-line motif */
#section-3 .team-strip .wp-block-button__link::before,
#section-3 .team-strip .wp-block-button__link::after{
  content: "";
  position: absolute;
  left: 22px;
  height: 4px;
  background: #1f2a37;
  border-radius: 2px;
  transform-origin: left center;
  transition: transform 220ms ease, background-color 220ms ease;
}

#section-3 .team-strip .wp-block-button__link::before{
  width: 56px;
  top: 50%;
  transform: translateY(-9px) scaleX(1);
}

#section-3 .team-strip .wp-block-button__link::after{
  width: 34px;
  top: 50%;
  transform: translateY(7px) scaleX(1);
}

/* hover accent */
#section-3 .team-strip .wp-block-button__link:hover::before,
#section-3 .team-strip .wp-block-button__link:focus::before,
#section-3 .team-strip .wp-block-button__link:hover::after,
#section-3 .team-strip .wp-block-button__link:focus::after{
  background: #D22F2B;
}

#section-3 .team-strip .wp-block-button__link:hover::before,
#section-3 .team-strip .wp-block-button__link:focus::before{
  transform: translateY(-9px) scaleX(1.18);
}

#section-3 .team-strip .wp-block-button__link:hover::after,
#section-3 .team-strip .wp-block-button__link:focus::after{
  transform: translateY(7px) scaleX(1.18);
}


/* =========================================================
   3.8 — SECTION 3 RESPONSIVE
========================================================= */

@media (max-width: 900px){
  #section-3 .team-section .team-title{ font-size: 40px; }
  #section-3 .team-card{ border-top-right-radius: 40px; }
  #section-3 .team-card .team-name{ font-size: 22px; }
}






/* =========================================================
   =========================================================
   SECTION 4 — PROCESS
   Cover image + overlay + grid + numbers + arrows + responsive
   =========================================================
========================================================= */

/* =========================================================
   SECTION 4 — Hide cover image, keep beige overlay
========================================================= */

#section-4 .process-cover .wp-block-cover__image-background{
  display: none !important;
}


/* =========================================================
   SECTION 4 — spacing so titles sit BELOW the squares
========================================================= */

#section-4 .process-step{
  /* match your 150px icon slot + add breathing room */
  grid-template-rows: 150px 84px auto; /* icon / title / list */
}

#section-4 .process-step-title{
  height: 84px;              /* gives space below the square */
  padding-top: 18px;         /* pushes title down */
  align-items: flex-start;   /* keep title at top of its row */
}


/* =========================================================
   4.1 — COVER BACKGROUND + OVERLAY
========================================================= */

.process-cover{
  position: relative;
  padding: 74px 0 170px; /* bottom room for arrows */
}

/* Beige overlay tint */
.process-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(238, 233, 229, 0.86);
  pointer-events:none;
  z-index:0;
}

/* Content above overlay */
.process-cover .wp-block-cover__inner-container{
  position: relative;
  z-index: 1;
}


/* =========================================================
   4.2 — SECTION WRAPPER + HEADINGS
========================================================= */

.process-section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f2a37;
}

/* Kicker */
.process-kicker{
  margin: 0 0 12px 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  color: #1f2a37;
}

/* Title + red square */
.process-title{
  color: #D22F2B !important;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 34px 0;
  display: inline-block;
  line-height: 1.1;
}

.process-title::after{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  background:#D22F2B;
  margin-left:12px;
  transform: translateY(-2px);
}


/* =========================================================
   4.3 — 5 STEPS GRID
========================================================= */

.process-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  padding-bottom: 110px; /* space for arrows so they never touch text */
}

/* Each step: fixed rows = perfect alignment */
.process-step{
  display: grid;
  grid-template-rows: 120px 60px auto; /* icon row / title row / list row */
  justify-items: center;
  align-items: start;
  text-align: center;
}


/* =========================================================
   4.4 — ICON SLOT + BROCHURE “3 CORNERS CONNECTED” FRAME + NUMBER
   (Scoped to #section-4 to avoid affecting Sections 5/6)
========================================================= */

/* ICON SLOT */
#section-4 .process-step .process-step-icon,
#section-4 .process-step figure.wp-block-image.process-step-icon,
#section-4 .process-step .wp-block-image.process-step-icon{
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  position: relative; /* anchor ::before/::after safely */
}

/* Hide the old image-based square */
#section-4 .process-step .process-step-icon img{
  opacity: 0 !important;
}

/* Wrapper (frame + number live here) */
#section-4 .process-step-icon{
  position: relative;
  display: block;

  --frame-color: #D22F2B;
  --frame-stroke: 2px;

  /* size of the missing-corner opening */
  --gap: 54px; /* increase/decrease to taste */
}

/* FRAME LAYER (outline only, NEVER filled) */
#section-4 .process-step-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat; /* critical: prevents tiling/fill */
}

/* NUMBER LAYER */
#section-4 .process-step-icon::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 72px;
  line-height: 1;
  color: #cd9932;
}

/* 1–5 labels */
#section-4 .process-grid > .wp-block-group:nth-child(1) .process-step-icon::after{ content: "1"; }
#section-4 .process-grid > .wp-block-group:nth-child(2) .process-step-icon::after{ content: "2"; }
#section-4 .process-grid > .wp-block-group:nth-child(3) .process-step-icon::after{ content: "3"; }
#section-4 .process-grid > .wp-block-group:nth-child(4) .process-step-icon::after{ content: "4"; }
#section-4 .process-grid > .wp-block-group:nth-child(5) .process-step-icon::after{ content: "5"; }

/* =========================================================
   FRAME VARIANTS (one missing corner each)
   We draw 4 sides, but shorten TWO sides around the “gap corner”
   so ONLY that corner is open; the other 3 corners stay connected.
========================================================= */

/* 1) Bottom-right gap (Step 1 + Step 5) */
#section-4 .process-grid > .wp-block-group:nth-child(1) .process-step-icon::before,
#section-4 .process-grid > .wp-block-group:nth-child(5) .process-step-icon::before{
  background:
    /* TOP full */
    linear-gradient(var(--frame-color) 0 0) left top /
      100% var(--frame-stroke) no-repeat,

    /* LEFT full */
    linear-gradient(var(--frame-color) 0 0) left top /
      var(--frame-stroke) 100% no-repeat,

    /* RIGHT shortened (leaves gap at bottom-right) */
    linear-gradient(var(--frame-color) 0 0) right top /
      var(--frame-stroke) calc(100% - var(--gap)) no-repeat,

    /* BOTTOM shortened (leaves gap at bottom-right) */
    linear-gradient(var(--frame-color) 0 0) left bottom /
      calc(100% - var(--gap)) var(--frame-stroke) no-repeat;
}

/* 2) Bottom-left gap (Step 2) */
#section-4 .process-grid > .wp-block-group:nth-child(2) .process-step-icon::before{
  background:
    /* TOP full */
    linear-gradient(var(--frame-color) 0 0) left top /
      100% var(--frame-stroke) no-repeat,

    /* RIGHT full */
    linear-gradient(var(--frame-color) 0 0) right top /
      var(--frame-stroke) 100% no-repeat,

    /* LEFT shortened (leaves gap at bottom-left) */
    linear-gradient(var(--frame-color) 0 0) left top /
      var(--frame-stroke) calc(100% - var(--gap)) no-repeat,

    /* BOTTOM shortened (start after gap; anchored to right) */
    linear-gradient(var(--frame-color) 0 0) right bottom /
      calc(100% - var(--gap)) var(--frame-stroke) no-repeat;
}

/* 3) Top-left gap (Step 3) */
#section-4 .process-grid > .wp-block-group:nth-child(3) .process-step-icon::before{
  background:
    /* BOTTOM full */
    linear-gradient(var(--frame-color) 0 0) left bottom /
      100% var(--frame-stroke) no-repeat,

    /* RIGHT full */
    linear-gradient(var(--frame-color) 0 0) right top /
      var(--frame-stroke) 100% no-repeat,

    /* TOP shortened (anchored to right; leaves gap at top-left) */
    linear-gradient(var(--frame-color) 0 0) right top /
      calc(100% - var(--gap)) var(--frame-stroke) no-repeat,

    /* LEFT shortened (anchored to bottom; leaves gap at top-left) */
    linear-gradient(var(--frame-color) 0 0) left bottom /
      var(--frame-stroke) calc(100% - var(--gap)) no-repeat;
}

/* 4) Top-right gap (Step 4) */
#section-4 .process-grid > .wp-block-group:nth-child(4) .process-step-icon::before{
  background:
    /* BOTTOM full */
    linear-gradient(var(--frame-color) 0 0) left bottom /
      100% var(--frame-stroke) no-repeat,

    /* LEFT full */
    linear-gradient(var(--frame-color) 0 0) left top /
      var(--frame-stroke) 100% no-repeat,

    /* TOP shortened (anchored to left; leaves gap at top-right) */
    linear-gradient(var(--frame-color) 0 0) left top /
      calc(100% - var(--gap)) var(--frame-stroke) no-repeat,

    /* RIGHT shortened (anchored to bottom; leaves gap at top-right) */
    linear-gradient(var(--frame-color) 0 0) right bottom /
      var(--frame-stroke) calc(100% - var(--gap)) no-repeat;
}


/* =========================================================
   4.5 — STEP TITLE + LIST
========================================================= */

/* Title row (fixed height) */
.process-step-title{
  margin: 0 !important;
  height: 60px;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: #1f2a37;
}

/* List */
.process-step ul{
  width: 100%;
  max-width: 220px;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.process-step li{
  position: relative;
  padding-left: 22px;
  margin: 0 0 12px 0;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 300;
  color: #374151;
}

.process-step li::before{
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: #D22F2B;
  font-weight: 700;
}


/* =========================================================
   4.6 — SMALL ALIGNMENT TWEAKS
========================================================= */

/* First step alignment (move whole step down) */
.process-grid > .process-step:first-child{
  padding-top: 20px;
}


/* =========================================================
   4.7 — ARROWS PLACEMENT
========================================================= */

.process-cover .rw-nav.rw-nav--row{
  position: absolute;
  right: 40px;
  bottom: 24px;
  z-index: 5;
  margin: 0 !important;
}


/* =========================================================
   4.8 — SECTION 4 RESPONSIVE
========================================================= */

@media (max-width: 1100px){
  .process-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (max-width: 900px){
  .process-title{ font-size: 40px; }
}

@media (max-width: 780px){
  .process-title{ font-size: 34px; }

  .process-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .process-step ul{
    max-width: 520px;
  }
}



/* =========================================================
   SECTION 5 — WHY US (clean + brochure aligned)
   - Kicker: "REDWORKSPACE" black + thin
   - Title: "WHY US?" slightly smaller
   - Icons drawn in CSS (hide uploaded images safely)
   - Divider line drawn from title ::after
   - Divider width matches paragraph width
========================================================= */

/* =========================
   COVER + WRAPPER
========================= */

#section-5.whyus-cover{
  position: relative;
  padding: 90px 0 170px; /* was 70px — now leaves arrow runway */
  overflow: visible;
}

/* Beige overlay tint */
#section-5.whyus-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(238, 233, 229, 0.86);
  z-index: 0;
  pointer-events: none;
}

/* Content above overlay */
#section-5.whyus-cover .wp-block-cover__inner-container{
  position: relative;
  z-index: 1;
}

/* Inner wrapper */
#section-5 .whyus-section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f2a37;
}

/* =========================
   HEADINGS
========================= */

#section-5 .whyus-kicker{
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111827;
  margin: 0 0 10px 0;
}

#section-5 .whyus-title{
  color: #D22F2B !important;
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 34px 0; /* tighter gap before the columns */
  display: inline-block;
}

#section-5 .whyus-title::after{
  content: "";
  width: 12px;
  height: 12px;
  background: #D22F2B;
  display: inline-block;
  margin-left: 12px;
  transform: translateY(-2px);
}

/* =========================
   GRID
========================= */

#section-5 .whyus-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
  align-items: start;
  padding-bottom: 60px;
}

/* Each column (card) */
#section-5 .whyus-item{
  /* This becomes BOTH paragraph width AND divider width */
  --text-col: 420px;

  display: flex;
  flex-direction: column;
  align-items: center;   /* keeps icon/title/line/text centered */
  text-align: center;
  width: 100%;
}

/* Optional nudge (ONLY if you still need it) */
#section-5 .whyus-grid > .wp-block-group:nth-child(1){
  margin-top: 0px;
}

/* =========================
   ICONS (CSS drawn)
   Add class "whyus-icon" to EACH Image block.
========================= */

#section-5 .whyus-icon,
#section-5 figure.wp-block-image.whyus-icon{
  width: 96px;
  height: 96px;
  margin: 0 auto 26px !important;
  position: relative;
  display: block;
  overflow: hidden;

  --icon: #D22F2B;
  --t: 6px;
}

/* Hide uploaded icon images */
#section-5 .whyus-icon img{
  display: none !important;
}

#section-5 .whyus-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Icon 1: two horizontal bars */
#section-5 .whyus-grid > .wp-block-group:nth-child(1) .whyus-icon::before{
  background:
    linear-gradient(var(--icon) 0 0) left 8px top 26px / 84px var(--t) no-repeat,
    linear-gradient(var(--icon) 0 0) left 8px top 52px / 54px var(--t) no-repeat;
}

/* Icon 2: two vertical bars */
#section-5 .whyus-grid > .wp-block-group:nth-child(2) .whyus-icon::before{
  background:
    linear-gradient(var(--icon) 0 0) left 44px top 8px / var(--t) 84px no-repeat,
    linear-gradient(var(--icon) 0 0) left 66px top 8px / var(--t) 32px no-repeat;
}

/* Icon 3: 3-corner frame */
#section-5 .whyus-grid > .wp-block-group:nth-child(3) .whyus-icon::before{
  background:
    /* top */
    linear-gradient(var(--icon) 0 0)
      left top / 100% var(--t) no-repeat,

    /* left */
    linear-gradient(var(--icon) 0 0)
      left top / var(--t) 100% no-repeat,

    /* bottom — SHORTER (bigger corner gap) */
    linear-gradient(var(--icon) 0 0)
      left bottom / 48% var(--t) no-repeat,

    /* right */
    linear-gradient(var(--icon) 0 0)
      right top / var(--t) 48% no-repeat;
}

/* =========================
   TITLES + DIVIDER (line from title)
   Divider width matches paragraph width
========================= */

#section-5 .whyus-item-title{
  font-size: 30px;
  line-height: 1.12;
  font-weight: 600;
  color: #1f2a37;

  width: min(var(--text-col), 100%);
  margin: 0 auto;

  height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;

  position: relative;
  padding-bottom: 16px;
}

#section-5 .whyus-item-title::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: min(var(--text-col), 100%);
  height: 2px;
  background: #D22F2B;
}

/* Hide any old divider blocks */
#section-5 .whyus-divider,
#section-5 .whyus-divider img,
#section-5 .wp-block-separator{
  display: none !important;
}

/* =========================
   BODY TEXT
========================= */

#section-5 .whyus-item-text{
  margin: 28px 0 0 0 !important;
  font-size: 18px;
  line-height: 1.8;
  color: #374151;

  width: min(var(--text-col), 100%);
  max-width: var(--text-col);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}


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

@media (max-width: 900px){
  #section-5 .whyus-title{
    font-size: 38px;
    margin-bottom: 36px;
  }

  #section-5 .whyus-grid{
    grid-template-columns: 1fr;
    gap: 42px;
    padding-bottom: 90px;
  }

  #section-5 .whyus-grid > .wp-block-group:nth-child(1){
    margin-top: 0;
  }

  #section-5 .whyus-item{
    --text-col: 520px;
  }

  #section-5 .whyus-item-title{
    height: auto;
    padding-bottom: 16px;
  }

  #section-5 .whyus-item-title::after{
    position: static;
    transform: none;
    display: block;
    margin: 16px auto 0;
    width: min(var(--text-col), 100%);
  }
}

/* =========================================================
   SECTION 5 — ARROW ANCHOR FIX
   If the arrow block sits inside a column/group, it will
   anchor to that column. This forces it to anchor to the cover.
========================================================= */

/* Make the cover the positioning context */
#section-5.whyus-cover{
  position: relative !important;
}

/* Neutralise common WP wrappers that may be "position: relative" */
#section-5.whyus-cover .wp-block-columns,
#section-5.whyus-cover .wp-block-column,
#section-5.whyus-cover .wp-block-group,
#section-5.whyus-cover .whyus-grid,
#section-5.whyus-cover .whyus-item,
#section-5.whyus-cover .whyus-section,
#section-5.whyus-cover .wp-block-cover__inner-container{
  position: static !important;
}

/* Now the arrows will anchor to #section-5.whyus-cover */
#section-5.whyus-cover .rw-nav{
  position: absolute !important;
  right: var(--rw-arrow-x) !important;
  bottom: var(--rw-arrow-y) !important;
  left: auto !important;
  top: auto !important;
  z-index: 90 !important;
}



/* =========================================================
   SECTION 6 — CONTACT (Cover + logo + CTA box)
========================================================= */

#section-6.contact-cover{
  position: relative;
  padding: 120px 0 220px; /* keeps breathing room below CTA */
  overflow: visible;
}

/* Beige overlay tint */
#section-6.contact-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(238, 233, 229, 0.86);
  z-index:0;
  pointer-events:none;
}

/* Content above overlay */
#section-6.contact-cover .wp-block-cover__inner-container{
  position: relative;
  z-index: 1;
}

/* Wrapper */
#section-6 .contact-header{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* LOGO (class on Image: contact-logo) */
#section-6 figure.wp-block-image.contact-logo{
  width: 230px;
  margin: 0 auto 32px !important;
}

#section-6 figure.wp-block-image.contact-logo img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* CTA BOX (class on Group: contact-cta-box) */
#section-6 .contact-cta-box{
  width: min(560px, 92vw);
  margin: 0 auto;
  padding: 34px 36px;
  background: transparent;
  border: 2px solid #D22F2B;
  border-radius: 0;
  text-align: center;
}

/* Title inside the box */
#section-6 .contact-cta-title{
  margin: 0 0 18px 0;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #D22F2B !important;
}

/* Details */
#section-6 .contact-detail{
  margin: 0;
  font-size: 18px;
  line-height: 1.9;
  color: #374151;
  text-align: center;
}

#section-6 .contact-detail + .contact-detail{
  margin-top: 12px;
}

/* TEL / EMAIL labels */
#section-6 .contact-detail.contact-tel::before,
#section-6 .contact-detail.contact-email::before{
  font-weight: 800;
  color: #cd9932; /* gold label */
  margin-right: 6px;
}

#section-6 .contact-detail.contact-tel::before{ content:"tel:"; }
#section-6 .contact-detail.contact-email::before{ content:"email:"; }

/* GAP BETWEEN SECTION 5 and SECTION 6 (optional cleaner targeting) */
#section-5 + #section-6{
  margin-top: 90px;
}

/* Responsive */
@media (max-width: 900px){
  #section-6.contact-cover{
    padding: 90px 0 200px;
  }

  #section-6 figure.wp-block-image.contact-logo{
    width: 210px;
    margin-bottom: 24px !important;
  }

  #section-6 .contact-cta-title{
    font-size: 32px;
  }

  #section-6 .contact-detail{
    font-size: 16px;
  }

  #section-6 .contact-cta-box{
    padding: 26px 22px;
  }
}



/* ===============================
   SECTION 6 — prevent double runway
   (global arrows already adds padding-bottom, but contact-cover also does)
================================ */
#section-6{
  padding-bottom: 0 !important; /* cancels the global runway for section 6 only */
}


/* ===============================
   SECTION 6 — arrow position (lower)
================================ */
#section-6.contact-cover{
  position: relative !important; /* ensure anchor */
}

#section-6.contact-cover .rw-nav{
  position: absolute !important;
  right: 40px !important;
  bottom: 12px !important; /* LOWER: was 28px */
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 80 !important;
}

/* Mobile */
@media (max-width: 900px){
  #section-6.contact-cover .rw-nav{
    right: 24px !important;
    bottom: 12px !important;
  }
}

/* Ensure arrows are always clickable above cover overlays */
.rw-nav,
.rw-nav *{
  pointer-events: auto !important;
}