/* ============================================================
   Step4 — shared page styles (WPBakery)            v1.5
   ------------------------------------------------------------
   One stylesheet for every custom page. Everything is scoped
   under .s4-page so it cannot leak into other templates.

   Pages in use:  .s4-about  .s4-contact  .s4-terms
   A new page needs a shape block in PAGE HOOKS, nothing more.

   Outer row must be:  Extra class = "s4-page s4-<page>"
                       Row stretch = "Stretch row"

   Save as:  /wp-content/themes/rcs_theme_ste-child/s4-pages.css

   v1.2 — column widths use flex-basis + max-width, not width
          (see 4a); every width here now agrees with the column
          width set in the shortcode, so neither can lose.
          CTA band centring rebuilt (section 10).
   v1.3 — container narrowed to the approved 1230px and cream
          corrected to #FBF8F2, both sampled from the signed-off
          design. Contents links go pine. Six shape slots instead
          of four, so the terms page carries its full set.
   v1.4 — About keeps the wider 1400px container it was built at;
          the 1230 default applies to the other pages.
   v1.5 — Consolidated. One media query per breakpoint, all in
          RESPONSIVE at the end of the file, largest first.
          End-of-file patches folded into their sections.
          No visual change, except the tablet story-card padding,
          which was being overridden before and now applies.
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
.s4-page{
  --s4-paper:#F6F0E6;
  --s4-paper-2:#EFE7D8;
  --s4-cream:#FBF8F2;          /* sampled from the approved design */
  --s4-ink:#444444;
  --s4-ink-soft:#6B6B6B;
  --s4-line:rgba(60,57,48,.14);
  --s4-pine:#6D8A74;
  --s4-sage:#BCD2B4;
  --s4-sage-2:#DBE7DA;
  --s4-sky:#CFE1EA;
  --s4-clay:#EFDACE;
  --s4-sand:#BE6E3C;
  --s4-sand-dark:#A85E31;

  --s4-font:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --s4-r-md:22px;
  --s4-shadow-sm:0 2px 10px rgba(60,57,48,.06);
  --s4-ease:cubic-bezier(.22,.61,.36,1);
  --s4-sticky-top:110px;            /* clear of the sticky header */

  /* layout */
  --s4-container:1230px;            /* .wrap max-width in the approved design */
  --s4-gutter:clamp(16px,3vw,24px); /* .wrap side padding, same source */

  /* vertical rhythm — one scale, used everywhere */
  --s4-gap-sm:clamp(18px,2vw,26px);
  --s4-gap-md:clamp(32px,4vw,52px);
  --s4-gap-lg:clamp(52px,6vw,84px);

  /* imagery */
  --s4-media-w:88%;                 /* image width inside its column */
  --s4-ratio:4/3;

  /* organic shape recipes */
  --s4-blob:58% 42% 55% 45% / 52% 48% 55% 45%;
  --s4-blob-b:62% 38% 55% 45% / 55% 45% 60% 40%;
  --s4-quarter:100% 0 0 0;
}


/* ============================================================
   2. PAGE SHELL + BACKGROUND SHAPES
   ============================================================ */
.s4-page{
  position:relative;
  display:flow-root;                /* contains floated columns */
  overflow:hidden;                  /* fallback for older browsers */
  overflow:clip;                    /* clips shapes without breaking position:sticky */
  height:auto;
  min-height:0;
  background:var(--s4-cream);
  padding:var(--s4-gap-md) 0 var(--s4-gap-lg);
  font-family:var(--s4-font);
  color:var(--s4-ink);
}

/* container — keeps content aligned with the theme header on a stretched row */
.s4-page > .wpb_column{position:relative; z-index:2; display:flow-root; height:auto; min-height:0;}
.s4-page > .wpb_column > .vc_column-inner{
  position:relative;
  z-index:2;
  display:flow-root;
  height:auto;
  min-height:0;
  max-width:var(--s4-container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--s4-gutter);
  padding-right:var(--s4-gutter);
}
.s4-page .vc_row_inner{position:relative; z-index:1; overflow:visible;}
.s4-page .wpb_text_column,
.s4-page .wpb_text_column .wpb_wrapper{overflow:visible; height:auto;}

