/* ============================================================
   SQUEEZE GROUP - HOMEPAGE STYLES
   Enqueued by include/acf-squeeze-homepage.php on the
   'Squeeze Homepage 2026' template only.
   All rules are namespaced under .sq-root so theme and plugin
   styles cannot bleed in, and these cannot leak out.
   Breakpoints: 1300px / 1024px (hamburger) / 767px.
   ============================================================ */

/**
* @license
*
* Font Family: General Sans
* Designed by: Frode Helland
* URL: https://www.fontshare.com/fonts/general-sans
* © 2026 Indian Type Foundry
*
* General Sans Extralight 
* General Sans ExtralightItalic 
* General Sans Light 
* General Sans LightItalic 
* General Sans Regular 
* General Sans Italic 
* General Sans Medium 
* General Sans MediumItalic 
* General Sans Semibold 
* General Sans SemiboldItalic 
* General Sans Bold 
* General Sans BoldItalic 
* General Sans Variable (Variable font)
* General Sans VariableItalic (Variable font)

*
*/
@font-face {
  font-family: 'GeneralSans-Extralight';
  src: url('../fonts/GeneralSans-Extralight.woff2') format('woff2'),
    url('../fonts/GeneralSans-Extralight.woff') format('woff'),
    url('../fonts/GeneralSans-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-ExtralightItalic';
  src: url('../fonts/GeneralSans-ExtralightItalic.woff2') format('woff2'),
    url('../fonts/GeneralSans-ExtralightItalic.woff') format('woff'),
    url('../fonts/GeneralSans-ExtralightItalic.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'GeneralSans-Light';
  src: url('../fonts/GeneralSans-Light.woff2') format('woff2'),
    url('../fonts/GeneralSans-Light.woff') format('woff'),
    url('../fonts/GeneralSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-LightItalic';
  src: url('../fonts/GeneralSans-LightItalic.woff2') format('woff2'),
    url('../fonts/GeneralSans-LightItalic.woff') format('woff'),
    url('../fonts/GeneralSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'GeneralSans-Regular';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
    url('../fonts/GeneralSans-Regular.woff') format('woff'),
    url('../fonts/GeneralSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-Italic';
  src: url('../fonts/GeneralSans-Italic.woff2') format('woff2'),
    url('../fonts/GeneralSans-Italic.woff') format('woff'),
    url('../fonts/GeneralSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'GeneralSans-Medium';
  src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'),
    url('../fonts/GeneralSans-Medium.woff') format('woff'),
    url('../fonts/GeneralSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-MediumItalic';
  src: url('../fonts/GeneralSans-MediumItalic.woff2') format('woff2'),
    url('../fonts/GeneralSans-MediumItalic.woff') format('woff'),
    url('../fonts/GeneralSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'GeneralSans-Semibold';
  src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
    url('../fonts/GeneralSans-Semibold.woff') format('woff'),
    url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-SemiboldItalic';
  src: url('../fonts/GeneralSans-SemiboldItalic.woff2') format('woff2'),
    url('../fonts/GeneralSans-SemiboldItalic.woff') format('woff'),
    url('../fonts/GeneralSans-SemiboldItalic.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'GeneralSans-Bold';
  src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'),
    url('../fonts/GeneralSans-Bold.woff') format('woff'),
    url('../fonts/GeneralSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-BoldItalic';
  src: url('../fonts/GeneralSans-BoldItalic.woff2') format('woff2'),
    url('../fonts/GeneralSans-BoldItalic.woff') format('woff'),
    url('../fonts/GeneralSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0;
*
* available axes:
'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: 'GeneralSans-Variable';
  src: url('../fonts/GeneralSans-Variable.woff2') format('woff2'),
    url('../fonts/GeneralSans-Variable.woff') format('woff'),
    url('../fonts/GeneralSans-Variable.ttf') format('truetype');
  font-weight: 200 300 400 600 700;
  font-display: swap;
  font-style: normal;
}

/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0;
*
* available axes:
'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: 'GeneralSans-VariableItalic';
  src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
    url('../fonts/GeneralSans-VariableItalic.woff') format('woff'),
    url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: italic;
}

/* ============================================================
   TOKENS + BASE
   ============================================================ */
.sq-root {
  --sq-ink: #26262F;
  --sq-navy: #2D2D3A;
  --sq-orange: #F4551F;
  --sq-orange-deep: #DE4512;
  --sq-purple: #C8B6F2;
  --sq-purple-card: #C9BAF3;
  --sq-lav: #A594E0;
  --sq-cream: #FAFAFA;
  --sq-white: #FFFFFF;
  --sq-shadow: 4px 4px 0 var(--sq-navy);
  --sq-shadow-sm: 3px 3px 0 var(--sq-navy);
  --sq-radius: 20px;
  --sq-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sq-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: 'GeneralSans-Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--sq-ink);
  background: var(--sq-cream);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Core Gutenberg blocks (.wp-block-*), i.e. loose editor content such as
   the Privacy Policy page, keep their native margins/padding; only the
   sq-* design system markup is reset. */
.sq-root *:not([class*="wp-block-"]),
.sq-root *:not([class*="wp-block-"])::before,
.sq-root *:not([class*="wp-block-"])::after {
  margin: 0;
  padding: 0;
}

.sq-root *,
.sq-root *::before,
.sq-root *::after {
  box-sizing: border-box;
}

.sq-root img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sq-root a {
  text-decoration: none;
  color: inherit;
}

/* List blocks (.wp-block-list) keep their bullets/numbers. */
.sq-root ul:not(.wp-block-list) {
  list-style: none;
}

.sq-root button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

.sq-root .sq-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Squeeze Page template ----
   Pages on the "Squeeze Page 2026" template that do not open with the
   hero band (which carries its own clearance) need breathing room under
   the fixed glass-pill navigation. */
.sq-root .sq-page-pad {
  padding-top: 140px;
}

/* Loose page content on the Squeeze Page template: squeeze/* blocks carry
   their own .sq-root + .sq-container wrappers, but anything else the editor
   adds (paragraphs, headings, core blocks) renders bare inside the main and
   would stretch the full viewport width. Constrain it to the same content
   column as .sq-container. Full-width core blocks opt out via .alignfull. */
.sq-root .sq-page-main> :not(.sq-root):not(.sq-container):not(.alignfull) {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ---- Buttons (hard-shadow brand style) ---- */
.sq-root .sq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 10px;
  border: 2px solid var(--sq-navy);
  box-shadow: var(--sq-shadow);
  transition: transform .18s var(--sq-ease), box-shadow .18s var(--sq-ease), background-color .18s ease;
  will-change: transform;
}

.sq-root .sq-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--sq-navy);
}

.sq-root .sq-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--sq-navy);
}

.sq-root .sq-btn:focus-visible {
  outline: 3px solid var(--sq-orange);
  outline-offset: 3px;
}

.sq-root .sq-btn--orange {
  background: var(--sq-orange);
  color: #fff;
}

.sq-root .sq-btn--orange:hover {
  background: var(--sq-orange-deep);
}

.sq-root .sq-btn--white {
  background: var(--sq-white);
  color: var(--sq-ink);
}

.sq-root .sq-btn--white:hover {
  background: #F1EDE6;
}

/* ---- Section label pill ---- */
.sq-root .sq-pill {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--sq-navy);
  background: var(--sq-white);
  color: var(--sq-ink);
}

/* ---- Headings ---- */
.sq-root .sq-h2 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.sq-root .sq-h2 strong {
  font-weight: 700;
}

/* Rich headings: editors mark words Italic to colour them brand orange
   (nothing ever renders italic in a heading). */
.sq-root .sq-h2 em {
  font-style: normal;
  color: var(--sq-orange);
}

/* ---- Scroll reveal ----
   Hidden initial states only apply under .sq-js (added by the script as
   soon as it runs), so content stays visible when the JS never loads:
   block editor previews, failed script loads, JS disabled. */
.sq-root:where(.sq-js) .sq-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--sq-ease), transform .8s var(--sq-ease);
}

.sq-root .sq-reveal.sq-in {
  opacity: 1;
  transform: none;
}

.sq-root .sq-reveal--d1 {
  transition-delay: .2s;
}

.sq-root .sq-reveal--d2 {
  transition-delay: .35s;
}

.sq-root .sq-reveal--d3 {
  transition-delay: .5s;
}

/* ============================================================
   NAVIGATION — sticky glass pill
   ============================================================ */
.sq-root .sq-nav {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  padding: 0 32px;
  pointer-events: none;
}

.sq-root .sq-nav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  width: 100%;
  max-width: 1240px;
  /* aligns pill edges with the .sq-container content column (1180 - 2x32 padding) */
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  padding: 12px 30px 12px 16px;
  box-shadow: 0 10px 30px rgba(45, 45, 58, .12);
}

.sq-root .sq-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sq-root .sq-nav-logo img {
  height: 40px;
  width: auto;
}

.sq-root .sq-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sq-root .sq-nav-links li {
  margin: 0;
  padding: 0;
}

.sq-root .sq-nav-links a {
  font-size: 16px;
  font-weight: 600;
  color: var(--sq-ink);
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}

.sq-root .sq-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2.5px;
  background: var(--sq-orange);
  border-radius: 2px;
  transition: right .25s var(--sq-ease);
}

.sq-root .sq-nav-links a:hover {
  color: var(--sq-orange);
}

.sq-root .sq-nav-links a:hover::after {
  right: 0;
}

/* ---- Hamburger (circular, mobile/tablet) ---- */
.sq-root .sq-burger {
  pointer-events: auto;
  display: none;
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 30px rgba(45, 45, 58, .12);
  padding: 26px !important;
}

.sq-root .sq-burger:hover {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 30px rgba(45, 45, 58, .12);
}

.sq-root .sq-burger:focus-visible {
  outline: 3px solid var(--sq-orange);
  outline-offset: 3px;
}

.sq-root .sq-burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--sq-ink);
  transition: transform .35s var(--sq-spring), opacity .2s ease;
}

