/* =========================================================
   GLOBAL
========================================================= */
html { scroll-behavior: smooth; }

/* 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;
}

/* =========================================================
   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;
}

/* =========================
   SHARED SECTION ARROWS (RW)
========================= */

html { scroll-behavior: smooth; }

/* The parent section (Cover) should be the positioning context */
.hero-cover,
.team-cover,
.about-nav-anchor,
.wp-block-cover {
  position: relative;
}

/* Arrow container */
.rw-nav{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:50;
  display:flex;
  flex-direction:column;   /* default: stacked */
  gap:10px;
}

/* Side-by-side version (Section 2/3) */
.rw-nav--row{
  flex-direction:row;
  gap:12px;
}

/* Each button */
.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;
}

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

.rw-nav a svg path{
  stroke:#D22F2B; /* RW red */
}

/* Hover effect (match your best arrow) */
.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);
}

/* Lower arrows for Section 3 so they don't overlap cards */
.section-team .rw-nav {
  bottom: -14px; 
}

/* =========================================================
   SECTION 2 — ABOUT
========================================================= */

.about-section{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f2a37;
}

/* Make BOTH columns equal height */
.about-columns.wp-block-columns{
  align-items: stretch !important;
}

/* Each column becomes a flex column */
.about-columns.wp-block-columns > .wp-block-column{
  display: flex !important;
  flex-direction: column;
}

/* LEFT image column */
.about-image-col{
  position: relative; /* REQUIRED for overlay */
  justify-content: center;
}

/* IMPORTANT:
   Put class "about-image" on the Image block itself (figure.wp-block-image)
   Your screenshot shows: about-image image-fill ✅ */
.wp-block-image.about-image{
  position: relative;
  display: block;
}

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

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

/* ABOUT OVERLAY */
.about-overlay{
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding-left: 32px;
  white-space: nowrap;
}

.about-overlay h2{
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 62px;
  line-height: 1;
  color: #E6E6E6 !important;
}

/* Two vertical lines */
.about-overlay::before,
.about-overlay::after{
  content:"";
  position:absolute;
  top: 10px;
  width: 7px;
  background:#E6E6E6;
}

.about-overlay::before{
  left: 0;
  height: 74px;
}

.about-overlay::after{
  left: 15px;
  top: 24px;
  height: 50px;
}

/* RIGHT text column */
.about-text-col{
  display: flex !important;
  flex-direction: column;
  justify-content: center !important; /* ✅ centers text vs image */
  height: 100%;
}

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

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

.about-section .about-name{
  font-size: 15px;
  font-weight: 600;
  margin: 14px 0 2px 0;
}

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

/* Mobile */
@media (max-width: 900px){
  .about-overlay{ top: 22%; padding-left: 26px; }
  .about-overlay h2{ font-size: 44px; }
  .about-overlay::before{ height: 56px; }
  .about-overlay::after{ top: 20px; height: 38px; }
}


/* =========================================================
   SECTION 3 — YOUR TEAM (CLEANED)
========================================================= */

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

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

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

/* Main container */
.team-section{
  max-width: 1320px;                /* widened from 1200 */
  margin: 0 auto;
  padding: 0 32px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1f2a37;
}

/* Columns wrapper (helps Gutenberg spacing) */
.team-section .wp-block-columns{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* "Your Team" kicker */
.team-section .team-kicker,
.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 — red + square */
.team-section .team-title,
.team-section h2.team-title,
.team-section .wp-block-heading.team-title{
  color: #D22F2B !important;
  font-size: 56px;
  font-weight: 600;
  margin: 0 0 34px 0;
  display: inline-block;
}

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

/* =========================
   TEAM CARD BASE
========================= */

.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;                 /* widen cards */
}

/* Default text */
.team-card p,
.team-card li{
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  color: #374151;
}

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

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

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

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

/* Quals + role */
.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;
}

.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;
}

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

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

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

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

/* =========================
   BEN CLOVER — INLINE NAME + QUALS (SAFE)
   (keeps 1 line where possible, trims if needed)
========================= */

.team-card--ben{ overflow: hidden; }

/* the wrapper group you created: .team-topline */
.team-card--ben .team-topline{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: 100%;
  margin-bottom: 6px;
}