/* six shape slots — a page switches one on by giving it a width */
.s4-page::before,
.s4-page::after,
.s4-page > .wpb_column::before,
.s4-page > .wpb_column::after,
.s4-page > .wpb_column > .vc_column-inner::before,
.s4-page > .wpb_column > .vc_column-inner::after{
  content:""; display:block; position:absolute; z-index:0;
  width:0; aspect-ratio:1/1.06; pointer-events:none; clear:none;
  border-radius:var(--s4-blob);
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
.s4-page h1,.s4-page h2,.s4-page h3{
  font-family:var(--s4-font); font-weight:800; letter-spacing:-.02em;
  color:var(--s4-ink); line-height:1.08; margin:0;
}
.s4-page h1{font-size:clamp(34px,4.4vw,58px); line-height:1.05; text-wrap:balance;}
.s4-page h2{font-size:clamp(24px,2.4vw,32px);}
.s4-page h3{font-size:clamp(22px,2.2vw,30px);}
.s4-page em{font-style:normal; color:var(--s4-pine);}
.s4-page p{margin:0 0 12px; color:var(--s4-ink-soft); line-height:1.65; font-weight:500;}
.s4-page .wpb_text_column p:last-child{margin-bottom:0;}

.s4-lead{font-weight:700; color:var(--s4-ink) !important; font-size:17px;}
.s4-hero-lede{font-size:clamp(17px,1.4vw,20px); font-weight:600; margin:var(--s4-gap-sm) 0 0 !important;}

/* section / page heading block */
.s4-head{margin:0 0 var(--s4-gap-sm); max-width:64ch;}
.s4-head h1{font-size:clamp(30px,3.4vw,42px); margin:0 0 10px;}
.s4-head p{font-size:16.5px; margin:0;}


/* ============================================================
   4. WPBAKERY LAYOUT HELPERS
   ============================================================ */
.s4-flush{margin-left:0 !important; margin-right:0 !important;}   /* kill row gutters */
.s4-page .s4-rev{flex-direction:row-reverse !important;}          /* needs Equal height on */
.s4-tight > .vc_column_inner > .vc_column-inner{padding-left:7px; padding-right:7px;}
.s4-wide  > .vc_column_inner > .vc_column-inner{
  padding-left:clamp(16px,2vw,28px); padding-right:clamp(16px,2vw,28px);
}
.s4-mt{margin-top:var(--s4-gap-sm);}
.s4-mt-lg{margin-top:var(--s4-gap-lg);}


/* ------------------------------------------------------------
   4a. COLUMN WIDTHS  — read this before changing any width
   ------------------------------------------------------------
   Set the width in the shortcode first. The column width picker
   is the source of truth: 5/12 = 41.67%, 7/12 = 58.33%, which
   is the 42/58 split this design uses.

   Only override it here when the same class has to be two
   different widths (the alternating value rows). In that case
   `width` alone is not enough — once a row is flex (Equal
   height, or .s4-rev) the vc_col-sm-* class resolves to

       flex:0 0 41.666667%;  max-width:41.666667%;

   and flex-basis beats width, while max-width caps it back to
   the grid figure anyway. Basis, max-width and width all have
   to be set together, which is what the .s4-w-* utilities and
   the page hooks below do.
   ------------------------------------------------------------ */
.s4-page .vc_column_inner[class*="s4-w-"]{flex-grow:0 !important; flex-shrink:0 !important;}
.s4-page .vc_column_inner.s4-w-25 {flex-basis:25%     !important; max-width:25%     !important; width:25%     !important;}
.s4-page .vc_column_inner.s4-w-33 {flex-basis:33.333% !important; max-width:33.333% !important; width:33.333% !important;}
.s4-page .vc_column_inner.s4-w-38 {flex-basis:38%     !important; max-width:38%     !important; width:38%     !important;}
.s4-page .vc_column_inner.s4-w-42 {flex-basis:41.667% !important; max-width:41.667% !important; width:41.667% !important;}
.s4-page .vc_column_inner.s4-w-50 {flex-basis:50%     !important; max-width:50%     !important; width:50%     !important;}
.s4-page .vc_column_inner.s4-w-58 {flex-basis:58.333% !important; max-width:58.333% !important; width:58.333% !important;}
.s4-page .vc_column_inner.s4-w-62 {flex-basis:62%     !important; max-width:62%     !important; width:62%     !important;}
.s4-page .vc_column_inner.s4-w-67 {flex-basis:66.667% !important; max-width:66.667% !important; width:66.667% !important;}
.s4-page .vc_column_inner.s4-w-75 {flex-basis:75%     !important; max-width:75%     !important; width:75%     !important;}
.s4-page .vc_column_inner.s4-w-100{flex-basis:100%    !important; max-width:100%    !important; width:100%    !important;}


/* ============================================================
   5. CARDS
   ============================================================ */
.s4-card,
.s4-page .s4-cardcol > .vc_column-inner{
  background:#fff;
  border:1px solid var(--s4-line);
  border-radius:var(--s4-r-md);
  box-shadow:var(--s4-shadow-sm);
  padding:clamp(20px,2.4vw,28px);
}
.s4-card--lg,
.s4-page .s4-cardcol > .vc_column-inner{padding:clamp(22px,3vw,36px);}
.s4-card.wpb_text_column > .wpb_wrapper{display:grid; gap:18px;}

.s4-card--pine{background:var(--s4-pine); border-color:var(--s4-pine); color:#fff;}
.s4-card--pine.wpb_text_column > .wpb_wrapper{gap:10px;}
.s4-card--pine b,.s4-card--pine h3{color:#fff; font-size:19px;}
.s4-card--pine p{color:rgba(255,255,255,.88); margin:0 0 6px;}


/* ============================================================
   6. BUTTONS
   ============================================================ */
.s4-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-sizing:border-box;            /* padding sits inside the width — full-width buttons never overflow */
  max-width:100%;
  font-family:var(--s4-font); font-weight:700; font-size:15.5px;
  text-decoration:none; padding:15px 28px; border-radius:999px;
  border:1.6px solid transparent; background:#fff; color:var(--s4-pine);
  white-space:nowrap; text-align:center;
  transition:transform .25s var(--s4-ease), background .25s, color .25s;
}
.s4-btn:hover{transform:translateY(-2px); background:var(--s4-paper-2); color:var(--s4-pine);}
.s4-btn--pine{background:var(--s4-pine); color:#fff;}
.s4-btn--pine:hover{background:#5E7A66; color:#fff;}
.s4-btn--sand{background:var(--s4-sand); color:#fff;}
.s4-btn--sand:hover{background:var(--s4-sand-dark); color:#fff;}
.s4-page .s4-btn--block{
   display:flex; width:100%; max-width:100%; min-height:52px; margin:0 auto;
  white-space:normal; line-height:1.3;
}
.s4-page .s4-btn,
.s4-page .s4-btn:hover,
.s4-page .s4-btn:focus{text-decoration:none !important;}

/* ============================================================
   7. IMAGERY
   ------------------------------------------------------------
   Width comes from --s4-media-w, ratio from --s4-ratio.
   Override either per section rather than adding new rules.
   ============================================================ */
.s4-page .s4-media .wpb_single_image,
.s4-page .s4-media .vc_single_image-wrapper{
  display:block !important;
  width:var(--s4-media-w) !important;
  margin:0 auto !important;
}
.s4-page .s4-media .wpb_single_image{margin-bottom:0 !important;}
.s4-page .s4-media img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  aspect-ratio:var(--s4-ratio) !important;
  object-fit:cover !important;
  border-radius:18px !important;
}

/* pebble-masked portrait (contact hero) */
.s4-media--blob{--s4-media-w:clamp(260px,90%,440px); --s4-ratio:1/1.06;}
.s4-page .s4-media--blob img{border-radius:var(--s4-blob) !important; object-position:50% 40%;}


/* ============================================================
   8. STAT TILES
   ============================================================ */
.s4-stat{
  /*background:var(--s4-paper); border-radius:16px; padding:18px 20px;*/
  text-align:center; margin:0; height:100%;
}
.s4-stat b{
  display:block; font-weight:800; font-size:clamp(26px,2.6vw,36px);
  color:var(--s4-pine); letter-spacing:-.02em; line-height:1.15;
}
.s4-stat span{display:block; font-size:13.5px; font-weight:700; color:var(--s4-ink-soft); margin-top:2px;}

/* the stat tile is the only thing in its column — let it fill the height */
.s4-page .s4-ab-stats .wpb_text_column,
.s4-page .s4-ab-stats .wpb_text_column > .wpb_wrapper,
.s4-page .s4-ab-stats > .vc_column_inner > .vc_column-inner,
.s4-page .s4-ab-stats > .vc_column_inner > .vc_column-inner > .wpb_wrapper{
  height:100%; margin-bottom:0 !important;
}


/* ============================================================
   9. CONTACT INFO ROWS  (icons are CSS — nothing for the editor to strip)
   ============================================================ */
.s4-info-row{
  display:grid; grid-template-columns:22px minmax(0,1fr);
  column-gap:14px; row-gap:2px; align-items:start;
}
.s4-info-row::before{
  content:""; grid-row:1 / span 2; width:22px; height:22px; margin-top:2px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.s4-info-row b{grid-column:2; font-size:15px; font-weight:800; color:var(--s4-ink);}
.s4-info-row a{grid-column:2; color:var(--s4-pine); font-weight:700; font-size:17px; text-decoration:none;}
.s4-info-row a:hover{text-decoration:underline;}
.s4-info-row span{grid-column:2; color:var(--s4-ink-soft); font-size:15px; line-height:1.5;}

.s4-info-row.is-phone::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D8A74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");}
.s4-info-row.is-mail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D8A74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");}
.s4-info-row.is-clock::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D8A74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
.s4-info-row.is-pin::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D8A74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.5-7-10a7 7 0 0 1 14 0c0 5.5-7 10-7 10Z'/%3E%3Ccircle cx='12' cy='11' r='2.4'/%3E%3C/svg%3E");}


/* ============================================================
   10. CLOSING CTA BAND
   ------------------------------------------------------------
   With Equal height + Content position: Middle, WPBakery is
   already centring the columns. What made the band look
   top-heavy is inside the column: .wpb_content_element ships a
   35px bottom margin, which sits within the centred box and
   lifts the text off centre. The editor's top/bottom column
   padding does the same.

   Both are zeroed here, and align-self:center is added so the
   band still centres if Equal height gets switched off in the
   editor.

   Column widths come from the shortcode (2/3 + 1/3). Nothing
   here fights them.
   ============================================================ */
.s4-page .s4-cta{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  margin:var(--s4-gap-lg) 0 0 !important;
  background:var(--s4-pine);
  border-radius:var(--s4-r-md);
  padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,36px);
  color:#fff;
}
.s4-page .s4-cta > .vc_column_inner{
  display:flex !important;
  align-items:center !important;
  align-self:center !important;
  height:auto !important;
  min-height:0 !important;
}
.s4-page .s4-cta > .vc_column_inner > .vc_column-inner{
  width:100%;
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.s4-page .s4-cta > .vc_column_inner > .vc_column-inner > .wpb_wrapper{
  width:100%; display:flex; flex-direction:column; justify-content:center;
}

/* the editor's stock 35px bottom margin is what throws the centre */
.s4-page .s4-cta .wpb_content_element,
.s4-page .s4-cta .wpb_text_column,
.s4-page .s4-cta .vc_wp_text,
.s4-page .s4-cta .wpb_wrapper > *:last-child{margin-bottom:0 !important;}

.s4-page .s4-cta h3{color:#fff; font-size:20px; margin:0 0 4px;}
.s4-page .s4-cta p{color:rgba(255,255,255,.85); font-size:14.5px; margin:0;}
.s4-page .s4-cta .s4-btn-col > .vc_column-inner{align-items:flex-end !important;}
.s4-page .s4-cta .s4-btn-col .wpb_wrapper{text-align:right; align-items:flex-end;}


/* ============================================================
   11. LONG-FORM DOCUMENTS  (terms, privacy, policies)
   ============================================================ */

/* contents panel */
.s4-doc-toc{
  position:sticky; top:var(--s4-sticky-top);
  background:#fff; border:1px solid var(--s4-line);
  border-radius:var(--s4-r-md); box-shadow:var(--s4-shadow-sm); padding:20px;
}
.s4-doc-toc h2{
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--s4-ink-soft); margin:0 0 12px;
}
.s4-doc-toc ol{list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:toc;}
.s4-doc-toc li{counter-increment:toc;}
.s4-doc-toc a{
  display:flex; gap:9px; font-size:13.5px; font-weight:700; color:var(--s4-pine);
  text-decoration:none; padding:5px 8px; border-radius:8px; line-height:1.35;
}
.s4-doc-toc a::before{content:counter(toc) "."; color:var(--s4-pine); font-weight:800; flex:none; min-width:17px;}
.s4-doc-toc a:hover{background:var(--s4-paper); color:var(--s4-pine);}

/* document body */
.s4-doc{
  background:#fff; border:1px solid var(--s4-line); border-radius:var(--s4-r-md);
  box-shadow:var(--s4-shadow-sm); padding:clamp(24px,3vw,40px); counter-reset:clause;
}
.s4-doc p,.s4-doc li{font-size:15px; font-weight:500; color:var(--s4-ink-soft); line-height:1.65;}
.s4-doc p{margin:0 0 12px;}
.s4-doc p:last-child{margin-bottom:0;}
.s4-doc strong{color:var(--s4-ink); font-weight:700;}
.s4-doc em{font-style:italic; color:inherit;}          /* Act names stay italic, not pine */
.s4-doc a{color:var(--s4-pine); font-weight:700;}
.s4-doc .s4-lead{font-size:16px !important; color:var(--s4-ink) !important; font-weight:700;}

/* auto-numbered clauses — renumber themselves if reordered */
.s4-clause{counter-increment:clause; counter-reset:sub; scroll-margin-top:120px; margin:0 0 30px;}
.s4-clause:last-child{margin-bottom:0;}
.s4-clause h2{font-size:19px; letter-spacing:-.01em; margin:0 0 12px; display:flex; gap:11px; align-items:baseline;}
.s4-clause h2::before{content:counter(clause) "."; color:var(--s4-pine); flex:none; min-width:30px;}

.s4-sub{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.s4-sub > li{counter-increment:sub; position:relative; padding-left:44px;}
.s4-sub > li::before{
  content:counter(clause) "." counter(sub); position:absolute; left:0; top:0;
  font-weight:800; font-size:13.5px; color:var(--s4-pine); min-width:36px;
}
.s4-sub ul{margin:8px 0 0; padding-left:20px; display:grid; gap:5px; list-style:lower-alpha;}
.s4-sub ul li::marker{color:var(--s4-pine); font-weight:700;}

/* definition list */
.s4-defs{margin:0; padding:0; display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr); gap:0 18px;}
.s4-defs dt{font-weight:800; font-size:14.5px; color:var(--s4-ink); margin:0; padding:10px 0; border-bottom:1px solid var(--s4-line);}
.s4-defs dd{margin:0; padding:10px 0; color:var(--s4-ink-soft); font-size:15px; line-height:1.65; border-bottom:1px solid var(--s4-line);}
.s4-defs dt:nth-last-of-type(1),
.s4-defs dd:nth-last-of-type(1){border-bottom:0;}

.s4-note{background:var(--s4-paper); border-radius:14px; padding:16px 18px; margin:0 0 12px;}
.s4-note p{margin:0;}

/* doc grid — the sticky column needs full height */
.s4-doc-grid > .vc_column_inner > .vc_column-inner,
.s4-doc-grid > .vc_column_inner > .vc_column-inner > .wpb_wrapper{height:100%;}


/* ============================================================
   PAGE HOOKS — shapes and the few widths that differ
   (desktop only; every breakpoint lives in RESPONSIVE below)
   ============================================================ */

/* ---------------- About ---------------- */

/* About was laid out against the theme header's 1400px container and signed
   off at that width, so it opts out of the 1230px default set in section 1.
   Remove these two lines if About is ever re-cut to the narrower grid. */
.s4-about{--s4-container:1400px; --s4-gutter:clamp(16px,3vw,32px);}

.s4-about::before{                       /* sage, top right */
  width:clamp(220px,26vw,380px); right:-8%; top:-30px;
  background:var(--s4-sage); opacity:.55;
}
.s4-about::after{                        /* blue, mid left */
  width:clamp(150px,17vw,250px); left:-7%; top:34%;
  background:var(--s4-sky); opacity:.40; border-radius:var(--s4-blob-b);
}

/* hero — widths come from the shortcode (7/12 text + 5/12 image) */
.s4-ab-hero{--s4-ratio:4/4.4; margin-bottom:var(--s4-gap-md);}
.s4-page .s4-ab-hero h1{margin-bottom:0;}

/* story + stats */
.s4-ab-story{padding:clamp(28px,3vw,44px) !important;}
.s4-ab-story h2{margin-bottom:14px;}
.s4-ab-stats{margin-top:var(--s4-gap-sm);}

/* values */
.s4-ab-values-head h2{font-size:clamp(30px,3.4vw,42px); margin-bottom:10px;}
.s4-ab-val{padding:var(--s4-gap-md) 0;}
.s4-ab-val + .s4-ab-val{border-top:1px solid var(--s4-line);}
.s4-ab-val h3{margin-bottom:10px;}
.s4-page .s4-ab-val .wpb_text_column{margin-bottom:0 !important;}

/* Alternating proportions — rows 1 & 3 small image, rows 2 & 4 (.s4-rev) large.
   These match the widths set in the shortcode, so the two agree and it
   doesn't matter which one wins. Sized by role class, not :first-child,
   so reversing never swaps the wrong column. */
.s4-page .s4-ab-val > .vc_column_inner.s4-media{
  flex:0 0 41.667% !important; max-width:41.667% !important; width:41.667% !important;
}
.s4-page .s4-ab-val > .vc_column_inner:not(.s4-media){
  flex:0 0 58.333% !important; max-width:58.333% !important; width:58.333% !important;
}
.s4-page .s4-ab-val.s4-rev > .vc_column_inner.s4-media{
  flex:0 0 58.333% !important; max-width:58.333% !important; width:58.333% !important;
}
.s4-page .s4-ab-val.s4-rev > .vc_column_inner:not(.s4-media){
  flex:0 0 41.667% !important; max-width:41.667% !important; width:41.667% !important;
}

/* ---------------- Contact ---------------- */
.s4-contact::before{                     /* blue, left */
  width:clamp(150px,17vw,250px); left:-95px; top:531px;
  background:var(--s4-sky); opacity:.40; border-radius:var(--s4-blob-b);
}
.s4-contact::after{                      /* clay quarter, bottom right */
  width:clamp(130px,15vw,220px); aspect-ratio:1; right:-3%; bottom:120px;
  background:var(--s4-clay); opacity:.50;
  border-radius:var(--s4-quarter); transform:rotate(180deg);
}
.s4-contact > .wpb_column::before{       /* big sage, centred behind the form */
  width:clamp(320px,38vw,520px); left:50%; top:42%;
  transform:translate(-50%,-50%);
  background:var(--s4-sage); opacity:.28;
}

/* hero — 58 text / 42 pebble image */
.s4-ct-head{margin-bottom:var(--s4-gap-md);}
.s4-page .s4-ct-head > .vc_column_inner.s4-media{flex:0 0 42% !important; max-width:42% !important; width:42% !important;}
.s4-page .s4-ct-head > .vc_column_inner:not(.s4-media){flex:0 0 58% !important; max-width:58% !important; width:58% !important;}

.s4-ct-info .wpb_text_column + .wpb_text_column{margin-top:12px;}
.s4-ct-form h2{margin-bottom:6px;}
.s4-ct-form .wpb_text_column{margin-bottom:18px;}
.s4-contact .hs-form-frame{min-height:420px;}

/* ---------------- Terms & conditions ---------------- */
.s4-terms::before{                       /* sage, top right */
  width:clamp(220px,26vw,380px); right:-7%; top:60px;
  background:var(--s4-sage-2); opacity:.60;
}
.s4-terms::after{                        /* blue, upper left */
  width:clamp(150px,17vw,250px); left:-6%; top:620px;
  background:var(--s4-sky); opacity:.45; border-radius:var(--s4-blob-b);
}
.s4-terms > .wpb_column::before{         /* clay quarter, right */
  width:clamp(130px,15vw,220px); aspect-ratio:1; right:-3%; top:1240px;
  background:var(--s4-clay); opacity:.50;
  border-radius:var(--s4-quarter); transform:rotate(180deg);
}
.s4-terms > .wpb_column::after{          /* sage, bottom right */
  width:clamp(180px,20vw,300px); right:-5%; bottom:80px;
  background:var(--s4-sage-2); opacity:.45;
}
/* The last two slots hang off the container, not the full-width row, so their
   offsets are written against the viewport edge — calc(50% - 50vw) is the left
   edge of the window whatever the container is doing. */
.s4-terms > .wpb_column > .vc_column-inner::before{   /* sage quarter, left edge */
  width:clamp(90px,10vw,150px); aspect-ratio:1;
  left:calc(50% - 50vw); top:980px;
  background:var(--s4-sage-2); opacity:.45;
  border-radius:0 100% 0 0;
}
.s4-terms > .wpb_column > .vc_column-inner::after{    /* clay pebble, lower left */
  width:clamp(120px,13vw,200px);
  left:calc(50% - 44vw); top:1420px;
  background:var(--s4-clay); opacity:.40;
}

/*body:has(.s4-page) #top-a-full,*/
/*body:has(.s4-page) #another-id,*/
/*body:has(.s4-page) .some-class{display:none !important;}*/
body:has(.s4-page) #top-a-full{display:none !important;}
body:has(.s4-page) #main-full{padding-top:0px !important; background:#FBF8F2 !important;}
body:has(.s4-page){background:#FBF8F2 !important;}
/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   One block per breakpoint, largest first, and nothing after
   this section — so a breakpoint rule always beats the desktop
   rule above it. Add new responsive rules to the matching
   block rather than opening another @media.

     R1  Tablet        768 – 1024
     R2  Phone         ≤ 767
     R3  Small phone   ≤ 560
     R4  Tiny          ≤ 400
   ============================================================ */


/* ---------- R1. Tablet 768 – 1024 ---------- */
@media(min-width:768px) and (max-width:1024px){

  /* shared */
  .s4-page{--s4-gutter:20px; --s4-media-w:100%;}
  .s4-page h1{font-size:clamp(30px,4.2vw,40px);}
  .s4-stat b{font-size:26px;}
  .s4-clause h2{font-size:18px;}

  /* About — story goes single column, stats 2-up */
  .s4-ab-story{padding:clamp(22px,2.6vw,30px) !important;}
  .s4-page .s4-ab-story > .vc_column_inner{
    flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  }
  .s4-ab-story > .vc_column_inner + .vc_column_inner{margin-top:22px;}
  .s4-page .s4-ab-stats > .vc_column_inner{
    flex:0 0 50% !important; max-width:50% !important; width:50% !important;
  }

  /* Terms — narrower contents panel */
  .s4-page .s4-doc-grid > .vc_column_inner:first-child{
    flex:0 0 32% !important; max-width:32% !important; width:32% !important;
  }
}


/* ---------- R2. Phone ≤ 767 ---------- */
@media(max-width:767px){

  /* shared */
  .s4-page{--s4-media-w:100%;}
  .s4-page .s4-rev{flex-direction:column !important;}
  .s4-media--blob{--s4-media-w:clamp(200px,70%,300px);}
  .s4-doc-toc{position:static;}
  .s4-clause h2{font-size:18px;}

  /* buttons — label kept to one line, scaling down with the screen */
  .s4-page .s4-btn{padding:14px 18px; font-size:15px;}
  .s4-page .s4-btn--block{
    max-width:100%;
    min-height:48px;
    white-space:nowrap;
    font-size:clamp(12.5px,3.6vw,15px);
    letter-spacing:-.01em;
  }

  /* CTA band stacks and centres */
  .s4-page .s4-cta{flex-wrap:wrap !important; text-align:center;}
  .s4-page .s4-cta .s4-btn-col > .vc_column-inner{align-items:center !important;}
  .s4-page .s4-cta .s4-btn-col .wpb_wrapper{text-align:center; align-items:center; margin-top:14px;}

  /* About — value rows stack, stats 2-up */
  .s4-page .s4-ab-val > .vc_column_inner,
  .s4-page .s4-ab-val > .vc_column_inner.s4-media,
  .s4-page .s4-ab-val > .vc_column_inner:not(.s4-media),
  .s4-page .s4-ab-val.s4-rev > .vc_column_inner,
  .s4-page .s4-ab-val.s4-rev > .vc_column_inner.s4-media,
  .s4-page .s4-ab-val.s4-rev > .vc_column_inner:not(.s4-media){
    flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  }
  .s4-page .s4-ab-val > .vc_column_inner.s4-media{margin-bottom:18px;}
  .s4-page .s4-ab-stats > .vc_column_inner{
    flex:0 0 50% !important; max-width:50% !important; width:50% !important;
  }

  /* Contact — hero stacks */
  .s4-page .s4-ct-head > .vc_column_inner,
  .s4-page .s4-ct-head > .vc_column_inner.s4-media,
  .s4-page .s4-ct-head > .vc_column_inner:not(.s4-media){
    flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  }
}


/* ---------- R3. Small phone ≤ 560 ---------- */
@media(max-width:560px){

  /* Terms — definitions go single column */
  .s4-defs{grid-template-columns:1fr; gap:0;}
  .s4-defs dt{padding-bottom:0; border-bottom:0;}
}


/* ---------- R4. Tiny ≤ 400 ---------- */
@media(max-width:400px){

  /* shared */
  .s4-page{--s4-gutter:16px;}
  .s4-page h1{font-size:28px;}
  .s4-page h2{font-size:22px;}
  .s4-page h3{font-size:20px;}
  .s4-card{padding:18px;}
  .s4-sub > li{padding-left:36px;}
  .s4-sub > li::before{font-size:12.5px; min-width:30px;}

  /* About — stats 1-up */
  .s4-page .s4-ab-stats > .vc_column_inner{
    flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  }
}