.sq-root .sq-burger span:nth-child(1) {
  transform: translate(-50%, -50%) translateY(-7px);
}

.sq-root .sq-burger span:nth-child(2) {
  transform: translate(-50%, -50%);
}

.sq-root .sq-burger span:nth-child(3) {
  transform: translate(-50%, -50%) translateY(7px);
}

.sq-root .sq-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sq-root .sq-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(.4);
}

.sq-root .sq-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---- Mobile floating menu panel ---- */
.sq-root .sq-mobile-menu {
  position: fixed;
  z-index: 890;
  top: 96px;
  left: 16px;
  right: 16px;
  background: var(--sq-white);
  border-radius: 26px;
  border: 1px solid rgba(45, 45, 58, .08);
  box-shadow: 0 30px 60px rgba(45, 45, 58, .22), 0 4px 14px rgba(45, 45, 58, .10);
  padding: 34px 30px 28px;
  display: flex;
  flex-direction: column;
  transform-origin: top right;
  transform: translateY(-14px) scale(.94);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s var(--sq-spring), opacity .3s ease, visibility 0s linear .45s;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
}

.sq-root .sq-mobile-menu.sq-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform .45s var(--sq-spring), opacity .25s ease, visibility 0s;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 30px rgba(45, 45, 58, .12);
  background: rgb(255 255 255 / 80%);
}

.sq-root .sq-mobile-menu ul {
  display: flex;
  flex-direction: column;
}

.sq-root .sq-mobile-menu li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .5s var(--sq-spring);
}