/* keep name as-is but prevent flex overflow */
.team-card--ben .team-name{
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* quals inline + no indent */
.team-card--ben .team-quals{
  padding-left: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;

  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #6b7280;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* prevents spilling into next card */
}

/* =========================================================
   TEAM EMAIL BUTTONS (below cards)
========================================================= */

/* the Buttons block wrapper */
.team-email-btn{
  margin-top: 18px;
  display: flex;
  justify-content: center; /* center under each card */
}

/* target the actual  inside the Button block */
.team-email-btn .wp-block-button__link{
  position: relative;
  width: 100%;
  max-width: 360px;                 /* match your card width */
  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 18px 14px 92px;     /* space for the 2 lines */
  min-height: 56px;

  display: flex;
  align-items: center;              /* centers email between long/short line */
  justify-content: flex-start;

  border-radius: 0 !important;
  border-top-right-radius: 56px !important;  /* mimic the card shape */

  transition: none !important;      /* stops theme “blue hover” animations */
}

/* hard-stop any theme blue hover/focus fill */
.team-email-btn .wp-block-button__link:hover,
.team-email-btn .wp-block-button__link:focus,
.team-email-btn .wp-block-button__link:active{
  background: rgba(255,255,255,0.78) !important;
  color: #111827 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* two lines inside the button */
.team-email-btn .wp-block-button__link::before,
.team-email-btn .wp-block-button__link::after{
  content: "";
  position: absolute;
  left: 26px;

  height: 4px;
  background: #1f2a37;

  border-radius: 2px;
  transform-origin: left center;
  transition: transform 220ms ease, background-color 220ms ease;
}

/* place them around the vertical center */
.team-email-btn .wp-block-button__link::before{
  width: 56px;
  top: 50%;
  transform: translateY(-9px) scaleX(1);
}

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

/* hover: ONLY the lines go red + stretch */
.team-email-btn .wp-block-button__link:hover::before,
.team-email-btn .wp-block-button__link:focus::before,
.team-email-btn .wp-block-button__link:hover::after,
.team-email-btn .wp-block-button__link:focus::after{
  background: #D22F2B;
  transform: translateY(-9px) scaleX(1.18);
}

.team-email-btn .wp-block-button__link:hover::after,
.team-email-btn .wp-block-button__link:focus::after{
  transform: translateY(7px) scaleX(1.18);
}

/* keep long emails on one line where possible */
.team-email-btn .wp-block-button__link{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




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

  /* allow wrap on small screens */
  .team-card--ben .team-topline{ flex-wrap: wrap; }
  .team-card--ben .team-quals{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}



/* =========================================================
   SECTION 4 — PROCESS (Cover image + overlay)
   Clean + no conflicts + aligned icons + safe arrows
========================================================= */

.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;
}

/* Content wrapper */
.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: 56px;
  font-weight: 600;
  margin: 0 0 34px 0;
  display: inline-block;
  line-height: 1.05;
}

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

/* =========================
   5 STEPS GRID
========================= */

.process-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px;
  align-items: start;

  /* space for arrows so they never touch text */
  padding-bottom: 110px;
}

/* 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;
}

/* ICON SLOT (WP-proof) */
.process-step .process-step-icon,
.process-step figure.wp-block-image.process-step-icon,
.process-step .wp-block-image.process-step-icon{
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* IMPORTANT: no margins (margins cause overlap in grid rows) */
  margin: 0 !important;
}

/* Fit the image into the slot */
.process-step .process-step-icon img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* 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; /* controlled spacing from title */
  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;
}

/* =========================================
   SECTION 4 — First step alignment 
   (move the whole step down) 
========================================= */

.process-grid > .process-step:first-child{
  padding-top: 20px; /* try 8–16px */
}


/* =========================================
   SECTION 4 — Numbers inside icons
========================================= */

/* Make icon wrapper a positioning context for the number */
.process-step-icon{
  position: relative;
  display: block;
}

/* The number overlay (base style) */
.process-step-icon::after{
  position: absolute;
  inset: 0;                 /* fill the icon box */
  display: grid;
  place-items: center;      /* perfect centering */
  content: "";              /* we’ll set 1–5 below */

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 44px;          /* tweak */
  line-height: 1;
  color: #fcad03;           /* dark text like brochure */
  z-index: 2;
  pointer-events: none;
}

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


/* =========================
   Section 4 arrows placement
========================= */

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

/* =========================
   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 (Cover + grid)
   Matches Section 4 background treatment
   + spacing polish + arrow placement
========================================================= */

.whyus-cover{
  position: relative;
  padding: 90px 0 190px; /* extra bottom space so arrows never overlap */
}

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

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

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

/* =========================
   TITLE
========================= */

.whyus-title{
  color: #D22F2B !important;
  font-size: 52px;
  font-weight: 600;
  margin: 0 0 56px 0;
  display: inline-block;
}

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

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

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

/* WP-safe: first item/group inside the WHY US grid */
.whyus-grid > .wp-block-group:first-child{
  padding-top: 18px;  /* tweak 12–24px until perfect */
}

/* Each item = clean vertical stack */
.whyus-item{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers icon, heading, divider */
  text-align: center;
}

/* =========================
   ICON (normalized slot)
   (prevents the “big middle icon” issue)
========================= */

.whyus-item .whyus-icon,
.whyus-item figure.wp-block-image.whyus-icon{
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 18px !important;  /* spacing under icon */
}

.whyus-item .whyus-icon img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* =========================
   ITEM TITLE (2-line friendly)
========================= */

.whyus-item-title{
  font-size: 30px;
  line-height: 1.12;
  font-weight: 600;
  color: #1f2a37;
  margin: 0
  padding-bottom: 0; /* remove the small built-in gap */
  max-width: 340px;

  padding-bottom: 10px; /* creates space before divider */
}

/* =========================
   DIVIDER (long + centered)
   Add this class to your divider block (Separator or Group)
========================= */

.whyus-divider{
  width: 100%;
  max-width: 420px;     /* controls “long” look */
  height: 6px;
  background: #D22F2B;
  display: block;

  margin-top: 30px;  /* was ~6px — now ~3–5× bigger */
  margin-bottom: 0;  /* keep tidy; paragraph controls the next gap */
}

/* =========================
   TEXT
   Add this class to your paragraph
========================= */

.whyus-item-text{
  margin: 26px 0 0 0 !important; /* space after divider */
  font-size: 18px;
  line-height: 1.8;
  color: #374151;
  max-width: 420px;

  text-align: left;  /* matches brochure reading feel */
}

/* =========================
   SECTION 5 ARROWS
========================= */

/* give the section more space at the bottom for the arrows */
.whyus-cover{
  padding: 90px 0 240px; /* was 190px — more breathing room */
}

/* arrows inside section, lower, not covering text */
.whyus-cover .rw-nav.rw-nav--row{
  position: absolute;
  right: 40px;
  bottom: 24px;  /* sits lower but still INSIDE the cover */
  z-index: 10;
  margin: 0 !important;
}

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

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

  .whyus-grid{
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .whyus-item-text{
    text-align: left;
    max-width: 520px;
  }

  .whyus-divider{
    max-width: 520px;
  }
}