.sq-root .sq-mobile-menu.sq-open li {
  opacity: 1;
  transform: none;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(1) {
  transition-delay: .08s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(2) {
  transition-delay: .14s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(3) {
  transition-delay: .20s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(4) {
  transition-delay: .26s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(5) {
  transition-delay: .32s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(6) {
  transition-delay: .38s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(7) {
  transition-delay: .44s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(8) {
  transition-delay: .50s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(9) {
  transition-delay: .56s;
}

.sq-root .sq-mobile-menu.sq-open li:nth-child(10) {
  transition-delay: .62s;
}

/* Anything past ten items shares the final delay so it still animates in
   after the rest instead of snapping in with the panel. */
.sq-root .sq-mobile-menu.sq-open li:nth-child(n+11) {
  transition-delay: .68s;
}

.sq-root .sq-mobile-menu a.sq-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 600;
  color: var(--sq-ink);
  padding: 15px 4px;
  border-bottom: 1px solid rgba(45, 45, 58, .08);
  transition: color .2s ease, padding-left .25s var(--sq-ease);
}

.sq-root .sq-mobile-menu li:last-of-type a.sq-mobile-link {
  border-bottom: none;
}

.sq-root .sq-mobile-link svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s ease, transform .25s var(--sq-ease);
}

.sq-root .sq-mobile-link:hover,
.sq-root .sq-mobile-link:active {
  color: var(--sq-orange);
  padding-left: 10px;
}

.sq-root .sq-mobile-link:hover svg,
.sq-root .sq-mobile-link:active svg {
  opacity: 1;
  transform: none;
}

.sq-root .sq-mobile-cta {
  margin-top: 26px;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease .38s, transform .5s var(--sq-spring) .38s, box-shadow .18s var(--sq-ease), background-color .18s ease;
}

.sq-root .sq-mobile-menu.sq-open .sq-mobile-cta {
  opacity: 1;
  transform: none;
}

.sq-root .sq-mobile-menu.sq-open .sq-mobile-cta:hover {
  transform: translate(2px, 2px);
}

/* ============================================================
   HERO
   ============================================================ */
.sq-root .sq-hero {
  position: relative;
  padding: 150px 0 150px;
  overflow: hidden;
  margin-top: 0;
  width: 100vw;
  /* Solid brand purple through the top quarter, blending down into the
     page background; sits behind the ellipse image on ::before. */
  background: linear-gradient(180deg, #C8B6F2 0%, #C8B6F2 25%, #FAFAFA 75%);
  min-height: 500px;
}

/* hero ellipse background: rises + fades in on first load */
.sq-root .sq-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(https://wordpress-1567601-6533445.cloudwaysapps.com/wp-content/uploads/2026/07/Ellipse-5192.png);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
}

body.single-post .sq-root .sq-hero,
body.page-template-template-squeeze-blog .sq-root .sq-hero {
  display: flex;
  justify-content: start;
  align-items: center;
  text-align: left;
  max-width: initial !important;
}

body.single-post .sq-root .sq-container,
body.page-template-template-squeeze-blog .sq-root .sq-container {
  width: 100%;
}

.sq-root:where(.sq-js) .sq-hero::before {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity .9s var(--sq-ease) .15s, transform 1.1s var(--sq-spring) .15s;
}

.sq-root.sq-loaded .sq-hero::before {
  opacity: 1;
  transform: none;
}

.sq-root .sq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, .9fr);
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.sq-root .sq-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 400;
  color: var(--sq-ink);
  margin-bottom: 18px;
}

.sq-root .sq-hero h1 {
  font-size: clamp(42px, 5.2vw, 56px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 26px;
}

.sq-root .sq-hero-squeezed {
  position: relative;
  display: inline-block;
  color: var(--sq-orange);
}

.sq-root .sq-squiggle {
  position: absolute;
  left: -2%;
  bottom: -0.42em;
  width: 104%;
  height: .5em;
  overflow: visible;
  pointer-events: none;
}

.sq-root .sq-hero-sub {
  font-size: clamp(18px, 1.8vw, 24px);
  color: #3E3A4E;
  font-weight: 300;
  margin-bottom: 34px;
  line-height: 1.2;
}

.sq-root .sq-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 34px;
}

.sq-root .sq-hero-note {
  font-size: 16px;
  color: #4A4560;
}

/* hero orange illustration */
.sq-root .sq-hero-art {
  position: absolute;
  top: -120px;
  right: -70px;
  z-index: 1;
}

.sq-root .sq-hero-orange {
  margin: -90px -40px -20px 0;
  transform-origin: 52% 4%;
  animation: sq-sway 7s ease-in-out infinite;
}

@keyframes sq-sway {

  0%,
  100% {
    transform: rotate(2.2deg);
  }

  50% {
    transform: rotate(-2.2deg);
  }
}

/* sparkles */
.sq-root .sq-sparkle {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--sq-orange);
}

.sq-root .sq-sparkle svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sq-root .sq-twinkle {
  animation: sq-twinkle 2.6s ease-in-out infinite;
  transform-origin: center;
}

.sq-root .sq-twinkle--slow {
  animation-duration: 3.4s;
  animation-delay: .9s;
}

@keyframes sq-twinkle {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(.55) rotate(20deg);
    opacity: .45;
  }
}

.sq-root .sq-hero-spark {
  position: absolute;
  color: #fff;
  z-index: 3;
}

.sq-root .sq-hero-spark--1 {
  width: 22px;
  height: 22px;
  right: 46%;
  top: 16%;
}

.sq-root .sq-hero-spark--2 {
  width: 14px;
  height: 14px;
  right: 8%;
  bottom: 24%;
}

/* entrance choreography (first load), hidden state gated on .sq-js */
.sq-root:where(.sq-js) .sq-load {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--sq-ease), transform .9s var(--sq-ease);
}

.sq-root.sq-loaded .sq-load {
  opacity: 1;
  transform: none;
}

.sq-root.sq-loaded .sq-load--1 {
  transition-delay: .05s;
}

.sq-root.sq-loaded .sq-load--2 {
  transition-delay: .15s;
}

.sq-root.sq-loaded .sq-load--3 {
  transition-delay: .25s;
}

.sq-root.sq-loaded .sq-load--4 {
  transition-delay: .35s;
}

.sq-root.sq-loaded .sq-load--5 {
  transition-delay: .45s;
}

.sq-root:where(.sq-js) .sq-load-art {
  opacity: 0;
  transform: translateY(-30px) scale(.92);
  transition: opacity .9s var(--sq-ease) .2s, transform 1.1s var(--sq-spring) .2s;
}

.sq-root.sq-loaded .sq-load-art {
  opacity: 1;
  transform: none;
  width: 100%;
}

/* background blobs — spring in on first load only */
.sq-root .sq-blob {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.sq-root:where(.sq-js) .sq-blob {
  opacity: 0;
  transform: scale(.55);
  transition: opacity 1.1s ease, transform 1.4s var(--sq-spring);
}

.sq-root.sq-loaded .sq-blob {
  opacity: 1;
  transform: scale(1);
}

.sq-root .sq-blob--why {
  width: 900px;
  right: -260px;
  top: -120px;
  transition-delay: .5s;
}

.sq-root .sq-blob--who {
  width: 1000px;
  left: -380px;
  bottom: -200px;
  transition-delay: .7s;
}

.sq-root .sq-blob--vision {
  width: 900px;
  right: -300px;
  bottom: -160px;
  transition-delay: .9s;
}

/* ============================================================
   WHY SQUEEZE
   ============================================================ */
.sq-root .sq-why {
  position: relative;
  padding: 120px 0 90px;
}

.sq-root .sq-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.sq-root .sq-why-copy .sq-pill {
  margin-bottom: 22px;
}

.sq-root .sq-why-copy .sq-h2 {
  margin-bottom: 22px;
}

.sq-root .sq-why-copy p {
  font-size: 24px;
  color: #4A4757;
  font-family: 'GeneralSans-Variable', Arial, Helvetica, sans-serif;
  font-weight: 300;
  line-height: 30px;
  max-width: 900px;
}

.sq-root .sq-why-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* Four cards: one row of 4 on desktop, 2x2 on tablet, stacked on mobile. */
.sq-root .sq-why-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Registered so the gradient angle can animate; browsers without @property
   simply show the static border. */
@property --sq-why-angle {
  syntax: '<angle>';
  initial-value: -118deg;
  inherits: false;
}

.sq-root .sq-why-card {
  /* Gradient border: white fill clipped to the padding box, gradient behind it
     clipped to the border box, showing through the transparent 1px border. */
  --sq-why-angle: -118deg;
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--sq-white), var(--sq-white)) padding-box,
    linear-gradient(var(--sq-why-angle), #FF6433, #B796FB) border-box;
  padding: 30px 32px 34px;
  /* One full sweep takes 2s; the 7.5s cycle leaves room for the three cards
     to take turns (0s / 2.5s / 5s starts) with a 500ms gap between them. */
  animation: sq-why-border-spin 7.5s linear infinite;
}

.sq-root .sq-why-card--2 {
  animation-delay: 2.5s;
}

.sq-root .sq-why-card--3 {
  animation-delay: 5s;
}

/* The angle sweeps a full turn during the first 2s of the cycle, then holds. */
@keyframes sq-why-border-spin {
  0% {
    --sq-why-angle: -118deg;
  }

  26.667% {
    --sq-why-angle: 242deg;
  }

  100% {
    --sq-why-angle: 242deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sq-root .sq-why-card {
    animation: none;
  }
}

.sq-root .sq-why-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.sq-root .sq-why-card p {
  font-size: 17px;
  color: #4A4757;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ============================================================
   WHO WE'RE FOR
   ============================================================ */
.sq-root .sq-who {
  position: relative;
  padding: 60px 0 120px;
}

.sq-root .sq-who-head {
  position: relative;
  z-index: 1;
  margin-bottom: 48px;
}

.sq-root .sq-who-head .sq-pill {
  margin-bottom: 22px;
}

.sq-root .sq-who-intro {
  font-size: 24px;
  color: #4A4757;
  font-family: 'GeneralSans-Variable', Arial, Helvetica, sans-serif;
  font-weight: 300;
  line-height: 30px;
  margin-top: 18px;
}

.sq-root .sq-who-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.sq-root .sq-who-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--sq-navy);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sq-shadow);
  transition: transform .3s var(--sq-ease), box-shadow .3s var(--sq-ease);
  background-repeat: no-repeat;
  background-size: contain, cover;
  background-position: bottom center, top center;
}

.sq-root .sq-who-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--sq-navy);
}

.sq-root .sq-who-card-top {
  position: relative;
  height: 300px;
}


@keyframes sq-bob {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(-1.5deg);
  }
}

.sq-root .sq-who-card-body {
  position: relative;
  z-index: 2;
  padding: 0 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sq-root .sq-who-card-body .sq-pill {
  align-self: flex-start;
  margin-bottom: 16px;
  font-size: 14px;
  padding: 6px 14px;
}

.sq-root .sq-who-card-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.sq-root .sq-who-card-text {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex: 1;
}

.sq-root .sq-who-card-text p {
  font-size: 18px;
  color: #332F45;
  flex: 1;
}

.sq-root .sq-arrow-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--sq-navy);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sq-navy);
  transition: background-color .2s ease, color .2s ease, transform .25s var(--sq-spring);
}

.sq-root .sq-arrow-btn svg {
  width: 18px;
  height: 18px;
}

.sq-root .sq-who-card:hover .sq-arrow-btn {
  background: var(--sq-orange);
  border-color: var(--sq-navy);
  color: #fff;
  transform: translateX(4px);
}

/* ============================================================
   THE VISION
   ============================================================ */
.sq-root .sq-vision {
  position: relative;
  padding: 60px 0 70px;
}

.sq-root .sq-who .sq-container,
.sq-root .sq-vision .sq-container {
  position: relative;
}

.sq-root .sq-vision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sq-root .sq-vision-copy .sq-pill {
  margin-bottom: 22px;
}

.sq-root .sq-vision-copy .sq-h2 {
  margin-bottom: 24px;
}

.sq-root .sq-vision-copy p {
  font-size: 24px;
  color: #4A4757;
  margin-bottom: 20px;
  font-weight: 300;
  line-height: 1.2;
}

.sq-root .sq-vision-copy p strong {
  color: var(--sq-ink);
  font-weight: 700;
}

.sq-root .sq-vision-copy .sq-btn {
  margin-top: 12px;
}

.sq-root .sq-vision-art {
  display: flex;
  justify-content: center;
}

/* ============================================================
   STATS
   ============================================================ */
.sq-root .sq-stats {
  position: relative;
  padding: 120px 0 140px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.sq-root .sq-stats .sq-container {
  position: relative;
  z-index: 1;
}

/* Fizz — bubbles rising and fading like a fresh soft drink */
.sq-root .sq-fizz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sq-root .sq-fizz span {
  position: absolute;
  bottom: -14px;
  border-radius: 50%;
  opacity: 0;
  animation: sq-fizz-rise var(--fd, 9s) linear var(--fdelay, 0s) infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.sq-root .sq-fizz.sq-on span {
  animation-play-state: running;
}

@keyframes sq-fizz-rise {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }

  12% {
    opacity: var(--fo, .6);
  }

  60% {
    opacity: var(--fo, .6);
  }

  100% {
    transform: translate3d(var(--fx, 10px), calc(var(--sq-fizz-rise, 320px)*-1), 0);
    opacity: 0;
  }
}

.sq-root .sq-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  text-align: center;
}

.sq-root .sq-stat-value {
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.sq-root .sq-stat-label {
  margin-top: 12px;
  font-size: 20px;
  color: #4A4757;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.sq-root .sq-cta {
  position: relative;
  padding: 160px 0 120px;
  overflow: hidden;
}

/* cta purple band: rises + fades in from the bottom on scroll */
.sq-root .sq-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(https://wordpress-1567601-6533445.cloudwaysapps.com/wp-content/uploads/2026/07/Ellipse-519-v2.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 150%;
}

.sq-root:where(.sq-js) .sq-cta::before {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity .9s var(--sq-ease), transform 1.1s var(--sq-ease);
}

.sq-root .sq-cta.sq-in::before {
  opacity: 1;
  transform: none;
}

.sq-root .sq-stats-background {
  position: absolute;
  top: -100px;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .sq-root .sq-stats-background img {
    height: 820px;
    object-fit: cover;
  }
}

.sq-root .sq-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
  gap: 30px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Rich heading: regular by default; strong = bold, em = brand orange. */
.sq-root .sq-cta h2 {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.sq-root .sq-cta h2 strong {
  font-weight: 700;
}

.sq-root .sq-cta h2 em {
  font-style: normal;
  color: var(--sq-orange);
}

.sq-root .sq-cta-sub {
  font-size: 20px;
  color: #3E3A4E;
  max-width: 440px;
  margin-bottom: 32px;
}

.sq-root .sq-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.sq-root .sq-cta-art {
  position: relative;
  display: flex;
  justify-content: center;
}

.sq-root .sq-cta-art img {}

.sq-root .sq-cta-spark {
  position: absolute;
  color: var(--sq-navy);
}

.sq-root .sq-cta-spark--1 {
  width: 22px;
  height: 22px;
  right: 4%;
  top: 18%;
}

.sq-root .sq-cta-spark--2 {
  width: 14px;
  height: 14px;
  right: 12%;
  top: 38%;
}

/* ============================================================
   FOOTER
   ============================================================ */
.sq-root .sq-footer {
  background: #23232E;
  color: #EDEAF4;
  padding: 80px 0 56px;
}

.sq-root .sq-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .6fr));
  gap: 40px;
  align-items: start;
}

.sq-root .sq-footer-logo img {
  height: 74px;
  width: auto;
}

.sq-root .sq-footer h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
}

.sq-root .sq-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sq-root .sq-footer-col li {
  margin-bottom: 12px;
}

.sq-root .sq-footer-col a {
  font-size: 18px;
  color: #B9B4C9;
  transition: color .2s ease;
}

.sq-root .sq-footer-col a:hover {
  color: var(--sq-orange);
}

.sq-root .sq-footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, .14);
  margin: 56px 0 50px;
}

.sq-root .sq-footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 40px;
  align-items: start;
}

.sq-root .sq-footer-bottom h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 26px;
  max-width: 420px;
}

.sq-root .sq-subscribe {
  display: flex;
  gap: 14px;
  max-width: 480px;
}

.sq-root .sq-subscribe input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  padding: 15px 18px;
  transition: border-color .2s ease, background-color .2s ease;
}

.sq-root .sq-subscribe input::placeholder {
  color: #8F8AA1;
}

.sq-root .sq-subscribe input:focus {
  outline: none;
  border-color: var(--sq-orange);
  background: rgba(255, 255, 255, .1);
}

.sq-root .sq-subscribe .sq-btn {
  box-shadow: var(--sq-shadow-sm);
  padding: 15px 24px;
}

.sq-root .sq-subscribe .sq-btn:hover {
  box-shadow: 1px 1px 0 var(--sq-navy);
}

.sq-root .sq-footer-contact h4 {
  margin-bottom: 16px;
}

.sq-root .sq-footer-contact a {
  display: block;
  font-size: 16px;
  color: #EDEAF4;
  margin-bottom: 8px;
  transition: color .2s ease;
}

.sq-root .sq-footer-contact a:hover {
  color: var(--sq-orange);
}

.sq-root .sq-footer-copy {
  margin-top: 34px;
  font-size: 14px;
  color: #8F8AA1;
}

/* ============================================================
   PAGE HERO - curved band with circular photo (squeeze/page-hero)
   Rides on .sq-hero for the ellipse background + nav clearance.
   ============================================================ */
.sq-root .sq-phero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 2;
  margin-bottom: -120px;
}

.sq-root .sq-phero-pill {
  margin-bottom: 22px;
}

/* Rich heading: regular by default; strong = bold, em = brand orange. */
.sq-root .sq-phero h1 {
  margin-bottom: 22px;
  font-weight: 400;
}

.sq-root .sq-phero h1 strong {
  font-weight: 700;
}

.sq-root .sq-phero h1 em {
  font-style: normal;
  color: var(--sq-orange);
}

.sq-root .sq-phero-sub {
  font-size: clamp(18px, 1.8vw, 22px);
  color: #3E3A4E;
  font-weight: 300;
  line-height: 1.35;
  max-width: 560px;
  margin-bottom: 24px;
}

.sq-root .sq-phero-note {
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--sq-ink);
}

.sq-root .sq-phero-note strong {
  font-weight: 700;
}

.sq-root .sq-phero-art {
  display: flex;
  justify-content: flex-end;
}

.sq-root .sq-phero-photo {
  width: min(500px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 10px solid #F2F2F2;
  min-width: 380px;
}

/* "As is" image style (block field Image style > As is): the photo keeps
   its natural shape, centered inside .sq-load-art. The doubled class on
   .sq-load-art outranks the justify-content overrides the load
   choreography applies inside the media queries further down. */
.sq-root .sq-phero-art.sq-phero-art--natural {
  justify-content: center;
}

.sq-root .sq-phero-art.sq-phero-art--natural .sq-load-art {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sq-root .sq-phero-art.sq-phero-art--natural .sq-phero-photo {
  width: auto;
  max-width: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  border: 0;
  min-width: initial !important;
}

/* ============================================================
   SPLIT - copy + illustration two-column (squeeze/split)
   ============================================================ */
.sq-root .sq-split {
  position: relative;
  padding: 90px 0;
}

.sq-root .sq-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* image-left variant: the art div sits after the copy in the DOM */
.sq-root .sq-split--flip .sq-split-grid>.sq-split-art {
  order: -1;
  justify-content: flex-start;
}

.sq-root .sq-split-copy .sq-pill {
  margin-bottom: 22px;
}

.sq-root .sq-split-copy .sq-h2 {
  margin-bottom: 22px;
}

.sq-root .sq-split-body p {
  font-size: 22px;
  color: #4A4757;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 16px;
}

.sq-root .sq-split-body p:last-child {
  margin-bottom: 0;
}

.sq-root .sq-split-body p strong {
  color: var(--sq-ink);
  font-weight: 700;
}

.sq-root .sq-split-list {
  margin: 18px 0 4px;
}

.sq-root .sq-split-list li {
  position: relative;
  padding-left: 22px;
  font-size: 18px;
  color: #4A4757;
  font-weight: 300;
  margin-bottom: 8px;
}

.sq-root .sq-split-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sq-orange);
}

.sq-root .sq-split-copy .sq-btn {
  margin-top: 18px;
}

.sq-root .sq-split-art {
  display: flex;
  justify-content: center;
}

/* ============================================================
   PANEL - shared white rounded card (story + checklist blocks)
   ============================================================ */
.sq-root .sq-panel {
  background: var(--sq-white);
  border: 1px solid rgba(45, 45, 58, .1);
  border-radius: 24px;
  padding: 56px 60px;
  box-shadow: 0 18px 40px rgba(45, 45, 58, .06);
}

/* ============================================================
   STORY CARD - "And why Squeeze, you might ask?" (squeeze/story)
   ============================================================ */
.sq-root .sq-story {
  position: relative;
  padding: 60px 0;
}

.sq-root .sq-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 48px;
  align-items: center;
}

/* Rich heading: regular by default; strong = bold, em = brand orange. */
.sq-root .sq-story h2 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.sq-root .sq-story h2 strong {
  font-weight: 700;
}

.sq-root .sq-story h2 em {
  font-style: normal;
  color: var(--sq-orange);
}

.sq-root .sq-story-body p {
  font-size: 22px;
  color: #4A4757;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 14px;
}

.sq-root .sq-story-body p:last-child {
  margin-bottom: 0;
}

.sq-root .sq-story-body p strong {
  color: var(--sq-ink);
  font-weight: 700;
}

.sq-root .sq-story-art {
  display: flex;
  justify-content: center;
}

/* ============================================================
   CHECKLIST - copy left, orange-tick items right (squeeze/checklist)
   ============================================================ */
.sq-root .sq-check {
  position: relative;
  padding: 60px 0 120px;
}

.sq-root .sq-check-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}

/* Rich heading: regular by default; strong = bold, em = brand orange. */
.sq-root .sq-check-copy h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.sq-root .sq-check-copy h2 strong {
  font-weight: 700;
}

.sq-root .sq-check-copy h2 em {
  font-style: normal;
  color: var(--sq-orange);
}

/* Rich-text body: paragraphs, bold, links and lists. */
.sq-root .sq-check-body p,
.sq-root .sq-check-body li {
  font-size: 22px;
  color: #4A4757;
  font-weight: 300;
  line-height: 1.5;
}

.sq-root .sq-check-body p {
  margin-bottom: 16px;
}

.sq-root .sq-check-body> :last-child {
  margin-bottom: 0;
}

.sq-root .sq-check-body strong {
  color: var(--sq-ink);
  font-weight: 700;
}

.sq-root .sq-check-body a {
  color: var(--sq-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sq-root .sq-check-body ul,
.sq-root .sq-check-body ol {
  margin: 0 0 16px 22px;
}

.sq-root .sq-check-body ul {
  list-style: disc;
}

.sq-root .sq-check-body ol {
  list-style: decimal;
}

.sq-root .sq-check-body li {
  margin-bottom: 6px;
}

.sq-root .sq-check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sq-root .sq-check-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #F4F2F7;
  border: 1px solid rgba(45, 45, 58, .08);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 500;
}

.sq-root .sq-check-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--sq-orange);
  /* keeps the icon centred on the first text line */
  margin-top: 2px;
}

/* ---- Two-column layout (block field Layout > Heading over two columns):
   the heading spans the full card, then two equal columns each carry their
   own body copy above their own checklist. ---- */
.sq-root .sq-check-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
  align-items: start;
}

.sq-root .sq-check-cols-head {
  grid-column: 1 / -1;
}

.sq-root .sq-check-cols-head h2 {
  margin-bottom: 0;
}

.sq-root .sq-check-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Column intro copy is a lead-in line, so it sits smaller than the split
   layout's body paragraph. */
.sq-root .sq-check-col-body p,
.sq-root .sq-check-col-body li {
  font-size: 18px;
  color: var(--sq-ink);
  font-weight: 400;
  line-height: 1.5;
}

.sq-root .sq-check-item-text {
  min-width: 0;
}

.sq-root .sq-check-item-text p {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  color: #4A4757;
  line-height: 1.45;
}

/* ============================================================
   TEAM - leadership members (squeeze/team)
   ============================================================ */
.sq-root .sq-team {
  position: relative;
  padding: 90px 0 60px;
}

.sq-root .sq-team .sq-h2 {
  margin-bottom: 48px;
}

.sq-root .sq-team-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.sq-root .sq-team-member {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.sq-root .sq-team-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sq-purple-card);
  border: 8px solid #F2F2F2;
}

.sq-root .sq-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sq-root .sq-team-info h3 {
  display: inline-block;
  align-items: center;
  flex-wrap: wrap;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

.sq-root .sq-team-info h3 span {
  font-weight: 400;
}

.sq-root .sq-team-linkedin {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: #0A66C2;
  transition: transform .25s var(--sq-spring);
  margin-left: 5px;
  position: relative;
  top: 2px;
}

.sq-root .sq-team-linkedin:hover {
  transform: translateY(-2px);
}

.sq-root .sq-team-linkedin svg {
  width: 100%;
  height: 100%;
}

.sq-root .sq-team-bio p {
  font-size: 18px;
  color: #4A4757;
  font-weight: 300;
  line-height: 1.55;
  margin-bottom: 12px;
}

.sq-root .sq-team-bio p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   VALUES - 4-up gradient-border cards (squeeze/values)
   Cards reuse .sq-why-card for the animated gradient border.
   ============================================================ */
.sq-root .sq-values {
  position: relative;
  padding: 90px 0;
}

.sq-root .sq-values-head {
  margin-bottom: 40px;
}

.sq-root .sq-values-head .sq-pill {
  margin-bottom: 22px;
}

.sq-root .sq-values-head .sq-h2 {
  max-width: 780px;
}

.sq-root .sq-values-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.sq-root .sq-values-cards .sq-why-card {
  padding: 26px 24px 28px;
}

.sq-root .sq-values-cards .sq-why-card h3 {
  font-size: 19px;
}

.sq-root .sq-values-cards .sq-why-card p {
  font-size: 16px;
}

/* ============================================================
   CTA CARD - purple card, bullets + juice (squeeze/cta-card)
   ============================================================ */
.sq-root .sq-ctacard {
  position: relative;
  padding: 90px 0;
}

.sq-root .sq-ctacard-box {
  background: var(--sq-purple-card);
  border-radius: 28px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: center;
  position: relative;
}

/* Rich heading: regular by default; strong = bold, em = brand orange. */
.sq-root .sq-ctacard h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.sq-root .sq-ctacard h2 strong {
  font-weight: 700;
}

.sq-root .sq-ctacard h2 em {
  font-style: normal;
  color: var(--sq-orange);
}

.sq-root .sq-ctacard ul {
  margin-bottom: 28px;
}

.sq-root .sq-ctacard li {
  position: relative;
  padding-left: 20px;
  font-size: 22px;
  color: #332F45;
  margin-bottom: 0;
  font-weight: 300;
}

.sq-root .sq-ctacard li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sq-ink);
}

.sq-root .sq-ctacard-art {
  display: flex;
  justify-content: center;
  height: 100%;
}

/* the juice glass rises out of the top of the card */
.sq-root .sq-ctacard-art img {
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 600px;
}

/* ============================================================
   RESPONSIVE — 1200 / 1024 / 767
   ============================================================ */
@media (max-width:1300px) {
  .sq-root .sq-hero {
    padding: 150px 0 100px;
  }

  .sq-root .sq-hero-orange {
    margin-top: -60px;
  }

  .sq-root .sq-why-grid,
  .sq-root .sq-vision-grid {
    gap: 48px;
  }

  .sq-root .sq-stats-grid {
    gap: 28px;
  }

  .sq-root .sq-split-grid,
  .sq-root .sq-story-grid,
  .sq-root .sq-check-grid {
    gap: 44px;
  }

  .sq-root .sq-who-card-top {
    height: 300px;
  }

  .sq-root .sq-who-card-body {
    background-image: url(https://wordpress-1567601-6533445.cloudwaysapps.com/wp-content/uploads/2026/08/Why-Squeeze-Eclipse.png);
    background-size: cover;
    background-position: bottom center;
  }

  .sq-root .sq-values-cards {
    gap: 18px;
  }
}

@media (max-width:1024px) {
  .sq-root .sq-nav-links {
    display: none;
  }

  .sq-root .sq-hero-orange {
    margin-top: 0;
    width: 84%;
  }

  .sq-root .sq-nav {
    justify-content: space-between;
    padding: 0 16px;
  }

  .sq-root .sq-nav-inner {
    width: auto;
    padding: 10px 22px 10px 14px;
  }

  .sq-root .sq-burger {
    display: block;
  }

  .sq-root .sq-hero {
    overflow: visible;
  }

  .sq-root .sq-cta-sub {
    max-width: initial;
  }

  .sq-root .sq-who-card {
    background-position: 50% 150%, top center;
  }

  .sq-root .sq-hero-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sq-root .sq-hero-art {
    order: -1;
    justify-content: flex-end;
    position: relative;
    top: 0;
    right: 0;
  }

  .sq-root .sq-hero-sub,
  .sq-root .sq-hero-note {
    max-width: 640px;
  }

  .sq-root .sq-cta::before {
    background-size: cover;
  }

  .sq-root .sq-why {
    padding: 90px 0 70px;
  }

  .sq-root .sq-why-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .sq-root .sq-why-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sq-root .sq-why-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sq-root .sq-who {
    padding: 40px 0 90px;
  }

  .sq-root .sq-who-cards {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
    gap: 24px;
  }

  .sq-root .sq-vision {
    padding: 40px 0 100px;
  }

  .sq-root .sq-vision-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .sq-root .sq-vision-art {
    order: 2;
  }

  .sq-root .sq-stats {
    padding: 20px 0 110px;
  }

  .sq-root .sq-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 28px;
  }

  .sq-root .sq-cta {
    border-radius: 50% 50% 0 0/70px 70px 0 0;
    padding: 170px 0 90px;
  }

  .sq-root .sq-cta-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sq-root .sq-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 28px;
  }

  .sq-root .sq-footer-bottom {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .sq-root.sq-loaded .sq-load-art {
    display: flex;
    justify-content: center;
  }

  .sq-root .sq-phero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    display: flex;
    flex-direction: column-reverse;
  }

  .sq-root .sq-phero-copy {
    order: 1;
  }

  /* Stacked hero keeps source order: copy on top, photo underneath. */
  .sq-root .sq-phero-art {
    justify-content: flex-end;
  }

  .sq-root .sq-phero-photo {
    width: min(340px, 78%);
  }

  .sq-root .sq-split {
    padding: 70px 0;
  }

  .sq-root .sq-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sq-root .sq-split-art,
  .sq-root .sq-split--flip .sq-split-grid>.sq-split-art {
    order: 2;
    justify-content: center;
  }

  .sq-root .sq-panel {
    padding: 40px 36px;
  }

  .sq-root .sq-story-grid,
  .sq-root .sq-check-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .sq-root .sq-check-cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sq-root .sq-team-member {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 32px;
  }

  .sq-root .sq-team-photo {
    width: 160px;
    height: 160px;
  }

  .sq-root .sq-values {
    padding: 70px 0;
  }

  .sq-root .sq-values-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .sq-root .sq-ctacard {
    padding: 70px 0;
  }

  .sq-root .sq-ctacard-box {
    grid-template-columns: 1fr;
    padding: 44px 40px;
    gap: 32px;
    display: flex;
    flex-direction: column-reverse;
  }

  .sq-root .sq-ctacard-art {
    justify-content: flex-start;
    height: 200px;
    width: 100%;
  }

  .sq-root .sq-ctacard-art img {
    margin: 0;
    width: 440px;
    bottom: initial;
    top: -100px;
  }
}

@media (max-width:767px) {
  .sq-root .sq-container {
    padding: 0 22px;
  }

  .sq-root .sq-page-main> :not(.sq-root):not(.sq-container):not(.alignfull) {
    padding-left: 22px;
    padding-right: 22px;
  }

  .sq-root {
    font-size: 16px;
  }

  .sq-root .sq-nav {
    top: 14px;
  }

  .sq-root .sq-nav-logo img {
    height: 34px;
  }

  .sq-root .sq-burger {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, .82) !important;
    padding: 26px !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }

  .sq-root .sq-mobile-menu {
    top: 84px;
    left: 12px;
    right: 12px;
  }

  .sq-root .sq-hero {
    padding: 0 0 80px;
    margin-bottom: 80px;
  }

  .sq-root .sq-hero.sq-phero {
    padding-top: 140px;
  }

  .sq-root .sq-hero h1 {
    font-size: clamp(40px, 11.5vw, 52px);
  }

  .sq-root .sq-hero-ctas {
    gap: 14px;
  }

  .sq-root .sq-btn {
    padding: 15px 20px;
    font-size: 16px;
  }

  .sq-root .sq-why {
    padding: 76px 0 56px;
  }

  .sq-root .sq-why-card {
    padding: 22px;
  }

  .sq-root .sq-why-cards--4 {
    grid-template-columns: 1fr;
  }

  .sq-root .sq-who {
    padding: 32px 0 76px;
  }

  .sq-root .sq-who-head {
    margin-bottom: 36px;
  }

  .sq-root .sq-vision {
    padding: 32px 0 84px;
  }

  .sq-root .sq-stats {
    padding: 10px 0 90px;
  }

  .sq-root .sq-stats-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .sq-root .sq-cta {
    padding: 84px 0 0;
    border-radius: 50% 50% 0 0/44px 44px 0 0;
  }

  .sq-root .sq-cta .sq-container {
    background: #D2BCFF;
    padding-bottom: 70px;
  }

  .sq-root .sq-cta-art {
    justify-content: flex-start;
  }

  .sq-root .sq-cta-art img {
    width: 100%
  }

  .sq-root .sq-footer {
    padding: 64px 0 44px;
  }

  .sq-root .sq-footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .sq-root .sq-footer-divider {
    margin: 44px 0 40px;
  }

  .sq-root .sq-subscribe {
    flex-direction: column;
  }

  .sq-root .sq-subscribe .sq-btn {
    width: 100%;
  }

  .sq-root .sq-phero-art {
    justify-content: flex-start;
  }

  .sq-root .sq-phero-photo {
    width: min(380px, 100%);
  }

  .sq-root .sq-split {
    padding: 56px 0;
  }

  .sq-root .sq-story,
  .sq-root .sq-check {
    padding: 44px 0;
  }

  .sq-root .sq-panel {
    padding: 30px 24px;
  }

  .sq-root .sq-team {
    padding: 70px 0 44px;
  }

  .sq-root .sq-team .sq-h2 {
    margin-bottom: 36px;
  }

  .sq-root .sq-team-list {
    gap: 44px;
  }

  .sq-root .sq-team-member {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sq-root .sq-values {
    padding: 56px 0;
  }

  .sq-root .sq-values-cards {
    grid-template-columns: 1fr;
  }

  .sq-root .sq-ctacard {
    padding: 120px 0 60px;
  }

  .sq-root .sq-ctacard-box {
    padding: 34px 26px;
  }
}

/* ============================================================
   CONTACT + MAP (Contact Squeeze page blocks)
   ============================================================ */
.sq-root .sq-contact {
  position: relative;
  padding: 90px 0;
}

.sq-root .sq-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.sq-root .sq-contact-pill {
  margin-bottom: 22px;
}

.sq-root .sq-contact-copy .sq-h2 {
  margin-bottom: 22px;
}

.sq-root .sq-contact-body {
  font-size: 20px;
  color: #4A4757;
  font-weight: 300;
  line-height: 1.55;
  margin-bottom: 34px;
}

.sq-root .sq-contact-details {
  display: grid;
  gap: 22px;
}

.sq-root .sq-contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sq-root .sq-contact-item svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--sq-orange);
  margin-top: 2px;
}

.sq-root .sq-contact-item-text span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8A8794;
  margin-bottom: 2px;
}

.sq-root .sq-contact-item-text a,
.sq-root .sq-contact-item-text p {
  font-size: 18px;
  font-weight: 600;
  color: var(--sq-ink);
  line-height: 1.45;
}

.sq-root .sq-contact-item-text a:hover {
  color: var(--sq-orange);
}

.sq-root .sq-contact-form {
  padding: 40px 44px;
}

.sq-root .sq-contact-form-fallback h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.sq-root .sq-contact-form-fallback p {
  color: #4A4757;
  font-weight: 300;
  margin-bottom: 22px;
}

/* ---- Contact Form 7 (signed-off design, ported from the live site's
   Elementor kit custom CSS - squeezegroup.com/contact-squeeze). The form
   embeds via the block's Form shortcode field; the sq-field / sq-req /
   sq-btn classes come from the CF7 form body markup. Namespaced under
   .sq-root so the rules only reach forms inside squeeze blocks and
   outrank the design-system reset. The live form uses pure black ink and
   its own error red, kept here as local variables. ---- */
.sq-root .wpcf7 {
  --sq-cf7-ink: #000000;
  --sq-cf7-error: #870000;
  --sq-cf7-shadow: 6px 6px 0 0 var(--sq-cf7-ink);
}

.sq-root .wpcf7 .sq-field {
  margin: 28px 0;
}

.sq-root .wpcf7 .sq-field:first-child {
  margin-top: 0;
}

.sq-root .wpcf7 label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.sq-root .wpcf7 .sq-req {
  color: var(--sq-orange);
}

/* --- Inputs --- */
.sq-root .wpcf7 input[type="text"],
.sq-root .wpcf7 input[type="tel"],
.sq-root .wpcf7 input[type="email"],
.sq-root .wpcf7 textarea {
  width: 100% !important;
  padding: 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--sq-cf7-ink);
  background: #ffffff;
  border: 2px solid var(--sq-cf7-ink);
  border-radius: 10px;
  box-shadow: var(--sq-cf7-shadow);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.sq-root .wpcf7 textarea {
  height: 100px;
  min-height: 100px;
  resize: vertical;
}

.sq-root .wpcf7 input::placeholder,
.sq-root .wpcf7 textarea::placeholder {
  color: #9A9AA8;
}

.sq-root .wpcf7 input:focus,
.sq-root .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--sq-orange);
  box-shadow: 6px 6px 0 0 var(--sq-orange);
}

/* --- Validation --- */
.sq-root .wpcf7 .wpcf7-not-valid {
  border-color: var(--sq-cf7-error);
  box-shadow: 6px 6px 0 0 var(--sq-cf7-error);
}

.sq-root .wpcf7 .wpcf7-not-valid-tip {
  display: inline-block;
  padding: 10px 4px 0;
  font-size: 14px;
  color: var(--sq-cf7-error);
}

/* --- Consent checkbox --- */
.sq-root .wpcf7 .sq-field--consent .wpcf7-list-item {
  margin: 0;
}

.sq-root .wpcf7 .sq-field--consent .wpcf7-list-item-label {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.sq-root .wpcf7 input[type="checkbox"] {
  width: auto !important;
  padding: 0;
  margin-right: 10px;
  border: 0;
  box-shadow: none;
  vertical-align: -4px;
  accent-color: var(--sq-orange);
  cursor: pointer;
}

.sq-root .wpcf7 .sq-field--consent a {
  color: var(--sq-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sq-root .wpcf7 .sq-field--consent a:hover {
  text-decoration-thickness: 2px;
}

/* --- Submit --- */
.sq-root .wpcf7 input[type="submit"],
.sq-root .wpcf7 .sq-btn {
  width: 210px;
  padding: 16px 28px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--sq-orange);
  border: 2px solid var(--sq-cf7-ink);
  border-radius: 5px;
  box-shadow: var(--sq-cf7-shadow);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  transform: none;
}

.sq-root .wpcf7 input[type="submit"]:hover,
.sq-root .wpcf7 .sq-btn:hover {
  box-shadow: none;
  transform: none;
  background-color: var(--sq-orange);
}

.sq-root .wpcf7 input[type="submit"]:disabled,
.sq-root .wpcf7 .sq-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: var(--sq-cf7-shadow);
}

.sq-root .wpcf7-spinner {
  vertical-align: middle;
}

/* --- Response messages --- */
.sq-root .wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  font-size: 16px;
  border: 2px solid var(--sq-cf7-ink);
  border-radius: 10px;
  box-shadow: var(--sq-cf7-shadow);
}

.sq-root .wpcf7 form.sent .wpcf7-response-output {
  color: #1B5E20;
  background: #EDF7EE;
  border-color: #2E7D32;
  box-shadow: 6px 6px 0 0 #2E7D32;
}

.sq-root .wpcf7 form.invalid .wpcf7-response-output,
.sq-root .wpcf7 form.failed .wpcf7-response-output,
.sq-root .wpcf7 form.unaccepted .wpcf7-response-output {
  color: var(--sq-cf7-error);
  background: #FDECEA;
  border-color: var(--sq-cf7-error);
  box-shadow: 6px 6px 0 0 var(--sq-cf7-error);
}

/* ---- Map + address ---- */
.sq-root .sq-map {
  position: relative;
  padding: 0 0 100px;
}

.sq-root .sq-map-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: stretch;
}

.sq-root .sq-map-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 44px 46px;
}

.sq-root .sq-map-body {
  color: #4A4757;
  font-weight: 300;
  line-height: 1.55;
}

.sq-root .sq-map-address {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sq-root .sq-map-address svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--sq-orange);
  margin-top: 2px;
}

.sq-root .sq-map-address p {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

.sq-root .sq-map-card .sq-btn {
  margin-top: auto;
}

.sq-root .sq-map-frame {
  position: relative;
  min-height: 380px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(45, 45, 58, .1);
  box-shadow: 0 18px 40px rgba(45, 45, 58, .06);
}

.sq-root .sq-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sq-root .sq-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDEAF6;
  color: #8A8794;
  font-weight: 600;
}

@media (max-width:1024px) {

  .sq-root .sq-contact-grid,
  .sq-root .sq-map-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sq-root .sq-map-frame {
    min-height: 320px;
  }

  .sq-root .wpcf7 input[type="submit"],
  .sq-root .wpcf7 .sq-btn {
    width: 100%;
    margin-bottom: 20px;
  }
}

@media (max-width:767px) {
  .sq-root .sq-contact {
    padding: 60px 0;
  }

  .sq-root .sq-map {
    padding: 0 0 70px;
  }

  .sq-root .sq-contact-form {
    padding: 28px 24px;
  }

  .sq-root .sq-map-card {
    padding: 30px 26px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce) {

  .sq-root *,
  .sq-root *::before,
  .sq-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .sq-root .sq-load,
  .sq-root .sq-load-art,
  .sq-root .sq-blob,
  .sq-root .sq-reveal,
  .sq-root .sq-hero::before,
  .sq-root .sq-cta::before {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* HIDE ELEMENTOR STUFF */
header.elementor,
footer.elementor-element {
  display: none !important;
}

/* ============================================================
   BLOG - listing template (template-squeeze-blog.php)
   Filter sidebar + dynamic post grid. Self-contained section:
   its responsive rules live at the bottom of this block.
   ============================================================ */
.sq-root .sq-blog {
  padding-bottom: 100px;
}

/* ---- Blog hero: copy-only variant of the page-hero band. No photo
   column, and no negative pull so the filter/grid layout starts cleanly
   below the curved band. ---- */
.sq-root .sq-blog-hero .sq-phero-grid {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.sq-root .sq-blog-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 100px;
}

/* ---- Filter sidebar: each top-level category is its own block ---- */
.sq-root .sq-blog-sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sq-root .sq-blog-filter-block {
  background: var(--sq-white);
  border: 1px solid rgba(45, 45, 58, .1);
  border-radius: 16px;
  padding: 10px;
}

.sq-root .sq-blog-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--sq-ink);
  padding: 10px 12px;
  border-radius: 10px;
  transition: background-color .2s ease, color .2s ease;
}

.sq-root .sq-blog-filter:hover {
  background: #F4F2F7;
  color: var(--sq-orange);
}

.sq-root .sq-blog-filter.sq-active {
  background: var(--sq-orange);
  color: #fff;
}

.sq-root .sq-blog-filter-count {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: #F4F2F7;
  color: #4A4757;
  flex-shrink: 0;
}

.sq-root .sq-blog-filter.sq-active .sq-blog-filter-count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.sq-root .sq-blog-filter-children {
  margin: 2px 0 4px;
  padding-left: 14px;
}

.sq-root .sq-blog-filter--child {
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
}

/* ---- Post grid ---- */
.sq-root .sq-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  transition: opacity .2s ease;
}

.sq-root .sq-blog-grid.sq-blog-loading {
  opacity: .45;
  pointer-events: none;
}

.sq-root .sq-post-card {
  animation: sq-card-in .5s var(--sq-ease) both;
}

@keyframes sq-card-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sq-root .sq-post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sq-white);
  border: 2px solid var(--sq-navy);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sq-shadow);
  transition: transform .3s var(--sq-ease), box-shadow .3s var(--sq-ease);
}

.sq-root .sq-post-card-link:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--sq-navy);
}

.sq-root .sq-post-card-media {
  height: 190px;
  background: var(--sq-purple-card);
}

.sq-root .sq-post-card-media img,
.sq-root .sq-post-card-media-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sq-root .sq-post-card-media-fallback {
  background:
    radial-gradient(circle at 78% 24%, var(--sq-orange) 0 34px, transparent 35px),
    var(--sq-purple-card);
}

.sq-root .sq-post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.sq-root .sq-post-card-body .sq-pill {
  align-self: flex-start;
  margin-bottom: 14px;
  font-size: 13px;
  padding: 5px 12px;
}

.sq-root .sq-post-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}

.sq-root .sq-post-card-body p {
  font-size: 16px;
  color: #4A4757;
  line-height: 1.5;
  margin-bottom: 18px;
}

.sq-root .sq-post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  font-size: 14px;
  color: #4A4757;
}

.sq-root .sq-post-card-link:hover .sq-arrow-btn {
  background: var(--sq-orange);
  color: #fff;
  transform: translateX(4px);
}

.sq-root .sq-blog-empty {
  font-size: 18px;
  color: #4A4757;
  padding: 40px 0;
}

.sq-root .sq-blog-more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ============================================================
   SINGLE POST (single.php)
   ============================================================ */
.sq-root .sq-post-hero {
  padding-bottom: 90px;
}

.sq-root .sq-post-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.sq-root .sq-post-hero-inner>p:first-child {
  margin-bottom: 22px;
}

.sq-root .sq-post-hero h1 {
  font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.sq-root .sq-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #4A4560;
}

.sq-root .sq-post-article {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 0 90px;
}

.sq-root .sq-post-thumb {
  margin: 0 0 44px;
}

.sq-root .sq-post-thumb img {
  width: 100%;
  border-radius: 24px;
  border: 2px solid var(--sq-navy);
  box-shadow: var(--sq-shadow);
}

/* ---- Post content typography ---- */
.sq-root .sq-post-content>* {
  margin-bottom: 22px;
}

.sq-root .sq-post-content p {
  font-size: 18px;
  line-height: 1.7;
  color: #3E3A4E;
}

.sq-root .sq-post-content h2,
.sq-root .sq-post-content h3,
.sq-root .sq-post-content h4 {
  color: var(--sq-ink);
  line-height: 1.2;
  margin-top: 40px;
}

.sq-root .sq-post-content h2 {
  font-size: 30px;
  font-weight: 700;
}

.sq-root .sq-post-content h3 {
  font-size: 24px;
  font-weight: 700;
}

.sq-root .sq-post-content h4 {
  font-size: 20px;
  font-weight: 600;
}

/* re-enable list markers inside content (the sq-root reset removes them) */
.sq-root .sq-post-content ul,
.sq-root .sq-post-content ol {
  padding-left: 26px;
  font-size: 18px;
  line-height: 1.7;
  color: #3E3A4E;
}

.sq-root .sq-post-content ul {
  list-style: disc;
}

.sq-root .sq-post-content ol {
  list-style: decimal;
}

.sq-root .sq-post-content li {
  margin-bottom: 8px;
}

.sq-root .sq-post-content a {
  color: var(--sq-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sq-root .sq-post-content a:hover {
  color: var(--sq-orange-deep);
}

.sq-root .sq-post-content blockquote {
  border-left: 4px solid var(--sq-orange);
  background: var(--sq-white);
  border-radius: 0 16px 16px 0;
  padding: 22px 28px;
  font-size: 20px;
  font-weight: 500;
  color: var(--sq-ink);
}

.sq-root .sq-post-content blockquote p:last-child {
  margin-bottom: 0;
}

.sq-root .sq-post-content img {
  border-radius: 18px;
}

.sq-root .sq-post-content figcaption {
  font-size: 14px;
  color: #4A4757;
  margin-top: 10px;
}

/* ---- Prev / next ---- */
.sq-root .sq-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(45, 45, 58, .12);
}

.sq-root .sq-post-nav a {
  font-size: 16px;
  font-weight: 600;
  color: var(--sq-ink);
  max-width: 46%;
  transition: color .2s ease;
}

.sq-root .sq-post-nav a:hover {
  color: var(--sq-orange);
}

.sq-root .sq-post-nav-next {
  margin-left: auto;
  text-align: right;
}

/* ---- Share buttons (post hero) ---- */
.sq-root .sq-post-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.sq-root .sq-post-share-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4A4560;
}

.sq-root .sq-post-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sq-white);
  border: 1.5px solid var(--sq-navy);
  color: var(--sq-ink);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--sq-ease);
}

.sq-root .sq-post-share a:hover {
  background: var(--sq-orange);
  border-color: var(--sq-orange);
  color: #fff;
  transform: translateY(-2px);
}

.sq-root .sq-post-share svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---- Author bio (end of post) ---- */
.sq-root .sq-author-bio {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 56px;
  padding: 32px 36px;
  background: var(--sq-white);
  border: 1px solid rgba(45, 45, 58, .1);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(45, 45, 58, .06);
}

.sq-root .sq-author-bio img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sq-root .sq-author-bio-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8A8794;
  margin-bottom: 4px;
}

.sq-root .sq-author-bio-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.sq-root .sq-author-bio-desc {
  color: #4A4757;
  font-weight: 300;
  line-height: 1.55;
}

/* ---- Blog + single post responsive ---- */
@media (max-width: 1300px) {
  .sq-root .sq-blog-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
  }

}

@media (max-width: 1024px) {
  .sq-root .sq-blog-layout {
    grid-template-columns: 1fr;
  }

  .sq-root .sq-blog-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .sq-root .sq-post-hero {
    padding-top: 150px;
    padding-bottom: 70px;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .sq-root .sq-ctacard-art img {
    bottom: 150px;
    width: 480px;
  }
}

@media (max-width: 767px) {
  .sq-root .sq-blog {
    padding-bottom: 76px;
  }

  .sq-root .sq-blog-head {
    margin-bottom: 32px;
  }

  .sq-root .sq-blog-sidebar {
    grid-template-columns: 1fr;
  }

  .sq-root .sq-blog-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .sq-root .sq-post-hero {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  .sq-root .sq-post-article {
    padding: 44px 0 70px;
  }

  .sq-root .sq-post-nav {
    flex-direction: column;
  }

  .sq-root .sq-post-nav a {
    max-width: 100%;
  }

  .sq-root .sq-post-nav-next {
    margin-left: 0;
    text-align: left;
  }

  .sq-root .sq-author-bio {
    flex-direction: column;
    gap: 16px;
    padding: 26px 24px;
  }
}